Update index.html

index.html

@@ -66,12 +66,11 @@
                     <div id="chatDisplay" class="flex flex-col space-y-2 mb-4"></div>
                     <div class="flex gap-2">
                         <input type="text" id="chatInput" class="flex-grow border rounded-lg px-3 py-2" placeholder="Digite ou fale no microfone...">
-                        <button onclick="handleTextInput()" class="btn btn-secondary">Enviar</button>
+                        <button onclick="handleTextInput()" class="btn btn-primary bg-gray-500 hover:bg-gray-600">Enviar</button>
                         <button id="micButton" onclick="handleVoiceInput()" class="btn btn-primary mic-button w-12 h-12 rounded-full">🎙️</button>
                     </div>
                 </div>
 
-                <!-- NOVO CARD: GERADOR DE IMAGEM -->
                 <div class="card">
                     <h2 class="text-xl font-semibold mb-4 text-gray-700">4. Gerador de Imagens (Nano Banana)</h2>
                     <p class="text-sm text-gray-600 mb-2">Descreva uma cena em inglês para a IA desenhar.</p>
@@ -176,7 +175,8 @@
             audioPlayer.play();
             audioPlayer.onended = () => URL.revokeObjectURL(audioUrl);
         } catch (error) {
-            alert(`Erro ao gerar áudio: ${error.message}`);
+            // MELHORIA: Exibe o erro para o usuário
+            alert(`Erro ao gerar áudio: ${error.message}. Verifique o console para mais detalhes.`);
         } finally {
             playButton.disabled = false;
             playText.textContent = 'Ouvir Texto';
@@ -185,24 +185,116 @@
     }
 
     // --- LÓGICA DE CONVERSAÇÃO (VOZ E TEXTO) ---
-    function initializeSpeechRecognition() { /* ... código existente, sem alterações ... */ }
-    function handleVoiceInput() { /* ... código existente, sem alterações ... */ }
+    function initializeSpeechRecognition() {
+        window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (!window.SpeechRecognition) {
+            micButton.disabled = true;
+            micButton.textContent = '❌';
+            alert('A API de reconhecimento de voz não é suportada neste navegador.');
+            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('Erro no reconhecimento de voz:', 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) { /* ... código existente, sem alterações ... */ }
-    function appendMessage(text, sender) { /* ... código existente, sem alterações ... */ }
+    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(`Erro na conversa: ${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;
+    }
     
     // --- LÓGICA DE ESTUDO POR IMAGEM (ANÁLISE) ---
-    imageUploader.addEventListener('change', (event) => { /* ... código existente, sem alterações ... */ });
-    async function analyzeImage(base64Image) { /* ... código existente, sem alterações ... */ }
-    function displayImageVocabulary(vocabulary) { /* ... código existente, sem alterações ... */ }
+    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">Analisando imagem...</p></div>`;
+        try {
+            const response = await fetch('/analyze-image', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ image: base64Image })
+            });
+            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">Falha na análise: ${error.message}</p>`;
+        }
+    }
+    function displayImageVocabulary(vocabulary) {
+        imageAnalysisResult.innerHTML = '<h3 class="font-semibold mb-2">Vocabulário Sugerido:</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);
+    }
 
-    // --- LÓGICA DE GERAÇÃO DE IMAGEM (NOVO) ---
+    // --- LÓGICA DE GERAÇÃO DE IMAGEM (NANO BANANA) ---
     async function generateImage() {
         const prompt = imagePromptInput.value.trim();
         if (!prompt) {
@@ -212,17 +304,13 @@
         generateImageBtn.disabled = true;
         generateImageBtn.innerHTML = '<div class="spinner mr-2"></div> Gerando...';
         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">Criando sua imagem...</p></div>`;
-        
         try {
             const response = await fetch('/generate-image', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ prompt: prompt })
             });
-            if (!response.ok) {
-                const errData = await response.json();
-                throw new Error(errData.error || 'Erro desconhecido no backend.');
-            }
+            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="Imagem gerada por IA"/>`;
         } catch (error) {
@@ -234,16 +322,157 @@
     }
 
     // --- LÓGICA DE GERAÇÃO DE FLASHCARD ---
-    async function createFlashcardFromSelection() { /* ... código existente, sem alterações ... */ }
-    function createFlashcardFromSuggestion(term, definition) { /* ... código existente, sem alterações ... */ }
-    function renderFlashcard(data) { /* ... código existente, sem alterações ... */ }
+    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> Criando...';
+        }
+        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 || 'Erro desconhecido do servidor.');
+            }
+            const cardData = await response.json();
+            if(definition && !cardData.definition) cardData.definition = definition; // Usa a definição da análise de imagem se a IA não retornar uma
+            renderFlashcard(cardData);
+        } catch (error) {
+            // MELHORIA: Exibe o erro para o usuário
+            alert(`Falha ao criar flashcard: ${error.message}. Verifique as chaves de API e a seleção do modelo.`);
+        } finally {
+            if (btn) {
+                btn.disabled = false;
+                btn.innerHTML = '+ Criar 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`;
+
+        container.innerHTML = `
+            <div class="flashcard-inner" style="min-height: ${minHeight}px;">
+                <div class="flashcard-front">
+                     <div>
+                        <div class="text-sm text-gray-600 mb-2">Frase de Contexto:</div>
+                        <p class="text-lg text-center text-gray-800">${data.gapped_sentence || 'N/A'}</p>
+                    </div>
+                    <div class="border-t pt-4 mt-4 text-center">
+                        <strong class="text-indigo-600">Dica (PT):</strong> ${data.translation || 'N/A'}
+                    </div>
+                    <div class="text-xs text-center text-gray-400 mt-4">Clique para ver a resposta</div>
+                </div>
+                <div class="flashcard-back">
+                    <div>
+                        <h3 class="text-xl font-bold text-center text-indigo-600 mb-2">${data.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 || 'N/A'}</span>
+                        </p>
+                        <p class="text-sm text-gray-800"><strong class="font-semibold">Definição:</strong> ${data.definition || 'N/A'}</p>
+                    </div>
+                    <div class="border-t mt-3 pt-3">
+                        <h4 class="text-sm font-semibold text-center">Pratique sua Pronúncia</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') container.classList.toggle('flipped');
+        });
+    }
 
     // --- LÓGICA DE PRÁTICA DE PRONÚNCIA ---
-    async function handlePronunciationPractice(button, targetText, event) { /* ... código existente, sem alterações ... */ }
+    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 = 'Ouvindo...';
+
+        practiceRecognition.start();
+        
+        practiceRecognition.onresult = async (e) => {
+            const userText = e.results[0][0].transcript;
+            feedbackArea.textContent = `Você disse: "${userText}". Analisando...`;
+            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 = `Erro na análise: ${error.message}`;
+            } finally {
+                button.innerHTML = '🎙️';
+                button.disabled = false;
+            }
+        };
+        practiceRecognition.onerror = (e) => {
+            feedbackArea.textContent = `Erro ao gravar: ${e.error}`;
+            button.innerHTML = '🎙️';
+            button.disabled = false;
+        };
+    }
 
     // --- FUNÇÕES AUXILIARES DE ÁUDIO ---
-    async function fetchAudioBlob(text) { /* ... código existente, sem alterações ... */ }
-    async function playAudio(text, event) { /* ... código existente, sem alterações ... */ }
+    async function fetchAudioBlob(text) {
+        const response = await fetch('/tts-proxy', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ text: text })
+        });
+        if (!response.ok) {
+            const err = await response.json();
+            throw new Error(err.error || `HTTP error! status: ${response.status}`);
+        }
+        return await response.blob();
+    }
+    async function playAudio(text, event) {
+        if(event) event.stopPropagation();
+        try {
+            const audioBlob = await fetchAudioBlob(text);
+            const audioUrl = URL.createObjectURL(audioBlob);
+            const audio = new Audio(audioUrl);
+            audio.play();
+            audio.onended = () => URL.revokeObjectURL(audioUrl);
+        } catch (error) { console.error('Erro ao tocar áudio:', error); }
+    }
     
     // --- INICIALIZAÇÃO ---
     document.addEventListener('DOMContentLoaded', () => {