Update index.html

index.html

@@ -15,7 +15,7 @@
         .btn-primary:hover:not(:disabled) { background-color: #4338ca; }
         .spinner { border: 2px solid rgba(255,255,255,0.3); width: 20px; height: 20px; border-radius: 50%; border-left-color: #fff; animation: spin 1s ease infinite; }
         @keyframes spin { to { transform: rotate(360deg); } }
-        .flashcard-container { perspective: 1000px; position: relative; } /* Posição relativa para o botão de excluir */
+        .flashcard-container { perspective: 1000px; position: relative; }
         .flashcard-inner { position: relative; width: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
         .flashcard-container.flipped .flashcard-inner { transform: rotateY(180deg); }
         .flashcard-front, .flashcard-back { position: absolute; width: 100%; height:100%; backface-visibility: hidden; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
@@ -84,6 +84,30 @@
                         <p class="text-gray-500 italic">Sua imagem aparecerá aqui.</p>
                     </div>
                 </div>
+                
+                <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">5. Atividades de Escrita e Tradução</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                       <div>
+                           <label for="activityTypeSelector" class="block text-sm font-medium text-gray-700">Tipo de Atividade</label>
+                           <select id="activityTypeSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-md shadow-sm">
+                               <option value="translation_pt_en">Tradução (PT para EN)</option>
+                               <option value="email_writing">Escrever E-mail Formal</option>
+                               <option value="summary_writing">Resumir o Texto</option>
+                           </select>
+                       </div>
+                        <div class="flex items-end">
+                             <button id="generateActivityButton" onclick="generateActivity()" class="btn btn-primary w-full">Gerar Atividade</button>
+                        </div>
+                    </div>
+                    <div class="mt-4 border-t pt-4">
+                        <button id="translateFullTextButton" onclick="translateFullText()" class="btn btn-primary bg-gray-500 hover:bg-gray-600 w-full" disabled>Traduzir Texto Completo para PT</button>
+                    </div>
+                    <div id="activityOutput" class="mt-4 p-4 border rounded-lg bg-gray-50 min-h-[100px] whitespace-pre-wrap">
+                        <p class="text-gray-500 italic">Seu exercício aparecerá aqui.</p>
+                    </div>
+                </div>
+
 
                 <div class="card">
                     <h2 class="text-xl font-semibold mb-4 text-gray-700">Configurações de IA</h2>
@@ -92,13 +116,13 @@
                            <label for="modelSelector" class="block text-sm font-medium text-gray-700">Modelo de IA (Flashcards)</label>
                            <select id="modelSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-md shadow-sm">
                                <optgroup label="Google Gemini">
-                                   <option value="gemini:gemini-1.5-flash-latest">Gemini 1.5 Flash (Rápido)</option>
-                                   <option value="gemini:gemini-1.5-pro-latest">Gemini 1.5 Pro (Avançado)</option>
+                                   <option value="gemini:gemini-1.5-flash-latest">Gemini 2.5 Flash</option>
+                                   <option value="gemini:gemini-1.5-pro-latest">Gemini 2.5 Pro</option>
                                </optgroup>
                                <optgroup label="Groq (Ultra Rápido)">
                                    <option value="groq:llama-3.1-8b-instant">Llama 3.1 8B</option>
-                                   <option value="groq:mixtral-8x7b-32768">Mixtral 8x7b (Balanceado)</option>
-                                   <option value="groq:gemma-7b-it">Gemma 7B (Confiável)</option>
+                                   <option value="groq:llama-3.1-70b-versatile">Llama 3.1 70B</option>
+                                   <option value="groq:openai/gpt-oss-120b">OpenAI GPT-OSS 120B</option>
                                </optgroup>
                            </select>
                         </div>
@@ -146,6 +170,10 @@
     const imagePromptInput = document.getElementById('imagePromptInput');
     const generateImageBtn = document.getElementById('generateImageBtn');
     const imageResultContainer = document.getElementById('imageResultContainer');
+    const activityTypeSelector = document.getElementById('activityTypeSelector');
+    const generateActivityButton = document.getElementById('generateActivityButton');
+    const activityOutput = document.getElementById('activityOutput');
+    const translateFullTextButton = document.getElementById('translateFullTextButton');
     
     let chatHistory = [];
     let recognition;
@@ -156,6 +184,7 @@
         const len = textEditor.innerText.length;
         charCount.textContent = `${len}/10000`;
         playButton.disabled = len === 0;
+        translateFullTextButton.disabled = len === 0;
     });
     textEditor.addEventListener('mouseup', () => {
         createCardButton.disabled = !window.getSelection().toString().trim();
@@ -320,6 +349,84 @@
             generateImageBtn.textContent = 'Gerar';
         }
     }
+    
+    // --- LÓGICA DE ATIVIDADES DE ESCRITA E TRADUÇÃO ---
+    async function generateActivity() {
+        const activityType = activityTypeSelector.value;
+        const context = contextSelector.value;
+        const sourceText = textEditor.innerText;
+
+        generateActivityButton.disabled = true;
+        generateActivityButton.innerHTML = '<div class="spinner mr-2"></div> Gerando...';
+        activityOutput.innerHTML = '<p class="text-gray-500 italic">Gerando seu exercício...</p>';
+
+        let prompt = "";
+        if (activityType === 'translation_pt_en') {
+            prompt = `Baseado no contexto '${context}', crie uma frase em português para eu traduzir para o inglês.`;
+        } else if (activityType === 'email_writing') {
+            prompt = `Crie um cenário para eu escrever um e-mail formal, relacionado ao contexto '${context}'.`;
+        } else if (activityType === 'summary_writing') {
+            if (!sourceText) {
+                alert("Por favor, cole um texto no editor para gerar a atividade de resumo.");
+                activityOutput.innerHTML = '<p class="text-red-500">Cole um texto acima primeiro.</p>';
+                generateActivityButton.disabled = false;
+                generateActivityButton.textContent = 'Gerar Atividade';
+                return;
+            }
+            prompt = `Resuma o seguinte texto em uma frase: "${sourceText}"`;
+        }
+        
+        try {
+            const response = await fetch('/explain-proxy', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    model: modelSelector.value,
+                    context_focus: context,
+                    custom_prompt: prompt
+                })
+            });
+            if (!response.ok) throw new Error((await response.json()).error);
+            const data = await response.json();
+            activityOutput.textContent = data.explanation;
+        } catch (error) {
+            activityOutput.innerHTML = `<p class="text-red-600 font-semibold">Falha ao gerar atividade: ${error.message}</p>`;
+        } finally {
+            generateActivityButton.disabled = false;
+            generateActivityButton.textContent = 'Gerar Atividade';
+        }
+    }
+
+    async function translateFullText() {
+        const text = textEditor.innerText;
+        if (!text) return;
+        
+        translateFullTextButton.disabled = true;
+        translateFullTextButton.innerHTML = '<div class="spinner mr-2"></div> Traduzindo...';
+        
+        const prompt = `Traduza o seguinte texto para o português de forma clara e natural: "${text}"`;
+        
+        try {
+             const response = await fetch('/explain-proxy', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    model: modelSelector.value,
+                    context_focus: contextSelector.value,
+                    custom_prompt: prompt
+                })
+            });
+            if (!response.ok) throw new Error((await response.json()).error);
+            const data = await response.json();
+            alert("Tradução Completa:\n\n" + data.explanation);
+        } catch (error) {
+            alert(`Falha na tradução: ${error.message}`);
+        } finally {
+            translateFullTextButton.disabled = false;
+            translateFullTextButton.textContent = 'Traduzir Texto Completo para PT';
+        }
+    }
+
 
     // --- LÓGICA DE GERAÇÃO DE FLASHCARD ---
     async function createFlashcard(word, context, definition = null) {
@@ -408,27 +515,23 @@
         
         flashcardList.prepend(container);
         container.addEventListener('click', (e) => {
-            // Evita virar o card se um botão dentro dele for clicado
             if(e.target.tagName !== 'BUTTON' && !e.target.closest('button')) {
                  container.classList.toggle('flipped');
             }
         });
     }
 
-    // --- NOVA FUNÇÃO PARA EXCLUIR FLASHCARD ---
     function deleteFlashcard(cardId, event) {
-        event.stopPropagation(); // Impede que o evento de clique se propague para o card (evitando que ele vire)
+        event.stopPropagation();
         const cardToDelete = document.getElementById(cardId);
         if (cardToDelete) {
             cardToDelete.remove();
         }
-        // Mostra a mensagem de "sem cards" se a lista ficar vazia
-        if (flashcardList.children.length === 1) { // Apenas a mensagem <p> restará
+        if (flashcardList.children.length === 1) {
             noCardsMessage.classList.remove('hidden');
         }
     }
 
-    // --- LÓGICA DE PRÁTICA DE PRONÚNCIA ---
     async function handlePronunciationPractice(button, targetText, event) {
         event.stopPropagation();
         const feedbackArea = button.closest('.flashcard-back').querySelector('[data-feedback-area]');