Update templates/index.html

templates/index.html

@@ -21,7 +21,6 @@
             --space-glow: 0 0 8px rgba(199, 125, 255, 0.6);
             --space-nebula: linear-gradient(135deg, #7b2cbf 0%, #3a0ca3 50%, #4361ee 100%);
         }
-
         body {
             font-family: 'Quicksand', sans-serif;
             background-color: var(--space-bg-primary);
@@ -29,12 +28,10 @@
             min-height: 100vh;
             overflow-x: hidden;
         }
-
         h1, h2, h3, h4, h5, h6 {
             font-family: 'Space Mono', monospace;
             letter-spacing: 1px;
         }
-
         .cosmic-gradient {
             background: var(--space-nebula);
             -webkit-background-clip: text;
@@ -42,23 +39,18 @@
             background-clip: text;
             text-shadow: var(--space-glow);
         }
-
         .bg-cosmic {
             background-color: var(--space-bg-secondary);
         }
-
         .text-cosmic {
             color: var(--space-text-primary);
         }
-
         .text-cosmic-secondary {
             color: var(--space-text-secondary);
         }
-
         .border-cosmic {
             border-color: rgba(123, 44, 191, 0.3);
         }
-
         .cosmic-card {
             background: rgba(10, 10, 45, 0.7);
             backdrop-filter: blur(10px);
@@ -69,7 +61,6 @@
             overflow: hidden;
             position: relative;
         }
-
         .cosmic-card::before {
             content: '';
             position: absolute;
@@ -82,16 +73,13 @@
             transition: opacity 0.3s ease;
             pointer-events: none;
         }
-
         .cosmic-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 8px 30px rgba(123, 44, 191, 0.3);
         }
-
         .cosmic-card:hover::before {
             opacity: 1;
         }
-
         .cosmic-button {
             background: linear-gradient(135deg, var(--space-accent-primary) 0%, var(--space-accent-secondary) 100%);
             color: white;
@@ -99,7 +87,6 @@
             overflow: hidden;
             transition: all 0.3s ease;
         }
-
         .cosmic-button::before {
             content: '';
             position: absolute;
@@ -110,29 +97,24 @@
             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
             transition: all 0.8s ease;
         }
-
         .cosmic-button:hover {
             transform: translateY(-2px);
             box-shadow: 0 5px 15px rgba(123, 44, 191, 0.4);
         }
-
         .cosmic-button:hover::before {
             left: 100%;
         }
-
         .cosmic-input {
             background: rgba(5, 5, 24, 0.6);
             border: 1px solid rgba(123, 44, 191, 0.5);
             color: var(--space-text-primary);
             transition: all 0.3s ease;
         }
-
         .cosmic-input:focus {
             outline: none;
             border-color: var(--space-accent-secondary);
             box-shadow: 0 0 0 3px rgba(199, 125, 255, 0.2), var(--space-glow);
         }
-
         .stars-container {
             position: fixed;
             top: 0;
@@ -142,19 +124,16 @@
             z-index: -1;
             overflow: hidden;
         }
-
         .star {
             position: absolute;
             background-color: #ffffff;
             border-radius: 50%;
             animation: twinkle 4s infinite ease-in-out;
         }
-
         @keyframes twinkle {
             0%, 100% { opacity: 0.2; transform: scale(0.8); }
             50% { opacity: 1; transform: scale(1.2); }
         }
-
         #particlesCanvas {
             position: fixed;
             top: 0;
@@ -163,29 +142,24 @@
             height: 100%;
             z-index: -1;
         }
-
         .feature-icon {
             transition: transform 0.3s ease;
         }
-
         .cosmic-card:hover .feature-icon {
             transform: scale(1.2);
         }
-
         .message {
             max-width: 80%;
             padding: 0.8rem 1.2rem;
             border-radius: 12px;
             animation: messageAppear 0.3s ease;
         }
-
         .user-message {
             align-self: flex-end;
             background: linear-gradient(135deg, var(--space-accent-primary) 0%, var(--space-accent-secondary) 100%);
             color: white;
             border-bottom-right-radius: 0;
         }
-
         .bot-message {
             align-self: flex-start;
             background: rgba(5, 5, 24, 0.8);
@@ -193,7 +167,6 @@
             border-bottom-left-radius: 0;
             border: 1px solid rgba(123, 44, 191, 0.3);
         }
-
         @keyframes messageAppear {
             from {
                 opacity: 0;
@@ -204,39 +177,33 @@
                 transform: translateY(0);
             }
         }
-
         .cosmic-upload__dropzone {
             background: rgba(10, 10, 45, 0.6);
             border: 2px dashed rgba(123, 44, 191, 0.5);
             transition: all 0.3s ease;
             cursor: pointer;
         }
-
         .cosmic-upload__dropzone.active {
             background: rgba(10, 10, 45, 0.8);
             border-color: var(--space-accent-secondary);
             box-shadow: 0 0 20px rgba(123, 44, 191, 0.3);
         }
-
         .feature-transition {
             transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                         opacity 0.5s ease;
             opacity: 0;
             transform: translateY(20px);
         }
-
         .feature-transition.active {
             opacity: 1;
             transform: translateY(0);
         }
-
         .cosmos-loader {
             width: 80px;
             height: 80px;
             position: relative;
             margin: 2rem auto;
         }
-
         .cosmos-loader::before,
         .cosmos-loader::after {
             content: '';
@@ -250,25 +217,21 @@
             border-top-color: var(--space-accent-primary);
             animation: spin 1.5s linear infinite;
         }
-
         .cosmos-loader::before {
             border-top-color: var(--space-accent-primary);
             z-index: 1;
             animation-duration: 1.5s;
         }
-
         .cosmos-loader::after {
             border-top-color: var(--space-accent-secondary);
             border-right-color: var(--space-accent-secondary);
             z-index: 0;
             animation-duration: 2s;
         }
-
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-
         .planet {
             width: 150px;
             height: 150px;
@@ -277,7 +240,6 @@
             position: relative;
             box-shadow: 0 0 30px rgba(123, 44, 191, 0.5);
         }
-
         .planet::before {
             content: '';
             position: absolute;
@@ -289,7 +251,6 @@
             left: 50%;
             transform: translate(-50%, -50%) rotateX(80deg);
         }
-
         .orbit {
             position: absolute;
             top: 50%;
@@ -298,7 +259,6 @@
             border-radius: 50%;
             transform: translate(-50%, -50%);
         }
-
         .moon {
             position: absolute;
             background: rgba(10, 10, 45, 0.9);
@@ -308,7 +268,6 @@
             animation: orbit 20s linear infinite;
             box-shadow: 0 0 10px rgba(199, 125, 255, 0.4);
         }
-
         @keyframes orbit {
             0% { transform: rotate(0deg) translateX(100px); }
             100% { transform: rotate(360deg) translateX(100px); }
@@ -652,7 +611,6 @@
                     const star = document.createElement('div');
                     star.classList.add('star');
                     
-                    // Random positioning
                     const x = Math.random() * 100;
                     const y = Math.random() * 100;
                     const delay = Math.random() * 5;
@@ -690,11 +648,11 @@
                     
                     getRandomColor() {
                         const colors = [
-                            'rgba(123, 44, 191, 0.8)',  // Purple
-                            'rgba(199, 125, 255, 0.8)', // Light purple
-                            'rgba(0, 180, 216, 0.8)',   // Cyan
-                            'rgba(67, 97, 238, 0.8)',   // Blue
-                            'rgba(255, 255, 255, 0.8)'  // White
+                            'rgba(123, 44, 191, 0.8)',
+                            'rgba(199, 125, 255, 0.8)',
+                            'rgba(0, 180, 216, 0.8)',
+                            'rgba(67, 97, 238, 0.8)',
+                            'rgba(255, 255, 255, 0.8)'
                         ];
                         return colors[Math.floor(Math.random() * colors.length)];
                     }
@@ -703,7 +661,6 @@
                         this.x += this.speedX;
                         this.y += this.speedY;
                         
-                        // Wrap around edges
                         if (this.x > canvas.width) this.x = 0;
                         if (this.x < 0) this.x = canvas.width;
                         if (this.y > canvas.height) this.y = 0;
@@ -725,7 +682,6 @@
                 function animate() {
                     ctx.clearRect(0, 0, canvas.width, canvas.height);
                     
-                    // Draw connections between nearby particles
                     ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
                     ctx.lineWidth = 0.5;
                     
@@ -744,7 +700,6 @@
                         }
                     }
                     
-                    // Update and draw particles
                     particles.forEach(particle => {
                         particle.update();
                         particle.draw();
@@ -761,7 +716,6 @@
                 const features = document.querySelectorAll('.feature-transition');
                 
                 features.forEach((feature, index) => {
-                    // Add delay based on index
                     setTimeout(() => {
                         feature.classList.add('active');
                     }, index * 150);
@@ -772,40 +726,74 @@
             const chatInput = document.getElementById('chatInput');
             const sendButton = document.getElementById('sendButton');
             const chatMessages = document.getElementById('chatMessages');
+            const dropzone = document.getElementById('fileDropzone');
+            const fileInput = document.getElementById('fileInput');
+            const previewArea = document.getElementById('filePreviewArea');
             
             function addMessage(text, isUser = false) {
                 const messageDiv = document.createElement('div');
                 messageDiv.classList.add('message');
                 messageDiv.classList.add(isUser ? 'user-message' : 'bot-message');
                 messageDiv.textContent = text;
-                
                 chatMessages.appendChild(messageDiv);
                 chatMessages.scrollTop = chatMessages.scrollHeight;
             }
             
-            function handleUserMessage() {
+            async function handleUserMessage() {
                 const message = chatInput.value.trim();
-                if (message === '') return;
+                const files = fileInput.files;
                 
-                addMessage(message, true);
-                chatInput.value = '';
+                if (message === '' && files.length === 0) return;
                 
-                // Simulate AI response
-                setTimeout(() => {
-                    let response;
-                    if (message.toLowerCase().includes('help')) {
-                        response = "I can help with document summarization, image description, question answering, translation, and data visualization. What would you like to know?";
-                    } else if (message.toLowerCase().includes('summarize')) {
-                        response = "To summarize a document, simply upload it using the upload area or drag and drop. I'll analyze it and provide a concise summary.";
-                    } else if (message.toLowerCase().includes('translate')) {
-                        response = "I can translate text to various languages. Just tell me what you want to translate and the target language.";
-                    } else if (message.toLowerCase().includes('image') || message.toLowerCase().includes('picture')) {
-                        response = "For image description or visual Q&A, upload an image and I'll analyze it for you.";
-                    } else {
-                        response = "I'm your Cosmic AI Assistant. I can help with various tasks including summarization, image analysis, and answering questions. What would you like me to do?";
+                if (message) {
+                    addMessage(message, true);
+                    chatInput.value = '';
+                }
+                
+                const formData = new FormData();
+                if (message) {
+                    formData.append('text', message);
+                }
+                if (files.length > 0) {
+                    for (let file of files) {
+                        formData.append('file', file);
+                    }
+                }
+                
+                try {
+                    const loader = document.createElement('div');
+                    loader.classList.add('cosmos-loader');
+                    chatMessages.appendChild(loader);
+                    
+                    const response = await fetch('/process', {
+                        method: 'POST',
+                        body: formData,
+                    });
+                    
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
                     }
-                    addMessage(response);
-                }, 1000);
+                    
+                    const result = await response.json();
+                    addMessage(result.response);
+                    
+                    if (result.additional_data) {
+                        const additionalInfo = JSON.stringify(result.additional_data, null, 2);
+                        addMessage(`Additional Info: ${additionalInfo}`);
+                    }
+                    
+                    if (files.length > 0) {
+                        fileInput.value = '';
+                        previewArea.innerHTML = '';
+                        previewArea.classList.add('hidden');
+                    }
+                } catch (error) {
+                    console.error('Error:', error);
+                    addMessage('Sorry, something went wrong. Please try again.');
+                } finally {
+                    const loader = chatMessages.querySelector('.cosmos-loader');
+                    if (loader) loader.remove();
+                }
             }
             
             sendButton.addEventListener('click', handleUserMessage);
@@ -816,10 +804,6 @@
             });
             
             // File Upload Handling
-            const dropzone = document.getElementById('fileDropzone');
-            const fileInput = document.getElementById('fileInput');
-            const previewArea = document.getElementById('filePreviewArea');
-            
             dropzone.addEventListener('click', () => {
                 fileInput.click();
             });
@@ -830,13 +814,12 @@
             });
             
             dropzone.addEventListener('dragleave', () => {
-                dropzone.classList.remove('active');
+                drop sculpted by the cosmic winds of progresszone.classList.remove('active');
             });
             
             dropzone.addEventListener('drop', (e) => {
                 e.preventDefault();
                 dropzone.classList.remove('active');
-                
                 if (e.dataTransfer.files.length) {
                     handleFiles(e.dataTransfer.files);
                 }
@@ -894,7 +877,6 @@
                     previewArea.appendChild(fileElement);
                 });
                 
-                // Simulate processing response
                 addMessage(`I've received ${files.length} file(s). How would you like me to process them?`);
             }
             
@@ -906,7 +888,6 @@
             // Handle window resize
             window.addEventListener('resize', () => {
                 createStars();
-                
                 const canvas = document.getElementById('particlesCanvas');
                 canvas.width = window.innerWidth;
                 canvas.height = window.innerHeight;