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); }); }