Update static/application.js

static/application.js

@@ -1,7 +1,9 @@
+
 /*const inputField = document.querySelector(".qt input");
 const icons = document.querySelectorAll(".icons i");
 const convo = document.querySelector(".convo");
-const send = document.querySelector(".sendingQA")
+const send = document.querySelector(".sendingQA");
+
 // Create hidden file inputs dynamically
 const imageInput = document.createElement("input");
 imageInput.type = "file";
@@ -22,7 +24,7 @@ let selectedType = null;
 // Icon click handlers
 icons[0].addEventListener("click", () => imageInput.click()); // image icon
 icons[1].addEventListener("click", () => docInput.click());   // file icon
-send.addEventListener("click", handleSubmit);             // send 
+send.addEventListener("click", handleSubmit);                 // send button
 
 imageInput.addEventListener("change", () => {
   selectedFile = imageInput.files[0];
@@ -37,11 +39,13 @@ docInput.addEventListener("change", () => {
 });
 
 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>
-  `;
+  const fileNotice = document.createElement("div");
+  fileNotice.style.padding = "0.8rem";
+  fileNotice.style.backgroundColor = "#f3f3f3";
+  fileNotice.style.borderRadius = "10px";
+  fileNotice.style.margin = "1rem";
+  fileNotice.innerHTML = `${icon} <strong>Selected file:</strong> ${fileName}`;
+  convo.appendChild(fileNotice);
 }
 
 async function handleSubmit() {
@@ -55,7 +59,26 @@ async function handleSubmit() {
   formData.append("question", question);
   formData.append("file", selectedFile);
 
-  convo.innerHTML = `<div style="padding: 1rem; background: #eee; border-radius: 8px;">Processing your request...</div>`;
+  // Show question in convo
+  const userBlock = document.createElement("div");
+  userBlock.style.padding = "1rem";
+  userBlock.style.background = "#e0e7ff";
+  userBlock.style.borderRadius = "10px";
+  userBlock.style.margin = "1rem";
+  userBlock.innerHTML = `
+    <strong>Question:</strong> ${question}<br>
+    ${selectedFile ? `<strong>${selectedType}:</strong> ${selectedFile.name}` : ""}
+  `;
+  convo.appendChild(userBlock);
+
+  // Show loading message
+  const loadingBlock = document.createElement("div");
+  loadingBlock.style.padding = "1rem";
+  loadingBlock.style.background = "#eee";
+  loadingBlock.style.borderRadius = "10px";
+  loadingBlock.style.margin = "1rem";
+  loadingBlock.innerText = "Processing your request...";
+  convo.appendChild(loadingBlock);
 
   try {
     const response = await fetch("/predict", {
@@ -64,23 +87,32 @@ async function handleSubmit() {
     });
 
     const result = await response.json();
-    if (result.answer) {
-      convo.innerHTML = `
-        <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>`;
-    }
+
+    loadingBlock.remove(); // remove loading message
+
+    const answerBlock = document.createElement("div");
+    answerBlock.style.padding = "1rem";
+    answerBlock.style.background = "#e1f7e1";
+    answerBlock.style.borderRadius = "10px";
+    answerBlock.style.margin = "1rem";
+    answerBlock.innerHTML = `
+      <strong>Answer:</strong> ${result.answer || result.error || "No response"}
+    `;
+    convo.appendChild(answerBlock);
   } catch (error) {
-    convo.innerHTML = `<div style="color: red;">Request failed: ${error.message}</div>`;
+    loadingBlock.remove();
+
+    const errorBlock = document.createElement("div");
+    errorBlock.style.color = "red";
+    errorBlock.style.margin = "1rem";
+    errorBlock.innerText = `Request failed: ${error.message}`;
+    convo.appendChild(errorBlock);
   }
 
-  // Reset input field
+  // Reset input field and file
   inputField.value = "";
+  selectedFile = null;
+  selectedType = null;
 }
 */
 const inputField = document.querySelector(".qt input");
@@ -102,13 +134,23 @@ docInput.style.display = "none";
 document.body.appendChild(imageInput);
 document.body.appendChild(docInput);
 
+// Create audio toggle checkbox
+const audioToggle = document.createElement("div");
+audioToggle.innerHTML = `
+  <label style="margin-left: 1rem;">
+    🔊 Play Audio Answer: 
+    <input type="checkbox" id="audioToggle" checked>
+  </label>
+`;
+document.querySelector(".qt").appendChild(audioToggle);
+
 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
-send.addEventListener("click", handleSubmit);                 // send button
+icons[0].addEventListener("click", () => imageInput.click());
+icons[1].addEventListener("click", () => docInput.click());
+send.addEventListener("click", handleSubmit);
 
 imageInput.addEventListener("change", () => {
   selectedFile = imageInput.files[0];
@@ -143,7 +185,6 @@ async function handleSubmit() {
   formData.append("question", question);
   formData.append("file", selectedFile);
 
-  // Show question in convo
   const userBlock = document.createElement("div");
   userBlock.style.padding = "1rem";
   userBlock.style.background = "#e0e7ff";
@@ -155,7 +196,6 @@ async function handleSubmit() {
   `;
   convo.appendChild(userBlock);
 
-  // Show loading message
   const loadingBlock = document.createElement("div");
   loadingBlock.style.padding = "1rem";
   loadingBlock.style.background = "#eee";
@@ -172,17 +212,23 @@ async function handleSubmit() {
 
     const result = await response.json();
 
-    loadingBlock.remove(); // remove loading message
+    loadingBlock.remove();
 
     const answerBlock = document.createElement("div");
     answerBlock.style.padding = "1rem";
     answerBlock.style.background = "#e1f7e1";
     answerBlock.style.borderRadius = "10px";
     answerBlock.style.margin = "1rem";
-    answerBlock.innerHTML = `
-      <strong>Answer:</strong> ${result.answer || result.error || "No response"}
-    `;
+    answerBlock.innerHTML = `<strong>Answer:</strong> ${result.answer || result.error || "No response"}`;
     convo.appendChild(answerBlock);
+
+    // Check audio toggle and play if available
+    const playAudio = document.getElementById("audioToggle").checked;
+    if (playAudio && result.audio_url) {
+      const audioPlayer = new Audio(result.audio_url);
+      audioPlayer.play();
+    }
+
   } catch (error) {
     loadingBlock.remove();
 
@@ -193,7 +239,6 @@ async function handleSubmit() {
     convo.appendChild(errorBlock);
   }
 
-  // Reset input field and file
   inputField.value = "";
   selectedFile = null;
   selectedType = null;