Update index.html

index.html

@@ -176,21 +176,23 @@
         </div>
 
         <div class="card mb-6">
-            <h2 class="text-xl font-semibold mb-4 text-gray-700">Audio and Reading Controls</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+            <h2 class="text-xl font-semibold mb-4 text-gray-700">LLM and Audio Controls</h2>
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                 
-                <!-- Voice Selection (Kept for Future APIs or UX) -->
-                <div>
-                    <label for="voiceSelector" class="block text-sm font-medium text-gray-700">Voice (gTTS)</label>
-                    <select id="voiceSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md shadow-sm">
-                        <option value="us_man">American Man</option>
-                        <option value="us_woman">American Woman</option>
+                <!-- LLM Provider Selector -->
+                <div class="md:col-span-2">
+                    <label for="modelSelector" class="block text-sm font-medium text-gray-700">AI Model Provider (Context/Translation)</label>
+                    <select id="modelSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md shadow-sm">
+                        <!-- Format: provider:model-name -->
+                        <option value="gemini:gemini-2.5-flash">Google Gemini (Free Tier)</option>
+                        <option value="groq:mixtral-8x7b-32768">Groq (Mixtral 8x7b - Fast)</option>
+                        <option value="groq:llama3-8b-8192">Groq (Llama 3 8B)</option>
                     </select>
                 </div>
 
                 <!-- Speed Control -->
                 <div>
-                    <label for="speedSelector" class="block text-sm font-medium text-gray-700">Speaking Rate</label>
+                    <label for="speedSelector" class="block text-sm font-medium text-gray-700">Speaking Rate (gTTS)</label>
                     <select id="speedSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md shadow-sm">
                         <option value="1.0">Normal (1.0x)</option>
                         <option value="0.75">Slow (0.75x)</option>
@@ -280,6 +282,7 @@
         const flashcardList = document.getElementById('flashcardList');
         const noCardsMessage = document.getElementById('noCardsMessage');
         const speedSelector = document.getElementById('speedSelector');
+        const modelSelector = document.getElementById('modelSelector'); // New Selector
         
         const MAX_CHARS = 5000;
         let isLooping = false;
@@ -418,22 +421,32 @@
             const spinner = isFlashcard ? document.getElementById('cardSpinner') : document.getElementById('explanationSpinner');
             const explanationText = isFlashcard ? null : document.getElementById('explanationText');
             const translationText = isFlashcard ? null : document.getElementById('translationText');
+
+            const modelValue = modelSelector.value;
             
             if (!isFlashcard) {
+                // Show loading state in modal
                 explanationText.textContent = '';
                 translationText.textContent = '';
             }
             spinner.classList.remove('hidden');
 
             try {
+                // Route for the backend using Gemini/Groq for explanation/translation
                 const response = await fetch('/explain-proxy', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ word: word, context: context, for_flashcard: isFlashcard })
+                    // Sends the clicked word, context, and the selected model
+                    body: JSON.stringify({ 
+                        word: word, 
+                        context: context, 
+                        for_flashcard: isFlashcard,
+                        model: modelValue // NEW: Passes provider:model-name
+                    })
                 });
 
                 if (!response.ok) {
-                    const errorMsg = `HTTP Error: ${response.status}. Check if GEMINI_API_KEY is configured in your Space.`;
+                    const errorMsg = `HTTP Error: ${response.status}. Check if GEMINI_API_KEY/GROQ_API_KEY is configured in your Space for the selected model.`;
                     throw new Error(errorMsg);
                 }
                 
@@ -449,7 +462,7 @@
 
             } catch (error) {
                 console.error('Error fetching context from AI:', error);
-                const msg = 'Error connecting to AI. Check if GEMINI_API_KEY is configured correctly.';
+                const msg = `AI analysis failed. Error: ${error.message}`;
                 if (!isFlashcard) {
                     explanationText.textContent = msg;
                     translationText.textContent = msg;