Spaces:
Sleeping
Sleeping
| <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/[email protected]/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> | |