Update index.html

index.html

@@ -346,15 +346,30 @@
                     
                     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'
-                        });
+                        // Method 1: Try with header approach first
+                        let response;
+                        try {
+                            response = await fetch(`https://texttospeech.googleapis.com/v1/voices?languageCode=en-US&pageSize=1`, {
+                                method: 'GET',
+                                headers: {
+                                    'X-Goog-Api-Key': key,
+                                    'Accept': 'application/json',
+                                },
+                                mode: 'cors',
+                                cache: 'no-cache'
+                            });
+                        } catch (headerError) {
+                            // Method 2: Fallback to URL parameter
+                            const testUrl = `https://texttospeech.googleapis.com/v1/voices?key=${encodeURIComponent(key)}&languageCode=en-US&pageSize=1`;
+                            response = await fetch(testUrl, {
+                                method: 'GET',
+                                headers: {
+                                    'Accept': 'application/json',
+                                },
+                                mode: 'cors',
+                                cache: 'no-cache'
+                            });
+                        }
                         
                         if (response.ok) {
                             apiKey = key;
@@ -362,17 +377,40 @@
                             showToast('API key validated and saved successfully', 'success');
                             loadVoices();
                         } else {
-                            let errorMessage = 'Invalid API key';
+                            let errorMessage = 'API key validation failed';
+                            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})`;
+                            }
+                            
                             if (response.status === 403) {
-                                errorMessage = 'API key invalid or Text-to-Speech API not enabled';
+                                errorMessage = 'Access denied. Check: 1) API key validity, 2) Text-to-Speech API enabled, 3) Billing enabled, 4) Key restrictions';
                             } else if (response.status === 400) {
-                                errorMessage = 'Invalid API key format';
+                                errorMessage = 'Bad request. API key format might be incorrect';
+                            } else if (response.status === 429) {
+                                errorMessage = 'Too many requests. Please wait a moment';
                             }
-                            showToast(errorMessage, 'error');
+                            
+                            showToast(errorMessage + details, 'error', 5000);
                         }
                     } catch (error) {
                         console.error('API key validation error:', error);
-                        showToast('Failed to validate API key. Please check your internet connection.', 'error');
+                        let errorMessage = 'Failed to validate API key. ';
+                        
+                        if (error.message.includes('Failed to fetch')) {
+                            errorMessage += 'Please check your internet connection.';
+                        } else if (error.message.includes('CORS')) {
+                            errorMessage += 'CORS policy issue. Try with a different browser or disable extensions.';
+                        } else {
+                            errorMessage += error.message;
+                        }
+                        
+                        showToast(errorMessage, 'error', 5000);
                     } finally {
                         // Reset button state
                         saveKeyBtn.innerHTML = '<i class="fas fa-save mr-2"></i> Save Key';
@@ -406,38 +444,59 @@
                 try {
                     const languageCode = languageSelect.value;
                     
-                    // Use different API endpoint format to avoid CORS issues
-                    const url = `https://texttospeech.googleapis.com/v1/voices?key=${encodeURIComponent(apiKey)}&languageCode=${languageCode}`;
+                    // Clean and validate API key
+                    const cleanApiKey = apiKey.trim();
                     
-                    const response = await fetch(url, {
-                        method: 'GET',
-                        headers: {
-                            'Accept': 'application/json',
-                            'Content-Type': 'application/json',
-                        },
-                        mode: 'cors',
-                        cache: 'no-cache'
-                    });
+                    // Method 1: Try with API key in header (preferred)
+                    let response;
+                    try {
+                        response = await fetch(`https://texttospeech.googleapis.com/v1/voices?languageCode=${languageCode}`, {
+                            method: 'GET',
+                            headers: {
+                                'X-Goog-Api-Key': cleanApiKey,
+                                'Accept': 'application/json',
+                            },
+                            mode: 'cors',
+                            cache: 'no-cache'
+                        });
+                    } catch (headerError) {
+                        console.log('Header method failed, trying URL parameter method');
+                        
+                        // Method 2: Fallback to API key in URL
+                        const url = `https://texttospeech.googleapis.com/v1/voices?key=${encodeURIComponent(cleanApiKey)}&languageCode=${languageCode}`;
+                        response = await fetch(url, {
+                            method: 'GET',
+                            headers: {
+                                'Accept': 'application/json',
+                            },
+                            mode: 'cors',
+                            cache: 'no-cache'
+                        });
+                    }
                     
                     // Better error handling
                     if (!response.ok) {
                         let errorMessage = 'Unknown error occurred';
+                        let detailedError = '';
+                        
                         try {
                             const errorData = await response.json();
                             errorMessage = errorData.error?.message || errorMessage;
+                            detailedError = errorData.error?.details ? JSON.stringify(errorData.error.details) : '';
                         } 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. Please check your Google Cloud console.');
+                            throw new Error('Access denied. Please check: 1) API key is valid, 2) Text-to-Speech API is enabled, 3) Billing is enabled, 4) API key restrictions (if any) allow this domain.');
                         } else if (response.status === 400) {
-                            throw new Error('Bad request. Please verify your API key format is correct.');
+                            throw new Error(`Bad request. The API key format might be incorrect. Details: ${detailedError || 'Please verify your API key is copied correctly with no extra spaces.'}`);
                         } else if (response.status === 401) {
-                            throw new Error('Unauthorized. Please check your API key permissions.');
+                            throw new Error('Unauthorized. The API key is invalid or expired.');
                         } else if (response.status === 404) {
-                            throw new Error('API endpoint not found. Please check your API key validity.');
+                            throw new Error('API endpoint not found. Please verify the Text-to-Speech API is enabled.');
+                        } else if (response.status === 429) {
+                            throw new Error('Too many requests. Please wait a moment and try again.');
                         } else if (response.status >= 500) {
                             throw new Error('Google Cloud service error. Please try again later.');
                         } else {
@@ -448,35 +507,33 @@
                     const data = await response.json();
                     
                     if (!data || !data.voices) {
-                        throw new Error('Invalid response from Google TTS API');
+                        throw new Error('Invalid response from Google TTS API - no voices returned');
                     }
                     
                     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>
-                        `;
-                    }
+                    let troubleshootingTips = `
+                        <div class="mt-3 text-xs text-gray-600">
+                            <p class="font-medium">Troubleshooting checklist:</p>
+                            <ul class="mt-1 list-disc list-inside space-y-1">
+                                <li>✓ Google Cloud project has billing enabled</li>
+                                <li>✓ Text-to-Speech API is enabled in your project</li>
+                                <li>✓ API key is unrestricted (or allows this domain)</li>
+                                <li>✓ API key was copied without extra spaces</li>
+                                <li>✓ API key permissions include Text-to-Speech API</li>
+                            </ul>
+                            <p class="mt-2 font-medium">Still having issues?</p>
+                            <p class="text-gray-500">Try creating a new, unrestricted API key for testing.</p>
+                        </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">${errorDisplay}</p>
+                            <p class="text-red-500 text-sm mt-1 max-w-md mx-auto">${error.message}</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
@@ -617,6 +674,9 @@
                     throw new Error('No text provided for synthesis');
                 }
                 
+                // Clean the API key
+                const cleanApiKey = apiKey.trim();
+                
                 // Prepare voice configuration
                 let voiceConfig = {
                     languageCode: voice.languageCodes[0],
@@ -643,46 +703,64 @@
                 };
                 
                 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)
-                    });
+                    // Method 1: Try with header approach first
+                    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) {
+                        // Method 2: Fallback to URL parameter
+                        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.');
+                            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.');
+                            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.');
+                            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.');
+                            throw new Error('Google Cloud service error. Please try again later.' + details);
                         } else {
-                            throw new Error(errorMessage);
+                            throw new Error(errorMessage + details);
                         }
                     }
                     
                     const data = await response.json();
                     
                     if (!data || !data.audioContent) {
-                        throw new Error('Invalid response from Google TTS API');
+                        throw new Error('Invalid response from Google TTS API - no audio content received');
                     }
                     
                     return data.audioContent;