Update static/test.js

static/test.js

@@ -1,150 +1,145 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // Tab switching functionality
-    const tabBtns = document.querySelectorAll('.tab-btn');
+    // Tab functionality
+    const tabButtons = document.querySelectorAll('.tab-btn');
     const tabContents = document.querySelectorAll('.tab-content');
     
-    tabBtns.forEach(btn => {
-        btn.addEventListener('click', () => {
-            tabBtns.forEach(b => b.classList.remove('active'));
-            tabContents.forEach(c => c.classList.remove('active'));
-            btn.classList.add('active');
-            const tabId = btn.getAttribute('data-tab');
+    tabButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            // Remove active class from all buttons and contents
+            tabButtons.forEach(btn => btn.classList.remove('active'));
+            tabContents.forEach(content => content.classList.remove('active'));
+            
+            // Add active class to clicked button and corresponding content
+            button.classList.add('active');
+            const tabId = button.getAttribute('data-tab');
             document.getElementById(tabId).classList.add('active');
         });
     });
-    
-    // API configuration
- const API_BASE_URL = window.location.origin;
-const API_PREFIX = '/api';
-...
-fetch(`${API_BASE_URL}${API_PREFIX}/summarize`, ...)
 
-    // Summarize document
+    // API base URL - replace with your Hugging Face Space URL
+    const API_BASE_URL = "https://your-username-your-space-name.hf.space"; 
+    // For local testing: "http://localhost:7860"
+
+    // Summarize functionality
     document.getElementById('summarize-btn').addEventListener('click', async function() {
         const fileInput = document.getElementById('summarize-file');
         const resultArea = document.getElementById('summarize-result');
         
-        if (!fileInput.files.length) {
-            showError(resultArea, 'Please select a file first');
+        if (!fileInput.files[0]) {
+            resultArea.textContent = "Please select a file first";
             return;
         }
-        
+
+        resultArea.textContent = "Processing document...";
+
+        const formData = new FormData();
+        formData.append('file', fileInput.files[0]);
+
         try {
-            showLoading(resultArea, 'Processing document...');
-            
-            const formData = new FormData();
-            formData.append('file', fileInput.files[0]);
-            
-            const response = await fetch(`${API_BASE_URL}${API_PREFIX}/summarize`, {
+            const response = await fetch(`${API_BASE_URL}/ask`, {
                 method: 'POST',
                 body: formData
             });
             
             if (!response.ok) {
-                const error = await response.json();
-                throw new Error(error.detail || 'Failed to summarize document');
+                throw new Error(`HTTP error! status: ${response.status}`);
             }
             
             const data = await response.json();
-            showResult(resultArea, data.summary);
+            resultArea.innerHTML = `
+                <h3>Summary:</h3>
+                <p>${data.answer}</p>
+                <p class="confidence">Confidence: ${(data.confidence * 100).toFixed(1)}%</p>
+            `;
         } catch (error) {
-            showError(resultArea, error.message);
+            resultArea.textContent = `Error: ${error.message}`;
+            console.error('Summarization error:', error);
         }
     });
-    
-    // Ask question
+
+    // Question Answering functionality
     document.getElementById('ask-btn').addEventListener('click', async function() {
         const fileInput = document.getElementById('ask-file');
         const questionInput = document.getElementById('ask-question');
         const resultArea = document.getElementById('ask-result');
         
-        if (!fileInput.files.length && !questionInput.value.trim()) {
-            showError(resultArea, 'Please select a file or enter text first');
-            return;
-        }
-        
         if (!questionInput.value.trim()) {
-            showError(resultArea, 'Please enter a question');
+            resultArea.textContent = "Please enter a question";
             return;
         }
+
+        resultArea.textContent = "Processing your question...";
+
+        const formData = new FormData();
+        formData.append('question', questionInput.value);
         
+        if (fileInput.files[0]) {
+            formData.append('file', fileInput.files[0]);
+        }
+
         try {
-            showLoading(resultArea, 'Processing your question...');
-            
-            const formData = new FormData();
-            if (fileInput.files.length) {
-                formData.append('file', fileInput.files[0]);
-            }
-            formData.append('question', questionInput.value.trim());
-            
-            const response = await fetch(`${API_BASE_URL}${API_PREFIX}/ask`, {
+            const response = await fetch(`${API_BASE_URL}/ask`, {
                 method: 'POST',
                 body: formData
             });
             
             if (!response.ok) {
-                const error = await response.json();
-                throw new Error(error.detail || 'Failed to get answer');
+                throw new Error(`HTTP error! status: ${response.status}`);
             }
             
             const data = await response.json();
-            const resultHtml = `
+            resultArea.innerHTML = `
                 <h3>Answer:</h3>
                 <p>${data.answer}</p>
                 <p class="confidence">Confidence: ${(data.confidence * 100).toFixed(1)}%</p>
                 ${data.context_used ? `<details><summary>Context used</summary><p>${data.context_used}</p></details>` : ''}
             `;
-            showResult(resultArea, resultHtml);
         } catch (error) {
-            showError(resultArea, error.message);
+            resultArea.textContent = `Error: ${error.message}`;
+            console.error('Question answering error:', error);
         }
     });
-    
-    // Generate image caption
+
+    // Image Captioning functionality
     document.getElementById('caption-btn').addEventListener('click', async function() {
         const fileInput = document.getElementById('caption-file');
         const resultArea = document.getElementById('caption-result');
         
-        if (!fileInput.files.length) {
-            showError(resultArea, 'Please select an image first');
+        if (!fileInput.files[0]) {
+            resultArea.textContent = "Please select an image first";
             return;
         }
-        
+
+        resultArea.textContent = "Generating caption...";
+
+        const formData = new FormData();
+        formData.append('file', fileInput.files[0]);
+
         try {
-            showLoading(resultArea, 'Generating caption...');
-            
-            const formData = new FormData();
-            formData.append('file', fileInput.files[0]);
-            
-            const response = await fetch(`${API_BASE_URL}${API_PREFIX}/caption`, {
+            const response = await fetch(`${API_BASE_URL}/api/caption`, {
                 method: 'POST',
                 body: formData
             });
             
             if (!response.ok) {
-                const error = await response.json();
-                throw new Error(error.detail || 'Failed to generate caption');
+                throw new Error(`HTTP error! status: ${response.status}`);
             }
             
             const data = await response.json();
-            const reader = new FileReader();
-            reader.onload = function(e) {
-                const resultHtml = `
-                    <div class="image-preview">
-                        <img src="${e.target.result}" alt="Uploaded image">
-                    </div>
-                    <h3>Caption:</h3>
-                    <p>${data.caption}</p>
-                `;
-                showResult(resultArea, resultHtml);
-            };
-            reader.readAsDataURL(fileInput.files[0]);
+            resultArea.innerHTML = `
+                <h3>Caption:</h3>
+                <p>${data.caption}</p>
+                <div class="image-preview">
+                    <img src="${URL.createObjectURL(fileInput.files[0])}" alt="Uploaded image">
+                </div>
+            `;
         } catch (error) {
-            showError(resultArea, error.message);
+            resultArea.textContent = `Error: ${error.message}`;
+            console.error('Captioning error:', error);
         }
     });
-    
-    // Translate text
+
+    // Translation functionality
     document.getElementById('translate-btn').addEventListener('click', async function() {
         const textInput = document.getElementById('translate-text');
         const sourceLang = document.getElementById('source-lang').value;
@@ -152,52 +147,48 @@ fetch(`${API_BASE_URL}${API_PREFIX}/summarize`, ...)
         const resultArea = document.getElementById('translate-result');
         
         if (!textInput.value.trim()) {
-            showError(resultArea, 'Please enter text to translate');
+            resultArea.textContent = "Please enter text to translate";
             return;
         }
-        
+
+        resultArea.textContent = "Translating...";
+
+        const formData = new FormData();
+        formData.append('text', textInput.value);
+        formData.append('target_lang', targetLang);
+        formData.append('src_lang', sourceLang);
+
         try {
-            showLoading(resultArea, 'Translating...');
-            
-            const response = await fetch(`${API_BASE_URL}${API_PREFIX}/translate`, {
+            const response = await fetch(`${API_BASE_URL}/translate`, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                },
-                body: new URLSearchParams({
-                    'text': textInput.value.trim(),
-                    'target_lang': targetLang,
-                    'src_lang': sourceLang
-                })
+                body: formData
             });
             
             if (!response.ok) {
-                const error = await response.json();
-                throw new Error(error.detail || 'Failed to translate text');
+                throw new Error(`HTTP error! status: ${response.status}`);
             }
             
             const data = await response.json();
-            showResult(resultArea, data.translated_text);
+            resultArea.innerHTML = `
+                <h3>Translation:</h3>
+                <p>${data.translated_text}</p>
+                <p class="language-info">Translated from ${document.getElementById('source-lang').options[document.getElementById('source-lang').selectedIndex].text} to ${document.getElementById('target-lang').options[document.getElementById('target-lang').selectedIndex].text}</p>
+            `;
         } catch (error) {
-            showError(resultArea, error.message);
+            resultArea.textContent = `Error: ${error.message}`;
+            console.error('Translation error:', error);
         }
     });
-    
-    // Helper functions
-    function showLoading(element, message) {
-        element.innerHTML = `
-            <div class="loading-container">
-                <span class="loading"></span>
-                <span>${message}</span>
-            </div>
-        `;
-    }
-    
-    function showResult(element, content) {
-        element.innerHTML = `<div class="result">${content}</div>`;
-    }
-    
-    function showError(element, message) {
-        element.innerHTML = `<div class="error">Error: ${message}</div>`;
-    }
+
+    // File input styling
+    document.querySelectorAll('input[type="file"]').forEach(input => {
+        input.addEventListener('change', function() {
+            const label = this.nextElementSibling;
+            if (this.files[0]) {
+                label.textContent = this.files[0].name;
+            } else {
+                label.textContent = label.getAttribute('data-default') || 'Choose a file';
+            }
+        });
+    });
 });