Spaces:

vineelagampa
/

PRMSChallenge

Running

File size: 15,430 Bytes

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document Analyzer | CTRL + ALT + HEAL</title>
    <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>
      </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"
      >
        <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">
        <h2 class="text-xl font-semibold mb-4">
          Upload & Analyze Your Medical PDF or Image
        </h2>
        <input
          type="file"
          id="pdf-upload"
          accept=".pdf, image/*"
          class="w-full mb-4 rounded px-3 py-2"
        />
        <button id="analyze-btn" class="btn-primary px-4 py-2 rounded">
          Analyze with AI
        </button>
        <p id="loading" class="text-gray-600 mt-2">No file uploaded yet.</p>
        <p id="auth-status" class="text-sm text-gray-500 mt-1">
          Sign in to save and view past analyses.
        </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,
        collection,
        doc,
        addDoc,
        serverTimestamp,
      } 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: "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:9f86659034af7e6a8244e5",
        measurementId: "G-JM7T9N6ZLZ"
      };  

      const app = initializeApp(firebaseConfig);
      const auth = getAuth(app);
      const db = getFirestore(app);
      window.firebaseAuth = auth;
      window.onAuthStateChanged = onAuthStateChanged;
      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 {
          await signOut(auth);
          localStorage.clear();
          window.location.href = "login.html";
        } catch (error) {
          console.error("Error signing out:", error);
        }
      };
    </script>

    <!-- Analyzer + Chatbot -->
    <script type="module">
      import {
        pipeline,
        env,
      } from "https://cdn.jsdelivr.net/npm/@xenova/[email protected]";

      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"
          : 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;
        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 () => {
          const file = document.getElementById("pdf-upload").files[0];
          if (!file) {
            loadingEl.textContent = "Please upload a file first.";
            return;
          }

          loadingEl.textContent = "Processing with AI...";
          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 || "";
         

          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.email : "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>