Update static/scripts.js

static/scripts.js

@@ -1,207 +1,288 @@
-
 document.addEventListener('DOMContentLoaded', () => {
-    const functionBoxes = document.querySelectorAll('.function-box');
-    const modals = document.querySelectorAll('.modal');
-    const closeModalButtons = document.querySelectorAll('.close-modal');
-    const tabButtons = document.querySelectorAll('.tab-btn');
-    const chatbotIcon = document.querySelector('.chatbot-icon');
-    const chatbotModal = document.querySelector('.chatbot-modal');
-    const chatForm = document.querySelector('#chat-form');
-    const chatInput = document.querySelector('#chat-input');
-    const conversation = document.querySelector('.chatbot-conversation');
-
-    // Toggle modal and apply shadowed effect
-    functionBoxes.forEach(box => {
-        box.addEventListener('click', () => {
-            const modalId = box.getAttribute('data-modal');
-            const modal = document.getElementById(modalId);
-
-            // Ajouter la classe .active à la boîte cliquée et la retirer des autres
-            functionBoxes.forEach(b => b.classList.remove('active'));
-            box.classList.add('active');
+    // Starry Background Animation
+    const stars = document.createElement('canvas');
+    stars.className = 'stars';
+    document.body.appendChild(stars);
+    const ctx = stars.getContext('2d');
+    stars.width = window.innerWidth;
+    stars.height = window.innerHeight;
+    const starArray = [];
+    for (let i = 0; i < 100; i++) {
+        starArray.push({
+            x: Math.random() * stars.width,
+            y: Math.random() * stars.height,
+            radius: Math.random() * 2,
+            opacity: Math.random()
+        });
+    }
+    function animateStars() {
+        ctx.clearRect(0, 0, stars.width, stars.height);
+        starArray.forEach(star => {
+            ctx.beginPath();
+            ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
+            ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
+            ctx.fill();
+            star.opacity += (Math.random() - 0.5) * 0.05;
+            if (star.opacity > 1) star.opacity = 1;
+            if (star.opacity < 0) star.opacity = 0;
+        });
+        requestAnimationFrame(animateStars);
+    }
+    animateStars();
 
-            if (modal) {
-                modal.classList.remove('hidden');
-                functionBoxes.forEach(b => {
-                    if (b !== box) {
-                        b.classList.add('shadowed');
-                    }
-                });
+    // Card Hover Effects
+    const cards = document.querySelectorAll(".card");
+    cards.forEach(card => {
+        card.addEventListener("mouseenter", () => {
+            if (!card.classList.contains('shadowed')) {
+                card.style.transition = "transform 0.4s ease-in-out";
+                card.style.transform = "scale(1.05) rotate(0.5deg)";
+            }
+        });
+        card.addEventListener("mouseleave", () => {
+            if (!card.classList.contains('shadowed')) {
+                card.style.transform = "scale(1) rotate(0deg)";
             }
         });
     });
 
-    // Close modal
-    closeModalButtons.forEach(button => {
-        button.addEventListener('click', () => {
-            modals.forEach(modal => modal.classList.add('hidden'));
-            functionBoxes.forEach(box => {
-                box.classList.remove('shadowed');
-                box.classList.remove('active'); // Retirer .active lors de la fermeture
+    // Window Resize Handler for Canvas
+    window.addEventListener('resize', () => {
+        stars.width = window.innerWidth;
+        stars.height = window.innerHeight;
+        starArray.length = 0;
+        for (let i = 0; i < 100; i++) {
+            starArray.push({
+                x: Math.random() * stars.width,
+                y: Math.random() * stars.height,
+                radius: Math.random() * 2,
+                opacity: Math.random()
             });
-        });
+        }
     });
 
-    // Tab switching
-    tabButtons.forEach(button => {
-        button.addEventListener('click', () => {
-            const modalContent = button.closest('.modal-content');
-            const targetId = button.getAttribute('data-tab');
-
-            // Toggle active class on buttons
-            modalContent.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
-            button.classList.add('active');
-
-            // Toggle tab content
-            modalContent.querySelectorAll('.tab-content').forEach(content => {
-                content.classList.add('hidden');
-                if (content.id === targetId) {
-                    content.classList.remove('hidden');
+    // Box Click to Open Modal
+    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');
                 }
             });
         });
     });
 
-    // Toggle chatbot modal
-    if (chatbotIcon && chatbotModal) {
-        chatbotIcon.addEventListener('click', () => {
-            chatbotModal.classList.toggle('hidden');
-            functionBoxes.forEach(box => {
-                box.classList.toggle('shadowed', !chatbotModal.classList.contains('hidden'));
+    // Chatbot Icon Click
+    document.querySelector('.chatbot-icon').addEventListener('click', () => {
+        document.getElementById('chatbot-modal').classList.remove('hidden');
+    });
+
+    // 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');
+            forms.forEach(form => form.reset());
+            const responseCards = closeBtn.closest('.modal').querySelectorAll('.response-card');
+            responseCards.forEach(card => {
+                card.classList.add('hidden');
+                card.innerHTML = '';
+            });
+            const spinners = closeBtn.closest('.modal').querySelectorAll('.loading-spinner');
+            spinners.forEach(spinner => spinner.classList.add('hidden'));
+            const dropAreas = closeBtn.closest('.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 = '';
+            }
+            // Remove dimming from all function-box elements
+            document.querySelectorAll('.function-box').forEach(box => {
+                box.classList.remove('shadowed');
             });
         });
-    }
+    });
 
-    // Handle chat form submission
-    if (chatForm) {
-        chatForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const message = chatInput.value.trim();
-            if (!message) return;
+    // Tab Switching for Summarize and Translate
+    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'));
+            btn.classList.add('active');
+            btn.closest('.modal').querySelectorAll('.tab-content').forEach(content => {
+                content.classList.add('hidden');
+                if (content.dataset.tab === tab) content.classList.remove('hidden');
+            });
+        });
+    });
 
-            // Add user message
-            const userMessage = document.createElement('p');
-            userMessage.classList.add('user-message');
-            userMessage.textContent = message;
-            conversation.appendChild(userMessage);
+    // File Drop Handler
+    window.handleDrop = function(event, dropArea) {
+        event.preventDefault();
+        const fileInput = dropArea.querySelector('input[type="file"]');
+        const files = event.dataTransfer.files;
+        if (files.length > 0) {
+            fileInput.files = files;
+            dropArea.querySelector('p').textContent = `Selected: ${files[0].name}`;
+        }
+    };
 
-            // Show loading state
-            const submitButton = chatForm.querySelector('.cosmic-btn');
-            submitButton.classList.add('loading');
-            submitButton.innerHTML = '<span class="spinner"></span>Loading...';
-            submitButton.disabled = true;
+    // 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;
 
-            try {
-                const response = await fetch('/chat', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ message })
-                });
-                const data = await response.json();
+        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 = '';
 
-                // Add bot response
-                const botMessage = document.createElement('p');
-                botMessage.classList.add('bot-message');
-                botMessage.textContent = data.response;
-                conversation.appendChild(botMessage);
-            } catch (error) {
-                console.error('Error:', error);
-                const errorMessage = document.createElement('p');
-                errorMessage.classList.add('bot-message');
-                errorMessage.textContent = 'Sorry, something went wrong.';
-                conversation.appendChild(errorMessage);
+        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>`;
             }
-
-            // Reset form
-            chatInput.value = '';
-            submitButton.classList.remove('loading');
-            submitButton.innerHTML = 'Send';
-            submitButton.disabled = false;
-
-            // Scroll to bottom
             conversation.scrollTop = conversation.scrollHeight;
-        });
-    }
+        } catch (error) {
+            spinner.classList.add('hidden');
+            conversation.innerHTML += `<p class="bot-message">Error: ${error.message}</p>`;
+            conversation.scrollTop = conversation.scrollHeight;
+        }
+    });
 
-    // Handle form submissions for other modals
-    document.querySelectorAll('.process-form').forEach(form => {
+    // Form Submissions for Other Functionalities
+    const forms = {
+        'summarize-form': { endpoint: '/process', intent: 'summarize' },
+        'summarize-file-form': { endpoint: '/process', intent: 'summarize' },
+        'translate-text-form': { endpoint: '/process', intent: 'translate' },
+        'translate-file-form': { endpoint: '/process', intent: 'file-translate' },
+        'file-qa-form': { endpoint: '/process', intent: 'file-qa' },
+        'image-caption-form': { endpoint: '/process', intent: 'image-to-text' },
+        'visual-qa-form': { endpoint: '/process', intent: 'visual-qa' },
+        'visualize-form': { endpoint: '/process', intent: 'visualize' }
+    };
+
+    Object.keys(forms).forEach(formId => {
+        const form = document.getElementById(formId);
         form.addEventListener('submit', async (e) => {
             e.preventDefault();
-            const formData = new FormData(form);
-            const responseCard = form.querySelector('.response-card');
-            const submitButton = form.querySelector('.cosmic-btn');
+            const formData = new FormData();
+            const responseCard = form.nextElementSibling;
+            const spinner = form.querySelector('.loading-spinner');
+            responseCard.classList.add('hidden');
+            responseCard.innerHTML = '';
+            spinner.classList.remove('hidden');
 
-            // Show loading state
-            submitButton.classList.add('loading');
-            submitButton.innerHTML = '<span class="spinner"></span>Loading...';
-            submitButton.disabled = true;
+            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 {
-                const response = await fetch('/process', {
+                const response = await fetch(forms[formId].endpoint, {
                     method: 'POST',
                     body: formData
                 });
                 const data = await response.json();
-
-                // Display response
-                responseCard.classList.remove('hidden');
-                responseCard.innerHTML = '';
-
-                if (data.type === 'caption' && data.additional_data && data.additional_data.image_url) {
-                    const img = document.createElement('img');
-                    img.src = data.additional_data.image_url;
-                    img.classList.add('response-image');
-                    responseCard.appendChild(img);
-                    const caption = document.createElement('p');
-                    caption.textContent = data.response;
-                    responseCard.appendChild(caption);
-                } else if (data.type === 'visual_qa' && data.additional_data) {
-                    const img = document.createElement('img');
-                    img.src = data.additional_data.image_url;
-                    img.classList.add('response-image');
-                    responseCard.appendChild(img);
-                    const question = document.createElement('p');
-                    question.innerHTML = `<strong>Question:</strong> ${data.additional_data.question}`;
-                    responseCard.appendChild(question);
-                    const answer = document.createElement('p');
-                    answer.innerHTML = `<strong>Answer:</strong> ${data.response}`;
-                    responseCard.appendChild(answer);
-                } else if (data.type === 'file_qa' && data.additional_data) {
-                    const question = document.createElement('p');
-                    question.innerHTML = `<strong>Question:</strong> ${data.additional_data.question}`;
-                    responseCard.appendChild(question);
-                    const fileInfo = document.createElement('p');
-                    fileInfo.innerHTML = `<strong>File:</strong> ${data.additional_data.file_name}`;
-                    responseCard.appendChild(fileInfo);
-                    const answer = document.createElement('p');
-                    answer.innerHTML = `<strong>Answer:</strong> ${data.response}`;
-                    responseCard.appendChild(answer);
-                } else if (data.type === 'file_translation' && data.additional_data) {
-                    const fileInfo = document.createElement('p');
-                    fileInfo.innerHTML = `<strong>File:</strong> ${data.additional_data.file_name}`;
-                    responseCard.appendChild(fileInfo);
-                    const langInfo = document.createElement('p');
-                    langInfo.innerHTML = `<strong>Translated to:</strong> ${data.additional_data.target_language}`;
-                    responseCard.appendChild(langInfo);
-                    const translation = document.createElement('p');
-                    translation.innerHTML = `<strong>Translation:</strong> ${data.response}`;
-                    responseCard.appendChild(translation);
-                } else {
+                spinner.classList.add('hidden');
+                if (response.ok) {
                     responseCard.innerHTML = `<p>${data.response}</p>`;
-                    if (data.message) {
-                        responseCard.innerHTML += `<p><em>${data.message}</em></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="text-red-500">Error: ${data.detail}</p>`;
+                    responseCard.classList.remove('hidden');
                 }
             } catch (error) {
-                console.error('Error:', error);
+                spinner.classList.add('hidden');
+                responseCard.innerHTML = `<p class="text-red-500">Error: ${error.message}</p>`;
                 responseCard.classList.remove('hidden');
-                responseCard.innerHTML = '<p>Sorry, something went wrong.</p>';
             }
-
-            // Reset form
-            submitButton.classList.remove('loading');
-            submitButton.innerHTML = 'Submit';
-            submitButton.disabled = false;
         });
     });
-});
+});