Hugging Face's logo

Spaces:
ImsssX
/
hosp1
Running

App Files Community
ImsssX commited on
Commit
e035287
·
verified ·
1 Parent(s): 1edb537

change html

Browse files
Files changed (1) hide show
  1. index.html +232 -19
index.html CHANGED
@@ -1,19 +1,232 @@
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>EMR System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
+ <style>
10
+ .ai-panel {
11
+ transition: transform 0.3s ease-in-out;
12
+ }
13
+ .ai-panel.collapsed {
14
+ transform: translateX(100%);
15
+ }
16
+ </style>
17
+ </head>
18
+ <body class="bg-gray-100 min-h-screen p-8">
19
+ <!-- Main Content -->
20
+ <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-6" id="mainContent">
21
+ <h1 class="text-3xl font-bold text-gray-800 mb-6">Electronic Medical Record</h1>
22
+
23
+ <!-- Patient Info Section -->
24
+ <div class="mb-6">
25
+ <h2 class="text-xl font-semibold text-gray-700 mb-4">Patient Information</h2>
26
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
27
+ <div>
28
+ <label class="block text-gray-700 mb-2">Patient Name</label>
29
+ <input type="text" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400" id="patientName">
30
+ </div>
31
+ <div>
32
+ <label class="block text-gray-700 mb-2">Date of Birth</label>
33
+ <input type="date" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400" id="dob">
34
+ </div>
35
+ </div>
36
+ </div>
37
+
38
+ <!-- Diagnosis Section -->
39
+ <div class="mb-6">
40
+ <h2 class="text-xl font-semibold text-gray-700 mb-4">Diagnosis</h2>
41
+ <textarea class="w-full p-2 border rounded h-32 focus:outline-none focus:ring-2 focus:ring-blue-400" id="diagnosis" placeholder="Enter diagnosis details..." oninput="triggerAIAnalysis(this.value)"></textarea>
42
+ </div>
43
+
44
+ <!-- Prescription Section -->
45
+ <div class="mb-6">
46
+ <h2 class="text-xl font-semibold text-gray-700 mb-4">Prescription</h2>
47
+ <div id="prescriptionList">
48
+ <div class="prescription-item grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
49
+ <input type="text" placeholder="Medicine" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
50
+ <input type="text" placeholder="Dosage" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
51
+ <input type="text" placeholder="Frequency" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
52
+ <input type="text" placeholder="Duration" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
53
+ </div>
54
+ </div>
55
+ <button onclick="addPrescriptionField()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Add Medicine</button>
56
+ </div>
57
+
58
+ <!-- Medical History Section -->
59
+ <div class="mb-6">
60
+ <h2 class="text-xl font-semibold text-gray-700 mb-4">Medical History</h2>
61
+ <textarea class="w-full p-2 border rounded h-32 focus:outline-none focus:ring-2 focus:ring-blue-400" id="medicalHistory" placeholder="Enter medical history..."></textarea>
62
+ </div>
63
+
64
+ <!-- Allergies Section -->
65
+ <div class="mb-6">
66
+ <h2 class="text-xl font-semibold text-gray-700 mb-4">Allergies</h2>
67
+ <textarea class="w-full p-2 border rounded h-24 focus:outline-none focus:ring-2 focus:ring-blue-400" id="allergies" placeholder="Enter known allergies..."></textarea>
68
+ </div>
69
+
70
+ <!-- Further Tests Section -->
71
+ <div class="mb-6">
72
+ <h2 class="text-xl font-semibold text-gray-700 mb-4">Further Tests Required</h2>
73
+ <textarea class="w-full p-2 border rounded h-24 focus:outline-none focus:ring-2 focus:ring-blue-400" id="tests" placeholder="Enter required tests..."></textarea>
74
+ </div>
75
+
76
+ <!-- Submit Button -->
77
+ <div class="flex justify-end">
78
+ <button onclick="saveRecord()" class="bg-green-500 text-white px-6 py-2 rounded hover:bg-green-600">Save Record</button>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- AI Assistant Panel -->
83
+ <div class="fixed top-0 right-0 h-full w-80 bg-white shadow-lg ai-panel" id="aiPanel">
84
+ <!-- Toggle Button -->
85
+ <button onclick="toggleAIPanel()" class="absolute -left-12 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white p-2 rounded-l-lg">
86
+ <i class="fas fa-robot"></i>
87
+ </button>
88
+
89
+ <!-- AI Panel Content -->
90
+ <div class="h-full flex flex-col">
91
+ <!-- Header -->
92
+ <div class="p-4 bg-blue-500 text-white">
93
+ <h2 class="text-xl font-bold">AI Assistant</h2>
94
+ </div>
95
+
96
+ <!-- Recommendations Area -->
97
+ <div class="flex-grow p-4 overflow-y-auto bg-gray-50" id="recommendationsArea">
98
+ <div class="mb-4">
99
+ <h3 class="font-semibold mb-2">Suggestions</h3>
100
+ <div id="aiSuggestions" class="space-y-2">
101
+ <!-- AI suggestions will be added here -->
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Chat Interface -->
107
+ <div class="border-t">
108
+ <!-- Chat Messages -->
109
+ <div class="h-48 overflow-y-auto p-4 bg-white" id="chatMessages">
110
+ <div class="mb-2">
111
+ <div class="bg-blue-100 p-2 rounded-lg inline-block">
112
+ <p class="text-sm">Hello! I'm your AI assistant. How can I help you today?</p>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Chat Input -->
118
+ <div class="p-4 border-t">
119
+ <div class="flex gap-2">
120
+ <input type="text" id="chatInput" placeholder="Ask me anything..."
121
+ class="flex-grow p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
122
+ onkeypress="handleChatKeyPress(event)">
123
+ <button onclick="sendMessage()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
124
+ <i class="fas fa-paper-plane"></i>
125
+ </button>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <script>
133
+ // AI Panel Toggle
134
+ function toggleAIPanel() {
135
+ const panel = document.getElementById('aiPanel');
136
+ panel.classList.toggle('collapsed');
137
+ }
138
+
139
+ // Add Prescription Field
140
+ function addPrescriptionField() {
141
+ const prescriptionList = document.getElementById('prescriptionList');
142
+ const newItem = document.createElement('div');
143
+ newItem.className = 'prescription-item grid grid-cols-1 md:grid-cols-4 gap-4 mb-4';
144
+ newItem.innerHTML = `
145
+ <input type="text" placeholder="Medicine" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
146
+ <input type="text" placeholder="Dosage" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
147
+ <input type="text" placeholder="Frequency" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
148
+ <input type="text" placeholder="Duration" class="p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400">
149
+ `;
150
+ prescriptionList.appendChild(newItem);
151
+ }
152
+
153
+ // Chat Functions
154
+ function handleChatKeyPress(event) {
155
+ if (event.key === 'Enter') {
156
+ sendMessage();
157
+ }
158
+ }
159
+
160
+ function sendMessage() {
161
+ const input = document.getElementById('chatInput');
162
+ const message = input.value.trim();
163
+ if (message) {
164
+ addMessageToChat('user', message);
165
+ // Simulate AI response
166
+ setTimeout(() => {
167
+ addMessageToChat('ai', 'I understand you\'re asking about "' + message + '". How can I assist you further?');
168
+ }, 1000);
169
+ input.value = '';
170
+ }
171
+ }
172
+
173
+ function addMessageToChat(sender, message) {
174
+ const chatMessages = document.getElementById('chatMessages');
175
+ const messageDiv = document.createElement('div');
176
+ messageDiv.className = 'mb-2 ' + (sender === 'user' ? 'text-right' : '');
177
+ messageDiv.innerHTML = `
178
+ <div class="${sender === 'user' ? 'bg-blue-500 text-white' : 'bg-blue-100 text-gray-800'} p-2 rounded-lg inline-block">
179
+ <p class="text-sm">${message}</p>
180
+ </div>
181
+ `;
182
+ chatMessages.appendChild(messageDiv);
183
+ chatMessages.scrollTop = chatMessages.scrollHeight;
184
+ }
185
+
186
+ // AI Analysis Function
187
+ function triggerAIAnalysis(text) {
188
+ if (text.length > 10) {
189
+ const suggestions = document.getElementById('aiSuggestions');
190
+ suggestions.innerHTML = `
191
+ <div class="bg-white p-3 rounded shadow-sm">
192
+ <div class="flex items-center gap-2">
193
+ <i class="fas fa-lightbulb text-yellow-500"></i>
194
+ <p class="text-sm">Consider adding more details about symptoms</p>
195
+ </div>
196
+ </div>
197
+ <div class="bg-white p-3 rounded shadow-sm">
198
+ <div class="flex items-center gap-2">
199
+ <i class="fas fa-clipboard-check text-green-500"></i>
200
+ <p class="text-sm">Similar cases suggest running additional tests</p>
201
+ </div>
202
+ </div>
203
+ `;
204
+ }
205
+ }
206
+
207
+ // Save Record Function
208
+ function saveRecord() {
209
+ const formData = {
210
+ patientName: document.getElementById('patientName').value,
211
+ dob: document.getElementById('dob').value,
212
+ diagnosis: document.getElementById('diagnosis').value,
213
+ prescriptions: Array.from(document.getElementsByClassName('prescription-item')).map(item => {
214
+ const inputs = item.getElementsByTagName('input');
215
+ return {
216
+ medicine: inputs[0].value,
217
+ dosage: inputs[1].value,
218
+ frequency: inputs[2].value,
219
+ duration: inputs[3].value
220
+ };
221
+ }),
222
+ medicalHistory: document.getElementById('medicalHistory').value,
223
+ allergies: document.getElementById('allergies').value,
224
+ tests: document.getElementById('tests').value
225
+ };
226
+
227
+ console.log('Medical Record:', formData);
228
+ alert('Record saved successfully!');
229
+ }
230
+ </script>
231
+ </body>
232
+ </html>