Spaces:

Toowired
/

tts-reader

Running

App Files Files Community

Toowired commited on May 15

Commit

4bddd58

verified ·

1 Parent(s): c1ea3c1

Update index.html

Browse files

Files changed (1) hide show

index.html +122 -220

index.html CHANGED Viewed

@@ -1,5 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -59,19 +68,6 @@
             border-radius: 3px;
             padding: 0 2px;
         }
-        .voice-card {
-            transition: all 0.2s ease;
-            border: 1px solid var(--border-color);
-            background-color: var(--card-bg);
-        }
-        .voice-card:hover {
-            border-color: #3B82F6;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-        }
-        .voice-card.selected {
-            border-color: #3B82F6;
-            background-color: #EFF6FF;
-        }
         .loading-spinner {
             border: 3px solid rgba(255, 255, 255, 0.3);
             border-radius: 50%;
@@ -118,33 +114,6 @@
             transition: all 0.2s;
         }
-        /* Enhanced voice selector styles */
-        .voice-selector {
-            background: linear-gradient(145deg, #f9fafb, #ffffff);
-            border-radius: 12px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-        }
-        .voice-option {
-            transition: all 0.2s ease;
-            border-radius: 8px;
-        }
-        .voice-option:hover {
-            background-color: #f3f4f6;
-            transform: translateY(-1px);
-        }
-        .voice-option.selected {
-            background-color: #3b82f6;
-            color: white;
-        }
-        .voice-category {
-            border-left: 4px solid #3b82f6;
-            background-color: #f8fafc;
-        }
         /* Audio controls enhancement */
         .audio-controls {
             background: linear-gradient(145deg, #ffffff, #f9fafb);
@@ -178,6 +147,11 @@
             background: linear-gradient(45deg, #3b82f6, #6366f1);
             box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -274,7 +248,7 @@
                 </div>
             </div>
-            <!-- Enhanced Voice Selection -->
             <div class="border-t border-gray-200 p-6 bg-gray-50">
                 <div class="flex justify-between items-center mb-4">
                     <h2 class="text-xl font-semibold text-gray-800">Voice & Settings</h2>
@@ -319,41 +293,19 @@
                     </div>
                 </div>
-                <!-- Enhanced Voice Selector -->
-                <div class="voice-selector p-4 mb-6">
-                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
-                        <!-- Male Voices -->
-                        <div class="voice-category p-3 rounded-lg">
-                            <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
-                                <i class="fas fa-mars text-blue-500 mr-2"></i>
-                                Male Voices
-                            </h3>
-                            <div id="maleVoices" class="space-y-2">
-                                <!-- Male voices will be populated here -->
-                            </div>
-                        </div>
-                        <!-- Female Voices -->
-                        <div class="voice-category p-3 rounded-lg">
-                            <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
-                                <i class="fas fa-venus text-pink-500 mr-2"></i>
-                                Female Voices
-                            </h3>
-                            <div id="femaleVoices" class="space-y-2">
-                                <!-- Female voices will be populated here -->
-                            </div>
-                        </div>
-                        <!-- Neutral Voices -->
-                        <div class="voice-category p-3 rounded-lg">
-                            <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
-                                <i class="fas fa-user text-purple-500 mr-2"></i>
-                                Neutral Voices
-                            </h3>
-                            <div id="neutralVoices" class="space-y-2">
-                                <!-- Neutral voices will be populated here -->
                             </div>
                         </div>
                     </div>
                 </div>
@@ -385,10 +337,10 @@
                     <div>
                         <label for="modelSelect" class="block text-sm font-medium text-gray-700 mb-1">Voice Model</label>
                         <select id="modelSelect" class="bg-white border border-gray-300 rounded-md py-2 px-3 w-full focus:outline-none focus:ring-blue-500 focus:border-blue-500">
-                            <option value="wavenet" selected>WaveNet - $16.00/1M</option>
-                            <option value="neural2">Neural2 - $16.00/1M</option>
-                            <option value="studio">Studio - $160.00/1M</option>
-                            <option value="standard">Standard - $4.00/1M</option>
                         </select>
                     </div>
                 </div>
@@ -398,8 +350,8 @@
             <div class="audio-controls p-6 m-4">
                 <div class="flex flex-wrap justify-between items-center gap-4 mb-4">
                     <div class="flex items-center gap-2">
-                        <span class="text-sm font-medium text-gray-700">Selected Voice:</span>
-                        <span id="selectedVoiceName" class="text-sm text-blue-600 font-medium">None</span>
                     </div>
                     <div class="playback-controls flex items-center gap-3">
@@ -471,16 +423,18 @@
                 studio: 160.00
             };
-            // Default male voice preference
-            const defaultMaleVoices = [
-                'en-US-Wavenet-A',
-                'en-US-Wavenet-B',
-                'en-US-Wavenet-D',
-                'en-US-Neural2-A',
-                'en-US-Neural2-D',
                 'en-US-Standard-A',
-                'en-US-Standard-B',
-                'en-US-Standard-D'
             ];
             // Global error handler
@@ -503,9 +457,6 @@
             const fileInput = document.getElementById('fileInput');
             const documentContent = document.getElementById('documentContent');
             const charCount = document.getElementById('charCount');
-            const maleVoices = document.getElementById('maleVoices');
-            const femaleVoices = document.getElementById('femaleVoices');
-            const neutralVoices = document.getElementById('neutralVoices');
             const refreshVoicesBtn = document.getElementById('refreshVoicesBtn');
             const languageSelect = document.getElementById('languageSelect');
             const rateSelect = document.getElementById('rateSelect');
@@ -515,7 +466,10 @@
             const pauseBtn = document.getElementById('pauseBtn');
             const stopBtn = document.getElementById('stopBtn');
             const downloadBtn = document.getElementById('downloadBtn');
-            const selectedVoiceName = document.getElementById('selectedVoiceName');
             const currentTime = document.getElementById('currentTime');
             const totalTime = document.getElementById('totalTime');
             const progressContainer = document.getElementById('progressContainer');
@@ -577,6 +531,13 @@
                 pitchSelect.addEventListener('change', updateCostEstimator);
                 document.getElementById('showCostBreakdown')?.addEventListener('click', showCostBreakdownModal);
             }
             // Voice type and pricing functions
@@ -643,29 +604,33 @@
                 }
             }
-            // Find and select default male voice
-            function selectDefaultMaleVoice() {
                 if (!availableVoices.length) return;
-                for (const preferredVoice of defaultMaleVoices) {
-                    const voice = availableVoices.find(v => v.name === preferredVoice);
                     if (voice) {
                         selectVoice(voice);
                         return voice;
                     }
                 }
-                // Fallback to first male voice if none of the preferred ones are found
-                const maleVoice = availableVoices.find(v => v.ssmlGender === 'MALE');
-                if (maleVoice) {
-                    selectVoice(maleVoice);
-                    return maleVoice;
                 }
-                // Final fallback to any voice
-                if (availableVoices.length > 0) {
-                    selectVoice(availableVoices[0]);
-                    return availableVoices[0];
                 }
                 return null;
@@ -687,8 +652,9 @@
                     case 'neural2':
                         preferredVoices = availableVoices.filter(v => v.name.includes('Neural2'));
                         break;
-                    default:
-                        preferredVoices = availableVoices.filter(v => !v.name.includes('Studio') && !v.name.includes('Wavenet') && !v.name.includes('Neural2'));
                 }
                 if (preferredVoices.length > 0) {
@@ -716,7 +682,7 @@
                         <div class="space-y-3">
                             <div class="bg-green-50 p-3 rounded border border-green-200">
                                 <div class="flex justify-between items-center">
-                                    <span class="font-medium text-green-800">Standard Voices</span>
                                     <span class="text-green-900 font-bold">$4.00</span>
                                 </div>
                                 <div class="text-sm text-green-600">per million characters</div>
@@ -907,6 +873,23 @@
                 return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
             }
             // API Key Management
             saveKeyBtn.addEventListener('click', async () => {
                 const key = apiKeyInput.value ? apiKeyInput.value.trim() : '';
@@ -959,11 +942,15 @@
             // Load available voices from Google TTS
             async function loadVoices() {
                 if (!apiKey) {
-                    showLoadingState('Please enter your Google Cloud API key');
                     return;
                 }
-                showLoadingState('Loading Google TTS voices...');
                 try {
                     const languageCode = languageSelect.value;
@@ -987,126 +974,40 @@
                         throw new Error('Invalid response from Google TTS API - no voices returned');
                     }
-                    // Filter for natural HD voices and store them
-                    const naturalVoices = data.voices.filter(voice =>
-                        voice.name.includes('Wavenet') ||
-                        voice.name.includes('Studio') ||
-                        voice.name.includes('Neural2')
-                    );
-                    naturalVoices.sort((a, b) => a.name.localeCompare(b.name));
-                    availableVoices = naturalVoices;
-                    if (naturalVoices.length === 0) {
-                        showErrorState('No high-quality voices available for selected language');
-                        return;
-                    }
-                    // Create categorized voice interface
-                    createVoiceInterface(naturalVoices);
-                    // Auto-select default male voice
-                    selectDefaultMaleVoice();
                     updateCostEstimator();
-                    showToast(`Loaded ${naturalVoices.length} high-quality voices`, 'success');
                 } catch (error) {
                     console.error('Error loading voices:', error);
-                    showErrorState(error.message);
                 }
             }
-            function showLoadingState(message) {
-                [maleVoices, femaleVoices, neutralVoices].forEach(container => {
-                    container.innerHTML = `
-                        <div class="text-center py-4">
-                            <div class="loading-spinner mx-auto mb-2"></div>
-                            <p class="text-gray-500 text-sm">${message}</p>
-                        </div>
-                    `;
-                });
-            }
-            function showErrorState(message) {
-                [maleVoices, femaleVoices, neutralVoices].forEach(container => {
-                    container.innerHTML = `
-                        <div class="text-center py-4">
-                            <i class="fas fa-exclamation-triangle text-red-400 text-lg mb-2"></i>
-                            <p class="text-red-500 text-sm">${message}</p>
-                        </div>
-                    `;
-                });
-            }
-            // Create categorized voice interface
-            function createVoiceInterface(voices) {
-                const male = voices.filter(v => v.ssmlGender === 'MALE');
-                const female = voices.filter(v => v.ssmlGender === 'FEMALE');
-                const neutral = voices.filter(v => v.ssmlGender === 'NEUTRAL');
-                maleVoices.innerHTML = male.length ? male.map(voice => createVoiceOption(voice)).join('') : '<p class="text-gray-500 text-sm">No male voices available</p>';
-                femaleVoices.innerHTML = female.length ? female.map(voice => createVoiceOption(voice)).join('') : '<p class="text-gray-500 text-sm">No female voices available</p>';
-                neutralVoices.innerHTML = neutral.length ? neutral.map(voice => createVoiceOption(voice)).join('') : '<p class="text-gray-500 text-sm">No neutral voices available</p>';
-                // Add click listeners to all voice options
-                document.querySelectorAll('.voice-option').forEach(option => {
-                    option.addEventListener('click', () => {
-                        const voiceName = option.dataset.voiceName;
-                        const voice = voices.find(v => v.name === voiceName);
-                        if (voice) {
-                            selectVoice(voice);
-                        }
-                    });
-                });
-            }
-            function createVoiceOption(voice) {
-                const voiceType = getVoiceTypeAndPricing(voice.name);
-                const displayName = voice.name.replace(/-/g, ' ').replace(/en US /i, '').replace(/Wavenet|Neural2|Studio/i, '');
-                return `
-                    <div class="voice-option p-3 border border-gray-200 rounded-lg cursor-pointer" data-voice-name="${voice.name}">
-                        <div class="flex justify-between items-center">
-                            <div>
-                                <div class="font-medium text-gray-800">${displayName}</div>
-                                <div class="text-xs text-gray-500">${voiceType.name} • ${voice.languageCodes[0]}</div>
-                            </div>
-                            <div class="text-right">
-                                <div class="text-xs text-blue-600">$${voiceType.rate}/1M</div>
-                                <button class="sample-btn text-xs text-gray-600 hover:text-blue-600 mt-1">
-                                    <i class="fas fa-play text-xs"></i> Sample
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                `;
-            }
             function selectVoice(voice) {
                 selectedVoice = voice;
-                selectedVoiceName.textContent = voice.name;
-                // Update UI selection state
-                document.querySelectorAll('.voice-option').forEach(option => {
-                    option.classList.remove('selected');
-                });
-                const selectedOption = document.querySelector(`[data-voice-name="${voice.name}"]`);
-                if (selectedOption) {
-                    selectedOption.classList.add('selected');
-                }
                 updateCostEstimator();
-                showToast(`Selected voice: ${voice.name}`, 'success', 1500);
-                // Add sample button click listener
-                const sampleBtn = selectedOption?.querySelector('.sample-btn');
-                if (sampleBtn) {
-                    sampleBtn.addEventListener('click', (e) => {
-                        e.stopPropagation();
-                        playSample(voice);
-                    });
-                }
             }
             // Play voice sample
@@ -1123,7 +1024,7 @@
                 try {
                     showSynthesisProgress(0);
                     const sampleText = "Hello, this is a sample of my voice. I can read your documents with natural sounding speech.";
-                    const audioData = await synthesizeSpeech(sampleText, voice, 1, 0, 'wavenet');
                     hideSynthesisProgress();
                     playAudioData(audioData);
                 } catch (error) {
@@ -1748,7 +1649,7 @@
                         for (let i = 1; i <= Math.min(5, lines.length - 1); i++) {
                             const values = lines[i].split(',').map(v => v.trim().replace(/"/g, ''));
                             text += `Row ${i}: ${values.join(', ')}\n`;
-                        }
                     }
                     setDocumentContent(text);
@@ -1771,12 +1672,13 @@
                 }
                 updateCostEstimator();
             }
             // Playback controls
             playBtn.addEventListener('click', async () => {
                 if (!selectedVoice) {
-                    showToast('Please select a voice first', 'error');
                     return;
                 }

 <!DOCTYPE html>
 <html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Google TTS Document Reader (BYOK)</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {<!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
             border-radius: 3px;
             padding: 0 2px;
         }
         .loading-spinner {
             border: 3px solid rgba(255, 255, 255, 0.3);
             border-radius: 50%;
             transition: all 0.2s;
         }
         /* Audio controls enhancement */
         .audio-controls {
             background: linear-gradient(145deg, #ffffff, #f9fafb);
             background: linear-gradient(45deg, #3b82f6, #6366f1);
             box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
         }
+        .voice-status {
+            background: linear-gradient(145deg, #f0f9ff, #e0f2fe);
+            border: 1px solid #0ea5e9;
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
                 </div>
             </div>
+            <!-- Voice & Settings Section -->
             <div class="border-t border-gray-200 p-6 bg-gray-50">
                 <div class="flex justify-between items-center mb-4">
                     <h2 class="text-xl font-semibold text-gray-800">Voice & Settings</h2>
                     </div>
                 </div>
+                <!-- Voice Status Display -->
+                <div id="voiceStatus" class="voice-status p-4 rounded-lg mb-6">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <i class="fas fa-microphone text-blue-600 mr-3"></i>
+                            <div>
+                                <div class="font-medium text-gray-800" id="currentVoiceName">Loading voices...</div>
+                                <div class="text-sm text-gray-600" id="currentVoiceDetails">Please wait while voices are loaded</div>
                             </div>
                         </div>
+                        <button id="playVoiceSample" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm transition" disabled>
+                            <i class="fas fa-play mr-1"></i> Play Sample
+                        </button>
                     </div>
                 </div>
                     <div>
                         <label for="modelSelect" class="block text-sm font-medium text-gray-700 mb-1">Voice Model</label>
                         <select id="modelSelect" class="bg-white border border-gray-300 rounded-md py-2 px-3 w-full focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                            <option value="standard" selected>Standard - $4.00/1M chars (Default)</option>
+                            <option value="wavenet">WaveNet - $16.00/1M chars</option>
+                            <option value="neural2">Neural2 - $16.00/1M chars</option>
+                            <option value="studio">Studio - $160.00/1M chars</option>
                         </select>
                     </div>
                 </div>
             <div class="audio-controls p-6 m-4">
                 <div class="flex flex-wrap justify-between items-center gap-4 mb-4">
                     <div class="flex items-center gap-2">
+                        <span class="text-sm font-medium text-gray-700">Ready to synthesize:</span>
+                        <span id="synthesisStatus" class="text-sm text-blue-600 font-medium">Select voice and add text</span>
                     </div>
                     <div class="playback-controls flex items-center gap-3">
                 studio: 160.00
             };
+            // Priority list for Standard male voices
+            const defaultStandardMaleVoices = [
                 'en-US-Standard-A',
+                'en-US-Standard-B',
+                'en-US-Standard-D',
+                'en-US-Standard-I',
+                'en-GB-Standard-A',
+                'en-GB-Standard-B',
+                'en-GB-Standard-D',
+                'en-AU-Standard-A',
+                'en-AU-Standard-B',
+                'en-AU-Standard-D'
             ];
             // Global error handler
             const fileInput = document.getElementById('fileInput');
             const documentContent = document.getElementById('documentContent');
             const charCount = document.getElementById('charCount');
             const refreshVoicesBtn = document.getElementById('refreshVoicesBtn');
             const languageSelect = document.getElementById('languageSelect');
             const rateSelect = document.getElementById('rateSelect');
             const pauseBtn = document.getElementById('pauseBtn');
             const stopBtn = document.getElementById('stopBtn');
             const downloadBtn = document.getElementById('downloadBtn');
+            const currentVoiceName = document.getElementById('currentVoiceName');
+            const currentVoiceDetails = document.getElementById('currentVoiceDetails');
+            const playVoiceSample = document.getElementById('playVoiceSample');
+            const synthesisStatus = document.getElementById('synthesisStatus');
             const currentTime = document.getElementById('currentTime');
             const totalTime = document.getElementById('totalTime');
             const progressContainer = document.getElementById('progressContainer');
                 pitchSelect.addEventListener('change', updateCostEstimator);
                 document.getElementById('showCostBreakdown')?.addEventListener('click', showCostBreakdownModal);
+                // Play voice sample event
+                playVoiceSample.addEventListener('click', () => {
+                    if (selectedVoice) {
+                        playSample(selectedVoice);
+                    }
+                });
             }
             // Voice type and pricing functions
                 }
             }
+            // Find and select default STANDARD male voice
+            function selectDefaultStandardMaleVoice() {
                 if (!availableVoices.length) return;
+                // Only look for Standard voices
+                const standardVoices = availableVoices.filter(v => v.name.includes('Standard'));
+                // Try to find preferred male voices in order
+                for (const preferredVoice of defaultStandardMaleVoices) {
+                    const voice = standardVoices.find(v => v.name === preferredVoice);
                     if (voice) {
                         selectVoice(voice);
                         return voice;
                     }
                 }
+                // Fallback to first standard male voice
+                const standardMaleVoice = standardVoices.find(v => v.ssmlGender === 'MALE');
+                if (standardMaleVoice) {
+                    selectVoice(standardMaleVoice);
+                    return standardMaleVoice;
                 }
+                // Final fallback to any standard voice
+                if (standardVoices.length > 0) {
+                    selectVoice(standardVoices[0]);
+                    return standardVoices[0];
                 }
                 return null;
                     case 'neural2':
                         preferredVoices = availableVoices.filter(v => v.name.includes('Neural2'));
                         break;
+                    case 'standard':
+                        preferredVoices = availableVoices.filter(v => v.name.includes('Standard'));
+                        break;
                 }
                 if (preferredVoices.length > 0) {
                         <div class="space-y-3">
                             <div class="bg-green-50 p-3 rounded border border-green-200">
                                 <div class="flex justify-between items-center">
+                                    <span class="font-medium text-green-800">Standard Voices (Default)</span>
                                     <span class="text-green-900 font-bold">$4.00</span>
                                 </div>
                                 <div class="text-sm text-green-600">per million characters</div>
                 return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
             }
+            // Update synthesis status
+            function updateSynthesisStatus() {
+                if (!selectedVoice) {
+                    synthesisStatus.textContent = 'Please select an API key to load voices';
+                    return;
+                }
+                if (!currentText.trim()) {
+                    synthesisStatus.textContent = 'Add text to synthesize';
+                    return;
+                }
+                const voiceType = getVoiceTypeAndPricing(selectedVoice.name);
+                const estimation = calculateEstimatedCost(currentText.length, voiceType);
+                synthesisStatus.textContent = `Ready (${currentText.length} chars, ~$${estimation.cost.toFixed(4)})`;
+            }
             // API Key Management
             saveKeyBtn.addEventListener('click', async () => {
                 const key = apiKeyInput.value ? apiKeyInput.value.trim() : '';
             // Load available voices from Google TTS
             async function loadVoices() {
                 if (!apiKey) {
+                    currentVoiceName.textContent = 'No API key provided';
+                    currentVoiceDetails.textContent = 'Please enter your Google Cloud API key above';
+                    playVoiceSample.disabled = true;
                     return;
                 }
+                currentVoiceName.textContent = 'Loading voices...';
+                currentVoiceDetails.textContent = 'Please wait while voices are loaded';
+                playVoiceSample.disabled = true;
                 try {
                     const languageCode = languageSelect.value;
                         throw new Error('Invalid response from Google TTS API - no voices returned');
                     }
+                    // Store all voices for model switching
+                    availableVoices = data.voices;
+                    // Always start with Standard voices (as per user request)
+                    selectDefaultStandardMaleVoice();
                     updateCostEstimator();
+                    updateSynthesisStatus();
+                    showToast(`Loaded ${availableVoices.length} voices successfully`, 'success');
                 } catch (error) {
                     console.error('Error loading voices:', error);
+                    currentVoiceName.textContent = 'Error loading voices';
+                    currentVoiceDetails.textContent = error.message;
+                    showToast('Failed to load voices: ' + error.message, 'error');
                 }
             }
             function selectVoice(voice) {
                 selectedVoice = voice;
+                // Update voice display
+                const displayName = voice.name.replace(/en-US-|en-GB-|en-AU-/, '').replace(/-/g, ' ');
+                currentVoiceName.textContent = displayName;
+                const voiceType = getVoiceTypeAndPricing(voice.name);
+                const genderIcon = voice.ssmlGender === 'MALE' ? '♂' : voice.ssmlGender === 'FEMALE' ? '♀' : '○';
+                currentVoiceDetails.textContent = `${genderIcon} ${voice.ssmlGender} • ${voiceType.name} Voice • $${voiceType.rate}/1M chars`;
+                playVoiceSample.disabled = false;
                 updateCostEstimator();
+                updateSynthesisStatus();
+                showToast(`Selected: ${voice.name}`, 'success', 1500);
             }
             // Play voice sample
                 try {
                     showSynthesisProgress(0);
                     const sampleText = "Hello, this is a sample of my voice. I can read your documents with natural sounding speech.";
+                    const audioData = await synthesizeSpeech(sampleText, voice, 1, 0, modelSelect.value);
                     hideSynthesisProgress();
                     playAudioData(audioData);
                 } catch (error) {
                         for (let i = 1; i <= Math.min(5, lines.length - 1); i++) {
                             const values = lines[i].split(',').map(v => v.trim().replace(/"/g, ''));
                             text += `Row ${i}: ${values.join(', ')}\n`;
+                        </div>
                     }
                     setDocumentContent(text);
                 }
                 updateCostEstimator();
+                updateSynthesisStatus();
             }
             // Playback controls
             playBtn.addEventListener('click', async () => {
                 if (!selectedVoice) {
+                    showToast('Please wait for voices to load or check your API key', 'error');
                     return;
                 }