Update static/test.js

static/test.js

@@ -214,14 +214,13 @@ function showSection(sectionId) {
 
 // Function to show the selected section and hide the others
 // Main navigation functionality
+f// Main navigation and shared utility functions
 function showSection(sectionId) {
-    // Hide all tool sections
     const sections = document.querySelectorAll('.tool-section');
     sections.forEach(section => {
         section.style.display = 'none';
     });
 
-    // Show the selected section
     const activeSection = document.getElementById(sectionId);
     if (activeSection) {
         activeSection.style.display = 'block';
@@ -229,6 +228,54 @@ function showSection(sectionId) {
     }
 }
 
+// Shared utility functions
+function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+function isValidFileType(file, types) {
+    const validExtensions = types.map(t => `.${t}`);
+    return types.includes(file.type.split('/').pop()) || 
+           validExtensions.some(ext => file.name.toLowerCase().endsWith(ext));
+}
+
+function getFileIcon(file) {
+    if (file.type.startsWith('image/')) return '🖼️';
+    if (file.type === 'application/pdf') return '📄';
+    if (file.type.includes('wordprocessingml')) return '📝';
+    return '📁';
+}
+
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+function setLoading(button, isLoading) {
+    button.disabled = isLoading;
+    const btnText = button.querySelector('span:not(.spinner)');
+    if (btnText) {
+        btnText.textContent = isLoading ? 'Processing...' : button.dataset.defaultText;
+    }
+    const spinner = button.querySelector('.spinner');
+    if (spinner) {
+        spinner.classList.toggle('hidden', !isLoading);
+    }
+}
+
+function showError(element, message) {
+    element.textContent = message;
+    element.classList.remove('hidden');
+}
+
+function hideError(element) {
+    element.classList.add('hidden');
+}
+
 // Initialize the page
 document.addEventListener('DOMContentLoaded', () => {
     // Set up card click handlers
@@ -242,57 +289,65 @@ document.addEventListener('DOMContentLoaded', () => {
     // Show first section by default
     showSection('document-image-analysis');
 
-    // Document Analysis Section Setup
-    const summarizeDropArea = document.getElementById('upload-area');
-    const summarizeFileInput = document.getElementById('file-input');
-    const summarizePreview = document.getElementById('file-preview');
-    const textInput = document.getElementById('text-input');
-    const summarizeBtn = document.getElementById('summarize-btn');
-    const summarizeResult = document.getElementById('result-content');
-    const summarizeError = document.getElementById('error-message');
-    const languageSelect = document.getElementById('language-select');
-
-    // Set up drag and drop for file upload
+    // Initialize all tool sections
+    initSummarization();
+    initQuestionAnswering();
+});
+
+// Document Summarization Section
+function initSummarization() {
+    const section = document.getElementById('document-image-analysis');
+    if (!section) return;
+
+    const dropArea = section.querySelector('#upload-area');
+    const fileInput = section.querySelector('#file-input');
+    const filePreview = section.querySelector('#file-preview');
+    const textInput = section.querySelector('#text-input');
+    const submitBtn = section.querySelector('#summarize-btn');
+    const resultArea = section.querySelector('#result-content');
+    const errorElement = section.querySelector('#error-message');
+    const languageSelect = section.querySelector('#language-select');
+
+    // Store default button text
+    submitBtn.dataset.defaultText = submitBtn.querySelector('span').textContent;
+
+    // Set up drag and drop
     ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-        summarizeDropArea.addEventListener(eventName, preventDefaults, false);
+        dropArea.addEventListener(eventName, preventDefaults, false);
     });
 
     ['dragenter', 'dragover'].forEach(eventName => {
-        summarizeDropArea.addEventListener(eventName, highlight, false);
+        dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'));
     });
 
     ['dragleave', 'drop'].forEach(eventName => {
-        summarizeDropArea.addEventListener(eventName, unhighlight, false);
+        dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'));
     });
 
-    summarizeDropArea.addEventListener('drop', handleDrop, false);
-    summarizeDropArea.addEventListener('click', () => summarizeFileInput.click());
-    summarizeFileInput.addEventListener('change', handleFileSelect);
+    dropArea.addEventListener('drop', handleDrop, false);
+    dropArea.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', handleFileSelect);
     textInput.addEventListener('input', validateInputs);
 
-    // Summarize button click handler
-    summarizeBtn.addEventListener('click', async () => {
-        const file = summarizeFileInput.files[0];
+    // Submit handler
+    submitBtn.addEventListener('click', async () => {
+        const file = fileInput.files[0];
         const text = textInput.value.trim();
         const language = languageSelect.value;
         
         if (!file && !text) {
-            showError(summarizeError, "Please upload a file or enter text");
+            showError(errorElement, "Please upload a file or enter text");
             return;
         }
 
         try {
-            // Show loading state
-            setLoading(true);
-            hideError(summarizeError);
-            summarizeResult.textContent = '';
+            setLoading(submitBtn, true);
+            hideError(errorElement);
+            resultArea.textContent = '';
             
             const formData = new FormData();
-            if (file) {
-                formData.append('file', file);
-            } else {
-                formData.append('text', text);
-            }
+            if (file) formData.append('file', file);
+            if (text) formData.append('text', text);
             formData.append('language', language);
 
             const response = await fetch('/summarize', {
@@ -306,50 +361,36 @@ document.addEventListener('DOMContentLoaded', () => {
             }
 
             const result = await response.json();
-            summarizeResult.textContent = result.summary;
+            resultArea.textContent = result.summary;
         } catch (error) {
-            showError(summarizeError, error.message);
+            showError(errorElement, error.message);
             console.error("Summarization error:", error);
         } finally {
-            setLoading(false);
+            setLoading(submitBtn, false);
         }
     });
 
-    // Helper functions
-    function preventDefaults(e) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-
-    function highlight() {
-        summarizeDropArea.classList.add('highlight');
-    }
-
-    function unhighlight() {
-        summarizeDropArea.classList.remove('highlight');
-    }
-
     function handleDrop(e) {
         const dt = e.dataTransfer;
-        const files = dt.files;
-        handleFiles(files);
+        handleFiles(dt.files);
     }
 
     function handleFileSelect(e) {
-        const files = e.target.files;
-        if (files.length) {
-            handleFiles(files);
-        }
+        handleFiles(e.target.files);
     }
 
     function handleFiles(files) {
+        if (!files.length) return;
+        
         const file = files[0];
-        if (!isValidFileType(file)) {
-            showError(summarizeError, "Unsupported file type. Please upload PDF, DOCX, TXT, or image files.");
+        const validTypes = ['pdf', 'docx', 'txt', 'jpeg', 'png'];
+        
+        if (!isValidFileType(file, validTypes)) {
+            showError(errorElement, "Unsupported file type. Please upload PDF, DOCX, TXT, or image files.");
             return;
         }
 
-        summarizePreview.innerHTML = `
+        filePreview.innerHTML = `
             <div class="file-info">
                 <span class="file-icon">${getFileIcon(file)}</span>
                 <div>
@@ -362,54 +403,145 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function validateInputs() {
-        const hasFile = summarizeFileInput.files.length > 0;
+        const hasFile = fileInput.files.length > 0;
         const hasText = textInput.value.trim() !== '';
-        summarizeBtn.disabled = !(hasFile || hasText);
+        submitBtn.disabled = !(hasFile || hasText);
     }
+}
 
-    function isValidFileType(file) {
-        const validTypes = [
-            'application/pdf',
-            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-            'text/plain',
-            'image/jpeg',
-            'image/png'
-        ];
-        return validTypes.includes(file.type) || 
-               file.name.endsWith('.pdf') || 
-               file.name.endsWith('.docx') || 
-               file.name.endsWith('.txt');
-    }
+// Question Answering Section
+function initQuestionAnswering() {
+    const section = document.getElementById('question-answering');
+    if (!section) return;
+
+    const dropArea = section.querySelector('#qa-upload-area');
+    const fileInput = section.querySelector('#qa-file-input');
+    const filePreview = section.querySelector('#qa-file-preview');
+    const questionInput = section.querySelector('#qa-question');
+    const submitBtn = section.querySelector('#qa-submit-btn');
+    const answerArea = section.querySelector('#qa-answer');
+    const confidenceBar = section.querySelector('#qa-confidence-bar');
+    const confidenceValue = section.querySelector('#qa-confidence-value');
+    const resultContainer = section.querySelector('#qa-result-container');
+    const errorElement = section.querySelector('#qa-error-message');
+    const languageSelect = section.querySelector('#qa-language');
+
+    // Store default button text
+    submitBtn.dataset.defaultText = submitBtn.querySelector('span').textContent;
+
+    // Set up drag and drop
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropArea.addEventListener(eventName, preventDefaults, false);
+    });
 
-    function getFileIcon(file) {
-        if (file.type.startsWith('image/')) return '🖼️';
-        if (file.type === 'application/pdf') return '📄';
-        if (file.type.includes('wordprocessingml')) return '📝';
-        return '📁';
-    }
+    ['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);
+
+    // Submit handler
+    submitBtn.addEventListener('click', async () => {
+        const file = fileInput.files[0];
+        const question = questionInput.value.trim();
+        const language = languageSelect.value;
+
+        if (!file) {
+            showError(errorElement, "Please upload a document first");
+            return;
+        }
 
-    function formatFileSize(bytes) {
-        if (bytes === 0) return '0 Bytes';
-        const k = 1024;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        if (!question) {
+            showError(errorElement, "Please enter your question");
+            return;
+        }
+
+        try {
+            setLoading(submitBtn, true);
+            hideError(errorElement);
+            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
+            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);
+        }
+    });
+
+    function handleDrop(e) {
+        const dt = e.dataTransfer;
+        handleFiles(dt.files);
     }
 
-    function setLoading(isLoading) {
-        summarizeBtn.disabled = isLoading;
-        const btnText = summarizeBtn.querySelector('span');
-        btnText.textContent = isLoading ? 'Processing...' : 'Summarize Document';
-        const spinner = summarizeBtn.querySelector('.spinner');
-        spinner.classList.toggle('hidden', !isLoading);
+    function handleFileSelect(e) {
+        handleFiles(e.target.files);
     }
 
-    function showError(element, message) {
-        element.textContent = message;
-        element.classList.remove('hidden');
+    function handleFiles(files) {
+        if (!files.length) return;
+        
+        const file = files[0];
+        const validTypes = ['pdf', 'docx', 'txt', 'jpeg', 'png'];
+        
+        if (!isValidFileType(file, validTypes)) {
+            showError(errorElement, "Unsupported file type. Please upload PDF, DOCX, or TXT files.");
+            return;
+        }
+
+        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>
+        `;
+        validateInputs();
     }
 
-    function hideError() {
-        summarizeError.classList.add('hidden');
+    function validateInputs() {
+        const hasFile = fileInput.files.length > 0;
+        const hasQuestion = questionInput.value.trim() !== '';
+        submitBtn.disabled = !(hasFile && hasQuestion);
     }
-});
+}