Update static/index.html

static/index.html

@@ -693,31 +693,31 @@
         const createBubbles = () => {
             const bubblesContainer = document.querySelector('.bubbles');
             const bubbleCount = 10;
-            
+
             for (let i = 0; i < bubbleCount; i++) {
                 const bubble = document.createElement('div');
                 bubble.classList.add('bubble');
-                
+
                 // Random sizes
                 const size = Math.random() * 60 + 20;
                 bubble.style.width = `${size}px`;
                 bubble.style.height = `${size}px`;
-                
+
                 // Random positions
                 bubble.style.left = `${Math.random() * 100}%`;
                 bubble.style.top = `${Math.random() * 100}%`;
-                
+
                 // Random animation delay and duration
                 const animationDuration = Math.random() * 10 + 5;
                 const animationDelay = Math.random() * 5;
-                
+
                 bubble.style.animationDuration = `${animationDuration}s`;
                 bubble.style.animationDelay = `${animationDelay}s`;
-                
+
                 bubblesContainer.appendChild(bubble);
             }
         };
-        
+
         // DOM Elements
         const dropzone = document.getElementById('dropzone');
         const fileInput = document.getElementById('audioFileInput');
@@ -737,7 +737,7 @@
         const toast = document.getElementById('toast');
         const audioVisualization = document.getElementById('audioVisualization');
         const visualizerBars = document.getElementById('visualizerBars');
-        
+
         // Variables
         let audioFile = null;
         let mediaRecorder = null;
@@ -746,19 +746,19 @@
         let audioContext = null;
         let analyser = null;
         let visualizationInterval = null;
-        
+
         // Create visualizer bars
         const createVisualizerBars = () => {
             visualizerBars.innerHTML = '';
             const barCount = 50;
-            
+
             for (let i = 0; i < barCount; i++) {
                 const bar = document.createElement('div');
                 bar.classList.add('visualizer-bar');
                 visualizerBars.appendChild(bar);
             }
         };
-        
+
         // Initialize audio context
         const initAudioContext = () => {
             if (!audioContext) {
@@ -767,14 +767,14 @@
                 analyser.fftSize = 256;
             }
         };
-        
+
         // Update visualization
         const updateVisualization = (dataArray) => {
             const bars = visualizerBars.querySelectorAll('.visualizer-bar');
             const bufferLength = analyser.frequencyBinCount;
-            
+
             analyser.getByteFrequencyData(dataArray);
-            
+
             for (let i = 0; i < bars.length; i++) {
                 const index = Math.floor(i * (bufferLength / bars.length));
                 const value = dataArray[index] / 255;
@@ -782,66 +782,66 @@
                 bars[i].style.height = `${height}%`;
             }
         };
-        
+
         // Start visualization
         const startVisualization = (stream) => {
             initAudioContext();
-            
+
             const source = audioContext.createMediaStreamSource(stream);
             source.connect(analyser);
-            
+
             const dataArray = new Uint8Array(analyser.frequencyBinCount);
-            
+
             createVisualizerBars();
             audioVisualization.classList.remove('hidden');
-            
+
             visualizationInterval = setInterval(() => {
                 updateVisualization(dataArray);
             }, 50);
         };
-        
+
         // Stop visualization
         const stopVisualization = () => {
             if (visualizationInterval) {
                 clearInterval(visualizationInterval);
                 visualizationInterval = null;
             }
-            
+
             audioVisualization.classList.add('hidden');
         };
-        
+
         // Initialize
         const init = () => {
             createBubbles();
-            
+
             // Drag and drop functionality
             ['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('dragover');
             }
-            
+
             function unhighlight() {
                 dropzone.classList.remove('dragover');
             }
-            
+
             dropzone.addEventListener('drop', handleDrop, false);
-            
+
             function handleDrop(e) {
                 const dt = e.dataTransfer;
                 const files = dt.files;
@@ -859,14 +859,33 @@
 
             // Handle file selection
             const handleFile = (file) => {
-                if (file.type.startsWith('audio/')) {
-                    audioFile = file;
-                    fileInfo.textContent = `Selected file: ${file.name}`;
-                    fileInfo.classList.remove('hidden');
-                    translateBtn.disabled = false;
-                } else {
-                    alert('Please upload a valid audio file.');
+                const allowedAudioTypes = ['audio/mpeg', 'audio/ogg', 'audio/wav', 'audio/webm', 'audio/x-wav', 'audio/mp3']; // Add more if needed
+                const maxFileSizeMB = 30;
+                const maxFileSize = maxFileSizeMB * 1024 * 1024; // 30MB in bytes
+
+                if (!allowedAudioTypes.includes(file.type)) {
+                    showToast('Error: Invalid audio format. Please upload MP3, OGG, WAV, or WebM.');
+                    fileInput.value = ''; // Reset file input
+                    audioFile = null;
+                    fileInfo.classList.add('hidden');
+                    translateBtn.disabled = true;
+                    return;
                 }
+
+                if (file.size > maxFileSize) {
+                    showToast(`Error: File size exceeds ${maxFileSizeMB}MB limit.`);
+                    fileInput.value = ''; // Reset file input
+                    audioFile = null;
+                    fileInfo.classList.add('hidden');
+                    translateBtn.disabled = true;
+                    return;
+                }
+
+
+                audioFile = file;
+                fileInfo.textContent = `Selected file: ${file.name} (${(file.size / (1024 * 1024)).toFixed(2)} MB)`;
+                fileInfo.classList.remove('hidden');
+                translateBtn.disabled = false;
             };
 
             // Record button click handler
@@ -902,41 +921,68 @@
                     mediaRecorder.onstop = () => {
                         const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                         audioFile = new File([audioBlob], 'recording.wav', { type: 'audio/wav' });
-                        fileInfo.textContent = `Recording saved: ${audioFile.name}`;
+                        fileInfo.textContent = `Recording saved: ${audioFile.name} (${(audioFile.size / (1024 * 1024)).toFixed(2)} MB)`;
                         fileInfo.classList.remove('hidden');
                         translateBtn.disabled = false;
                         stopVisualization();
                     };
                 } catch (err) {
                     console.error('Error starting recording:', err);
-                    alert('Error starting recording. Please ensure you have a microphone connected and permissions granted.');
+                    if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
+                        showToast('Error: Microphone access denied. Please check your browser permissions.');
+                    } else {
+                        showToast('Error starting recording. Please ensure you have a microphone connected and permissions granted.');
+                    }
+                    stopVisualization(); // Ensure visualization stops even on error
+                    recordBtn.classList.remove('recording'); // Remove recording class in case of error
+                    recordBtn.innerHTML = `
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <circle cx="12" cy="12" r="3"></circle>
+                        </svg>
+                        Start Recording
+                    `;
+                    isRecording = false; // Reset recording state in case of error
                 }
             };
 
+
             // Stop recording
             const stopRecording = () => {
-                mediaRecorder.stop();
-                isRecording = false;
-                recordBtn.classList.remove('recording');
-                recordBtn.innerHTML = `
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <circle cx="12" cy="12" r="10"></circle>
-                        <circle cx="12" cy="12" r="3"></circle>
-                    </svg>
-                    Start Recording
-                `;
-                audioChunks = [];
+                if (mediaRecorder && mediaRecorder.state === 'recording') { // Check if mediaRecorder is initialized and recording
+                    mediaRecorder.stop();
+                    isRecording = false;
+                    recordBtn.classList.remove('recording');
+                    recordBtn.innerHTML = `
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <circle cx="12" cy="12" r="3"></circle>
+                        </svg>
+                        Start Recording
+                    `;
+                    audioChunks = [];
+                }
             };
 
+
             // Translate button click handler
             translateBtn.addEventListener('click', async () => {
-                if (!audioFile || !languageSelect.value) {
-                    alert('Please select an audio file and a target language.');
+                if (!audioFile) {
+                    showToast('Please select or record an audio file.');
+                    return;
+                }
+                if (!languageSelect.value) {
+                    showToast('Please select a target language.');
                     return;
                 }
 
                 loadingSection.style.display = 'flex';
                 outputContainer.style.display = 'none';
+                originalText.textContent = ''; // Clear previous text
+                translatedText.textContent = ''; // Clear previous text
+                originalAudio.src = ''; // Clear previous audio
+                translatedAudio.src = ''; // Clear previous audio
+
 
                 const formData = new FormData();
                 formData.append('audio', audioFile);
@@ -944,7 +990,7 @@
 
                 try {
                     const response = await axios.post('/translate', formData);
-                    
+
                     if (response.data.error) {
                         throw new Error(response.data.error);
                     }
@@ -958,10 +1004,27 @@
 
                     loadingSection.style.display = 'none';
                     outputContainer.style.display = 'block';
-                } catch (err) {
-                    console.error('Error:', err);
-                    showToast(err.message || 'An error occurred');
+                } catch (error) {
+                    console.error('Translation error:', error);
+                    let errorMessage = 'An error occurred during translation.';
+                    if (error.response) {
+                        // The request was made and the server responded with a status code
+                        errorMessage = `Translation failed: ${error.response.data.message || error.response.statusText} (Status ${error.response.status})`;
+                        console.error("Server response data:", error.response.data);
+                        console.error("Server response status:", error.response.status);
+
+                    } else if (error.request) {
+                        // The request was made but no response was received
+                        errorMessage = 'Translation failed: No response from server. Please check your network connection.';
+                        console.error("No response received:", error.request);
+                    } else {
+                        // Something happened in setting up the request that triggered an Error
+                        errorMessage = `Translation failed: ${error.message}`;
+                        console.error("Error during request setup:", error.message);
+                    }
+                    showToast(errorMessage);
                     loadingSection.style.display = 'none';
+                    outputContainer.style.display = 'none'; // Keep output container hidden on error
                 }
             });
 
@@ -969,6 +1032,9 @@
             copyOriginal.addEventListener('click', () => {
                 navigator.clipboard.writeText(originalText.textContent).then(() => {
                     showToast('Original text copied to clipboard!');
+                }).catch(err => {
+                    console.error("Clipboard copy error", err);
+                    showToast('Failed to copy original text to clipboard.');
                 });
             });
 
@@ -976,15 +1042,22 @@
             copyTranslated.addEventListener('click', () => {
                 navigator.clipboard.writeText(translatedText.textContent).then(() => {
                     showToast('Translated text copied to clipboard!');
+                }).catch(err => {
+                    console.error("Clipboard copy error", err);
+                    showToast('Failed to copy translated text to clipboard.');
                 });
             });
 
             // Download translated audio
             downloadTranslated.addEventListener('click', () => {
-                const link = document.createElement('a');
-                link.href = translatedAudio.src;
-                link.download = `translated_audio.${translatedAudio.src.split('.').pop()}`;
-                link.click();
+                if (translatedAudio.src) {
+                    const link = document.createElement('a');
+                    link.href = translatedAudio.src;
+                    link.download = `translated_audio.mp3`; // force mp3 download for broader compatibility, adjust as needed
+                    link.click();
+                } else {
+                    showToast('No translated audio available to download.');
+                }
             });
 
             // Show toast message
@@ -1000,8 +1073,11 @@
             fetch('/languages')
                 .then(response => response.json())
                 .then(languages => {
-                    languageSelect.innerHTML = '<option value="" disabled selected>Select language</option>' + 
+                    languageSelect.innerHTML = '<option value="" disabled selected>Select language</option>' +
                         languages.map(lang => `<option value="${lang}">${lang}</option>`).join('');
+                }).catch(error => {
+                    console.error("Failed to load languages:", error);
+                    showToast("Failed to load languages. Please check your connection.");
                 });
         };