Update static/test.js

static/test.js

@@ -235,3 +235,141 @@ document.querySelectorAll('.card').forEach(card => {
         showSection(sectionId);
     });
 });
+
+// Document Summarization Functionality
+const summarizeDropArea = document.getElementById('summarize-drop-area');
+const summarizeFileInput = document.getElementById('summarize-file-input');
+const summarizePreview = document.getElementById('summarize-preview');
+const summarizeBtn = document.getElementById('summarize-btn');
+const summarizeResult = document.getElementById('summarize-result');
+const summarizeError = document.getElementById('summarize-error');
+
+// Set up drag and drop for summarization
+setupFileUpload(summarizeDropArea, summarizeFileInput, summarizePreview);
+
+// Summarize button click handler
+summarizeBtn.addEventListener('click', async () => {
+  const file = summarizeFileInput.files[0];
+  
+  if (!file) {
+    showError(summarizeError, "Please select a file first");
+    return;
+  }
+
+  try {
+    // Show loading state
+    summarizeBtn.disabled = true;
+    summarizeBtn.textContent = "Processing...";
+    hideError(summarizeError);
+    summarizeResult.style.display = 'none';
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    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 document");
+    }
+
+    const result = await response.json();
+    
+    // Display the result
+    summarizeResult.innerHTML = `<h4>Summary:</h4><p>${result.summary}</p>`;
+    summarizeResult.style.display = 'block';
+    
+  } catch (error) {
+    showError(summarizeError, error.message);
+  } finally {
+    summarizeBtn.disabled = false;
+    summarizeBtn.textContent = "Summarize Document";
+  }
+});
+
+// Helper functions for file upload
+function setupFileUpload(dropArea, fileInput, previewElement) {
+  // Drag and drop functionality
+  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+    dropArea.addEventListener(eventName, preventDefaults, false);
+  });
+
+  ['dragenter', 'dragover'].forEach(eventName => {
+    dropArea.addEventListener(eventName, () => {
+      dropArea.classList.add('highlight');
+    }, false);
+  });
+
+  ['dragleave', 'drop'].forEach(eventName => {
+    dropArea.addEventListener(eventName, () => {
+      dropArea.classList.remove('highlight');
+    }, false);
+  });
+
+  dropArea.addEventListener('drop', handleDrop, false);
+  dropArea.addEventListener('click', () => fileInput.click());
+  fileInput.addEventListener('change', handleFileSelect);
+
+  function handleDrop(e) {
+    const dt = e.dataTransfer;
+    const files = dt.files;
+    handleFiles(files);
+  }
+
+  function handleFileSelect(e) {
+    const files = e.target.files;
+    if (files.length) {
+      handleFiles(files);
+    }
+  }
+
+  function handleFiles(files) {
+    const file = files[0];
+    previewElement.innerHTML = `Selected: <strong>${file.name}</strong> (${formatFileSize(file.size)})`;
+    fileInput.files = files;
+  }
+}
+
+function preventDefaults(e) {
+  e.preventDefault();
+  e.stopPropagation();
+}
+
+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 showError(element, message) {
+  element.textContent = message;
+  element.style.display = 'block';
+}
+
+function hideError(element) {
+  element.style.display = 'none';
+}
+
+// Keep your existing showSection function
+function showSection(sectionId) {
+  const sections = document.querySelectorAll('.tool-section');
+  sections.forEach(section => {
+    section.style.display = 'none';
+  });
+
+  const activeSection = document.getElementById(sectionId);
+  if (activeSection) {
+    activeSection.style.display = 'block';
+    activeSection.scrollIntoView({ behavior: 'smooth' });
+  }
+}
+
+// Initialize - show first section by default
+document.addEventListener('DOMContentLoaded', () => {
+  showSection('document-image-analysis');
+});