Update index.html

index.html

@@ -209,6 +209,24 @@
                 </div>
             </div>
 
+            <!-- Context Selector (NEW) -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                <div>
+                    <label for="contextSelector" class="block text-sm font-medium text-gray-700">Vocabulary Context / Focus Area</label>
+                    <select id="contextSelector" 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="General/Social (Casual conversation, daily life)">General/Social (Casual conversation, daily life)</option>
+                        <option value="Professional/Business (Meetings, emails, reports)">Professional/Business (Meetings, emails, reports)</option>
+                        <option value="Technical/IT (Software, Engineering, Tech topics)">Technical/IT (Software, Engineering, Tech topics)</option>
+                    </select>
+                </div>
+                <!-- Full Translation Button -->
+                <div class="flex items-end">
+                    <button id="translateFullTextButton" onclick="translateFullText()" class="btn-secondary w-full py-2.5 rounded-lg font-semibold disabled:opacity-50">
+                        Translate Full Text (PT)
+                    </button>
+                </div>
+            </div>
+
             <!-- Player Controls and Phrase Loop -->
             <div class="mt-4 border-t pt-4">
                 <audio id="audioPlayer" controls class="w-full mb-4"></audio>
@@ -223,8 +241,37 @@
                 </div>
             </div>
         </div>
+        
+        <!-- Writing/Translation Activity Panel (NEW) -->
+        <div class="card mb-6">
+            <h2 class="text-xl font-semibold mb-4 text-gray-700">Writing & Translation Activities</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                <!-- Activity Selector -->
+                <div class="md:col-span-2">
+                    <label for="activityTypeSelector" class="block text-sm font-medium text-gray-700">Activity Type</label>
+                    <select id="activityTypeSelector" 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="translation_pt_en">Translation from PT to EN (Practice Writing)</option>
+                        <option value="email_writing">Formal Email Prompt (Professional Practice)</option>
+                        <option value="summary_writing">Summarization Prompt (Reading & Writing)</option>
+                    </select>
+                </div>
+                <!-- Generate Button -->
+                <div class="md:col-span-1 flex items-end">
+                    <button id="generateActivityButton" onclick="generateActivity()" class="btn-primary w-full py-2.5 rounded-lg font-semibold flex items-center justify-center">
+                        <span id="activityText">Generate Activity</span>
+                        <div id="activitySpinner" class="spinner ml-3 hidden"></div>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Activity Output -->
+            <div id="activityOutput" class="border p-4 mt-4 rounded-lg bg-gray-50 min-h-[100px]">
+                <p class="text-gray-500 italic">Select an activity and context to generate your first prompt.</p>
+            </div>
+        </div>
 
-        <!-- New Flashcards Panel -->
+
+        <!-- Flashcards Panel -->
         <div id="flashcardsPanel" class="card">
             <h2 class="text-xl font-semibold mb-4 text-gray-700">Your Flashcards (Study Session)</h2>
             <div id="flashcardList" class="space-y-3">
@@ -282,7 +329,14 @@
         const flashcardList = document.getElementById('flashcardList');
         const noCardsMessage = document.getElementById('noCardsMessage');
         const speedSelector = document.getElementById('speedSelector');
-        const modelSelector = document.getElementById('modelSelector'); // New Selector
+        const modelSelector = document.getElementById('modelSelector'); 
+        const contextSelector = document.getElementById('contextSelector'); // NEW
+        const activityTypeSelector = document.getElementById('activityTypeSelector'); // NEW
+        const generateActivityButton = document.getElementById('generateActivityButton'); // NEW
+        const activityOutput = document.getElementById('activityOutput'); // NEW
+        const activitySpinner = document.getElementById('activitySpinner'); // NEW
+        const activityText = document.getElementById('activityText'); // NEW
+        const translateFullTextButton = document.getElementById('translateFullTextButton'); // NEW
         
         const MAX_CHARS = 5000;
         let isLooping = false;
@@ -321,6 +375,8 @@
             const currentLength = getEditorText().length;
             charCount.textContent = currentLength;
             playButton.disabled = currentLength === 0;
+            // Enable/disable translate full text button based on content
+            translateFullTextButton.disabled = currentLength === 0; 
         });
 
         // Update character count on load
@@ -345,7 +401,6 @@
             loadingSpinner.classList.remove('hidden');
 
             try {
-                // Route for the backend using gTTS
                 const response = await fetch('/tts-proxy', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
@@ -415,6 +470,126 @@
             }
         });
         
+        // --- Full Text Translation Functionality (NEW) ---
+        
+        async function translateFullText() {
+            const fullText = getEditorText();
+            if (!fullText) {
+                alert("Please enter text to translate.");
+                return;
+            }
+
+            translateFullTextButton.disabled = true;
+            translateFullTextButton.innerHTML = `<div class="spinner mr-2"></div> Translating...`;
+            const modelValue = modelSelector.value;
+            const context = contextSelector.value;
+
+            try {
+                // Use a generic prompt for full translation
+                const prompt = `Translate the following English text into clear, modern Portuguese, ensuring the translation adheres to the context: ${context}.\n\nENGLISH TEXT:\n---${fullText}---`;
+                
+                const response = await fetch('/explain-proxy', { // Reusing explain-proxy for simple text generation
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ 
+                        word: "FULL_TRANSLATION", // Marker word, not used by backend for full text
+                        context: fullText, // Full text as context
+                        for_flashcard: false,
+                        model: modelValue,
+                        custom_prompt: prompt // Pass the custom prompt
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP Error: ${response.status}. Check API Keys.`);
+                }
+                
+                const data = await response.json();
+                const translation = data.translation;
+                
+                // Open a temporary modal or alert the user with the result
+                alert("FULL TEXT TRANSLATION:\n\n" + translation);
+
+            } catch (error) {
+                console.error('Error translating full text:', error);
+                alert('Failed to translate full text. Check console and API Keys.');
+            } finally {
+                translateFullTextButton.disabled = false;
+                translateFullTextButton.textContent = "Translate Full Text (PT)";
+            }
+        }
+
+
+        // --- Activity Generation Functionality (NEW) ---
+
+        async function generateActivity() {
+            const activityType = activityTypeSelector.value;
+            const context = contextSelector.value;
+            const modelValue = modelSelector.value;
+            const sourceText = getEditorText();
+
+            generateActivityButton.disabled = true;
+            activityText.textContent = "Generating...";
+            activitySpinner.classList.remove('hidden');
+            activityOutput.innerHTML = `<p class="text-gray-500 italic">Generating prompt...</p>`;
+
+            let prompt = "";
+            let title = "";
+
+            if (activityType === 'translation_pt_en') {
+                title = "Translation Exercise (PT to EN)";
+                // We ask the AI to generate a Portuguese phrase first, based on the context, and then give the prompt.
+                prompt = `You are a language teacher. Generate a single, challenging, but short Portuguese phrase that is perfectly relevant to the '${context}' context. Then, provide the Portuguese phrase to the user and prompt them to translate it to English. Format the output as: [PORTUGUESE PHRASE] \n\n Your Task: Translate the phrase above into English.`;
+            } else if (activityType === 'email_writing') {
+                title = "Formal Email Writing Prompt";
+                prompt = `You are a language teacher. Generate a challenging, realistic scenario for a formal email writing exercise, based strictly on the '${context}' context. The prompt must be in English and clearly state the recipient (e.g., 'Your Manager'), the goal (e.g., 'Requesting a budget'), and the required tone (e.g., 'Formal and concise').`;
+            } else if (activityType === 'summary_writing' && sourceText) {
+                title = "Summarization Prompt";
+                prompt = `You are a language teacher. Summarize the following English text in a single, complex English sentence, and then ask the user to expand your summary back into a paragraph, ensuring they use complex vocabulary related to the '${context}' context. The text to summarize is:\n\n---${sourceText}---`;
+            } else {
+                 activityOutput.innerHTML = `<p class="text-red-500 font-semibold">Please enter text in the editor to use the Summarization Prompt.</p>`;
+                 generateActivityButton.disabled = false;
+                 activityText.textContent = "Generate Activity";
+                 activitySpinner.classList.add('hidden');
+                 return;
+            }
+
+            try {
+                // Reusing explain-proxy for simple text generation
+                const response = await fetch('/explain-proxy', { 
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ 
+                        word: "ACTIVITY_GEN", 
+                        context: context, 
+                        for_flashcard: false,
+                        model: modelValue,
+                        custom_prompt: prompt 
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP Error: ${response.status}. Check API Keys.`);
+                }
+                
+                const data = await response.json();
+                // The explanation field holds the generated activity text
+                const activityResult = data.explanation || data.translation || "Failed to generate activity prompt.";
+
+                activityOutput.innerHTML = `<h3 class="font-bold mb-2">${title}</h3><div class="whitespace-pre-wrap">${activityResult}</div>`;
+
+
+            } catch (error) {
+                console.error('Error generating activity:', error);
+                activityOutput.innerHTML = `<p class="text-red-500 font-semibold">Activity generation failed. Check if API Keys are configured correctly for ${modelValue}.</p>`;
+            } finally {
+                generateActivityButton.disabled = false;
+                activityText.textContent = "Generate Activity";
+                activitySpinner.classList.add('hidden');
+            }
+        }
+
+
         // --- Quick Translation Functionality (Double Click) ---
         
         async function fetchExplanationAndTranslation(word, context, isFlashcard=false) {
@@ -423,25 +598,24 @@
             const translationText = isFlashcard ? null : document.getElementById('translationText');
 
             const modelValue = modelSelector.value;
+            const contextFocus = contextSelector.value; // Pass context focus
             
             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' },
-                    // 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
+                        model: modelValue,
+                        context_focus: contextFocus // NEW: Pass context focus for accurate flashcards
                     })
                 });
 
@@ -453,7 +627,7 @@
                 const data = await response.json();
                 
                 if (isFlashcard) {
-                    return data; // Return full data for flashcard creation
+                    return data; 
                 } else {
                     explanationText.textContent = data.explanation || 'Could not retrieve explanation.';
                     translationText.textContent = data.translation || 'Could not retrieve translation.';
@@ -477,17 +651,17 @@
 
         // Logic to open the Modal on double click
         textEditor.addEventListener('dblclick', (event) => {
-            const selectedWord = window.getSelection().toString().trim().replace(/[^a-zA-Z']/g, '');
+            const selection = window.getSelection().toString().trim();
+            const selectedWord = selection.replace(/[^a-zA-Z']/g, ''); // Basic word selection logic
 
             if (selectedWord) {
                 const fullText = getEditorText();
-                const index = fullText.indexOf(selectedWord);
-                const context = fullText.substring(Math.max(0, index - 50), index + selectedWord.length + 50);
+                const index = fullText.indexOf(selection);
+                const context = fullText.substring(Math.max(0, index - 50), index + selection.length + 50);
 
                 document.getElementById('wordSelected').textContent = selectedWord;
                 openModal();
                 
-                // Start fetching explanation and translation
                 fetchExplanationAndTranslation(selectedWord, context);
             }
         });
@@ -508,7 +682,6 @@
             createCardButton.innerHTML = `<div class="spinner mr-2"></div> Creating Card...`;
 
             try {
-                 // Fetch the structured data for the flashcard
                  const cardData = await fetchExplanationAndTranslation(selectedText, context, true);
                  
                  if (cardData && cardData.term && cardData.translation && cardData.example) {
@@ -529,17 +702,16 @@
             const cardElement = document.createElement('div');
             cardElement.className = 'flashcard';
             
-            // Front (Term and Translation)
+            // Render card content
             cardElement.innerHTML = `
                 <div class="flashcard-front">
                     <p class="flashcard-term">${data.term.toUpperCase()}</p>
                     <p class="flashcard-definition">PT: ${data.translation}</p>
                     <p class="flashcard-example">Example: ${data.example}</p>
                 </div>
-                <!-- Back side (Definition) can be toggled via JS if needed -->
             `;
 
-            flashcardList.prepend(cardElement); // Add new cards to the top
+            flashcardList.prepend(cardElement); 
         }