Hugging Face's logo

Spaces:
dcrey7
/
medflowai
Running

App Files Community
dcrey7 commited on
Commit
d384126
·
verified ·
1 Parent(s): 8a23b77

can you start with landing page with 2 buttons patient or hostipal side , patient side is basicaurrentlyHealthcare Dashboard AI-powered insights for Toronto General Hospital Refresh Data Export Report AI Insights Average Wait Time 14.2 days -2.3 days from last week Patients Scheduled Today 1,247 +156 from last week System Efficiency 87.4% +5.2% from last week Active Bottlenecks 3 -2 from last week AI Predictions 94.7% +1.2% from last week Rescheduled Appointments 23 -12 from last week Patient Flow Today Real-time admissions and discharges 08:00 10:00 12:00 14:00 16:00 18:00 20:00 0 15 30 45 60 Capacity Utilization Hospital capacity throughout the day 08:00 10:00 12:00 14:00 16:00 18:00 20:00 0 25 50 75 100 Real-time Alerts & Bottlenecks OR Suite 3 - Surgical Backlog 12 affected Expected 4-hour delay due to emergency surgery 5 minutes ago Cardiology Clinic - Staff Shortage 18 affected Dr. Martinez called in sick, 18 appointments need rescheduling 12 minutes ago MRI Department - High Demand 7 affected AI recommends adding evening slots for next week 25 minutes ago Emergency Department - Capacity Alert 23 affected Approaching 95% capacity, consider patient redistribution 1 hour ago AI Confidence Level 94.7% Quick Actions Schedule Emergency SurgeryManage Staff AllocationView Patient QueueGenerate Reports System Status API Status Operational AI Models Processing Da what we have and doctor sign you sign as doctor timotee and you have access to dashboard with all hostpital related anylucts - Follow Up Deployment then for the patient side 1)Medflow AI. in this landing page keep it very simple , ask patient to give name , phone , address , email , blood pressure , height , weight, record todays date . and click submit 2) once submit - it will assign you priority from 1-5 (traditonal models and llm to classify ) 3) tell basic things to take care , things to avoid , look out for , what could it actually be (using llm fintued on medical data and RAG) 4) when you avaialable to meet , you are in 8 th waiting , time to appointment 1 hr or come on some other day when theres an avaiable (ex 4 day We wont use any model or anything , eveything is hardcoded or has default values - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +568 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Medflowai
3
- emoji: 🌍
4
- colorFrom: green
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: medflowai
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,568 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MedFlow AI - Healthcare Portal</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
12
+ }
13
+ .card-hover:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .transition-all {
18
+ transition: all 0.3s ease;
19
+ }
20
+ </style>
21
+ </head>
22
+ <body class="bg-gray-50 min-h-screen">
23
+ <!-- Main Container -->
24
+ <div class="container mx-auto px-4 py-8">
25
+ <!-- Header -->
26
+ <header class="text-center mb-12">
27
+ <h1 class="text-4xl md:text-5xl font-bold text-blue-800 mb-4">MedFlow AI</h1>
28
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Smart healthcare solutions for patients and providers</p>
29
+ </header>
30
+
31
+ <!-- Role Selection -->
32
+ <div class="max-w-4xl mx-auto">
33
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
34
+ <!-- Patient Portal Card -->
35
+ <div id="patientCard" class="bg-white rounded-xl shadow-lg overflow-hidden transition-all card-hover cursor-pointer">
36
+ <div class="gradient-bg p-6 text-white">
37
+ <div class="flex items-center justify-center mb-4">
38
+ <i class="fas fa-user-injured text-4xl mr-4"></i>
39
+ <h2 class="text-2xl font-bold">Patient Portal</h2>
40
+ </div>
41
+ <p class="text-blue-100">Get personalized health insights and appointment scheduling powered by AI.</p>
42
+ </div>
43
+ <div class="p-6">
44
+ <button onclick="showPatientForm()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all">
45
+ Access as Patient
46
+ </button>
47
+ </div>
48
+ </div>
49
+
50
+ <!-- Hospital Portal Card -->
51
+ <div id="hospitalCard" class="bg-white rounded-xl shadow-lg overflow-hidden transition-all card-hover cursor-pointer">
52
+ <div class="gradient-bg p-6 text-white">
53
+ <div class="flex items-center justify-center mb-4">
54
+ <i class="fas fa-hospital text-4xl mr-4"></i>
55
+ <h2 class="text-2xl font-bold">Hospital Dashboard</h2>
56
+ </div>
57
+ <p class="text-blue-100">AI-powered insights for hospital management and patient flow optimization.</p>
58
+ </div>
59
+ <div class="p-6">
60
+ <button onclick="showHospitalLogin()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all">
61
+ Access as Provider
62
+ </button>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Patient Form (Hidden by default) -->
69
+ <div id="patientForm" class="hidden max-w-2xl mx-auto mt-12 bg-white rounded-xl shadow-lg p-8">
70
+ <div class="flex justify-between items-center mb-6">
71
+ <h2 class="text-2xl font-bold text-blue-800">Patient Information</h2>
72
+ <button onclick="hidePatientForm()" class="text-gray-500 hover:text-gray-700">
73
+ <i class="fas fa-times"></i>
74
+ </button>
75
+ </div>
76
+
77
+ <form id="medForm" class="space-y-4">
78
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
79
+ <div>
80
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
81
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
82
+ </div>
83
+ <div>
84
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
85
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
86
+ </div>
87
+ </div>
88
+
89
+ <div>
90
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
91
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
92
+ </div>
93
+
94
+ <div>
95
+ <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address</label>
96
+ <input type="text" id="address" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
97
+ </div>
98
+
99
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
100
+ <div>
101
+ <label for="bloodPressure" class="block text-sm font-medium text-gray-700 mb-1">Blood Pressure</label>
102
+ <input type="text" id="bloodPressure" placeholder="e.g. 120/80" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
103
+ </div>
104
+ <div>
105
+ <label for="height" class="block text-sm font-medium text-gray-700 mb-1">Height (cm)</label>
106
+ <input type="number" id="height" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
107
+ </div>
108
+ <div>
109
+ <label for="weight" class="block text-sm font-medium text-gray-700 mb-1">Weight (kg)</label>
110
+ <input type="number" id="weight" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
111
+ </div>
112
+ </div>
113
+
114
+ <div>
115
+ <label for="symptoms" class="block text-sm font-medium text-gray-700 mb-1">Describe Your Symptoms</label>
116
+ <textarea id="symptoms" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required></textarea>
117
+ </div>
118
+
119
+ <div class="pt-4">
120
+ <button type="button" onclick="submitPatientForm()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all">
121
+ Submit Information
122
+ </button>
123
+ </div>
124
+ </form>
125
+ </div>
126
+
127
+ <!-- Patient Results (Hidden by default) -->
128
+ <div id="patientResults" class="hidden max-w-2xl mx-auto mt-12 bg-white rounded-xl shadow-lg p-8">
129
+ <div class="flex justify-between items-center mb-6">
130
+ <h2 class="text-2xl font-bold text-blue-800">Your Health Assessment</h2>
131
+ <button onclick="hidePatientResults()" class="text-gray-500 hover:text-gray-700">
132
+ <i class="fas fa-times"></i>
133
+ </button>
134
+ </div>
135
+
136
+ <div class="space-y-6">
137
+ <div class="bg-blue-50 rounded-lg p-4">
138
+ <div class="flex items-center">
139
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
140
+ <i class="fas fa-exclamation-triangle text-blue-600"></i>
141
+ </div>
142
+ <div>
143
+ <h3 class="font-bold text-blue-800">Priority Level: <span id="priorityLevel" class="text-2xl">3</span>/5</h3>
144
+ <p class="text-sm text-gray-600">Based on your symptoms and vitals</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <div>
150
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Recommended Actions</h3>
151
+ <ul class="list-disc pl-5 space-y-2 text-gray-700">
152
+ <li>Rest and stay hydrated</li>
153
+ <li>Monitor your temperature every 4 hours</li>
154
+ <li>Avoid strenuous activity for the next 48 hours</li>
155
+ <li>Limit caffeine and alcohol intake</li>
156
+ </ul>
157
+ </div>
158
+
159
+ <div>
160
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Potential Conditions</h3>
161
+ <p class="text-gray-700">Based on your symptoms, you may be experiencing a mild viral infection or seasonal allergies. However, if symptoms worsen or persist beyond 3 days, seek immediate medical attention.</p>
162
+ </div>
163
+
164
+ <div class="bg-yellow-50 rounded-lg p-4 border border-yellow-200">
165
+ <h3 class="font-bold text-lg text-yellow-800 mb-2">When to Seek Immediate Care</h3>
166
+ <ul class="list-disc pl-5 space-y-1 text-yellow-700">
167
+ <li>Difficulty breathing</li>
168
+ <li>Chest pain or pressure</li>
169
+ <li>Severe headache with vision changes</li>
170
+ <li>Fever above 39°C (102°F) that doesn't respond to medication</li>
171
+ </ul>
172
+ </div>
173
+
174
+ <div class="bg-green-50 rounded-lg p-4">
175
+ <div class="flex items-center">
176
+ <div class="bg-green-100 p-3 rounded-full mr-4">
177
+ <i class="fas fa-calendar-check text-green-600"></i>
178
+ </div>
179
+ <div>
180
+ <h3 class="font-bold text-green-800">Appointment Options</h3>
181
+ <p class="text-gray-700 mt-1">You are currently <span class="font-bold">8th</span> in the queue.</p>
182
+ <div class="mt-3 space-y-2">
183
+ <div class="flex items-center">
184
+ <input type="radio" id="waitOption" name="appointment" class="mr-2" checked>
185
+ <label for="waitOption">Wait for current appointment (~1 hour)</label>
186
+ </div>
187
+ <div class="flex items-center">
188
+ <input type="radio" id="laterOption" name="appointment" class="mr-2">
189
+ <label for="laterOption">Schedule for tomorrow at 2:30 PM</label>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="pt-2">
197
+ <button onclick="confirmAppointment()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all">
198
+ Confirm My Choice
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Hospital Login (Hidden by default) -->
205
+ <div id="hospitalLogin" class="hidden max-w-md mx-auto mt-12 bg-white rounded-xl shadow-lg p-8">
206
+ <div class="flex justify-between items-center mb-6">
207
+ <h2 class="text-2xl font-bold text-blue-800">Hospital Staff Login</h2>
208
+ <button onclick="hideHospitalLogin()" class="text-gray-500 hover:text-gray-700">
209
+ <i class="fas fa-times"></i>
210
+ </button>
211
+ </div>
212
+
213
+ <form class="space-y-4">
214
+ <div>
215
+ <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
216
+ <input type="text" id="username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
217
+ </div>
218
+
219
+ <div>
220
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
221
+ <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
222
+ </div>
223
+
224
+ <div class="pt-4">
225
+ <button type="button" onclick="loginAsDoctor()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all">
226
+ Sign In
227
+ </button>
228
+ </div>
229
+ </form>
230
+ </div>
231
+
232
+ <!-- Hospital Dashboard (Hidden by default) -->
233
+ <div id="hospitalDashboard" class="hidden max-w-6xl mx-auto mt-12">
234
+ <div class="flex justify-between items-center mb-8">
235
+ <div>
236
+ <h2 class="text-2xl font-bold text-blue-800">Healthcare Dashboard</h2>
237
+ <p class="text-gray-600">AI-powered insights for Toronto General Hospital</p>
238
+ </div>
239
+ <div class="flex space-x-3">
240
+ <button class="bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium py-2 px-4 rounded-lg transition-all">
241
+ Refresh Data
242
+ </button>
243
+ <button class="bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium py-2 px-4 rounded-lg transition-all">
244
+ Export Report
245
+ </button>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Stats Cards -->
250
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
251
+ <div class="bg-white rounded-xl shadow p-6">
252
+ <div class="flex justify-between">
253
+ <div>
254
+ <p class="text-sm font-medium text-gray-500">Average Wait Time</p>
255
+ <h3 class="text-2xl font-bold mt-1">14.2 days</h3>
256
+ </div>
257
+ <div class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium flex items-center">
258
+ <i class="fas fa-arrow-down mr-1"></i> 2.3 days
259
+ </div>
260
+ </div>
261
+ <p class="text-xs text-gray-500 mt-2">from last week</p>
262
+ </div>
263
+
264
+ <div class="bg-white rounded-xl shadow p-6">
265
+ <div class="flex justify-between">
266
+ <div>
267
+ <p class="text-sm font-medium text-gray-500">Patients Scheduled Today</p>
268
+ <h3 class="text-2xl font-bold mt-1">1,247</h3>
269
+ </div>
270
+ <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium flex items-center">
271
+ <i class="fas fa-arrow-up mr-1"></i> 156
272
+ </div>
273
+ </div>
274
+ <p class="text-xs text-gray-500 mt-2">from last week</p>
275
+ </div>
276
+
277
+ <div class="bg-white rounded-xl shadow p-6">
278
+ <div class="flex justify-between">
279
+ <div>
280
+ <p class="text-sm font-medium text-gray-500">System Efficiency</p>
281
+ <h3 class="text-2xl font-bold mt-1">87.4%</h3>
282
+ </div>
283
+ <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium flex items-center">
284
+ <i class="fas fa-arrow-up mr-1"></i> 5.2%
285
+ </div>
286
+ </div>
287
+ <p class="text-xs text-gray-500 mt-2">from last week</p>
288
+ </div>
289
+
290
+ <div class="bg-white rounded-xl shadow p-6">
291
+ <div class="flex justify-between">
292
+ <div>
293
+ <p class="text-sm font-medium text-gray-500">Active Bottlenecks</p>
294
+ <h3 class="text-2xl font-bold mt-1">3</h3>
295
+ </div>
296
+ <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium flex items-center">
297
+ <i class="fas fa-arrow-down mr-1"></i> 2
298
+ </div>
299
+ </div>
300
+ <p class="text-xs text-gray-500 mt-2">from last week</p>
301
+ </div>
302
+
303
+ <div class="bg-white rounded-xl shadow p-6">
304
+ <div class="flex justify-between">
305
+ <div>
306
+ <p class="text-sm font-medium text-gray-500">AI Predictions</p>
307
+ <h3 class="text-2xl font-bold mt-1">94.7%</h3>
308
+ </div>
309
+ <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium flex items-center">
310
+ <i class="fas fa-arrow-up mr-1"></i> 1.2%
311
+ </div>
312
+ </div>
313
+ <p class="text-xs text-gray-500 mt-2">from last week</p>
314
+ </div>
315
+
316
+ <div class="bg-white rounded-xl shadow p-6">
317
+ <div class="flex justify-between">
318
+ <div>
319
+ <p class="text-sm font-medium text-gray-500">Rescheduled Appointments</p>
320
+ <h3 class="text-2xl font-bold mt-1">23</h3>
321
+ </div>
322
+ <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium flex items-center">
323
+ <i class="fas fa-arrow-down mr-1"></i> 12
324
+ </div>
325
+ </div>
326
+ <p class="text-xs text-gray-500 mt-2">from last week</p>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Charts Row -->
331
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
332
+ <div class="bg-white rounded-xl shadow p-6">
333
+ <h3 class="font-bold text-gray-800 mb-4">Patient Flow Today</h3>
334
+ <p class="text-sm text-gray-500 mb-4">Real-time admissions and discharges</p>
335
+ <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
336
+ <p class="text-gray-500">[Chart: Patient Flow]</p>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="bg-white rounded-xl shadow p-6">
341
+ <h3 class="font-bold text-gray-800 mb-4">Capacity Utilization</h3>
342
+ <p class="text-sm text-gray-500 mb-4">Hospital capacity throughout the day</p>
343
+ <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
344
+ <p class="text-gray-500">[Chart: Capacity Utilization]</p>
345
+ </div>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Alerts Section -->
350
+ <div class="bg-white rounded-xl shadow overflow-hidden mb-8">
351
+ <div class="px-6 py-4 border-b border-gray-200">
352
+ <h3 class="font-bold text-gray-800">Real-time Alerts & Bottlenecks</h3>
353
+ </div>
354
+ <div class="divide-y divide-gray-200">
355
+ <div class="p-4 hover:bg-gray-50 transition-all">
356
+ <div class="flex items-start">
357
+ <div class="bg-red-100 p-2 rounded-full mr-4 mt-1">
358
+ <i class="fas fa-exclamation-circle text-red-600"></i>
359
+ </div>
360
+ <div class="flex-1">
361
+ <h4 class="font-medium">OR Suite 3 - Surgical Backlog</h4>
362
+ <p class="text-sm text-gray-600">12 affected</p>
363
+ <p class="text-sm mt-1">Expected 4-hour delay due to emergency surgery</p>
364
+ <p class="text-xs text-gray-500 mt-1">5 minutes ago</p>
365
+ </div>
366
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
367
+ View Details
368
+ </button>
369
+ </div>
370
+ </div>
371
+
372
+ <div class="p-4 hover:bg-gray-50 transition-all">
373
+ <div class="flex items-start">
374
+ <div class="bg-yellow-100 p-2 rounded-full mr-4 mt-1">
375
+ <i class="fas fa-user-md text-yellow-600"></i>
376
+ </div>
377
+ <div class="flex-1">
378
+ <h4 class="font-medium">Cardiology Clinic - Staff Shortage</h4>
379
+ <p class="text-sm text-gray-600">18 affected</p>
380
+ <p class="text-sm mt-1">Dr. Martinez called in sick, 18 appointments need rescheduling</p>
381
+ <p class="text-xs text-gray-500 mt-1">12 minutes ago</p>
382
+ </div>
383
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
384
+ View Details
385
+ </button>
386
+ </div>
387
+ </div>
388
+
389
+ <div class="p-4 hover:bg-gray-50 transition-all">
390
+ <div class="flex items-start">
391
+ <div class="bg-blue-100 p-2 rounded-full mr-4 mt-1">
392
+ <i class="fas fa-brain text-blue-600"></i>
393
+ </div>
394
+ <div class="flex-1">
395
+ <h4 class="font-medium">MRI Department - High Demand</h4>
396
+ <p class="text-sm text-gray-600">7 affected</p>
397
+ <p class="text-sm mt-1">AI recommends adding evening slots for next week</p>
398
+ <p class="text-xs text-gray-500 mt-1">25 minutes ago</p>
399
+ </div>
400
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
401
+ View Details
402
+ </button>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="p-4 hover:bg-gray-50 transition-all">
407
+ <div class="flex items-start">
408
+ <div class="bg-red-100 p-2 rounded-full mr-4 mt-1">
409
+ <i class="fas fa-ambulance text-red-600"></i>
410
+ </div>
411
+ <div class="flex-1">
412
+ <h4 class="font-medium">Emergency Department - Capacity Alert</h4>
413
+ <p class="text-sm text-gray-600">23 affected</p>
414
+ <p class="text-sm mt-1">Approaching 95% capacity, consider patient redistribution</p>
415
+ <p class="text-xs text-gray-500 mt-1">1 hour ago</p>
416
+ </div>
417
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
418
+ View Details
419
+ </button>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Bottom Section -->
426
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
427
+ <div class="bg-white rounded-xl shadow p-6">
428
+ <h3 class="font-bold text-gray-800 mb-4">AI Confidence Level</h3>
429
+ <div class="flex items-center justify-center">
430
+ <div class="relative w-32 h-32">
431
+ <svg class="w-full h-full" viewBox="0 0 36 36">
432
+ <path
433
+ d="M18 2.0845
434
+ a 15.9155 15.9155 0 0 1 0 31.831
435
+ a 15.9155 15.9155 0 0 1 0 -31.831"
436
+ fill="none"
437
+ stroke="#E5E7EB"
438
+ stroke-width="3"
439
+ />
440
+ <path
441
+ d="M18 2.0845
442
+ a 15.9155 15.9155 0 0 1 0 31.831
443
+ a 15.9155 15.9155 0 0 1 0 -31.831"
444
+ fill="none"
445
+ stroke="#3B82F6"
446
+ stroke-width="3"
447
+ stroke-dasharray="94.7, 100"
448
+ />
449
+ </svg>
450
+ <div class="absolute inset-0 flex items-center justify-center">
451
+ <span class="text-3xl font-bold">94.7%</span>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <div class="bg-white rounded-xl shadow p-6">
458
+ <h3 class="font-bold text-gray-800 mb-4">Quick Actions</h3>
459
+ <div class="grid grid-cols-2 gap-3">
460
+ <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 py-2 px-3 rounded-lg text-sm font-medium transition-all">
461
+ Schedule Emergency Surgery
462
+ </button>
463
+ <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 py-2 px-3 rounded-lg text-sm font-medium transition-all">
464
+ Manage Staff Allocation
465
+ </button>
466
+ <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 py-2 px-3 rounded-lg text-sm font-medium transition-all">
467
+ View Patient Queue
468
+ </button>
469
+ <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 py-2 px-3 rounded-lg text-sm font-medium transition-all">
470
+ Generate Reports
471
+ </button>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="bg-white rounded-xl shadow p-6">
476
+ <h3 class="font-bold text-gray-800 mb-4">System Status</h3>
477
+ <div class="space-y-3">
478
+ <div class="flex items-center">
479
+ <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
480
+ <span class="text-sm">API Status: Operational</span>
481
+ </div>
482
+ <div class="flex items-center">
483
+ <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
484
+ <span class="text-sm">AI Models: Processing Data</span>
485
+ </div>
486
+ <div class="flex items-center">
487
+ <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
488
+ <span class="text-sm">Database: Online</span>
489
+ </div>
490
+ <div class="flex items-center">
491
+ <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
492
+ <span class="text-sm">Security: Active</span>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="mt-6">
497
+ <h4 class="font-medium text-sm text-gray-700 mb-2">Follow Up Deployment</h4>
498
+ <div class="bg-gray-100 rounded-lg p-3">
499
+ <p class="text-sm">Next deployment scheduled for tonight at 2:00 AM</p>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+
507
+ <script>
508
+ // Show/hide patient form
509
+ function showPatientForm() {
510
+ document.getElementById('patientCard').classList.add('hidden');
511
+ document.getElementById('hospitalCard').classList.add('hidden');
512
+ document.getElementById('patientForm').classList.remove('hidden');
513
+ }
514
+
515
+ function hidePatientForm() {
516
+ document.getElementById('patientForm').classList.add('hidden');
517
+ document.getElementById('patientCard').classList.remove('hidden');
518
+ document.getElementById('hospitalCard').classList.remove('hidden');
519
+ }
520
+
521
+ // Show/hide patient results
522
+ function submitPatientForm() {
523
+ // In a real app, this would submit to a server
524
+ // Here we just simulate the response
525
+ document.getElementById('patientForm').classList.add('hidden');
526
+ document.getElementById('patientResults').classList.remove('hidden');
527
+ }
528
+
529
+ function hidePatientResults() {
530
+ document.getElementById('patientResults').classList.add('hidden');
531
+ document.getElementById('patientCard').classList.remove('hidden');
532
+ document.getElementById('hospitalCard').classList.remove('hidden');
533
+ }
534
+
535
+ function confirmAppointment() {
536
+ alert('Your appointment choice has been confirmed!');
537
+ hidePatientResults();
538
+ }
539
+
540
+ // Show/hide hospital login
541
+ function showHospitalLogin() {
542
+ document.getElementById('patientCard').classList.add('hidden');
543
+ document.getElementById('hospitalCard').classList.add('hidden');
544
+ document.getElementById('hospitalLogin').classList.remove('hidden');
545
+ }
546
+
547
+ function hideHospitalLogin() {
548
+ document.getElementById('hospitalLogin').classList.add('hidden');
549
+ document.getElementById('patientCard').classList.remove('hidden');
550
+ document.getElementById('hospitalCard').classList.remove('hidden');
551
+ }
552
+
553
+ // Login as doctor and show dashboard
554
+ function loginAsDoctor() {
555
+ const username = document.getElementById('username').value;
556
+ const password = document.getElementById('password').value;
557
+
558
+ // Hardcoded credentials for demo
559
+ if (username === 'doctor' && password === 'timotee') {
560
+ document.getElementById('hospitalLogin').classList.add('hidden');
561
+ document.getElementById('hospitalDashboard').classList.remove('hidden');
562
+ } else {
563
+ alert('Invalid credentials. For this demo, use username: doctor, password: timotee');
564
+ }
565
+ }
566
+ </script>
567
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dcrey7/medflowai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
568
+ </html>