Spaces:

InnovationAI
/

EnglishStudyHelper

Sleeping

App Files Files Community

amauricunha commited on Oct 10, 2025

Commit

397925c

verified ·

1 Parent(s): 81e20b3

Update index.html

Browse files

Files changed (1) hide show

index.html +292 -720

index.html CHANGED Viewed

@@ -1,764 +1,336 @@
-<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>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
-        body {
-            font-family: 'Inter', sans-serif;
-            background-color: #f7f9fc;
-        }
-        .container {
-            max-width: 1000px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        .card {
-            background-color: white;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-            padding: 24px;
-        }
-        .btn-primary {
-            background-color: #4f46e5;
-            color: white;
-            transition: background-color 0.2s;
-        }
-        .btn-primary:hover {
-            background-color: #4338ca;
-        }
-        .btn-secondary {
-            background-color: #e5e7eb;
-            color: #1f2937;
-            transition: background-color 0.2s;
-        }
-        .btn-secondary:hover {
-            background-color: #d1d5db;
-        }
-        .btn-success {
-            background-color: #10b981;
-            color: white;
-            transition: background-color 0.2s;
-        }
-        .btn-success:hover {
-            background-color: #059669;
-        }
-        /* Style for the Content Editable Editor */
-        #textEditor {
-            border: 1px solid #ccc;
-            padding: 1rem;
-            min-height: 16rem; /* h-64 equivalent */
-            border-radius: 0.5rem;
-            color: #1f2937;
-            line-height: 1.6;
-            outline: none;
-            overflow-y: auto;
-            /* Force English spellcheck */
-            -webkit-user-modify: read-write-plaintext-only;
-            spellcheck: true;
-        }
-        /* Styling for the Modal (Carousel Simulation) */
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1000;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto;
-            background-color: rgba(0,0,0,0.4);
-            backdrop-filter: blur(5px);
-        }
-        .modal-content {
-            background-color: #fff;
-            margin: 10% auto;
-            padding: 20px;
-            border-radius: 10px;
-            width: 90%;
-            max-width: 500px;
-            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
-            animation: slideIn 0.3s ease-out;
-        }
-        @keyframes slideIn {
-            from { opacity: 0; transform: translateY(-30px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .close {
-            color: #aaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-        }
-        .close:hover,
-        .close:focus {
-            color: #333;
-            text-decoration: none;
-            cursor: pointer;
-        }
-        .tab-button.active {
-            background-color: #4f46e5;
-            color: white;
-            border-bottom: 2px solid #4f46e5;
-        }
-        /* Flashcard style */
-        .flashcard {
-            background-color: #f3f4f6;
-            padding: 15px;
-            border-radius: 8px;
-            margin-bottom: 10px;
-            cursor: pointer;
-            transition: all 0.2s;
-            border: 1px solid #e5e7eb;
-        }
-        .flashcard:hover {
-            background-color: #e5e7eb;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-        }
-        .flashcard-term {
-            font-weight: 600;
-            color: #4f46e5;
-            text-decoration: underline;
-        }
-        .flashcard-definition {
-            font-size: 0.9em;
-            color: #4b5563;
-        }
-        .flashcard-example {
-            font-style: italic;
-            font-size: 0.8em;
-            color: #6b7280;
-            margin-top: 5px;
-        }
-        /* Loading Style (Spinner) */
-        .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); }
-        }
     </style>
 </head>
-<body>
-    <div class="container py-8">
         <header class="text-center mb-10">
-            <h1 class="text-3xl font-bold text-gray-800">Dynamic English Study Studio</h1>
-            <p class="text-gray-500">Audio and Contextualization tool for language studies.</p>
         </header>
-        <div class="card mb-6">
-            <h2 class="text-xl font-semibold mb-4 text-gray-700">Your Text for Study</h2>
-            <!-- CONTENT EDITABLE DIV replaces TEXTAREA -->
-            <div id="textEditor"
-                 contenteditable="true"
-                 spellcheck="true"
-                 lang="en"
-                 data-placeholder="Paste the English text you want to listen to and study here. Double-click any word for translation and context!"
-                 class="w-full p-4 focus:ring-indigo-500 focus:border-indigo-500 text-gray-800"></div>
-            <p class="text-sm text-right text-gray-500 mt-2">Characters: <span id="charCount">0</span>/5000</p>
-            <div class="mt-4 border-t pt-4">
-                <button id="createCardButton" onclick="createFlashcardFromSelection()" class="btn-success px-4 py-2 rounded-lg font-medium disabled:opacity-50" disabled>
-                    + Create Flashcard from Selection
-                </button>
-            </div>
-        </div>
-        <div class="card mb-6">
-            <h2 class="text-xl font-semibold mb-4 text-gray-700">LLM and Audio Controls</h2>
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
-                <!-- LLM Provider Selector -->
-                <div class="md:col-span-2">
-                    <label for="modelSelector" class="block text-sm font-medium text-gray-700">AI Model Provider (Context/Translation)</label>
-                    <select id="modelSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md shadow-sm">
-                        <!-- Format: provider:model-name -->
-                        <option value="gemini:gemini-2.5-flash">Google Gemini (Free Tier)</option>
-                        <option value="groq:mixtral-8x7b-32768">Groq (Mixtral 8x7b - Fast)</option>
-                        <option value="groq:llama3-8b-8192">Groq (Llama 3 8B)</option>
-                    </select>
                 </div>
-                <!-- Speed Control -->
-                <div>
-                    <label for="speedSelector" class="block text-sm font-medium text-gray-700">Speaking Rate (gTTS)</label>
-                    <select id="speedSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md shadow-sm">
-                        <option value="1.0">Normal (1.0x)</option>
-                        <option value="0.75">Slow (0.75x)</option>
-                        <option value="1.25">Fast (1.25x)</option>
-                    </select>
-                </div>
-                <!-- Main Play Button -->
-                <div class="md:col-span-1 flex items-end">
-                    <button id="playButton" onclick="handlePlay()" class="btn-primary w-full py-2.5 rounded-lg font-semibold flex items-center justify-center disabled:opacity-50" disabled>
-                        <span id="playText">Generate & Play Audio</span>
-                        <div id="loadingSpinner" class="spinner ml-3 hidden"></div>
-                    </button>
-                </div>
-            </div>
-            <!-- Context Selector (NEW) -->
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-                <div>
-                    <label for="contextSelector" class="block text-sm font-medium text-gray-700">Vocabulary Context / Focus Area</label>
-                    <select id="contextSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md shadow-sm">
-                        <option value="General/Social (Casual conversation, daily life)">General/Social (Casual conversation, daily life)</option>
-                        <option value="Professional/Business (Meetings, emails, reports)">Professional/Business (Meetings, emails, reports)</option>
-                        <option value="Technical/IT (Software, Engineering, Tech topics)">Technical/IT (Software, Engineering, Tech topics)</option>
-                    </select>
                 </div>
-                <!-- Full Translation Button -->
-                <div class="flex items-end">
-                    <button id="translateFullTextButton" onclick="translateFullText()" class="btn-secondary w-full py-2.5 rounded-lg font-semibold disabled:opacity-50">
-                        Translate Full Text (PT)
-                    </button>
                 </div>
             </div>
-            <!-- Player Controls and Phrase Loop -->
-            <div class="mt-4 border-t pt-4">
-                <audio id="audioPlayer" controls class="w-full mb-4"></audio>
-                <div class="flex flex-wrap gap-3">
-                    <button id="loopSelectionButton" onclick="setLoopMode()" class="btn-secondary px-4 py-2 rounded-lg font-medium disabled:opacity-50" disabled>
-                        Loop Selection (Repeat Phrase)
-                    </button>
-                    <button id="clearLoopButton" onclick="clearLoopMode()" class="btn-secondary px-4 py-2 rounded-lg font-medium disabled:opacity-50" disabled>
-                        Clear Loop
-                    </button>
                 </div>
             </div>
         </div>
-        <!-- Writing/Translation Activity Panel (NEW) -->
-        <div class="card mb-6">
-            <h2 class="text-xl font-semibold mb-4 text-gray-700">Writing & Translation Activities</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
-                <!-- Activity Selector -->
-                <div class="md:col-span-2">
-                    <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 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md shadow-sm">
-                        <option value="translation_pt_en">Translation from PT to EN (Practice Writing)</option>
-                        <option value="email_writing">Formal Email Prompt (Professional Practice)</option>
-                        <option value="summary_writing">Summarization Prompt (Reading & Writing)</option>
-                    </select>
-                </div>
-                <!-- Generate Button -->
-                <div class="md:col-span-1 flex items-end">
-                    <button id="generateActivityButton" onclick="generateActivity()" class="btn-primary w-full py-2.5 rounded-lg font-semibold flex items-center justify-center">
-                        <span id="activityText">Generate Activity</span>
-                        <div id="activitySpinner" class="spinner ml-3 hidden"></div>
-                    </button>
-                </div>
-            </div>
-            <!-- Activity Output -->
-            <div id="activityOutput" class="border p-4 mt-4 rounded-lg bg-gray-50 min-h-[100px]">
-                <p class="text-gray-500 italic">Select an activity and context to generate your first prompt.</p>
-            </div>
-        </div>
-        <!-- Flashcards Panel -->
-        <div id="flashcardsPanel" class="card">
-            <h2 class="text-xl font-semibold mb-4 text-gray-700">Your Flashcards (Study Session)</h2>
-            <div id="flashcardList" class="space-y-3">
-                <p id="noCardsMessage" class="text-gray-500 italic">No flashcards created yet. Select a word and click 'Create Flashcard'.</p>
-            </div>
-        </div>
     </div>
-    <!-- Translation and Context Modal -->
     <div id="explanationModal" class="modal">
-        <div class="modal-content">
-            <span class="close" onclick="closeModal()">&times;</span>
-            <h3 class="text-2xl font-bold mb-4 text-gray-800">Word Analysis: <span id="wordSelected" class="text-indigo-600"></span></h3>
-            <!-- Tab Navigation (Carousel Simulation) -->
-            <div class="flex border-b mb-4">
-                <button class="tab-button active px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="explanation">Explanation (EN)</button>
-                <button class="tab-button px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="translation">Translation (PT)</button>
-            </div>
-            <!-- Tab Content -->
-            <div id="modalContent">
-                <div id="explanationTab" class="tab-content">
-                    <p class="text-gray-600 italic">Context and Definition in English:</p>
-                    <div id="explanationResult" class="mt-2 p-3 bg-gray-50 rounded-md min-h-[50px]">
-                        <div id="explanationSpinner" class="spinner mx-auto hidden"></div>
-                        <p id="explanationText" class="text-gray-800"></p>
                     </div>
                 </div>
-                <div id="translationTab" class="tab-content hidden">
-                    <p class="text-gray-600 italic">Translation to Portuguese:</p>
-                    <div id="translationResult" class="mt-2 p-3 bg-gray-50 rounded-md min-h-[50px]">
-                        <div id="translationSpinner" class="spinner mx-auto hidden"></div>
-                        <p id="translationText" class="text-gray-800"></p>
                     </div>
                 </div>
             </div>
-            <button onclick="closeModal()" class="btn-primary mt-6 w-full py-2.5 rounded-lg font-semibold">Close</button>
-        </div>
-    </div>
-    <script>
-        // Global variables
-        const textEditor = document.getElementById('textEditor');
-        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 loopSelectionButton = document.getElementById('loopSelectionButton');
-        const clearLoopButton = document.getElementById('clearLoopButton');
-        const createCardButton = document.getElementById('createCardButton');
-        const flashcardList = document.getElementById('flashcardList');
-        const noCardsMessage = document.getElementById('noCardsMessage');
-        const speedSelector = document.getElementById('speedSelector');
-        const modelSelector = document.getElementById('modelSelector');
-        const contextSelector = document.getElementById('contextSelector'); // NEW
-        const activityTypeSelector = document.getElementById('activityTypeSelector'); // NEW
-        const generateActivityButton = document.getElementById('generateActivityButton'); // NEW
-        const activityOutput = document.getElementById('activityOutput'); // NEW
-        const activitySpinner = document.getElementById('activitySpinner'); // NEW
-        const activityText = document.getElementById('activityText'); // NEW
-        const translateFullTextButton = document.getElementById('translateFullTextButton'); // NEW
-        const MAX_CHARS = 5000;
-        let isLooping = false;
-        let loopText = '';
-        let lastAudioUrl = '';
-        // --- Interface and Editor Management ---
-        function getEditorText() {
-            return textEditor.innerText.trim();
-        }
-        // Add placeholder functionality for contenteditable
-        function updatePlaceholder() {
-            const placeholder = textEditor.getAttribute('data-placeholder');
-            if (getEditorText() === '' && textEditor.innerHTML === '') {
-                textEditor.innerHTML = `<span style="color:#9ca3af">${placeholder}</span>`;
-            } else if (textEditor.innerText.includes(placeholder)) {
-                 textEditor.innerHTML = '';
-            }
-        }
-        function removePlaceholder() {
-             const placeholderText = textEditor.getAttribute('data-placeholder');
-             if (textEditor.innerHTML.includes(placeholderText)) {
-                textEditor.innerHTML = '';
-             }
-        }
-        // Initial setup for placeholder
-        updatePlaceholder();
-        textEditor.addEventListener('focus', removePlaceholder);
-        textEditor.addEventListener('blur', updatePlaceholder);
-        textEditor.addEventListener('input', () => {
-            const currentLength = getEditorText().length;
-            charCount.textContent = currentLength;
-            playButton.disabled = currentLength === 0;
-            // Enable/disable translate full text button based on content
-            translateFullTextButton.disabled = currentLength === 0;
         });
-        // Update character count on load
-        textEditor.dispatchEvent(new Event('input'));
-        speedSelector.addEventListener('change', () => {
-            audioPlayer.playbackRate = parseFloat(speedSelector.value);
-        });
-        // Enable Loop and Card button if there is a selection
-        textEditor.addEventListener('mouseup', () => {
-            const selection = window.getSelection().toString().trim();
-            loopSelectionButton.disabled = !selection;
-            createCardButton.disabled = !selection;
-        });
-        // --- Main Audio and Loop Functionality ---
-        async function fetchAudio(text) {
-            playButton.disabled = true;
-            playText.textContent = "Generating Audio...";
-            loadingSpinner.classList.remove('hidden');
-            try {
-                const response = await fetch('/tts-proxy', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ text: text })
-                });
-                if (!response.ok) {
-                    throw new Error(`HTTP Error: ${response.status} ${response.statusText}`);
-                }
-                const audioBlob = await response.blob();
-                if (lastAudioUrl) URL.revokeObjectURL(lastAudioUrl);
-                lastAudioUrl = URL.createObjectURL(audioBlob);
-                audioPlayer.src = lastAudioUrl;
-                audioPlayer.playbackRate = parseFloat(speedSelector.value);
-                audioPlayer.play();
-            } catch (error) {
-                console.error('Error generating audio:', error);
-                alert('Error generating audio. Check the console or the status of your backend (app.py).');
-            } finally {
-                playButton.disabled = false;
-                playText.textContent = "Generate & Play Audio";
-                loadingSpinner.classList.add('hidden');
-            }
-        }
-        function handlePlay() {
-            isLooping = false;
-            clearLoopButton.disabled = true;
-            const textToPlay = getEditorText();
-            if (textToPlay) {
-                fetchAudio(textToPlay);
-            }
-        }
-        function setLoopMode() {
-            const selection = window.getSelection().toString().trim();
-            if (selection) {
-                loopText = selection;
-                isLooping = true;
-                clearLoopButton.disabled = false;
-                fetchAudio(loopText);
-                audioPlayer.title = 'Looping: ' + loopText;
-            } else {
-                alert('Select the text you wish to repeat.');
-            }
-        }
-        function clearLoopMode() {
-            isLooping = false;
-            loopText = '';
-            clearLoopButton.disabled = true;
-            audioPlayer.loop = false;
-            audioPlayer.title = '';
-            if (getEditorText()) {
-                handlePlay();
-            }
-        }
-        audioPlayer.addEventListener('ended', () => {
-            if (isLooping) {
-                audioPlayer.currentTime = 0;
-                audioPlayer.play();
-            }
-        });
-        // --- Full Text Translation Functionality (NEW) ---
-        async function translateFullText() {
-            const fullText = getEditorText();
-            if (!fullText) {
-                alert("Please enter text to translate.");
-                return;
-            }
-            translateFullTextButton.disabled = true;
-            translateFullTextButton.innerHTML = `<div class="spinner mr-2"></div> Translating...`;
-            const modelValue = modelSelector.value;
-            const context = contextSelector.value;
-            try {
-                // Use a generic prompt for full translation
-                const prompt = `Translate the following English text into clear, modern Portuguese, ensuring the translation adheres to the context: ${context}.\n\nENGLISH TEXT:\n---${fullText}---`;
-                const response = await fetch('/explain-proxy', { // Reusing explain-proxy for simple text generation
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        word: "FULL_TRANSLATION", // Marker word, not used by backend for full text
-                        context: fullText, // Full text as context
-                        for_flashcard: false,
-                        model: modelValue,
-                        custom_prompt: prompt // Pass the custom prompt
-                    })
-                });
-                if (!response.ok) {
-                    throw new Error(`HTTP Error: ${response.status}. Check API Keys.`);
-                }
-                const data = await response.json();
-                const translation = data.translation;
-                // Open a temporary modal or alert the user with the result
-                alert("FULL TEXT TRANSLATION:\n\n" + translation);
-            } catch (error) {
-                console.error('Error translating full text:', error);
-                alert('Failed to translate full text. Check console and API Keys.');
-            } finally {
-                translateFullTextButton.disabled = false;
-                translateFullTextButton.textContent = "Translate Full Text (PT)";
-            }
-        }
-        // --- Activity Generation Functionality (NEW) ---
-        async function generateActivity() {
-            const activityType = activityTypeSelector.value;
-            const context = contextSelector.value;
-            const modelValue = modelSelector.value;
-            const sourceText = getEditorText();
-            generateActivityButton.disabled = true;
-            activityText.textContent = "Generating...";
-            activitySpinner.classList.remove('hidden');
-            activityOutput.innerHTML = `<p class="text-gray-500 italic">Generating prompt...</p>`;
-            let prompt = "";
-            let title = "";
-            if (activityType === 'translation_pt_en') {
-                title = "Translation Exercise (PT to EN)";
-                // We ask the AI to generate a Portuguese phrase first, based on the context, and then give the prompt.
-                prompt = `You are a language teacher. Generate a single, challenging, but short Portuguese phrase that is perfectly relevant to the '${context}' context. Then, provide the Portuguese phrase to the user and prompt them to translate it to English. Format the output as: [PORTUGUESE PHRASE] \n\n Your Task: Translate the phrase above into English.`;
-            } else if (activityType === 'email_writing') {
-                title = "Formal Email Writing Prompt";
-                prompt = `You are a language teacher. Generate a challenging, realistic scenario for a formal email writing exercise, based strictly on the '${context}' context. The prompt must be in English and clearly state the recipient (e.g., 'Your Manager'), the goal (e.g., 'Requesting a budget'), and the required tone (e.g., 'Formal and concise').`;
-            } else if (activityType === 'summary_writing' && sourceText) {
-                title = "Summarization Prompt";
-                prompt = `You are a language teacher. Summarize the following English text in a single, complex English sentence, and then ask the user to expand your summary back into a paragraph, ensuring they use complex vocabulary related to the '${context}' context. The text to summarize is:\n\n---${sourceText}---`;
-            } else {
-                 activityOutput.innerHTML = `<p class="text-red-500 font-semibold">Please enter text in the editor to use the Summarization Prompt.</p>`;
-                 generateActivityButton.disabled = false;
-                 activityText.textContent = "Generate Activity";
-                 activitySpinner.classList.add('hidden');
-                 return;
-            }
-            try {
-                // Reusing explain-proxy for simple text generation
-                const response = await fetch('/explain-proxy', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        word: "ACTIVITY_GEN",
-                        context: context,
-                        for_flashcard: false,
-                        model: modelValue,
-                        custom_prompt: prompt
-                    })
-                });
-                if (!response.ok) {
-                    throw new Error(`HTTP Error: ${response.status}. Check API Keys.`);
-                }
-                const data = await response.json();
-                // The explanation field holds the generated activity text
-                const activityResult = data.explanation || data.translation || "Failed to generate activity prompt.";
-                activityOutput.innerHTML = `<h3 class="font-bold mb-2">${title}</h3><div class="whitespace-pre-wrap">${activityResult}</div>`;
-            } catch (error) {
-                console.error('Error generating activity:', error);
-                activityOutput.innerHTML = `<p class="text-red-500 font-semibold">Activity generation failed. Check if API Keys are configured correctly for ${modelValue}.</p>`;
-            } finally {
                 generateActivityButton.disabled = false;
-                activityText.textContent = "Generate Activity";
                 activitySpinner.classList.add('hidden');
-            }
-        }
-        // --- Quick Translation Functionality (Double Click) ---
-        async function fetchExplanationAndTranslation(word, context, isFlashcard=false) {
-            const spinner = isFlashcard ? document.getElementById('cardSpinner') : document.getElementById('explanationSpinner');
-            const explanationText = isFlashcard ? null : document.getElementById('explanationText');
-            const translationText = isFlashcard ? null : document.getElementById('translationText');
-            const modelValue = modelSelector.value;
-            const contextFocus = contextSelector.value; // Pass context focus
-            if (!isFlashcard) {
-                explanationText.textContent = '';
-                translationText.textContent = '';
-            }
-            spinner.classList.remove('hidden');
-            try {
-                const response = await fetch('/explain-proxy', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        word: word,
-                        context: context,
-                        for_flashcard: isFlashcard,
-                        model: modelValue,
-                        context_focus: contextFocus // NEW: Pass context focus for accurate flashcards
-                    })
-                });
-                if (!response.ok) {
-                    const errorMsg = `HTTP Error: ${response.status}. Check if GEMINI_API_KEY/GROQ_API_KEY is configured in your Space for the selected model.`;
-                    throw new Error(errorMsg);
-                }
-                const data = await response.json();
-                if (isFlashcard) {
-                    return data;
-                } else {
-                    explanationText.textContent = data.explanation || 'Could not retrieve explanation.';
-                    translationText.textContent = data.translation || 'Could not retrieve translation.';
-                }
-                return data;
-            } catch (error) {
-                console.error('Error fetching context from AI:', error);
-                const msg = `AI analysis failed. Error: ${error.message}`;
-                if (!isFlashcard) {
-                    explanationText.textContent = msg;
-                    translationText.textContent = msg;
-                } else {
-                    alert(msg);
-                }
-                return null;
-            } finally {
-                spinner.classList.add('hidden');
-            }
-        }
-        // Logic to open the Modal on double click
-        textEditor.addEventListener('dblclick', (event) => {
-            const selection = window.getSelection().toString().trim();
-            const selectedWord = selection.replace(/[^a-zA-Z']/g, ''); // Basic word selection logic
-            if (selectedWord) {
-                const fullText = getEditorText();
-                const index = fullText.indexOf(selection);
-                const context = fullText.substring(Math.max(0, index - 50), index + selection.length + 50);
-                document.getElementById('wordSelected').textContent = selectedWord;
-                openModal();
-                fetchExplanationAndTranslation(selectedWord, context);
-            }
-        });
-        // --- Flashcard Creation Functionality ---
-        async function createFlashcardFromSelection() {
-            const selectedText = window.getSelection().toString().trim();
-            if (!selectedText) {
                 return;
             }
-            const fullText = getEditorText();
-            const index = fullText.indexOf(selectedText);
-            const context = fullText.substring(Math.max(0, index - 50), index + selectedText.length + 50);
-            createCardButton.disabled = true;
-            createCardButton.innerHTML = `<div class="spinner mr-2"></div> Creating Card...`;
-            try {
-                 const cardData = await fetchExplanationAndTranslation(selectedText, context, true);
-                 if (cardData && cardData.term && cardData.translation && cardData.example) {
-                    renderFlashcard(cardData);
-                 } else {
-                     alert("The AI could not generate the structured card data. Please try another word or check the API key.");
-                 }
-            } finally {
-                createCardButton.disabled = false;
-                createCardButton.innerHTML = `+ Create Flashcard from Selection`;
-            }
-        }
-        function renderFlashcard(data) {
-            noCardsMessage.classList.add('hidden');
-            const cardElement = document.createElement('div');
-            cardElement.className = 'flashcard';
-            // Render card content
-            cardElement.innerHTML = `
-                <div class="flashcard-front">
-                    <p class="flashcard-term">${data.term.toUpperCase()}</p>
-                    <p class="flashcard-definition">PT: ${data.translation}</p>
-                    <p class="flashcard-example">Example: ${data.example}</p>
-                </div>
-            `;
-            flashcardList.prepend(cardElement);
-        }
-        // --- Modal Control ---
-        const modal = document.getElementById('explanationModal');
-        const tabButtons = document.querySelectorAll('.tab-button');
-        const tabContents = document.querySelectorAll('.tab-content');
-        function openModal() {
-            modal.style.display = 'block';
-            showTab('explanation');
-        }
-        function closeModal() {
-            modal.style.display = 'none';
-        }
-        function showTab(tabName) {
-            tabContents.forEach(content => {
-                content.classList.add('hidden');
-                if (content.id === tabName + 'Tab') {
-                    content.classList.remove('hidden');
-                }
-            });
-            tabButtons.forEach(button => {
-                button.classList.remove('active');
-                if (button.dataset.tab === tabName) {
-                    button.classList.add('active');
-                }
             });
-        }
-        tabButtons.forEach(button => {
-            button.addEventListener('click', () => {
-                showTab(button.dataset.tab);
-            });
-        });
-        // Close modal when clicking outside of it
-        window.onclick = function(event) {
-            if (event.target == modal) {
-                closeModal();
-            }
         }
-    </script>
 </body>
 </html>

+<!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; }
+        .btn-primary { background-color: #4f46e5; color: white; }
+        .btn-primary:hover { background-color: #4338ca; }
+        .btn-secondary { background-color: #e5e7eb; color: #1f2937; }
+        .btn-secondary:hover { background-color: #d1d5db; }
+        .btn-success { background-color: #10b981; color: white; }
+        .btn-success:hover { background-color: #059669; }
+        #textEditor { border: 1px solid #ccc; padding: 1rem; min-height: 16rem; border-radius: 0.5rem; outline: none; }
+        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); backdrop-filter: blur(5px); }
+        .modal-content { background-color: #fff; margin: 10% auto; padding: 20px; border-radius: 10px; width: 90%; max-width: 500px; box-shadow: 0 8px 25px rgba(0,0,0,0.2); animation: slideIn 0.3s ease-out; }
+        @keyframes slideIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
+        .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
+        .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); } }
+        /* --- ESTILOS DO FLASHCARD INTELIGENTE --- */
+        .flashcard-container { perspective: 1000px; margin-bottom: 1rem; }
+        .flashcard-inner { position: relative; width: 100%; height: 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%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; min-height: 280px; display: flex; flex-direction: column; justify-content: center; }
+        .flashcard-front { background-color: #f9fafb; }
+        .flashcard-back { background-color: #ffffff; transform: rotateY(180deg); }
+        .flashcard-container .label { font-size: 0.8rem; color: #6b7280; font-weight: 600; margin-bottom: 0.5rem; }
+        .flashcard-container .context-phrase { font-size: 1.1rem; color: #1f2937; text-align: center; margin-bottom: 1rem; line-height: 1.6; }
+        .flashcard-container .hint { font-size: 1rem; color: #4f46e5; font-weight: 500; text-align: center; border-top: 1px dashed #d1d5db; padding-top: 1rem; margin-top: 1rem; }
+        .flashcard-back .term { font-size: 1.75rem; font-weight: 700; color: #4f46e5; text-align: center; margin-bottom: 1rem; }
+        .flashcard-back .full-sentence { display: flex; align-items: center; gap: 0.5rem; font-style: italic; color: #4b5563; margin-bottom: 1rem; }
+        .flashcard-back .definition { font-size: 0.9rem; color: #374151; margin-bottom: 1.5rem; }
+        .audio-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #4f46e5; }
+        .srs-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: auto; }
+        .srs-btn { width: 100%; border: 1px solid; padding: 0.6rem 0.5rem; font-size: 0.8rem; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
+        .srs-again { border-color: #ef4444; color: #ef4444; } .srs-again:hover { background-color: #fef2f2; }
+        .srs-easy { border-color: #22c55e; color: #22c55e; } .srs-easy:hover { background-color: #f0fdf4; }
     </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, contexto e flashcards inteligentes.</p>
         </header>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <!-- Coluna da Esquerda: Texto e Controles -->
+            <div class="flex flex-col gap-6">
+                <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">Seu Texto de Estudo</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>/5000</p>
+                    <div class="mt-4 border-t pt-4">
+                        <button id="createCardButton" onclick="createFlashcardFromSelection()" class="btn btn-success disabled:opacity-50" disabled>+ Criar Flashcard da Seleção</button>
+                    </div>
                 </div>
+                <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">Controles de LLM e Áudio</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">Provedor de IA</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">Google Gemini 1.5 Flash</option>
+                                <option value="groq:mixtral-8x7b-32768">Groq (Mixtral 8x7b)</option>
+                                <option value="groq:llama3-8b-8192">Groq (Llama 3 8B)</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 (Casual conversation, daily life)">Geral/Social</option>
+                                <option value="Professional/Business (Meetings, emails, reports)">Profissional/Negócios</option>
+                                <option value="Technical/IT (Software, Engineering, Tech topics)">Técnico/TI</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <audio id="audioPlayer" controls class="w-full"></audio>
+                    </div>
                 </div>
+                 <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">Atividades de Escrita e Tradução</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                        <div class="md:col-span-2">
+                            <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 rounded-md shadow-sm">
+                                <option value="translation_pt_en">Tradução de PT para EN</option>
+                                <option value="email_writing">Escrever Email Formal</option>
+                                <option value="summary_writing">Resumir Texto</option>
+                            </select>
+                        </div>
+                        <div class="md:col-span-1 flex items-end">
+                            <button id="generateActivityButton" onclick="generateActivity()" class="btn btn-primary w-full py-2.5 flex items-center justify-center">
+                                <span id="activityText">Gerar</span>
+                                <div id="activitySpinner" class="spinner ml-3 hidden"></div>
+                            </button>
+                        </div>
+                    </div>
+                    <div id="activityOutput" class="border p-4 mt-4 rounded-lg bg-gray-50 min-h-[100px]">
+                        <p class="text-gray-500 italic">Selecione uma atividade para gerar um exercício.</p>
+                    </div>
                 </div>
             </div>
+            <!-- Coluna da Direita: Flashcards -->
+            <div id="flashcardsPanel" class="card">
+                <h2 class="text-xl font-semibold mb-4 text-gray-700">Sessão de Estudo: Flashcards</h2>
+                <div id="flashcardList" class="space-y-4">
+                    <p id="noCardsMessage" class="text-gray-500 italic">Nenhum flashcard criado ainda. Selecione uma palavra ou frase no texto e clique em 'Criar Flashcard'.</p>
                 </div>
             </div>
         </div>
     </div>
+    <!-- Modal (Clique Duplo) -->
     <div id="explanationModal" class="modal">
+        <!-- Conteúdo do modal permanece o mesmo -->
+    </div>
+<script>
+    // --- ELEMENTOS GLOBAIS ---
+    const textEditor = document.getElementById('textEditor');
+    const createCardButton = document.getElementById('createCardButton');
+    const flashcardList = document.getElementById('flashcardList');
+    const noCardsMessage = document.getElementById('noCardsMessage');
+    const modelSelector = document.getElementById('modelSelector');
+    const contextSelector = document.getElementById('contextSelector');
+    // Mapeamento dos elementos de atividade
+    const activityTypeSelector = document.getElementById('activityTypeSelector');
+    const generateActivityButton = document.getElementById('generateActivityButton');
+    const activityOutput = document.getElementById('activityOutput');
+    const activitySpinner = document.getElementById('activitySpinner');
+    const activityText = document.getElementById('activityText');
+    // --- LÓGICA DO EDITOR E SELEÇÃO ---
+    textEditor.addEventListener('mouseup', () => {
+        const selection = window.getSelection().toString().trim();
+        createCardButton.disabled = !selection;
+    });
+    // --- GERAÇÃO DE FLASHCARD INTELIGENTE ---
+    async function createFlashcardFromSelection() {
+        const selectedText = window.getSelection().toString().trim();
+        if (!selectedText) return;
+        const fullText = textEditor.innerText;
+        createCardButton.disabled = true;
+        createCardButton.innerHTML = `<div class="spinner mr-2" style="width:16px; height:16px; border-width:2px;"></div> Criando...`;
+        try {
+            const response = await fetch('/explain-proxy', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    word: selectedText,
+                    context: fullText,
+                    for_flashcard: true,
+                    model: modelSelector.value,
+                    context_focus: contextSelector.value
+                })
+            });
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || `HTTP Error: ${response.status}`);
+            }
+            const cardData = await response.json();
+            renderFlashcard(cardData);
+        } catch (error) {
+            alert(`Falha ao criar flashcard: ${error.message}`);
+        } finally {
+            createCardButton.disabled = false;
+            createCardButton.textContent = '+ Criar Flashcard da Seleção';
+        }
+    }
+    function renderFlashcard(data) {
+        noCardsMessage.classList.add('hidden');
+        const cardId = `card-${Date.now()}`;
+        const container = document.createElement('div');
+        container.className = 'flashcard-container';
+        container.id = cardId;
+        container.style.minHeight = '280px'; // Garante altura mínima
+        container.innerHTML = `
+            <div class="flashcard-inner">
+                <!-- FRENTE DO CARD -->
+                <div class="flashcard-front">
+                    <div class="label">Frase de Contexto:</div>
+                    <p class="context-phrase">${data.gapped_sentence}</p>
+                    <div class="hint">
+                        <strong>Dica (PT):</strong> ${data.translation}
                     </div>
+                    <div class="text-center text-sm text-gray-400 mt-4">Clique para virar</div>
                 </div>
+                <!-- VERSO DO CARD -->
+                <div class="flashcard-back">
+                    <h3 class="term">${data.term}</h3>
+                    <p class="full-sentence">
+                        <button class="audio-btn" onclick="playWord(this, '${data.term.replace(/'/g, "\\'")}')">▶️</button>
+                        <span>${data.context_sentence}</span>
+                    </p>
+                    <p class="definition"><strong>Definition:</strong> ${data.definition}</p>
+                    <div class="text-center mt-4">
+                         <button class="btn btn-secondary text-sm" disabled>🎙️ Pratique (em breve)</button>
+                    </div>
+                    <div class="srs-buttons mt-4">
+                        <button class="srs-btn srs-again" onclick="handleSrsClick('${cardId}', 'again')">Errei</button>
+                        <button class="srs-btn srs-easy" onclick="handleSrsClick('${cardId}', 'easy')">Fácil</button>
                     </div>
                 </div>
             </div>
+        `;
+        flashcardList.prepend(container);
+        container.addEventListener('click', () => {
+            container.classList.toggle('flipped');
         });
+    }
+    // --- FUNÇÕES DE INTERATIVIDADE DO FLASHCARD ---
+    async function playWord(button, word) {
+        event.stopPropagation(); // Impede que o clique no botão vire o card
+        const originalContent = button.innerHTML;
+        button.innerHTML = '🔊';
+        button.disabled = true;
+        try {
+            const response = await fetch('/tts-proxy', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ text: word })
+            });
+            if (!response.ok) throw new Error('Falha ao gerar áudio.');
+            const audioBlob = await response.blob();
+            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);
+        } finally {
+            setTimeout(() => {
+                button.innerHTML = originalContent;
+                button.disabled = false;
+            }, 1000);
+        }
+    }
+    function handleSrsClick(cardId, level) {
+        event.stopPropagation(); // Impede que o clique no botão vire o card
+        const cardContainer = document.getElementById(cardId);
+        cardContainer.style.transition = 'opacity 0.5s';
+        cardContainer.style.opacity = '0.2';
+        console.log(`Card '${cardId}' avaliado como '${level}'. A lógica de agendamento será implementada aqui.`);
+        alert(`Flashcard marcado como "${level}". Em um sistema completo, ele seria reagendado!`);
+    }
+    // --- LÓGICA DE GERAÇÃO DE ATIVIDADES ---
+    async function generateActivity() {
+        const activityType = activityTypeSelector.value;
+        const context = contextSelector.value;
+        const modelValue = modelSelector.value;
+        const sourceText = textEditor.innerText;
+        generateActivityButton.disabled = true;
+        activityText.textContent = "";
+        activitySpinner.classList.remove('hidden');
+        activityOutput.innerHTML = `<p class="text-gray-500 italic">Gerando exercício... O modelo está pensando!</p>`;
+        let prompt = "";
+        let title = "";
+        if (activityType === 'translation_pt_en') {
+            title = "Exercício de Tradução (PT para EN)";
+            prompt = `Gere uma única frase curta em português, relevante para o contexto '${context}', para o usuário traduzir para o inglês. Apresente apenas a frase em português.`;
+        } else if (activityType === 'email_writing') {
+            title = "Exercício de Escrita de Email";
+            prompt = `Gere um cenário realista para um email formal em inglês, baseado no contexto '${context}'. O prompt deve ser claro, indicando o objetivo e o destinatário.`;
+        } else if (activityType === 'summary_writing') {
+            if (!sourceText.trim()) {
+                alert("Por favor, insira um texto no editor para a atividade de resumo.");
+                // Reset button state
                 generateActivityButton.disabled = false;
+                activityText.textContent = "Gerar";
                 activitySpinner.classList.add('hidden');
+                activityOutput.innerHTML = `<p class="text-gray-500 italic">Selecione uma atividade para gerar um exercício.</p>`;
                 return;
             }
+            title = "Exercício de Resumo";
+            prompt = `Baseado no texto a seguir, peça ao usuário para resumi-lo em uma ou duas sentenças em inglês. Texto: ---${sourceText}---`;
+        }
+        try {
+            const response = await fetch('/explain-proxy', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    model: modelValue,
+                    context_focus: context,
+                    custom_prompt: prompt
+                })
             });
+            if (!response.ok) throw new Error('Falha na comunicação com a IA.');
+            const data = await response.json();
+            const result = data.explanation.replace(/\n/g, '<br>');
+            activityOutput.innerHTML = `<h3 class="font-bold mb-2">${title}</h3><div>${result}</div>`;
+        } catch (error) {
+            activityOutput.innerHTML = `<p class="text-red-500 font-semibold">Falha ao gerar atividade. Verifique suas chaves de API. Erro: ${error.message}</p>`;
+        } finally {
+            generateActivityButton.disabled = false;
+            activityText.textContent = "Gerar";
+            activitySpinner.classList.add('hidden');
         }
+    }
+</script>
 </body>
 </html>