n

static/script.js

@@ -1,4 +1,7 @@
 document.addEventListener('DOMContentLoaded', () => {
+    // Log when the page loads to confirm JavaScript is working
+    console.log("Translation app initialized");
+    
     const textForm = document.getElementById('text-translation-form');
     const docForm = document.getElementById('doc-translation-form');
     const textResultBox = document.getElementById('text-result');
@@ -10,7 +13,25 @@ document.addEventListener('DOMContentLoaded', () => {
     const errorMessageDiv = document.getElementById('error-message');
     const docLoadingIndicator = document.getElementById('doc-loading');
     const debugInfoDiv = document.getElementById('debug-info');
-    const textLoadingDiv = document.getElementById('text-loading');
+    
+    // Check if all elements are found
+    if (!textForm) console.error("ERROR: Text translation form not found!");
+    if (!textResultBox) console.error("ERROR: Text result box not found!");
+    if (!textOutput) console.error("ERROR: Text output element not found!");
+    if (!errorMessageDiv) console.error("ERROR: Error message div not found!");
+    
+    // Create text loading indicator if it doesn't exist
+    let textLoadingDiv = document.getElementById('text-loading');
+    if (!textLoadingDiv) {
+        console.log("Creating missing text loading indicator");
+        textLoadingDiv = document.createElement('div');
+        textLoadingDiv.id = 'text-loading';
+        textLoadingDiv.className = 'loading-spinner';
+        textLoadingDiv.textContent = 'Translating...';
+        if (textForm) {
+            textForm.appendChild(textLoadingDiv);
+        }
+    }
     
     // Helper function to display debug info
     function showDebug(message, data = null) {
@@ -21,8 +42,12 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         
         console.log("DEBUG:", message, data || '');
-        debugInfoDiv.textContent = debugText;
-        debugInfoDiv.style.display = 'block';
+        if (debugInfoDiv) {
+            debugInfoDiv.textContent = debugText;
+            debugInfoDiv.style.display = 'block';
+        } else {
+            console.error("Debug div not found!");
+        }
     }
     
     // Helper function to display errors
@@ -51,39 +76,74 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         
         console.error("Error details:", message);
-        errorMessageDiv.textContent = errorText;
-        errorMessageDiv.style.display = 'block';
-        
-        // Hide result boxes on error
-        textResultBox.style.display = 'none';
-        docResultBox.style.display = 'none';
+        if (errorMessageDiv) {
+            errorMessageDiv.textContent = errorText;
+            errorMessageDiv.style.display = 'block';
+            
+            // Hide result boxes on error
+            if (textResultBox) textResultBox.style.display = 'none';
+            if (docResultBox) docResultBox.style.display = 'none';
+        } else {
+            // If error div not found, use alert as fallback
+            alert("Error: " + errorText);
+        }
     }
 
     // Helper function to clear errors and results
     function clearFeedback() {
-        errorMessageDiv.style.display = 'none';
-        errorMessageDiv.textContent = '';
-        textResultBox.style.display = 'none';
-        textOutput.textContent = '';
-        docResultBox.style.display = 'none';
-        docOutput.textContent = '';
-        docFilename.textContent = '';
-        docSourceLang.textContent = '';
-        docLoadingIndicator.style.display = 'none';
-        debugInfoDiv.style.display = 'none';
-        debugInfoDiv.textContent = '';
+        if (errorMessageDiv) {
+            errorMessageDiv.style.display = 'none';
+            errorMessageDiv.textContent = '';
+        }
+        if (textResultBox) {
+            textResultBox.style.display = 'none';
+            if (textOutput) textOutput.textContent = '';
+        }
+        if (docResultBox) {
+            docResultBox.style.display = 'none';
+            if (docOutput) docOutput.textContent = '';
+            if (docFilename) docFilename.textContent = '';
+            if (docSourceLang) docSourceLang.textContent = '';
+        }
+        if (docLoadingIndicator) docLoadingIndicator.style.display = 'none';
+        if (debugInfoDiv) {
+            debugInfoDiv.style.display = 'none';
+            debugInfoDiv.textContent = '';
+        }
     }
 
     // Fix the text form submission handler
     if (textForm) {
+        console.log("Adding submit event listener to text form");
         textForm.addEventListener('submit', async (e) => {
+            console.log("Form submitted!");
             e.preventDefault();
             clearFeedback();
             
+            // Show debug immediately to confirm the handler is working
+            showDebug('Translation submission triggered');
+            
             // Use correct field IDs matching the HTML
-            const sourceText = document.getElementById('text-input').value.trim();
-            const sourceLang = document.getElementById('source-lang-text').value;
-            const targetLang = document.getElementById('target-lang-text').value;
+            const textInput = document.getElementById('text-input');
+            const sourceLangSelect = document.getElementById('source-lang-text');
+            const targetLangSelect = document.getElementById('target-lang-text');
+            
+            if (!textInput) {
+                displayError('Text input element not found!');
+                return;
+            }
+            if (!sourceLangSelect) {
+                displayError('Source language select not found!');
+                return;
+            }
+            if (!targetLangSelect) {
+                displayError('Target language select not found!');
+                return;
+            }
+            
+            const sourceText = textInput.value.trim();
+            const sourceLang = sourceLangSelect.value;
+            const targetLang = targetLangSelect.value;
             
             if (!sourceText) {
                 displayError('Please enter text to translate');
@@ -92,7 +152,7 @@ document.addEventListener('DOMContentLoaded', () => {
             
             try {
                 // Show loading state 
-                textLoadingDiv.style.display = 'block';
+                if (textLoadingDiv) textLoadingDiv.style.display = 'block';
                 
                 // Log payload for debugging
                 const payload = { 
@@ -102,60 +162,71 @@ document.addEventListener('DOMContentLoaded', () => {
                 };
                 showDebug('Sending translation request', payload);
                 
-                const response = await fetch('/translate/text', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(payload)
-                });
-                
-                // Log response status
-                showDebug(`Response status: ${response.status}`);
-                
-                // Get the raw response text first for debugging
-                const responseText = await response.text();
-                showDebug('Raw response:', responseText);
-                
-                // Then parse it as JSON
-                let data;
+                // Check if API is available
                 try {
-                    data = JSON.parse(responseText);
-                } catch (jsonError) {
-                    throw new Error(`Invalid JSON response: ${responseText}`);
-                }
-                
-                // Hide loading state
-                textLoadingDiv.style.display = 'none';
-                
-                if (!response.ok) {
-                    if (data && data.error) {
+                    const response = await fetch('/translate/text', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(payload)
+                    });
+                    
+                    // Log response status
+                    showDebug(`Response status: ${response.status}`);
+                    
+                    // Get the raw response text first for debugging
+                    const responseText = await response.text();
+                    showDebug('Raw response:', responseText);
+                    
+                    // Then parse it as JSON
+                    let data;
+                    try {
+                        data = JSON.parse(responseText);
+                    } catch (jsonError) {
+                        showDebug('JSON parse error:', jsonError);
+                        throw new Error(`Invalid JSON response: ${responseText}`);
+                    }
+                    
+                    // Hide loading state
+                    if (textLoadingDiv) textLoadingDiv.style.display = 'none';
+                    
+                    if (!response.ok) {
+                        if (data && data.error) {
+                            displayError(data.error);
+                        } else {
+                            displayError(`Server error: ${response.status}`);
+                        }
+                        return;
+                    }
+                    
+                    if (!data.success && data.error) {
                         displayError(data.error);
+                        return;
+                    }
+                    
+                    if (!data.translated_text) {
+                        displayError('Translation returned empty text');
+                        return;
+                    }
+                    
+                    if (textOutput) {
+                        textOutput.textContent = data.translated_text;
+                        if (textResultBox) textResultBox.style.display = 'block';
                     } else {
-                        displayError(`Server error: ${response.status}`);
+                        displayError('Text output element not found!');
                     }
-                    return;
+                    
+                } catch (fetchError) {
+                    console.error('Fetch error:', fetchError);
+                    displayError(`Network error: ${fetchError.message}. Make sure the backend server is running.`);
                 }
-                
-                if (!data.success && data.error) {
-                    displayError(data.error);
-                    return;
-                }
-                
-                if (!data.translated_text) {
-                    displayError('Translation returned empty text');
-                    return;
-                }
-                
-                textOutput.textContent = data.translated_text;
-                textResultBox.style.display = 'block';
-                
             } catch (error) {
-                console.error('Error:', error);
-                displayError(`Network error: ${error.message}`);
+                console.error('General error:', error);
+                displayError(`Error: ${error.message}`);
                 
                 // Hide loading
-                textLoadingDiv.style.display = 'none';
+                if (textLoadingDiv) textLoadingDiv.style.display = 'none';
             }
         });
     } else {