Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Lab Report Decoder - AI-Powered Medical Analysis</title> | |
| <!-- Load Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Link to our simple CSS for toggling sections --> | |
| <link | |
| rel="stylesheet" | |
| href="{{ url_for('static', filename='css/styley.css') }}" | |
| /> | |
| <!-- Font --> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <!-- Configure Tailwind Colors --> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: "#659BB9" /* Deep Blue */, | |
| secondary: "rgb(51 99 176)" /* Bright Blue */, | |
| surface: "#ffffff" /* White */, | |
| background: "#f8fafc" /* Very Light Blue-Grey */, | |
| }, | |
| fontFamily: { | |
| sans: ["Inter", "sans-serif"], | |
| }, | |
| }, | |
| }, | |
| }; | |
| </script> | |
| </head> | |
| <body class="bg-background font-sans text-slate-800 h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-primary text-white shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <!-- Logo --> | |
| <div | |
| class="flex items-center space-x-3 cursor-pointer" | |
| onclick="showSection('upload-section')" | |
| > | |
| <span class="text-2xl">🔬</span> | |
| <span class="font-bold text-xl tracking-tight" | |
| >Lab Report Decoder</span | |
| > | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="hidden md:flex space-x-1"> | |
| <button | |
| onclick="showSection('upload-section')" | |
| class="nav-btn px-4 py-2 rounded-lg text-sm font-medium hover:bg-white/10 transition-colors text-white/90 hover:text-white" | |
| > | |
| Upload | |
| </button> | |
| <button | |
| onclick="showSection('results-section')" | |
| class="nav-btn px-4 py-2 rounded-lg text-sm font-medium hover:bg-white/10 transition-colors text-white/90 hover:text-white" | |
| > | |
| Results | |
| </button> | |
| <button | |
| onclick="showSection('chat-section')" | |
| class="nav-btn px-4 py-2 rounded-lg text-sm font-medium hover:bg-white/10 transition-colors text-white/90 hover:text-white" | |
| > | |
| Ask Questions | |
| </button> | |
| <button | |
| onclick="showSection('summary-section')" | |
| class="nav-btn px-4 py-2 rounded-lg text-sm font-medium hover:bg-white/10 transition-colors text-white/90 hover:text-white" | |
| > | |
| Summary | |
| </button> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow max-w-5xl w-full mx-auto px-4 sm:px-6 py-12"> | |
| <!-- SECTION 1: UPLOAD (Default Active) --> | |
| <div id="upload-section" class="section active space-y-8"> | |
| <!-- Hero Text --> | |
| <div class="text-center max-w-2xl mx-auto mb-10"> | |
| <h1 class="text-4xl font-extrabold text-primary mb-4 tracking-tight"> | |
| Understand Your Lab Results | |
| </h1> | |
| <p class="text-lg text-slate-500"> | |
| Upload your PDF report and get plain English explanations, dietary | |
| advice, and AI-powered insights. | |
| </p> | |
| </div> | |
| <!-- Upload Card --> | |
| <div | |
| class="bg-surface rounded-2xl shadow-xl border border-slate-100 p-10 max-w-3xl mx-auto transition-transform hover:scale-[1.01] duration-300" | |
| > | |
| <div | |
| class="upload-area group border-2 border-dashed border-blue-200 bg-blue-50/50 rounded-xl p-12 text-center hover:border-secondary hover:bg-blue-50 transition-all cursor-pointer" | |
| id="uploadArea" | |
| onclick="document.getElementById('fileInput').click()" | |
| > | |
| <div | |
| class="text-5xl mb-4 group-hover:scale-110 transition-transform duration-300" | |
| > | |
| 📄 | |
| </div> | |
| <h3 class="text-xl font-semibold text-slate-700 mb-2"> | |
| Drop your lab report PDF here | |
| </h3> | |
| <p class="text-slate-500 text-sm mb-6"> | |
| or click to browse (Max 16MB) | |
| </p> | |
| <input type="file" id="fileInput" accept=".pdf" hidden /> | |
| <button | |
| class="bg-secondary text-white px-8 py-3 rounded-full font-medium shadow-md shadow-blue-500/30 hover:bg-blue-600 hover:shadow-blue-500/40 transition-all transform hover:-translate-y-0.5" | |
| > | |
| Choose File | |
| </button> | |
| </div> | |
| <!-- Progress Indicator (Hidden by default) --> | |
| <div id="uploadProgress" class="hidden mt-8 text-center"> | |
| <div | |
| class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-blue-200 border-t-secondary" | |
| ></div> | |
| <p class="text-secondary font-medium mt-3 animate-pulse"> | |
| Analyzing your report... | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Features Grid --> | |
| <div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto mt-12"> | |
| <div | |
| class="bg-surface p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow" | |
| > | |
| <div class="text-3xl mb-3">🔍</div> | |
| <h3 class="font-semibold text-slate-800">Automatic Extraction</h3> | |
| <p class="text-sm text-slate-500 mt-1"> | |
| Extracts all test values instantly | |
| </p> | |
| </div> | |
| <div | |
| class="bg-surface p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow" | |
| > | |
| <div class="text-3xl mb-3">🧠</div> | |
| <h3 class="font-semibold text-slate-800">AI Analysis</h3> | |
| <p class="text-sm text-slate-500 mt-1"> | |
| Medical-grade explanations | |
| </p> | |
| </div> | |
| <div | |
| class="bg-surface p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow" | |
| > | |
| <div class="text-3xl mb-3">🍎</div> | |
| <h3 class="font-semibold text-slate-800">Dietary Tips</h3> | |
| <p class="text-sm text-slate-500 mt-1"> | |
| Personalized nutrition advice | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SECTION 2: RESULTS --> | |
| <div id="results-section" class="section space-y-8 mt-12"> | |
| <h2 class="text-2xl font-bold text-slate-800 mb-6 flex items-center"> | |
| <span class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-3 text-xl" | |
| >📋</span | |
| > | |
| Your Results | |
| </h2> | |
| <div | |
| id="resultsContainer" | |
| class="bg-surface rounded-xl shadow-lg border border-slate-100 min-h-[400px] p-6" | |
| > | |
| <div | |
| class="flex flex-col items-center justify-center h-full text-slate-400 py-20" | |
| > | |
| <div class="text-6xl mb-4 opacity-20">📊</div> | |
| <p>Upload a lab report to view results here</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SECTION 3: CHAT --> | |
| <div id="chat-section" class="section space-y-8 mt-12"> | |
| <div | |
| class="flex flex-col h-full bg-surface rounded-xl shadow-lg border border-slate-100 overflow-hidden" | |
| > | |
| <div class="bg-slate-50 border-b border-slate-100 p-4"> | |
| <h2 class="font-bold text-slate-700">Ask Questions</h2> | |
| <p class="text-xs text-slate-500"> | |
| Ask about your specific values, diet, or lifestyle. | |
| </p> | |
| </div> | |
| <!-- Chat Area --> | |
| <div | |
| id="chatMessages" | |
| class="flex-grow overflow-y-auto p-6 space-y-8 bg-white" | |
| > | |
| <div class="text-center text-slate-400 py-10"> | |
| <p class="mb-4">Try asking:</p> | |
| <div class="inline-flex flex-col gap-2 text-sm text-blue-600"> | |
| <span | |
| class="bg-blue-50 px-3 py-1 rounded-full cursor-pointer hover:bg-blue-100" | |
| >"Is my cholesterol dangerous?"</span | |
| > | |
| <span | |
| class="bg-blue-50 px-3 py-1 rounded-full cursor-pointer hover:bg-blue-100" | |
| >"What foods lower iron?"</span | |
| > | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="p-4 border-t border-slate-100 bg-slate-50"> | |
| <div class="flex gap-2"> | |
| <input | |
| type="text" | |
| id="chatInput" | |
| class="flex-grow px-4 py-3 rounded-xl border border-slate-300 focus:border-secondary focus:ring-2 focus:ring-blue-100 outline-none transition-all" | |
| placeholder="Type your medical question..." | |
| /> | |
| <button | |
| onclick="askQuestion()" | |
| class="bg-secondary text-white px-6 rounded-xl font-medium hover:bg-blue-600 transition-colors shadow-sm" | |
| > | |
| Send | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SECTION 4: SUMMARY --> | |
| <div id="summary-section" class="section mt-12"> | |
| <h2 class="text-2xl font-bold text-slate-800 mb-6 flex items-center"> | |
| <span | |
| class="bg-purple-100 text-purple-600 p-2 rounded-lg mr-3 text-xl" | |
| >📝</span | |
| > | |
| Health Summary | |
| </h2> | |
| <!-- Stats Row --> | |
| <div id="summaryStats" class="grid grid-cols-3 gap-4 mb-6 hidden"> | |
| <div class="bg-green-50 p-4 rounded-xl border border-green-100"> | |
| <div class="text-3xl font-bold text-green-600" id="normalCount"> | |
| 0 | |
| </div> | |
| <div class="text-sm text-green-700 font-medium">Normal Ranges</div> | |
| </div> | |
| <div class="bg-red-50 p-4 rounded-xl border border-red-100"> | |
| <div class="text-3xl font-bold text-red-600" id="highCount">0</div> | |
| <div class="text-sm text-red-700 font-medium">High Values</div> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-xl border border-yellow-100"> | |
| <div class="text-3xl font-bold text-yellow-600" id="lowCount"> | |
| 0 | |
| </div> | |
| <div class="text-sm text-yellow-700 font-medium">Low Values</div> | |
| </div> | |
| </div> | |
| <div | |
| id="summaryContent" | |
| class="bg-surface rounded-xl shadow-lg border border-slate-100 p-8 min-h-[200px]" | |
| > | |
| <div class="text-center text-slate-400 py-10"> | |
| <p>Analysis summary will appear here after upload</p> | |
| </div> | |
| </div> | |
| <button | |
| id="generateSummaryBtn" | |
| onclick="generateSummary()" | |
| class="hidden mt-6 w-full py-3 bg-white border-2 border-secondary text-secondary font-bold rounded-xl hover:bg-blue-50 transition-colors" | |
| > | |
| Regenerate Detailed Summary | |
| </button> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-slate-200 py-6 mt-20"> | |
| <div class="max-w-4xl mx-auto text-center px-4"> | |
| <p | |
| class="text-sm text-red-500 font-medium bg-red-50 inline-block px-4 py-1 rounded-full mb-2" | |
| > | |
| ⚠️ Educational Purpose Only - Not Medical Advice | |
| </p> | |
| <p class="text-xs text-slate-400"> | |
| Always consult a professional healthcare provider for diagnosis and | |
| treatment. | |
| </p> | |
| </div> | |
| </footer> | |
| <!-- Toast Notification --> | |
| <div | |
| id="toast" | |
| class="fixed bottom-5 right-5 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50" | |
| ></div> | |
| <script src="{{ url_for('static', filename='script.js') }}"></script> | |
| </body> | |
| </html> | |