Update static/index.html

static/index.html

@@ -178,6 +178,26 @@
         .chat-input button:hover {
             color: var(--accent-color);
         }
+
+        .file-upload {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .file-upload label {
+            cursor: pointer;
+            color: var(--text-secondary-color);
+            transition: color 0.3s ease;
+        }
+
+        .file-upload label:hover {
+            color: var(--accent-color);
+        }
+
+        .file-upload input[type="file"] {
+            display: none;
+        }
     </style>
 </head>
 
@@ -195,6 +215,10 @@
         </div>
 
         <div class="chat-input">
+            <div class="file-upload">
+                <label for="fileInput" title="Upload File"><i class='bx bx-upload'></i></label>
+                <input type="file" id="fileInput" accept=".pdf,.docx,.txt,image/*,.xlsx,.xls">
+            </div>
             <input type="text" id="chatInput" placeholder="Ask me anything...">
             <button type="button" id="sendButton"><i class='bx bx-send'></i></button>
         </div>
@@ -204,6 +228,7 @@
         const chatMessages = document.getElementById('chatMessages');
         const chatInput = document.getElementById('chatInput');
         const sendButton = document.getElementById('sendButton');
+        const fileInput = document.getElementById('fileInput');
 
         // Function to add a message to the chat
         function addMessage(sender, text) {
@@ -220,41 +245,46 @@
         // Function to handle user input
         async function handleUserInput() {
             const userInput = chatInput.value.trim();
-            if (!userInput) return;
+            const file = fileInput.files[0];
+
+            if (!userInput && !file) {
+                alert("Please enter a prompt or upload a file.");
+                return;
+            }
 
             // Add user message to the chat
-            addMessage('user', userInput);
-            chatInput.value = ''; // Clear the input field
+            if (userInput) addMessage('user', userInput);
+            if (file) addMessage('user', `Uploaded file: ${file.name}`);
 
-            // Determine the functionality based on the input
-            let endpoint = '/summarize'; // Default to summarization
-            let payload = { text: userInput };
+            // Clear the input fields
+            chatInput.value = '';
+            fileInput.value = '';
 
-            if (userInput.startsWith("/caption")) {
-                endpoint = '/caption';
-                payload = { file: "image.jpg" }; // Placeholder for image upload
-            } else if (userInput.startsWith("/qa")) {
-                endpoint = '/answer';
-                payload = { text: userInput.replace("/qa", "").trim(), question: "What is this about?" };
-            } else if (userInput.startsWith("/vqa")) {
-                endpoint = '/vqa';
-                payload = { file: "image.jpg", question: userInput.replace("/vqa", "").trim() };
-            } else if (userInput.startsWith("/visualize")) {
+            // Prepare the payload
+            const formData = new FormData();
+            if (file) formData.append('file', file);
+            if (userInput) formData.append('text', userInput);
+
+            // Determine the endpoint based on the input
+            let endpoint = '/summarize'; // Default to summarization
+            if (file && file.type.startsWith('image/')) {
+                endpoint = userInput ? '/vqa' : '/caption';
+            } else if (file && file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
                 endpoint = '/visualize';
-                payload = { file: "data.xlsx", request: userInput.replace("/visualize", "").trim() };
-            } else if (userInput.startsWith("/translate")) {
+                formData.append('request', userInput || "Generate a bar chart");
+            } else if (userInput && userInput.startsWith("/translate")) {
                 endpoint = '/translate';
-                payload = { text: userInput.replace("/translate", "").trim(), target_language: "fr" };
+                formData.append('target_language', 'fr'); // Default to French
+            } else if (userInput && userInput.startsWith("/qa")) {
+                endpoint = '/answer';
+                formData.append('question', userInput.replace("/qa", "").trim());
             }
 
             // Send the input to the backend
             try {
                 const response = await fetch(endpoint, {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(payload),
+                    body: formData,
                 });
                 const data = await response.json();
                 addMessage('bot', JSON.stringify(data));
@@ -272,4 +302,6 @@
     </script>
 </body>
 
-</html>
+</html>
+
+