Update static/application.js

static/application.js

@@ -115,12 +115,25 @@ async function handleSubmit() {
   selectedType = null;
 }
 */
+// frontend.js
 const inputField = document.querySelector(".qt input");
 const icons = document.querySelectorAll(".icons i");
 const convo = document.querySelector(".convo");
 const send = document.querySelector(".sendingQA");
+const audioToggle = document.createElement("input");
+audioToggle.type = "checkbox";
+audioToggle.checked = true;
+audioToggle.id = "audioToggle";
+audioToggle.style.marginLeft = "1rem";
+
+const audioLabel = document.createElement("label");
+audioLabel.htmlFor = "audioToggle";
+audioLabel.innerText = "🔊 Audio";
+audioLabel.style.marginLeft = "0.5rem";
+
+document.querySelector(".controls").appendChild(audioToggle);
+document.querySelector(".controls").appendChild(audioLabel);
 
-// Create hidden file inputs dynamically
 const imageInput = document.createElement("input");
 imageInput.type = "file";
 imageInput.accept = "image/*";
@@ -134,20 +147,9 @@ 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());
 icons[1].addEventListener("click", () => docInput.click());
 send.addEventListener("click", handleSubmit);
@@ -155,7 +157,7 @@ send.addEventListener("click", handleSubmit);
 imageInput.addEventListener("change", () => {
   selectedFile = imageInput.files[0];
   selectedType = "Image";
-  showSelectedFile(selectedFile.name, "🖼️");
+  showSelectedFile(selectedFile.name, "🗾️");
 });
 
 docInput.addEventListener("change", () => {
@@ -184,6 +186,7 @@ async function handleSubmit() {
   const formData = new FormData();
   formData.append("question", question);
   formData.append("file", selectedFile);
+  formData.append("audio", audioToggle.checked);
 
   const userBlock = document.createElement("div");
   userBlock.style.padding = "1rem";
@@ -211,7 +214,6 @@ async function handleSubmit() {
     });
 
     const result = await response.json();
-
     loadingBlock.remove();
 
     const answerBlock = document.createElement("div");
@@ -219,16 +221,17 @@ async function handleSubmit() {
     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);
-
-    // 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();
+    answerBlock.innerHTML = `<strong>Answer:</strong> ${result.answer}`;
+
+    if (result.audio_url) {
+      const audio = document.createElement("audio");
+      audio.controls = true;
+      audio.src = result.audio_url;
+      answerBlock.appendChild(document.createElement("br"));
+      answerBlock.appendChild(audio);
     }
 
+    convo.appendChild(answerBlock);
   } catch (error) {
     loadingBlock.remove();