Update static/scripts.js

static/scripts.js

@@ -65,42 +65,55 @@ document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('.function-box').forEach(box => {
         box.addEventListener('click', () => {
             const modalId = box.dataset.modal;
-            document.getElementById(modalId).classList.remove('hidden');
-            // Dim other function-box elements
-            document.querySelectorAll('.function-box').forEach(otherBox => {
-                if (otherBox !== box) {
-                    otherBox.classList.add('shadowed');
-                }
-            });
+            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`);
+            }
         });
     });
 
     // Chatbot Icon Click
-    document.querySelector('.chatbot-icon').addEventListener('click', () => {
-        document.getElementById('chatbot-modal').classList.remove('hidden');
-    });
+    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');
+            }
+        });
+    }
 
     // Close Modal
     document.querySelectorAll('.close-modal').forEach(closeBtn => {
         closeBtn.addEventListener('click', () => {
-            closeBtn.closest('.modal').classList.add('hidden');
-            // Reset forms and responses
-            const forms = closeBtn.closest('.modal').querySelectorAll('form');
+            const modal = closeBtn.closest('.modal');
+            modal.classList.add('hidden');
+            const forms = modal.querySelectorAll('form');
             forms.forEach(form => form.reset());
-            const responseCards = closeBtn.closest('.modal').querySelectorAll('.response-card');
+            const responseCards = modal.querySelectorAll('.response-card');
             responseCards.forEach(card => {
                 card.classList.add('hidden');
                 card.innerHTML = '';
             });
-            const spinners = closeBtn.closest('.modal').querySelectorAll('.loading-spinner');
+            const spinners = modal.querySelectorAll('.loading-spinner');
             spinners.forEach(spinner => spinner.classList.add('hidden'));
-            const dropAreas = closeBtn.closest('.modal').querySelectorAll('.drop-area p');
+            const dropAreas = modal.querySelectorAll('.drop-area p');
             dropAreas.forEach(p => p.textContent = 'Drop File Here or Click to Choose');
-            // Clear chatbot conversation
-            if (closeBtn.closest('.modal').id === 'chatbot-modal') {
-                document.getElementById('chatbot-conversation').innerHTML = '';
+            if (modal.id === 'chatbot-modal') {
+                const conversation = document.getElementById('chatbot-conversation');
+                if (conversation) {
+                    conversation.innerHTML = '';
+                }
             }
-            // Remove dimming from all function-box elements
             document.querySelectorAll('.function-box').forEach(box => {
                 box.classList.remove('shadowed');
             });
@@ -111,9 +124,10 @@ document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('.tab-btn').forEach(btn => {
         btn.addEventListener('click', () => {
             const tab = btn.dataset.tab;
-            btn.closest('.modal').querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+            const modal = btn.closest('.modal');
+            modal.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
             btn.classList.add('active');
-            btn.closest('.modal').querySelectorAll('.tab-content').forEach(content => {
+            modal.querySelectorAll('.tab-content').forEach(content => {
                 content.classList.add('hidden');
                 if (content.dataset.tab === tab) content.classList.remove('hidden');
             });
@@ -131,40 +145,70 @@ 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
-    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;
+    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;
+            }
 
-        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 {
-            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>`;
+            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;
             }
-            conversation.scrollTop = conversation.scrollHeight;
-        } catch (error) {
-            spinner.classList.add('hidden');
-            conversation.innerHTML += `<p class="bot-message">Error: ${error.message}</p>`;
-            conversation.scrollTop = conversation.scrollHeight;
-        }
-    });
+        });
+    } else {
+        console.error('Chatbot form not found');
+    }
 
     // Form Submissions for Other Functionalities
     const forms = {
@@ -180,108 +224,76 @@ 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;
-            const spinner = form.querySelector('.loading-spinner');
-            responseCard.classList.add('hidden');
-            responseCard.innerHTML = '';
-            spinner.classList.remove('hidden');
+            let spinner = form.querySelector('.loading-spinner');
+            if (!spinner) {
+                spinner = document.createElement('div');
+                spinner.className = 'loading-spinner hidden';
+                form.appendChild(spinner);
+            }
 
-            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);
+            // 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');
+            responseCard.classList.add('hidden');
+            responseCard.innerHTML = '';
+
             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) {
-                    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>`;
-                        });
+                    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.classList.remove('hidden');
                 } else {
-                    responseCard.innerHTML = `<p class="text-red-500">Error: ${data.detail}</p>`;
-                    responseCard.classList.remove('hidden');
+                    responseCard.innerHTML = `<p class="error">Error: ${data.detail || 'Unknown error'}</p>`;
                 }
             } 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>`;
             }
         });
     });