Spaces:

InnovationAI
/

EnglishStudyHelper

Sleeping

File size: 35,501 Bytes

<!DOCTYPE html>
<html lang="en">
<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>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></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; }

        .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; }

        #activityChatDisplay { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; min-height: 150px; background-color: #f9fafb; }

        .ai-prompt { border-bottom: 2px dashed #d1d5db; padding-bottom: 1rem; margin-bottom: 1rem; }

        .user-response-display { background-color: #eef2ff; border-left: 4px solid #4f46e5; padding: 0.75rem; margin-bottom: 1rem; font-style: italic; }

        .ai-feedback { background-color: #f0fdf4; border-left: 4px solid #22c55e; padding: 0.75rem; }

        .ai-feedback h3 { font-weight: 700; }

    </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">Your study tool with audio, images, and conversation & pronunciation practice.</p>
        </header>

        <div class="card mb-8">
            <h2 class="text-xl font-semibold mb-4 text-gray-700">Global Session Settings</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                   <label for="modelSelector" class="block text-sm font-medium text-gray-700">Main AI Model</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>Loading models...</option>
                   </select>
                </div>
               <div>
                   <label for="contextSelector" class="block text-sm font-medium text-gray-700">Vocabulary Focus</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">General/Social</option>
                       <option value="Professional/Business">Professional/Business</option>
                       <option value="Technical/IT">Technical/IT</option>
                   </select>
               </div>
               <div>
                   <label for="voiceSelector" class="block text-sm font-medium text-gray-700">Voice Accent (TTS)</label>
                   <select id="voiceSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-md shadow-sm">
                       <option value="co.uk">British (Female)</option>
                       <option value="com">American (Female)</option>
                       <option value="com.au">Australian (Female)</option>
                   </select>
               </div>
           </div>
        </div>

        <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. Study from Text</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">Characters: <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>+ Create Flashcard</button>
                        <button id="playButton" onclick="handlePlay()" class="btn btn-primary" disabled>
                            <span id="playText">Listen to Text</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. Study from Image (Analysis)</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="Preview"/>
                    <div id="imageAnalysisResult" class="mt-4"></div>
                </div>
                
                 <div class="card">
                    <h2 class="text-xl font-semibold mb-4 text-gray-700">3. Conversation Practice</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="Type or use the microphone...">
                        <button onclick="handleTextInput()" class="btn btn-primary bg-gray-500 hover:bg-gray-600">Send</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. Image Generator (Nano Banana)</h2>
                    <p class="text-sm text-gray-600 mb-2">Describe a scene in English for the AI to draw.</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">Generate</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">Your image will appear here.</p>
                    </div>
                </div>
                
                <div class="card">
                    <h2 class="text-xl font-semibold mb-4 text-gray-700">5. Interactive Writing Practice</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">Activity Type</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="translate_pt_en">Translate (PT to EN)</option>
                               <option value="email_writing">Write Formal Email</option>
                               <option value="summary_writing">Summarize Main Text</option>
                               <option value="professional_conversation">Simulate Professional Conversation</option>
                           </select>
                       </div>
                        <div class="flex items-end">
                             <button id="generateActivityButton" onclick="generateActivity()" class="btn btn-primary w-full">Generate Activity</button>
                        </div>
                    </div>
                    
                    <div id="activityChatContainer" class="mt-4 border-t pt-4">
                        <div id="activityChatDisplay">
                            <p class="text-gray-500 italic">Your interactive exercise will appear here.</p>
                        </div>
                        <div id="activityResponseArea" class="mt-4 hidden">
                            <label for="activityInput" class="block text-sm font-medium text-gray-700 mb-1">Your Answer:</label>
                            <textarea id="activityInput" rows="4" class="w-full p-2 border rounded-md"></textarea>
                            <button id="submitActivityBtn" onclick="submitActivityResponse()" class="btn btn-primary mt-2">Submit Answer</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Coluna da Direita: Flashcards -->
            <div id="flashcardsPanel" class="card">
                <h2 class="text-xl font-semibold mb-4 text-gray-700">Your Study Session</h2>
                <div id="flashcardList" class="space-y-6">
                    <p id="noCardsMessage" class="text-gray-500 italic">No flashcards created yet.</p>
                </div>
            </div>
        </div>
    </div>

<script>

    // --- ELEMENTOS GLOBAIS ---

    const modelSelector = document.getElementById('modelSelector');

    const contextSelector = document.getElementById('contextSelector');

    const voiceSelector = document.getElementById('voiceSelector');

    const textEditor = document.getElementById('textEditor');

    const createCardButton = document.getElementById('createCardButton');

    const playButton = document.getElementById('playButton');

    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 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 activityChatDisplay = document.getElementById('activityChatDisplay');

    const activityResponseArea = document.getElementById('activityResponseArea');

    const activityInput = document.getElementById('activityInput');

    const submitActivityBtn = document.getElementById('submitActivityBtn');

    

    let chatHistory = [];

    let recognition;

    let isRecording = false;

    let currentActivityPrompt = "";



    // --- CARREGAMENTO DINÂMICO DE MODELOS ---

    async function populateModelSelector() {

        try {

            const response = await fetch('/list-models');

            if (!response.ok) throw new Error('Failed to fetch model list.');

            const models = await response.json();

            modelSelector.innerHTML = '';

            const geminiGroup = document.createElement('optgroup');

            geminiGroup.label = 'Google Gemini';

            const groqGroup = document.createElement('optgroup');

            groqGroup.label = 'Groq (Ultra Fast)';

            models.forEach(model => {

                const option = document.createElement('option');

                option.value = model.value;

                option.textContent = model.name;

                if (model.value.startsWith('gemini:')) {

                    geminiGroup.appendChild(option);

                } else if (model.value.startsWith('groq:')) {

                    groqGroup.appendChild(option);

                }

            });

            modelSelector.appendChild(geminiGroup);

            modelSelector.appendChild(groqGroup);

        } catch (error) {

            console.error("Error populating models:", error);

            modelSelector.innerHTML = '<option>Error loading models</option>';

        }

    }



    // --- FUNÇÕES DE ÁUDIO ---

    async function fetchAudioBlob(text) {

        const selectedTld = voiceSelector.value;

        const response = await fetch('/tts-proxy', {

            method: 'POST',

            headers: { 'Content-Type': 'application/json' },

            body: JSON.stringify({ text: text, tld: selectedTld })

        });

        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('Error playing audio:', error); }

    }



    // --- LÓGICA DO EDITOR ---

    const charCount = document.getElementById('charCount');

    const playText = document.getElementById('playText');

    const playSpinner = document.getElementById('playSpinner');

    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();

    });

    async function handlePlay() {

         const text = textEditor.innerText;

        if (!text) return;

        playButton.disabled = true;

        playText.textContent = 'Generating...';

        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(`Error generating audio: ${error.message}. Check the console for more details.`);

        } finally {

            playButton.disabled = false;

            playText.textContent = 'Listen to Text';

            playSpinner.classList.add('hidden');

        }

    }



    // --- TODAS AS OUTRAS FUNÇÕES ---

    

    // ATIVIDADES

    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> Generating...';

        activityChatDisplay.innerHTML = '<p class="text-gray-500 italic">Generating your exercise...</p>';

        activityResponseArea.classList.add('hidden');

        let prompt = "";

        if (activityType === 'translate_pt_en') {

            prompt = `Based on the '${context}' context, create one single sentence in Portuguese for me to translate into English.`;

        } else if (activityType === 'email_writing') {

            prompt = `Create a scenario for me to write a formal email, related to the '${context}' context. Give me clear instructions on what to write.`;

        } else if (activityType === 'summary_writing') {

            if (!sourceText) {

                alert("Please paste text in the main editor to generate a summary activity.");

                activityChatDisplay.innerHTML = '<p class="text-red-500">Please paste text in the editor in card #1 first.</p>';

                generateActivityButton.disabled = false;

                generateActivityButton.textContent = 'Generate Activity';

                return;

            }

            prompt = `Your task is to summarize the following text in 2 or 3 sentences: "${sourceText}"`;

        } else if (activityType === 'professional_conversation') {

             prompt = `Start a professional role-playing conversation with me related to '${context}'. Ask me an open-ended question to begin.`;

        }

        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();

            currentActivityPrompt = data.explanation;

            activityChatDisplay.innerHTML = `<div class="ai-prompt"><strong>Your Task:</strong><p>${currentActivityPrompt}</p></div>`;

            activityResponseArea.classList.remove('hidden');

        } catch (error) {

            activityChatDisplay.innerHTML = `<p class="text-red-600 font-semibold">Failed to generate activity: ${error.message}</p>`;

        } finally {

            generateActivityButton.disabled = false;

            generateActivityButton.textContent = 'Generate Activity';

        }

    }

    async function submitActivityResponse() {

        const userResponse = activityInput.value.trim();

        if (!userResponse) {

            alert("Please write a response.");

            return;

        }

        submitActivityBtn.disabled = true;

        submitActivityBtn.innerHTML = '<div class="spinner mr-2"></div> Getting Feedback...';

        const oldFeedback = activityChatDisplay.querySelector('.ai-feedback');

        if(oldFeedback) oldFeedback.remove();

        const oldResponse = activityChatDisplay.querySelector('.user-response-display');

        if(oldResponse) oldResponse.remove();

        const userResponseDiv = document.createElement('div');

        userResponseDiv.className = 'user-response-display';

        userResponseDiv.innerHTML = `<strong>Your Response:</strong><p>${userResponse}</p>`;

        activityChatDisplay.appendChild(userResponseDiv);

        try {

            const response = await fetch('/activity-feedback', {

                method: 'POST',

                headers: { 'Content-Type': 'application/json' },

                body: JSON.stringify({

                    model: modelSelector.value,

                    context_focus: contextSelector.value,

                    original_prompt: currentActivityPrompt,

                    user_response: userResponse

                })

            });

            if (!response.ok) throw new Error((await response.json()).error);

            const data = await response.json();

            const feedbackDiv = document.createElement('div');

            feedbackDiv.className = 'ai-feedback';

            feedbackDiv.innerHTML = `<strong>Feedback:</strong><div class="prose prose-sm max-w-none">${marked.parse(data.feedback)}</div>`;

            activityChatDisplay.appendChild(feedbackDiv);

            activityInput.value = '';

        } catch (error) {

            const errorDiv = document.createElement('div');

            errorDiv.className = 'ai-feedback';

            errorDiv.innerHTML = `<p class="text-red-600 font-semibold">Failed to get feedback: ${error.message}</p>`;

            activityChatDisplay.appendChild(errorDiv);

        } finally {

            submitActivityBtn.disabled = false;

            submitActivityBtn.textContent = 'Submit Answer';

        }

    }

    

    // 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', () => {

        populateModelSelector();

        initializeSpeechRecognition();

    });

</script>

</body>
</html>