Spaces:

InnovationAI
/

EnglishStudyHelper

Sleeping

App Files Files Community

amauricunha commited on Oct 9, 2025

Commit

c8a75d1

verified ·

1 Parent(s): 96f9398

Update index.html

Browse files

Files changed (1) hide show

index.html +376 -323

index.html CHANGED Viewed

@@ -1,390 +1,443 @@
-<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TTS Language Study Tool</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: #f7f7f7;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            padding: 1rem;
         }
         .container {
-            max-width: 700px;
-            width: 100%;
-            background-color: #ffffff;
-            padding: 2.5rem;
-            border-radius: 16px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         }
-        button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
         }
-        #audioPlayer {
-            width: 100%;
-            margin-top: 1.5rem;
         }
-        select, textarea {
-            border: 1px solid #d1d5db;
-            border-radius: 8px;
-            padding: 0.75rem;
             color: #1f2937;
-            transition: border-color 0.2s, box-shadow 0.2s;
         }
-        select:focus, textarea:focus {
-            border-color: #4f46e5;
-            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
-            outline: none;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1 class="text-3xl font-bold text-gray-800 mb-6 border-b-2 pb-2 border-indigo-500">
-            Text-to-Speech Language Study Tool
-        </h1>
-        <p class="text-gray-600 mb-6">
-            Paste your English text below to practice listening comprehension and pronunciation.
-        </p>
-        <div class="grid grid-cols-2 gap-4 mb-4">
-            <div>
-                <label for="voiceSelector" class="block text-sm font-medium text-gray-700 mb-2">Select Speaker:</label>
-                <select id="voiceSelector" class="w-full">
-                    <option value="Puck">👩 Woman (Puck - Upbeat, US)</option>
-                    <option value="Wren">👨 Man (Wren - Clear, US)</option>
-                    <option value="Aoede">🗣️ Woman (Aoede - Breezy, UK)</option>
-                </select>
-            </div>
-             <div>
-                <label for="speedSelector" class="block text-sm font-medium text-gray-700 mb-2">Playback Speed:</label>
-                <select id="speedSelector" class="w-full">
-                    <option value="1.0">1.0x (Normal)</option>
-                    <option value="0.75">0.75x (Slower)</option>
-                    <option value="0.5">0.5x (Slowest - for comprehension)</option>
-                    <option value="1.25">1.25x (Faster)</option>
-                    <option value="1.5">1.5x (Fastest - for speed listening)</option>
-                </select>
-            </div>
-        </div>
-        <div class="mb-4">
-            <label for="transcriptArea" class="block text-sm font-medium text-gray-700 mb-2">Paste English Text Here:</label>
-            <textarea id="transcriptArea" rows="8" class="w-full resize-none" placeholder="Paste the text you want to practice listening to. (Max 10,000 characters)"></textarea>
-            <div id="charCount" class="text-xs text-gray-500 mt-1 text-right">0 / 10000 Characters</div>
         </div>
-        <div id="status" class="mb-4 text-center p-3 rounded-lg text-sm transition duration-300 bg-gray-100 text-gray-700">
-            Enter text and click 'Generate & Play'.
         </div>
-        <button id="generateButton"
-                class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg transition duration-300 ease-in-out shadow-lg transform hover:scale-[1.01] flex items-center justify-center">
-            <svg id="speakerIcon" class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l3.586-3.586a1 1 0 011.414 0L12 9l-3 3 3 3-1.414 1.414a1 1 0 01-1.414 0L5.586 15z"></path></svg>
-            Generate & Play Audio
-        </button>
-        <!-- Setting controls to show the playback speed option -->
-        <audio id="audioPlayer" controls hidden></audio>
-        <!-- Queue for chunked audio playback -->
-        <div id="audioQueueContainer" hidden></div>
     </div>
-    <script type="module">
-        const generateButton = document.getElementById('generateButton');
         const audioPlayer = document.getElementById('audioPlayer');
-        const statusDiv = document.getElementById('status');
-        const transcriptArea = document.getElementById('transcriptArea');
-        const voiceSelector = document.getElementById('voiceSelector');
         const speedSelector = document.getElementById('speedSelector');
-        const charCountDiv = document.getElementById('charCount');
-        const audioQueueContainer = document.getElementById('audioQueueContainer');
-        const MAX_CHARS = 10000;
-        const CHUNK_SIZE = 1800; // Chunk size is still dictated by the API limit
-        let audioQueue = [];
-        // --- Utility Functions for Audio Generation ---
-        function base64ToArrayBuffer(base64) {
-            const binaryString = atob(base64);
-            const len = binaryString.length;
-            const bytes = new Uint8Array(len);
-            for (let i = 0; i < len; i++) {
-                bytes[i] = binaryString.charCodeAt(i);
             }
-            return bytes.buffer;
-        }
-        function pcmToWav(pcm16, sampleRate = 16000) {
-            const numChannels = 1;
-            const bytesPerSample = 2;
-            const dataLength = pcm16.length * bytesPerSample;
-            const buffer = new ArrayBuffer(44 + dataLength);
-            const view = new DataView(buffer);
-            function writeString(view, offset, string) {
-                for (let i = 0; i < string.length; i++) {
-                    view.setUint8(offset + i, string.charCodeAt(i));
                 }
-            }
-            // RIFF chunk
-            writeString(view, 0, 'RIFF');
-            view.setUint32(4, 36 + dataLength, true);
-            writeString(view, 8, 'WAVE');
-            // FMT sub-chunk
-            writeString(view, 12, 'fmt ');
-            view.setUint32(16, 16, true);
-            view.setUint16(20, 1, true);
-            view.setUint16(22, numChannels, true);
-            view.setUint32(24, sampleRate, true);
-            view.setUint32(28, sampleRate * numChannels * bytesPerSample, true);
-            view.setUint16(32, numChannels * bytesPerSample, true);
-            view.setUint16(34, 16, true);
-            // Data sub-chunk
-            writeString(view, 36, 'data');
-            view.setUint32(40, dataLength, true);
-            // Write PCM data
-            let offset = 44;
-            for (let i = 0; i < pcm16.length; i++) {
-                view.setInt16(offset, pcm16[i], true);
-                offset += 2;
             }
-            return new Blob([buffer], { type: 'audio/wav' });
         }
-        // ** UPDATED fetchAudio to call the local proxy endpoint **
-        async function fetchAudio(prompt, voice, retries = 5) {
-            // The API call is now directed to the local backend proxy
-            const proxyUrl = "/tts-proxy";
-            const payload = {
-                prompt: prompt,
-                voice: voice
-            };
-            for (let i = 0; i < retries; i++) {
-                try {
-                    const response = await fetch(proxyUrl, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(payload)
-                    });
-                    const result = await response.json();
-                    if (!response.ok) {
-                        // Handle 429/rate limiting from proxy
-                        if (response.status === 429 && i < retries - 1) {
-                            const delay = Math.pow(2, i) * 1000 + Math.random() * 1000;
-                            await new Promise(resolve => setTimeout(resolve, delay));
-                            continue;
-                        }
-                        const errorMessage = result.error || `Proxy request failed with status: ${response.status}`;
-                        throw new Error(errorMessage);
-                    }
-                    // The proxy returns { audioData: base64_string }
-                    const audioData = result.audioData;
-                    if (audioData) {
-                        // Assuming 16000Hz rate and L16 format from the API
-                        const sampleRate = 16000;
-                        const pcmData = base64ToArrayBuffer(audioData);
-                        const pcm16 = new Int16Array(pcmData);
-                        const wavBlob = pcmToWav(pcm16, sampleRate);
-                        const audioUrl = URL.createObjectURL(wavBlob);
-                        return audioUrl;
-                    } else {
-                        throw new Error("Missing audio data in proxy response.");
-                    }
-                } catch (error) {
-                    console.error("Fetch attempt failed:", error);
-                    if (i === retries - 1) throw error;
-                }
             }
         }
-        // --- Text Chunking and Audio Concatenation Logic (Unchanged, as it handles the 10k limit) ---
-        function getChunks(text) {
-            const chunks = [];
-            let sentences = text.match(/[^.!?\n]+[.!?\n]*/g) || [text];
-            let currentChunk = '';
-            for (const sentence of sentences) {
-                if (currentChunk.length + sentence.length > CHUNK_SIZE) {
-                    if (currentChunk.length > 0) {
-                        chunks.push(currentChunk.trim());
-                        currentChunk = sentence;
-                    } else {
-                        let remaining = sentence;
-                        while (remaining.length > 0) {
-                            chunks.push(remaining.substring(0, CHUNK_SIZE).trim());
-                            remaining = remaining.substring(CHUNK_SIZE);
-                        }
-                        currentChunk = '';
-                    }
-                } else {
-                    currentChunk += sentence;
-                }
             }
-            if (currentChunk.length > 0) {
-                chunks.push(currentChunk.trim());
             }
-            return chunks.filter(c => c.length > 0);
-        }
-        async function generateChunkedAudio(prompt, voice) {
-            const chunks = getChunks(prompt);
-            const generatedUrls = [];
-            for (let i = 0; i < chunks.length; i++) {
-                statusDiv.textContent = `Generating audio chunk ${i + 1} of ${chunks.length}...`;
-                try {
-                    const url = await fetchAudio(chunks[i], voice);
-                    generatedUrls.push(url);
-                } catch (error) {
-                    statusDiv.textContent = `Error on chunk ${i + 1}. Details in console.`;
-                    throw error;
                 }
             }
-            return generatedUrls;
         }
-        function setupPlaybackQueue(urls) {
-            audioQueue.forEach(a => {
-                if (a.src) URL.revokeObjectURL(a.src);
-                a.remove();
-            });
-            audioQueue = [];
-            audioQueueContainer.innerHTML = '';
-            audioPlayer.hidden = true;
-            audioPlayer.removeAttribute('src');
-            if (urls.length === 0) return;
-            audioPlayer.src = urls[0];
-            audioPlayer.hidden = false;
-            audioPlayer.playbackRate = parseFloat(speedSelector.value);
-            if (urls.length > 1) {
-                let currentAudio = audioPlayer;
-                for (let i = 1; i < urls.length; i++) {
-                    const nextAudio = document.createElement('audio');
-                    nextAudio.src = urls[i];
-                    nextAudio.playbackRate = parseFloat(speedSelector.value);
-                    audioQueueContainer.appendChild(nextAudio);
-                    audioQueue.push(nextAudio);
-                    currentAudio.addEventListener('ended', () => {
-                        nextAudio.play();
-                    }, { once: true });
-                    currentAudio = nextAudio;
                 }
             }
-            const allPlayers = [audioPlayer, ...audioQueue];
-            speedSelector.onchange = () => {
-                const newRate = parseFloat(speedSelector.value);
-                allPlayers.forEach(p => p.playbackRate = newRate);
-            };
-        }
-        // --- Event Handlers ---
-        function updateCharCount() {
-            const text = transcriptArea.value;
-            const count = text.length;
-            charCountDiv.textContent = `${count} / ${MAX_CHARS} Characters`;
-            if (count > MAX_CHARS) {
-                transcriptArea.value = text.substring(0, MAX_CHARS);
-                charCountDiv.classList.add('text-red-600');
-                generateButton.disabled = true;
-                statusDiv.className = 'mb-4 text-center p-3 rounded-lg text-sm bg-red-100 text-red-800 transition duration-300';
-                statusDiv.textContent = `Text exceeds the ${MAX_CHARS} character limit.`;
-            } else if (count === 0) {
-                generateButton.disabled = true;
-                charCountDiv.classList.remove('text-red-600');
-                statusDiv.className = 'mb-4 text-center p-3 rounded-lg text-sm bg-gray-100 text-gray-700 transition duration-300';
-                statusDiv.textContent = 'Enter text and click "Generate & Play".';
-            } else {
-                generateButton.disabled = false;
-                charCountDiv.classList.remove('text-red-600');
-                statusDiv.className = 'mb-4 text-center p-3 rounded-lg text-sm bg-indigo-100 text-indigo-800 transition duration-300';
-                statusDiv.textContent = 'Text ready to generate.';
-            }
-            audioPlayer.hidden = true;
-            audioPlayer.removeAttribute('src');
         }
-        speedSelector.addEventListener('change', () => {
-             if (audioPlayer.src && audioQueue.length === 0) {
-                audioPlayer.playbackRate = parseFloat(speedSelector.value);
-             }
-        });
-        window.onload = updateCharCount;
-        transcriptArea.addEventListener('input', updateCharCount);
-        generateButton.addEventListener('click', async () => {
-            const prompt = transcriptArea.value.trim();
-            const voice = voiceSelector.value;
-            const voiceName = voiceSelector.options[voiceSelector.selectedIndex].text;
-            if (prompt.length === 0) {
-                statusDiv.className = 'mb-4 text-center p-3 rounded-lg text-sm bg-red-100 text-red-800 transition duration-300';
-                statusDiv.textContent = 'Please paste or type text before generating audio.';
-                return;
-            }
-            setupPlaybackQueue([]);
-            generateButton.disabled = true;
-            statusDiv.className = 'mb-4 text-center p-3 rounded-lg text-sm bg-yellow-100 text-yellow-800 transition duration-300';
-            statusDiv.textContent = `Starting generation with ${voiceName} voice...`;
-            try {
-                const audioUrls = await generateChunkedAudio(prompt, voice);
-                setupPlaybackQueue(audioUrls);
-                // We use setTimeout to ensure the HTML element is ready before attempting play
-                setTimeout(() => audioPlayer.play(), 100);
-                statusDiv.className = 'mb-4 text-center p-3 rounded-lg text-sm bg-green-100 text-green-800 transition duration-300';
-                statusDiv.textContent = `Audio generated successfully in ${audioUrls.length} chunks. Playing automatically.`;
-            } catch (error) {
-                statusDiv.className = 'mb-4 text-center p-3 rounded-lg text-sm bg-red-100 text-red-800 transition duration-300';
-                statusDiv.textContent = `Error generating audio: ${error.message}`;
-                console.error("Full TTS generation error:", error);
-            } finally {
-                generateButton.disabled = false;
             }
-        });
     </script>
 </body>
 </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>
     <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;
+        }
+        /* 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;
+        }
+        /* 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>
+            <textarea id="textInput"
+                      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 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 h-64 resize-none text-gray-800"
+                      maxlength="5000"></textarea>
+            <p class="text-sm text-right text-gray-500 mt-2">Characters: <span id="charCount">0</span>/5000</p>
         </div>
+        <div class="card mb-6">
+            <h2 class="text-xl font-semibold mb-4 text-gray-700">Audio and Reading Controls</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                <!-- Voice Selection (Kept for Future APIs or UX) -->
+                <div>
+                    <label for="voiceSelector" class="block text-sm font-medium text-gray-700">Voice (gTTS)</label>
+                    <select id="voiceSelector" 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">
+                        <!-- gTTS uses US accent by default; selector is for UX/Future APIs -->
+                        <option value="us_man">American Man</option>
+                        <option value="us_woman">American Woman</option>
+                    </select>
+                </div>
+                <!-- Speed Control -->
+                <div>
+                    <label for="speedSelector" class="block text-sm font-medium text-gray-700">Speaking Rate</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>
+            <!-- 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>
+    </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 textInput = document.getElementById('textInput');
+        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 speedSelector = document.getElementById('speedSelector');
+        const MAX_CHARS = 5000;
+        let isLooping = false;
+        let loopText = '';
+        let lastAudioUrl = '';
+        // --- Interface Management ---
+        textInput.addEventListener('input', () => {
+            const currentLength = textInput.value.length;
+            charCount.textContent = currentLength;
+            // Limit input to max characters
+            if (currentLength > MAX_CHARS) {
+                textInput.value = textInput.value.substring(0, MAX_CHARS);
             }
+            // Enable button if there is text
+            playButton.disabled = currentLength === 0;
+            // The logic for enabling loop button on selection will be handled below
+        });
+        // Update character count on load
+        textInput.dispatchEvent(new Event('input'));
+        speedSelector.addEventListener('change', () => {
+            audioPlayer.playbackRate = parseFloat(speedSelector.value);
+        });
+        // --- Main Audio and Loop Functionality ---
+        async function fetchAudio(text) {
+            playButton.disabled = true;
+            playText.textContent = "Generating Audio...";
+            loadingSpinner.classList.remove('hidden');
+            try {
+                // Route for the backend using gTTS
+                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}`);
                 }
+                // The backend returns an audio blob (MP3)
+                const audioBlob = await response.blob();
+                // Revoke previous URL to free up memory
+                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 = textInput.value.trim();
+            if (textToPlay) {
+                fetchAudio(textToPlay);
+            }
         }
+        // Sets the selection for repetition (Phrase Loop)
+        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 = '';
+            // Return to main audio (if available)
+            if (textInput.value.trim()) {
+                handlePlay();
             }
+        }
+        audioPlayer.addEventListener('ended', () => {
+            if (isLooping) {
+                // If in loop mode, restart playback
+                audioPlayer.currentTime = 0;
+                audioPlayer.play();
             }
+        });
+        // Enable Loop button if there is a selection
+        textInput.addEventListener('select', () => {
+            const selection = window.getSelection().toString().trim();
+            loopSelectionButton.disabled = !selection;
+        });
+        // --- Quick Translation Functionality (Double Click) ---
+        // Activate the AI API call for translation
+        async function fetchExplanationAndTranslation(word, context) {
+            const explanationSpinner = document.getElementById('explanationSpinner');
+            const translationSpinner = document.getElementById('translationSpinner');
+            const explanationText = document.getElementById('explanationText');
+            const translationText = document.getElementById('translationText');
+            explanationText.textContent = '';
+            translationText.textContent = '';
+            explanationSpinner.classList.remove('hidden');
+            translationSpinner.classList.remove('hidden');
+            try {
+                // Route for the backend using Gemini for explanation/translation
+                const response = await fetch('/explain-proxy', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    // Sends the clicked word and context to the AI
+                    body: JSON.stringify({ word: word, context: context })
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP Error: ${response.status}. Check if GEMINI_API_KEY is configured in your Space.`);
                 }
+                const data = await response.json();
+                // Assumes the backend returns an object { explanation: "...", translation: "..." }
+                explanationText.textContent = data.explanation || 'Could not retrieve explanation.';
+                translationText.textContent = data.translation || 'Could not retrieve translation.';
+            } catch (error) {
+                console.error('Error fetching context from AI:', error);
+                explanationText.textContent = 'Error connecting to AI. Check if GEMINI_API_KEY is configured correctly.';
+                translationText.textContent = 'Error connecting to AI.';
+            } finally {
+                explanationSpinner.classList.add('hidden');
+                translationSpinner.classList.add('hidden');
             }
         }
+        // Logic to open the Modal on double click
+        textInput.addEventListener('dblclick', (event) => {
+            const target = event.target;
+            if (target.id === 'textInput') {
+                const selection = window.getSelection();
+                // Expand selection to the nearest word
+                selection.modify('move', 'backward', 'word');
+                selection.modify('extend', 'forward', 'word');
+                const selectedWord = selection.toString().trim().replace(/[^a-zA-Z']/g, '');
+                if (selectedWord) {
+                    const fullText = textInput.value;
+                    const index = fullText.indexOf(selectedWord);
+                    // Capture context (a few words before and after)
+                    const context = fullText.substring(Math.max(0, index - 50), index + selectedWord.length + 50);
+                    document.getElementById('wordSelected').textContent = selectedWord;
+                    openModal();
+                    // Start fetching explanation and translation
+                    fetchExplanationAndTranslation(selectedWord, context);
                 }
             }
+        });
+        // --- 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';
+            // Ensure Explanation tab is the first one shown
+            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>