Update static/test.js

static/test.js

@@ -216,12 +216,14 @@ function showSection(sectionId) {
 // Main navigation functionality
 
 // Main navigation and shared utility functions
-function showSection(sectionId) {
+i alerdy have this for summerise 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,54 +231,6 @@ 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
@@ -290,298 +244,175 @@ document.addEventListener('DOMContentLoaded', () => {
     // Show first section by default
     showSection('document-image-analysis');
 
-    // Initialize all tool sections
-    initSummarization();
-    initQuestionAnswering();
-});
+    // 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
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        summarizeDropArea.addEventListener(eventName, preventDefaults, false);
+    });
+
+    ['dragenter', 'dragover'].forEach(eventName => {
+        summarizeDropArea.addEventListener(eventName, highlight, false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+        summarizeDropArea.addEventListener(eventName, unhighlight, false);
+    });
+
+    summarizeDropArea.addEventListener('drop', handleDrop, false);
+    summarizeDropArea.addEventListener('click', () => summarizeFileInput.click());
+    summarizeFileInput.addEventListener('change', handleFileSelect);
+    textInput.addEventListener('input', validateInputs);
 
-// 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
-    if (submitBtn) {
-        const btnText = submitBtn.querySelector('span');
-        if (btnText) {
-            submitBtn.dataset.defaultText = btnText.textContent;
+    // Summarize button click handler
+    summarizeBtn.addEventListener('click', async () => {
+        const file = summarizeFileInput.files[0];
+        const text = textInput.value.trim();
+        const language = languageSelect.value;
+        
+        if (!file && !text) {
+            showError(summarizeError, "Please upload a file or enter text");
+            return;
         }
-    }
 
-    // Set up drag and drop
-    if (dropArea && fileInput) {
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-            dropArea.addEventListener(eventName, preventDefaults, false);
-        });
+        try {
+            // Show loading state
+            setLoading(true);
+            hideError(summarizeError);
+            summarizeResult.textContent = '';
+            
+            const formData = new FormData();
+            if (file) {
+                formData.append('file', file);
+            } else {
+                formData.append('text', text);
+            }
+            formData.append('language', language);
 
-        ['dragenter', 'dragover'].forEach(eventName => {
-            dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'));
-        });
+            const response = await fetch('/summarize', {
+                method: 'POST',
+                body: formData
+            });
 
-        ['dragleave', 'drop'].forEach(eventName => {
-            dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'));
-        });
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.detail || "Failed to summarize content");
+            }
 
-        dropArea.addEventListener('drop', handleDrop, false);
-        dropArea.addEventListener('click', () => fileInput.click());
-        fileInput.addEventListener('change', handleFileSelect);
-    }
+            const result = await response.json();
+            summarizeResult.textContent = result.summary;
+        } catch (error) {
+            showError(summarizeError, error.message);
+            console.error("Summarization error:", error);
+        } finally {
+            setLoading(false);
+        }
+    });
 
-    if (textInput) {
-        textInput.addEventListener('input', validateInputs);
+    // Helper functions
+    function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
     }
 
-    if (submitBtn) {
-        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;
-            }
+    function highlight() {
+        summarizeDropArea.classList.add('highlight');
+    }
 
-            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 unhighlight() {
+        summarizeDropArea.classList.remove('highlight');
     }
 
     function handleDrop(e) {
         const dt = e.dataTransfer;
-        if (dt && dt.files) {
-            handleFiles(dt.files);
-        }
+        const files = dt.files;
+        handleFiles(files);
     }
 
     function handleFileSelect(e) {
-        if (e.target.files) {
-            handleFiles(e.target.files);
+        const files = e.target.files;
+        if (files.length) {
+            handleFiles(files);
         }
     }
 
     function handleFiles(files) {
-        if (!files || files.length === 0) 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, TXT, or image files.");
+        if (!isValidFileType(file)) {
+            showError(summarizeError, "Unsupported file type. Please upload PDF, DOCX, TXT, or image files.");
             return;
         }
 
-        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>
+        summarizePreview.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 validateInputs() {
-        if (!fileInput || !submitBtn) return;
-        
-        const hasFile = fileInput.files.length > 0;
-        const hasText = textInput ? textInput.value.trim() !== '' : false;
-        submitBtn.disabled = !(hasFile || hasText);
+        const hasFile = summarizeFileInput.files.length > 0;
+        const hasText = textInput.value.trim() !== '';
+        summarizeBtn.disabled = !(hasFile || hasText);
     }
-}
 
-// 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
-    if (submitBtn) {
-        const btnText = submitBtn.querySelector('span');
-        if (btnText) {
-            submitBtn.dataset.defaultText = btnText.textContent;
-        }
+    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');
     }
 
-    // Set up drag and drop
-    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'));
-        });
-
-        ['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);
+    function getFileIcon(file) {
+        if (file.type.startsWith('image/')) return '🖼️';
+        if (file.type === 'application/pdf') return '📄';
+        if (file.type.includes('wordprocessingml')) return '📝';
+        return '📁';
     }
 
-    if (questionInput) {
-        questionInput.addEventListener('input', validateInputs);
+    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 (submitBtn) {
-        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;
-            }
-
-            if (!question) {
-                showError(errorElement, "Please enter your question");
-                return;
-            }
-
-            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;
-        if (dt && dt.files) {
-            handleFiles(dt.files);
-        }
-    }
-
-    function handleFileSelect(e) {
-        if (e.target.files) {
-            handleFiles(e.target.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 handleFiles(files) {
-        if (!files || files.length === 0) 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;
-        }
-
-        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>
-            `;
-        }
-        validateInputs();
+    function showError(element, message) {
+        element.textContent = message;
+        element.classList.remove('hidden');
     }
 
-    function validateInputs() {
-        if (!fileInput || !questionInput || !submitBtn) return;
-        
-        const hasFile = fileInput.files.length > 0;
-        const hasQuestion = questionInput.value.trim() !== '';
-        submitBtn.disabled = !(hasFile && hasQuestion);
+    function hideError() {
+        summarizeError.classList.add('hidden');
     }
-}
+});