Spaces:

Toowired
/

tts-reader

Running

App Files Files Community

Toowired commited on May 13, 2025

Commit

d67da3e

verified ·

1 Parent(s): 2e9fe73

Update index.html

Browse files

Files changed (1) hide show

index.html +372 -40

index.html CHANGED Viewed

@@ -61,6 +61,22 @@
         .api-key-input:focus {
             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -94,7 +110,7 @@
                     <button id="uploadBtn" class="bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg flex items-center justify-center transition">
                         <i class="fas fa-upload mr-2"></i> Upload File
                     </button>
-                    <button id="pasteBtn" class="bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg flex items-center justify-center transition">
                         <i class="fas fa-paste mr-2"></i> Paste Text
                     </button>
                     <div id="dropzone" class="dropzone bg-gray-50 py-3 px-4 rounded-lg flex items-center justify-center cursor-pointer">
@@ -188,10 +204,10 @@
                         <button id="playBtn" class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition">
                             <i class="fas fa-play"></i>
                         </button>
-                        <button id="pauseBtn" class="bg-gray-300 hover:bg-gray-400 text-gray-700 rounded-full w-12 h-12 flex items-center justify-center transition">
                             <i class="fas fa-pause"></i>
                         </button>
-                        <button id="stopBtn" class="bg-gray-300 hover:bg-gray-400 text-gray-700 rounded-full w-12 h-12 flex items-center justify-center transition">
                             <i class="fas fa-stop"></i>
                         </button>
                     </div>
@@ -202,8 +218,9 @@
                         <span id="currentTime">0:00</span>
                         <span id="totalTime">0:00</span>
                     </div>
-                    <div id="progressContainer" class="w-full flex">
                         <!-- Progress chunks will be added dynamically -->
                     </div>
                 </div>
             </div>
@@ -240,24 +257,25 @@
             const currentTime = document.getElementById('currentTime');
             const totalTime = document.getElementById('totalTime');
             const progressContainer = document.getElementById('progressContainer');
             // Audio and state variables
             let audioContext;
             let audioBuffer;
             let audioSource;
             let currentText = '';
             let isPlaying = false;
             let selectedVoice = null;
             let startTime = 0;
             let estimatedDuration = 0;
             let currentChunkIndex = 0;
             const MAX_CHUNK_SIZE = 5000; // Characters per chunk (Google TTS limit)
             let totalChunks = 0;
-            let progressChunks = [];
             let audioQueue = [];
-            let isPaused = false;
             let apiKey = localStorage.getItem('googleTTSApiKey') || '';
             // Initialize
             function init() {
                 // Load saved API key
@@ -267,17 +285,41 @@
                 }
                 // Set PDF.js worker path
-                pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.worker.min.js';
-                // Initialize AudioContext
                 try {
                     audioContext = new (window.AudioContext || window.webkitAudioContext)();
                 } catch (e) {
                     console.error('Web Audio API not supported', e);
-                    alert('Your browser does not support the Web Audio API. Please use Chrome or Edge.');
                 }
             }
             // API Key Management
             saveKeyBtn.addEventListener('click', () => {
                 const key = apiKeyInput.value.trim();
@@ -290,7 +332,7 @@
                     showToast('Please enter a valid API key', 'error');
                 }
             });
             // Load available voices from Google TTS
             async function loadVoices() {
                 if (!apiKey) {
@@ -303,24 +345,30 @@
                     `;
                     return;
                 }
                 voiceGrid.innerHTML = `
                     <div class="col-span-full text-center py-8">
                         <div class="loading-spinner mx-auto"></div>
                         <p class="text-gray-500 mt-2">Loading Google TTS voices...</p>
                     </div>
                 `;
                 try {
                     const languageCode = languageSelect.value;
                     const response = await fetch(`https://texttospeech.googleapis.com/v1/voices?key=${apiKey}&languageCode=${languageCode}`);
                     if (!response.ok) {
-                        throw new Error(`API error: ${response.status}`);
                     }
                     const data = await response.json();
-                    renderVoiceOptions(data.voices);
                 } catch (error) {
                     console.error('Error loading voices:', error);
                     voiceGrid.innerHTML = `
@@ -328,12 +376,16 @@
                             <i class="fas fa-exclamation-triangle text-red-400 text-2xl"></i>
                             <p class="text-gray-500 mt-2">Failed to load voices</p>
                             <p class="text-red-500 text-sm mt-1">${error.message}</p>
-                            <p class="text-gray-400 text-xs mt-2">Check your API key and network connection</p>
                         </div>
                     `;
                 }
             }
             function renderVoiceOptions(voices) {
                 voiceGrid.innerHTML = '';
@@ -367,10 +419,10 @@
                     let genderIcon = 'fa-user';
                     let genderColor = 'text-gray-500';
                     if (voice.ssmlGender === 'FEMALE') {
-                        genderIcon = 'fa-female';
                         genderColor = 'text-pink-500';
                     } else if (voice.ssmlGender === 'MALE') {
-                        genderIcon = 'fa-male';
                         genderColor = 'text-blue-500';
                     }
@@ -427,10 +479,12 @@
                 });
                 // Select first voice by default
-                const firstCard = voiceGrid.querySelector('.voice-card');
-                if (firstCard) firstCard.click();
             }
             // Play a voice sample
             async function playSample(voice, text) {
                 if (!apiKey) {
@@ -450,7 +504,82 @@
                     showToast('Failed to play sample: ' + error.message, 'error');
                 }
             }
             // File Handling
             uploadBtn.addEventListener('click', () => fileInput.click());
@@ -459,7 +588,7 @@
                     handleFile(e.target.files[0]);
                 }
             });
             pasteBtn.addEventListener('click', () => {
                 documentContent.innerHTML = '<p class="text-gray-500 italic">Press Ctrl+V (Cmd+V on Mac) to paste your text...</p>';
                 documentContent.focus();
@@ -475,33 +604,33 @@
                 document.addEventListener('paste', pasteHandler);
             });
             // Drag and Drop
             ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                 dropzone.addEventListener(eventName, preventDefaults, false);
             });
             function preventDefaults(e) {
                 e.preventDefault();
                 e.stopPropagation();
             }
             ['dragenter', 'dragover'].forEach(eventName => {
                 dropzone.addEventListener(eventName, highlight, false);
             });
             ['dragleave', 'drop'].forEach(eventName => {
                 dropzone.addEventListener(eventName, unhighlight, false);
             });
             function highlight() {
                 dropzone.classList.add('active');
             }
             function unhighlight() {
                 dropzone.classList.remove('active');
             }
             dropzone.addEventListener('drop', (e) => {
                 const dt = e.dataTransfer;
                 const file = dt.files[0];
@@ -509,7 +638,7 @@
                     handleFile(file);
                 }
             });
             // File processing
             function handleFile(file) {
                 const fileType = file.type;
@@ -522,12 +651,12 @@
                 } else if (fileType === 'application/msword' ||
                            fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
                            fileName.endsWith('.doc') || fileName.endsWith('.docx')) {
-                    alert('Word document support requires conversion to text. For best results, save as plain text or PDF first.');
                 } else {
-                    alert('Unsupported file type. Please upload a TXT or PDF file.');
                 }
             }
             function readTextFile(file) {
                 const reader = new FileReader();
                 reader.onload = (e) => {
@@ -535,11 +664,11 @@
                 };
                 reader.readAsText(file);
             }
             function readPDFFile(file) {
                 // Check if PDF.js is available
                 if (typeof pdfjsLib === 'undefined') {
-                    alert('PDF.js not loaded. PDF support requires PDF.js library.');
                     return;
                 }
@@ -562,5 +691,208 @@
                     Promise.all(pagePromises).then(pagesText => {
                         text = pagesText.join('\n\n');
-                        set
 </html>

         .api-key-input:focus {
             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
         }
+        .toast {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 12px 24px;
+            border-radius: 8px;
+            color: white;
+            z-index: 1000;
+            animation: slideIn 0.3s ease;
+        }
+        .toast.success { background-color: #10B981; }
+        .toast.error { background-color: #EF4444; }
+        @keyframes slideIn {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
                     <button id="uploadBtn" class="bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg flex items-center justify-center transition">
                         <i class="fas fa-upload mr-2"></i> Upload File
                     </button>
+                    <button id="pasteBtn" class="bg-green-500 hover:green-600 text-white py-3 px-4 rounded-lg flex items-center justify-center transition">
                         <i class="fas fa-paste mr-2"></i> Paste Text
                     </button>
                     <div id="dropzone" class="dropzone bg-gray-50 py-3 px-4 rounded-lg flex items-center justify-center cursor-pointer">
                         <button id="playBtn" class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition">
                             <i class="fas fa-play"></i>
                         </button>
+                        <button id="pauseBtn" class="bg-gray-300 hover:bg-gray-400 text-gray-700 rounded-full w-12 h-12 flex items-center justify-center transition" disabled>
                             <i class="fas fa-pause"></i>
                         </button>
+                        <button id="stopBtn" class="bg-gray-300 hover:bg-gray-400 text-gray-700 rounded-full w-12 h-12 flex items-center justify-center transition" disabled>
                             <i class="fas fa-stop"></i>
                         </button>
                     </div>
                         <span id="currentTime">0:00</span>
                         <span id="totalTime">0:00</span>
                     </div>
+                    <div id="progressContainer" class="w-full bg-gray-200 rounded-full h-2 flex">
                         <!-- Progress chunks will be added dynamically -->
+                        <div id="progressBar" class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
                     </div>
                 </div>
             </div>
             const currentTime = document.getElementById('currentTime');
             const totalTime = document.getElementById('totalTime');
             const progressContainer = document.getElementById('progressContainer');
+            const progressBar = document.getElementById('progressBar');
             // Audio and state variables
             let audioContext;
             let audioBuffer;
             let audioSource;
             let currentText = '';
             let isPlaying = false;
+            let isPaused = false;
             let selectedVoice = null;
             let startTime = 0;
+            let pauseTime = 0;
             let estimatedDuration = 0;
             let currentChunkIndex = 0;
             const MAX_CHUNK_SIZE = 5000; // Characters per chunk (Google TTS limit)
             let totalChunks = 0;
             let audioQueue = [];
             let apiKey = localStorage.getItem('googleTTSApiKey') || '';
             // Initialize
             function init() {
                 // Load saved API key
                 }
                 // Set PDF.js worker path
+                if (typeof pdfjsLib !== 'undefined') {
+                    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.worker.min.js';
+                }
+                // Initialize AudioContext on user interaction
+                document.addEventListener('click', initAudioContext, { once: true });
+            }
+            function initAudioContext() {
                 try {
                     audioContext = new (window.AudioContext || window.webkitAudioContext)();
                 } catch (e) {
                     console.error('Web Audio API not supported', e);
+                    showToast('Your browser does not support the Web Audio API. Please use Chrome or Edge.', 'error');
                 }
             }
+            // Toast notifications
+            function showToast(message, type = 'success', duration = 3000) {
+                const toast = document.createElement('div');
+                toast.className = `toast ${type}`;
+                toast.textContent = message;
+                document.body.appendChild(toast);
+                setTimeout(() => {
+                    toast.style.animation = 'slideOut 0.3s ease';
+                    setTimeout(() => toast.remove(), 300);
+                }, duration);
+            }
+            // Add slideOut animation
+            const style = document.createElement('style');
+            style.textContent = '@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }';
+            document.head.appendChild(style);
             // API Key Management
             saveKeyBtn.addEventListener('click', () => {
                 const key = apiKeyInput.value.trim();
                     showToast('Please enter a valid API key', 'error');
                 }
             });
             // Load available voices from Google TTS
             async function loadVoices() {
                 if (!apiKey) {
                     `;
                     return;
                 }
                 voiceGrid.innerHTML = `
                     <div class="col-span-full text-center py-8">
                         <div class="loading-spinner mx-auto"></div>
                         <p class="text-gray-500 mt-2">Loading Google TTS voices...</p>
                     </div>
                 `;
                 try {
                     const languageCode = languageSelect.value;
                     const response = await fetch(`https://texttospeech.googleapis.com/v1/voices?key=${apiKey}&languageCode=${languageCode}`);
                     if (!response.ok) {
+                        if (response.status === 403) {
+                            throw new Error('Invalid API key or Text-to-Speech API not enabled');
+                        } else if (response.status === 400) {
+                            throw new Error('Invalid request. Check your API key.');
+                        } else {
+                            throw new Error(`API error: ${response.status} ${response.statusText}`);
+                        }
                     }
                     const data = await response.json();
+                    renderVoiceOptions(data.voices || []);
                 } catch (error) {
                     console.error('Error loading voices:', error);
                     voiceGrid.innerHTML = `
                             <i class="fas fa-exclamation-triangle text-red-400 text-2xl"></i>
                             <p class="text-gray-500 mt-2">Failed to load voices</p>
                             <p class="text-red-500 text-sm mt-1">${error.message}</p>
+                            <button id="retryVoices" class="mt-2 text-blue-500 hover:text-blue-700 text-sm">
+                                <i class="fas fa-retry mr-1"></i> Retry
+                            </button>
                         </div>
                     `;
+                    document.getElementById('retryVoices')?.addEventListener('click', loadVoices);
                 }
             }
             function renderVoiceOptions(voices) {
                 voiceGrid.innerHTML = '';
                     let genderIcon = 'fa-user';
                     let genderColor = 'text-gray-500';
                     if (voice.ssmlGender === 'FEMALE') {
+                        genderIcon = 'fa-venus';
                         genderColor = 'text-pink-500';
                     } else if (voice.ssmlGender === 'MALE') {
+                        genderIcon = 'fa-mars';
                         genderColor = 'text-blue-500';
                     }
                 });
                 // Select first voice by default
+                if (naturalVoices.length > 0) {
+                    const firstCard = voiceGrid.querySelector('.voice-card');
+                    if (firstCard) firstCard.click();
+                }
             }
             // Play a voice sample
             async function playSample(voice, text) {
                 if (!apiKey) {
                     showToast('Failed to play sample: ' + error.message, 'error');
                 }
             }
+            // Synthesize speech using Google TTS API
+            async function synthesizeSpeech(text, voice, rate = 1, pitch = 0, model = 'standard') {
+                if (!apiKey) {
+                    throw new Error('API key not provided');
+                }
+                const request = {
+                    input: { text: text },
+                    voice: {
+                        languageCode: voice.languageCodes[0],
+                        name: voice.name,
+                        ssmlGender: voice.ssmlGender
+                    },
+                    audioConfig: {
+                        audioEncoding: 'MP3',
+                        speakingRate: rate,
+                        pitch: pitch,
+                        effectsProfileId: model === 'studio' ? ['telephony-class-application'] : undefined
+                    }
+                };
+                const response = await fetch(`https://texttospeech.googleapis.com/v1/text:synthesize?key=${apiKey}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(request)
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error?.message || `HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                return data.audioContent;
+            }
+            // Play audio data
+            async function playAudioData(audioBase64) {
+                if (!audioContext) {
+                    initAudioContext();
+                }
+                try {
+                    // Decode base64 audio
+                    const audioData = Uint8Array.from(atob(audioBase64), c => c.charCodeAt(0));
+                    const audioBuffer = await audioContext.decodeAudioData(audioData.buffer);
+                    // Create and play audio source
+                    audioSource = audioContext.createBufferSource();
+                    audioSource.buffer = audioBuffer;
+                    audioSource.connect(audioContext.destination);
+                    // Set up playback state
+                    isPlaying = true;
+                    isPaused = false;
+                    updatePlaybackButtons();
+                    // Start playback
+                    audioSource.start(0);
+                    startTime = audioContext.currentTime;
+                    // Handle playback end
+                    audioSource.onended = () => {
+                        if (isPlaying && !isPaused) {
+                            stopPlayback();
+                        }
+                    };
+                } catch (error) {
+                    console.error('Error playing audio:', error);
+                    showToast('Failed to play audio: ' + error.message, 'error');
+                }
+            }
             // File Handling
             uploadBtn.addEventListener('click', () => fileInput.click());
                     handleFile(e.target.files[0]);
                 }
             });
             pasteBtn.addEventListener('click', () => {
                 documentContent.innerHTML = '<p class="text-gray-500 italic">Press Ctrl+V (Cmd+V on Mac) to paste your text...</p>';
                 documentContent.focus();
                 document.addEventListener('paste', pasteHandler);
             });
             // Drag and Drop
             ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                 dropzone.addEventListener(eventName, preventDefaults, false);
             });
             function preventDefaults(e) {
                 e.preventDefault();
                 e.stopPropagation();
             }
             ['dragenter', 'dragover'].forEach(eventName => {
                 dropzone.addEventListener(eventName, highlight, false);
             });
             ['dragleave', 'drop'].forEach(eventName => {
                 dropzone.addEventListener(eventName, unhighlight, false);
             });
             function highlight() {
                 dropzone.classList.add('active');
             }
             function unhighlight() {
                 dropzone.classList.remove('active');
             }
             dropzone.addEventListener('drop', (e) => {
                 const dt = e.dataTransfer;
                 const file = dt.files[0];
                     handleFile(file);
                 }
             });
             // File processing
             function handleFile(file) {
                 const fileType = file.type;
                 } else if (fileType === 'application/msword' ||
                            fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
                            fileName.endsWith('.doc') || fileName.endsWith('.docx')) {
+                    showToast('Word document support requires conversion to text. Please save as plain text or PDF first.', 'error');
                 } else {
+                    showToast('Unsupported file type. Please upload a TXT or PDF file.', 'error');
                 }
             }
             function readTextFile(file) {
                 const reader = new FileReader();
                 reader.onload = (e) => {
                 };
                 reader.readAsText(file);
             }
             function readPDFFile(file) {
                 // Check if PDF.js is available
                 if (typeof pdfjsLib === 'undefined') {
+                    showToast('PDF.js not loaded. PDF support requires PDF.js library.', 'error');
                     return;
                 }
                     Promise.all(pagePromises).then(pagesText => {
                         text = pagesText.join('\n\n');
+                        setDocumentContent(text);
+                    }).catch(error => {
+                        console.error('Error extracting PDF text:', error);
+                        showToast('Failed to extract text from PDF', 'error');
+                    });
+                }).catch(error => {
+                    console.error('Error loading PDF:', error);
+                    showToast('Failed to load PDF file', 'error');
+                });
+            }
+            // Set document content
+            function setDocumentContent(text) {
+                currentText = text;
+                documentContent.innerHTML = text.split('\n').map(line => `<p>${line || '&nbsp;'}</p>`).join('');
+                charCount.textContent = `${text.length} characters`;
+                if (text.length > 1000000) {
+                    showToast('Document exceeds 1,000,000 character limit. Some content may be truncated.', 'error');
+                }
+            }
+            // Playback controls
+            playBtn.addEventListener('click', async () => {
+                if (!selectedVoice) {
+                    showToast('Please select a voice first', 'error');
+                    return;
+                }
+                if (!currentText.trim()) {
+                    showToast('Please add some text to read', 'error');
+                    return;
+                }
+                if (isPaused) {
+                    // Resume playback
+                    resumePlayback();
+                } else {
+                    // Start new playback
+                    await startPlayback();
+                }
+            });
+            pauseBtn.addEventListener('click', () => {
+                if (isPlaying && !isPaused) {
+                    pausePlayback();
+                }
+            });
+            stopBtn.addEventListener('click', () => {
+                stopPlayback();
+            });
+            async function startPlayback() {
+                try {
+                    isPlaying = true;
+                    isPaused = false;
+                    updatePlaybackButtons();
+                    showToast('Generating speech...', 'success', 1000);
+                    // Split text into chunks if needed
+                    const chunks = splitTextIntoChunks(currentText, MAX_CHUNK_SIZE);
+                    totalChunks = chunks.length;
+                    if (chunks.length > 1) {
+                        showToast(`Processing ${chunks.length} chunks...`, 'success', 2000);
+                    }
+                    // Process all chunks
+                    for (let i = 0; i < chunks.length; i++) {
+                        if (!isPlaying || isPaused) break;
+                        currentChunkIndex = i;
+                        const audioData = await synthesizeSpeech(
+                            chunks[i],
+                            selectedVoice,
+                            parseFloat(rateSelect.value),
+                            parseFloat(pitchSelect.value),
+                            modelSelect.value
+                        );
+                        if (i === 0) {
+                            // Start playing first chunk immediately
+                            await playAudioData(audioData);
+                        } else {
+                            // Queue other chunks
+                            audioQueue.push(audioData);
+                        }
+                    }
+                } catch (error) {
+                    console.error('Error during playback:', error);
+                    showToast('Failed to play text: ' + error.message, 'error');
+                    stopPlayback();
+                }
+            }
+            function pausePlayback() {
+                if (audioSource && isPlaying && !isPaused) {
+                    audioSource.stop();
+                    pauseTime = audioContext.currentTime - startTime;
+                    isPaused = true;
+                    updatePlaybackButtons();
+                }
+            }
+            function resumePlayback() {
+                if (isPaused && audioBuffer) {
+                    // Create new source for resume
+                    audioSource = audioContext.createBufferSource();
+                    audioSource.buffer = audioBuffer;
+                    audioSource.connect(audioContext.destination);
+                    // Resume from pause point
+                    audioSource.start(0, pauseTime);
+                    startTime = audioContext.currentTime - pauseTime;
+                    isPaused = false;
+                    updatePlaybackButtons();
+                    audioSource.onended = () => {
+                        if (isPlaying && !isPaused) {
+                            stopPlayback();
+                        }
+                    };
+                }
+            }
+            function stopPlayback() {
+                if (audioSource && isPlaying) {
+                    audioSource.stop();
+                }
+                isPlaying = false;
+                isPaused = false;
+                startTime = 0;
+                pauseTime = 0;
+                currentChunkIndex = 0;
+                audioQueue = [];
+                updatePlaybackButtons();
+                updateProgress(0);
+            }
+            function updatePlaybackButtons() {
+                playBtn.disabled = isPlaying && !isPaused;
+                pauseBtn.disabled = !isPlaying || isPaused;
+                stopBtn.disabled = !isPlaying;
+                if (isPlaying && !isPaused) {
+                    playBtn.innerHTML = '<i class="fas fa-pause"></i>';
+                } else {
+                    playBtn.innerHTML = '<i class="fas fa-play"></i>';
+                }
+            }
+            function updateProgress(progress) {
+                progressBar.style.width = (progress * 100) + '%';
+                const currentSeconds = Math.floor(progress * estimatedDuration);
+                const totalSeconds = Math.floor(estimatedDuration);
+                currentTime.textContent = formatTime(currentSeconds);
+                totalTime.textContent = formatTime(totalSeconds);
+            }
+            function formatTime(seconds) {
+                const minutes = Math.floor(seconds / 60);
+                const secs = seconds % 60;
+                return `${minutes}:${secs.toString().padStart(2, '0')}`;
+            }
+            function splitTextIntoChunks(text, maxChunkSize) {
+                const chunks = [];
+                const sentences = text.split(/[.!?]+/).filter(s => s.trim());
+                let currentChunk = '';
+                for (const sentence of sentences) {
+                    if (currentChunk.length + sentence.length <= maxChunkSize) {
+                        currentChunk += sentence + '.';
+                    } else {
+                        if (currentChunk) {
+                            chunks.push(currentChunk.trim());
+                        }
+                        currentChunk = sentence + '.';
+                    }
+                }
+                if (currentChunk) {
+                    chunks.push(currentChunk.trim());
+                }
+                return chunks;
+            }
+            // Event listeners
+            refreshVoicesBtn.addEventListener('click', loadVoices);
+            languageSelect.addEventListener('change', loadVoices);
+            // Initialize the application
+            init();
+        });
+    </script>
+</body>
 </html>