-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
153 lines (142 loc) · 9.43 KB
/
index.html
File metadata and controls
153 lines (142 loc) · 9.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Medical Report Analyzer</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* Custom base styles (Same as Apollo-Inspired Look) */
body {
font-family: 'Inter', sans-serif;
background-color: #f8fafc; /* Tailwind slate-50 */
color: #334155; /* Tailwind slate-700 */
}
.card {
background-color: #ffffff;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
padding: 1.5rem 2rem;
margin-bottom: 2rem;
border: 1px solid #e2e8f0; /* Tailwind slate-200 */
}
.btn-primary {
background-color: #0ea5e9; /* Tailwind sky-500 */
color: white;
font-weight: 500;
padding: 0.625rem 1.5rem;
border-radius: 0.375rem;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
display: inline-flex; align-items: center; gap: 0.5rem;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.btn-primary:hover { background-color: #0284c7; /* Tailwind sky-600 */ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.btn-primary:disabled { background-color: #94a3b8; cursor: not-allowed; opacity: 0.7; }
.btn-secondary {
background-color: #e0f2fe; /* Tailwind sky-100 */
color: #0369a1; /* Tailwind sky-700 */
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
border: 1px solid #bae6fd; /* Tailwind sky-200 */
transition: background-color 0.3s ease, border-color 0.3s ease;
display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-secondary:hover { background-color: #bae6fd; border-color: #7dd3fc; color: #0284c7; }
.btn-secondary:disabled { background-color: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; cursor: not-allowed; opacity: 0.7; }
h1, h2, h3, h4 { color: #0c4a6e; font-weight: 600; } /* Tailwind sky-900 */
h1 { font-size: 2rem; line-height: 2.25rem; }
h2 { font-size: 1.25rem; line-height: 1.75rem; }
h3 { font-size: 1.125rem; line-height: 1.75rem; }
h4 { font-size: 1rem; line-height: 1.5rem; }
.chat-bubble { border-radius: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 0.75rem; max-width: 85%; word-wrap: break-word; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); line-height: 1.6; }
.chat-bubble-user { background-color: #e0f2fe; color: #0c4a6e; margin-left: auto; text-align: left; border-bottom-right-radius: 0.25rem; }
.chat-bubble-assistant { background-color: #f1f5f9; color: #334155; margin-right: auto; text-align: left; border-bottom-left-radius: 0.25rem; }
.chat-bubble-error { background-color: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
input[type="file"] { border-radius: 0.375rem; border: 1px solid #cbd5e1; padding: 0.5rem 0.75rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
input[type="file"]:hover { border-color: #94a3b8; }
input[type="file"]::file-selector-button { background-color: #f1f5f9; color: #334155; border: none; padding: 0.5rem 1rem; border-radius: 0.25rem; margin-right: 0.75rem; cursor: pointer; transition: background-color 0.3s ease; font-weight: 500; }
input[type="file"]::file-selector-button:hover { background-color: #e2e8f0; }
input[type="text"] { border-radius: 0.375rem; border: 1px solid #cbd5e1; padding: 0.625rem 0.75rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
input[type="text"]:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 2px #bae6fd; }
.loader { border: 4px solid #e0f2fe; border-top: 4px solid #0ea5e9; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; margin: 0; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.hidden { display: none; }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; }
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }
details summary .chevron-icon { transition: transform 0.2s ease-in-out; }
details[open] summary .chevron-icon { transform: rotate(180deg); }
</style>
</head>
<body class="p-4 md:p-8 lg:p-12">
<div class="max-w-5xl mx-auto">
<header class="text-center mb-10 md:mb-12">
<h1 class="text-3xl md:text-4xl font-bold mb-3 text-sky-800">AI Medical Report Analyzer</h1>
<p class="text-lg text-slate-600">Upload your medical report (PDF) for a patient-friendly analysis.</p>
</header>
<div id="upload-section" class="card">
<h2 class="text-lg font-semibold mb-5 flex items-center gap-2 text-sky-700"><i class="fa-solid fa-file-arrow-up icon"></i>Upload Report</h2>
<div class="mb-5">
<label for="pdf-file" class="block mb-2 text-sm font-medium text-slate-600">Select PDF file:</label>
<input type="file" id="pdf-file" accept=".pdf" class="block w-full text-sm focus:outline-none">
</div>
<div class="flex items-center gap-4">
<button id="submit-button" class="btn-primary">
<i class="fa-solid fa-magnifying-glass icon"></i>
Analyze Report
</button>
<div id="loading-spinner" class="loader hidden"></div>
</div>
<p id="upload-error" class="text-red-600 mt-4 hidden font-medium text-sm"></p>
<p id="upload-status" class="text-blue-600 mt-4 hidden text-sm"></p>
</div>
<div id="analysis-section" class="card hidden">
<h2 class="text-lg font-semibold mb-6 flex items-center gap-2 text-sky-700"><i class="fa-solid fa-notes-medical icon"></i>Analysis Results</h2>
<div class="mb-8 p-4 border-l-4 border-sky-500 bg-sky-50 rounded-r-md">
<h3 class="text-base font-semibold mb-2 text-sky-800">Overall Summary</h3>
<p id="detailed-analysis" class="text-slate-700 whitespace-pre-wrap leading-relaxed text-sm"></p>
</div>
<div class="mb-8">
<h3 class="text-base font-semibold mb-3 text-sky-800">Potential Health Risks</h3>
<ul id="potential-risks" class="list-none space-y-2 text-sm">
</ul>
<p id="potential-risks-empty" class="text-slate-500 mt-3 hidden italic text-sm">No specific potential risks identified.</p>
</div>
<div class="mb-6">
<h3 class="text-base font-semibold mb-3 text-sky-800">Recommendations</h3>
<div class="p-4 bg-slate-50 rounded-md border border-slate-200">
<ul id="recommendations-list" class="list-none space-y-2 text-sm">
</ul>
<p id="recommendations-list-empty" class="text-slate-500 mt-3 hidden italic text-sm">No specific recommendations provided.</p>
</div>
</div>
<div class="mt-8 p-3 bg-yellow-50 border border-yellow-200 text-yellow-700 rounded-md text-xs flex items-start gap-3">
<i class="fa-solid fa-triangle-exclamation icon mt-0.5 text-yellow-500 flex-shrink-0"></i>
<div>
<strong class="font-semibold">Disclaimer:</strong> This analysis is AI-generated and for informational purposes only. It is not a substitute for professional medical advice. Always consult a qualified healthcare provider regarding your health.
</div>
</div>
</div>
<div id="chat-section" class="card hidden">
<h2 class="text-lg font-semibold mb-5 flex items-center gap-2 text-sky-700"><i class="fa-solid fa-comments icon"></i>Ask Follow-up Questions</h2>
<div id="chat-history" class="h-64 md:h-72 overflow-y-auto border border-slate-200 rounded-lg p-4 mb-4 bg-white text-sm">
<p class="text-slate-500 text-sm text-center italic">Chat history will appear here.</p>
</div>
<div class="flex items-center space-x-3">
<input type="text" id="chat-input" placeholder="Type your question..." class="flex-grow text-sm">
<button id="send-chat-button" class="btn-secondary flex-shrink-0">
<i class="fa-solid fa-paper-plane icon"></i>
<span>Send</span>
</button>
<div id="chat-loading-spinner" class="loader hidden"></div>
</div>
<p id="chat-error" class="text-red-600 mt-3 hidden font-medium text-sm"></p>
</div>
</div>
<script src="script.js"></script> </body>
</html>