Update static/script.js

static/script.js

@@ -1,15 +1,17 @@
 document.getElementById("submit-btn").addEventListener("click", async () => {
     const context = document.getElementById("context").value.trim();
-    const questions = document.getElementById("question").value.trim(); // fixed ID
+    const questions = document.getElementById("question").value.trim();
     const output = document.getElementById("answer-box");
     const history = document.getElementById("history-list");
 
+    // Clear previous answers
+    output.innerHTML = "";
     output.textContent = "⏳ Generating answers...";
 
-    const res = await fetch("/predict", {  // fixed URL
+    const res = await fetch("/predict", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ context, question: questions }) // key must match backend
+        body: JSON.stringify({ context, question: questions })
     });
 
     const data = await res.json();
@@ -19,11 +21,30 @@ document.getElementById("submit-btn").addEventListener("click", async () => {
         return;
     }
 
-    let text = "";
+    // Clear loading text
+    output.innerHTML = "";
+
+    // Display each Q&A nicely
     data.results.forEach((r, i) => {
-        text += `Q${i + 1}: ${r.question}\nAnswer: ${r.answer}\nConfidence: ${r.score}\n${"-".repeat(50)}\n`;
+        const qaDiv = document.createElement("div");
+        qaDiv.className = "mb-4 p-3 bg-indigo-50 dark:bg-gray-800 rounded-lg shadow";
+
+        const qElem = document.createElement("p");
+        qElem.innerHTML = `<strong>Q${i + 1}:</strong> ${r.question}`;
+        qElem.className = "font-semibold";
+
+        const aElem = document.createElement("p");
+        aElem.innerHTML = `<strong>Answer:</strong> ${r.answer}`;
+
+        const sElem = document.createElement("p");
+        sElem.innerHTML = `<strong>Confidence:</strong> ${r.score}`;
+
+        qaDiv.appendChild(qElem);
+        qaDiv.appendChild(aElem);
+        qaDiv.appendChild(sElem);
+
+        output.appendChild(qaDiv);
     });
-    output.textContent = text;
 
     // Add to history
     const li = document.createElement("li");
@@ -31,7 +52,7 @@ document.getElementById("submit-btn").addEventListener("click", async () => {
     history.prepend(li);
 });
 
-// Fixed dark mode toggle
+// Dark mode toggle
 document.getElementById("dark-toggle").addEventListener("click", () => {
     document.body.classList.toggle("dark-mode");
 });