Update static/test.js

static/test.js

@@ -214,7 +214,8 @@ function showSection(sectionId) {
 
 // Function to show the selected section and hide the others
 // Main navigation functionality
-f// Main navigation and shared utility functions
+
+// Main navigation and shared utility functions
 function showSection(sectionId) {
     const sections = document.querySelectorAll('.tool-section');
     sections.forEach(section => {
@@ -309,78 +310,93 @@ function initSummarization() {
     const languageSelect = section.querySelector('#language-select');
 
     // Store default button text
-    submitBtn.dataset.defaultText = submitBtn.querySelector('span').textContent;
+    if (submitBtn) {
+        const btnText = submitBtn.querySelector('span');
+        if (btnText) {
+            submitBtn.dataset.defaultText = btnText.textContent;
+        }
+    }
 
     // Set up drag and drop
-    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-        dropArea.addEventListener(eventName, preventDefaults, false);
-    });
+    if (dropArea && fileInput) {
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropArea.addEventListener(eventName, preventDefaults, false);
+        });
 
-    ['dragenter', 'dragover'].forEach(eventName => {
-        dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'));
-    });
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'));
+        });
 
-    ['dragleave', 'drop'].forEach(eventName => {
-        dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'));
-    });
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'));
+        });
 
-    dropArea.addEventListener('drop', handleDrop, false);
-    dropArea.addEventListener('click', () => fileInput.click());
-    fileInput.addEventListener('change', handleFileSelect);
-    textInput.addEventListener('input', validateInputs);
+        dropArea.addEventListener('drop', handleDrop, false);
+        dropArea.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', handleFileSelect);
+    }
 
-    // Submit handler
-    submitBtn.addEventListener('click', async () => {
-        const file = fileInput.files[0];
-        const text = textInput.value.trim();
-        const language = languageSelect.value;
-        
-        if (!file && !text) {
-            showError(errorElement, "Please upload a file or enter text");
-            return;
-        }
+    if (textInput) {
+        textInput.addEventListener('input', validateInputs);
+    }
 
-        try {
-            setLoading(submitBtn, true);
-            hideError(errorElement);
-            resultArea.textContent = '';
+    if (submitBtn) {
+        submitBtn.addEventListener('click', async () => {
+            const file = fileInput.files[0];
+            const text = textInput.value.trim();
+            const language = languageSelect.value;
             
-            const formData = new FormData();
-            if (file) formData.append('file', file);
-            if (text) formData.append('text', text);
-            formData.append('language', language);
-
-            const response = await fetch('/summarize', {
-                method: 'POST',
-                body: formData
-            });
-
-            if (!response.ok) {
-                const error = await response.json();
-                throw new Error(error.detail || "Failed to summarize content");
+            if (!file && !text) {
+                showError(errorElement, "Please upload a file or enter text");
+                return;
             }
 
-            const result = await response.json();
-            resultArea.textContent = result.summary;
-        } catch (error) {
-            showError(errorElement, error.message);
-            console.error("Summarization error:", error);
-        } finally {
-            setLoading(submitBtn, false);
-        }
-    });
+            try {
+                setLoading(submitBtn, true);
+                hideError(errorElement);
+                if (resultArea) resultArea.textContent = '';
+                
+                const formData = new FormData();
+                if (file) formData.append('file', file);
+                if (text) formData.append('text', text);
+                formData.append('language', language);
+
+                const response = await fetch('/summarize', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || "Failed to summarize content");
+                }
+
+                const result = await response.json();
+                if (resultArea) resultArea.textContent = result.summary;
+            } catch (error) {
+                showError(errorElement, error.message);
+                console.error("Summarization error:", error);
+            } finally {
+                setLoading(submitBtn, false);
+            }
+        });
+    }
 
     function handleDrop(e) {
         const dt = e.dataTransfer;
-        handleFiles(dt.files);
+        if (dt && dt.files) {
+            handleFiles(dt.files);
+        }
     }
 
     function handleFileSelect(e) {
-        handleFiles(e.target.files);
+        if (e.target.files) {
+            handleFiles(e.target.files);
+        }
     }
 
     function handleFiles(files) {
-        if (!files.length) return;
+        if (!files || files.length === 0) return;
         
         const file = files[0];
         const validTypes = ['pdf', 'docx', 'txt', 'jpeg', 'png'];
@@ -390,21 +406,25 @@ function initSummarization() {
             return;
         }
 
-        filePreview.innerHTML = `
-            <div class="file-info">
-                <span class="file-icon">${getFileIcon(file)}</span>
-                <div>
-                    <strong>${file.name}</strong>
-                    <span>${formatFileSize(file.size)}</span>
+        if (filePreview) {
+            filePreview.innerHTML = `
+                <div class="file-info">
+                    <span class="file-icon">${getFileIcon(file)}</span>
+                    <div>
+                        <strong>${file.name}</strong>
+                        <span>${formatFileSize(file.size)}</span>
+                    </div>
                 </div>
-            </div>
-        `;
+            `;
+        }
         validateInputs();
     }
 
     function validateInputs() {
+        if (!fileInput || !submitBtn) return;
+        
         const hasFile = fileInput.files.length > 0;
-        const hasText = textInput.value.trim() !== '';
+        const hasText = textInput ? textInput.value.trim() !== '' : false;
         submitBtn.disabled = !(hasFile || hasText);
     }
 }
@@ -427,97 +447,112 @@ function initQuestionAnswering() {
     const languageSelect = section.querySelector('#qa-language');
 
     // Store default button text
-    submitBtn.dataset.defaultText = submitBtn.querySelector('span').textContent;
+    if (submitBtn) {
+        const btnText = submitBtn.querySelector('span');
+        if (btnText) {
+            submitBtn.dataset.defaultText = btnText.textContent;
+        }
+    }
 
     // Set up drag and drop
-    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-        dropArea.addEventListener(eventName, preventDefaults, false);
-    });
-
-    ['dragenter', 'dragover'].forEach(eventName => {
-        dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'));
-    });
-
-    ['dragleave', 'drop'].forEach(eventName => {
-        dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'));
-    });
-
-    dropArea.addEventListener('drop', handleDrop, false);
-    dropArea.addEventListener('click', () => fileInput.click());
-    fileInput.addEventListener('change', handleFileSelect);
-    questionInput.addEventListener('input', validateInputs);
+    if (dropArea && fileInput) {
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropArea.addEventListener(eventName, preventDefaults, false);
+        });
 
-    // Submit handler
-    submitBtn.addEventListener('click', async () => {
-        const file = fileInput.files[0];
-        const question = questionInput.value.trim();
-        const language = languageSelect.value;
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'));
+        });
 
-        if (!file) {
-            showError(errorElement, "Please upload a document first");
-            return;
-        }
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'));
+        });
 
-        if (!question) {
-            showError(errorElement, "Please enter your question");
-            return;
-        }
+        dropArea.addEventListener('drop', handleDrop, false);
+        dropArea.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', handleFileSelect);
+    }
 
-        try {
-            setLoading(submitBtn, true);
-            hideError(errorElement);
-            resultContainer.classList.add('hidden');
+    if (questionInput) {
+        questionInput.addEventListener('input', validateInputs);
+    }
 
-            const formData = new FormData();
-            formData.append('file', file);
-            formData.append('question', question);
-            formData.append('language', language);
+    if (submitBtn) {
+        submitBtn.addEventListener('click', async () => {
+            const file = fileInput.files[0];
+            const question = questionInput.value.trim();
+            const language = languageSelect.value;
 
-            const response = await fetch('/qa', {
-                method: 'POST',
-                body: formData
-            });
+            if (!file) {
+                showError(errorElement, "Please upload a document first");
+                return;
+            }
 
-            if (!response.ok) {
-                const error = await response.json();
-                throw new Error(error.detail || "Failed to get answer");
+            if (!question) {
+                showError(errorElement, "Please enter your question");
+                return;
             }
 
-            const result = await response.json();
-            
-            // Display results
-            answerArea.textContent = result.answer;
-            
-            // Update confidence display
-            const confidencePercent = Math.round((result.confidence || 0) * 100);
-            confidenceBar.style.width = `${confidencePercent}%`;
-            confidenceValue.textContent = `${confidencePercent}%`;
-            
-            // Color code confidence
-            confidenceBar.style.backgroundColor = 
-                confidencePercent < 30 ? '#f44336' :
-                confidencePercent < 70 ? '#ff9800' : '#4CAF50';
-            
-            resultContainer.classList.remove('hidden');
-        } catch (error) {
-            showError(errorElement, error.message);
-            console.error("QA error:", error);
-        } finally {
-            setLoading(submitBtn, false);
-        }
-    });
+            try {
+                setLoading(submitBtn, true);
+                hideError(errorElement);
+                if (resultContainer) resultContainer.classList.add('hidden');
+
+                const formData = new FormData();
+                formData.append('file', file);
+                formData.append('question', question);
+                formData.append('language', language);
+
+                const response = await fetch('/qa', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || "Failed to get answer");
+                }
+
+                const result = await response.json();
+                
+                // Display results
+                if (answerArea) answerArea.textContent = result.answer;
+                
+                // Update confidence display if elements exist
+                if (confidenceBar && confidenceValue) {
+                    const confidencePercent = Math.round((result.confidence || 0) * 100);
+                    confidenceBar.style.width = `${confidencePercent}%`;
+                    confidenceValue.textContent = `${confidencePercent}%`;
+                    confidenceBar.style.backgroundColor = 
+                        confidencePercent < 30 ? '#f44336' :
+                        confidencePercent < 70 ? '#ff9800' : '#4CAF50';
+                }
+                
+                if (resultContainer) resultContainer.classList.remove('hidden');
+            } catch (error) {
+                showError(errorElement, error.message);
+                console.error("QA error:", error);
+            } finally {
+                setLoading(submitBtn, false);
+            }
+        });
+    }
 
     function handleDrop(e) {
         const dt = e.dataTransfer;
-        handleFiles(dt.files);
+        if (dt && dt.files) {
+            handleFiles(dt.files);
+        }
     }
 
     function handleFileSelect(e) {
-        handleFiles(e.target.files);
+        if (e.target.files) {
+            handleFiles(e.target.files);
+        }
     }
 
     function handleFiles(files) {
-        if (!files.length) return;
+        if (!files || files.length === 0) return;
         
         const file = files[0];
         const validTypes = ['pdf', 'docx', 'txt', 'jpeg', 'png'];
@@ -527,21 +562,26 @@ function initQuestionAnswering() {
             return;
         }
 
-        filePreview.innerHTML = `
-            <div class="file-info">
-                <span class="file-icon">${getFileIcon(file)}</span>
-                <div>
-                    <strong>${file.name}</strong>
-                    <span>${formatFileSize(file.size)}</span>
+        if (filePreview) {
+            filePreview.innerHTML = `
+                <div class="file-info">
+                    <span class="file-icon">${getFileIcon(file)}</span>
+                    <div>
+                        <strong>${file.name}</strong>
+                        <span>${formatFileSize(file.size)}</span>
+                    </div>
                 </div>
-            </div>
-        `;
+            `;
+        }
         validateInputs();
     }
 
     function validateInputs() {
+        if (!fileInput || !questionInput || !submitBtn) return;
+        
         const hasFile = fileInput.files.length > 0;
         const hasQuestion = questionInput.value.trim() !== '';
         submitBtn.disabled = !(hasFile && hasQuestion);
     }
 }
+