Fix document translation functionality

static/script.js

@@ -8,6 +8,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const docFilename = document.getElementById('doc-filename');
     const docSourceLang = document.getElementById('doc-source-lang');
     const errorMessageDiv = document.getElementById('error-message');
+    const docLoadingIndicator = document.getElementById('doc-loading');
 
     // Helper function to display errors
     function displayError(message) {
@@ -28,6 +29,7 @@ document.addEventListener('DOMContentLoaded', () => {
         docOutput.textContent = '';
         docFilename.textContent = '';
         docSourceLang.textContent = '';
+        docLoadingIndicator.style.display = 'none';
     }
 
     // Handle Text Translation Form Submission
@@ -82,6 +84,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
         button.disabled = true;
         button.textContent = 'Translating...';
+        // Show loading indicator
+        docLoadingIndicator.style.display = 'block';
 
         try {
             const response = await fetch('/translate/document', {
@@ -95,12 +99,17 @@ document.addEventListener('DOMContentLoaded', () => {
             }
 
             const result = await response.json();
+            console.log('Document translation response:', result); // Added debug logging
+            
+            // Check if result contains the expected fields
+            if (!result.translated_text) {
+                throw new Error('Translation response is missing translated text');
+            }
+            
             docFilename.textContent = result.original_filename || 'N/A';
             docSourceLang.textContent = result.detected_source_lang || 'N/A';
             docOutput.textContent = result.translated_text;
             docResultBox.style.display = 'block';
-            // Optionally update language direction based on result if needed
-            // docResultBox.dir = result.target_lang === 'ar' ? 'rtl' : 'ltr';
 
         } catch (error) {
             console.error('Document translation error:', error);
@@ -108,6 +117,8 @@ document.addEventListener('DOMContentLoaded', () => {
         } finally {
             button.disabled = false;
             button.textContent = 'Translate Document';
+            // Hide loading indicator
+            docLoadingIndicator.style.display = 'none';
         }
     });
 });

templates/index.html

@@ -68,7 +68,15 @@
                 <label for="doc-input">Upload Document (.pdf, .docx, .xlsx, .pptx, .txt):</label>
                 <input type="file" id="doc-input" name="file" accept=".pdf,.docx,.xlsx,.pptx,.txt">
             </div>
-            <button type="submit">Translate Document</button>
+            <div class="form-group">
+                <button type="submit" class="btn btn-primary">Translate Document</button>
+            </div>
+            <div id="doc-loading" class="loading-spinner" style="display: none;">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="sr-only">Loading...</span>
+                </div>
+                <p>Translating document... This may take a few minutes for large files or first-time use.</p>
+            </div>
         </form>
         <div id="doc-result" class="result-box" dir="rtl"> <!- Set default to RTL for Arabic output ->
             <h3>Translation:</h3>