| | <!DOCTYPE html>
|
| | <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>
|
| |
|
| |
|
| | <script src="https://cdn.tailwindcss.com"></script>
|
| |
|
| |
|
| | <link
|
| | rel="stylesheet"
|
| | href="{{ url_for('static', filename='css/styley.css') }}"
|
| | />
|
| |
|
| |
|
| | <link
|
| | href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
|
| | rel="stylesheet"
|
| | />
|
| |
|
| |
|
| | <script>
|
| | tailwind.config = {
|
| | theme: {
|
| | extend: {
|
| | colors: {
|
| | primary: "#659BB9" ,
|
| | secondary: "rgb(51 99 176)" ,
|
| | surface: "#ffffff" ,
|
| | background: "#f8fafc" ,
|
| | },
|
| | fontFamily: {
|
| | sans: ["Inter", "sans-serif"],
|
| | },
|
| | },
|
| | },
|
| | };
|
| | </script>
|
| | </head>
|
| | <body class="bg-background font-sans text-slate-800 h-screen flex flex-col">
|
| |
|
| | <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">
|
| |
|
| | <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>
|
| |
|
| |
|
| | <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 class="flex-grow max-w-5xl w-full mx-auto px-4 sm:px-6 py-12">
|
| |
|
| | <div id="upload-section" class="section active space-y-8">
|
| |
|
| | <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>
|
| |
|
| |
|
| | <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>
|
| |
|
| |
|
| | <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>
|
| |
|
| |
|
| | <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>
|
| |
|
| |
|
| | <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>
|
| |
|
| |
|
| | <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>
|
| |
|
| |
|
| | <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>
|
| |
|
| |
|
| | <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>
|
| |
|
| |
|
| | <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>
|
| |
|
| |
|
| | <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 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>
|
| |
|
| |
|
| | <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>
|
| |
|
