bb

static/script.js

@@ -17,7 +17,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if (message === undefined || message === null) {
             errorText += 'Unknown error occurred';
         } else if (typeof message === 'object') {
-            // Better error object handling
+            // Improved error object handling
             if (message.message) {
                 errorText += message.message;
             } else if (message.detail) {
@@ -35,6 +35,7 @@ document.addEventListener('DOMContentLoaded', () => {
             errorText += message;
         }
         
+        console.error("Error details:", message);
         errorMessageDiv.textContent = errorText;
         errorMessageDiv.style.display = 'block';
         // Hide result boxes on error
@@ -62,19 +63,29 @@ document.addEventListener('DOMContentLoaded', () => {
 
         const formData = new FormData(textForm);
         const button = textForm.querySelector('button');
+        const textInput = document.getElementById('text-input');
+        
+        // Validation check
+        if (!textInput.value.trim()) {
+            displayError('Please enter text to translate');
+            return;
+        }
+        
         button.disabled = true;
         button.textContent = 'Translating...';
 
         try {
             console.log('Sending translation request...');
             
-            // Create JSON payload from FormData instead of sending FormData directly
+            // Create JSON payload from FormData
             const payload = {
                 text: formData.get('text'),
                 source_lang: formData.get('source_lang'),
                 target_lang: formData.get('target_lang')
             };
             
+            console.log('Payload:', payload);
+            
             const response = await fetch('/translate/text', {
                 method: 'POST',
                 headers: {
@@ -83,40 +94,46 @@ document.addEventListener('DOMContentLoaded', () => {
                 body: JSON.stringify(payload)
             });
 
-            console.log('Response received:', response.status, response.statusText);
-
+            console.log('Response status:', response.status, response.statusText);
+            
+            // Get response data as text first for debugging
+            const responseText = await response.text();
+            console.log('Raw response:', responseText);
+            
+            // Try to parse as JSON
+            let data;
+            try {
+                data = responseText ? JSON.parse(responseText) : null;
+            } catch (parseError) {
+                console.error('Error parsing JSON response:', parseError);
+                throw new Error(`Failed to parse server response: ${responseText}`);
+            }
+            
+            if (!data) {
+                throw new Error('Server returned empty response');
+            }
+            
+            // Check if the response indicates an error
             if (!response.ok) {
-                let errorMessage;
-                try {
-                    const errorData = await response.json();
-                    errorMessage = errorData.detail || `HTTP error! status: ${response.status}`;
-                } catch (jsonError) {
-                    errorMessage = `HTTP error! status: ${response.status}. Failed to parse error response.`;
-                }
-                throw new Error(errorMessage);
+                const errorMsg = data.error || data.detail || 'Unknown server error';
+                throw new Error(errorMsg);
             }
-
-            console.log('Processing response...');
-            const result = await response.json();
-            console.log('Parsed JSON result:', result);
-
-            if (!result.translated_text) {
-                console.error('Missing translated_text in response:', result);
-                throw new Error('Server response missing translated text');
+            
+            // Check if we have actual translated text
+            if (data.success === false || !data.translated_text) {
+                throw new Error(data.error || 'No translation returned from server');
             }
-
-            textOutput.textContent = result.translated_text;
+            
+            // Display the translation results
+            textOutput.textContent = data.translated_text;
             textResultBox.style.display = 'block';
-            // Set text direction for Arabic
-            textOutput.dir = 'rtl';
-
+            
         } catch (error) {
-            console.error('Text translation error:', error);
-            // Always pass error.message instead of the error object
-            displayError(error.message || 'An unexpected error occurred during text translation.');
+            console.error('Translation error:', error);
+            displayError(error);
         } finally {
             button.disabled = false;
-            button.textContent = 'Translate Text';
+            button.textContent = 'Translate';
         }
     });
 
@@ -145,13 +162,24 @@ document.addEventListener('DOMContentLoaded', () => {
                 body: formData // FormData handles multipart/form-data automatically
             });
 
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.detail || `HTTP error! status: ${response.status}`);
+            // Get response as text first for debugging
+            const responseText = await response.text();
+            console.log('Raw document response:', responseText);
+            
+            // Try to parse as JSON
+            let result;
+            try {
+                result = JSON.parse(responseText);
+            } catch (jsonError) {
+                throw new Error(`Failed to parse server response: ${responseText}`);
             }
 
-            const result = await response.json();
-            console.log('Document translation response:', result); // Added debug logging
+            if (!response.ok) {
+                const errorMessage = result.error || result.detail || `HTTP error! status: ${response.status}`;
+                throw new Error(errorMessage);
+            }
+            
+            console.log('Document translation response:', result);
             
             // Check if result contains the expected fields
             if (!result.translated_text) {
@@ -162,10 +190,12 @@ document.addEventListener('DOMContentLoaded', () => {
             docSourceLang.textContent = result.detected_source_lang || 'N/A';
             docOutput.textContent = result.translated_text;
             docResultBox.style.display = 'block';
+            
+            // Set text direction based on target language (document always goes to Arabic)
+            docOutput.dir = 'rtl';
 
         } catch (error) {
             console.error('Document translation error:', error);
-            // Always pass error.message instead of the error object
             displayError(error.message || 'An unexpected error occurred during document translation.');
         } finally {
             button.disabled = false;