Update index.html

index.html

@@ -274,7 +274,9 @@
         }
     }
 
-    // --- TODAS AS OUTRAS FUNÇÕES (sem alterações) ---
+    // --- TODAS AS OUTRAS FUNÇÕES ---
+    
+    // ATIVIDADES
     async function generateActivity() {
         const activityType = activityTypeSelector.value;
         const context = contextSelector.value;
@@ -366,21 +368,277 @@
             submitActivityBtn.textContent = 'Submit Answer';
         }
     }
-    function initializeSpeechRecognition() { /* ... */ }
-    function handleVoiceInput() { /* ... */ }
-    function handleTextInput() { /* ... */ }
-    async function sendMessage(message) { /* ... */ }
-    function appendMessage(text, sender) { /* ... */ }
-    imageUploader.addEventListener('change', (event) => { /* ... */ });
-    async function analyzeImage(base64Image) { /* ... */ }
-    function displayImageVocabulary(vocabulary) { /* ... */ }
-    async function generateImage() { /* ... */ }
-    async function createFlashcard(word, context, definition = null) { /* ... */ }
-    function createFlashcardFromSelection() { /* ... */ }
-    function createFlashcardFromSuggestion(term, definition) { /* ... */ }
-    function renderFlashcard(data) { /* ... */ }
-    function deleteFlashcard(cardId, event) { /* ... */ }
-    async function handlePronunciationPractice(button, targetText, event) { /* ... */ }
+    
+    // CONVERSAÇÃO
+    function initializeSpeechRecognition() {
+        window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (!window.SpeechRecognition) {
+            micButton.disabled = true;
+            micButton.textContent = '❌';
+            alert('Voice recognition API is not supported in this browser.');
+            return;
+        }
+        recognition = new SpeechRecognition();
+        recognition.lang = 'en-US';
+        recognition.interimResults = false;
+        recognition.continuous = false;
+        recognition.onresult = (event) => {
+            const transcript = event.results[0][0].transcript;
+            chatInput.value = transcript;
+            sendMessage(transcript);
+        };
+        recognition.onerror = (event) => { console.error('Voice recognition error:', event.error); };
+        recognition.onend = () => {
+            isRecording = false;
+            micButton.classList.remove('is-recording');
+            micButton.innerHTML = '🎙️';
+        };
+    }
+    function handleVoiceInput() {
+        if (isRecording) {
+            recognition.stop();
+        } else {
+            isRecording = true;
+            micButton.classList.add('is-recording');
+            micButton.innerHTML = '<div class="spinner"></div>';
+            recognition.start();
+        }
+    }
+    function handleTextInput() {
+        const message = chatInput.value.trim();
+        sendMessage(message);
+        chatInput.value = '';
+    }
+    chatInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') handleTextInput(); });
+    async function sendMessage(message) {
+        if (!message) return;
+        appendMessage(message, 'user');
+        chatHistory.push({ role: 'user', content: message });
+        try {
+            const response = await fetch('/chat-with-ai', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ history: chatHistory, message: message })
+            });
+            if (!response.ok) throw new Error((await response.json()).error);
+            const data = await response.json();
+            appendMessage(data.response, 'ai');
+            chatHistory.push({ role: 'assistant', content: data.response });
+            playAudio(data.response);
+        } catch (error) {
+            appendMessage(`Chat error: ${error.message}`, 'ai');
+        }
+    }
+    function appendMessage(text, sender) {
+        const msg = document.createElement('div');
+        msg.className = `chat-message ${sender}-message`;
+        msg.textContent = text;
+        chatDisplay.appendChild(msg);
+        chatDisplay.scrollTop = chatDisplay.scrollHeight;
+    }
+    
+    // IMAGEM
+    imageUploader.addEventListener('change', (event) => {
+        const file = event.target.files[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            imagePreview.src = e.target.result;
+            imagePreview.classList.remove('hidden');
+            analyzeImage(e.target.result);
+        };
+        reader.readAsDataURL(file);
+    });
+    async function analyzeImage(base64Image) {
+        imageAnalysisResult.innerHTML = `<div class="flex items-center p-2"><div class="spinner !border-l-indigo-500 !border-gray-200"></div><p class="ml-3 text-gray-600">Analyzing image...</p></div>`;
+        try {
+            const response = await fetch('/analyze-image', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ 
+                    image: base64Image,
+                    model: modelSelector.value
+                })
+            });
+            if (!response.ok) throw new Error((await response.json()).error);
+            const vocabulary = await response.json();
+            displayImageVocabulary(vocabulary);
+        } catch (error) {
+            imageAnalysisResult.innerHTML = `<p class="text-red-600 font-semibold">Analysis failed: ${error.message}</p>`;
+        }
+    }
+    function displayImageVocabulary(vocabulary) {
+        imageAnalysisResult.innerHTML = '<h3 class="font-semibold mb-2">Suggested Vocabulary:</h3>';
+        const buttonContainer = document.createElement('div');
+        buttonContainer.className = 'flex flex-wrap gap-2';
+        vocabulary.forEach(({ term, definition }) => {
+            const btn = document.createElement('button');
+            btn.className = 'btn bg-violet-100 text-violet-700 hover:bg-violet-200 text-sm';
+            btn.textContent = term;
+            btn.onclick = () => createFlashcardFromSuggestion(term, definition);
+            buttonContainer.appendChild(btn);
+        });
+        imageAnalysisResult.appendChild(buttonContainer);
+    }
+    async function generateImage() {
+        const prompt = imagePromptInput.value.trim();
+        if (!prompt) {
+            alert('Please enter a description for the image.');
+            return;
+        }
+        generateImageBtn.disabled = true;
+        generateImageBtn.innerHTML = '<div class="spinner mr-2"></div> Generating...';
+        imageResultContainer.innerHTML = `<div class="flex items-center justify-center p-4"><div class="spinner !border-l-indigo-500 !border-gray-200"></div><p class="ml-3 text-gray-600">Creating your image...</p></div>`;
+        try {
+            const response = await fetch('/generate-image', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ prompt: prompt })
+            });
+            if (!response.ok) throw new Error((await response.json()).error);
+            const data = await response.json();
+            imageResultContainer.innerHTML = `<img src="data:image/png;base64,${data.image_base64}" class="rounded-lg max-h-60 mx-auto" alt="AI-generated image"/>`;
+        } catch (error) {
+            imageResultContainer.innerHTML = `<p class="text-red-600 font-semibold">Failed to generate image: ${error.message}</p>`;
+        } finally {
+            generateImageBtn.disabled = false;
+            generateImageBtn.textContent = 'Generate';
+        }
+    }
+    
+    // FLASHCARDS
+    async function createFlashcard(word, context, definition = null) {
+        const btn = definition ? null : createCardButton;
+        if (btn) {
+            btn.disabled = true;
+            btn.innerHTML = '<div class="spinner mr-2"></div> Creating...';
+        }
+        try {
+            const response = await fetch('/explain-proxy', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    word: word,
+                    context: context,
+                    for_flashcard: true,
+                    model: modelSelector.value,
+                    context_focus: contextSelector.value
+                })
+            });
+            if (!response.ok) {
+                const errData = await response.json();
+                throw new Error(errData.error || 'Unknown server error.');
+            }
+            const cardData = await response.json();
+            if(definition && !cardData.definition) cardData.definition = definition;
+            renderFlashcard(cardData);
+        } catch (error) {
+            alert(`Failed to create flashcard: ${error.message}. Check API keys and model selection.`);
+        } finally {
+            if (btn) {
+                btn.disabled = false;
+                btn.innerHTML = '+ Create Flashcard';
+            }
+        }
+    }
+    function createFlashcardFromSelection() {
+        const selection = window.getSelection().toString().trim();
+        if (selection) createFlashcard(selection, textEditor.innerText);
+    }
+    function createFlashcardFromSuggestion(term, definition) {
+        createFlashcard(term, `(From image analysis) A visual representation of ${term}.`, definition);
+    }
+    function renderFlashcard(data) {
+        noCardsMessage.classList.add('hidden');
+        const cardId = `card-${Date.now()}`;
+        const container = document.createElement('div');
+        container.className = 'flashcard-container';
+        container.id = cardId;
+        const minHeight = 380;
+        container.style.minHeight = `${minHeight}px`;
+        const fallback = 'Info not generated';
+        container.innerHTML = `
+            <button class="delete-btn" onclick="deleteFlashcard('${cardId}', event)">🗑️</button>
+            <div class="flashcard-inner" style="min-height: ${minHeight}px;">
+                <div class="flashcard-front">
+                     <div>
+                        <div class="text-sm text-gray-600 mb-2">Context Sentence:</div>
+                        <p class="text-lg text-center text-gray-800">${data.gapped_sentence || fallback}</p>
+                    </div>
+                    <div class="border-t pt-4 mt-4 text-center">
+                        <strong class="text-indigo-600">Hint (PT):</strong> ${data.translation || fallback}
+                    </div>
+                    <div class="text-xs text-center text-gray-400 mt-4">Click to see the answer</div>
+                </div>
+                <div class="flashcard-back">
+                    <div>
+                        <h3 class="text-xl font-bold text-center text-indigo-600 mb-2">${data.term || 'Term'}</h3>
+                        <p class="flex items-center justify-center gap-2 text-gray-600 italic mb-3">
+                            <button class="audio-btn" onclick="playAudio('${(data.context_sentence || '').replace(/'/g, "\\'")}', event)">🔊</button>
+                            <span>${data.context_sentence || fallback}</span>
+                        </p>
+                        <p class="text-sm text-gray-800"><strong class="font-semibold">Definition:</strong> ${data.definition || fallback}</p>
+                    </div>
+                    <div class="border-t mt-3 pt-3">
+                        <h4 class="text-sm font-semibold text-center">Practice Your Pronunciation</h4>
+                        <div class="flex justify-center items-center gap-2 mt-2">
+                            <button class="btn btn-primary w-12 h-12 rounded-full" onclick="handlePronunciationPractice(this, '${(data.context_sentence || '').replace(/'/g, "\\'")}', event)">🎙️</button>
+                        </div>
+                        <div class="text-xs text-gray-600 p-2 mt-2 bg-gray-50 rounded-md min-h-[40px]" data-feedback-area></div>
+                    </div>
+                </div>
+            </div>`;
+        flashcardList.prepend(container);
+        container.addEventListener('click', (e) => {
+            if(e.target.tagName !== 'BUTTON' && !e.target.closest('button')) {
+                 container.classList.toggle('flipped');
+            }
+        });
+    }
+    function deleteFlashcard(cardId, event) {
+        event.stopPropagation();
+        const cardToDelete = document.getElementById(cardId);
+        if (cardToDelete) {
+            cardToDelete.remove();
+        }
+        if (flashcardList.children.length === 1) {
+            noCardsMessage.classList.remove('hidden');
+        }
+    }
+    async function handlePronunciationPractice(button, targetText, event) {
+        event.stopPropagation();
+        const feedbackArea = button.closest('.flashcard-back').querySelector('[data-feedback-area]');
+        const practiceRecognition = new SpeechRecognition();
+        practiceRecognition.lang = 'en-US';
+        button.innerHTML = '<div class="spinner"></div>';
+        button.disabled = true;
+        feedbackArea.textContent = 'Listening...';
+        practiceRecognition.start();
+        practiceRecognition.onresult = async (e) => {
+            const userText = e.results[0][0].transcript;
+            feedbackArea.textContent = `You said: "${userText}". Analyzing...`;
+            try {
+                const response = await fetch('/pronunciation-feedback', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ target_text: targetText, user_text: userText })
+                });
+                if (!response.ok) throw new Error((await response.json()).error);
+                const data = await response.json();
+                feedbackArea.innerHTML = `<strong>Feedback:</strong> ${data.feedback}`;
+            } catch (error) {
+                feedbackArea.textContent = `Analysis error: ${error.message}`;
+            } finally {
+                button.innerHTML = '🎙️';
+                button.disabled = false;
+            }
+        };
+        practiceRecognition.onerror = (e) => {
+            feedbackArea.textContent = `Recording error: ${e.error}`;
+            button.innerHTML = '🎙️';
+            button.disabled = false;
+        };
+    }
     
     // --- INICIALIZAÇÃO ---
     document.addEventListener('DOMContentLoaded', () => {