Create static/script.js

static/script.js

@@ -0,0 +1,62 @@
+function sendMessage() {
+    const inputField = document.getElementById('userInput');
+    const message = inputField.value.trim();
+    const imageUpload = document.getElementById('imageUpload').files[0];
+    const complexity = document.getElementById('complexity').value;
+    const model = document.getElementById('model').value; // Get the selected model
+    const chatbox = document.getElementById('chatbox');
+
+    if (message === "" && !imageUpload) return;
+
+    // Append user message
+    const userMessageDiv = document.createElement('div');
+    userMessageDiv.classList.add('user-message');
+    const userText = document.createElement('span');
+    userText.textContent = message;
+    userMessageDiv.appendChild(userText);
+
+    if (imageUpload) {
+        const imagePreview = document.createElement('img');
+        imagePreview.src = URL.createObjectURL(imageUpload);
+        imagePreview.style.maxWidth = '100px';
+        imagePreview.style.maxHeight = '100px';
+        imagePreview.style.marginTop = '10px';
+        userMessageDiv.appendChild(imagePreview);
+    }
+
+    chatbox.appendChild(userMessageDiv);
+
+    // Clear input field
+    inputField.value = '';
+    document.getElementById('imageUpload').value = '';
+
+    // Scroll chatbox to the bottom
+    chatbox.scrollTop = chatbox.scrollHeight;
+
+    // Send request to Flask backend
+    const formData = new FormData();
+    formData.append('image', imageUpload);
+    formData.append('question', message);
+    formData.append('complexity', complexity);
+    formData.append('model', model);  // Append selected model
+
+    fetch('/ask', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        const botMessageDiv = document.createElement('div');
+        botMessageDiv.classList.add('bot-message');
+        const botText = document.createElement('span');
+        botText.textContent = data.answer;
+        botMessageDiv.appendChild(botText);
+        chatbox.appendChild(botMessageDiv);
+
+        // Scroll chatbox to the bottom
+        chatbox.scrollTop = chatbox.scrollHeight;
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+}