Front end with upload and vision features working (open ai r1 and grok vision with void ai

GROK_SETUP.md

@@ -0,0 +1,75 @@
+# Grok-2-Vision Integration Setup
+
+## How to Configure Your Grok API Key
+
+The SEO Image Renamer now supports Grok-2-Vision for enhanced image analysis. Follow these steps to set up your API key:
+
+### Step 1: Get Your Grok API Key
+1. Visit [https://console.x.ai/](https://console.x.ai/)
+2. Sign up or log in to your account
+3. Navigate to API Keys section
+4. Create a new API key for your project
+5. Copy the generated API key
+
+### Step 2: Update the .env File
+1. Open the `.env` file in your project directory
+2. Find the line that says: `GROK_API_KEY=your_grok_api_key_here`
+3. Replace `your_grok_api_key_here` with your actual Grok API key
+4. Save the file
+
+Example:
+```env
+GROK_API_KEY=gsk-proj-abc123def456ghi789jkl012mno345pqr678stu901vwx234yz567
+```
+
+### Step 3: Test the Integration
+1. Open your SEO Image Renamer website
+2. Upload some images
+3. Add keywords and click "Generate SEO Keywords"
+4. Check the browser console for the message: "Grok API Key configured: Yes"
+
+## What's New with Grok-2-Vision
+
+### Enhanced Image Analysis
+- **Better Keyword Extraction**: Grok-2-Vision provides more accurate and contextual keywords from your images
+- **SEO-Focused Analysis**: The AI is specifically prompted to identify keywords useful for SEO image naming
+- **Improved Accuracy**: Better object and action recognition compared to previous vision models
+
+### Technical Improvements
+- **Dedicated Vision API**: Separate API endpoint optimized for vision tasks
+- **Enhanced Prompts**: Specialized prompts for extracting SEO-relevant keywords
+- **Better Error Handling**: Improved fallback mechanisms if vision analysis fails
+- **Cleaner Responses**: Better parsing and filtering of AI responses
+
+## Troubleshooting
+
+### Common Issues
+
+**Issue**: "Grok API Key configured: No" in console
+**Solution**: Make sure you've replaced `sk-voidai-vVU2HHiq1txTNmXdZOP98LzARmi4HsptTixMqFSX4yBbw8ogvmKlJEPeKrH1hwEd6j6AnED9LsR6ztPtRMT7UzeLOyxQkasbwKow` with your actual API key in the .env file
+
+**Issue**: Vision analysis fails or returns generic keywords
+**Solution**: 
+1. Check that your API key is valid and has sufficient credits
+2. Ensure your API key has access to Grok-2-Vision model
+3. Check browser console for specific error messages
+
+**Issue**: .env file not loading
+**Solution**: 
+1. Make sure the .env file is in the same directory as index.html
+2. Ensure your web server allows access to .env files (may need to serve from a local server)
+3. For production, you may need to hardcode the API key in the JavaScript file
+
+### API Limits
+- Grok-2-Vision has rate limits and usage quotas
+- If you hit limits, the system will fallback to generic keywords
+- Monitor your usage in the X.AI console
+
+## Security Note
+Keep your API key secure and never commit it to public repositories. The .env file should be added to your .gitignore file.
+
+## Support
+If you encounter issues with the Grok-2-Vision integration, check:
+1. X.AI API documentation: [https://docs.x.ai/](https://docs.x.ai/)
+2. Your API key permissions and quotas
+3. Browser console for detailed error messages