Spaces:

InnovationAI
/

EnglishStudyHelper

Sleeping

File size: 31,807 Bytes

397925c
 
ba185bd
 
 
c8a75d1
ba185bd
 
397925c
 
 
ea769a5
 
397925c
ea769a5
 
 
b442dad
8d574fd
397925c
ea769a5
397925c
 
ea769a5
8d574fd
ea769a5
 
 
 
227440d
 
ba185bd
 
397925c
c8a75d1
397925c
c8a75d1
397925c
ea769a5
c8a75d1
 
397925c
8d574fd
397925c
 
ea769a5
 
31d7049
ea769a5
8d574fd
ea769a5
8d574fd
ea769a5
8d574fd
397925c
ea769a5
c8a75d1
 
397925c
e07e47b
ea769a5
8d574fd
 
cdeafe8
8d574fd
ea769a5
 
 
8d574fd
ea769a5
2e1dae3
ea769a5
397925c
cdeafe8
8d574fd
e07e47b
 
 
 
 
 
 
 
 
 
 
b442dad
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e07e47b
ea769a5
 
 
 
 
 
e07e47b
b442dad
 
e07e47b
 
 
b442dad
 
e07e47b
ea769a5
 
 
 
 
 
 
 
 
 
 
 
cdeafe8
 
397925c
 
8d574fd
ea769a5
 
c8a75d1
 
ba185bd
c8a75d1
 
397925c
 
 
ea769a5
397925c
31d7049
 
ea769a5
 
 
 
8d574fd
 
 
 
 
ea769a5
 
 
e07e47b
 
 
b442dad
 
 
 
ea769a5
8d574fd
ea769a5
 
8d574fd
ea769a5
31d7049
8d574fd
ea769a5
 
b442dad
31d7049
397925c
8d574fd
397925c
8d574fd
ea769a5
 
 
 
 
 
 
31d7049
ea769a5
 
 
 
 
 
 
2e1dae3
ea769a5
 
 
 
 
31d7049
 
ea769a5
2e1dae3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ea769a5
8d574fd
ea769a5
8d574fd
ea769a5
 
2e1dae3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ea769a5
e07e47b
2e1dae3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ea769a5
2e1dae3
e07e47b
 
 
 
ea769a5
 
e07e47b
 
 
ea769a5
e07e47b
 
 
 
ea769a5
2e1dae3
e07e47b
 
ea769a5
e07e47b
ea769a5
e07e47b
 
ea769a5
 
b442dad
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8d574fd
e07e47b
2e1dae3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
227440d
2e1dae3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
227440d
 
2e1dae3
227440d
2e1dae3
 
 
 
227440d
2e1dae3
 
227440d
2e1dae3
 
 
 
 
227440d
2e1dae3
 
227440d
2e1dae3
227440d
2e1dae3
 
 
 
 
 
 
 
 
 
 
 
 
227440d
 
 
2e1dae3
 
ea769a5
227440d
b442dad
227440d
 
 
 
b442dad
227440d
 
 
 
2e1dae3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ea769a5
 
2e1dae3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ea769a5
 
 
 
 
397925c
c8a75d1
ba185bd
2e62f01
31d7049

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic English Study Studio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @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; 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; }
        .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; }
        .delete-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #9ca3af; z-index: 10; }
        .delete-btn:hover { 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 (Análise)</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>
                    <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-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>

                <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>
                    <div class="flex gap-2">
                        <input type="text" id="imagePromptInput" class="flex-grow border rounded-lg px-3 py-2" placeholder="Ex: a blue cat reading a book on the moon">
                        <button id="generateImageBtn" onclick="generateImage()" class="btn btn-primary">Gerar</button>
                    </div>
                    <div id="imageResultContainer" class="mt-4 p-4 border rounded-lg bg-gray-50 min-h-[200px] flex items-center justify-center">
                        <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>
                    <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">
                               <optgroup label="Google Gemini">
                                   <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: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>
                       <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>
    </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 micButton = document.getElementById('micButton');
    const modelSelector = document.getElementById('modelSelector');
    const contextSelector = document.getElementById('contextSelector');
    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;
    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;
        translateFullTextButton.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}. Verifique o console para mais detalhes.`);
        } 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 = '❌';
            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) {
        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) => {
        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 (NANO BANANA) ---
    async function generateImage() {
        const prompt = imagePromptInput.value.trim();
        if (!prompt) {
            alert('Por favor, digite uma descrição para a imagem.');
            return;
        }
        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) 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) {
            imageResultContainer.innerHTML = `<p class="text-red-600 font-semibold">Falha ao gerar imagem: ${error.message}</p>`;
        } finally {
            generateImageBtn.disabled = false;
            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) {
        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;
            renderFlashcard(cardData);
        } catch (error) {
            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`;

        const fallback = 'Informação não gerada';

        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">Frase de Contexto:</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">Dica (PT):</strong> ${data.translation || fallback}
                    </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 || 'Termo'}</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">Definição:</strong> ${data.definition || fallback}</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' && !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 = '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) {
        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', () => {
        initializeSpeechRecognition();
    });
</script>

</body>
</html>