Update static/application.js

static/application.js

@@ -1,62 +1,84 @@
 const inputField = document.querySelector(".qt input");
-    const icons = document.querySelectorAll(".icons i");
-    const convo = document.querySelector(".convo");
-  
-    // Create hidden file inputs dynamically
-    const imageInput = document.createElement("input");
-    imageInput.type = "file";
-    imageInput.accept = "image/*";
-    imageInput.style.display = "none";
-  
-    const docInput = document.createElement("input");
-    docInput.type = "file";
-    docInput.accept = ".pdf,.docx,.pptx,.xlsx";
-    docInput.style.display = "none";
-  
-    document.body.appendChild(imageInput);
-    document.body.appendChild(docInput);
-  
-    let selectedFile = null;
-    let selectedType = null;
-  
-    // Icon click handlers
-    icons[0].addEventListener("click", () => imageInput.click()); // image icon
-    icons[1].addEventListener("click", () => docInput.click());   // file icon
-    icons[2].addEventListener("click", handleSubmit);             // send icon
-  
-    imageInput.addEventListener("change", () => {
-      selectedFile = imageInput.files[0];
-      selectedType = "Image";
-      showSelectedFile(selectedFile.name, "🖼️");
+const icons = document.querySelectorAll(".icons i");
+const convo = document.querySelector(".convo");
+
+// Create hidden file inputs dynamically
+const imageInput = document.createElement("input");
+imageInput.type = "file";
+imageInput.accept = "image/*";
+imageInput.style.display = "none";
+
+const docInput = document.createElement("input");
+docInput.type = "file";
+docInput.accept = ".pdf,.docx,.pptx,.xlsx";
+docInput.style.display = "none";
+
+document.body.appendChild(imageInput);
+document.body.appendChild(docInput);
+
+let selectedFile = null;
+let selectedType = null;
+
+// Icon click handlers
+icons[0].addEventListener("click", () => imageInput.click()); // image icon
+icons[1].addEventListener("click", () => docInput.click());   // file icon
+icons[2].addEventListener("click", handleSubmit);             // send icon
+
+imageInput.addEventListener("change", () => {
+  selectedFile = imageInput.files[0];
+  selectedType = "Image";
+  showSelectedFile(selectedFile.name, "🖼️");
+});
+
+docInput.addEventListener("change", () => {
+  selectedFile = docInput.files[0];
+  selectedType = "Document";
+  showSelectedFile(selectedFile.name, "📄");
+});
+
+function showSelectedFile(fileName, icon) {
+  convo.innerHTML = `
+    <div style="padding: 0.8rem; background-color: #f3f3f3; border-radius: 10px; margin: 1rem;">
+      ${icon} <strong>Selected file:</strong> ${fileName}
+    </div>
+  `;
+}
+
+async function handleSubmit() {
+  const question = inputField.value.trim();
+  if (!question && !selectedFile) {
+    alert("Please type a question or select a file.");
+    return;
+  }
+
+  const formData = new FormData();
+  formData.append("question", question);
+  formData.append("file", selectedFile);
+
+  convo.innerHTML = `<div style="padding: 1rem; background: #eee; border-radius: 8px;">Processing your request...</div>`;
+
+  try {
+    const response = await fetch("http://localhost:8000/predict", {
+      method: "POST",
+      body: formData,
     });
-  
-    docInput.addEventListener("change", () => {
-      selectedFile = docInput.files[0];
-      selectedType = "Document";
-      showSelectedFile(selectedFile.name, "📄");
-    });
-  
-    function handleSubmit() {
-      const question = inputField.value.trim();
-      if (!question && !selectedFile) {
-        alert("Please type a question or select a file.");
-        return;
-      }
-  
-      convo.innerHTML = `
-        <div style="padding: 1rem; border-radius: 10px; background-color: #f1f1f1; margin: 1rem;">
-          <strong>Question:</strong> ${question || "(No question)"}<br>
-          ${selectedFile ? `<strong>${selectedType}:</strong> ${selectedFile.name}` : ""}
-          <br><em>(Simulated - No backend yet)</em>
-        </div>
-      `;
-    }
-  
-    function showSelectedFile(fileName, icon) {
+
+    const result = await response.json();
+    if (result.answer) {
       convo.innerHTML = `
-        <div style="padding: 0.8rem; background-color: #f3f3f3; border-radius: 10px; margin: 1rem;">
-          ${icon} <strong>Selected file:</strong> ${fileName}
+        <div style="padding: 1rem; background: #e1f7e1; border-radius: 10px; margin: 1rem;">
+          <strong>Question:</strong> ${question}<br>
+          ${selectedFile ? `<strong>${selectedType}:</strong> ${selectedFile.name}<br>` : ""}
+          <strong>Answer:</strong> ${result.answer}
         </div>
       `;
+    } else {
+      convo.innerHTML = `<div style="color: red;">Error: ${result.error}</div>`;
     }
-    inputField.value=""
+  } catch (error) {
+    convo.innerHTML = `<div style="color: red;">Request failed: ${error.message}</div>`;
+  }
+
+  // Reset input field
+  inputField.value = "";
+}