Spaces:

InnovationAI
/

EnglishStudyHelper

Sleeping

App Files Files Community

amauricunha commited on Oct 11, 2025

Commit

ea769a5

verified ·

1 Parent(s): 378b3e3

Update index.html

Browse files

Files changed (1) hide show

index.html +288 -111

index.html CHANGED Viewed

@@ -9,24 +9,24 @@
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
         body { font-family: 'Inter', sans-serif; background-color: #f7f9fc; }
         .card { background-color: white; border-radius: 12px; box-shadow: 0 4px_12px rgba(0,0,0,0.08); padding: 24px; }
-        .btn { padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; transition: all 0.2s; }
         .btn-primary { background-color: #4f46e5; color: white; }
-        .btn-primary:hover { background-color: #4338ca; }
-        #textEditor { border: 1px solid #ccc; padding: 1rem; min-height: 16rem; border-radius: 0.5rem; outline: none; }
-        .spinner { border: 4px solid rgba(0, 0, 0, 0.1); width: 24px; height: 24px; border-radius: 50%; border-left-color: #4f46e5; animation: spin 1s ease infinite; }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-        .flashcard-container { perspective: 1000px; margin-bottom: 1rem; }
         .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; -webkit-backface-visibility: hidden; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; justify-content: center; }
         .flashcard-front { background-color: #f9fafb; }
         .flashcard-back { background-color: #ffffff; transform: rotateY(180deg); }
-        .audio-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #4f46e5; }
-        /* Estilos do Chat */
         #chatDisplay { height: 250px; overflow-y: auto; background-color: #f9fafb; border-radius: 8px; padding: 10px; border: 1px solid #e5e7eb; }
-        .chat-message { max-width: 80%; padding: 8px 12px; border-radius: 12px; margin-bottom: 8px; word-wrap: break-word; }
-        .user-message { background-color: #4f46e5; color: white; align-self: flex-end; margin-left: auto; }
-        .ai-message { background-color: #e5e7eb; color: #1f2937; align-self: flex-start; }
     </style>
 </head>
 <body class="p-4 md:p-8">
@@ -34,53 +34,72 @@
     <div class="container mx-auto max-w-5xl">
         <header class="text-center mb-10">
             <h1 class="text-3xl lg:text-4xl font-bold text-gray-800">Dynamic English Study Studio</h1>
-            <p class="text-gray-500 mt-2">Sua ferramenta de estudo com áudio, contexto, imagens e chat em tempo real.</p>
         </header>
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
             <!-- Coluna da Esquerda: Inputs -->
             <div class="flex flex-col gap-6">
                 <div class="card">
-                    <h2 class="text-xl font-semibold mb-4 text-gray-700">1. Estude a partir de um Texto</h2>
-                    <div id="textEditor" contenteditable="true" spellcheck="true" lang="en" class="w-full p-4 focus:ring-2 focus:ring-indigo-500 text-gray-800"></div>
                     <p class="text-sm text-right text-gray-500 mt-2">Caracteres: <span id="charCount">0</span>/10000</p>
-                    <div class="mt-4 border-t pt-4 flex justify-between items-center">
                         <button id="createCardButton" onclick="createFlashcardFromSelection()" class="btn btn-primary bg-green-600 hover:bg-green-700 disabled:opacity-50" disabled>+ Criar Flashcard</button>
-                        <button id="playButton" onclick="handlePlay()" class="btn btn-primary flex items-center justify-center disabled:opacity-50">
                             <span id="playText">Ouvir Texto</span>
-                            <div id="loadingSpinner" class="spinner ml-3 hidden"></div>
                         </button>
                     </div>
-                     <audio id="audioPlayer" controls class="w-full mt-4 hidden"></audio>
                 </div>
                 <div class="card">
-                    <h2 class="text-xl font-semibold mb-4 text-gray-700">2. Estude a partir de uma Imagem</h2>
-                    <input type="file" id="imageUploader" accept="image/*" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100"/>
                     <img id="imagePreview" src="" class="mt-4 rounded-lg hidden max-h-60 mx-auto" alt="Pré-visualização"/>
                     <div id="imageAnalysisResult" class="mt-4"></div>
                 </div>
-                <!-- NOVO: Card de Conversação com IA -->
-                <div class="card">
-                    <h2 class="text-xl font-semibold mb-4 text-gray-700">3. Pratique Conversação (com Groq)</h2>
-                    <p class="text-sm text-gray-600 mb-4">Converse com um tutor de IA que responde instantaneamente. Comece dizendo "Hello!".</p>
-                    <div id="chatDisplay" class="flex flex-col space-y-2 mb-4">
-                        <!-- Mensagens do chat aparecerão aqui -->
-                    </div>
                     <div class="flex gap-2">
-                        <input type="text" id="chatInput" class="flex-grow border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500" placeholder="Digite sua mensagem em inglês...">
-                        <button id="chatSendButton" onclick="handleSendMessage()" class="btn btn-primary">Enviar</button>
                     </div>
                 </div>
             </div>
             <!-- Coluna da Direita: Flashcards -->
             <div id="flashcardsPanel" class="card">
                 <h2 class="text-xl font-semibold mb-4 text-gray-700">Sua Sessão de Estudo</h2>
-                <div id="flashcardList" class="space-y-4">
-                    <p id="noCardsMessage" class="text-gray-500 italic">Nenhum flashcard criado ainda. Comece seus estudos!</p>
                 </div>
             </div>
         </div>
@@ -89,149 +108,307 @@
 <script>
     // --- ELEMENTOS GLOBAIS ---
     const textEditor = document.getElementById('textEditor');
     const createCardButton = document.getElementById('createCardButton');
-    const flashcardList = document.getElementById('flashcardList');
-    const noCardsMessage = document.getElementById('noCardsMessage');
     const playButton = document.getElementById('playButton');
-    const audioPlayer = document.getElementById('audioPlayer');
-    const charCount = document.getElementById('charCount');
-    const loadingSpinner = document.getElementById('loadingSpinner');
     const playText = document.getElementById('playText');
-    const MAX_CHARS = 10000;
     const imageUploader = document.getElementById('imageUploader');
     const imagePreview = document.getElementById('imagePreview');
     const imageAnalysisResult = document.getElementById('imageAnalysisResult');
-    // --- NOVO: ELEMENTOS DO CHAT ---
     const chatDisplay = document.getElementById('chatDisplay');
     const chatInput = document.getElementById('chatInput');
     const chatSendButton = document.getElementById('chatSendButton');
     let chatHistory = [];
-    // --- LÓGICA DO EDITOR E ÁUDIO ---
     textEditor.addEventListener('input', () => {
         const len = textEditor.innerText.length;
-        charCount.textContent = `${len}/${MAX_CHARS}`;
-        playButton.disabled = len === 0 || len > MAX_CHARS;
     });
     textEditor.addEventListener('mouseup', () => {
         createCardButton.disabled = !window.getSelection().toString().trim();
     });
-    // ... (função de áudio handlePlay e fetchAudio)
-    async function handlePlay() { /* ... */ }
-    // --- LÓGICA DE ANÁLISE DE IMAGEM ---
-    imageUploader.addEventListener('change', (event) => {
-        // ... (código existente sem alterações)
-        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) {
-        // ... (código existente sem alterações)
-        imageAnalysisResult.innerHTML = `<div class="flex items-center justify-center p-4"><div class="spinner"></div><p class="ml-3">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) { const err = await response.json(); throw new Error(err.error); }
-            const vocabulary = await response.json();
-            displayImageVocabulary(vocabulary);
-        } catch (error) { imageAnalysisResult.innerHTML = `<p class="text-red-600 font-semibold">Erro: ${error.message}</p>`; }
-    }
-    function displayImageVocabulary(vocabulary) {
-        // ... (código existente sem alterações)
-        if (!vocabulary || vocabulary.length === 0) { imageAnalysisResult.innerHTML = `<p>Nenhum vocabulário identificado.</p>`; return; }
-        let html = '<h3 class="font-semibold mb-2">Vocabulário sugerido:</h3><div class="flex flex-wrap gap-2">';
-        vocabulary.forEach(item => {
-            const term = encodeURIComponent(item.term); const definition = encodeURIComponent(item.definition);
-            html += `<button onclick="createFlashcardFromSuggestion('${term}', '${definition}')" class="btn btn-secondary text-sm">${item.term}</button>`;
-        });
-        html += '</div>'; imageAnalysisResult.innerHTML = html;
     }
-    // --- LÓGICA DO CHAT (NOVO) ---
-    chatInput.addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') handleSendMessage();
-    });
-    async function handleSendMessage() {
         const message = chatInput.value.trim();
-        if (!message) return;
-        appendMessage(message, 'user');
         chatInput.value = '';
-        chatInput.disabled = true;
-        chatSendButton.disabled = true;
-        // Adiciona a mensagem do usuário ao histórico para enviar à API
         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) {
-                const errorData = await response.json();
-                throw new Error(errorData.error || 'Falha na resposta do chat.');
-            }
             const data = await response.json();
             appendMessage(data.response, 'ai');
-            // Adiciona a resposta da IA ao histórico
             chatHistory.push({ role: 'assistant', content: data.response });
         } catch (error) {
-            appendMessage(`Erro: ${error.message}`, 'ai');
-        } finally {
-            chatInput.disabled = false;
-            chatSendButton.disabled = false;
-            chatInput.focus();
         }
     }
     function appendMessage(text, sender) {
-        const messageElement = document.createElement('div');
-        messageElement.classList.add('chat-message', sender === 'user' ? 'user-message' : 'ai-message');
-        messageElement.textContent = text;
-        chatDisplay.appendChild(messageElement);
-        // Rola para a mensagem mais recente
         chatDisplay.scrollTop = chatDisplay.scrollHeight;
     }
-    // --- GERAÇÃO DE FLASHCARD ---
-    function createFlashcardFromSuggestion(encodedTerm, encodedDefinition) { /* ... */ }
-    async function createFlashcardFromSelection() { /* ... */ }
     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 = 280;
         container.style.minHeight = `${minHeight}px`;
         container.innerHTML = `
             <div class="flashcard-inner" style="min-height: ${minHeight}px;">
                 <div class="flashcard-front">
-                    <!-- ... conteúdo da frente ... -->
                 </div>
                 <div class="flashcard-back">
-                    <!-- ... conteúdo do verso ... -->
                 </div>
             </div>`;
         flashcardList.prepend(container);
         container.addEventListener('click', () => container.classList.toggle('flipped'));
     }
-    async function playWord(button, word) {
         event.stopPropagation();
-        // ... (código para tocar a palavra)
     }
 </script>
 </body>

         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
         body { font-family: 'Inter', sans-serif; background-color: #f7f9fc; }
         .card { background-color: white; border-radius: 12px; box-shadow: 0 4px_12px rgba(0,0,0,0.08); padding: 24px; }
+        .btn { padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
+        .btn:disabled { cursor: not-allowed; opacity: 0.5; }
         .btn-primary { background-color: #4f46e5; color: white; }
+        .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; }
         .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; }
         .flashcard-front { background-color: #f9fafb; }
         .flashcard-back { background-color: #ffffff; transform: rotateY(180deg); }
+        .audio-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #4f46e5; padding: 0; }
         #chatDisplay { height: 250px; overflow-y: auto; background-color: #f9fafb; border-radius: 8px; padding: 10px; border: 1px solid #e5e7eb; }
+        .chat-message { max-width: 80%; padding: 8px 12px; border-radius: 18px; margin-bottom: 8px; line-height: 1.4; word-wrap: break-word; }
+        .user-message { background-color: #4f46e5; color: white; align-self: flex-end; margin-left: auto; border-bottom-right-radius: 4px; }
+        .ai-message { background-color: #e5e7eb; color: #1f2937; align-self: flex-start; border-bottom-left-radius: 4px; }
+        .mic-button.is-recording { background-color: #ef4444; }
     </style>
 </head>
 <body class="p-4 md:p-8">
     <div class="container mx-auto max-w-5xl">
         <header class="text-center mb-10">
             <h1 class="text-3xl lg:text-4xl font-bold text-gray-800">Dynamic English Study Studio</h1>
+            <p class="text-gray-500 mt-2">Sua ferramenta de estudo com áudio, imagens, e prática de conversação e pronúncia.</p>
         </header>
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
             <!-- Coluna da Esquerda: Inputs -->
             <div class="flex flex-col gap-6">
                 <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">1. Estudo por Texto</h2>
+                    <div id="textEditor" contenteditable="true" spellcheck="true" lang="en" class="w-full p-4 border rounded-md min-h-[150px]"></div>
                     <p class="text-sm text-right text-gray-500 mt-2">Caracteres: <span id="charCount">0</span>/10000</p>
+                    <div class="mt-4 border-t pt-4 flex flex-wrap gap-2 justify-between items-center">
                         <button id="createCardButton" onclick="createFlashcardFromSelection()" class="btn btn-primary bg-green-600 hover:bg-green-700 disabled:opacity-50" disabled>+ Criar Flashcard</button>
+                        <button id="playButton" onclick="handlePlay()" class="btn btn-primary" disabled>
                             <span id="playText">Ouvir Texto</span>
+                            <div id="playSpinner" class="spinner ml-2 hidden"></div>
                         </button>
                     </div>
+                    <audio id="audioPlayer" controls class="w-full mt-4 hidden"></audio>
                 </div>
                 <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">2. Estudo por Imagem</h2>
+                    <input type="file" id="imageUploader" accept="image/*" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100"/>
                     <img id="imagePreview" src="" class="mt-4 rounded-lg hidden max-h-60 mx-auto" alt="Pré-visualização"/>
                     <div id="imageAnalysisResult" class="mt-4"></div>
                 </div>
+                 <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">3. Prática de Conversação</h2>
+                    <p class="text-sm text-gray-600 mb-4">Fale com o tutor de IA. A resposta dele será em áudio.</p>
+                    <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 id="chatSendButton" onclick="handleTextInput()" class="btn btn-secondary">Enviar</button>
+                        <button id="micButton" onclick="handleVoiceInput()" class="btn btn-primary mic-button w-12 h-12 rounded-full">🎙️</button>
                     </div>
                 </div>
+                <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">Configurações de IA</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                           <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">
+                               <option value="gemini:gemini-1.5-flash-latest">Google Gemini 1.5 Flash</option>
+                               <option value="groq:llama-3.1-8b-instant">Groq (Llama 3.1 8B)</option>
+                               <option value="groq:mixtral-8x7b-32768">Groq (Mixtral 8x7b)</option>
+                           </select>
+                        </div>
+                       <div>
+                           <label for="contextSelector" class="block text-sm font-medium text-gray-700">Foco do Vocabulário</label>
+                           <select id="contextSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-md shadow-sm">
+                               <option value="General/Social">Geral/Social</option>
+                               <option value="Professional/Business">Profissional/Negócios</option>
+                               <option value="Technical/IT">Técnico/TI</option>
+                           </select>
+                       </div>
+                   </div>
+                </div>
             </div>
             <!-- Coluna da Direita: Flashcards -->
             <div id="flashcardsPanel" class="card">
                 <h2 class="text-xl font-semibold mb-4 text-gray-700">Sua Sessão de Estudo</h2>
+                <div id="flashcardList" class="space-y-6">
+                    <p id="noCardsMessage" class="text-gray-500 italic">Nenhum flashcard criado ainda.</p>
                 </div>
             </div>
         </div>
 <script>
     // --- ELEMENTOS GLOBAIS ---
     const textEditor = document.getElementById('textEditor');
+    const charCount = document.getElementById('charCount');
     const createCardButton = document.getElementById('createCardButton');
     const playButton = document.getElementById('playButton');
     const playText = document.getElementById('playText');
+    const playSpinner = document.getElementById('playSpinner');
+    const audioPlayer = document.getElementById('audioPlayer');
+    const flashcardList = document.getElementById('flashcardList');
+    const noCardsMessage = document.getElementById('noCardsMessage');
     const imageUploader = document.getElementById('imageUploader');
     const imagePreview = document.getElementById('imagePreview');
     const imageAnalysisResult = document.getElementById('imageAnalysisResult');
     const chatDisplay = document.getElementById('chatDisplay');
     const chatInput = document.getElementById('chatInput');
     const chatSendButton = document.getElementById('chatSendButton');
+    const micButton = document.getElementById('micButton');
+    const modelSelector = document.getElementById('modelSelector');
+    const contextSelector = document.getElementById('contextSelector');
     let chatHistory = [];
+    let recognition;
+    let isRecording = false;
+    // --- LÓGICA PRINCIPAL DO EDITOR DE TEXTO ---
     textEditor.addEventListener('input', () => {
         const len = textEditor.innerText.length;
+        charCount.textContent = `${len}/10000`;
+        playButton.disabled = len === 0;
     });
     textEditor.addEventListener('mouseup', () => {
         createCardButton.disabled = !window.getSelection().toString().trim();
     });
+    // --- LÓGICA DE ÁUDIO DO TEXTO PRINCIPAL ---
+    async function handlePlay() {
+        const text = textEditor.innerText;
+        if (!text) return;
+        playButton.disabled = true;
+        playText.textContent = 'Gerando...';
+        playSpinner.classList.remove('hidden');
         try {
+            const audioBlob = await fetchAudioBlob(text);
+            const audioUrl = URL.createObjectURL(audioBlob);
+            audioPlayer.src = audioUrl;
+            audioPlayer.classList.remove('hidden');
+            audioPlayer.play();
+            audioPlayer.onended = () => URL.revokeObjectURL(audioUrl);
+        } catch (error) {
+            alert(`Erro ao gerar áudio: ${error.message}`);
+        } finally {
+            playButton.disabled = false;
+            playText.textContent = 'Ouvir Texto';
+            playSpinner.classList.add('hidden');
+        }
     }
+    // --- LÓGICA DE CONVERSAÇÃO (VOZ E TEXTO) ---
+    function initializeSpeechRecognition() {
+        window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (!window.SpeechRecognition) {
+            micButton.disabled = true;
+            micButton.textContent = '❌';
+            console.error('Speech Recognition not supported.');
+            return;
+        }
+        recognition = new SpeechRecognition();
+        recognition.lang = 'en-US';
+        recognition.interimResults = false;
+        recognition.onresult = (event) => {
+            const transcript = event.results[0][0].transcript;
+            chatInput.value = transcript;
+            sendMessage(transcript);
+        };
+        recognition.onerror = (event) => console.error('Speech 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); // Toca a resposta da IA
         } catch (error) {
+            appendMessage(`Erro no chat: ${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 ---
+    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 justify-center p-4"><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">Erro: ${error.message}</p>`;
+        }
+    }
+    function displayImageVocabulary(vocabulary) {
+        if (!vocabulary || vocabulary.length === 0) {
+            imageAnalysisResult.innerHTML = `<p class="text-gray-500">Nenhum vocabulário claro foi identificado.</p>`;
+            return;
+        }
+        let html = '<h3 class="font-semibold mb-2">Vocabulário sugerido (clique para criar card):</h3><div class="flex flex-wrap gap-2">';
+        vocabulary.forEach(item => {
+            html += `<button onclick="createFlashcardFromSuggestion('${item.term.replace(/'/g, "\\'")}', '${item.definition.replace(/'/g, "\\'")}')" class="btn btn-secondary !text-sm">${item.term}</button>`;
+        });
+        html += '</div>';
+        imageAnalysisResult.innerHTML = html;
+    }
+    // --- LÓGICA DE GERAÇÃO DE FLASHCARD ---
+    async function createFlashcardFromSelection() {
+        const selectedText = window.getSelection().toString().trim();
+        if (!selectedText) return;
+        createCardButton.disabled = true;
+        createCardButton.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: selectedText, context: textEditor.innerText, for_flashcard: true,
+                    model: modelSelector.value, context_focus: contextSelector.value
+                })
+            });
+            if (!response.ok) throw new Error((await response.json()).error);
+            const cardData = await response.json();
+            renderFlashcard(cardData);
+        } catch (error) {
+            alert(`Falha ao criar flashcard: ${error.message}`);
+        } finally {
+            createCardButton.disabled = false;
+            createCardButton.textContent = '+ Criar Flashcard';
+        }
+    }
+    function createFlashcardFromSuggestion(term, definition) {
+        const cardData = {
+            term: term, definition: definition,
+            translation: '(traduza-me)', context_sentence: `This is a ${term}.`, gapped_sentence: `This is a _______________.`
+        };
+        renderFlashcard(cardData);
+    }
     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 = 350;
         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}</p>
+                    </div>
+                    <div class="border-t pt-4 mt-4 text-center">
+                        <strong class="text-indigo-600">Dica (PT):</strong> ${data.translation}
+                    </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}</span>
+                        </p>
+                        <p class="text-sm text-gray-800"><strong class="font-semibold">Definição:</strong> ${data.definition}</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', () => container.classList.toggle('flipped'));
     }
+    // --- 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]');
+        const practiceRec = new SpeechRecognition();
+        practiceRec.lang = 'en-US';
+        button.innerHTML = '<div class="spinner"></div>';
+        button.disabled = true;
+        feedbackArea.textContent = 'Ouvindo...';
+        practiceRec.start();
+        practiceRec.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;
+            }
+        };
+        practiceRec.onerror = (e) => {
+            feedbackArea.textContent = `Erro ao gravar: ${e.error}`;
+            button.innerHTML = '🎙️';
+            button.disabled = false;
+        };
+    }
+    // --- FUNÇÕES AUXILIARES DE ÁUDIO ---
+    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) throw new Error('Falha ao gerar áudio no backend.');
+        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', () => {
+        initializeSpeechRecognition();
+    });
 </script>
 </body>