Hugging Face's logo

Spaces:
Docfile
/
Reconnaissance
Sleeping

App Files Community
Docfile commited on
Commit
62e9f7a
·
verified ·
1 Parent(s): cacf8e1

Delete templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +0 -679
templates/index.html DELETED
@@ -1,679 +0,0 @@
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>FaceAI Pro - Démonstration de Reconnaissance Faciale</title>
7
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
10
- <style>
11
- :root {
12
- --primary-color: #2563eb; /* Bleu plus formel */
13
- --secondary-color: #1d4ed8; /* Bleu secondaire */
14
- --gray-dark: #1f2937;
15
- --gray-light: #f3f4f6;
16
- --font-sans: 'Inter', sans-serif; /* Police plus professionnelle */
17
- }
18
-
19
- body {
20
- font-family: var(--font-sans);
21
- background-color: var(--gray-light);
22
- color: var(--gray-dark);
23
- line-height: 1.6;
24
- }
25
-
26
- /* Animations */
27
- @keyframes pulse-border {
28
- 0% { box-shadow: 0 0 0 0 rgba(var(--primary-color), 0.7); }
29
- 70% { box-shadow: 0 0 0 10px rgba(var(--primary-color), 0); }
30
- 100% { box-shadow: 0 0 0 0 rgba(var(--primary-color), 0); }
31
- }
32
-
33
- @keyframes spin {
34
- 100% { transform: rotate(360deg); }
35
- }
36
-
37
- /* Composants */
38
- .container {
39
- max-width: 1200px;
40
- }
41
-
42
- .preview-container {
43
- position: relative;
44
- aspect-ratio: 1;
45
- background: white;
46
- border-radius: 0.5rem;
47
- overflow: hidden;
48
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
49
- }
50
-
51
- .preview-image {
52
- position: absolute;
53
- top: 0;
54
- left: 0;
55
- width: 100%;
56
- height: 100%;
57
- background-size: cover;
58
- background-position: center;
59
- transition: transform 0.2s ease;
60
- }
61
-
62
- .preview-container:hover .preview-image {
63
- transform: scale(1.03);
64
- }
65
-
66
- .delete-btn {
67
- position: absolute;
68
- bottom: 0.5rem;
69
- right: 0.5rem;
70
- background-color: rgba(220, 53, 69, 0.9); /* Red-500 with opacity */
71
- color: white;
72
- padding: 0.4rem 0.5rem;
73
- border-radius: 50%;
74
- opacity: 0;
75
- transition: opacity 0.2s ease;
76
- cursor: pointer;
77
- z-index: 10;
78
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
79
- }
80
-
81
- .preview-container:hover .delete-btn {
82
- opacity: 0.9;
83
- }
84
-
85
- .preview-container:hover .delete-btn:hover {
86
- background-color: rgba(220, 53, 69, 1);
87
- opacity: 1;
88
- }
89
-
90
- .loading-overlay {
91
- position: fixed;
92
- top: 0;
93
- left: 0;
94
- width: 100%;
95
- height: 100%;
96
- background: rgba(0, 0, 0, 0.8);
97
- display: none;
98
- justify-content: center;
99
- align-items: center;
100
- z-index: 1000;
101
- }
102
-
103
- .progress-ring {
104
- animation: spin 1.5s linear infinite;
105
- width: 60px;
106
- height: 60px;
107
- }
108
-
109
- .btn-primary {
110
- background-color: var(--primary-color);
111
- color: white;
112
- transition: all 0.2s ease;
113
- font-weight: 600;
114
- padding: 0.75rem 1.5rem;
115
- border-radius: 0.375rem;
116
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
117
- }
118
-
119
- .btn-primary:hover {
120
- background-color: var(--secondary-color);
121
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
122
- }
123
-
124
- .btn-primary:active {
125
- transform: translateY(1px);
126
- }
127
-
128
- .btn-secondary {
129
- background-color: #4b5563;
130
- color: white;
131
- transition: all 0.2s ease;
132
- font-weight: 600;
133
- padding: 0.75rem 1.5rem;
134
- border-radius: 0.375rem;
135
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
136
- }
137
-
138
- .btn-secondary:hover {
139
- background-color: #374151;
140
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
141
- }
142
-
143
- .result-card {
144
- border: 1px solid #e5e7eb;
145
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
146
- padding: 1.5rem;
147
- border-radius: 0.5rem;
148
- background-color: white;
149
- }
150
-
151
- .result-card.show {
152
- animation: fadeInUp 0.4s; /* Animation plus subtile */
153
- }
154
-
155
- @keyframes fadeInUp {
156
- from {
157
- opacity: 0;
158
- transform: translate3d(0, 20px, 0);
159
- }
160
- to {
161
- opacity: 1;
162
- transform: none;
163
- }
164
- }
165
-
166
- .camera-feed {
167
- border-radius: 0.5rem;
168
- transform: scaleX(-1);
169
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
170
- }
171
-
172
- .github-corner {
173
- position: fixed;
174
- top: 0;
175
- right: 0;
176
- width: 70px;
177
- height: 70px;
178
- z-index: 1001;
179
- }
180
-
181
- .github-corner:hover {
182
- transform: scale(1.05);
183
- transition: transform 0.2s ease;
184
- }
185
-
186
- .section-title {
187
- font-size: 1.75rem;
188
- font-weight: 700;
189
- color: var(--gray-dark);
190
- margin-bottom: 1.5rem;
191
- display: flex;
192
- align-items: center;
193
- border-bottom: 2px solid var(--primary-color);
194
- padding-bottom: 0.75rem;
195
- }
196
-
197
- .section-title i {
198
- color: var(--primary-color);
199
- margin-right: 1rem;
200
- font-size: 1.5rem;
201
- }
202
-
203
- .input-hidden {
204
- display: none;
205
- }
206
-
207
- .comparison-result {
208
- font-size: 1.2rem;
209
- margin-bottom: 0.75rem;
210
- }
211
-
212
- .comparison-result.positive {
213
- color: #22c55e; /* Vert plus formel */
214
- font-weight: 600;
215
- }
216
-
217
- .comparison-result.negative {
218
- color: #ef4444; /* Rouge plus formel */
219
- font-weight: 600;
220
- }
221
-
222
- .progress-bar {
223
- height: 1rem;
224
- background-color: #e5e7eb;
225
- border-radius: 0.5rem;
226
- margin-bottom: 1rem;
227
- overflow: hidden;
228
- }
229
-
230
- .progress-bar-fill {
231
- height: 100%;
232
- background-color: var(--primary-color);
233
- width: 0%;
234
- transition: width 0.5s ease;
235
- }
236
-
237
- .project-description {
238
- background-color: white;
239
- padding: 2.5rem;
240
- border-radius: 0.5rem;
241
- margin-bottom: 2.5rem;
242
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
243
- }
244
-
245
- .project-description h2 {
246
- font-size: 2.25rem;
247
- font-weight: 800;
248
- color: var(--gray-dark);
249
- margin-bottom: 1.5rem;
250
- line-height: 1.2;
251
- }
252
-
253
- .project-description p {
254
- font-size: 1.1rem;
255
- color: #4b5563;
256
- line-height: 1.7;
257
- }
258
-
259
- .project-description ul {
260
- list-style-type: disc;
261
- margin-left: 1.5rem;
262
- color: #4b5563;
263
- margin-top: 1rem;
264
- }
265
-
266
- .project-description ul li {
267
- margin-bottom: 0.75rem;
268
- font-size: 1.1rem;
269
- line-height: 1.7;
270
- }
271
- .project-description ul li ul{
272
- list-style-type: circle;
273
- }
274
-
275
- .tech-used {
276
- margin-top: 0.5rem;
277
- }
278
-
279
- /* Navigation */
280
- .navbar {
281
- background-color: white;
282
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
283
- padding: 1rem 1.5rem;
284
- }
285
-
286
- .navbar .container {
287
- display: flex;
288
- align-items: center;
289
- justify-content: space-between;
290
- }
291
-
292
- .navbar-brand {
293
- display: flex;
294
- align-items: center;
295
- font-weight: 800;
296
- font-size: 1.75rem;
297
- color: var(--gray-dark);
298
- }
299
-
300
- .navbar-brand i {
301
- color: var(--primary-color);
302
- margin-right: 1rem;
303
- font-size: 2rem;
304
- }
305
- .navbar-brand:hover{
306
- color: var(--secondary-color);
307
- transition: all 0.2s ease;
308
- }
309
-
310
- .navbar-links {
311
- display: flex;
312
- align-items: center;
313
- }
314
-
315
- .navbar-links a {
316
- color: #4b5563;
317
- font-weight: 500;
318
- margin-left: 2rem;
319
- transition: color 0.2s ease;
320
- }
321
-
322
- .navbar-links a:hover {
323
- color: var(--primary-color);
324
- }
325
- .font-bold{
326
- font-weight: 700;
327
- }
328
-
329
- /* Responsiveness */
330
- @media (max-width: 768px) {
331
- .preview-container {
332
- margin-bottom: 1rem;
333
- }
334
-
335
- .project-description {
336
- margin-bottom: 1.5rem;
337
- padding: 1.5rem;
338
- }
339
-
340
- .project-description h2 {
341
- font-size: 2rem;
342
- }
343
-
344
- .section-title {
345
- font-size: 1.5rem;
346
- }
347
-
348
- .section-title i {
349
- font-size: 1.25rem;
350
- }
351
-
352
- .navbar-brand {
353
- font-size: 1.5rem;
354
- }
355
-
356
- .navbar-brand i {
357
- font-size: 1.75rem;
358
- }
359
-
360
- .navbar-links a {
361
- margin-left: 1.5rem;
362
- }
363
- }
364
- </style>
365
- </head>
366
- <body class="bg-gray-100">
367
- <div class="loading-overlay">
368
- <svg class="progress-ring text-blue-500" viewBox="0 0 50 50">
369
- <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-dasharray="80, 200"/>
370
- </svg>
371
- </div>
372
-
373
- <!-- Navigation -->
374
- <nav class="navbar">
375
- <div class="container mx-auto">
376
- <a href="/" class="navbar-brand">
377
- <i class="fas fa-brain text-blue-600"></i>
378
- FaceAI Pro
379
- </a>
380
- <div class="navbar-links">
381
- <a href="#" class="hover:text-blue-600">
382
- <i class="fas fa-question-circle text-lg"></i>
383
- <span class="hidden md:inline-block ml-1">Aide</span>
384
- </a>
385
- <a href="#" class="hover:text-blue-600">
386
- <i class="fas fa-cog text-lg"></i>
387
- <span class="hidden md:inline-block ml-1">Paramètres</span>
388
- </a>
389
- </div>
390
- </div>
391
- </nav>
392
-
393
- <!-- Contenu principal -->
394
- <main class="container mx-auto p-6">
395
- <!-- Description du projet -->
396
- <div class="project-description">
397
- <h2 class="text-3xl font-extrabold text-gray-900 mb-4 tracking-tight">FaceAI Pro : Démonstration de Reconnaissance Faciale en Temps Réel</h2>
398
- <p class="text-gray-700">
399
- <strong class="font-bold">FaceAI Pro</strong> est une application web interactive conçue pour <strong class="font-bold">démontrer la puissance et la précision des algorithmes de reconnaissance faciale</strong> modernes. Elle permet aux utilisateurs de comparer deux visages en temps réel et d'évaluer leur similarité avec une grande exactitude.
400
- </p>
401
- <p class="mt-4 text-gray-700">
402
- Cette démonstration met en lumière les capacités de la reconnaissance faciale, un domaine en pleine expansion qui trouve des applications dans divers secteurs, notamment la sécurité, l'authentification et l'analyse d'images. <strong class="font-bold">FaceAI Pro</strong> est un outil idéal pour explorer cette technologie, comprendre son fonctionnement et découvrir ses applications potentielles.
403
- </p>
404
- <h3 class="text-xl font-bold text-gray-800 mt-8 mb-3">Fonctionnalités Clés :</h3>
405
- <ul class="text-gray-700">
406
- <li><strong class="font-bold">Comparaison en temps réel</strong> de deux images contenant des visages.</li>
407
- <li><strong class="font-bold">Détection automatique</strong> et précise des visages dans les images téléchargées.</li>
408
- <li><strong class="font-bold">Évaluation quantitative</strong> de la similarité entre les visages détectés, exprimée en pourcentage.</li>
409
- <li><strong class="font-bold">Capture d'image</strong> via la caméra de l'appareil pour une analyse instantanée.</li>
410
- <li><strong class="font-bold">Interface utilisateur épurée</strong> et intuitive pour une expérience optimale.</li>
411
- </ul>
412
- <h3 class="text-xl font-bold text-gray-800 mt-8 mb-3">Technologies Employées :</h3>
413
- <ul class="text-gray-700">
414
- <li>
415
- <strong class="font-bold">Backend :</strong> <a href="https://flask.palletsprojects.com/" target="_blank" class="text-blue-600 hover:underline">Flask</a>, un framework web Python léger et flexible, idéal pour les API rapides et les microservices.
416
- </li>
417
- <li>
418
- <strong class="font-bold">Reconnaissance Faciale :</strong> <a href="https://github.com/serengil/deepface" target="_blank" class="text-blue-600 hover:underline">DeepFace</a>, une librairie Python performante qui implémente les algorithmes de reconnaissance faciale les plus avancés.
419
- <ul class="tech-used text-gray-700">
420
- <li>
421
- Modèle par défaut : <strong class="font-bold">VGG-Face</strong>, un modèle reconnu pour sa précision et sa robustesse.
422
- </li>
423
- <li>
424
- Détecteur de visage par défaut : <strong class="font-bold">RetinaFace</strong>, un détecteur de pointe offrant une grande précision, même dans des conditions difficiles.
425
- </li>
426
- <li>
427
- Métrique de distance : <strong class="font-bold">Cosine</strong>, une mesure de similarité angulaire qui donne d'excellents résultats dans la comparaison de visages.
428
- </li>
429
- </ul>
430
- </li>
431
- <li>
432
- <strong class="font-bold">Frontend :</strong> HTML5, CSS3 (avec <a href="https://tailwindcss.com/" target="_blank" class="text-blue-600 hover:underline">Tailwind CSS</a> pour un développement rapide et un style élégant), JavaScript pour l'interactivité.
433
- </li>
434
- <li>
435
- <strong class="font-bold">Icônes :</strong> <a href="https://fontawesome.com/" target="_blank" class="text-blue-600 hover:underline">Font Awesome</a>, une bibliothèque d'icônes vectorielles scalable et facile à utiliser.
436
- </li>
437
- <li>
438
- <strong class="font-bold">Animations :</strong> <a href="https://animate.style/" target="_blank" class="text-blue-600 hover:underline">Animate.css</a>, pour des animations CSS fluides et performantes.
439
- </li>
440
- </ul>
441
- <p class="mt-4 text-gray-700">
442
- <strong class="font-bold">FaceAI Pro</strong> est une démonstration open-source, et le code source est disponible sur GitHub : <a href="https://github.com/Yusufibin" target="_blank" class="text-blue-600 hover:underline">https://github.com/Yusufibin</a>.
443
- </p>
444
- </div>
445
- <div class="grid md:grid-cols-2 gap-8">
446
- <!-- Section de capture -->
447
- <div class="bg-white rounded-lg shadow-md p-6">
448
- <h2 class="section-title">
449
- <i class="fas fa-camera"></i>
450
- Capture d'Images
451
- </h2>
452
-
453
- <div class="space-y-4">
454
- <div class="flex space-x-4">
455
- <label for="fileInput" class="btn-primary text-white px-6 py-3 rounded-lg flex items-center cursor-pointer">
456
- <i class="fas fa-upload mr-2"></i>
457
- Importer des Images
458
- </label>
459
- <button id="cameraBtn" class="btn-secondary text-white px-6 py-3 rounded-lg flex items-center transition-all">
460
- <i class="fas fa-video mr-2"></i>
461
- Utiliser la Caméra
462
- </button>
463
- </div>
464
-
465
- <input type="file" id="fileInput" class="input-hidden" accept="image/*" multiple>
466
- <video id="video" class="camera-feed w-full hidden" autoplay muted playsinline></video>
467
-
468
- <div class="grid grid-cols-2 gap-4">
469
- <div class="preview-container">
470
- <div id="preview1" class="preview-image"></div>
471
- <button class="delete-btn" data-target="preview1" title="Supprimer">
472
- <i class="fas fa-times"></i>
473
- </button>
474
- </div>
475
- <div class="preview-container">
476
- <div id="preview2" class="preview-image"></div>
477
- <button class="delete-btn" data-target="preview2" title="Supprimer">
478
- <i class="fas fa-times"></i>
479
- </button>
480
- </div>
481
- </div>
482
- </div>
483
- </div>
484
-
485
- <!-- Section des résultats -->
486
- <div class="bg-white rounded-lg shadow-md p-6">
487
- <h2 class="section-title">
488
- <i class="fas fa-chart-bar"></i>
489
- Résultats de l'Analyse
490
- </h2>
491
-
492
- <div id="results" class="result-card">
493
- <div class="text-center text-gray-500">
494
- <i class="fas fa-upload text-4xl mb-3"></i>
495
- <p class="text-gray-600">Importez ou capturez deux images pour démarrer l'analyse.</p>
496
- </div>
497
- </div>
498
-
499
- <button id="compareBtn" class="btn-primary w-full mt-6 py-3 rounded-lg text-white font-semibold hidden">
500
- <i class="fas fa-sync-alt mr-2"></i>
501
- Lancer la Comparaison
502
- </button>
503
- </div>
504
- </div>
505
- </main>
506
-
507
- <!-- GitHub Corner -->
508
- <a href="https://github.com/Yusufibin" class="github-corner" target="_blank" aria-label="Voir le code source sur GitHub">
509
- <svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--gray-dark); color:#fff;">
510
- <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
511
- <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
512
- <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
513
- </svg>
514
- </a>
515
-
516
- <!-- Script JavaScript -->
517
- <script>
518
- let uploadedImages = [];
519
-
520
- const fileInput = document.getElementById('fileInput');
521
- fileInput.addEventListener('change', handleImageUpload);
522
-
523
- function handleImageUpload(event) {
524
- const files = event.target.files;
525
- for (let i = 0; i < files.length; i++) {
526
- const file = files[i];
527
- if (uploadedImages.length < 2 && file.type.startsWith('image/')) {
528
- const reader = new FileReader();
529
- reader.onload = (e) => {
530
- const previewId = uploadedImages.length === 0 ? 'preview1' : 'preview2';
531
- const previewImg = document.getElementById(previewId);
532
- previewImg.style.backgroundImage = `url(${e.target.result})`;
533
- uploadedImages.push({ file: file, preview: previewId });
534
- updateCompareButtonState();
535
- };
536
- reader.readAsDataURL(file);
537
- }
538
- }
539
- }
540
-
541
- document.querySelectorAll('.delete-btn').forEach(button => {
542
- button.addEventListener('click', function() {
543
- const targetPreviewId = this.dataset.target;
544
- const targetPreview = document.getElementById(targetPreviewId);
545
- targetPreview.style.backgroundImage = '';
546
-
547
- uploadedImages = uploadedImages.filter(image => image.preview !== targetPreviewId);
548
-
549
- updateCompareButtonState();
550
- });
551
- });
552
-
553
- const cameraBtn = document.getElementById('cameraBtn');
554
- const video = document.getElementById('video');
555
- let stream = null;
556
-
557
- cameraBtn.addEventListener('click', async () => {
558
- if (stream) {
559
- // Arrêter la caméra
560
- stream.getTracks().forEach(track => track.stop());
561
- video.classList.add('hidden');
562
- cameraBtn.innerHTML = '<i class="fas fa-video mr-2"></i>Utiliser la Caméra';
563
- stream = null;
564
- } else {
565
- // Démarrer la caméra
566
- try {
567
- stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } });
568
- video.srcObject = stream;
569
- video.classList.remove('hidden');
570
- cameraBtn.innerHTML = '<i class="fas fa-times mr-2"></i>Arrêter la caméra';
571
- } catch (err) {
572
- console.error('Erreur lors de l\'accès à la caméra:', err);
573
- }
574
- }
575
- });
576
-
577
- video.addEventListener('click', () => {
578
- if (stream && uploadedImages.length < 2) {
579
- const canvas = document.createElement('canvas');
580
- canvas.width = video.videoWidth;
581
- canvas.height = video.videoHeight;
582
- const ctx = canvas.getContext('2d');
583
- ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
584
- canvas.toBlob(blob => {
585
- const file = new File([blob], `capture-${Date.now()}.jpg`, { type: 'image/jpeg' });
586
- const previewId = uploadedImages.length === 0 ? 'preview1' : 'preview2';
587
- const previewImg = document.getElementById(previewId);
588
- previewImg.style.backgroundImage = `url(${URL.createObjectURL(file)})`;
589
- uploadedImages.push({ file: file, preview: previewId });
590
- updateCompareButtonState();
591
- }, 'image/jpeg');
592
- }
593
- });
594
-
595
- const compareBtn = document.getElementById('compareBtn');
596
- compareBtn.addEventListener('click', () => {
597
- if (uploadedImages.length === 2) {
598
- showLoading();
599
- const formData = new FormData();
600
- formData.append('file1', uploadedImages[0].file);
601
- formData.append('file2', uploadedImages[1].file);
602
-
603
- fetch('/compare', {
604
- method: 'POST',
605
- body: formData
606
- })
607
- .then(response => response.json())
608
- .then(data => {
609
- showResults(data);
610
- })
611
- .catch(error => {
612
- console.error('Erreur lors de la comparaison:', error);
613
- showError(error);
614
- })
615
- .finally(() => {
616
- hideLoading();
617
- });
618
- }
619
- });
620
-
621
- function updateCompareButtonState() {
622
- compareBtn.classList.toggle('hidden', uploadedImages.length < 2);
623
- }
624
-
625
- function showResults(data) {
626
- const resultsDiv = document.getElementById('results');
627
- resultsDiv.classList.remove('show');
628
-
629
- setTimeout(() => {
630
- resultsDiv.innerHTML = `
631
- <div class="text-center">
632
- <div class="text-4xl mb-4 ${data.verified ? 'text-green-500' : 'text-red-500'}">
633
- <i class="fas ${data.verified ? 'fa-check-circle' : 'fa-times-circle'}"></i>
634
- </div>
635
- <h3 class="text-xl font-bold mb-2">
636
- ${data.verified ? 'Visages identiques' : 'Visages différents'}
637
- </h3>
638
- <div class="space-y-2">
639
- <p class="comparison-result ${data.verified ? 'positive' : 'negative'}">
640
- Similarité: <span class="font-semibold">${data.similarity}%</span>
641
- </p>
642
- <div class="progress-bar">
643
- <div class="progress-bar-fill" style="width: ${data.similarity}%; --progress-value: ${data.similarity};" data-progress="${data.similarity}"></div>
644
- </div>
645
- </div>
646
- </div>
647
- `;
648
- resultsDiv.classList.add('show');
649
- setTimeout(() => {
650
- const progressBarFill = resultsDiv.querySelector('.progress-bar-fill');
651
- progressBarFill.style.width = `${data.similarity}%`;
652
- }, 50);
653
- }, 300);
654
- }
655
-
656
- function showError(error) {
657
- const resultsDiv = document.getElementById('results');
658
- resultsDiv.classList.remove('show');
659
- setTimeout(() => {
660
- resultsDiv.innerHTML = `
661
- <div class="text-center text-red-500">
662
- <i class="fas fa-exclamation-triangle text-4xl mb-3"></i>
663
- <p>Erreur : ${error.message || 'Une erreur est survenue.'}</p>
664
- </div>
665
- `;
666
- resultsDiv.classList.add('show');
667
- }, 300);
668
- }
669
-
670
- function showLoading() {
671
- document.querySelector('.loading-overlay').style.display = 'flex';
672
- }
673
-
674
- function hideLoading() {
675
- document.querySelector('.loading-overlay').style.display = 'none';
676
- }
677
- </script>
678
- </body>
679
- </html>