Spaces:

vineelagampa
/

PRMSChallenge

Sleeping

App Files Files Community

Update web/analyzer.html

#19

by TheFrogGod - opened Sep 18, 2025

base: refs/heads/main

←

from: refs/pr/19

Discussion Files changed

+199

-322

Files changed (1) hide show

web/analyzer.html +199 -322

web/analyzer.html CHANGED Viewed

@@ -1,4 +1,5 @@
-web/analyzer.html<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -6,14 +7,13 @@ 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"
@@ -22,18 +22,22 @@ web/analyzer.html<!DOCTYPE html>
           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,48 +48,15 @@ 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");
@@ -95,24 +66,15 @@ web/analyzer.html<!DOCTYPE html>
         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 +96,80 @@ 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,
@@ -189,12 +186,12 @@ web/analyzer.html<!DOCTYPE html>
       } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js";
       const firebaseConfig = {
-        apiKey: "AIzaSyAKWstCc7HqMgV8DmH2Sy6QwUP3JvZxu9g",
-        authDomain: "appchallenge-c8fe3.firebaseapp.com",
-        projectId: "appchallenge-c8fe3",
-        storageBucket: "appchallenge-c8fe3.firebasestorage.app",
-        messagingSenderId: "943791692455",
-        appId: "1:943791692455:web:ae04d06bf09669b6bdd982",
       };
       const app = initializeApp(firebaseConfig);
@@ -205,47 +202,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,22 +247,23 @@ const profileNavDesktop = document.querySelector('ul.md\\:flex li a[href="profil
       };
     </script>
     <script type="module">
-      import {
-        pipeline,
-        env,
-      } 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 () {
@@ -282,76 +272,6 @@ const profileNavDesktop = document.querySelector('ul.md\\:flex li a[href="profil
             : "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"
-          : sev.includes("moderate")
-          ? "badge-medium"
-          : "badge-low";
-        return `
-        <div class="rec-card">
-          <div class="flex items-center justify-between">
-            <h4 class="rec-title">Finding ${idx + 1}: ${
-          rec.findings || "N/A"
-        }</h4>
-            <span class="rec-badge ${sevClass}">${rec.severity || "—"}</span>
-          </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
-                ? `<li><a href="${rec.info_link}" target="_blank" class="rec-link">Learn more</a></li>`
-                : ""
-            }
-          </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,141 +282,98 @@ const profileNavDesktop = document.querySelector('ul.md\\:flex li a[href="profil
           }
           loadingEl.textContent = "Processing with AI...";
-          //textOutput.textContent = "";
           recsOutput.textContent = "";
           const formData = new FormData();
           formData.append("file", file);
           formData.append("model", "bert");
-          let data;
           try {
             const res = await fetch(api("analyze/"), {
               method: "POST",
               body: formData,
             });
             if (!res.ok) throw new Error(await res.text());
-            data = await res.json();
           } catch (err) {
             console.error(err);
             loadingEl.textContent = "Error during analysis: " + err.message;
-            return;
-          }
-          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">
         <!-- Logo -->
         <a
           href="index.html"
           CTRL + ALT + HEAL
         </a>
+        ```
+        <!-- Desktop Links (right aligned) -->
+        <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 (mobile only) -->
         <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");
         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 (below navbar) -->
+    <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,
       } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js";
       const firebaseConfig = {
+        apiKey: "AIzaSyAPhM_Ee7cLzyKHs5zyFy8g5ZOk9-pubRI",
+        authDomain: "login-tutorial-7a9e1.firebaseapp.com",
+        projectId: "login-tutorial-7a9e1",
+        storageBucket: "login-tutorial-7a9e1.firebasestorage.app",
+        messagingSenderId: "491093197824",
+        appId: "1:491093197824:web:9f866...",
       };
       const app = initializeApp(firebaseConfig);
       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 API calls -->
     <script type="module">
       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;
+      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 () {
             : "No file uploaded yet.";
         });
       document
         .getElementById("analyze-btn")
         .addEventListener("click", async () => {
           }
           loadingEl.textContent = "Processing with AI...";
+          textOutput.textContent = "";
           recsOutput.textContent = "";
           const formData = new FormData();
           formData.append("file", file);
           formData.append("model", "bert");
           try {
             const res = await fetch(api("analyze/"), {
               method: "POST",
               body: formData,
             });
             if (!res.ok) throw new Error(await res.text());
+            const data = await res.json();
+            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(
+                    (rec, i) =>
+                      `<div class="rec-card"><h4>Finding ${i + 1}: ${
+                        rec.findings
+                      }</h4></div>`
+                  )
+                  .join("")
+              : "No recommendations found.";
+            if (currentUser) {
+              await fetch(api("save_report/"), {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                  user_id: currentUser.email,
+                  report_date: new Date(),
+                  ocr_text: extractedText,
+                  anomalies: JSON.stringify(recs),
+                }),
+              });
+            }
+            loadingEl.textContent = "Analysis complete.";
           } catch (err) {
             console.error(err);
             loadingEl.textContent = "Error during analysis: " + err.message;
           }
+        });
+      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;
+        }
+        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>