Hugging Face's logo

Spaces:
mathurinacheisoft
/
medsynapse
Running

App Files Community
mathurinacheisoft commited on
Commit
ddcbb64
·
verified ·
1 Parent(s): d93d51c

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1083 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Medsynapse
3
- emoji: 🔥
4
  colorFrom: pink
5
- colorTo: green
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: medsynapse
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: yellow
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,1083 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MedSynapse - Plateforme IA pour Professionnels de Santé</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
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ medical: {
16
+ dark: '#0f172a',
17
+ primary: '#3b82f6',
18
+ secondary: '#10b981',
19
+ accent: '#8b5cf6',
20
+ text: '#e2e8f0',
21
+ light: '#1e293b',
22
+ danger: '#ef4444',
23
+ warning: '#f59e0b'
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
29
+ </script>
30
+ <style>
31
+ .custom-scrollbar::-webkit-scrollbar {
32
+ width: 6px;
33
+ }
34
+ .custom-scrollbar::-webkit-scrollbar-track {
35
+ background: #1e293b;
36
+ }
37
+ .custom-scrollbar::-webkit-scrollbar-thumb {
38
+ background-color: #3b82f6;
39
+ border-radius: 20px;
40
+ }
41
+ .dicom-viewer {
42
+ background: linear-gradient(135deg, #1e293b 25%, transparent 25%) -10px 0,
43
+ linear-gradient(225deg, #1e293b 25%, transparent 25%) -10px 0,
44
+ linear-gradient(315deg, #1e293b 25%, transparent 25%),
45
+ linear-gradient(45deg, #1e293b 25%, transparent 25%);
46
+ background-size: 20px 20px;
47
+ }
48
+ .waveform {
49
+ background: repeating-linear-gradient(90deg, #3b82f6, #3b82f6 2px, transparent 2px, transparent 4px);
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-medical-dark text-medical-text min-h-screen font-sans">
54
+ <!-- Onboarding Tutorial Overlay -->
55
+ <div id="onboarding-overlay" class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center hidden">
56
+ <div class="bg-medical-light rounded-lg max-w-2xl w-full mx-4 p-6 relative">
57
+ <div id="onboarding-step-1" class="onboarding-step">
58
+ <h2 class="text-2xl font-bold mb-4">Bienvenue dans MedSynapse</h2>
59
+ <p class="mb-6">L'IA médicale multimodale pour les professionnels de santé. Cliquez sur Suivant pour découvrir ses capacités.</p>
60
+ <div class="flex justify-between">
61
+ <div></div>
62
+ <button onclick="nextOnboardingStep()" class="bg-medical-primary hover:bg-blue-600 text-white px-6 py-2 rounded-lg">
63
+ Suivant <i class="fas fa-arrow-right ml-2"></i>
64
+ </button>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Other steps will be shown here dynamically -->
69
+ </div>
70
+ </div>
71
+
72
+ <!-- Navigation -->
73
+ <nav class="bg-medical-dark border-b border-medical-light sticky top-0 z-50">
74
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
75
+ <div class="flex items-center justify-between h-16">
76
+ <div class="flex items-center">
77
+ <div class="flex-shrink-0 flex items-center">
78
+ <i class="fas fa-brain text-medical-secondary text-2xl mr-2"></i>
79
+ <span class="text-xl font-bold text-white">Med<span class="text-medical-primary">Synapse</span></span>
80
+ </div>
81
+ <div class="hidden md:block">
82
+ <div class="ml-10 flex items-baseline space-x-4">
83
+ <a href="#" class="text-medical-primary px-3 py-2 rounded-md text-sm font-medium">Tableau de bord</a>
84
+ <a href="#" class="text-medical-text hover:text-medical-primary px-3 py-2 rounded-md text-sm font-medium">Assistant Clinique</a>
85
+ <a href="#" class="text-medical-text hover:text-medical-primary px-3 py-2 rounded-md text-sm font-medium">Imagerie Médicale</a>
86
+ <a href="#" class="text-medical-text hover:text-medical-primary px-3 py-2 rounded-md text-sm font-medium">Triage</a>
87
+ <a href="#" class="text-medical-text hover:text-medical-primary px-3 py-2 rounded-md text-sm font-medium">Formation</a>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ <div class="hidden md:block">
92
+ <div class="ml-4 flex items-center md:ml-6">
93
+ <button class="p-1 rounded-full text-medical-text hover:text-white focus:outline-none">
94
+ <i class="fas fa-bell"></i>
95
+ </button>
96
+ <div class="ml-3 relative">
97
+ <div>
98
+ <button id="user-menu" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none">
99
+ <span class="sr-only">Ouvrir le menu utilisateur</span>
100
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
101
+ </button>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ <div class="-mr-2 flex md:hidden">
107
+ <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-medical-text hover:text-white hover:bg-medical-light focus:outline-none">
108
+ <i class="fas fa-bars"></i>
109
+ </button>
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Mobile menu -->
115
+ <div id="mobile-menu" class="hidden md:hidden">
116
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
117
+ <a href="#" class="text-medical-primary block px-3 py-2 rounded-md text-base font-medium">Tableau de bord</a>
118
+ <a href="#" class="text-medical-text hover:text-medical-primary block px-3 py-2 rounded-md text-base font-medium">Assistant Clinique</a>
119
+ <a href="#" class="text-medical-text hover:text-medical-primary block px-3 py-2 rounded-md text-base font-medium">Imagerie Médicale</a>
120
+ <a href="#" class="text-medical-text hover:text-medical-primary block px-3 py-2 rounded-md text-base font-medium">Triage</a>
121
+ <a href="#" class="text-medical-text hover:text-medical-primary block px-3 py-2 rounded-md text-base font-medium">Formation</a>
122
+ </div>
123
+ <div class="pt-4 pb-3 border-t border-medical-light">
124
+ <div class="flex items-center px-5">
125
+ <div class="flex-shrink-0">
126
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
127
+ </div>
128
+ <div class="ml-3">
129
+ <div class="text-base font-medium text-white">Dr. Jean Dupont</div>
130
+ <div class="text-sm font-medium text-medical-text">jean.dupont@hopital.fr</div>
131
+ </div>
132
+ </div>
133
+ <div class="mt-3 px-2 space-y-1">
134
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-medical-text hover:text-white hover:bg-medical-light">Votre profil</a>
135
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-medical-text hover:text-white hover:bg-medical-light">Paramètres</a>
136
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-medical-text hover:text-white hover:bg-medical-light">Déconnexion</a>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </nav>
141
+
142
+ <!-- Main Content -->
143
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
144
+ <div class="flex flex-col md:flex-row gap-6">
145
+ <!-- Sidebar -->
146
+ <div class="w-full md:w-64 flex-shrink-0">
147
+ <div class="bg-medical-light rounded-lg p-4 sticky top-24">
148
+ <h3 class="text-lg font-semibold mb-4">Fonctionnalités</h3>
149
+ <ul class="space-y-2">
150
+ <li>
151
+ <a href="#assistant" class="flex items-center p-2 rounded hover:bg-medical-dark">
152
+ <i class="fas fa-comment-medical text-medical-primary mr-3"></i>
153
+ <span>Assistant Clinique</span>
154
+ </a>
155
+ </li>
156
+ <li>
157
+ <a href="#compte-rendu" class="flex items-center p-2 rounded hover:bg-medical-dark">
158
+ <i class="fas fa-file-medical text-medical-secondary mr-3"></i>
159
+ <span>Comptes Rendus</span>
160
+ </a>
161
+ </li>
162
+ <li>
163
+ <a href="#imagerie" class="flex items-center p-2 rounded hover:bg-medical-dark">
164
+ <i class="fas fa-x-ray text-medical-accent mr-3"></i>
165
+ <span>Analyse d'Imagerie</span>
166
+ </a>
167
+ </li>
168
+ <li>
169
+ <a href="#recherche" class="flex items-center p-2 rounded hover:bg-medical-dark">
170
+ <i class="fas fa-search text-medical-warning mr-3"></i>
171
+ <span>Recherche Médicale</span>
172
+ </a>
173
+ </li>
174
+ <li>
175
+ <a href="#triage" class="flex items-center p-2 rounded hover:bg-medical-dark">
176
+ <i class="fas fa-procedures text-medical-danger mr-3"></i>
177
+ <span>Triage Patient</span>
178
+ </a>
179
+ </li>
180
+ <li>
181
+ <a href="#formation" class="flex items-center p-2 rounded hover:bg-medical-dark">
182
+ <i class="fas fa-graduation-cap text-medical-primary mr-3"></i>
183
+ <span>Formation</span>
184
+ </a>
185
+ </li>
186
+ </ul>
187
+
188
+ <div class="mt-6 pt-4 border-t border-medical-dark">
189
+ <h3 class="text-lg font-semibold mb-3">Derniers Dossiers</h3>
190
+ <ul class="space-y-2 text-sm">
191
+ <li class="flex items-center">
192
+ <div class="w-2 h-2 rounded-full bg-medical-secondary mr-2"></div>
193
+ <span>PAT-2023-0456</span>
194
+ </li>
195
+ <li class="flex items-center">
196
+ <div class="w-2 h-2 rounded-full bg-medical-warning mr-2"></div>
197
+ <span>PAT-2023-0789</span>
198
+ </li>
199
+ <li class="flex items-center">
200
+ <div class="w-2 h-2 rounded-full bg-medical-primary mr-2"></div>
201
+ <span>PAT-2023-0123</span>
202
+ </li>
203
+ </ul>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Main Content Area -->
209
+ <div class="flex-1">
210
+ <!-- Welcome Banner -->
211
+ <div class="bg-gradient-to-r from-medical-dark to-medical-light rounded-lg p-6 mb-6 border border-medical-light">
212
+ <div class="flex flex-col md:flex-row items-center">
213
+ <div class="flex-1">
214
+ <h1 class="text-2xl md:text-3xl font-bold mb-2">Bienvenue, Dr. Dupont</h1>
215
+ <p class="text-medical-text opacity-90">Comment pouvons-nous vous aider aujourd'hui ? MedSynapse est prêt à vous assister dans vos tâches cliniques.</p>
216
+ </div>
217
+ <div class="mt-4 md:mt-0">
218
+ <button class="bg-medical-primary hover:bg-blue-600 text-white px-6 py-2 rounded-lg flex items-center">
219
+ <i class="fas fa-plus mr-2"></i> Nouveau Dossier
220
+ </button>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Assistant Clinique Section -->
226
+ <section id="assistant" class="mb-8">
227
+ <div class="flex items-center justify-between mb-4">
228
+ <h2 class="text-xl font-semibold flex items-center">
229
+ <i class="fas fa-comment-medical text-medical-primary mr-2"></i>
230
+ Assistant Clinique
231
+ </h2>
232
+ <div class="flex space-x-2">
233
+ <button class="bg-medical-light hover:bg-medical-dark text-medical-text px-3 py-1 rounded text-sm">
234
+ <i class="fas fa-microphone mr-1"></i> Dictée
235
+ </button>
236
+ <button class="bg-medical-light hover:bg-medical-dark text-medical-text px-3 py-1 rounded text-sm">
237
+ <i class="fas fa-file-import mr-1"></i> Importer
238
+ </button>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="bg-medical-light rounded-lg overflow-hidden">
243
+ <div class="p-4 border-b border-medical-dark">
244
+ <div class="flex items-center space-x-2">
245
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
246
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
247
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
248
+ <span class="text-sm ml-2 text-medical-text opacity-70">MedGemma 27B - Mode Texte</span>
249
+ </div>
250
+ </div>
251
+ <div class="p-4 h-64 overflow-y-auto custom-scrollbar">
252
+ <div class="flex mb-4">
253
+ <div class="flex-shrink-0 mr-3">
254
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
255
+ </div>
256
+ <div class="bg-medical-dark rounded-lg p-3 max-w-3/4">
257
+ <p class="text-sm">Patient de 45 ans, antécédents d'HTA et diabète type 2, présente une douleur thoracique depuis 2 heures avec irradiation au bras gauche. TA 160/95, FC 98/min, SpO2 96%. ECG : sus-décalage ST en V2-V4. Quel est votre diagnostic et prise en charge ?</p>
258
+ </div>
259
+ </div>
260
+ <div class="flex mb-4 justify-end">
261
+ <div class="bg-medical-primary rounded-lg p-3 max-w-3/4">
262
+ <p class="text-sm text-white">Diagnostic probable : syndrome coronarien aigu avec élévation du ST (STEMI) antérieur. Prise en charge urgente : appel du cath lab, aspirine 250-300 mg IV, ticagrelor 180 mg per os, héparine IV selon protocole local, analgésie par morphine si nécessaire, monitorisation stricte. À confirmer par angiographie coronaire en urgence.</p>
263
+ <div class="mt-2 flex justify-end text-xs text-blue-200">
264
+ <span>Confiance : 92%</span>
265
+ </div>
266
+ </div>
267
+ <div class="flex-shrink-0 ml-3">
268
+ <i class="fas fa-robot text-medical-primary text-2xl"></i>
269
+ </div>
270
+ </div>
271
+ <div class="flex mb-4">
272
+ <div class="flex-shrink-0 mr-3">
273
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
274
+ </div>
275
+ <div class="bg-medical-dark rounded-lg p-3 max-w-3/4">
276
+ <p class="text-sm">Merci. Pouvez-vous générer un compte-rendu d'admission standardisé pour ce cas ?</p>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ <div class="p-4 border-t border-medical-dark">
281
+ <div class="flex">
282
+ <input type="text" placeholder="Poser une question ou décrire un cas clinique..." class="flex-1 bg-medical-dark border border-medical-light rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-medical-primary">
283
+ <button class="bg-medical-primary hover:bg-blue-600 text-white px-4 py-2 rounded-r-lg">
284
+ <i class="fas fa-paper-plane"></i>
285
+ </button>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </section>
290
+
291
+ <!-- Compte Rendu Section -->
292
+ <section id="compte-rendu" class="mb-8">
293
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
294
+ <i class="fas fa-file-medical text-medical-secondary mr-2"></i>
295
+ Rédaction Automatique de Comptes Rendus
296
+ </h2>
297
+
298
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
299
+ <div class="bg-medical-light rounded-lg p-4">
300
+ <div class="flex items-center justify-between mb-3">
301
+ <h3 class="font-medium">À partir de notes</h3>
302
+ <button class="text-medical-primary text-sm flex items-center">
303
+ <i class="fas fa-history mr-1"></i> Historique
304
+ </button>
305
+ </div>
306
+ <textarea class="w-full bg-medical-dark rounded-lg p-3 h-40 mb-3 focus:outline-none focus:ring-2 focus:ring-medical-secondary" placeholder="Coller vos notes brutes ici..."></textarea>
307
+ <button class="w-full bg-medical-secondary hover:bg-emerald-600 text-white py-2 rounded-lg flex items-center justify-center">
308
+ <i class="fas fa-magic mr-2"></i> Générer le Compte-Rendu
309
+ </button>
310
+ </div>
311
+
312
+ <div class="bg-medical-light rounded-lg p-4">
313
+ <div class="flex items-center justify-between mb-3">
314
+ <h3 class="font-medium">À partir de dictée</h3>
315
+ <span class="text-xs text-medical-text opacity-70">Français, Anglais, Chinois</span>
316
+ </div>
317
+ <div class="bg-medical-dark rounded-lg p-4 mb-3 h-40 flex flex-col items-center justify-center">
318
+ <button class="mb-2 p-4 rounded-full bg-medical-secondary bg-opacity-20 border-2 border-medical-secondary">
319
+ <i class="fas fa-microphone text-medical-secondary text-2xl"></i>
320
+ </button>
321
+ <p class="text-sm text-center text-medical-text opacity-70">Cliquez pour commencer l'enregistrement</p>
322
+ <div class="mt-2 waveform w-full h-8"></div>
323
+ </div>
324
+ <button class="w-full bg-medical-secondary hover:bg-emerald-600 text-white py-2 rounded-lg flex items-center justify-center">
325
+ <i class="fas fa-file-audio mr-2"></i> Transcrire et Analyser
326
+ </button>
327
+ </div>
328
+ </div>
329
+
330
+ <div class="mt-6 bg-medical-light rounded-lg p-4">
331
+ <h3 class="font-medium mb-3 flex items-center">
332
+ <i class="fas fa-user-injured mr-2"></i>
333
+ Résumé de Dossier Patient
334
+ </h3>
335
+ <div class="flex flex-col md:flex-row gap-4">
336
+ <div class="flex-1">
337
+ <label class="block text-sm mb-1">ID Patient</label>
338
+ <input type="text" class="w-full bg-medical-dark rounded-lg p-2 mb-3 focus:outline-none focus:ring-2 focus:ring-medical-secondary" placeholder="PAT-XXXX-XXXX">
339
+ </div>
340
+ <div class="flex-1">
341
+ <label class="block text-sm mb-1">Sources à inclure</label>
342
+ <div class="flex flex-wrap gap-2">
343
+ <label class="inline-flex items-center">
344
+ <input type="checkbox" class="form-checkbox text-medical-secondary rounded" checked>
345
+ <span class="ml-2 text-sm">Notes d'hospitalisation</span>
346
+ </label>
347
+ <label class="inline-flex items-center">
348
+ <input type="checkbox" class="form-checkbox text-medical-secondary rounded" checked>
349
+ <span class="ml-2 text-sm">Prescriptions</span>
350
+ </label>
351
+ <label class="inline-flex items-center">
352
+ <input type="checkbox" class="form-checkbox text-medical-secondary rounded">
353
+ <span class="ml-2 text-sm">Imagerie</span>
354
+ </label>
355
+ <label class="inline-flex items-center">
356
+ <input type="checkbox" class="form-checkbox text-medical-secondary rounded" checked>
357
+ <span class="ml-2 text-sm">Antécédents</span>
358
+ </label>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ <button class="mt-3 bg-medical-secondary hover:bg-emerald-600 text-white py-2 px-4 rounded-lg flex items-center">
363
+ <i class="fas fa-file-contract mr-2"></i> Générer le Résumé
364
+ </button>
365
+ </div>
366
+ </section>
367
+
368
+ <!-- Imagerie Médicale Section -->
369
+ <section id="imagerie" class="mb-8">
370
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
371
+ <i class="fas fa-x-ray text-medical-accent mr-2"></i>
372
+ Analyse d'Imagerie Médicale
373
+ </h2>
374
+
375
+ <div class="bg-medical-light rounded-lg overflow-hidden">
376
+ <div class="p-4 border-b border-medical-dark flex items-center justify-between">
377
+ <div class="flex items-center">
378
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
379
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
380
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
381
+ <span class="text-sm ml-2">MedGemma 27B - Mode Multimodal</span>
382
+ </div>
383
+ <div class="flex space-x-2">
384
+ <button class="text-xs bg-medical-dark hover:bg-medical-primary hover:text-white px-2 py-1 rounded">
385
+ Radiographie
386
+ </button>
387
+ <button class="text-xs bg-medical-dark hover:bg-medical-primary hover:text-white px-2 py-1 rounded">
388
+ IRM
389
+ </button>
390
+ <button class="text-xs bg-medical-dark hover:bg-medical-primary hover:text-white px-2 py-1 rounded">
391
+ Scanner
392
+ </button>
393
+ <button class="text-xs bg-medical-dark hover:bg-medical-primary hover:text-white px-2 py-1 rounded">
394
+ Dermatologie
395
+ </button>
396
+ </div>
397
+ </div>
398
+
399
+ <div class="p-4 grid grid-cols-1 lg:grid-cols-3 gap-6">
400
+ <div class="lg:col-span-2">
401
+ <div class="dicom-viewer rounded-lg border-2 border-dashed border-medical-dark h-96 flex items-center justify-center">
402
+ <div class="text-center">
403
+ <i class="fas fa-cloud-upload-alt text-4xl text-medical-text opacity-50 mb-2"></i>
404
+ <p class="text-medical-text opacity-70">Glissez-déposez une image médicale ou</p>
405
+ <button class="mt-2 bg-medical-accent hover:bg-purple-600 text-white py-2 px-4 rounded-lg">
406
+ <i class="fas fa-folder-open mr-2"></i> Parcourir
407
+ </button>
408
+ <p class="text-xs mt-2 text-medical-text opacity-50">DICOM, JPG, PNG (max 20MB)</p>
409
+ </div>
410
+ </div>
411
+
412
+ <div class="mt-4 bg-medical-dark rounded-lg p-3">
413
+ <label class="block text-sm mb-2">Contexte clinique (optionnel)</label>
414
+ <textarea class="w-full bg-medical-light rounded-lg p-3 h-20 focus:outline-none focus:ring-2 focus:ring-medical-accent" placeholder="Décrire les symptômes, antécédents pertinents..."></textarea>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="lg:col-span-1">
419
+ <div class="bg-medical-dark rounded-lg p-4 h-full">
420
+ <h3 class="font-medium mb-3">Résultats d'Analyse</h3>
421
+ <div class="text-center py-8 text-medical-text opacity-50">
422
+ <i class="fas fa-microscope text-3xl mb-2"></i>
423
+ <p>Aucune image analysée</p>
424
+ </div>
425
+
426
+ <div class="mt-auto">
427
+ <button class="w-full bg-medical-accent hover:bg-purple-600 text-white py-2 rounded-lg flex items-center justify-center">
428
+ <i class="fas fa-diagnoses mr-2"></i> Analyser l'Image
429
+ </button>
430
+ <button class="w-full mt-2 bg-medical-dark border border-medical-accent text-medical-accent py-2 rounded-lg flex items-center justify-center">
431
+ <i class="fas fa-search mr-2"></i> Recherche Similaire
432
+ </button>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
440
+ <div class="bg-medical-light rounded-lg p-4">
441
+ <div class="flex items-center mb-2">
442
+ <i class="fas fa-lungs text-medical-accent mr-2"></i>
443
+ <h3 class="font-medium">Radiographie Pulmonaire</h3>
444
+ </div>
445
+ <p class="text-sm text-medical-text opacity-80 mb-3">Détection d'opacités, épanchements, pneumothorax, etc.</p>
446
+ <div class="text-xs bg-medical-dark rounded-full px-3 py-1 inline-block">Précision: 94%</div>
447
+ </div>
448
+ <div class="bg-medical-light rounded-lg p-4">
449
+ <div class="flex items-center mb-2">
450
+ <i class="fas fa-brain text-medical-accent mr-2"></i>
451
+ <h3 class="font-medium">IRM Cérébrale</h3>
452
+ </div>
453
+ <p class="text-sm text-medical-text opacity-80 mb-3">Détection d'AVC, tumeurs, sclérose en plaques, etc.</p>
454
+ <div class="text-xs bg-medical-dark rounded-full px-3 py-1 inline-block">Précision: 91%</div>
455
+ </div>
456
+ <div class="bg-medical-light rounded-lg p-4">
457
+ <div class="flex items-center mb-2">
458
+ <i class="fas fa-allergies text-medical-accent mr-2"></i>
459
+ <h3 class="font-medium">Dermatologie</h3>
460
+ </div>
461
+ <p class="text-sm text-medical-text opacity-80 mb-3">Détection de mélanomes, psoriasis, eczéma, etc.</p>
462
+ <div class="text-xs bg-medical-dark rounded-full px-3 py-1 inline-block">Précision: 89%</div>
463
+ </div>
464
+ </div>
465
+ </section>
466
+
467
+ <!-- Recherche Médicale Section -->
468
+ <section id="recherche" class="mb-8">
469
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
470
+ <i class="fas fa-search text-medical-warning mr-2"></i>
471
+ Moteur de Recherche Médicale
472
+ </h2>
473
+
474
+ <div class="bg-medical-light rounded-lg p-4">
475
+ <div class="flex flex-col md:flex-row gap-4 mb-4">
476
+ <div class="flex-1">
477
+ <label class="block text-sm mb-1">Recherche par texte</label>
478
+ <div class="relative">
479
+ <input type="text" class="w-full bg-medical-dark rounded-lg p-2 pl-10 focus:outline-none focus:ring-2 focus:ring-medical-warning" placeholder="Ex: fracture radius distal enfant">
480
+ <i class="fas fa-search absolute left-3 top-3 text-medical-text opacity-50"></i>
481
+ </div>
482
+ </div>
483
+ <div class="flex-1">
484
+ <label class="block text-sm mb-1">Recherche par image</label>
485
+ <div class="flex">
486
+ <div class="flex-1 bg-medical-dark rounded-l-lg p-2 flex items-center justify-center">
487
+ <span class="text-sm text-medical-text opacity-70">Glissez une image ici</span>
488
+ </div>
489
+ <button class="bg-medical-warning text-white px-3 rounded-r-lg">
490
+ <i class="fas fa-upload"></i>
491
+ </button>
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="flex items-center justify-between">
497
+ <div class="flex space-x-2">
498
+ <button class="text-xs bg-medical-warning bg-opacity-20 text-medical-warning px-2 py-1 rounded">
499
+ Tous
500
+ </button>
501
+ <button class="text-xs bg-medical-dark hover:bg-medical-warning hover:text-white px-2 py-1 rounded">
502
+ Radiographies
503
+ </button>
504
+ <button class="text-xs bg-medical-dark hover:bg-medical-warning hover:text-white px-2 py-1 rounded">
505
+ IRM
506
+ </button>
507
+ <button class="text-xs bg-medical-dark hover:bg-medical-warning hover:text-white px-2 py-1 rounded">
508
+ Scanner
509
+ </button>
510
+ <button class="text-xs bg-medical-dark hover:bg-medical-warning hover:text-white px-2 py-1 rounded">
511
+ Échographie
512
+ </button>
513
+ </div>
514
+ <button class="text-sm bg-medical-warning hover:bg-amber-600 text-white px-4 py-1 rounded-lg">
515
+ <i class="fas fa-search mr-1"></i> Rechercher
516
+ </button>
517
+ </div>
518
+ </div>
519
+
520
+ <div class="mt-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
521
+ <div class="bg-medical-dark rounded-lg overflow-hidden border border-medical-light">
522
+ <div class="h-32 bg-gray-800 flex items-center justify-center">
523
+ <i class="fas fa-image text-3xl text-medical-text opacity-30"></i>
524
+ </div>
525
+ <div class="p-2">
526
+ <p class="text-sm truncate">RX thorax pneumonie</p>
527
+ <p class="text-xs text-medical-text opacity-50">92% similarité</p>
528
+ </div>
529
+ </div>
530
+ <div class="bg-medical-dark rounded-lg overflow-hidden border border-medical-light">
531
+ <div class="h-32 bg-gray-800 flex items-center justify-center">
532
+ <i class="fas fa-image text-3xl text-medical-text opacity-30"></i>
533
+ </div>
534
+ <div class="p-2">
535
+ <p class="text-sm truncate">IRM cerveau tumeur</p>
536
+ <p class="text-xs text-medical-text opacity-50">87% similarité</p>
537
+ </div>
538
+ </div>
539
+ <div class="bg-medical-dark rounded-lg overflow-hidden border border-medical-light">
540
+ <div class="h-32 bg-gray-800 flex items-center justify-center">
541
+ <i class="fas fa-image text-3xl text-medical-text opacity-30"></i>
542
+ </div>
543
+ <div class="p-2">
544
+ <p class="text-sm truncate">Scanner abdome appendicite</p>
545
+ <p class="text-xs text-medical-text opacity-50">85% similarité</p>
546
+ </div>
547
+ </div>
548
+ <div class="bg-medical-dark rounded-lg overflow-hidden border border-medical-light">
549
+ <div class="h-32 bg-gray-800 flex items-center justify-center">
550
+ <i class="fas fa-image text-3xl text-medical-text opacity-30"></i>
551
+ </div>
552
+ <div class="p-2">
553
+ <p class="text-sm truncate">Echo cardiaque FEVG basse</p>
554
+ <p class="text-xs text-medical-text opacity-50">79% similarité</p>
555
+ </div>
556
+ </div>
557
+ <div class="bg-medical-dark rounded-lg overflow-hidden border border-medical-light">
558
+ <div class="h-32 bg-gray-800 flex items-center justify-center">
559
+ <i class="fas fa-image text-3xl text-medical-text opacity-30"></i>
560
+ </div>
561
+ <div class="p-2">
562
+ <p class="text-sm truncate">Dermatologie mélanome</p>
563
+ <p class="text-xs text-medical-text opacity-50">76% similarité</p>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </section>
568
+
569
+ <!-- Triage Patient Section -->
570
+ <section id="triage" class="mb-8">
571
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
572
+ <i class="fas fa-procedures text-medical-danger mr-2"></i>
573
+ Assistant de Triage Patient
574
+ </h2>
575
+
576
+ <div class="bg-medical-light rounded-lg overflow-hidden">
577
+ <div class="p-4 border-b border-medical-dark flex items-center">
578
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
579
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
580
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
581
+ <span class="text-sm ml-2">Mode Multimodal - Texte + Image</span>
582
+ </div>
583
+
584
+ <div class="grid grid-cols-1 lg:grid-cols-3">
585
+ <div class="lg:col-span-2 p-4">
586
+ <div class="flex mb-4">
587
+ <div class="flex-shrink-0 mr-3">
588
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
589
+ </div>
590
+ <div class="bg-medical-dark rounded-lg p-3 max-w-3/4">
591
+ <p class="text-sm">Patient de 32 ans, fièvre à 39.5°C depuis 3 jours, toux productive avec expectorations verdâtres, dyspnée modérée. Pas d'antécédents particuliers. Voici une photo de la radiographie thoracique :</p>
592
+ </div>
593
+ </div>
594
+
595
+ <div class="bg-medical-dark rounded-lg p-4 mb-4">
596
+ <div class="dicom-viewer rounded-lg h-48 flex items-center justify-center">
597
+ <i class="fas fa-x-ray text-4xl text-medical-text opacity-50"></i>
598
+ </div>
599
+ </div>
600
+
601
+ <div class="flex justify-end mb-4">
602
+ <div class="bg-medical-primary rounded-lg p-3 max-w-3/4">
603
+ <p class="text-sm text-white">Diagnostic probable : pneumonie communautaire. Critères de gravité : CURB-65 score 1 (1 point pour confusion). Examens complémentaires recommandés : gaz du sang, PCR, hémocultures. Prise en charge : antibiothérapie probabiliste (amoxicilline-acide clavulanique), surveillance ambulatoire possible mais évaluation clinique dans les 48h nécessaire.</p>
604
+ <div class="mt-2 flex justify-between text-xs text-blue-200">
605
+ <span>Confiance : 88%</span>
606
+ <span>Urgence : <span class="font-bold">Niveau 3</span> (à voir dans les 12h)</span>
607
+ </div>
608
+ </div>
609
+ <div class="flex-shrink-0 ml-3">
610
+ <i class="fas fa-robot text-medical-primary text-2xl"></i>
611
+ </div>
612
+ </div>
613
+
614
+ <div class="flex">
615
+ <div class="flex-shrink-0 mr-3">
616
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
617
+ </div>
618
+ <div class="bg-medical-dark rounded-lg p-3 max-w-3/4">
619
+ <p class="text-sm">Quels sont les diagnostics différentiels à considérer ?</p>
620
+ </div>
621
+ </div>
622
+ </div>
623
+
624
+ <div class="lg:col-span-1 bg-medical-dark p-4">
625
+ <h3 class="font-medium mb-3">Diagnostics Différentiels</h3>
626
+ <div class="space-y-3">
627
+ <div class="bg-medical-light rounded-lg p-3">
628
+ <div class="flex justify-between items-start">
629
+ <span class="font-medium">Pneumonie bactérienne</span>
630
+ <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">85%</span>
631
+ </div>
632
+ <p class="text-xs mt-1 text-medical-text opacity-80">Opacité alvéolaire lobaire inférieure droite sur la RX</p>
633
+ </div>
634
+ <div class="bg-medical-light rounded-lg p-3">
635
+ <div class="flex justify-between items-start">
636
+ <span class="font-medium">Bronchite aiguë</span>
637
+ <span class="text-xs bg-yellow-900 text-yellow-300 px-2 py-1 rounded-full">45%</span>
638
+ </div>
639
+ <p class="text-xs mt-1 text-medical-text opacity-80">Moins probable avec fièvre élevée et image radiologique</p>
640
+ </div>
641
+ <div class="bg-medical-light rounded-lg p-3">
642
+ <div class="flex justify-between items-start">
643
+ <span class="font-medium">COVID-19</span>
644
+ <span class="text-xs bg-yellow-900 text-yellow-300 px-2 py-1 rounded-full">35%</span>
645
+ </div>
646
+ <p class="text-xs mt-1 text-medical-text opacity-80">Test PCR recommandé malgré tableau typique bactérien</p>
647
+ </div>
648
+ <div class="bg-medical-light rounded-lg p-3">
649
+ <div class="flex justify-between items-start">
650
+ <span class="font-medium">Embolie pulmonaire</span>
651
+ <span class="text-xs bg-red-900 text-red-300 px-2 py-1 rounded-full">15%</span>
652
+ </div>
653
+ <p class="text-xs mt-1 text-medical-text opacity-80">À évoquer si absence d'amélioration sous antibiotiques</p>
654
+ </div>
655
+ </div>
656
+
657
+ <div class="mt-6">
658
+ <h3 class="font-medium mb-2">Niveau d'Urgence</h3>
659
+ <div class="bg-medical-light rounded-lg p-3">
660
+ <div class="flex items-center mb-1">
661
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
662
+ <span class="text-sm font-medium">Niveau 1</span>
663
+ <span class="text-xs ml-auto">Urgence vitale immédiate</span>
664
+ </div>
665
+ <div class="flex items-center mb-1">
666
+ <div class="w-3 h-3 rounded-full bg-orange-500 mr-2"></div>
667
+ <span class="text-sm font-medium">Niveau 2</span>
668
+ <span class="text-xs ml-auto">Urgence potentiellement grave</span>
669
+ </div>
670
+ <div class="flex items-center mb-1">
671
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2 bg-medical-warning"></div>
672
+ <span class="text-sm font-medium">Niveau 3</span>
673
+ <span class="text-xs ml-auto">Urgence relative</span>
674
+ </div>
675
+ <div class="flex items-center">
676
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
677
+ <span class="text-sm font-medium">Niveau 4</span>
678
+ <span class="text-xs ml-auto">Non urgent</span>
679
+ </div>
680
+ </div>
681
+ </div>
682
+ </div>
683
+ </div>
684
+
685
+ <div class="p-4 border-t border-medical-dark">
686
+ <div class="flex">
687
+ <input type="text" placeholder="Décrire les symptômes du patient..." class="flex-1 bg-medical-dark border border-medical-light rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-medical-danger">
688
+ <button class="bg-medical-danger hover:bg-red-600 text-white px-4 py-2 rounded-r-lg">
689
+ <i class="fas fa-paper-plane"></i>
690
+ </button>
691
+ </div>
692
+ <div class="mt-2 flex items-center justify-between">
693
+ <div class="flex space-x-2">
694
+ <button class="text-xs bg-medical-dark hover:bg-medical-danger hover:text-white px-2 py-1 rounded flex items-center">
695
+ <i class="fas fa-camera mr-1"></i> Ajouter Image
696
+ </button>
697
+ <button class="text-xs bg-medical-dark hover:bg-medical-danger hover:text-white px-2 py-1 rounded flex items-center">
698
+ <i class="fas fa-microphone mr-1"></i> Dictée
699
+ </button>
700
+ </div>
701
+ <span class="text-xs text-medical-text opacity-50">MedSynapse Triage v2.1</span>
702
+ </div>
703
+ </div>
704
+ </div>
705
+ </section>
706
+
707
+ <!-- Formation Section -->
708
+ <section id="formation" class="mb-8">
709
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
710
+ <i class="fas fa-graduation-cap text-medical-primary mr-2"></i>
711
+ Outils de Formation Médicale
712
+ </h2>
713
+
714
+ <div class="bg-medical-light rounded-lg p-6">
715
+ <h3 class="text-lg font-medium mb-4">Générateur de Cas Cliniques</h3>
716
+
717
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
718
+ <div>
719
+ <div class="mb-4">
720
+ <label class="block text-sm mb-2">Spécialité</label>
721
+ <select class="w-full bg-medical-dark rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-medical-primary">
722
+ <option>Cardiologie</option>
723
+ <option selected>Pneumologie</option>
724
+ <option>Neurologie</option>
725
+ <option>Gastro-entérologie</option>
726
+ <option>Dermatologie</option>
727
+ </select>
728
+ </div>
729
+
730
+ <div class="mb-4">
731
+ <label class="block text-sm mb-2">Niveau de difficulté</label>
732
+ <div class="flex space-x-2">
733
+ <button class="flex-1 bg-medical-primary text-white py-1 rounded text-sm">Débutant</button>
734
+ <button class="flex-1 bg-medical-primary bg-opacity-50 text-white py-1 rounded text-sm">Intermédiaire</button>
735
+ <button class="flex-1 bg-medical-dark hover:bg-medical-primary py-1 rounded text-sm">Avancé</button>
736
+ </div>
737
+ </div>
738
+
739
+ <div class="mb-4">
740
+ <label class="block text-sm mb-2">Inclure des images</label>
741
+ <div class="flex space-x-2">
742
+ <button class="flex-1 bg-medical-primary text-white py-1 rounded text-sm">Oui</button>
743
+ <button class="flex-1 bg-medical-dark hover:bg-medical-primary py-1 rounded text-sm">Non</button>
744
+ </div>
745
+ </div>
746
+
747
+ <button class="w-full bg-medical-primary hover:bg-blue-600 text-white py-2 rounded-lg flex items-center justify-center">
748
+ <i class="fas fa-brain mr-2"></i> Générer un Cas Clinique
749
+ </button>
750
+ </div>
751
+
752
+ <div class="bg-medical-dark rounded-lg p-4">
753
+ <h4 class="font-medium mb-3">Cas Clinique #PNE-045</h4>
754
+ <div class="dicom-viewer rounded-lg h-40 mb-3 flex items-center justify-center">
755
+ <i class="fas fa-x-ray text-3xl text-medical-text opacity-50"></i>
756
+ </div>
757
+ <p class="text-sm mb-4">Patient de 68 ans, fumeur à 30 PA, présente une toux chronique avec hémoptysies récidivantes depuis 3 mois. Amaigrissement de 6 kg dans le même temps. Pas de fièvre. Examen clinique : matité à la percussion base droite, râles bronchiques localisés.</p>
758
+
759
+ <div class="space-y-2">
760
+ <label class="flex items-center space-x-3">
761
+ <input type="radio" name="diagnostic" class="form-radio text-medical-primary">
762
+ <span class="text-sm">Cancer bronchique</span>
763
+ </label>
764
+ <label class="flex items-center space-x-3">
765
+ <input type="radio" name="diagnostic" class="form-radio text-medical-primary">
766
+ <span class="text-sm">Tuberculose pulmonaire</span>
767
+ </label>
768
+ <label class="flex items-center space-x-3">
769
+ <input type="radio" name="diagnostic" class="form-radio text-medical-primary">
770
+ <span class="text-sm">Pneumopathie infectieuse</span>
771
+ </label>
772
+ <label class="flex items-center space-x-3">
773
+ <input type="radio" name="diagnostic" class="form-radio text-medical-primary">
774
+ <span class="text-sm">Bronchectasies</span>
775
+ </label>
776
+ </div>
777
+
778
+ <button class="mt-3 w-full bg-medical-primary hover:bg-blue-600 text-white py-1 rounded text-sm">
779
+ Valider et Voir la Correction
780
+ </button>
781
+ </div>
782
+ </div>
783
+ </div>
784
+
785
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
786
+ <div class="bg-medical-light rounded-lg p-4 hover:bg-medical-dark transition cursor-pointer">
787
+ <div class="flex items-center mb-2">
788
+ <div class="w-10 h-10 rounded-full bg-medical-primary bg-opacity-20 flex items-center justify-center mr-3">
789
+ <i class="fas fa-heartbeat text-medical-primary"></i>
790
+ </div>
791
+ <h3 class="font-medium">Cardiologie</h3>
792
+ </div>
793
+ <p class="text-sm text-medical-text opacity-80">12 cas cliniques disponibles</p>
794
+ </div>
795
+ <div class="bg-medical-light rounded-lg p-4 hover:bg-medical-dark transition cursor-pointer">
796
+ <div class="flex items-center mb-2">
797
+ <div class="w-10 h-10 rounded-full bg-medical-secondary bg-opacity-20 flex items-center justify-center mr-3">
798
+ <i class="fas fa-lungs text-medical-secondary"></i>
799
+ </div>
800
+ <h3 class="font-medium">Pneumologie</h3>
801
+ </div>
802
+ <p class="text-sm text-medical-text opacity-80">8 cas cliniques disponibles</p>
803
+ </div>
804
+ <div class="bg-medical-light rounded-lg p-4 hover:bg-medical-dark transition cursor-pointer">
805
+ <div class="flex items-center mb-2">
806
+ <div class="w-10 h-10 rounded-full bg-medical-accent bg-opacity-20 flex items-center justify-center mr-3">
807
+ <i class="fas fa-brain text-medical-accent"></i>
808
+ </div>
809
+ <h3 class="font-medium">Neurologie</h3>
810
+ </div>
811
+ <p class="text-sm text-medical-text opacity-80">10 cas cliniques disponibles</p>
812
+ </div>
813
+ <div class="bg-medical-light rounded-lg p-4 hover:bg-medical-dark transition cursor-pointer">
814
+ <div class="flex items-center mb-2">
815
+ <div class="w-10 h-10 rounded-full bg-medical-warning bg-opacity-20 flex items-center justify-center mr-3">
816
+ <i class="fas fa-allergies text-medical-warning"></i>
817
+ </div>
818
+ <h3 class="font-medium">Dermatologie</h3>
819
+ </div>
820
+ <p class="text-sm text-medical-text opacity-80">15 cas cliniques disponibles</p>
821
+ </div>
822
+ </div>
823
+ </section>
824
+ </div>
825
+ </div>
826
+ </main>
827
+
828
+ <!-- Lead Capture Form -->
829
+ <section id="lead-capture" class="hidden max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
830
+ <div class="bg-medical-light rounded-xl p-8">
831
+ <h2 class="text-2xl font-bold mb-2">Essayez MedSynapse dans votre structure</h2>
832
+ <p class="text-medical-text opacity-90 mb-6">Laissez-nous vos coordonnées pour un accès démo personnalisé.</p>
833
+
834
+ <form id="lead-form" class="grid grid-cols-1 md:grid-cols-2 gap-6">
835
+ <div>
836
+ <label class="block text-sm font-medium mb-1">Prénom*</label>
837
+ <input type="text" required class="w-full bg-medical-dark rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-medical-primary">
838
+ </div>
839
+ <div>
840
+ <label class="block text-sm font-medium mb-1">Nom*</label>
841
+ <input type="text" required class="w-full bg-medical-dark rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-medical-primary">
842
+ </div>
843
+ <div class="md:col-span-2">
844
+ <label class="block text-sm font-medium mb-1">Email professionnel*</label>
845
+ <input type="email" required pattern="[^@\s]+@[^@\s]+\.[^@\s]+" class="w-full bg-medical-dark rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-medical-primary">
846
+ </div>
847
+ <div class="md:col-span-2">
848
+ <label class="block text-sm font-medium mb-1">Numéro de téléphone</label>
849
+ <input type="tel" class="w-full bg-medical-dark rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-medical-primary">
850
+ </div>
851
+ <div class="md:col-span-2 flex justify-between items-center">
852
+ <div class="text-xs text-medical-text opacity-70">
853
+ <label class="inline-flex items-center">
854
+ <input type="checkbox" class="form-checkbox text-medical-primary rounded">
855
+ <span class="ml-2">Mode test sans enregistrement</span>
856
+ </label>
857
+ </div>
858
+ <button type="submit" class="bg-medical-primary hover:bg-blue-600 text-white px-6 py-2 rounded-lg">
859
+ Demander un accès démo
860
+ </button>
861
+ </div>
862
+ </form>
863
+ </div>
864
+ </section>
865
+
866
+ <!-- Confirmation Message -->
867
+ <div id="confirmation-message" class="hidden fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center">
868
+ <div class="bg-medical-light rounded-lg max-w-md w-full p-8 text-center">
869
+ <i class="fas fa-check-circle text-medical-secondary text-5xl mb-4"></i>
870
+ <h2 class="text-2xl font-bold mb-2">Merci !</h2>
871
+ <p class="mb-6">Vous serez contacté prochainement par notre équipe médicale IA.</p>
872
+ <button onclick="closeConfirmation()" class="bg-medical-primary hover:bg-blue-600 text-white px-6 py-2 rounded-lg">
873
+ Fermer
874
+ </button>
875
+ </div>
876
+ </div>
877
+
878
+ <!-- Footer -->
879
+ <footer class="bg-medical-dark border-t border-medical-light mt-12">
880
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
881
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
882
+ <div>
883
+ <h3 class="text-lg font-semibold mb-4">MedSynapse</h3>
884
+ <p class="text-sm text-medical-text opacity-80">Plateforme IA sécurisée pour les professionnels de santé. Conforme RGPD et normes médicales.</p>
885
+ </div>
886
+ <div>
887
+ <h3 class="text-lg font-semibold mb-4">Fonctionnalités</h3>
888
+ <ul class="space-y-2 text-sm">
889
+ <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Assistant Clinique</a></li>
890
+ <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Analyse d'Imagerie</a></li>
891
+ <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Recherche Médicale</a></li>
892
+ <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Triage Patient</a></li>
893
+ </ul>
894
+ </div>
895
+ <div>
896
+ <h3 class="text-lg font-semibold mb-4">Ressources</h3>
897
+ <ul class="space-y-2 text-sm">
898
+ <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Documentation</a></li>
899
+ <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Formation</a></li>
900
+ <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Cas Cliniques</a></li>
901
+ <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">API Intégration</a></li>
902
+ </ul>
903
+ </div>
904
+ <div>
905
+ <h3 class="text-lg font-semibold mb-4">Sécurité</h3>
906
+ <ul class="space-y-2 text-sm">
907
+ <li class="flex items-center text-medical-text opacity-80"><i class="fas fa-shield-alt text-medical-primary mr-2"></i> Chiffrement AES-256</li>
908
+ <li class="flex items-center text-medical-text opacity-80"><i class="fas fa-server text-medical-primary mr-2"></i> Hébergement dédié</li>
909
+ <li class="flex items-center text-medical-text opacity-80"><i class="fas fa-user-lock text-medical-primary mr-2"></i> Authentification forte</li>
910
+ <li class="flex items-center text-medical-text opacity-80"><i class="fas fa-certificate text-medical-primary mr-2"></i> Certifié HDS</li>
911
+ </ul>
912
+ </div>
913
+ </div>
914
+ <div class="mt-8 pt-8 border-t border-medical-light flex flex-col md:flex-row justify-between items-center">
915
+ <p class="text-sm text-medical-text opacity-70">© 2023 MedSynapse. Tous droits réservés.</p>
916
+ <div class="flex space-x-4 mt-4 md:mt-0">
917
+ <a href="#" class="text-medical-text opacity-70 hover:text-white"><i class="fab fa-twitter"></i></a>
918
+ <a href="#" class="text-medical-text opacity-70 hover:text-white"><i class="fab fa-linkedin"></i></a>
919
+ <a href="#" class="text-medical-text opacity-70 hover:text-white"><i class="fab fa-github"></i></a>
920
+ </div>
921
+ </div>
922
+ </div>
923
+ </footer>
924
+
925
+ <script>
926
+ // Onboarding Tutorial
927
+ const onboardingSteps = [
928
+ {
929
+ title: "Assistant clinique",
930
+ content: "Décrivez un cas clinique en langage naturel. L'IA génère automatiquement un compte-rendu professionnel."
931
+ },
932
+ {
933
+ title: "Analyse d'imagerie",
934
+ content: "Importez une image médicale (ex. : radiographie) et obtenez un rapport instantané avec hypothèses diagnostiques."
935
+ },
936
+ {
937
+ title: "Moteur de recherche d'images",
938
+ content: "Recherchez une image médicale par description ou par similarité visuelle (fonction MedSigLIP)."
939
+ },
940
+ {
941
+ title: "Assistant de triage",
942
+ content: "Un chatbot IA vous aide à orienter les patients selon les symptômes et images fournies."
943
+ },
944
+ {
945
+ title: "Mode pédagogique",
946
+ content: "Utilisez MedSynapse comme simulateur de cas cliniques pour former internes ou professionnels."
947
+ }
948
+ ];
949
+
950
+ let currentStep = 0;
951
+
952
+ function startOnboarding() {
953
+ document.getElementById('onboarding-overlay').classList.remove('hidden');
954
+ updateOnboardingStep();
955
+ }
956
+
957
+ function updateOnboardingStep() {
958
+ const stepContainer = document.getElementById('onboarding-overlay').querySelector('.onboarding-step');
959
+
960
+ if (currentStep === 0) {
961
+ stepContainer.innerHTML = `
962
+ <h2 class="text-2xl font-bold mb-4">Bienvenue dans MedSynapse</h2>
963
+ <p class="mb-6">L'IA médicale multimodale pour les professionnels de santé. Cliquez sur Suivant pour découvrir ses capacités.</p>
964
+ <div class="flex justify-between">
965
+ <div></div>
966
+ <button onclick="nextOnboardingStep()" class="bg-medical-primary hover:bg-blue-600 text-white px-6 py-2 rounded-lg">
967
+ Suivant <i class="fas fa-arrow-right ml-2"></i>
968
+ </button>
969
+ </div>
970
+ `;
971
+ } else if (currentStep <= onboardingSteps.length) {
972
+ const step = onboardingSteps[currentStep - 1];
973
+ stepContainer.innerHTML = `
974
+ <h2 class="text-2xl font-bold mb-4">${step.title}</h2>
975
+ <p class="mb-6">${step.content}</p>
976
+ <div class="flex justify-between">
977
+ <button onclick="prevOnboardingStep()" class="text-medical-text hover:text-medical-primary px-4 py-2">
978
+ <i class="fas fa-arrow-left mr-2"></i> Précédent
979
+ </button>
980
+ <button onclick="nextOnboardingStep()" class="bg-medical-primary hover:bg-blue-600 text-white px-6 py-2 rounded-lg">
981
+ ${currentStep === onboardingSteps.length ? 'Terminer' : 'Suivant'} <i class="fas fa-${currentStep === onboardingSteps.length ? 'check' : 'arrow-right'} ml-2"></i>
982
+ </button>
983
+ </div>
984
+ `;
985
+ }
986
+ }
987
+
988
+ function nextOnboardingStep() {
989
+ currentStep++;
990
+ if (currentStep > onboardingSteps.length) {
991
+ document.getElementById('onboarding-overlay').classList.add('hidden');
992
+ document.getElementById('lead-capture').classList.remove('hidden');
993
+ } else {
994
+ updateOnboardingStep();
995
+ }
996
+ }
997
+
998
+ function prevOnboardingStep() {
999
+ currentStep--;
1000
+ updateOnboardingStep();
1001
+ }
1002
+
1003
+ // Lead Form Submission
1004
+ document.getElementById('lead-form').addEventListener('submit', function(e) {
1005
+ e.preventDefault();
1006
+
1007
+ const testMode = this.querySelector('input[type="checkbox"]').checked;
1008
+
1009
+ if (!testMode) {
1010
+ // In production, send to Supabase
1011
+ // fetch('YOUR_SUPABASE_ENDPOINT', {
1012
+ // method: 'POST',
1013
+ // headers: { 'Content-Type': 'application/json' },
1014
+ // body: JSON.stringify({
1015
+ // first_name: this.querySelector('input[type="text"]').value,
1016
+ // last_name: this.querySelectorAll('input[type="text"]')[1].value,
1017
+ // email: this.querySelector('input[type="email"]').value,
1018
+ // phone: this.querySelector('input[type="tel"]').value,
1019
+ // created_at: new Date().toISOString()
1020
+ // })
1021
+ // });
1022
+ }
1023
+
1024
+ this.reset();
1025
+ document.getElementById('lead-capture').classList.add('hidden');
1026
+ document.getElementById('confirmation-message').classList.remove('hidden');
1027
+ });
1028
+
1029
+ function closeConfirmation() {
1030
+ document.getElementById('confirmation-message').classList.add('hidden');
1031
+ }
1032
+
1033
+ // Start onboarding when page loads
1034
+ document.addEventListener('DOMContentLoaded', function() {
1035
+ setTimeout(startOnboarding, 1000);
1036
+ });
1037
+
1038
+ // Mobile menu toggle
1039
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
1040
+ const mobileMenu = document.getElementById('mobile-menu');
1041
+
1042
+ mobileMenuButton.addEventListener('click', () => {
1043
+ mobileMenu.classList.toggle('hidden');
1044
+ });
1045
+
1046
+ // User menu toggle
1047
+ const userMenuButton = document.getElementById('user-menu');
1048
+ const userMenu = document.getElementById('user-menu-dropdown');
1049
+
1050
+ userMenuButton.addEventListener('click', () => {
1051
+ userMenu.classList.toggle('hidden');
1052
+ });
1053
+
1054
+ // Simulate loading for demo purposes
1055
+ document.addEventListener('DOMContentLoaded', () => {
1056
+ setTimeout(() => {
1057
+ const loadingElements = document.querySelectorAll('.animate-pulse');
1058
+ loadingElements.forEach(el => {
1059
+ el.classList.remove('animate-pulse');
1060
+ });
1061
+ }, 1500);
1062
+ });
1063
+
1064
+ // Tab functionality for demonstration
1065
+ function openTab(evt, tabName) {
1066
+ const tabContents = document.getElementsByClassName('tab-content');
1067
+ for (let i = 0; i < tabContents.length; i++) {
1068
+ tabContents[i].classList.add('hidden');
1069
+ }
1070
+
1071
+ const tabButtons = document.getElementsByClassName('tab-button');
1072
+ for (let i = 0; i < tabButtons.length; i++) {
1073
+ tabButtons[i].classList.remove('bg-medical-primary', 'text-white');
1074
+ tabButtons[i].classList.add('bg-medical-dark', 'text-medical-text');
1075
+ }
1076
+
1077
+ document.getElementById(tabName).classList.remove('hidden');
1078
+ evt.currentTarget.classList.remove('bg-medical-dark', 'text-medical-text');
1079
+ evt.currentTarget.classList.add('bg-medical-primary', 'text-white');
1080
+ }
1081
+ </script>
1082
+ <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=mathurinacheisoft/medsynapse" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1083
+ </html>