Update static/scripts.js

static/scripts.js

@@ -73,8 +73,6 @@ document.addEventListener('DOMContentLoaded', () => {
                         otherBox.classList.add('shadowed');
                     }
                 });
-            } else {
-                console.error(`Modal with ID ${modalId} not found`);
             }
         });
     });
@@ -86,8 +84,6 @@ document.addEventListener('DOMContentLoaded', () => {
             const chatbotModal = document.getElementById('chatbot-modal');
             if (chatbotModal) {
                 chatbotModal.classList.remove('hidden');
-            } else {
-                console.error('Chatbot modal not found');
             }
         });
     }
@@ -163,18 +159,15 @@ document.addEventListener('DOMContentLoaded', () => {
     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';
+                spinner.innerHTML = '<span>Processing...</span>';
                 e.target.appendChild(spinner);
             }
-            if (!message) {
-                console.log('No message provided'); // Debug
-                return;
-            }
+            if (!message) return;
 
             spinner.classList.remove('hidden');
             const conversation = document.getElementById('chatbot-conversation');
@@ -183,15 +176,12 @@ document.addEventListener('DOMContentLoaded', () => {
             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>`;
@@ -200,14 +190,11 @@ document.addEventListener('DOMContentLoaded', () => {
                 }
                 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;
             }
         });
-    } else {
-        console.error('Chatbot form not found');
     }
 
     // Form Submissions for Other Functionalities
@@ -224,35 +211,41 @@ document.addEventListener('DOMContentLoaded', () => {
 
     Object.keys(forms).forEach(formId => {
         const form = document.getElementById(formId);
-        if (!form) {
-            console.error(`Form with ID ${formId} not found`);
-            return;
-        }
+        if (!form) 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';
+                spinner.innerHTML = '<span>Processing...</span>';
                 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());
+            const languageSelect = form.querySelector('select[name="language"]');
+            const visualizationSelect = form.querySelector('select[name="visualization-type"]');
+            let textValue = textInput && textInput.value.trim() ? textInput.value.trim() : '';
+
+            if (languageSelect && textValue && (formId === 'translate-text-form' || formId === 'translate-file-form')) {
+                textValue = `Translate to ${languageSelect.value}: ${textValue}`;
+            }
+            if (textValue) {
+                formData.append('text', textValue);
             }
             if (fileInput && fileInput.files.length > 0) {
                 formData.append('file', fileInput.files[0]);
             }
+            if (visualizationSelect) {
+                formData.append('text', visualizationSelect.value);
+            }
 
             // Validate input
-            if (!textInput.value.trim() && (!fileInput || fileInput.files.length === 0)) {
-                console.log(`No input provided for ${formId}`); // Debug
+            if (!textValue && (!fileInput || fileInput.files.length === 0)) {
                 responseCard.classList.remove('hidden');
                 responseCard.innerHTML = '<p class="error">Please provide text or a file.</p>';
                 return;
@@ -262,15 +255,23 @@ document.addEventListener('DOMContentLoaded', () => {
             responseCard.classList.add('hidden');
             responseCard.innerHTML = '';
 
+            // Display uploaded image locally for caption and visual QA
+            let localImageUrl = '';
+            if (fileInput && fileInput.files.length > 0 && (formId === 'image-caption-form' || formId === 'visual-qa-form')) {
+                const file = fileInput.files[0];
+                localImageUrl = await new Promise(resolve => {
+                    const reader = new FileReader();
+                    reader.onload = () => resolve(reader.result);
+                    reader.readAsDataURL(file);
+                });
+            }
+
             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) {
@@ -278,7 +279,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     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;">`;
+                        responseText = `${responseText}<br><img src="${localImageUrl}" alt="Uploaded 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>`;
                     }
@@ -290,7 +291,6 @@ document.addEventListener('DOMContentLoaded', () => {
                     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.classList.remove('hidden');
                 responseCard.innerHTML = `<p class="error">Error: ${error.message}</p>`;