Update index.html

index.html

@@ -99,9 +99,25 @@
                         <i class="fas fa-save mr-2"></i> Save Key
                     </button>
                 </div>
-                <p class="text-xs text-blue-600 mt-2">
-                    <i class="fas fa-info-circle mr-1"></i> Your API key is stored locally and never sent to our servers.
-                </p>
+                <div class="mt-3 text-xs text-blue-600">
+                    <p class="flex items-center mb-1">
+                        <i class="fas fa-info-circle mr-1"></i> Your API key is stored locally and never sent to our servers.
+                    </p>
+                    <details class="mt-2">
+                        <summary class="cursor-pointer hover:text-blue-800">Need help getting an API key? (Click to expand)</summary>
+                        <div class="mt-2 text-xs text-gray-600 bg-white p-3 rounded border">
+                            <p class="font-medium">How to get your Google Cloud API key:</p>
+                            <ol class="mt-1 list-decimal list-inside space-y-1">
+                                <li>Go to <a href="https://console.cloud.google.com" target="_blank" class="text-blue-600 hover:underline">Google Cloud Console</a></li>
+                                <li>Create a new project or select existing one</li>
+                                <li>Enable the "Cloud Text-to-Speech API"</li>
+                                <li>Go to "Credentials" → "Create Credentials" → "API Key"</li>
+                                <li>Copy the generated API key and paste it above</li>
+                                <li>Optionally, restrict the key to Text-to-Speech API for security</li>
+                            </ol>
+                        </div>
+                    </details>
+                </div>
             </div>
 
             <!-- Input Section -->
@@ -321,13 +337,47 @@
             document.head.appendChild(style);
             
             // API Key Management
-            saveKeyBtn.addEventListener('click', () => {
+            saveKeyBtn.addEventListener('click', async () => {
                 const key = apiKeyInput.value.trim();
                 if (key) {
-                    apiKey = key;
-                    localStorage.setItem('googleTTSApiKey', key);
-                    loadVoices();
-                    showToast('API key saved successfully', 'success');
+                    // Show loading state
+                    saveKeyBtn.innerHTML = '<div class="loading-spinner inline-block w-4 h-4 mr-2"></div>Validating...';
+                    saveKeyBtn.disabled = true;
+                    
+                    try {
+                        // Validate API key by making a simple request
+                        const testUrl = `https://texttospeech.googleapis.com/v1/voices?key=${encodeURIComponent(key)}&languageCode=en-US&pageSize=1`;
+                        const response = await fetch(testUrl, {
+                            method: 'GET',
+                            headers: {
+                                'Accept': 'application/json',
+                            },
+                            mode: 'cors',
+                            cache: 'no-cache'
+                        });
+                        
+                        if (response.ok) {
+                            apiKey = key;
+                            localStorage.setItem('googleTTSApiKey', key);
+                            showToast('API key validated and saved successfully', 'success');
+                            loadVoices();
+                        } else {
+                            let errorMessage = 'Invalid API key';
+                            if (response.status === 403) {
+                                errorMessage = 'API key invalid or Text-to-Speech API not enabled';
+                            } else if (response.status === 400) {
+                                errorMessage = 'Invalid API key format';
+                            }
+                            showToast(errorMessage, 'error');
+                        }
+                    } catch (error) {
+                        console.error('API key validation error:', error);
+                        showToast('Failed to validate API key. Please check your internet connection.', 'error');
+                    } finally {
+                        // Reset button state
+                        saveKeyBtn.innerHTML = '<i class="fas fa-save mr-2"></i> Save Key';
+                        saveKeyBtn.disabled = false;
+                    }
                 } else {
                     showToast('Please enter a valid API key', 'error');
                 }
@@ -355,29 +405,81 @@
                 
                 try {
                     const languageCode = languageSelect.value;
-                    const response = await fetch(`https://texttospeech.googleapis.com/v1/voices?key=${apiKey}&languageCode=${languageCode}`);
                     
+                    // Use different API endpoint format to avoid CORS issues
+                    const url = `https://texttospeech.googleapis.com/v1/voices?key=${encodeURIComponent(apiKey)}&languageCode=${languageCode}`;
+                    
+                    const response = await fetch(url, {
+                        method: 'GET',
+                        headers: {
+                            'Accept': 'application/json',
+                            'Content-Type': 'application/json',
+                        },
+                        mode: 'cors',
+                        cache: 'no-cache'
+                    });
+                    
+                    // Better error handling
                     if (!response.ok) {
+                        let errorMessage = 'Unknown error occurred';
+                        try {
+                            const errorData = await response.json();
+                            errorMessage = errorData.error?.message || errorMessage;
+                        } catch (e) {
+                            // If response is not JSON, use status text
+                            errorMessage = response.statusText || `HTTP ${response.status}`;
+                        }
+                        
                         if (response.status === 403) {
-                            throw new Error('Invalid API key or Text-to-Speech API not enabled');
+                            throw new Error('Invalid API key or Text-to-Speech API not enabled. Please check your Google Cloud console.');
                         } else if (response.status === 400) {
-                            throw new Error('Invalid request. Check your API key.');
+                            throw new Error('Bad request. Please verify your API key format is correct.');
+                        } else if (response.status === 401) {
+                            throw new Error('Unauthorized. Please check your API key permissions.');
+                        } else if (response.status === 404) {
+                            throw new Error('API endpoint not found. Please check your API key validity.');
+                        } else if (response.status >= 500) {
+                            throw new Error('Google Cloud service error. Please try again later.');
                         } else {
-                            throw new Error(`API error: ${response.status} ${response.statusText}`);
+                            throw new Error(`API error (${response.status}): ${errorMessage}`);
                         }
                     }
                     
                     const data = await response.json();
-                    renderVoiceOptions(data.voices || []);
+                    
+                    if (!data || !data.voices) {
+                        throw new Error('Invalid response from Google TTS API');
+                    }
+                    
+                    renderVoiceOptions(data.voices);
                 } catch (error) {
                     console.error('Error loading voices:', error);
+                    
+                    let errorDisplay = error.message;
+                    let troubleshootingTips = '';
+                    
+                    if (error.message.includes('Invalid API key')) {
+                        troubleshootingTips = `
+                            <div class="mt-3 text-xs text-gray-600">
+                                <p class="font-medium">Troubleshooting tips:</p>
+                                <ul class="mt-1 list-disc list-inside space-y-1">
+                                    <li>Go to Google Cloud Console</li>
+                                    <li>Enable the Text-to-Speech API</li>
+                                    <li>Create API credentials</li>
+                                    <li>Copy the API key exactly</li>
+                                </ul>
+                            </div>
+                        `;
+                    }
+                    
                     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">${error.message}</p>
-                            <button id="retryVoices" class="mt-2 text-blue-500 hover:text-blue-700 text-sm">
-                                <i class="fas fa-retry mr-1"></i> Retry
+                            <p class="text-red-500 text-sm mt-1">${errorDisplay}</p>
+                            ${troubleshootingTips}
+                            <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>
                     `;
@@ -511,36 +613,83 @@
                     throw new Error('API key not provided');
                 }
                 
-                const request = {
-                    input: { text: text },
-                    voice: {
-                        languageCode: voice.languageCodes[0],
-                        name: voice.name,
-                        ssmlGender: voice.ssmlGender
-                    },
-                    audioConfig: {
-                        audioEncoding: 'MP3',
-                        speakingRate: rate,
-                        pitch: pitch,
-                        effectsProfileId: model === 'studio' ? ['telephony-class-application'] : undefined
-                    }
+                if (!text || !text.trim()) {
+                    throw new Error('No text provided for synthesis');
+                }
+                
+                // Prepare voice configuration
+                let voiceConfig = {
+                    languageCode: voice.languageCodes[0],
+                    name: voice.name,
+                    ssmlGender: voice.ssmlGender
                 };
                 
-                const response = await fetch(`https://texttospeech.googleapis.com/v1/text:synthesize?key=${apiKey}`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(request)
-                });
+                // Prepare audio configuration
+                let audioConfig = {
+                    audioEncoding: 'MP3',
+                    speakingRate: Math.max(0.25, Math.min(4.0, rate)), // Clamp between 0.25 and 4.0
+                    pitch: Math.max(-20.0, Math.min(20.0, pitch)), // Clamp between -20 and 20
+                };
                 
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.error?.message || `HTTP error! status: ${response.status}`);
+                // Add effects profile for studio quality
+                if (model === 'studio' && voice.name.includes('Studio')) {
+                    audioConfig.effectsProfileId = ['telephony-class-application'];
                 }
                 
-                const data = await response.json();
-                return data.audioContent;
+                const request = {
+                    input: { text: text.trim() },
+                    voice: voiceConfig,
+                    audioConfig: audioConfig
+                };
+                
+                try {
+                    const url = `https://texttospeech.googleapis.com/v1/text:synthesize?key=${encodeURIComponent(apiKey)}`;
+                    
+                    const 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';
+                        
+                        try {
+                            const errorData = await response.json();
+                            errorMessage = errorData.error?.message || errorMessage;
+                        } catch (e) {
+                            errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+                        }
+                        
+                        if (response.status === 400) {
+                            throw new Error('Invalid request parameters. Please check your text and settings.');
+                        } else if (response.status === 403) {
+                            throw new Error('Access denied. Please check your API key and quota.');
+                        } else if (response.status === 429) {
+                            throw new Error('Rate limit exceeded. Please wait a moment and try again.');
+                        } else if (response.status >= 500) {
+                            throw new Error('Google Cloud service error. Please try again later.');
+                        } else {
+                            throw new Error(errorMessage);
+                        }
+                    }
+                    
+                    const data = await response.json();
+                    
+                    if (!data || !data.audioContent) {
+                        throw new Error('Invalid response from Google TTS API');
+                    }
+                    
+                    return data.audioContent;
+                } catch (error) {
+                    console.error('Synthesis error:', error);
+                    throw error;
+                }
             }
             
             // Play audio data