Hugging Face's logo

Spaces:
d310h
/
medscript-pro
Running

App Files Community
d310h commited on
Commit
7ce2f25
路
verified 路
1 Parent(s): 2e21cc8

create a frontend ui for medical trascription

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +316 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Medscript Pro
3
- emoji: 馃捇
4
- colorFrom: red
5
- colorTo: purple
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: MedScript Pro 馃彞
3
+ colorFrom: gray
4
+ colorTo: gray
5
+ emoji: 馃惓
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,317 @@
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>MedScript Pro - Medical Transcription Simplified</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
12
+ <style>
13
+ .wave-bg {
14
+ position: absolute;
15
+ top: 0;
16
+ left: 0;
17
+ width: 100%;
18
+ height: 100%;
19
+ z-index: -1;
20
+ }
21
+ .transcription-card {
22
+ backdrop-filter: blur(10px);
23
+ background-color: rgba(255, 255, 255, 0.85);
24
+ }
25
+ .play-btn:hover .play-icon {
26
+ transform: scale(1.1);
27
+ transition: all 0.2s ease;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="min-h-screen bg-gray-50">
32
+ <div id="wave-bg" class="wave-bg"></div>
33
+
34
+ <!-- Navigation -->
35
+ <nav class="bg-white shadow-sm">
36
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
37
+ <div class="flex justify-between h-16">
38
+ <div class="flex items-center">
39
+ <div class="flex-shrink-0 flex items-center">
40
+ <i data-feather="activity" class="h-8 w-8 text-blue-600"></i>
41
+ <span class="ml-2 text-xl font-bold text-gray-800">MedScript Pro</span>
42
+ </div>
43
+ </div>
44
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
45
+ <a href="#" class="text-blue-600 border-blue-500 px-3 py-2 text-sm font-medium border-b-2">Dashboard</a>
46
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Transcripts</a>
47
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Patients</a>
48
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Settings</a>
49
+ </div>
50
+ <div class="flex items-center">
51
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
52
+ <i data-feather="plus" class="h-4 w-4 mr-1"></i>
53
+ New Transcription
54
+ </button>
55
+ <div class="ml-4 relative flex-shrink-0">
56
+ <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center cursor-pointer">
57
+ <i data-feather="user" class="h-4 w-4 text-blue-600"></i>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </nav>
64
+
65
+ <!-- Main Content -->
66
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
67
+ <!-- Header -->
68
+ <div class="mb-8">
69
+ <h1 class="text-3xl font-bold text-gray-900">Medical Transcription Dashboard</h1>
70
+ <p class="mt-2 text-gray-600">Efficiently transcribe, review, and manage medical records</p>
71
+ </div>
72
+
73
+ <!-- Stats Cards -->
74
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
75
+ <div class="bg-white rounded-lg shadow p-6">
76
+ <div class="flex items-center">
77
+ <div class="p-3 rounded-full bg-blue-100">
78
+ <i data-feather="mic" class="h-6 w-6 text-blue-600"></i>
79
+ </div>
80
+ <div class="ml-4">
81
+ <p class="text-sm font-medium text-gray-500">Pending Transcriptions</p>
82
+ <p class="text-2xl font-semibold text-gray-900">12</p>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ <div class="bg-white rounded-lg shadow p-6">
87
+ <div class="flex items-center">
88
+ <div class="p-3 rounded-full bg-green-100">
89
+ <i data-feather="check-circle" class="h-6 w-6 text-green-600"></i>
90
+ </div>
91
+ <div class="ml-4">
92
+ <p class="text-sm font-medium text-gray-500">Completed Today</p>
93
+ <p class="text-2xl font-semibold text-gray-900">8</p>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ <div class="bg-white rounded-lg shadow p-6">
98
+ <div class="flex items-center">
99
+ <div class="p-3 rounded-full bg-purple-100">
100
+ <i data-feather="clock" class="h-6 w-6 text-purple-600"></i>
101
+ </div>
102
+ <div class="ml-4">
103
+ <p class="text-sm font-medium text-gray-500">Avg. Turnaround Time</p>
104
+ <p class="text-2xl font-semibold text-gray-900">2.4h</p>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Transcription Section -->
111
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
112
+ <!-- Left Column - Record/Upload -->
113
+ <div class="lg:col-span-1">
114
+ <div class="bg-white rounded-lg shadow overflow-hidden">
115
+ <div class="px-6 py-5 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-white">
116
+ <h3 class="text-lg font-medium text-gray-900">Start New Transcription</h3>
117
+ </div>
118
+ <div class="px-6 py-5 space-y-4">
119
+ <div class="flex flex-col items-center justify-center p-8 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50">
120
+ <i data-feather="mic" class="h-10 w-10 text-gray-400 mb-3"></i>
121
+ <p class="text-sm text-gray-500 mb-4">Record directly or upload an audio file</p>
122
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
123
+ Start Recording
124
+ </button>
125
+ </div>
126
+ <div class="text-center">
127
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center justify-center w-full">
128
+ <i data-feather="upload" class="h-4 w-4 mr-2"></i>
129
+ Upload Audio File
130
+ </button>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Recent Patients -->
136
+ <div class="mt-6 bg-white rounded-lg shadow overflow-hidden">
137
+ <div class="px-6 py-5 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-white">
138
+ <h3 class="text-lg font-medium text-gray-900">Recent Patients</h3>
139
+ </div>
140
+ <div class="divide-y divide-gray-200">
141
+ <div class="px-6 py-4 flex items-center">
142
+ <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
143
+ <i data-feather="user" class="h-5 w-5 text-blue-600"></i>
144
+ </div>
145
+ <div class="ml-4">
146
+ <p class="text-sm font-medium text-gray-900">John D. Peterson</p>
147
+ <p class="text-sm text-gray-500">Last visit: Cardiology</p>
148
+ </div>
149
+ </div>
150
+ <div class="px-6 py-4 flex items-center">
151
+ <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
152
+ <i data-feather="user" class="h-5 w-5 text-purple-600"></i>
153
+ </div>
154
+ <div class="ml-4">
155
+ <p class="text-sm font-medium text-gray-900">Sarah M. Williams</p>
156
+ <p class="text-sm text-gray-500">Last visit: Pediatrics</p>
157
+ </div>
158
+ </div>
159
+ <div class="px-6 py-4 flex items-center">
160
+ <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
161
+ <i data-feather="user" class="h-5 w-5 text-green-600"></i>
162
+ </div>
163
+ <div class="ml-4">
164
+ <p class="text-sm font-medium text-gray-900">Robert T. Johnson</p>
165
+ <p class="text-sm text-gray-500">Last visit: Orthopedics</p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Right Column - Recent Transcriptions -->
173
+ <div class="lg:col-span-2">
174
+ <div class="bg-white rounded-lg shadow overflow-hidden">
175
+ <div class="px-6 py-5 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-white">
176
+ <div class="flex items-center justify-between">
177
+ <h3 class="text-lg font-medium text-gray-900">Recent Transcriptions</h3>
178
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
179
+ View All
180
+ </button>
181
+ </div>
182
+ </div>
183
+ <div class="divide-y divide-gray-200">
184
+ <!-- Transcription Item 1 -->
185
+ <div class="p-6 flex items-start">
186
+ <div class="play-btn flex-shrink-0 h-12 w-12 rounded-full bg-blue-600 flex items-center justify-center cursor-pointer hover:bg-blue-700 transition-colors">
187
+ <i data-feather="play" class="play-icon h-5 w-5 text-white"></i>
188
+ </div>
189
+ <div class="ml-4 flex-1">
190
+ <div class="flex items-center justify-between">
191
+ <p class="text-sm font-medium text-blue-600">Dr. Michael Chen</p>
192
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Completed</span>
193
+ </div>
194
+ <p class="text-sm text-gray-900 mt-1">Patient Follow-up - Cardiology Consultation</p>
195
+ <p class="text-sm text-gray-500 mt-1">Transcript: 02/15/2023 路 8:42 AM 路 12 min</p>
196
+ <div class="mt-2 flex items-center text-sm text-gray-500">
197
+ <i data-feather="calendar" class="h-4 w-4 mr-1"></i>
198
+ Due: Today, 5:00 PM
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Transcription Item 2 -->
204
+ <div class="p-6 flex items-start">
205
+ <div class="play-btn flex-shrink-0 h-12 w-12 rounded-full bg-blue-600 flex items-center justify-center cursor-pointer hover:bg-blue-700 transition-colors">
206
+ <i data-feather="play" class="play-icon h-5 w-5 text-white"></i>
207
+ </div>
208
+ <div class="ml-4 flex-1">
209
+ <div class="flex items-center justify-between">
210
+ <p class="text-sm font-medium text-blue-600">Dr. Lisa Rodriguez</p>
211
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">In Progress</span>
212
+ </div>
213
+ <p class="text-sm text-gray-900 mt-1">Initial Evaluation - Pediatric Checkup</p>
214
+ <p class="text-sm text-gray-500 mt-1">Transcript: 02/14/2023 路 3:15 PM 路 18 min</p>
215
+ <div class="mt-2 flex items-center text-sm text-gray-500">
216
+ <i data-feather="calendar" class="h-4 w-4 mr-1"></i>
217
+ Due: Tomorrow, 10:00 AM
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Transcription Item 3 -->
223
+ <div class="p-6 flex items-start">
224
+ <div class="play-btn flex-shrink-0 h-12 w-12 rounded-full bg-blue-600 flex items-center justify-center cursor-pointer hover:bg-blue-700 transition-colors">
225
+ <i data-feather="play" class="play-icon h-5 w-5 text-white"></i>
226
+ </div>
227
+ <div class="ml-4 flex-1">
228
+ <div class="flex items-center justify-between">
229
+ <p class="text-sm font-medium text-blue-600">Dr. James Wilson</p>
230
+ <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Pending</span>
231
+ </div>
232
+ <p class="text-sm text-gray-900 mt-1">Surgical Consultation - Orthopedic Review</p>
233
+ <p class="text-sm text-gray-500 mt-1">Transcript: 02/14/2023 路 11:30 AM 路 22 min</p>
234
+ <div class="mt-2 flex items-center text-sm text-gray-500">
235
+ <i data-feather="calendar" class="h-4 w-4 mr-1"></i>
236
+ Due: Today, 12:00 PM
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Quick Actions -->
244
+ <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-6">
245
+ <div class="bg-white rounded-lg shadow p-6">
246
+ <div class="flex items-center">
247
+ <div class="p-3 rounded-full bg-indigo-100">
248
+ <i data-feather="book-open" class="h-6 w-6 text-indigo-600"></i>
249
+ </div>
250
+ <div class="ml-4">
251
+ <h4 class="text-lg font-medium text-gray-900">Templates</h4>
252
+ <p class="mt-1 text-sm text-gray-500">Access common medical templates</p>
253
+ <button class="mt-3 text-indigo-600 hover:text-indigo-800 text-sm font-medium">
254
+ Browse Templates
255
+ </button>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ <div class="bg-white rounded-lg shadow p-6">
260
+ <div class="flex items-center">
261
+ <div class="p-3 rounded-full bg-pink-100">
262
+ <i data-feather="settings" class="h-6 w-6 text-pink-600"></i>
263
+ </div>
264
+ <div class="ml-4">
265
+ <h4 class="text-lg font-medium text-gray-900">Preferences</h4>
266
+ <p class="mt-1 text-sm text-gray-500">Customize your transcription workflow</p>
267
+ <button class="mt-3 text-pink-600 hover:text-pink-800 text-sm font-medium">
268
+ Update Settings
269
+ </button>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </main>
277
+
278
+ <!-- Footer -->
279
+ <footer class="bg-white border-t border-gray-200 mt-12">
280
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
281
+ <div class="md:flex md:items-center md:justify-between">
282
+ <div class="flex justify-center md:order-2 space-x-6">
283
+ <a href="#" class="text-gray-400 hover:text-gray-500">
284
+ <i data-feather="help-circle" class="h-5 w-5"></i>
285
+ </a>
286
+ <a href="#" class="text-gray-400 hover:text-gray-500">
287
+ <i data-feather="mail" class="h-5 w-5"></i>
288
+ </a>
289
+ <a href="#" class="text-gray-400 hover:text-gray-500">
290
+ <i data-feather="settings" class="h-5 w-5"></i>
291
+ </a>
292
+ </div>
293
+ <div class="mt-8 md:mt-0 md:order-1">
294
+ <p class="text-center text-xs text-gray-500">
295
+ &copy; 2023 MedScript Pro. All rights reserved. HIPAA compliant.
296
+ </p>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </footer>
301
+
302
+ <script>
303
+ // Initialize Vanta.js waves background
304
+ VANTA.WAVES({
305
+ el: "#wave-bg",
306
+ color: 0x0066cc,
307
+ waveHeight: 20,
308
+ shininess: 50,
309
+ waveSpeed: 0.5,
310
+ zoom: 0.8
311
+ });
312
+
313
+ // Initialize Feather Icons
314
+ feather.replace();
315
+ </script>
316
+ </body>
317
  </html>