PRMSChallengeOct

Sleeping

App Files Files Community

vineelagampa

TheFrogGod commited on Sep 22, 2025

Commit

2d9266b

verified ·

1 Parent(s): c095422

Second Changes of ChatBot (#25)

Browse files

- Second Changes of ChatBot (4f5622ae8b9a8ffe00729e9174605873e974d2eb)

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

Files changed (1) hide show

web/past_data.html +251 -105

web/past_data.html CHANGED Viewed

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <title>Past Analyzes - CTRL + ALT + HEAL</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body class="bg-[#F7F8F9] min-h-screen">
@@ -11,11 +12,14 @@
       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">
         <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>
@@ -25,6 +29,8 @@
             <a href="login.html" class="nav-link">Login</a>
           </li>
         </ul>
         <button
           id="hamburger"
           class="md:hidden text-[var(--latte-cream)] text-2xl"
@@ -32,6 +38,8 @@
           ☰
         </button>
       </div>
       <ul
         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"
@@ -76,10 +84,13 @@
     <main class="max-w-4xl mx-auto px-4 pt-24 text-gray-800">
       <div class="bg-white border border-gray-200 rounded-lg p-6 shadow mb-6">
-        <h2 class="text-xl font-semibold mb-4">Your Past Analyzes</h2>
         <p id="auth-status" class="text-sm text-gray-500 mb-6">
           Checking sign-in status…
         </p>
         <div id="recs-container" class="space-y-4">
           <p class="text-sm text-gray-500">
             Sign in to view your saved analyzes.
@@ -87,7 +98,7 @@
         </div>
       </div>
     </main>
     <!-- Floating Chat Button -->
     <button
       id="chat-toggle"
@@ -134,12 +145,6 @@
     </script>
     <script type="module">
-      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
-      import {
-        getAuth,
-        onAuthStateChanged,
-        signOut,
-      } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js";
       import {
         getFirestore,
         collection,
@@ -147,9 +152,15 @@
         orderBy,
         getDocs,
       } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
       const firebaseConfig = {
-        apiKey: "AIzaSyDNXm6ewXWMdIIAyC0q83ZspBfwmP30UJQ",
         authDomain: "appchallenge-c8fe3.firebaseapp.com",
         projectId: "appchallenge-c8fe3",
         storageBucket: "appchallenge-c8fe3.firebasestorage.app",
@@ -161,13 +172,10 @@
       const app = initializeApp(firebaseConfig);
       const auth = getAuth(app);
       const db = getFirestore(app);
-      const statusEl = document.getElementById("auth-status");
-      const recsEl = document.getElementById("recs-container");
       window.chatContext = null;
       window.setChatContextFromId = function (id) {
-        const pre = document.querySelector(`#content-${id} pre`);
         window.chatContext = pre ? pre.textContent.trim() : null;
         const chatOutput = document.getElementById("chat-output");
         if (chatOutput) {
@@ -175,128 +183,266 @@
           chatOutput.scrollTop = chatOutput.scrollHeight;
         }
       };
-      function toggleOCR(id) {
-        const content = document.getElementById(`content-${id}`);
-        const arrow = document.getElementById(`arrow-${id}`);
-        if (content.style.maxHeight && content.style.maxHeight !== "0px") {
-          content.style.maxHeight = "0px";
-          arrow.style.transform = "rotate(0deg)";
         } else {
-          content.style.maxHeight = content.scrollHeight + "px";
-          arrow.style.transform = "rotate(90deg)";
         }
-      }
-      function renderAnalysisSafe(item) {
-        console.log("Rendering report:", item);
-        const createdAt =
           item.createdAt && item.createdAt.toDate
             ? item.createdAt.toDate().toLocaleString()
-            : "Date unknown";
         const uniqueId = `ocr-${Date.now()}-${Math.random()
           .toString(36)
-          .substr(2, 9)}`;
-        const ocrText = item.ocr_text || "No OCR text available.";
-        const reportDate = item.reportDate || "N/A";
-        const anomalies = Array.isArray(item.Detected_Anomalies)
-          ? item.Detected_Anomalies
-          : [];
         return `
-          <div class="bg-white border border-gray-200 rounded-lg p-4 shadow">
-            <div class="flex justify-between mb-2">
-              <div class="text-xs text-gray-500">${createdAt}</div>
             </div>
-            <div class="mb-4">
-              <div class="font-semibold text-green-700 cursor-pointer hover:text-green-800 py-2 flex justify-between items-center"
-                   onclick="toggleOCR('${uniqueId}')">
-                <span>Report: ${reportDate}</span>
-                <span class="arrow transition-transform duration-300" id="arrow-${uniqueId}">▶</span>
-              </div>
-              <div class="ocr-content overflow-hidden transition-all duration-300 max-h-0" id="content-${uniqueId}">
-                <div class="mt-2 p-3 bg-gray-50 rounded border">
-                  <pre class="whitespace-pre-wrap text-sm text-gray-700">${ocrText}</pre>
-                </div>
               </div>
             </div>
-            ${anomalies
-              .map(
-                (r, i) => `
-              <div class="border-t border-gray-200 pt-2 mt-2">
-                <div class="font-medium">Finding ${i + 1}: ${
-                  r.findings || "N/A"
-                }</div>
-                <div class="text-sm text-gray-600">Severity: ${
-                  r.severity || "N/A"
-                }</div>
-                <div class="text-sm text-gray-600">Recommendations: ${(
-                  r.recommendations || []
-                ).join(", ")}</div>
-              </div>
-            `
-              )
-              .join("")}
-            <button onclick="setChatContextFromId('${uniqueId}')"
-                    class="mt-3 px-4 py-2 bg-[var(--tropical-indigo)] text-white rounded hover:bg-indigo-600">
-              Chat about this report
-            </button>
           </div>
-        `;
       }
       onAuthStateChanged(auth, async (user) => {
-        const authNavItem = document.getElementById("authNavItem");
         if (user) {
-          authNavItem.innerHTML =
-            '<button onclick="logout()" class="hover:text-[#6B9080] text-red-600">Logout</button>';
           statusEl.textContent = `Signed in as ${user.email || user.uid}`;
-          try {
-            const q = query(
-              collection(db, "users", user.uid, "analyses"),
-              orderBy("createdAt", "desc")
-            );
-            const snap = await getDocs(q);
-            if (snap.empty) {
               recsEl.innerHTML =
                 '<p class="text-sm text-gray-500">No saved analyses yet.</p>';
-              return;
             }
             const analyses = [];
-            snap.forEach((doc) => analyses.push({ id: doc.id, ...doc.data() }));
-            recsEl.innerHTML = analyses.map(renderAnalysisSafe).join("");
-          } catch (err) {
-            console.error("Error fetching reports:", err);
-            recsEl.innerHTML =
-              '<p class="text-sm text-red-500">Error loading analyses.</p>';
           }
         } else {
-          authNavItem.innerHTML =
-            '<a href="login.html" class="hover:text-[#6B9080]">Login</a>';
           statusEl.textContent = "Not signed in.";
           recsEl.innerHTML =
             '<p class="text-sm text-gray-500">Please sign in to see your analyses.</p>';
         }
-      });
-      window.logout = async () => {
-        try {
-          await signOut(auth);
-          localStorage.clear();
-          window.location.href = "login.html";
-        } catch (err) {
-          console.error("Error signing out:", err);
-        }
-      };
     </script>
   </body>
 </html>

     <meta charset="UTF-8" />
     <title>Past Analyzes - CTRL + ALT + HEAL</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="script.js"></script>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body class="bg-[#F7F8F9] min-h-screen">
       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>
             <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>
       </div>
+      <!-- Mobile Menu -->
       <ul
         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"
     <main class="max-w-4xl mx-auto px-4 pt-24 text-gray-800">
       <div class="bg-white border border-gray-200 rounded-lg p-6 shadow mb-6">
+        <h2 class="text-xl font-semibold mb-4">
+          Your Past Analyzes
+        </h1>
         <p id="auth-status" class="text-sm text-gray-500 mb-6">
           Checking sign-in status…
         </p>
         <div id="recs-container" class="space-y-4">
           <p class="text-sm text-gray-500">
             Sign in to view your saved analyzes.
         </div>
       </div>
     </main>
     <!-- Floating Chat Button -->
     <button
       id="chat-toggle"
     </script>
     <script type="module">
       import {
         getFirestore,
         collection,
         orderBy,
         getDocs,
       } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
+      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
+      import {
+        getAuth,
+        onAuthStateChanged,
+        signOut,
+      } 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",
       const app = initializeApp(firebaseConfig);
       const auth = getAuth(app);
       const db = getFirestore(app);
+      window.currentUser = null;
       window.chatContext = null;
       window.setChatContextFromId = function (id) {
+        const pre = document.querySelector(`#content-${id} .ocr-pre`);
         window.chatContext = pre ? pre.textContent.trim() : null;
         const chatOutput = document.getElementById("chat-output");
         if (chatOutput) {
           chatOutput.scrollTop = chatOutput.scrollHeight;
         }
       };
+      onAuthStateChanged(auth, (user) => {
+        const authNavItem = document.getElementById("authNavItem");
+        if (user) {
+          authNavItem.innerHTML =
+            '<button onclick="logout()" class="hover:text-[#6B9080] text-red-600">Logout</button>';
         } else {
+          authNavItem.innerHTML =
+            '<a href="login.html" class="hover:text-[#6B9080]">Login</a>';
         }
+      });
+      window.logout = async () => {
+        try {
+          await signOut(auth);
+          localStorage.clear();
+          window.location.href = "login.html";
+        } catch (error) {
+          console.error("Error signing out:", error);
+        }
+      };
+      const statusEl = document.getElementById("auth-status");
+      const recsEl = document.getElementById("recs-container");
+      async function sendReportToBackend(report, userId) {
+        try {
+          const response = await fetch("http://localhost:9000/save_report/", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              ...report,
+              user_id: userId,
+              sync_timestamp: new Date().toISOString(),
+            }),
+          });
+          if (!response.ok) {
+            console.warn(
+              `Failed to sync report to backend: ${response.status}`
+            );
+          } else {
+            console.log("Report successfully synced to backend");
+          }
+        } catch (error) {
+          console.warn(
+            "Error syncing report to backend (continuing anyway):",
+            error
+          );
+        }
+      }
+      function renderAnalysisWithCustomToggle(item) {
+        const d =
           item.createdAt && item.createdAt.toDate
             ? item.createdAt.toDate().toLocaleString()
+            : "";
         const uniqueId = `ocr-${Date.now()}-${Math.random()
           .toString(36)
+          .substr(2, 9)}`; // Generate unique ID
         return `
+        <div class="bg-white border border-gray-200 rounded-lg p-4 shadow">
+          <div class="flex justify-between mb-2">
+            <div class="text-xs text-gray-500">${d}</div>
+          </div>
+          <!-- Collapsible OCR Text Section with Custom Toggle -->
+          <div class="mb-4">
+            <div class="font-semibold text-green-700 cursor-pointer hover:text-green-800 py-2 flex justify-between items-center"
+                 onclick="toggleOCR('${uniqueId}')">
+              <span>Report ${item.reportDate || "N/A"}</span>
+              <span class="arrow transition-transform duration-300" id="arrow-${uniqueId}">▶</span>
             </div>
+            <div class="ocr-content overflow-hidden transition-all duration-300 max-h-0" id="content-${uniqueId}">
+              <div class="mt-2 p-3 bg-gray-50 rounded border">
+                <pre class="whitespace-pre-wrap text-sm text-gray-700">${
+                  item.ocr_text || ""
+                }</pre>
               </div>
             </div>
           </div>
+          <!-- Findings Section -->
+          ${(Array.isArray(item.Detected_Anomolies)
+            ? item.Detected_Anomolies
+            : []
+          )
+            .map(
+              (r, i) => `
+            <div class="border-t border-gray-200 pt-2 mt-2">
+              <div class="font-medium">Finding ${i + 1}: ${
+                r.findings || ""
+              }</div>
+              <div class="text-sm text-gray-600">Severity: ${
+                r.severity || ""
+              }</div>
+              <div class="text-sm text-gray-600">Recommendations: ${(
+                r.recommendations || []
+              ).join(", ")}</div>
+            </div>
+          `
+            )
+            .join("")}
+        </div>
+      `;
+      }
+      function toggleOCR(id) {
+        const content = document.getElementById(`content-${id}`);
+        const arrow = document.getElementById(`arrow-${id}`);
+        if (content.style.maxHeight && content.style.maxHeight !== "0px") {
+          content.style.maxHeight = "0px";
+          arrow.style.transform = "rotate(0deg)";
+        } else {
+          content.style.maxHeight = content.scrollHeight + "px";
+          arrow.style.transform = "rotate(90deg)";
+        }
       }
       onAuthStateChanged(auth, async (user) => {
         if (user) {
           statusEl.textContent = `Signed in as ${user.email || user.uid}`;
+          async function getPastReports() {
+            try {
+              const url = api("reports/", { user_id: user.email });
+              const response = await fetch(url, {
+                method: "GET",
+                headers: {
+                  "Content-Type": "application/json",
+                },
+              });
+              if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+              }
+              const data = await response.json();
+              console.log("Report successfully sent to backend:", data);
+              recsEl.innerHTML = data
+                .map((doc) => renderAnalysisWithCustomToggle(doc))
+                .join("");
+            } catch (error) {
+              console.error("Error sending report to backend:", error);
               recsEl.innerHTML =
                 '<p class="text-sm text-gray-500">No saved analyses yet.</p>';
             }
+          }
+          getPastReports();
+          /* try {
+          const q = query(
+            collection(db, "users", user.uid, "analyses"),
+            orderBy("createdAt", "desc")
+          );
+          const snap = await getDocs(q);
+          if (snap.empty) {
+            recsEl.innerHTML = '<p class="text-sm text-gray-500">No saved analyses yet.</p>';
+          } else {
             const analyses = [];
+            snap.forEach(doc => {
+              const data = { id: doc.id, ...doc.data() };
+              analyses.push(data);
+              sendReportToBackend(data, user.uid);
+            });
+            recsEl.innerHTML = analyses.map(doc => renderAnalysis(doc)).join("");
+            const syncStatus = document.createElement('p');
+            syncStatus.className = 'text-xs text-blue-500 mt-2';
+            syncStatus.textContent = `Syncing ${analyses.length} reports to backend...`;
+            recsEl.appendChild(syncStatus);
+            setTimeout(() => {
+              if (syncStatus.parentNode) {
+                syncStatus.remove();
+              }
+            }, 3000);
           }
+        } catch (error) {
+          console.error('Error fetching analyses:', error);
+          recsEl.innerHTML = '<p class="text-sm text-red-500">Error loading analyses.</p>';
+        }*/
         } else {
           statusEl.textContent = "Not signed in.";
           recsEl.innerHTML =
             '<p class="text-sm text-gray-500">Please sign in to see your analyses.</p>';
         }
+        document.getElementById("ask-btn").onclick = async () => {
+          const q = document.getElementById("user-question").value.trim();
+          if (!q) return;
+          // require a selected report as context
+          if (!window.chatContext) {
+            alert(
+              "Please click 'Chat about this report' on a saved report first to set context."
+            );
+            return;
+          }
+          document.getElementById("ask-btn").onclick = async () => {
+            const q = document.getElementById("user-question").value.trim();
+            if (!q) return;
+            // require a selected report as context
+            if (!window.chatContext) {
+              alert(
+                "Please click 'Chat about this report' on a saved report first to set context."
+              );
+              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:
+                    auth && auth.currentUser
+                      ? auth.currentUser.uid || auth.currentUser.email
+                      : "anonymous",
+                  context: window.chatContext,
+                }),
+              });
+              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>