Spaces:

InnovationAI
/

EnglishStudyHelper

Sleeping

App Files Files Community

amauricunha commited on Oct 9, 2025

Commit

ba185bd

verified ·

1 Parent(s): 5d57748

Create index.html

Browse files

Files changed (1) hide show

index.html +390 -0

index.html ADDED Viewed

	@@ -0,0 +1,390 @@

+<!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>