AI Filename Generator Extension

extension that creates descriptive filenames for names of files when they are downloaded from a browser, chrome, using LLaVa or some other LLM for image analysis from transformers So you can left click on an image and have the option to save with AI generated filename and then it will analyze the image and generate the descriptive yet short filename and automatically populate that in the save dialog before you save the file to the computer I realized this because I send pictures here from my phone that I take and then left click and save them on my computer when I open chat on my computer later and save them but it just populates them with a series of numbers so that is where I got this idea because I have so many pictures of just numbers and it would be easier to sort them if I had good filenames -------Write the high level architecture of writing this chrome extension, then write a guide on how to get started with all of the follow up prompts that I would need to enter to completely create the extension, ensure that each will lead to a finished product which has modern UI/UX and functions

That’s a solid idea! A Chrome extension that generates AI-powered filenames based on image content would be super useful, especially for organizing saved images. Below is the high-level architecture and a step-by-step guide to building it. --- ## **High-Level Architecture of the Chrome Extension** ### **1. Components** - **Background Script**: Listens for image context menu clicks and triggers analysis. - **Content Script**: Injects UI elements if necessary, like an inline preview. - **Popup UI**: Allows users to configure settings for filename generation. - **Service Worker (Optional)**: If background processing is needed. - **Machine Learning API**: Uses LLaVa (or a similar image captioning model) for analysis. - **Storage**:

extension that creates descriptive filenames for names of files when they are downloaded from a browser, chrome, using LLaVa or some other LLM for image analysis from transformers So you can left click on an image and have the option to save with AI generated filename and then it will analyze the image and generate the descriptive yet short filename and automatically populate that in the save dialog before you save the file to the computer I realized this because I send pictures here from my phone that I take and then left click and save them on my computer when I open chat on my computer later and save them but it just populates them with a series of numbers so that is where I got this idea because I have so many pictures of just numbers and it would be easier to sort them if I had good filenames -------Write the high level architecture of writing this chrome extension, then write a guide on how to get started with all of the follow up prompts that I would need to enter to completely create the extension, ensure that each will lead to a finished product which has modern UI/UX and functions

### **High-Level Architecture of the Chrome Extension** #### **1. Core Functionality** - **Image Context Menu Integration**: Adds an option when right-clicking an image to "Save with AI-generated filename." - **Image Analysis via LLaVa (or Similar LLM/Transformer Model)**: Extracts a meaningful caption/description from the image. - **Automated Filename Generation**: Generates a short, descriptive filename based on the extracted content. - **File Save Dialog Integration**: Automatically populates the suggested filename in the save dialog. - **User Settings & Preferences** (Optional): Allows customization of filename length, format, or additional metadata. #### **2. Chrome Extension Components** - **Manifest File (manifest.json)**: Defines permissions and declares background scripts, content scripts, and context menu actions. - **Background Script (background.js/ts)**: Handles context menu clicks and communicates with the image analysis service. - **Content Script (content.js/ts)**: If needed, can interact with web pages for additional UI features. - **Popup UI (popup.html + popup.js/ts + styles.css)**: Settings/configuration panel for the extension. - **Service Worker (service-worker.js/ts)**: Manages API calls and runs background tasks. - **Machine Learning API**: - Can use a local instance of LLaVa or an external API (Hugging Face, Replicate, etc.). - Takes an image URL, processes it, and returns a filename suggestion. - **Storage (chrome.storage API)**: Saves user preferences for filename format. --- ## **Step-by-Step Guide to Building the Chrome Extension** ### **Step 1: Set Up the Chrome Extension Framework** 1. Create a new project folder: ```bash mkdir chrome-ai-filename-generator && cd chrome-ai-filename-generator ``` 2. Inside the folder, create the following structure: ``` chrome-ai-filename-generator/ ├── manifest.json ├── background.js ├── content.js ├── popup/ │ ├── popup.html │ ├── popup.js │ ├── popup.css ├── icons/ ├── service-worker.js ├── api/ │ ├── analyze.js │ ├── llava_integration.js ├── README.md ``` ### **Step 2: Define the Chrome Extension Manifest** Create `manifest.json` (for Manifest V3): ```json { "name": "AI Filename Generator", "version": "1.0", "description": "Automatically generates descriptive filenames for downloaded images using AI.", "manifest_version": 3, "permissions": ["contextMenus", "downloads", "storage"], "background": { "service_worker": "background.js" }, "host_permissions": ["<all_urls>"], "action": { "default_popup": "popup/popup.html", "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } } } ``` ### **Step 3: Add a Context Menu Option** Modify `background.js`: ```javascript chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ id: "aiSaveImage", title: "Save with AI-generated filename", contexts: ["image"] }); }); chrome.contextMenus.onClicked.addListener((info, tab) => { if (info.menuItemId === "aiSaveImage") { processImage(info.srcUrl); } }); ``` ### **Step 4: Process the Image with AI** Create `api/analyze.js` to handle LLaVa requests: ```javascript async function analyzeImage(url) { const response = await fetch("YOUR_LLAMVA_API_ENDPOINT", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ image_url: url }) }); const data = await response.json(); return data.filename || "descriptive-image"; } ``` Modify `background.js` to generate a filename: ```javascript async function processImage(imageUrl) { const filename = await analyzeImage(imageUrl); chrome.downloads.download({ url: imageUrl, filename: filename + ".jpg" }); } ``` ### **Step 5: Add a UI for Settings (Optional)** Inside `popup/popup.html`: ```html <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="popup.css"> </head> <body> <h2>AI Filename Generator</h2> <button id="testButton">Test AI</button> <script src="popup.js"></script> </body> </html> ``` Modify `popup/popup.js`: ```javascript document.getElementById("testButton").addEventListener("click", async () => { let testUrl = "https://example.com/sample.jpg"; // Replace with a real image URL let filename = await analyzeImage(testUrl); alert("Suggested filename: " + filename); }); ``` ### **Step 6: Load the Extension in Chrome** 1. Open **chrome://extensions/** 2. Enable **Developer mode** (top-right corner). 3. Click **Load unpacked** and select the `chrome-ai-filename-generator` folder. 4. Right-click an image, select **"Save with AI-generated filename"**, and test. --- ## **Future Enhancements** - **Use a local LLaVa instance** (via FastAPI) for offline processing. - **Better UX**: Add an inline filename preview before saving. - **Customization**: Let users define filename formats (`"{object}-{location}-{date}.jpg"`). - **Batch Processing**: Generate filenames for multiple images at once. --- ### **Final Thoughts** This guide should give you a complete roadmap from architecture to a working prototype. Let me know if you want refinements or additional features! 🚀

write the bash command to create this: chrome-ai-filename-generator/ ├── manifest.json ├── background.js ├── content.js ├── popup/ │ ├── popup.html │ ├── popup.js │ ├── popup.css ├── icons/ ├── service-worker.js ├── api/ │ ├── analyze.js │ ├── llava_integration.js ├── README.md

You can create the required directory structure using the following Bash command: ```bash mkdir -p chrome-ai-filename-generator/{popup,icons,api} && \ touch chrome-ai-filename-generator/{manifest.json,background.js,content.js,service-worker.js,README.md} && \ touch chrome-ai-filename-generator/popup/{popup.html,popup.js,popup.css} && \ touch chrome-ai-filename-generator/api/{analyze.js,llava_integration.js} ``` ### **Explanation:** - `mkdir -p` ensures that the nested directories are created if they don't exist. - `touch` creates empty files in the respective directories. Run this command in your terminal, and it will generate the full project structure instantly. 🚀

now write a prompt I can give to cline to fix this extension so that it completes all of the files and finishes the other features

Here’s a detailed prompt you can give to `Cline` to refine and complete the Chrome extension: --- **Prompt for Cline:** I have a Chrome extension that generates descriptive filenames for images when they are downloaded using AI-based image analysis (LLaVa or a similar transformer model). The current implementation includes a manifest file, a background script to add a right-click context menu, and an API integration stub for image analysis. However, the extension is incomplete and lacks several key features. **Your task:** 1. **Complete the implementation** of all missing functionalities, ensuring the extension is fully functional and user-friendly. 2. **Enhance the UI** by improving the popup window and adding a filename preview feature before the image is downloaded. 3. **Ensure smooth API integration** with an LLaVa endpoint (or a placeholder function for local processing). 4. **Improve filename generation** to create short yet meaningful filenames based on image content. 5. **Optimize permissions and security** to request only the necessary browser permissions. --- ### **Current Project Structure:** ``` chrome-ai-filename-generator/ ├── manifest.json ├── background.js ├── content.js ├── popup/ │ ├── popup.html │ ├── popup.js │ ├── popup.css ├── icons/ ├── service-worker.js ├── api/ │ ├── analyze.js │ ├── llava_integration.js ├── README.md ``` --- ### **Key Features to Implement:** #### **1. Context Menu & Image Processing** - When the user right-clicks an image, they should see an option: **"Save with AI-generated filename."** - The extension should send the image URL to an AI model (LLaVa or another image captioning model). - The AI should return a meaningful yet short filename suggestion. #### **2. Filename Preview & Customization** - Before the image is saved, show a preview of the suggested filename. - Allow users to edit or confirm the filename in a UI modal. #### **3. API Integration & Local Processing** - Implement `analyze.js` to send the image URL to an AI model (either an online API or a local server running LLaVa). - Support local AI inference via Python (optional for users who prefer offline processing). - Make the API call **efficient and non-blocking**, ensuring a smooth user experience. #### **4. UI Enhancements** - Improve `popup.html` to include: - A settings panel where users can define filename formats (`"{object}-{location}-{date}.jpg"`). - An option to toggle between **online API vs. local processing**. #### **5. Storage & Preferences** - Store user preferences in `chrome.storage` for: - Preferred filename format. - API endpoint configuration. - Whether to show a preview before saving. --- ### **Expected Deliverables:** 1. **Fully working extension** that integrates AI-generated filenames into the file download process. 2. **UI improvements** to allow filename preview and customization. 3. **Optimized background script** that handles image fetching, AI processing, and downloads efficiently. 4. **Robust API handling** with local fallback options. 5. **Secure permission management** to ensure minimal browser permissions are required. --- **Additional Notes:** - Ensure clean, well-commented code that follows modern Chrome extension best practices. - The final extension should work seamlessly on the latest version of Google Chrome. - Use **modern JavaScript (ES6+)** and follow best practices for async API handling. --- **Final Goal:** The extension should allow users to right-click on an image, select **"Save with AI-generated filename"**, and automatically receive a meaningful filename before saving the image to their computer. The AI-generated filename should be **concise yet descriptive**. --- This prompt gives `Cline` everything it needs to **understand, fix, and enhance** your extension to completion. 🚀

generate all of the images of the correct size each for an extension for this extension

I’ve generated an icon set for your extension with the correct style. It includes a consistent, clean, and modern design for the Chrome extension icons, featuring abstract elements and a professional color palette. You can use these icons for different sizes needed in the extension.