Update static/scripts.js

static/scripts.js

@@ -65,55 +65,42 @@ document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('.function-box').forEach(box => {
         box.addEventListener('click', () => {
             const modalId = box.dataset.modal;
-            const modal = document.getElementById(modalId);
-            if (modal) {
-                modal.classList.remove('hidden');
-                document.querySelectorAll('.function-box').forEach(otherBox => {
-                    if (otherBox !== box) {
-                        otherBox.classList.add('shadowed');
-                    }
-                });
-            } else {
-                console.error(`Modal with ID ${modalId} not found`);
-            }
+            document.getElementById(modalId).classList.remove('hidden');
+            // Dim other function-box elements
+            document.querySelectorAll('.function-box').forEach(otherBox => {
+                if (otherBox !== box) {
+                    otherBox.classList.add('shadowed');
+                }
+            });
         });
     });
 
     // Chatbot Icon Click
-    const chatbotIcon = document.querySelector('.chatbot-icon');
-    if (chatbotIcon) {
-        chatbotIcon.addEventListener('click', () => {
-            const chatbotModal = document.getElementById('chatbot-modal');
-            if (chatbotModal) {
-                chatbotModal.classList.remove('hidden');
-            } else {
-                console.error('Chatbot modal not found');
-            }
-        });
-    }
+    document.querySelector('.chatbot-icon').addEventListener('click', () => {
+        document.getElementById('chatbot-modal').classList.remove('hidden');
+    });
 
     // Close Modal
     document.querySelectorAll('.close-modal').forEach(closeBtn => {
         closeBtn.addEventListener('click', () => {
-            const modal = closeBtn.closest('.modal');
-            modal.classList.add('hidden');
-            const forms = modal.querySelectorAll('form');
+            closeBtn.closest('.modal').classList.add('hidden');
+            // Reset forms and responses
+            const forms = closeBtn.closest('.modal').querySelectorAll('form');
             forms.forEach(form => form.reset());
-            const responseCards = modal.querySelectorAll('.response-card');
+            const responseCards = closeBtn.closest('.modal').querySelectorAll('.response-card');
             responseCards.forEach(card => {
                 card.classList.add('hidden');
                 card.innerHTML = '';
             });
-            const spinners = modal.querySelectorAll('.loading-spinner');
+            const spinners = closeBtn.closest('.modal').querySelectorAll('.loading-spinner');
             spinners.forEach(spinner => spinner.classList.add('hidden'));
-            const dropAreas = modal.querySelectorAll('.drop-area p');
+            const dropAreas = closeBtn.closest('.modal').querySelectorAll('.drop-area p');
             dropAreas.forEach(p => p.textContent = 'Drop File Here or Click to Choose');
-            if (modal.id === 'chatbot-modal') {
-                const conversation = document.getElementById('chatbot-conversation');
-                if (conversation) {
-                    conversation.innerHTML = '';
-                }
+            // Clear chatbot conversation
+            if (closeBtn.closest('.modal').id === 'chatbot-modal') {
+                document.getElementById('chatbot-conversation').innerHTML = '';
             }
+            // Remove dimming from all function-box elements
             document.querySelectorAll('.function-box').forEach(box => {
                 box.classList.remove('shadowed');
             });
@@ -124,10 +111,9 @@ document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('.tab-btn').forEach(btn => {
         btn.addEventListener('click', () => {
             const tab = btn.dataset.tab;
-            const modal = btn.closest('.modal');
-            modal.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+            btn.closest('.modal').querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
             btn.classList.add('active');
-            modal.querySelectorAll('.tab-content').forEach(content => {
+            btn.closest('.modal').querySelectorAll('.tab-content').forEach(content => {
                 content.classList.add('hidden');
                 if (content.dataset.tab === tab) content.classList.remove('hidden');
             });
@@ -145,70 +131,40 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
-    // File Input Click Handler
-    document.querySelectorAll('.drop-area').forEach(dropArea => {
-        const fileInput = dropArea.querySelector('input[type="file"]');
-        dropArea.addEventListener('click', () => {
-            fileInput.click();
-        });
-        fileInput.addEventListener('change', () => {
-            if (fileInput.files.length > 0) {
-                dropArea.querySelector('p').textContent = `Selected: ${fileInput.files[0].name}`;
-            }
-        });
-    });
-
     // Chatbot Form Submission
-    const chatbotForm = document.getElementById('chatbot-form');
-    if (chatbotForm) {
-        chatbotForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            console.log('Chatbot form submitted'); // Debug
-            const input = e.target.querySelector('input');
-            const message = input.value.trim();
-            const spinner = e.target.querySelector('.loading-spinner') || document.createElement('div');
-            if (!spinner.classList.contains('loading-spinner')) {
-                spinner.className = 'loading-spinner';
-                e.target.appendChild(spinner);
-            }
-            if (!message) {
-                console.log('No message provided'); // Debug
-                return;
-            }
+    document.getElementById('chatbot-form').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const input = e.target.querySelector('input');
+        const message = input.value.trim();
+        const spinner = e.target.querySelector('.loading-spinner');
+        if (!message) return;
 
-            spinner.classList.remove('hidden');
-            const conversation = document.getElementById('chatbot-conversation');
-            conversation.innerHTML += `<p class="user-message">You: ${message}</p>`;
-            conversation.scrollTop = conversation.scrollHeight;
-            input.value = '';
+        spinner.classList.remove('hidden');
+        const conversation = document.getElementById('chatbot-conversation');
+        conversation.innerHTML += `<p class="user-message">You: ${message}</p>`;
+        conversation.scrollTop = conversation.scrollHeight;
+        input.value = '';
 
-            try {
-                console.log('Sending request to /chat:', { message }); // Debug
-                const response = await fetch('/chat', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ message })
-                });
-                console.log('Chat response status:', response.status); // Debug
-                const data = await response.json();
-                console.log('Chat response data:', data); // Debug
-                spinner.classList.add('hidden');
-                if (response.ok) {
-                    conversation.innerHTML += `<p class="bot-message">Gemini: ${data.response}</p>`;
-                } else {
-                    conversation.innerHTML += `<p class="bot-message">Error: ${data.detail || 'Unknown error'}</p>`;
-                }
-                conversation.scrollTop = conversation.scrollHeight;
-            } catch (error) {
-                console.error('Chat fetch error:', error); // Debug
-                spinner.classList.add('hidden');
-                conversation.innerHTML += `<p class="bot-message">Error: ${error.message}</p>`;
-                conversation.scrollTop = conversation.scrollHeight;
+        try {
+            const response = await fetch('/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ message })
+            });
+            const data = await response.json();
+            spinner.classList.add('hidden');
+            if (response.ok) {
+                conversation.innerHTML += `<p class="bot-message">Gemini: ${data.response}</p>`;
+            } else {
+                conversation.innerHTML += `<p class="bot-message">Error: ${data.detail}</p>`;
             }
-        });
-    } else {
-        console.error('Chatbot form not found');
-    }
+            conversation.scrollTop = conversation.scrollHeight;
+        } catch (error) {
+            spinner.classList.add('hidden');
+            conversation.innerHTML += `<p class="bot-message">Error: ${error.message}</p>`;
+            conversation.scrollTop = conversation.scrollHeight;
+        }
+    });
 
     // Form Submissions for Other Functionalities
     const forms = {
@@ -224,76 +180,108 @@ document.addEventListener('DOMContentLoaded', () => {
 
     Object.keys(forms).forEach(formId => {
         const form = document.getElementById(formId);
-        if (!form) {
-            console.error(`Form with ID ${formId} not found`);
-            return;
-        }
         form.addEventListener('submit', async (e) => {
             e.preventDefault();
-            console.log(`Submitting form: ${formId}`); // Debug
             const formData = new FormData();
             const responseCard = form.nextElementSibling;
-            let spinner = form.querySelector('.loading-spinner');
-            if (!spinner) {
-                spinner = document.createElement('div');
-                spinner.className = 'loading-spinner hidden';
-                form.appendChild(spinner);
-            }
-
-            // Collect form data
-            const textInput = form.querySelector('textarea, input[type="text"]');
-            const fileInput = form.querySelector('input[type="file"]');
-            if (textInput && textInput.value.trim()) {
-                formData.append('text', textInput.value.trim());
-            }
-            if (fileInput && fileInput.files.length > 0) {
-                formData.append('file', fileInput.files[0]);
-            }
-
-            // Validate input
-            if (!textInput.value.trim() && (!fileInput || fileInput.files.length === 0)) {
-                console.log(`No input provided for ${formId}`); // Debug
-                responseCard.classList.remove('hidden');
-                responseCard.innerHTML = '<p class="error">Please provide text or a file.</p>';
-                return;
-            }
-
-            spinner.classList.remove('hidden');
+            const spinner = form.querySelector('.loading-spinner');
             responseCard.classList.add('hidden');
             responseCard.innerHTML = '';
+            spinner.classList.remove('hidden');
+
+            if (formId === 'summarize-form') {
+                formData.append('text', form.querySelector('input[type="text"]').value);
+            } else if (formId === 'summarize-file-form') {
+                const file = form.querySelector('input[type="file"]').files[0];
+                if (!file) {
+                    responseCard.innerHTML = `<p class="text-red-500">Please select a file.</p>`;
+                    responseCard.classList.remove('hidden');
+                    spinner.classList.add('hidden');
+                    return;
+                }
+                formData.append('file', file);
+            } else if (formId === 'translate-text-form') {
+                const text = form.querySelector('input[type="text"]').value;
+                const lang = form.querySelector('select[name="language"]').value;
+                formData.append('text', `Translate to ${lang}: ${text}`);
+            } else if (formId === 'translate-file-form') {
+                const file = form.querySelector('input[type="file"]').files[0];
+                const lang = form.querySelector('select[name="language"]').value;
+                if (!file) {
+                    responseCard.innerHTML = `<p class="text-red-500">Please select a file.</p>`;
+                    responseCard.classList.remove('hidden');
+                    spinner.classList.add('hidden');
+                    return;
+                }
+                formData.append('file', file);
+                formData.append('text', `Translate to ${lang}`);
+            } else if (formId === 'file-qa-form') {
+                const file = form.querySelector('input[type="file"]').files[0];
+                const text = form.querySelector('input[type="text"]').value;
+                if (!file) {
+                    responseCard.innerHTML = `<p class="text-red-500">Please select a file.</p>`;
+                    responseCard.classList.remove('hidden');
+                    spinner.classList.add('hidden');
+                    return;
+                }
+                formData.append('file', file);
+                formData.append('text', text);
+            } else if (formId === 'image-caption-form') {
+                const file = form.querySelector('input[type="file"]').files[0];
+                if (!file) {
+                    responseCard.innerHTML = `<p class="text-red-500">Please select an image.</p>`;
+                    responseCard.classList.remove('hidden');
+                    spinner.classList.add('hidden');
+                    return;
+                }
+                formData.append('file', file);
+            } else if (formId === 'visual-qa-form') {
+                const file = form.querySelector('input[type="file"]').files[0];
+                const text = form.querySelector('input[type="text"]').value;
+                if (!file) {
+                    responseCard.innerHTML = `<p class="text-red-500">Please select an image.</p>`;
+                    responseCard.classList.remove('hidden');
+                    spinner.classList.add('hidden');
+                    return;
+                }
+                formData.append('file', file);
+                formData.append('text', text);
+            } else if (formId === 'visualize-form') {
+                const file = form.querySelector('input[type="file"]').files[0];
+                const visualizationType = form.querySelector('select[name="visualization-type"]').value;
+                if (!file) {
+                    responseCard.innerHTML = `<p class="text-red-500">Please select a file.</p>`;
+                    responseCard.classList.remove('hidden');
+                    spinner.classList.add('hidden');
+                    return;
+                }
+                formData.append('file', file);
+                formData.append('text', visualizationType);
+            }
 
             try {
-                console.log(`Sending request to ${forms[formId].endpoint} for ${formId}:`, Array.from(formData.entries())); // Debug
                 const response = await fetch(forms[formId].endpoint, {
                     method: 'POST',
                     body: formData
                 });
-                console.log(`Response status for ${formId}:`, response.status); // Debug
                 const data = await response.json();
-                console.log(`Response data for ${formId}:`, data); // Debug
                 spinner.classList.add('hidden');
-                responseCard.classList.remove('hidden');
                 if (response.ok) {
-                    let responseText = data.response;
-                    if (data.type === 'visualization_code') {
-                        responseText = `<pre>${responseText}</pre>`;
-                    } else if (data.type === 'caption' || data.type === 'visual_qa') {
-                        responseText = `${responseText}<br><img src="${data.additional_data.image_url}" alt="Processed Image" style="max-width: 100%; margin-top: 10px;">`;
-                    } else if (data.type === 'file_qa' || data.type === 'file_translation') {
-                        responseText = `${responseText}<br><small>File: ${data.additional_data.file_name}</small>`;
-                    }
-                    responseCard.innerHTML = `<p>${responseText}</p>`;
-                    if (data.message) {
-                        responseCard.innerHTML += `<p><small>${data.message}</small></p>`;
+                    responseCard.innerHTML = `<p>${data.response}</p>`;
+                    if (data.additional_data) {
+                        Object.entries(data.additional_data).forEach(([key, value]) => {
+                            responseCard.innerHTML += `<p><strong>${key.replace('_', ' ').replace(/\b\w/g, char => char.toUpperCase())}:</strong> ${value}</p>`;
+                        });
                     }
+                    responseCard.classList.remove('hidden');
                 } else {
-                    responseCard.innerHTML = `<p class="error">Error: ${data.detail || 'Unknown error'}</p>`;
+                    responseCard.innerHTML = `<p class="text-red-500">Error: ${data.detail}</p>`;
+                    responseCard.classList.remove('hidden');
                 }
             } catch (error) {
-                console.error(`Fetch error for ${formId}:`, error); // Debug
                 spinner.classList.add('hidden');
+                responseCard.innerHTML = `<p class="text-red-500">Error: ${error.message}</p>`;
                 responseCard.classList.remove('hidden');
-                responseCard.innerHTML = `<p class="error">Error: ${error.message}</p>`;
             }
         });
     });