Update index.html

index.html

@@ -100,10 +100,6 @@
             from { transform: translateX(100%); opacity: 0; }
             to { transform: translateX(0); opacity: 1; }
         }
-        @keyframes slideOut {
-            from { transform: translateX(0); opacity: 1; }
-            to { transform: translateX(100%); opacity: 0; }
-        }
         
         /* Progress indicator styles */
         #progressContainer {
@@ -174,7 +170,7 @@
                                 <ul class="mt-1 list-disc list-inside space-y-1">
                                     <li>Make sure billing is enabled for your project</li>
                                     <li>Copy ONLY the API key (no extra text)</li>
-                                    <li>If restricted, allow this domain: ${window.location.hostname}</li>
+                                    <li>If restricted, allow this domain</li>
                                 </ul>
                             </div>
                         </div>
@@ -261,6 +257,11 @@
                         </button>
                     </div>
                 </div>
+
+                <!-- Voice Selection Dropdown -->
+                <div id="voiceSelectionContainer" class="mb-4">
+                    <!-- Voice dropdown will be inserted here -->
+                </div>
                 
                 <div id="voiceGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                     <!-- Voices will be loaded dynamically -->
@@ -299,10 +300,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 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
-                                <option value="studio">Studio Quality - $160.00/1M chars (Premium voices: US-O, US-Q)</option>
-                                <option value="wavenet" selected>WaveNet - $16.00/1M chars (High quality: US-A through US-J)</option>
-                                <option value="neural2">Neural2 - $16.00/1M chars (Enhanced Neural: US-A through US-J)</option>
-                                <option value="standard">Standard - $4.00/1M chars (Basic quality)</option>
+                                <option value="studio">Studio Quality - $160.00/1M chars</option>
+                                <option value="wavenet" selected>WaveNet - $16.00/1M chars</option>
+                                <option value="neural2">Neural2 - $16.00/1M chars</option>
+                                <option value="standard">Standard - $4.00/1M chars</option>
                             </select>
                         </div>
                     </div>
@@ -347,10 +348,11 @@
     
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            // Global state variables (properly initialized)
+            // Global state variables
             let apiKey = localStorage.getItem('googleTTSApiKey') || '';
             let currentText = '';
             let selectedVoice = null;
+            let availableVoices = [];
             let isPlaying = false;
             let isPaused = false;
             let audioContext = null;
@@ -373,7 +375,6 @@
             // Global error handler
             window.addEventListener('error', (e) => {
                 console.error('Global error caught:', e.error);
-                console.error('Error stack:', e.error?.stack);
             });
             
             // Global unhandled promise rejection handler
@@ -392,6 +393,7 @@
             const documentContent = document.getElementById('documentContent');
             const charCount = document.getElementById('charCount');
             const voiceGrid = document.getElementById('voiceGrid');
+            const voiceSelectionContainer = document.getElementById('voiceSelectionContainer');
             const refreshVoicesBtn = document.getElementById('refreshVoicesBtn');
             const languageSelect = document.getElementById('languageSelect');
             const rateSelect = document.getElementById('rateSelect');
@@ -411,15 +413,6 @@
             // Dark mode elements
             const darkModeToggle = document.getElementById('darkModeToggle');
             
-            // Utility function for file size formatting
-            function formatFileSize(bytes) {
-                if (bytes === 0) return '0 Bytes';
-                const k = 1024;
-                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-                const i = Math.floor(Math.log(bytes) / Math.log(k));
-                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-            }
-            
             // Initialize function
             function init() {
                 // Load saved API key
@@ -461,121 +454,14 @@
                 
                 // Event listeners to update cost estimates
                 modelSelect.addEventListener('change', (e) => {
-                    modelSelect.dataset.currentValue = e.target.value;
                     updateCostEstimator();
-                    
-                    // Auto-select appropriate voice based on model
                     autoSelectVoiceForModel(e.target.value);
-                    
-                    // Show a toast indicating voice change
-                    if (selectedVoice) {
-                        showToast(`Voice changed to ${selectedVoice.name} for ${e.target.value} model`, 'success', 2000);
-                    }
                 });
                 
-                // Update cost estimator when settings change
                 rateSelect.addEventListener('change', updateCostEstimator);
                 pitchSelect.addEventListener('change', updateCostEstimator);
                 
-                // Initialize cost breakdown
-                document.getElementById('showCostBreakdown').addEventListener('click', showCostBreakdownModal);
-                
-                // Set default model value
-                modelSelect.dataset.currentValue = 'wavenet';
-            }
-            
-            // Dark Mode Implementation
-            function initDarkMode() {
-                const savedTheme = localStorage.getItem('theme');
-                const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                
-                if (savedTheme) {
-                    document.documentElement.setAttribute('data-theme', savedTheme);
-                    updateDarkModeIcon(savedTheme === 'dark');
-                } else if (systemPrefersDark) {
-                    document.documentElement.setAttribute('data-theme', 'dark');
-                    updateDarkModeIcon(true);
-                } else {
-                    document.documentElement.setAttribute('data-theme', 'light');
-                    updateDarkModeIcon(false);
-                }
-                
-                darkModeToggle.addEventListener('click', toggleDarkMode);
-            }
-            
-            function toggleDarkMode() {
-                const currentTheme = document.documentElement.getAttribute('data-theme');
-                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-                
-                document.documentElement.setAttribute('data-theme', newTheme);
-                localStorage.setItem('theme', newTheme);
-                updateDarkModeIcon(newTheme === 'dark');
-            }
-            
-            function updateDarkModeIcon(isDark) {
-                const icon = darkModeToggle.querySelector('i');
-                icon.className = isDark ? 'fas fa-sun text-xl' : 'fas fa-moon text-xl';
-            }
-            
-            // Progress indicator initialization
-            function initProgressIndicator() {
-                progressContainer.addEventListener('click', (e) => {
-                    if (!audioSource || !audioBuffer) return;
-                    
-                    const rect = progressContainer.getBoundingClientRect();
-                    const clickX = e.clientX - rect.left;
-                    const percentage = clickX / rect.width;
-                    const newTime = percentage * audioBuffer.duration;
-                    
-                    seekToTime(newTime);
-                });
-            }
-            
-            function seekToTime(time) {
-                if (!audioSource || !audioBuffer) return;
-                
-                audioSource.stop();
-                
-                audioSource = audioContext.createBufferSource();
-                audioSource.buffer = audioBuffer;
-                audioSource.connect(audioContext.destination);
-                
-                startTime = audioContext.currentTime - time;
-                audioSource.start(0, time);
-                
-                audioSource.onended = () => {
-                    if (isPlaying && !isPaused) {
-                        stopPlayback();
-                    }
-                };
-            }
-            
-            // Download feature initialization
-            function initDownloadFeature() {
-                downloadBtn.addEventListener('click', downloadAudio);
-            }
-            
-            async function downloadAudio() {
-                if (!currentAudioBlob) {
-                    showToast('No audio available to download', 'error');
-                    return;
-                }
-                
-                try {
-                    const url = URL.createObjectURL(currentAudioBlob);
-                    const a = document.createElement('a');
-                    a.href = url;
-                    a.download = `tts-audio-${new Date().toISOString().split('T')[0]}.mp3`;
-                    document.body.appendChild(a);
-                    a.click();
-                    document.body.removeChild(a);
-                    URL.revokeObjectURL(url);
-                    
-                    showToast('Audio downloaded successfully', 'success');
-                } catch (error) {
-                    console.error('Download error:', error);
-                    showToast('Failed to download audio', 'error');
-                }
+                document.getElementById('showCostBreakdown')?.addEventListener('click', showCostBreakdownModal);
             }
             
             // Voice type and pricing functions
@@ -642,6 +528,37 @@
                 }
             }
             
+            // Auto select voice for model
+            function autoSelectVoiceForModel(model) {
+                if (!availableVoices.length) return;
+                
+                let preferredVoices = [];
+                
+                switch (model) {
+                    case 'studio':
+                        preferredVoices = availableVoices.filter(v => v.name.includes('Studio'));
+                        break;
+                    case 'wavenet':
+                        preferredVoices = availableVoices.filter(v => v.name.includes('Wavenet'));
+                        break;
+                    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) {
+                    selectedVoice = preferredVoices[0];
+                    const voiceSelect = document.getElementById('voiceSelect');
+                    if (voiceSelect) {
+                        voiceSelect.value = selectedVoice.name;
+                    }
+                    updateCostEstimator();
+                    showToast(`Voice changed to ${selectedVoice.name} for ${model} model`, 'success', 2000);
+                }
+            }
+            
             // Cost breakdown modal
             function showCostBreakdownModal() {
                 const modal = document.createElement('div');
@@ -725,6 +642,100 @@
                 }
             }
             
+            // Dark Mode Implementation
+            function initDarkMode() {
+                const savedTheme = localStorage.getItem('theme');
+                const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                
+                if (savedTheme) {
+                    document.documentElement.setAttribute('data-theme', savedTheme);
+                    updateDarkModeIcon(savedTheme === 'dark');
+                } else if (systemPrefersDark) {
+                    document.documentElement.setAttribute('data-theme', 'dark');
+                    updateDarkModeIcon(true);
+                } else {
+                    document.documentElement.setAttribute('data-theme', 'light');
+                    updateDarkModeIcon(false);
+                }
+                
+                darkModeToggle.addEventListener('click', toggleDarkMode);
+            }
+            
+            function toggleDarkMode() {
+                const currentTheme = document.documentElement.getAttribute('data-theme');
+                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+                
+                document.documentElement.setAttribute('data-theme', newTheme);
+                localStorage.setItem('theme', newTheme);
+                updateDarkModeIcon(newTheme === 'dark');
+            }
+            
+            function updateDarkModeIcon(isDark) {
+                const icon = darkModeToggle.querySelector('i');
+                icon.className = isDark ? 'fas fa-sun text-xl' : 'fas fa-moon text-xl';
+            }
+            
+            // Progress indicator initialization
+            function initProgressIndicator() {
+                progressContainer.addEventListener('click', (e) => {
+                    if (!audioSource || !audioBuffer) return;
+                    
+                    const rect = progressContainer.getBoundingClientRect();
+                    const clickX = e.clientX - rect.left;
+                    const percentage = clickX / rect.width;
+                    const newTime = percentage * audioBuffer.duration;
+                    
+                    seekToTime(newTime);
+                });
+            }
+            
+            function seekToTime(time) {
+                if (!audioSource || !audioBuffer) return;
+                
+                audioSource.stop();
+                
+                audioSource = audioContext.createBufferSource();
+                audioSource.buffer = audioBuffer;
+                audioSource.connect(audioContext.destination);
+                
+                startTime = audioContext.currentTime - time;
+                audioSource.start(0, time);
+                
+                audioSource.onended = () => {
+                    if (isPlaying && !isPaused) {
+                        stopPlayback();
+                    }
+                };
+            }
+            
+            // Download feature initialization
+            function initDownloadFeature() {
+                downloadBtn.addEventListener('click', downloadAudio);
+            }
+            
+            async function downloadAudio() {
+                if (!currentAudioBlob) {
+                    showToast('No audio available to download', 'error');
+                    return;
+                }
+                
+                try {
+                    const url = URL.createObjectURL(currentAudioBlob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `tts-audio-${new Date().toISOString().split('T')[0]}.mp3`;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    URL.revokeObjectURL(url);
+                    
+                    showToast('Audio downloaded successfully', 'success');
+                } catch (error) {
+                    console.error('Download error:', error);
+                    showToast('Failed to download audio', 'error');
+                }
+            }
+            
             // Toast notifications
             function showToast(message, type = 'success', duration = 3000) {
                 const toast = document.createElement('div');
@@ -738,6 +749,15 @@
                 }, duration);
             }
             
+            // Utility function for file size formatting
+            function formatFileSize(bytes) {
+                if (bytes === 0) return '0 Bytes';
+                const k = 1024;
+                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+                const i = Math.floor(Math.log(bytes) / Math.log(k));
+                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() : '';
@@ -806,1083 +826,126 @@
                         <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?languageCode=${languageCode}`, {
-                        method: 'GET',
-                        headers: {
-                            'X-Goog-Api-Key': apiKey.trim(),
-                            'Accept': 'application/json',
-                        },
-                        mode: 'cors',
-                        cache: 'no-cache'
-                    });
-                    
-                    if (!response.ok) {
-                        throw new Error(`API error (${response.status}): Failed to load voices`);
-                    }
-                    
-                    const data = await response.json();
-                    
-                    if (!data || !data.voices) {
-                        throw new Error('Invalid response from Google TTS API - no voices returned');
-                    }
-                    
-                    renderVoiceOptions(data.voices);
-                } catch (error) {
-                    console.error('Error loading voices:', error);
-                    voiceGrid.innerHTML = `
-                        <div class="col-span-full text-center py-8">
-                            <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 max-w-md mx-auto">${error.message}</p>
-                            <button id="retryVoices" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded text-sm">
-                                <i class="fas fa-sync-alt mr-1"></i> Retry
-                            </button>
-                        </div>
-                    `;
-                    
-                    document.getElementById('retryVoices')?.addEventListener('click', loadVoices);
-                }
-            }
-            
-            function renderVoiceOptions(voices) {
-                voiceGrid.innerHTML = '';
-                
-                if (!voices || voices.length === 0) {
-                    voiceGrid.innerHTML = `
-                        <div class="col-span-full text-center py-8">
-                            <i class="fas fa-microphone-slash text-gray-400 text-2xl"></i>
-                            <p class="text-gray-500 mt-2">No voices available for selected language</p>
-                        </div>
-                    `;
-                    return;
-                }
-                
-                // Filter for natural HD voices
-                const naturalVoices = voices.filter(voice => 
-                    voice.name.includes('Wavenet') || 
-                    voice.name.includes('Studio') ||
-                    voice.name.includes('Neural2')
-                );
-                
-                naturalVoices.sort((a, b) => a.name.localeCompare(b.name));
-                
-                naturalVoices.forEach(voice => {
-                    const voiceCard = document.createElement('div');
-                    voiceCard.className = 'voice-card bg-white p-4 rounded-lg cursor-pointer relative';
-                    voiceCard.dataset.voiceName = voice.name;
-                    
-                    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';
-                    }
-                    
-                    let qualityBadge = '';
-                    if (voice.name.includes('Studio')) {
-                        qualityBadge = '<div class="absolute top-2 right-2 bg-purple-500 text-white text-xs px-2 py-1 rounded">Studio</div>';
-                    } else if (voice.name.includes('Wavenet')) {
-                        qualityBadge = '<div class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">WaveNet</div>';
-                    } else if (voice.name.includes('Neural2')) {
-                        qualityBadge = '<div class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">Neural2</div>';
-                    }
-                    
-                    voiceCard.innerHTML = `
-                        <div class="flex items-start">
-                            <div class="mr-3 ${genderColor}">
-                                <i class="fas ${genderIcon} text-xl"></i>
-                            </div>
-                            <div class="flex-1">
-                                <h3 class="font-medium text-gray-800">${voice.name.replace('en-', '').replace('Wavenet', '').replace('Neural2', '').replace('Studio', '').trim()}</h3>
-                                <p class="text-sm text-gray-600">${voice.languageCodes[0]}</p>
-                                <div class="mt-2 flex items-center">
-                                    <button class="play-sample text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 py-1 px-2 rounded">
-                                        <i class="fas fa-play mr-1"></i> Sample
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="ml-2 text-blue-500 hidden selected-icon">
-                                <i class="fas fa-check-circle"></i>
-                            </div>
-                        </div>
-                        ${qualityBadge}
-                    `;
-                    
-                    voiceCard.addEventListener('click', () => {
-                        document.querySelectorAll('.voice-card').forEach(card => {
-                            card.classList.remove('selected');
-                            card.querySelector('.selected-icon').classList.add('hidden');
-                        });
-                        
-                        voiceCard.classList.add('selected');
-                        voiceCard.querySelector('.selected-icon').classList.remove('hidden');
-                        selectedVoice = voice;
-                        
-                        updateCostEstimator();
-                    });
-                    
-                    const playSampleBtn = voiceCard.querySelector('.play-sample');
-                    playSampleBtn.addEventListener('click', (e) => {
-                        e.stopPropagation();
-                        playSample(voice, "Hello, this is a sample of my voice. I can read your documents with natural sounding speech.");
-                    });
-                    
-                    voiceGrid.appendChild(voiceCard);
-                });
-                
-                if (naturalVoices.length > 0) {
-                    const firstCard = voiceGrid.querySelector('.voice-card');
-                    if (firstCard) {
-                        firstCard.click();
-                        updateCostEstimator();
-                    }
-                }
-                
-                // Initialize the model dropdown with costs
-                if (currentText.trim()) {
-                    updateModelDropdownCosts();
-                }
-            }
-            
-            // Play a voice sample
-            async function playSample(voice, text) {
-                if (!apiKey) {
-                    showToast('Please enter your API key first', 'error');
-                    return;
-                }
-                
-                if (isPlaying) {
-                    stopPlayback();
-                }
-                
-                try {
-                    const audioData = await synthesizeSpeech(text, voice, parseFloat(rateSelect.value), parseFloat(pitchSelect.value), modelSelect.value);
-                    playAudioData(audioData);
-                } catch (error) {
-                    console.error('Error playing sample:', error);
-                    showToast('Failed to play sample: ' + error.message, 'error');
-                }
-            }
-            
-            // Enhanced synthesize speech with caching and budget tracking
-            async function synthesizeSpeech(text, voice, rate = 1, pitch = 0, model = 'standard') {
-                if (!apiKey) {
-                    throw new Error('API key not provided');
-                }
-                
-                if (!text || !text.trim()) {
-                    throw new Error('No text provided for synthesis');
-                }
-                
-                const cleanApiKey = apiKey.trim();
-                const settings = { rate, pitch, model };
-                
-                // Check cache first
-                const cachedAudio = await ttsCache.get(text, voice, settings);
-                if (cachedAudio) {
-                    console.log('Cache hit for text chunk');
-                    return cachedAudio;
-                }
-                
-                let voiceConfig = {
-                    languageCode: voice.languageCodes[0],
-                    name: voice.name,
-                    ssmlGender: voice.ssmlGender
-                };
-                
-                let audioConfig = {
-                    audioEncoding: 'MP3',
-                    speakingRate: Math.max(0.25, Math.min(4.0, rate)),
-                    pitch: Math.max(-20.0, Math.min(20.0, pitch)),
-                };
-                
-                if (model === 'studio' && voice.name.includes('Studio')) {
-                    audioConfig.effectsProfileId = ['telephony-class-application'];
-                }
-                
-                const request = {
-                    input: { text: text.trim() },
-                    voice: voiceConfig,
-                    audioConfig: audioConfig
-                };
-                
-                try {
-                    let response;
-                    try {
-                        response = await fetch(`https://texttospeech.googleapis.com/v1/text:synthesize`, {
-                            method: 'POST',
-                            headers: {
-                                'X-Goog-Api-Key': cleanApiKey,
-                                'Content-Type': 'application/json',
-                                'Accept': 'application/json',
-                            },
-                            mode: 'cors',
-                            cache: 'no-cache',
-                            body: JSON.stringify(request)
-                        });
-                    } catch (headerError) {
-                        const url = `https://texttospeech.googleapis.com/v1/text:synthesize?key=${encodeURIComponent(cleanApiKey)}`;
-                        response = await fetch(url, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'Accept': 'application/json',
-                            },
-                            mode: 'cors',
-                            cache: 'no-cache',
-                            body: JSON.stringify(request)
-                        });
-                    }
-                    
-                    if (!response.ok) {
-                        let errorMessage = 'Failed to synthesize speech';
-                        let details = '';
-                        
-                        try {
-                            const errorData = await response.json();
-                            errorMessage = errorData.error?.message || errorMessage;
-                            details = errorData.error?.details ? ` (${JSON.stringify(errorData.error.details)})` : '';
-                        } catch (e) {
-                            details = ` (HTTP ${response.status}: ${response.statusText})`;
-                        }
-                        
-                        if (response.status === 400) {
-                            throw new Error('Invalid request parameters. Please check your text and settings.' + details);
-                        } else if (response.status === 403) {
-                            throw new Error('Access denied. Please check your API key and quota.' + details);
-                        } else if (response.status === 429) {
-                            throw new Error('Rate limit exceeded. Please wait a moment and try again.' + details);
-                        } else if (response.status >= 500) {
-                            throw new Error('Google Cloud service error. Please try again later.' + details);
-                        } else {
-                            throw new Error(errorMessage + details);
-                        }
-                    }
-                    
-                    const data = await response.json();
-                    
-                    if (!data || !data.audioContent) {
-                        throw new Error('Invalid response from Google TTS API - no audio content received');
-                    }
-                    
-                    // Calculate cost for this request
-                    const voiceType = getVoiceTypeAndPricing(voice.name);
-                    const cost = (text.length / 1000000) * voiceType.rate;
-                    
-                    // Add to budget tracking
-                    budgetManager.addSpending(cost, {
-                        characters: text.length,
-                        voice: voice.name,
-                        model: model
-                    });
-                    
-                    // Cache the result
-                    await ttsCache.set(text, voice, settings, data.audioContent, cost);
-                    
-                    return data.audioContent;
-                } catch (error) {
-                    console.error('Synthesis error:', error);
-                    throw error;
-                }
-            }
-            
-            // Play audio data
-            async function playAudioData(audioBase64) {
-                if (!audioContext) {
-                    initAudioContext();
-                }
-                
-                try {
-                    const audioData = Uint8Array.from(atob(audioBase64), c => c.charCodeAt(0));
-                    audioBuffer = await audioContext.decodeAudioData(audioData.buffer);
-                    
-                    audioSource = audioContext.createBufferSource();
-                    audioSource.buffer = audioBuffer;
-                    audioSource.connect(audioContext.destination);
-                    
-                    isPlaying = true;
-                    isPaused = false;
-                    updatePlaybackButtons();
-                    
-                    audioSource.start(0);
-                    startTime = audioContext.currentTime;
-                    
-                    startProgressTracking();
-                    
-                    audioSource.onended = () => {
-                        if (isPlaying && !isPaused) {
-                            stopPlayback();
-                        }
-                    };
-                } catch (error) {
-                    console.error('Error playing audio:', error);
-                    showToast('Failed to play audio: ' + error.message, 'error');
-                }
-            }
-            
-            function startProgressTracking() {
-                function updateProgress() {
-                    if (!isPlaying || isPaused || !audioSource) return;
-                    
-                    const currentTime = audioContext.currentTime - startTime;
-                    const duration = audioBuffer.duration;
-                    const progress = currentTime / duration;
-                    
-                    progressBar.style.width = (progress * 100) + '%';
-                    
-                    currentReadingPosition = Math.floor(progress * currentText.length);
-                    const readingProg = currentReadingPosition / currentText.length;
-                    readingProgress.style.width = (readingProg * 100) + '%';
-                    
-                    currentPositionMarker.style.left = (progress * 100) + '%';
-                    
-                    document.getElementById('currentTime').textContent = formatTime(Math.floor(currentTime));
-                    document.getElementById('totalTime').textContent = formatTime(Math.floor(duration));
-                    
-                    updateReadingHighlight();
-                    
-                    requestAnimationFrame(updateProgress);
-                }
-                
-                updateProgress();
-            }
-            
-            function updateReadingHighlight() {
-                documentContent.querySelectorAll('.reading-highlight').forEach(el => {
-                    el.classList.remove('reading-highlight');
-                });
-                
-                const paragraphs = documentContent.children;
-                let pos = 0;
-                
-                for (let i = 0; i < paragraphs.length; i++) {
-                    const p = paragraphs[i];
-                    const pText = p.textContent;
-                    
-                    if (pos <= currentReadingPosition && currentReadingPosition < pos + pText.length) {
-                        p.classList.add('reading-highlight');
-                        break;
-                    }
-                    pos += pText.length;
-                }
-            }
-            
-            function formatTime(seconds) {
-                const minutes = Math.floor(seconds / 60);
-                const secs = seconds % 60;
-                return `${minutes}:${secs.toString().padStart(2, '0')}`;
-            }
-            
-            // File Handling
-            uploadBtn.addEventListener('click', () => fileInput.click());
-            
-            fileInput.addEventListener('change', (e) => {
-                if (e.target.files.length > 0) {
-                    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();
-                
-                const pasteHandler = (e) => {
-                    e.preventDefault();
-                    const text = (e.clipboardData || window.clipboardData).getData('text');
-                    if (text) {
-                        setDocumentContent(text);
-                        document.removeEventListener('paste', pasteHandler);
-                    }
-                };
-                
-                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];
-                if (file) {
-                    handleFile(file);
-                }
-            });
-            
-            // Enhanced file processing
-            function handleFile(file) {
-                const maxSize = 50 * 1024 * 1024; // 50MB
-                if (file.size > maxSize) {
-                    showToast('File too large. Please upload a file smaller than 50MB.', 'error');
-                    return;
-                }
-                
-                const fileExtension = file.name.toLowerCase().split('.').pop();
-                
-                documentContent.innerHTML = `
-                    <div class="text-center py-8">
-                        <div class="loading-spinner mx-auto"></div>
-                        <p class="text-gray-500 mt-2">Processing ${file.name}...</p>
-                        <p class="text-xs text-gray-400 mt-1">File size: ${formatFileSize(file.size)}</p>
-                    </div>
-                `;
-                
-                try {
-                    switch (fileExtension) {
-                        case 'txt':
-                            readTextFile(file);
-                            break;
-                        case 'pdf':
-                            readPDFFile(file);
-                            break;
-                        case 'doc':
-                        case 'docx':
-                            readWordDocument(file);
-                            break;
-                        case 'rtf':
-                            readRTFFile(file);
-                            break;
-                        case 'md':
-                        case 'markdown':
-                            readMarkdownFile(file);
-                            break;
-                        case 'json':
-                            readJSONFile(file);
-                            break;
-                        case 'html':
-                        case 'htm':
-                            readHTMLFile(file);
-                            break;
-                        case 'xml':
-                            readXMLFile(file);
-                            break;
-                        case 'csv':
-                            readCSVFile(file);
-                            break;
-                        default:
-                            if (file.type.startsWith('text/')) {
-                                readTextFile(file);
-                            } else {
-                                throw new Error(`Unsupported file type: .${fileExtension}. Please upload a supported document format.`);
-                            }
-                    }
-                } catch (error) {
-                    console.error('Error processing file:', error);
-                    showToast('Error processing file: ' + error.message, 'error');
-                    documentContent.innerHTML = '<p class="text-gray-500 italic">Error loading document. Please try again.</p>';
-                }
-            }
-            
-            // Text file reader
-            function readTextFile(file) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    const text = e.target.result;
-                    setDocumentContent(text);
-                    showToast(`Loaded ${formatFileSize(file.size)} text file`, 'success');
-                };
-                reader.onerror = () => {
-                    showToast('Error reading text file', 'error');
-                };
-                reader.readAsText(file, 'UTF-8');
-            }
-            
-            // PDF file reader
-            function readPDFFile(file) {
-                if (typeof pdfjsLib === 'undefined') {
-                    showToast('PDF.js not loaded. Please refresh the page and try again.', 'error');
-                    documentContent.innerHTML = '<p class="text-gray-500 italic">PDF.js library not available.</p>';
-                    return;
-                }
-                
-                const fileURL = URL.createObjectURL(file);
-                
-                const loadingTask = pdfjsLib.getDocument({
-                    url: fileURL,
-                    verbosity: 0
-                });
-                
-                loadingTask.promise.then(pdf => {
-                    let text = '';
-                    const numPages = pdf.numPages;
-                    const pagePromises = [];
-                    
-                    let pagesProcessed = 0;
-                    
-                    for (let i = 1; i <= numPages; i++) {
-                        pagePromises.push(pdf.getPage(i).then(page => {
-                            return page.getTextContent().then(textContent => {
-                                pagesProcessed++;
-                                const progress = (pagesProcessed / numPages) * 100;
-                                documentContent.innerHTML = `
-                                    <div class="text-center py-8">
-                                        <div class="loading-spinner mx-auto"></div>
-                                        <p class="text-gray-500 mt-2">Processing PDF...</p>
-                                        <div class="w-32 bg-gray-200 rounded-full h-2 mx-auto mt-3">
-                                            <div class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: ${progress}%"></div>
-                                        </div>
-                                        <p class="text-xs text-gray-400 mt-2">${pagesProcessed}/${numPages} pages</p>
-                                    </div>
-                                `;
-                                
-                                return textContent.items.map(item => {
-                                    if (item.str) {
-                                        return item.str;
-                                    }
-                                    return '';
-                                }).join(' ');
-                            });
-                        }));
-                    }
-                    
-                    Promise.all(pagePromises).then(pagesText => {
-                        text = pagesText.join('\n\n');
-                        setDocumentContent(text);
-                        URL.revokeObjectURL(fileURL);
-                        showToast(`Loaded PDF with ${numPages} pages`, 'success');
-                    }).catch(error => {
-                        console.error('Error extracting PDF text:', error);
-                        showToast('Failed to extract text from PDF', 'error');
-                        URL.revokeObjectURL(fileURL);
-                    });
-                }).catch(error => {
-                    console.error('Error loading PDF:', error);
-                    showToast('Failed to load PDF file: ' + error.message, 'error');
-                    URL.revokeObjectURL(fileURL);
-                });
-            }
-            
-            // Word document reader
-            function readWordDocument(file) {
-                if (typeof mammoth === 'undefined') {
-                    showToast('Mammoth.js not loaded. Please refresh the page and try again.', 'error');
-                    documentContent.innerHTML = '<p class="text-gray-500 italic">Mammoth.js library not available for Word documents.</p>';
-                    return;
-                }
-                
-                const reader = new FileReader();
-                reader.onload = async (e) => {
-                    try {
-                        const options = {
-                            convertImage: mammoth.images.ignoreImages
-                        };
-                        
-                        const result = await mammoth.extractRawText({
-                            arrayBuffer: e.target.result
-                        }, options);
-                        
-                        if (result.value && result.value.trim()) {
-                            setDocumentContent(result.value);
-                            showToast(`Loaded Word document: ${file.name}`, 'success');
-                        } else {
-                            showToast('No text content found in Word document', 'error');
-                            documentContent.innerHTML = '<p class="text-gray-500 italic">No readable text found in document.</p>';
-                        }
-                        
-                        if (result.messages && result.messages.length > 0) {
-                            console.warn('Word processing warnings:', result.messages);
-                        }
-                    } catch (error) {
-                        console.error('Error reading Word document:', error);
-                        
-                        let errorMessage = 'Error reading Word document.';
-                        if (error.message.includes('Unsupported file format')) {
-                            errorMessage = 'Unsupported Word format. Please use .docx format.';
-                        } else if (error.message.includes('corrupted')) {
-                            errorMessage = 'Document appears to be corrupted. Please try saving it again.';
-                        }
-                        
-                        showToast(errorMessage, 'error');
-                        documentContent.innerHTML = '<p class="text-gray-500 italic">Error loading Word document. Please try a different format.</p>';
-                    }
-                };
-                
-                reader.onerror = () => {
-                    showToast('Error reading file', 'error');
-                };
-                
-                reader.readAsArrayBuffer(file);
-            }
-            
-            // RTF file reader
-            function readRTFFile(file) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    let rtfText = e.target.result;
-                    
-                    // Basic RTF to plain text conversion
-                    rtfText = rtfText.replace(/\\[a-z]+[0-9]*\s?/gi, '');
-                    rtfText = rtfText.replace(/[{}]/g, '');
-                    rtfText = rtfText.replace(/\\\\/g, '\\');
-                    rtfText = rtfText.replace(/\\'/g, "'");
-                    rtfText = rtfText.replace(/\\\n/g, '\n');
-                    rtfText = rtfText.replace(/\s+/g, ' ');
-                    rtfText = rtfText.trim();
-                    
-                    setDocumentContent(rtfText);
-                };
-                reader.onerror = () => {
-                    showToast('Error reading RTF file', 'error');
-                };
-                reader.readAsText(file);
-            }
-            
-            // Markdown file reader
-            function readMarkdownFile(file) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    let text = e.target.result;
-                    
-                    // Convert basic Markdown to plain text
-                    text = text.replace(/^#{1,6}\s+/gm, ''); // Headers
-                    text = text.replace(/\*\*(.*?)\*\*/g, '$1'); // Bold
-                    text = text.replace(/\*(.*?)\*/g, '$1'); // Italic
-                    text = text.replace(/_(.*?)_/g, '$1'); // Italic underscore
-                    text = text.replace(/`(.*?)`/g, '$1'); // Inline code
-                    text = text.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1'); // Links
-                    text = text.replace(/!\[([^\]]*)\]\([^)]+\)/g, ''); // Images
-                    text = text.replace(/^>\s+/gm, ''); // Blockquotes
-                    text = text.replace(/^[\s]*-\s+/gm, '• '); // Unordered lists
-                    text = text.replace(/^[\s]*\d+\.\s+/gm, ''); // Ordered lists
-                    text = text.replace(/---+/g, ''); // Horizontal rules
-                    text = text.replace(/\n{3,}/g, '\n\n'); // Multiple newlines
-                    
-                    setDocumentContent(text);
-                };
-                reader.onerror = () => {
-                    showToast('Error reading Markdown file', 'error');
-                };
-                reader.readAsText(file);
-            }
-            
-            // JSON file reader
-            function readJSONFile(file) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    try {
-                        const jsonData = JSON.parse(e.target.result);
-                        
-                        let text = '';
-                        
-                        function jsonToText(obj, prefix = '') {
-                            for (const [key, value] of Object.entries(obj)) {
-                                if (typeof value === 'object' && value !== null) {
-                                    text += `${prefix}${key}:\n`;
-                                    jsonToText(value, prefix + '  ');
-                                } else {
-                                    text += `${prefix}${key}: ${value}\n`;
-                                }
-                            }
-                        }
-                        
-                        jsonToText(jsonData);
-                        setDocumentContent(text);
-                    } catch (error) {
-                        showToast('Invalid JSON file', 'error');
-                    }
-                };
-                reader.onerror = () => {
-                    showToast('Error reading JSON file', 'error');
-                };
-                reader.readAsText(file);
-            }
-            
-            // HTML file reader
-            function readHTMLFile(file) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    const htmlContent = e.target.result;
-                    
-                    const tempDiv = document.createElement('div');
-                    tempDiv.innerHTML = htmlContent;
-                    
-                    const scripts = tempDiv.querySelectorAll('script, style');
-                    scripts.forEach(script => script.remove());
-                    
-                    let text = tempDiv.textContent || tempDiv.innerText || '';
-                    
-                    text = text.replace(/\s+/g, ' ');
-                    text = text.replace(/\n\s*\n/g, '\n\n');
-                    text = text.trim();
-                    
-                    setDocumentContent(text);
-                };
-                reader.onerror = () => {
-                    showToast('Error reading HTML file', 'error');
-                };
-                reader.readAsText(file);
-            }
-            
-            // XML file reader
-            function readXMLFile(file) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    try {
-                        const xmlContent = e.target.result;
-                        const parser = new DOMParser();
-                        const xmlDoc = parser.parseFromString(xmlContent, 'text/xml');
-                        
-                        let text = '';
-                        
-                        function extractText(node) {
-                            if (node.nodeType === Node.TEXT_NODE) {
-                                text += node.textContent + ' ';
-                            } else if (node.nodeType === Node.ELEMENT_NODE) {
-                                for (const child of node.childNodes) {
-                                    extractText(child);
-                                }
-                            }
-                        }
-                        
-                        extractText(xmlDoc.documentElement);
-                        
-                        text = text.replace(/\s+/g, ' ');
-                        text = text.trim();
-                        
-                        setDocumentContent(text);
-                    } catch (error) {
-                        showToast('Error parsing XML file', 'error');
-                    }
-                };
-                reader.onerror = () => {
-                    showToast('Error reading XML file', 'error');
-                };
-                reader.readAsText(file);
-            }
-            
-            // CSV file reader
-            function readCSVFile(file) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    const csvContent = e.target.result;
-                    
-                    const lines = csvContent.split('\n').filter(line => line.trim());
-                    const headers = lines[0].split(',').map(h => h.trim().replace(/"/g, ''));
-                    
-                    let text = `CSV Data Summary:\n\n`;
-                    text += `Headers: ${headers.join(', ')}\n\n`;
-                    text += `Total rows: ${lines.length - 1}\n\n`;
-                    
-                    if (lines.length > 1) {
-                        text += 'First few rows:\n';
-                        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);
-                    showToast('CSV file loaded. Showing data summary for TTS.', 'success');
-                };
-                reader.onerror = () => {
-                    showToast('Error reading CSV file', 'error');
-                };
-                reader.readAsText(file);
-            }
-            
-            // 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');
-                }
-                
-                updateCostEstimator();
-            }
-            
-            // Playback controls
-            playBtn.addEventListener('click', async () => {
-                if (!selectedVoice) {
-                    showToast('No voice available. Please check your API key and internet connection.', 'error');
-                    return;
-                }
-                
-                if (!currentText.trim()) {
-                    showToast('Please add some text to read', 'error');
-                    return;
-                }
-                
-                if (isPaused) {
-                    resumePlayback();
-                } else {
-                    await startPlayback();
-                }
-            });
-            
-            pauseBtn.addEventListener('click', () => {
-                if (isPlaying && !isPaused) {
-                    pausePlayback();
-                }
-            });
-            
-            stopBtn.addEventListener('click', () => {
-                stopPlayback();
-            });
-            
-            // Playback functions
-            async function startPlayback() {
+                
                 try {
-                    isPlaying = true;
-                    isPaused = false;
-                    updatePlaybackButtons();
-                    
-                    showToast('Generating speech...', 'success', 1000);
-                    
-                    const chunks = splitTextIntoChunks(currentText, MAX_CHUNK_SIZE);
+                    const languageCode = languageSelect.value;
+                    const response = await fetch(`https://texttospeech.googleapis.com/v1/voices?languageCode=${languageCode}`, {
+                        method: 'GET',
+                        headers: {
+                            'X-Goog-Api-Key': apiKey.trim(),
+                            'Accept': 'application/json',
+                        },
+                        mode: 'cors',
+                        cache: 'no-cache'
+                    });
                     
-                    if (chunks.length > 1) {
-                        showToast(`Processing ${chunks.length} chunks...`, 'success', 2000);
+                    if (!response.ok) {
+                        throw new Error(`API error (${response.status}): Failed to load voices`);
                     }
                     
-                    let allAudioData = [];
+                    const data = await response.json();
                     
-                    for (let i = 0; i < chunks.length; i++) {
-                        if (!isPlaying || isPaused) break;
-                        
-                        const audioData = await synthesizeSpeech(
-                            chunks[i],
-                            selectedVoice,
-                            parseFloat(rateSelect.value),
-                            parseFloat(pitchSelect.value),
-                            modelSelect.value
-                        );
-                        
-                        allAudioData.push(audioData);
+                    if (!data || !data.voices) {
+                        throw new Error('Invalid response from Google TTS API - no voices returned');
                     }
                     
-                    if (allAudioData.length > 0 && isPlaying) {
-                        await combineAndPlayAudio(allAudioData);
+                    // 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) {
+                        voiceGrid.innerHTML = `
+                            <div class="col-span-full text-center py-8">
+                                <i class="fas fa-microphone-slash text-gray-400 text-2xl"></i>
+                                <p class="text-gray-500 mt-2">No high-quality voices available for selected language</p>
+                            </div>
+                        `;
+                        return;
                     }
                     
-                } catch (error) {
-                    console.error('Error during playback:', error);
-                    showToast('Failed to play text: ' + error.message, 'error');
-                    stopPlayback();
-                }
-            }
-            
-            async function combineAndPlayAudio(audioDataArray) {
-                try {
-                    const firstAudioData = audioDataArray[0];
-                    
-                    const byteCharacters = atob(firstAudioData);
-                    const byteNumbers = new Array(byteCharacters.length);
-                    for (let i = 0; i < byteCharacters.length; i++) {
-                        byteNumbers[i] = byteCharacters.charCodeAt(i);
-                    }
-                    const byteArray = new Uint8Array(byteNumbers);
-                    currentAudioBlob = new Blob([byteArray], { type: 'audio/mpeg' });
+                    // Create voice dropdown selector
+                    createVoiceDropdown(naturalVoices);
                     
-                    downloadBtn.disabled = false;
-                    saveToLibraryBtn.disabled = false;
+                    // Show success message
+                    voiceGrid.innerHTML = `
+                        <div class="col-span-full text-center py-8">
+                            <i class="fas fa-check-circle text-green-500 text-2xl"></i>
+                            <p class="text-gray-500 mt-2">${naturalVoices.length} voices loaded successfully</p>
+                            <p class="text-gray-400 text-sm mt-1">Voice can be selected from the dropdown above</p>
+                        </div>
+                    `;
                     
-                    await playAudioData(firstAudioData);
+                    // Automatically select the first available voice based on current model
+                    const currentModel = modelSelect.value || 'wavenet';
+                    autoSelectVoiceForModel(currentModel);
+                    updateCostEstimator();
                     
                 } catch (error) {
-                    console.error('Error combining audio:', error);
-                    showToast('Failed to process audio', 'error');
-                }
-            }
-            
-            function pausePlayback() {
-                if (audioSource && isPlaying && !isPaused) {
-                    pauseTime = audioContext.currentTime;
-                    audioSource.stop();
-                    isPaused = true;
-                    updatePlaybackButtons();
-                }
-            }
-            
-            function resumePlayback() {
-                if (isPaused && audioBuffer) {
-                    const pausedDuration = pauseTime - startTime;
-                    
-                    audioSource = audioContext.createBufferSource();
-                    audioSource.buffer = audioBuffer;
-                    audioSource.connect(audioContext.destination);
-                    
-                    audioSource.start(0, pausedDuration);
-                    startTime = audioContext.currentTime - pausedDuration;
-                    isPaused = false;
-                    isPlaying = true;
-                    updatePlaybackButtons();
+                    console.error('Error loading voices:', error);
                     
-                    startProgressTracking();
+                    voiceGrid.innerHTML = `
+                        <div class="col-span-full text-center py-8">
+                            <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 max-w-md mx-auto">${error.message}</p>
+                            <button id="retryVoices" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded text-sm">
+                                <i class="fas fa-sync-alt mr-1"></i> Retry
+                            </button>
+                        </div>
+                    `;
                     
-                    audioSource.onended = () => {
-                        if (isPlaying && !isPaused) {
-                            stopPlayback();
-                        }
-                    };
-                }
-            }
-            
-            function stopPlayback() {
-                if (audioSource && isPlaying) {
-                    audioSource.stop();
-                }
-                
-                isPlaying = false;
-                isPaused = false;
-                startTime = 0;
-                pauseTime = 0;
-                currentReadingPosition = 0;
-                updatePlaybackButtons();
-                updateProgress(0);
-                
-                documentContent.querySelectorAll('.reading-highlight').forEach(el => {
-                    el.classList.remove('reading-highlight');
-                });
-            }
-            
-            function updatePlaybackButtons() {
-                playBtn.disabled = false;
-                pauseBtn.disabled = !isPlaying || isPaused;
-                stopBtn.disabled = !isPlaying;
-                downloadBtn.disabled = !currentAudioBlob;
-                saveToLibraryBtn.disabled = !currentAudioBlob;
-                
-                if (isPlaying && !isPaused) {
-                    playBtn.innerHTML = '<i class="fas fa-pause"></i>';
-                } else {
-                    playBtn.innerHTML = '<i class="fas fa-play"></i>';
+                    document.getElementById('retryVoices')?.addEventListener('click', loadVoices);
                 }
             }
             
-            function updateProgress(progress) {
-                progressBar.style.width = (progress * 100) + '%';
+            // Create voice dropdown selector
+            function createVoiceDropdown(voices) {
+                // Clear existing dropdown if any
+                voiceSelectionContainer.innerHTML = '';
                 
-                const currentSeconds = Math.floor(progress * estimatedDuration);
-                const totalSeconds = Math.floor(estimatedDuration);
-                
-                currentTime.textContent = formatTime(currentSeconds);
-                totalTime.textContent = formatTime(totalSeconds);
-            }
-            
-            function splitTextIntoChunks(text, maxChunkSize) {
-                const sentences = text.split(/(?<=[.!?])\s+/);
-                const chunks = [];
-                let currentChunk = '';
+                // Create voice selector dropdown
+                const voiceDropdownContainer = document.createElement('div');
+                voiceDropdownContainer.className = 'mb-4';
+                voiceDropdownContainer.innerHTML = `
+                    <label for="voiceSelect" class="block text-sm font-medium text-gray-700 mb-1">Voice Selection</label>
+                    <select id="voiceSelect" 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="">Select a voice...</option>
+                    </select>
+                `;
                 
-                for (const sentence of sentences) {
-                    if (currentChunk.length + sentence.length <= maxChunkSize) {
-                        currentChunk += (currentChunk ? ' ' : '') + sentence;
-                    } else {
-                        if (currentChunk) {
-                            chunks.push(currentChunk.trim());
-                        }
-                        currentChunk = sentence;
-                    }
-                }
+                voiceSelectionContainer.appendChild(voiceDropdownContainer);
                 
-                if (currentChunk) {
-                    chunks.push(currentChunk.trim());
-                }
+                const voiceSelect = document.getElementById('voiceSelect');
                 
-                return chunks;
-            }
-            
-            // Event listeners
-            refreshVoicesBtn.addEventListener('click', loadVoices);
-            languageSelect.addEventListener('change', loadVoices);
-            
-            // Initialize the application
-            init();
-        });
-    </script>
-</body>
-</html>rounded">
-                                        <i class="fas fa-play mr-1"></i> Sample
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="ml-2 text-blue-500 hidden selected-icon">
-                                <i class="fas fa-check-circle"></i>
-                            </div>
-                        </div>
-                        ${qualityBadge}
-                    `;
-                    
-                    voiceCard.addEventListener('click', () => {
-                        document.querySelectorAll('.voice-card').forEach(card => {
-                            card.classList.remove('selected');
-                            card.querySelector('.selected-icon').classList.add('hidden');
-                        });
-                        
-                        voiceCard.classList.add('selected');
-                        voiceCard.querySelector('.selected-icon').classList.remove('hidden');
-                        selectedVoice = voice;
-                        
-                        updateCostEstimator();
-                    });
-                    
-                    const playSampleBtn = voiceCard.querySelector('.play-sample');
-                    playSampleBtn.addEventListener('click', (e) => {
-                        e.stopPropagation();
-                        playSample(voice, "Hello, this is a sample of my voice. I can read your documents with natural sounding speech.");
-                    });
-                    
-                    voiceGrid.appendChild(voiceCard);
+                // Populate dropdown with voices
+                voices.forEach(voice => {
+                    const option = document.createElement('option');
+                    option.value = voice.name;
+                    option.textContent = `${voice.name} (${voice.ssmlGender})`;
+                    voiceSelect.appendChild(option);
                 });
                 
-                if (naturalVoices.length > 0) {
-                    const firstCard = voiceGrid.querySelector('.voice-card');
-                    if (firstCard) {
-                        firstCard.click();
+                // Add event listener for voice selection
+                voiceSelect.addEventListener('change', (e) => {
+                    const selectedVoiceName = e.target.value;
+                    if (selectedVoiceName) {
+                        selectedVoice = voices.find(voice => voice.name === selectedVoiceName);
                         updateCostEstimator();
+                        showToast(`Voice changed to ${selectedVoice.name}`, 'success', 1500);
                     }
-                }
-            }
-            
-            // Play a voice sample
-            async function playSample(voice, text) {
-                if (!apiKey) {
-                    showToast('Please enter your API key first', 'error');
-                    return;
-                }
-                
-                if (isPlaying) {
-                    stopPlayback();
-                }
+                });
                 
-                try {
-                    const audioData = await synthesizeSpeech(text, voice, parseFloat(rateSelect.value), parseFloat(pitchSelect.value), modelSelect.value);
-                    playAudioData(audioData);
-                } catch (error) {
-                    console.error('Error playing sample:', error);
-                    showToast('Failed to play sample: ' + error.message, 'error');
+                // Auto-select first voice
+                if (voices.length > 0) {
+                    voiceSelect.value = voices[0].name;
+                    selectedVoice = voices[0];
+                    updateCostEstimator();
                 }
             }
             
@@ -1921,27 +984,56 @@
                 };
                 
                 try {
-                    const response = await fetch(`https://texttospeech.googleapis.com/v1/text:synthesize`, {
-                        method: 'POST',
-                        headers: {
-                            'X-Goog-Api-Key': cleanApiKey,
-                            'Content-Type': 'application/json',
-                            'Accept': 'application/json',
-                        },
-                        mode: 'cors',
-                        cache: 'no-cache',
-                        body: JSON.stringify(request)
-                    });
+                    let response;
+                    try {
+                        response = await fetch(`https://texttospeech.googleapis.com/v1/text:synthesize`, {
+                            method: 'POST',
+                            headers: {
+                                'X-Goog-Api-Key': cleanApiKey,
+                                'Content-Type': 'application/json',
+                                'Accept': 'application/json',
+                            },
+                            mode: 'cors',
+                            cache: 'no-cache',
+                            body: JSON.stringify(request)
+                        });
+                    } catch (headerError) {
+                        const url = `https://texttospeech.googleapis.com/v1/text:synthesize?key=${encodeURIComponent(cleanApiKey)}`;
+                        response = await fetch(url, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Accept': 'application/json',
+                            },
+                            mode: 'cors',
+                            cache: 'no-cache',
+                            body: JSON.stringify(request)
+                        });
+                    }
                     
                     if (!response.ok) {
                         let errorMessage = 'Failed to synthesize speech';
+                        let details = '';
+                        
                         try {
                             const errorData = await response.json();
                             errorMessage = errorData.error?.message || errorMessage;
+                            details = errorData.error?.details ? ` (${JSON.stringify(errorData.error.details)})` : '';
                         } catch (e) {
-                            errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+                            details = ` (HTTP ${response.status}: ${response.statusText})`;
+                        }
+                        
+                        if (response.status === 400) {
+                            throw new Error('Invalid request parameters. Please check your text and settings.' + details);
+                        } else if (response.status === 403) {
+                            throw new Error('Access denied. Please check your API key and quota.' + details);
+                        } else if (response.status === 429) {
+                            throw new Error('Rate limit exceeded. Please wait a moment and try again.' + details);
+                        } else if (response.status >= 500) {
+                            throw new Error('Google Cloud service error. Please try again later.' + details);
+                        } else {
+                            throw new Error(errorMessage + details);
                         }
-                        throw new Error(errorMessage);
                     }
                     
                     const data = await response.json();
@@ -2490,7 +1582,7 @@
             // Playback controls
             playBtn.addEventListener('click', async () => {
                 if (!selectedVoice) {
-                    showToast('Please select a voice first', 'error');
+                    showToast('Please select a voice from the dropdown', 'error');
                     return;
                 }
                 
@@ -2582,7 +1674,6 @@
             
             function pausePlayback() {
                 if (audioSource && isPlaying && !isPaused) {
-                    audioCon
                     pauseTime = audioContext.currentTime;
                     audioSource.stop();
                     isPaused = true;
@@ -2633,7 +1724,7 @@
             }
             
             function updatePlaybackButtons() {
-                playBtn.disabled = isPlaying && !isPaused;
+                playBtn.disabled = false;
                 pauseBtn.disabled = !isPlaying || isPaused;
                 stopBtn.disabled = !isPlaying;
                 downloadBtn.disabled = !currentAudioBlob;