PRMSChallengeOct

Sleeping

App Files Files Community

vineelagampa

TheFrogGod commited on Sep 22, 2025

Commit

648e2f7

verified ·

1 Parent(s): ac78206

Update web/analyzer.html (#20)

Browse files

- Update web/analyzer.html (7519932defb2fabbb6b61363212cfab4b47c38b7)

Co-authored-by: Aanya Choudhary <TheFrogGod@users.noreply.huggingface.co>

Files changed (1) hide show

web/analyzer.html +197 -274

web/analyzer.html CHANGED Viewed

@@ -1,4 +1,4 @@
-web/analyzer.html<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -6,34 +6,34 @@ web/analyzer.html<!DOCTYPE html>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body class="bg-[var(--latte-cream)] font-sans text-gray-800 min-h-screen">
     <!-- NAVBAR -->
     <nav
       class="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-white/20 border-b border-white/30 shadow-md"
     >
-      <div class="flex justify-between items-center w-full px-6 py-4">
-        <!-- Logo -->
         <a
           href="index.html"
           class="text-2xl font-bold text-black hover:text-[var(--tropical-indigo)] transition"
         >
-          CTRL + ALT + HEAL
-        </a>
-        <ul class="hidden md:flex space-x-6 font-medium text-gray-800">
-          <li><a href="index.html" class="nav-link ">Home</a></li>
-          <li><a href="profile.html" class="nav-link ">Profile</a></li>
           <li><a href="analyzer.html" class="nav-link">Analyzer</a></li>
-          <li><a href="past_data.html" class="nav-link ">Past Reports</a></li>
-          <li id="authNavItem"><a href="login.html" class="nav-link">Login</a></li>
         </ul>
         <!-- Hamburger Menu -->
         <button
           id="hamburger"
-          class="md:hidden text-[var(--latte-cream)] text-2xl"
         >
           ☰
         </button>
@@ -44,75 +44,31 @@ web/analyzer.html<!DOCTYPE html>
         id="mobile-menu"
         class="hidden flex-col space-y-4 bg-white/30 backdrop-blur-lg border border-white/20 rounded-xl shadow-lg mt-2 p-4 mx-6 md:hidden"
       >
-        <li>
-          <a
-            href="index.html"
-            class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
-            >Home</a
-          >
-        </li>
-        <li>
-          <a
-            href="analyzer.html"
-            class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
-            >Analyzer</a
-          >
-        </li>
-        <li>
-          <a
-            href="profile.html"
-            class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
-            >Profile</a
-          >
-        </li>
-        <li>
-          <a
-            href="login.html"
-            class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
-            >Login</a
-          >
-        </li>
-        <li>
-          <a
-            href="about.html"
-            class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
-            >About</a
-          >
-        </li>
-          >
-        </li>
       </ul>
     </nav>
-    <!--Shared helpers (API base + query params) -->
     <script src="script.js"></script>
     <script>
       const hamburger = document.getElementById("hamburger");
       const mobileMenu = document.getElementById("mobile-menu");
-      hamburger.addEventListener("click", () => {
-        mobileMenu.classList.toggle("hidden");
-      });
-      // Underline the active page only
       const currentPath = window.location.pathname.split("/").pop();
       document.querySelectorAll(".nav-link").forEach((link) => {
-        if (link.getAttribute("href") === currentPath) {
-          link.classList.add("active-page"); // we'll style this in CSS
-        }
-      });
-      document.querySelectorAll("#mobile-menu a").forEach((link) => {
-        if (link.getAttribute("href") === currentPath) {
           link.classList.add("active-page");
-        }
       });
     </script>
-    <!-- CHANGE MARKER TO USE THIS  -->
-    <!-- secound change marker-->
     <main class="max-w-5xl mx-auto px-4 mb-16 pt-24">
       <!-- Upload Section -->
       <div class="bg-white border border-gray-200 rounded-lg p-6 shadow mb-6">
@@ -134,45 +90,79 @@ web/analyzer.html<!DOCTYPE html>
         </p>
       </div>
-      <!-- AI Findings -->
       <div
         class="bg-[var(--latte-cream)] border border-[var(--wisteria)] rounded-lg p-6 mb-8"
       >
-        <h3 class="text-lg font-semibold mb-3">AI Findings</h3>
         <div
-          id="recommendations-output"
-          class="bg-[#F9FAFB] text-sm border border-[var(--wisteria)] rounded p-4 space-y-4"
         >
-          Findings and Recommendations will appear here.
         </div>
       </div>
-      <!-- Chatbot -->
       <div
         class="bg-[var(--latte-cream)] border border-[var(--wisteria)] rounded-lg p-6 mb-8"
       >
-        <h3 class="text-lg font-semibold mb-3">Ask Chatbot</h3>
         <div
-          id="chat-output"
-          class="space-y-2 h-48 overflow-auto text-sm rounded p-4"
         >
-          <p><strong>Chatbot:</strong> Ask me something about your report</p>
-        </div>
-        <div class="flex mt-4 gap-2">
-          <input
-            type="text"
-            id="user-question"
-            placeholder="Ask a question..."
-            class="flex-1 rounded px-3 py-2 focus:outline-none"
-          />
-          <button id="ask-btn" class="btn-primary px-4 py-2 rounded">
-            Ask
-          </button>
         </div>
       </div>
     </main>
-    <!-- Firebase -->
     <script type="module">
       import {
         getFirestore,
@@ -205,47 +195,39 @@ web/analyzer.html<!DOCTYPE html>
       window.firestoreDb = db;
       window.firestoreHelpers = { collection, doc, addDoc, serverTimestamp };
-    onAuthStateChanged(auth, (user) => {
-  const authNavItem = document.getElementById("authNavItem");
-// Desktop links
-const homeNavDesktop = document.querySelector('ul.md\\:flex li a[href="index.html"]')?.parentElement;
-const profileNavDesktop = document.querySelector('ul.md\\:flex li a[href="profile.html"]')?.parentElement;
-  const pastNavDesktop = document.querySelector('ul.md\\:flex li a[href="past_data.html"]')?.parentElement;
-  // Mobile links
-  const profileNavMobile = document.querySelector('#mobile-menu a[href="profile.html"]')?.parentElement;
-  const pastNavMobile = document.querySelector('#mobile-menu a[href="past_data.html"]')?.parentElement;
-  const homeNavMobile = document.querySelector('#mobile-menu a[href="index.html"]')?.parentElement;
-  if (authNavItem) {
-    if (user) {
-      authNavItem.innerHTML =
-        '<button onclick="logout()" class="hover:text-[#6B9080] text-red-600">Logout</button>';
-      // Hide Home
-      if (homeNavDesktop) homeNavDesktop.style.display = "none";
-      if (homeNavMobile) homeNavMobile.style.display = "none";
-            // Show Profile and Past Reports
-      if (profileNavDesktop) profileNavDesktop.style.display = "block";
-      if (pastNavDesktop) pastNavDesktop.style.display = "block";
-      if (profileNavMobile) profileNavMobile.style.display = "block";
-      if (pastNavMobile) pastNavMobile.style.display = "block";
-    } else {
-      authNavItem.innerHTML =
-        '<a href="login.html" class="hover:text-[#6B9080]">Login</a>';
-      // Show Home
-      if (homeNavDesktop) homeNavDesktop.style.display = "block";
-      if (homeNavMobile) homeNavMobile.style.display = "block";
-       // Hide Profile and Past Reports
-       if (profileNavDesktop) profileNavDesktop.style.display = "none";
-      if (pastNavDesktop) pastNavDesktop.style.display = "none";
-      if (profileNavMobile) profileNavMobile.style.display = "none";
-      if (pastNavMobile) pastNavMobile.style.display = "none";
-    }
-  }
-});
       window.logout = async () => {
         try {
@@ -258,6 +240,7 @@ const profileNavDesktop = document.querySelector('ul.md\\:flex li a[href="profil
       };
     </script>
     <script type="module">
       import {
         pipeline,
@@ -265,41 +248,14 @@ const profileNavDesktop = document.querySelector('ul.md\\:flex li a[href="profil
       } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0";
       const loadingEl = document.getElementById("loading");
-      //const textOutput = document.getElementById("text-output");
       const recsOutput = document.getElementById("recommendations-output");
-      const findingsOutput = document.getElementById(
-        "detected-measurement-results"
-      );
       const authStatus = document.getElementById("auth-status");
       let extractedText = "";
       let currentUser = null;
-      document
-        .getElementById("pdf-upload")
-        .addEventListener("change", function () {
-          loadingEl.textContent = this.files.length
-            ? `File selected: ${this.files[0].name}`
-            : "No file uploaded yet.";
-        });
-      const saveAnalysis = async (uid, payload) => {
-        try {
-          const docRef = await firebase
-            .firestore()
-            .collection("users")
-            .doc(uid)
-            .collection("analyses")
-            .add({
-              ...payload,
-              createdAt: serverTimestamp(),
-            });
-          return docRef.id;
-        } catch (e) {
-          console.error("Failed to save analysis:", e);
-        }
-      };
-      const renderRecCard = (rec, idx) => {
         const sev = (rec.severity || "").toLowerCase();
         const sevClass = sev.includes("severe")
           ? "badge-high"
@@ -316,21 +272,21 @@ const profileNavDesktop = document.querySelector('ul.md\\:flex li a[href="profil
           </div>
           <ul class="rec-content space-y-1">
             <li><em>Recommendations:</em>
-              <ul class="list-disc list-inside ml-6">
-                ${(rec.recommendations || [])
-                  .map((r) => `<li>${r}</li>`)
-                  .join("")}
-              </ul>
             </li>
             <li><em>Treatment:</em> ${
               rec.treatment_suggestions || "Not available"
             }</li>
             <li><em>Home Care:</em>
-              <ul class="list-disc list-inside ml-6">
-                ${(rec.home_care_guidance || [])
-                  .map((r) => `<li>${r}</li>`)
-                  .join("")}
-              </ul>
             </li>
             ${
               rec.info_link
@@ -338,20 +294,40 @@ const profileNavDesktop = document.querySelector('ul.md\\:flex li a[href="profil
                 : ""
             }
           </ul>
-        </div>
-      `;
-      };
       window.onAuthStateChanged(window.firebaseAuth, (user) => {
         currentUser = user;
-        if (user) {
-          authStatus.textContent = `Signed in as ${user.email || user.uid}`;
-        } else {
-          authStatus.textContent =
-            "Not signed in. Sign in to save and view past analyses.";
-        }
       });
       document
         .getElementById("analyze-btn")
         .addEventListener("click", async () => {
@@ -362,7 +338,7 @@ const profileNavDesktop = document.querySelector('ul.md\\:flex li a[href="profil
           }
           loadingEl.textContent = "Processing with AI...";
-          //textOutput.textContent = "";
           recsOutput.textContent = "";
           const formData = new FormData();
@@ -384,119 +360,66 @@ const profileNavDesktop = document.querySelector('ul.md\\:flex li a[href="profil
           }
           extractedText = data.ocr_text || "";
-          //textOutput.textContent = extractedText;
           const recs = Array.isArray(data.Detected_Anomolies)
             ? data.Detected_Anomolies
             : data.Detected_Anomolies
             ? [data.Detected_Anomolies]
             : [];
-          if (data.Detected_Anomolies) {
-            recsOutput.innerHTML = recs
-              .map((rec, i) => renderRecCard(rec, i))
-              .join("");
-          } else {
-            recsOutput.textContent = "No recommendations found.";
-          }
-          const findings = Array.isArray(data.Detected_Measurement_Values)
-            ? data.Detected_Measurement_Values
-            : data.Detected_Measurement_Values
-            ? [data.Detected_Measurement_Values]
-            : [];
-          if (data.Detected_Measurement_Values) {
-            findingsOutput.innerHTML = findings
-              .map((finding, i) => renderRecCard(finding, i))
-              .join("");
-          }
           if (currentUser) {
-            /*await saveAnalysis(currentUser.uid, {
-              reportDate: date,
-              ocr_text: extractedText,
-              resolutions: recs,
-              measurements: findings,
-            });*/
             await postReportToBackend({
               user_id: currentUser.email,
               report_date: new Date(),
               ocr_text: extractedText,
               anomalies: JSON.stringify(recs),
-              measurements: JSON.stringify(findings),
             });
           }
           loadingEl.textContent = "Analysis complete.";
         });
-        async function postReportToBackend(report) {
-          try {
-            const response = await fetch(api('save_report/'), {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify(report),
-            });
-            if (!response.ok) {
-              throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const data = await response.json();
-            console.log('Report successfully sent to backend:', data);
-          } catch (error) {
-            console.error('Error sending report to backend:', error);
-          }
         }
-        document.getElementById("ask-btn").onclick = async () => {
-          const q = document.getElementById("user-question").value.trim();
-          if (!q) return;
-          if (!extractedText) {
-            alert("Please analyze a document first before asking questions.");
-            return;
-          }
-          const chat = document.getElementById("chat-output");
-          chat.innerHTML += `<p><strong>You:</strong> ${q}</p>`;
-          chat.scrollTop = chat.scrollHeight;
-          chat.innerHTML += `<p><strong>Chatbot:</strong> <em>Thinking...</em></p>`;
-          chat.scrollTop = chat.scrollHeight;
-          try {
-            const response = await fetch(api('chat/'), {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({
-                question: q,
-                user_id: currentUser ? currentUser.uid : "anonymous"
-              }),
-            });
-            if (!response.ok) {
-              throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const data = await response.json();
-            //now addign acctual reposnse
-            const messages = chat.querySelectorAll('p');
-            const lastMessage = messages[messages.length - 1];
-            lastMessage.innerHTML = `<strong>Chatbot:</strong> ${data.answer}`;
-          } catch (error) {
-            console.error("Error:", error);
-            const messages = chat.querySelectorAll('p');
-            const lastMessage = messages[messages.length - 1];
-            lastMessage.innerHTML = `<strong>Chatbot:</strong> Sorry, I encountered an error: ${error.message}`;
-          }
-          document.getElementById("user-question").value = "";
-          chat.scrollTop = chat.scrollHeight;
-        };
     </script>
   </body>
-</html>

+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body class="bg-[var(--latte-cream)] font-sans text-gray-800 min-h-screen">
     <!-- NAVBAR -->
     <nav
       class="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-white/20 border-b border-white/30 shadow-md"
     >
+      <div class="flex items-center px-6 py-4 max-w-7xl mx-auto">
         <a
           href="index.html"
           class="text-2xl font-bold text-black hover:text-[var(--tropical-indigo)] transition"
+          >CTRL + ALT + HEAL</a
         >
+        <!-- Desktop Links -->
+        <ul class="hidden md:flex space-x-6 font-medium text-gray-800 ml-auto">
+          <li><a href="index.html" class="nav-link">Home</a></li>
+          <li><a href="profile.html" class="nav-link">Profile</a></li>
           <li><a href="analyzer.html" class="nav-link">Analyzer</a></li>
+          <li><a href="past_data.html" class="nav-link">Past Reports</a></li>
+          <li id="authNavItem">
+            <a href="login.html" class="nav-link">Login</a>
+          </li>
         </ul>
         <!-- Hamburger Menu -->
         <button
           id="hamburger"
+          class="md:hidden text-[var(--latte-cream)] text-2xl ml-auto"
         >
           ☰
         </button>
         id="mobile-menu"
         class="hidden flex-col space-y-4 bg-white/30 backdrop-blur-lg border border-white/20 rounded-xl shadow-lg mt-2 p-4 mx-6 md:hidden"
       >
+        <li><a href="index.html" class="block nav-link">Home</a></li>
+        <li><a href="analyzer.html" class="block nav-link">Analyzer</a></li>
+        <li><a href="profile.html" class="block nav-link">Profile</a></li>
+        <li><a href="login.html" class="block nav-link">Login</a></li>
+        <li><a href="about.html" class="block nav-link">About</a></li>
       </ul>
     </nav>
+    <!-- Shared helpers -->
     <script src="script.js"></script>
     <script>
       const hamburger = document.getElementById("hamburger");
       const mobileMenu = document.getElementById("mobile-menu");
+      hamburger.addEventListener("click", () =>
+        mobileMenu.classList.toggle("hidden")
+      );
+      // Active page underline
       const currentPath = window.location.pathname.split("/").pop();
       document.querySelectorAll(".nav-link").forEach((link) => {
+        if (link.getAttribute("href") === currentPath)
           link.classList.add("active-page");
       });
     </script>
     <main class="max-w-5xl mx-auto px-4 mb-16 pt-24">
       <!-- Upload Section -->
       <div class="bg-white border border-gray-200 rounded-lg p-6 shadow mb-6">
         </p>
       </div>
+      <!-- Extracted Text -->
       <div
         class="bg-[var(--latte-cream)] border border-[var(--wisteria)] rounded-lg p-6 mb-8"
       >
+        <h3 class="text-lg font-semibold mb-3">Extracted Text</h3>
         <div
+          id="text-output"
+          class="whitespace-pre-wrap h-60 overflow-auto bg-[#FAFBFC] text-sm border border-[var(--wisteria)] rounded p-4"
         >
+          OCR results will appear here.
         </div>
       </div>
+      <!-- AI Findings -->
       <div
         class="bg-[var(--latte-cream)] border border-[var(--wisteria)] rounded-lg p-6 mb-8"
       >
+        <h3 class="text-lg font-semibold mb-3">AI Findings</h3>
         <div
+          id="recommendations-output"
+          class="bg-[#F9FAFB] text-sm border border-[var(--wisteria)] rounded p-4 space-y-4"
         >
+          Findings and Recommendations will appear here.
         </div>
       </div>
     </main>
+    <!-- Floating Chat Button -->
+    <button
+      id="chat-toggle"
+      class="fixed bottom-6 right-6 bg-[var(--tropical-indigo)] text-white px-5 py-3 rounded-full shadow-lg hover:scale-105 transition"
+    >
+      💬 Chat
+    </button>
+    <!-- Chatbot Drawer -->
+    <div
+      id="chat-drawer"
+      class="fixed top-16 right-0 w-96 max-w-full h-[calc(100%-4rem)] bg-white shadow-lg border-l border-gray-200 transform translate-x-full transition-transform duration-300 ease-in-out z-40 flex flex-col"
+    >
+      <div class="flex justify-between items-center p-4 border-b">
+        <h3 class="text-lg font-semibold">Ask Chatbot</h3>
+        <button id="chat-close" class="text-gray-600 hover:text-black text-xl">
+          ✖
+        </button>
+      </div>
+      <div id="chat-output" class="flex-1 overflow-auto p-4 space-y-2 text-sm">
+        <p><strong>Chatbot:</strong> Ask me something about your report</p>
+      </div>
+      <div class="flex gap-2 p-4 border-t">
+        <input
+          type="text"
+          id="user-question"
+          placeholder="Ask a question..."
+          class="flex-1 rounded px-3 py-2 focus:outline-none border"
+        />
+        <button id="ask-btn" class="btn-primary px-4 py-2 rounded">Ask</button>
+      </div>
+    </div>
+    <script>
+      const chatDrawer = document.getElementById("chat-drawer");
+      const chatToggle = document.getElementById("chat-toggle");
+      const chatClose = document.getElementById("chat-close");
+      chatToggle.addEventListener("click", () =>
+        chatDrawer.classList.toggle("translate-x-full")
+      );
+      chatClose.addEventListener("click", () =>
+        chatDrawer.classList.add("translate-x-full")
+      );
+    </script>
+    <!-- Firebase Auth + Firestore -->
     <script type="module">
       import {
         getFirestore,
       window.firestoreDb = db;
       window.firestoreHelpers = { collection, doc, addDoc, serverTimestamp };
+      onAuthStateChanged(auth, (user) => {
+        const authNavItem = document.getElementById("authNavItem");
+        const profileNavDesktop = document.querySelector(
+          'ul.md\\:flex li a[href="profile.html"]'
+        )?.parentElement;
+        const pastNavDesktop = document.querySelector(
+          'ul.md\\:flex li a[href="past_data.html"]'
+        )?.parentElement;
+        const profileNavMobile = document.querySelector(
+          '#mobile-menu a[href="profile.html"]'
+        )?.parentElement;
+        const pastNavMobile = document.querySelector(
+          '#mobile-menu a[href="past_data.html"]'
+        )?.parentElement;
+        if (authNavItem) {
+          if (user) {
+            authNavItem.innerHTML =
+              '<button onclick="logout()" class="hover:text-[#6B9080] text-red-600">Logout</button>';
+            if (profileNavDesktop) profileNavDesktop.style.display = "block";
+            if (pastNavDesktop) pastNavDesktop.style.display = "block";
+            if (profileNavMobile) profileNavMobile.style.display = "block";
+            if (pastNavMobile) pastNavMobile.style.display = "block";
+          } else {
+            authNavItem.innerHTML =
+              '<a href="login.html" class="hover:text-[#6B9080]">Login</a>';
+            if (profileNavDesktop) profileNavDesktop.style.display = "none";
+            if (pastNavDesktop) pastNavDesktop.style.display = "none";
+            if (profileNavMobile) profileNavMobile.style.display = "none";
+            if (pastNavMobile) pastNavMobile.style.display = "none";
+          }
+        }
+      });
       window.logout = async () => {
         try {
       };
     </script>
+    <!-- Analyzer + Chatbot -->
     <script type="module">
       import {
         pipeline,
       } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0";
       const loadingEl = document.getElementById("loading");
+      const textOutput = document.getElementById("text-output");
       const recsOutput = document.getElementById("recommendations-output");
+      const chat = document.getElementById("chat-output");
       const authStatus = document.getElementById("auth-status");
       let extractedText = "";
       let currentUser = null;
+      function renderRecCard(rec, idx) {
         const sev = (rec.severity || "").toLowerCase();
         const sevClass = sev.includes("severe")
           ? "badge-high"
           </div>
           <ul class="rec-content space-y-1">
             <li><em>Recommendations:</em>
+              <ul class="list-disc list-inside ml-6">${(
+                rec.recommendations || []
+              )
+                .map((r) => `<li>${r}</li>`)
+                .join("")}</ul>
             </li>
             <li><em>Treatment:</em> ${
               rec.treatment_suggestions || "Not available"
             }</li>
             <li><em>Home Care:</em>
+              <ul class="list-disc list-inside ml-6">${(
+                rec.home_care_guidance || []
+              )
+                .map((r) => `<li>${r}</li>`)
+                .join("")}</ul>
             </li>
             ${
               rec.info_link
                 : ""
             }
           </ul>
+        </div>`;
+      }
       window.onAuthStateChanged(window.firebaseAuth, (user) => {
         currentUser = user;
+        authStatus.textContent = user
+          ? `Signed in as ${user.email || user.uid}`
+          : "Not signed in. Sign in to save and view past analyses.";
       });
+      document
+        .getElementById("pdf-upload")
+        .addEventListener("change", function () {
+          loadingEl.textContent = this.files.length
+            ? `File selected: ${this.files[0].name}`
+            : "No file uploaded yet.";
+        });
+      async function postReportToBackend(report) {
+        try {
+          const response = await fetch(api("save_report/"), {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(report),
+          });
+          if (!response.ok)
+            throw new Error(`HTTP error! status: ${response.status}`);
+          const data = await response.json();
+          console.log("Report sent to backend:", data);
+        } catch (error) {
+          console.error("Error sending report:", error);
+        }
+      }
       document
         .getElementById("analyze-btn")
         .addEventListener("click", async () => {
           }
           loadingEl.textContent = "Processing with AI...";
+          textOutput.textContent = "";
           recsOutput.textContent = "";
           const formData = new FormData();
           }
           extractedText = data.ocr_text || "";
+          textOutput.textContent = extractedText;
           const recs = Array.isArray(data.Detected_Anomolies)
             ? data.Detected_Anomolies
             : data.Detected_Anomolies
             ? [data.Detected_Anomolies]
             : [];
+          recsOutput.innerHTML = recs.length
+            ? recs.map(renderRecCard).join("")
+            : "No recommendations found.";
           if (currentUser) {
             await postReportToBackend({
               user_id: currentUser.email,
               report_date: new Date(),
               ocr_text: extractedText,
               anomalies: JSON.stringify(recs),
             });
           }
           loadingEl.textContent = "Analysis complete.";
         });
+      document.getElementById("ask-btn").onclick = async () => {
+        const q = document.getElementById("user-question").value.trim();
+        if (!q) return;
+        if (!extractedText) {
+          alert("Please analyze a document first.");
+          return;
         }
+        chat.innerHTML += `<p><strong>You:</strong> ${q}</p>`;
+        chat.innerHTML += `<p><strong>Chatbot:</strong> <em>Thinking...</em></p>`;
+        chat.scrollTop = chat.scrollHeight;
+        try {
+          const res = await fetch(api("chat/"), {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              question: q,
+              user_id: currentUser ? currentUser.uid : "anonymous",
+            }),
+          });
+          if (!res.ok) throw new Error(await res.text());
+          const data = await res.json();
+          const last = chat.querySelectorAll("p");
+          last[
+            last.length - 1
+          ].innerHTML = `<strong>Chatbot:</strong> ${data.answer}`;
+        } catch (err) {
+          console.error("Error:", err);
+          const last = chat.querySelectorAll("p");
+          last[
+            last.length - 1
+          ].innerHTML = `<strong>Chatbot:</strong> Sorry, error: ${err.message}`;
+        }
+        document.getElementById("user-question").value = "";
+        chat.scrollTop = chat.scrollHeight;
+      };
     </script>
   </body>
+</html>