Update static/scripts.js

static/scripts.js

@@ -1,5 +1,5 @@
 document.addEventListener('DOMContentLoaded', () => {
-    // Animation des étoiles (si vous utilisez un canvas)
+    // Animation des étoiles
     const canvas = document.querySelector('canvas.stars');
     if (canvas) {
         const ctx = canvas.getContext('2d');
@@ -22,9 +22,9 @@ document.addEventListener('DOMContentLoaded', () => {
         }
 
         function animate() {
-            ctx.fillStyle = '#2A3F9D'; // Bleu nuit vibrant
+            ctx.fillStyle = '#2A3F9D';
             ctx.fillRect(0, 0, canvas.width, canvas.height);
-            ctx.fillStyle = '#E6E6FA'; // Blanc doux pour étoiles
+            ctx.fillStyle = '#E6E6FA';
             stars.forEach(star => {
                 ctx.beginPath();
                 ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
@@ -73,9 +73,6 @@ document.addEventListener('DOMContentLoaded', () => {
         modal.querySelectorAll('.loading-spinner').forEach(spinner => {
             spinner.classList.add('hidden');
         });
-        if (modal.id === 'chatbot-modal') {
-            document.getElementById('chatbot-conversation').innerHTML = '';
-        }
         document.querySelectorAll('.function-box').forEach(box => box.classList.remove('shadowed'));
     };
 
@@ -125,6 +122,31 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
+    // Activer le clic sur la zone de drop
+    document.querySelectorAll('.drop-area').forEach(area => {
+        area.addEventListener('click', () => {
+            area.querySelector('input[type="file"]').click();
+        });
+        area.querySelector('input[type="file"]').addEventListener('change', (e) => {
+            const files = e.target.files;
+            const preview = area.querySelector('.file-preview');
+            if (files.length > 0) {
+                area.querySelector('p').textContent = `Selected: ${files[0].name}`;
+                if (files[0].type.startsWith('image/')) {
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        preview.innerHTML = `<img src="${reader.result}" alt="Preview" class="w-24 h-24 object-cover rounded mt-2">`;
+                        preview.classList.remove('hidden');
+                    };
+                    reader.readAsDataURL(files[0]);
+                } else {
+                    preview.innerHTML = `<p class="text-gray-600">${files[0].name}</p>`;
+                    preview.classList.remove('hidden');
+                }
+            }
+        });
+    });
+
     // Notifications toast
     const showToast = (message, type = 'success') => {
         const toast = document.createElement('div');
@@ -140,9 +162,10 @@ document.addEventListener('DOMContentLoaded', () => {
         'summarize-file-form': { endpoint: '/process', intent: 'summarize' },
         'translate-text-form': { endpoint: '/process', intent: 'translate' },
         'translate-file-form': { endpoint: '/process', intent: 'file-translate' },
-        'chatbot-form': { endpoint: '/chat', intent: 'chat' },
         'image-caption-form': { endpoint: '/process', intent: 'image-to-text' },
-        'visual-qa-form': { endpoint: '/process', intent: 'visual-qa' }
+        'visual-qa-form': { endpoint: '/process', intent: 'visual-qa' },
+        'file-qa-form': { endpoint: '/process', intent: 'file-qa' },
+        'visualize-form': { endpoint: '/process', intent: 'visualize' }
     };
 
     Object.keys(forms).forEach(formId => {
@@ -160,9 +183,11 @@ document.addEventListener('DOMContentLoaded', () => {
             responseCard.innerHTML = '';
 
             const formData = new FormData(form);
+            formData.append('intent', forms[formId].intent);
+
             if (formId === 'summarize-form') {
                 formData.append('text', form.querySelector('input[type="text"]').value);
-            } else if (formId === 'summarize-file-form' || formId === 'translate-file-form' || formId === 'image-caption-form' || formId === 'visual-qa-form') {
+            } else if (formId === 'summarize-file-form' || formId === 'translate-file-form' || formId === 'image-caption-form' || formId === 'visual-qa-form' || formId === 'file-qa-form' || formId === 'visualize-form') {
                 const file = form.querySelector('input[type="file"]').files[0];
                 if (!file) {
                     responseCard.innerHTML = `<p class="text-red-500">Please select a file.</p>`;
@@ -176,19 +201,8 @@ document.addEventListener('DOMContentLoaded', () => {
                 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 === 'visual-qa-form') {
+            } else if (formId === 'visual-qa-form' || formId === 'file-qa-form' || formId === 'visualize-form') {
                 formData.append('text', form.querySelector('input[type="text"]').value);
-            } else if (formId === 'chatbot-form') {
-                const message = form.querySelector('input[name="message"]').value.trim();
-                if (!message) {
-                    if (spinner) spinner.classList.add('hidden');
-                    showToast('Please enter a message.', 'error');
-                    return;
-                }
-                formData.append('message', message);
-                const conversation = document.getElementById('chatbot-conversation');
-                conversation.innerHTML += `<p class="user-message">You: ${message}</p>`;
-                conversation.scrollTop = conversation.scrollHeight;
             }
 
             try {
@@ -201,6 +215,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 if (spinner) spinner.classList.add('hidden');
                 if (response.ok) {
                     responseCard.innerHTML = `<p>${data.response}</p>`;
+                    if (data.message) {
+                        responseCard.innerHTML += `<p><strong>Message:</strong> ${data.message}</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>`;
@@ -208,11 +225,6 @@ document.addEventListener('DOMContentLoaded', () => {
                     }
                     responseCard.classList.remove('hidden');
                     showToast('Action completed successfully!', 'success');
-                    if (formId === 'chatbot-form') {
-                        const conversation = document.getElementById('chatbot-conversation');
-                        conversation.innerHTML += `<p class="bot-message">Assistant: ${data.response}</p>`;
-                        conversation.scrollTop = conversation.scrollHeight;
-                    }
                 } else {
                     responseCard.innerHTML = `<p class="text-red-500">Error: ${data.detail}</p>`;
                     responseCard.classList.remove('hidden');