Add Groq Llama 3.2 Vision implementation with strict formatting constraints

ai_router.py

@@ -1,6 +1,7 @@
 from models.blip_model import blip_answer
 from models.reasoning_model import reasoning_answer
 from models.gemini_vision import gemini_vision_answer
+from models.groq_vision import groq_vision_answer
 
 try:
     from deep_translator import GoogleTranslator
@@ -21,6 +22,8 @@ def route_model(model_choice, image, question, lang="en"):
         cap, ans, exp = reasoning_answer(image, question)
     elif model_choice == "gemini":
         cap, ans, exp = gemini_vision_answer(image, question, lang)
+    elif model_choice == "groq":
+        cap, ans, exp = groq_vision_answer(image, question, lang)
     else:
         cap, ans, exp = "Unknown", "Invalid", "Invalid"
 

config.py

@@ -13,4 +13,5 @@ GEMINI_API_KEY = os.getenv("GEMINI_API_KEY", "AIzaSyB1fMfnnp2etuOVWiLrecdMp3_0Gb
 # ===== Security Limits =====
 MAX_IMAGE_SIZE_MB = 5
 RATE_LIMIT_PER_MINUTE = 30
-HF_TOKEN = os.getenv("HF_TOKEN", "")
+HF_TOKEN = os.getenv("HF_TOKEN", "")
+GROQ_API_KEY = os.getenv("GROQ_API_KEY", "")

models/groq_vision.py

@@ -0,0 +1,91 @@
+import os
+import io
+import base64
+import requests
+import re
+from config import GROQ_API_KEY
+
+def groq_vision_answer(image, question, lang="en"):
+    token = GROQ_API_KEY or os.getenv("GROQ_API_KEY")
+    if not token:
+        return "Setup Required", "Groq API Key is missing.", "Please set the GROQ_API_KEY in config.py or environment."
+
+    try:
+        model_id = "llama-3.2-11b-vision-preview"
+        api_url = "https://api.groq.com/openai/v1/chat/completions"
+        
+        headers = {
+            "Authorization": f"Bearer {token}",
+            "Content-Type": "application/json"
+        }
+        
+        if image.mode != 'RGB':
+            image = image.convert('RGB')
+        
+        # Max resolution of 600x600 for reliable API processing
+        image.thumbnail((600, 600))
+        
+        buffered = io.BytesIO()
+        image.save(buffered, format="JPEG", quality=85)
+        img_b64 = base64.b64encode(buffered.getvalue()).decode("utf-8")
+        img_data_url = f"data:image/jpeg;base64,{img_b64}"
+        
+        prompt = f"""Analyze this image carefully.
+        
+Question:
+{question}
+
+CRITICAL RULES FOR YOUR RESPONSE:
+1. You MUST respond strictly in the language code: {lang}. All text in your output must be translated to '{lang}'.
+2. You MUST use EXACTLY the format below with these English labels.
+3. The Caption MUST be exactly 1 line only.
+4. The Final Answer MUST be exactly 1 line only.
+5. The Explanation MUST be strictly 2 to 3 lines maximum. Be very concise and do not exceed this limit!
+
+Respond strictly following this exact structure without any deviations or markdown blocks.
+
+Caption: <one-line caption>
+Final Answer: <one-line answer>
+Explanation: <2-3 lines max explanation>"""
+
+        payload = {
+            "model": model_id,
+            "messages": [
+                {
+                    "role": "user",
+                    "content": [
+                        {"type": "text", "text": prompt},
+                        {"type": "image_url", "image_url": {"url": img_data_url}}
+                    ]
+                }
+            ],
+            "max_tokens": 512,
+            "temperature": 0.2
+        }
+        
+        response = requests.post(api_url, headers=headers, json=payload, timeout=60)
+        
+        if response.status_code != 200:
+            return "Groq Server Error", f"HTTP {response.status_code}", response.text
+            
+        data = response.json()
+        raw_text = data["choices"][0]["message"]["content"]
+        
+        # Parse response using regex
+        caption_match = re.search(r'Caption:\s*(.*?)(?=Final Answer:|$)', raw_text, re.IGNORECASE | re.DOTALL)
+        answer_match = re.search(r'Final Answer:\s*(.*?)(?=Explanation:|$)', raw_text, re.IGNORECASE | re.DOTALL)
+        explanation_match = re.search(r'Explanation:\s*(.*)', raw_text, re.IGNORECASE | re.DOTALL)
+
+        caption = caption_match.group(1).strip() if caption_match else "Caption not generated correctly."
+        answer = answer_match.group(1).strip() if answer_match else "Answer not generated correctly."
+        explanation = explanation_match.group(1).strip() if explanation_match else "Explanation not generated correctly."
+
+        # Filter out markdown bolds if they leaked and force one-line where needed
+        caption = caption.replace("**", "").replace("\n", " ")
+        answer = answer.replace("**", "").replace("\n", " ")
+        explanation = explanation.replace("**", "")
+
+        return caption, answer, explanation
+        
+    except Exception as e:
+        return "Groq API Error", "The request crashed.", repr(e)

static/app.js

@@ -2,7 +2,7 @@
 let appState = {
     username: '',
     logs: [],
-    stats: { total: 0, local: 0, gemini: 0 },
+    stats: { total: 0, local: 0, gemini: 0, groq: 0 },
     geminiEnabled: true
 };
 
@@ -355,6 +355,7 @@ async function fetchLogs() {
         appState.stats.total = appState.logs.length;
         appState.stats.local = appState.logs.filter(l => ['local', 'blip', 'reasoning'].includes(l.model.toLowerCase())).length;
         appState.stats.gemini = appState.logs.filter(l => ['gemini', 'external'].includes(l.model.toLowerCase())).length;
+        appState.stats.groq = appState.logs.filter(l => ['groq'].includes(l.model.toLowerCase())).length;
         
         updateDashboardView();
     } catch(err) {
@@ -364,7 +365,7 @@ async function fetchLogs() {
 
 function updateDashboardView() {
     els.statTotal.innerText = appState.stats.total;
-    els.statModels.innerText = `${appState.stats.local} Local / ${appState.stats.gemini} Cloud`;
+    els.statModels.innerText = `${appState.stats.local} Local / ${appState.stats.gemini + appState.stats.groq} Cloud`;
     renderLogs();
     updateChart();
 }
@@ -378,7 +379,7 @@ function renderLogs(filter = '') {
         tr.innerHTML = `
             <td>${log.timestamp}</td>
             <td><span class="user-badge" style="color: var(--text-secondary);"><i class="fa-solid fa-user"></i> ${log.user}</span></td>
-            <td><span style="color: ${['gemini'].some(m => log.model.includes(m)) ? 'var(--accent)' : 'var(--success)'}">${log.model.toUpperCase().replace('_', ' ')}</span></td>
+            <td><span style="color: ${['gemini', 'groq'].some(m => log.model.includes(m)) ? 'var(--accent)' : 'var(--success)'}">${log.model.toUpperCase().replace('_', ' ')}</span></td>
             <td>${log.question.length > 50 ? log.question.substring(0, 50) + '...' : log.question}</td>
         `;
         els.logsBody.appendChild(tr);
@@ -408,12 +409,12 @@ function initChart() {
 
 function getChartData() {
     return {
-        labels: ['BLIP + FLAN (Local)', 'Gemini AI (Cloud)'],
+        labels: ['BLIP + FLAN (Local)', 'Gemini AI (Cloud)', 'Groq Vision (Cloud)'],
         datasets: [{
             label: 'Queries',
-            data: [appState.stats.local, appState.stats.gemini],
-            backgroundColor: ['rgba(16, 185, 129, 0.6)', 'rgba(99, 102, 241, 0.6)'],
-            borderColor: ['rgba(16, 185, 129, 1)', 'rgba(99, 102, 241, 1)'],
+            data: [appState.stats.local, appState.stats.gemini, appState.stats.groq],
+            backgroundColor: ['rgba(16, 185, 129, 0.6)', 'rgba(99, 102, 241, 0.6)', 'rgba(245, 158, 11, 0.6)'],
+            borderColor: ['rgba(16, 185, 129, 1)', 'rgba(99, 102, 241, 1)', 'rgba(245, 158, 11, 1)'],
             borderWidth: 1, borderRadius: 6
         }]
     };

templates/index.html

@@ -97,6 +97,7 @@
                                     <select id="model-selector">
                                         <option value="local">BLIP + FLAN (Local)</option>
                                         <option value="gemini" id="gemini-option">Gemini 3.1 Flash Vision (High Quota)</option>
+                                        <option value="groq" id="groq-option">Groq Llama 3.2 Vision (Strict Constraints)</option>
                                     </select>
                                 </div>
                                 <div class="control-group" style="flex: 1;">