Delete web/analyzer_new.html

web/analyzer_new.html

@@ -1,344 +0,0 @@
-<!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 href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
-    <style>
-      :root {
-        --tropical-indigo: rgb(120, 187, 242);
-        --wisteria: rgb(197, 217, 251);
-        --latte-cream: #ffffff;
-      }
-
-      body {
-        font-family: "Rubik", sans-serif;
-        background-color: var(--latte-cream);
-        color: #333;
-      }
-
-      .btn-primary {
-        background-color: var(--tropical-indigo);
-        color: white;
-        transition: 0.3s;
-      }
-
-      .btn-primary:hover {
-        background-color: var(--wisteria);
-        color: #333;
-      }
-
-      .rec-card {
-        background-color: var(--wisteria);
-        border: 1px solid #d1d5db;
-        border-radius: 1rem;
-        padding: 1.25rem;
-        margin-bottom: 1.5rem;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-        transition: all 0.3s;
-      }
-
-      .rec-card:hover {
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
-        transform: scale(1.01);
-      }
-
-      .rec-title {
-        font-size: 1.125rem;
-        font-weight: 700;
-        color: var(--tropical-indigo);
-        margin-bottom: 0.5rem;
-      }
-
-      .rec-badge {
-        font-size: 0.75rem;
-        font-weight: 600;
-        padding: 0.25rem 0.75rem;
-        border-radius: 9999px;
-      }
-
-      .badge-high {
-        color: rgb(255, 132, 132);
-      }
-
-      .badge-medium {
-        color: rgb(253, 231, 171);
-      }
-
-      .badge-low {
-        color: rgb(168, 255, 172);
-      }
-
-      .rec-content {
-        list-style-type: disc;
-        margin-left: 1.25rem;
-        font-size: 0.875rem;
-        color: #333;
-      }
-
-      .rec-link {
-        color: var(--tropical-indigo);
-        text-decoration: underline;
-        transition: color 0.2s;
-      }
-
-      .rec-link:hover {
-        color: #5a99c9;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- Navbar -->
-    <nav class="bg-var(--latte-cream) shadow px-6 py-4">
-      <div class="container mx-auto flex justify-between items-center">
-        <a
-          href="index.html"
-          class="text-2xl font-bold"
-          style="color: var(--tropical-indigo)"
-          >CTRL + ALT + HEAL</a
-        >
-        <ul class="flex space-x-6 text-sm font-medium">
-          <li>
-            <a
-              href="index.html"
-              style="color: #333"
-              class="hover:text-var(--tropical-indigo)"
-              >Home</a
-            >
-          </li>
-          <li>
-            <a
-              href="analyzer.html"
-              style="color: #333"
-              class="hover:text-var(--tropical-indigo)"
-              >Analyzer</a
-            >
-          </li>
-          <li>
-            <a
-              href="profile.html"
-              style="color: #333"
-              class="hover:text-var(--tropical-indigo)"
-              >Profile</a
-            >
-          </li>
-          <li>
-            <a
-              href="login.html"
-              style="color: #333"
-              class="hover:text-var(--tropical-indigo)"
-              >Login</a
-            >
-          </li>
-          <li>
-            <a
-              href="about.html"
-              style="color: #333"
-              class="hover:text-var(--tropical-indigo)"
-              >About Us</a
-            >
-          </li>
-        </ul>
-      </div>
-    </nav>
-
-    <main class="max-w-5xl mx-auto px-4 mb-16 pt-4">
-      <!-- Upload Section -->
-      <div class="bg-var(--latte-cream) shadow rounded-lg p-6 mb-8">
-        <h2
-          class="text-xl font-semibold mb-4"
-          style="color: var(--tropical-indigo)"
-        >
-          Upload & Analyze Your Medical PDF or Image
-        </h2>
-        <input
-          type="file"
-          id="pdf-upload"
-          accept=".pdf, image/*"
-          class="w-full mb-4 border border-gray-300 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>
-      </div>
-
-      <!-- Summary Box -->
-      <div class="bg-var(--latte-cream) shadow rounded-lg p-6 mb-8">
-        <h3
-          class="text-lg font-semibold mb-3"
-          style="color: var(--tropical-indigo)"
-        >
-          Summarized Text
-        </h3>
-        <div
-          class="whitespace-pre-wrap h-60 overflow-y-auto bg-var(--latte-cream) text-sm border border-gray-200 rounded p-4"
-          id="summaryBox"
-        >
-          ...
-        </div>
-      </div>
-
-      <!-- AI Recommendations -->
-      <div class="bg-var(--latte-cream) shadow rounded-lg p-6 mb-8">
-        <h3
-          class="text-lg font-semibold mb-3"
-          style="color: var(--tropical-indigo)"
-        >
-          AI Recommendations
-        </h3>
-        <div id="recommendations-output" class="space-y-4"></div>
-      </div>
-
-      <!-- Chatbot Section -->
-      <div class="bg-var(--latte-cream) shadow rounded-lg p-6">
-        <h3
-          class="text-lg font-semibold mb-3"
-          style="color: var(--tropical-indigo)"
-        >
-          Ask Dr. CTRL
-        </h3>
-        <div
-          id="chat-output"
-          class="space-y-2 h-48 overflow-y-auto border border-gray-200 rounded p-4"
-          style="background-color: var(--wisteria); color: #333"
-        >
-          <p>
-            <strong>Dr. CTRL:</strong> Hello, I’m Dr. CTRL — your pixel-powered
-            digital doctor. Let’s get you healed up, one byte at a time.
-          </p>
-        </div>
-        <div class="flex mt-4 gap-2">
-          <input
-            type="text"
-            id="user-question"
-            placeholder="Ask a question about your report"
-            class="flex-1 px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2"
-            style="focus:ring-color: var(--tropical-indigo);"
-          />
-          <button id="ask-btn" class="btn-primary px-4 py-2 rounded">
-            Ask
-          </button>
-        </div>
-      </div>
-    </main>
-
-    <!-- JS stays exactly the same as your original -->
-    <script type="module">
-      document.addEventListener("DOMContentLoaded", () => {
-        const recsOutput = document.getElementById("recommendations-output");
-        const loadingEl = document.getElementById("loading");
-        const summaryBox = document.getElementById("summaryBox");
-        const analyzeBtn = document.getElementById("analyze-btn");
-        const chatBox = document.getElementById("chat-output");
-        const userQuestionInput = document.getElementById("user-question");
-        const askBtn = document.getElementById("ask-btn");
-
-        let extractedText = "";
-
-        analyzeBtn.addEventListener("click", async () => {
-          const fileInput = document.getElementById("pdf-upload");
-          const file = fileInput.files[0];
-
-          if (!file) {
-            loadingEl.textContent = "Please upload a file first.";
-            return;
-          }
-
-          loadingEl.textContent = "Processing with AI...";
-          summaryBox.textContent = "...";
-          recsOutput.innerHTML = "";
-
-          try {
-            const formData = new FormData();
-            formData.append("file", file);
-            formData.append("model", "bert");
-
-            const response = await fetch(
-              "http://127.0.0.1:5501/analyzer.html",
-              { method: "POST", body: formData }
-            );
-
-            if (!response.ok)
-              throw new Error(`Backend error: ${response.status}`);
-
-            const realData = await response.json();
-            extractedText = realData.ocr_text || "";
-            summaryBox.textContent = extractedText;
-            renderRecommendations(realData.resolutions);
-            loadingEl.textContent = "Analysis complete!";
-          } catch (error) {
-            console.error(error);
-            loadingEl.textContent = "Error: " + error.message;
-          }
-        });
-
-        function renderRecommendations(resolutions) {
-          if (!resolutions || resolutions.length === 0) {
-            recsOutput.textContent = "No recommendations found.";
-            return;
-          }
-
-          recsOutput.innerHTML = "";
-
-          resolutions.forEach((rec) => {
-            const severity = rec.severity.toLowerCase();
-            let badgeClass = "rec-badge";
-
-            if (severity.includes("high")) badgeClass += " badge-high";
-            else if (severity.includes("medium")) badgeClass += " badge-medium";
-            else if (severity.includes("low")) badgeClass += " badge-low";
-
-            const card = document.createElement("div");
-            card.className = "rec-card";
-            card.innerHTML = `
-              <div class="flex justify-between items-center mb-3">
-                <h4 class="rec-title">${rec.findings}</h4>
-                <span class="${badgeClass}">${rec.severity}</span>
-              </div>
-              <ul class="rec-content">
-                <li><strong>Recommendations:</strong> ${rec.recommendations.join(
-                  ", "
-                )}</li>
-                <li><strong>Treatment:</strong> ${
-                  rec.treatment_suggestions
-                }</li>
-                <li><strong>Home Care:</strong> ${rec.home_care_guidance.join(
-                  ", "
-                )}</li>
-                <li><a href="${
-                  rec.info_link
-                }" target="_blank" class="rec-link">Learn more</a></li>
-              </ul>
-            `;
-            recsOutput.appendChild(card);
-          });
-        }
-
-        askBtn.addEventListener("click", async () => {
-          const question = userQuestionInput.value.trim();
-
-          if (!question || !extractedText) {
-            alert("Please upload and analyze a report first!");
-            return;
-          }
-
-          chatBox.innerHTML += `<p><strong>You:</strong> ${question}</p>`;
-          chatBox.scrollTop = chatBox.scrollHeight;
-
-          const answerer = await pipeline(
-            "question-answering",
-            "Xenova/distilbert-base-uncased-distilled-squad"
-          );
-          const output = await answerer(question, extractedText);
-
-          chatBox.innerHTML += `<p><strong>Chatbot:</strong> ${output.answer}</p>`;
-          userQuestionInput.value = "";
-          chatBox.scrollTop = chatBox.scrollHeight;
-        });
-      });
-    </script>
-  </body>
-</html>