Spaces:

Docfile
/

Reconnaissance

Sleeping

App Files Files Community

Docfile commited on Dec 22, 2024

Commit

cacf8e1

verified ·

1 Parent(s): c2dcbac

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +252 -117

templates/index.html CHANGED Viewed

@@ -3,14 +3,24 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FaceAI Pro - Reconnaissance Faciale Avancée</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
     <style>
         :root {
-            --primary-color: #4f46e5;
-            --secondary-color: #3b82f6;
         }
         /* Animations */
@@ -25,13 +35,17 @@
         }
         /* Composants */
         .preview-container {
             position: relative;
             aspect-ratio: 1;
-            background: #f8fafc;
-            border-radius: 1rem;
             overflow: hidden;
-            transition: all 0.3s ease;
         }
         .preview-image {
@@ -42,28 +56,34 @@
             height: 100%;
             background-size: cover;
             background-position: center;
-            transition: transform 0.3s ease;
         }
         .preview-container:hover .preview-image {
-            transform: scale(1.05);
         }
         .delete-btn {
             position: absolute;
             bottom: 0.5rem;
             right: 0.5rem;
-            background-color: rgba(239, 68, 68, 0.8); /* Red-500 with opacity */
             color: white;
-            padding: 0.3rem;
             border-radius: 50%;
             opacity: 0;
-            transition: opacity 0.3s ease;
             cursor: pointer;
             z-index: 10;
         }
         .preview-container:hover .delete-btn {
             opacity: 1;
         }
@@ -73,7 +93,7 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.7);
             display: none;
             justify-content: center;
             align-items: center;
@@ -81,65 +101,103 @@
         }
         .progress-ring {
-            animation: spin 2s linear infinite;
-            width: 50px;
-            height: 50px;
         }
         .btn-primary {
-            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-            transition: all 0.3s ease;
-            animation: pulse-border 2s infinite;
             font-weight: 600;
         }
         .btn-primary:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(var(--primary-color), 0.4);
         }
         .result-card {
-            transition: all 0.3s ease;
-            transform-origin: center;
         }
         .result-card.show {
-            animation: bounceIn 0.6s;
         }
         .camera-feed {
-            border-radius: 1rem;
             transform: scaleX(-1);
-            transition: all 0.3s ease;
         }
         .github-corner {
             position: fixed;
             top: 0;
             right: 0;
-            width: 80px;
-            height: 80px;
-            transition: transform 0.3s ease;
-            z-index: 1001; /* Ensure it's above the loading overlay */
         }
         .github-corner:hover {
-            transform: scale(1.1);
         }
-        /* Nouvelles classes */
         .section-title {
-            font-size: 1.5rem;
             font-weight: 700;
-            color: #374151;
             margin-bottom: 1.5rem;
             display: flex;
             align-items: center;
         }
         .section-title i {
             color: var(--primary-color);
-            margin-right: 0.75rem;
         }
         .input-hidden {
@@ -147,22 +205,24 @@
         }
         .comparison-result {
-            font-size: 1.1rem;
-            margin-bottom: 0.5rem;
         }
         .comparison-result.positive {
-            color: #28a745; /* Green */
         }
         .comparison-result.negative {
-            color: #dc3545; /* Red */
         }
         .progress-bar {
-            height: 0.75rem;
-            background-color: #e0e7ff;
-            border-radius: 0.375rem;
             margin-bottom: 1rem;
             overflow: hidden;
         }
@@ -174,34 +234,26 @@
             transition: width 0.5s ease;
         }
-        .progress-bar-fill.show {
-            animation: progress-animation 2s ease-in-out;
-        }
-        @keyframes progress-animation {
-            0% { width: 0%; }
-            100% { width: var(--progress-value, 0%); }
-        }
-        /* Description du projet */
         .project-description {
-            background-color: #f9fafb;
-            padding: 2rem;
             border-radius: 0.5rem;
-            margin-bottom: 2rem;
         }
         .project-description h2 {
-            font-size: 1.875rem;
-            font-weight: 700;
-            color: #374151;
-            margin-bottom: 1rem;
         }
         .project-description p {
-            font-size: 1rem;
             color: #4b5563;
-            line-height: 1.6;
         }
         .project-description ul {
@@ -212,24 +264,106 @@
         }
         .project-description ul li {
-            margin-bottom: 0.5rem;
         }
-        .tech-used{
             margin-top: 0.5rem;
         }
         /* Responsiveness */
         @media (max-width: 768px) {
             .preview-container {
                 margin-bottom: 1rem;
             }
-            .project-description{
-                margin-bottom: 1rem;
             }
         }
     </style>
 </head>
-<body class="bg-gradient-to-br from-gray-100 to-gray-200 min-h-screen font-sans">
     <div class="loading-overlay">
         <svg class="progress-ring text-blue-500" viewBox="0 0 50 50">
             <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-dasharray="80, 200"/>
@@ -237,21 +371,21 @@
     </div>
     <!-- Navigation -->
-    <nav class="bg-white shadow-lg">
-        <div class="container mx-auto px-6 py-4">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center">
-                    <i class="fas fa-brain text-4xl text-blue-600 mr-3"></i>
-                    <a href="/" class="text-2xl font-bold text-gray-800 hover:text-blue-700 transition-colors">FaceAI Pro</a>
-                </div>
-                <div class="flex items-center space-x-4">
-                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">
-                        <i class="fas fa-question-circle text-xl"></i>
-                    </a>
-                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">
-                        <i class="fas fa-cog text-xl"></i>
-                    </a>
-                </div>
             </div>
         </div>
     </nav>
@@ -260,56 +394,57 @@
     <main class="container mx-auto p-6">
         <!-- Description du projet -->
         <div class="project-description">
-            <h2 class="text-3xl font-bold text-gray-800 mb-4">FaceAI Pro - Reconnaissance Faciale Avancée</h2>
-            <p>
-                FaceAI Pro est une application web de démonstration qui permet de comparer deux visages et de déterminer leur degré de similarité.
-                Elle utilise des technologies de pointe en matière de reconnaissance faciale pour fournir des résultats rapides et précis.
             </p>
-            <p>
-                Cette application est idéale pour explorer les capacités de la reconnaissance faciale et comprendre son fonctionnement.
-                Elle peut être utilisée à des fins de test, d'apprentissage ou de développement.
             </p>
-            <h3 class="text-xl font-bold text-gray-800 mt-6 mb-2">Fonctionnalités :</h3>
-            <ul>
-                <li>Comparaison de deux images contenant des visages.</li>
-                <li>Détection automatique des visages dans les images.</li>
-                <li>Calcul du pourcentage de similarité entre les visages détectés.</li>
-                <li>Possibilité d'utiliser la caméra de l'appareil pour capturer des images.</li>
-                <li>Interface utilisateur intuitive et facile à utiliser.</li>
             </ul>
-            <h3 class="text-xl font-bold text-gray-800 mt-6 mb-2">Technologies utilisées :</h3>
-            <ul>
                 <li>
-                    <strong>Backend :</strong> <a href="https://flask.palletsprojects.com/" target="_blank" class="text-blue-600 hover:underline">Flask</a> (framework web Python)
                 </li>
                 <li>
-                    <strong>Reconnaissance faciale :</strong> <a href="https://github.com/serengil/deepface" target="_blank" class="text-blue-600 hover:underline">DeepFace</a> (librairie Python)
-                    <ul class="tech-used">
                         <li>
-                            Modèle par défaut : <strong>VGG-Face</strong>
                         </li>
                         <li>
-                            Détecteur de visage par défaut : <strong>RetinaFace</strong>
                         </li>
                         <li>
-                            Métrique de distance : <strong>Cosine</strong>
                         </li>
                     </ul>
                 </li>
                 <li>
-                    <strong>Frontend :</strong> HTML, CSS (avec <a href="https://tailwindcss.com/" target="_blank" class="text-blue-600 hover:underline">Tailwind CSS</a> pour un style rapide), JavaScript
                 </li>
                 <li>
-                    <strong>Icônes :</strong> <a href="https://fontawesome.com/" target="_blank" class="text-blue-600 hover:underline">Font Awesome</a>
                 </li>
                 <li>
-                    <strong>Animations :</strong> <a href="https://animate.style/" target="_blank" class="text-blue-600 hover:underline">Animate.css</a>
                 </li>
             </ul>
         </div>
         <div class="grid md:grid-cols-2 gap-8">
             <!-- Section de capture -->
-            <div class="bg-white rounded-xl shadow-xl p-6 animate__animated animate__fadeInLeft">
                 <h2 class="section-title">
                     <i class="fas fa-camera"></i>
                     Capture d'Images
@@ -319,11 +454,11 @@
                     <div class="flex space-x-4">
                         <label for="fileInput" class="btn-primary text-white px-6 py-3 rounded-lg flex items-center cursor-pointer">
                             <i class="fas fa-upload mr-2"></i>
-                            Importer
                         </label>
-                        <button id="cameraBtn" class="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg flex items-center transition-all">
                             <i class="fas fa-video mr-2"></i>
-                            Caméra
                         </button>
                     </div>
@@ -348,22 +483,22 @@
             </div>
             <!-- Section des résultats -->
-            <div class="bg-white rounded-xl shadow-xl p-6 animate__animated animate__fadeInRight">
                 <h2 class="section-title">
                     <i class="fas fa-chart-bar"></i>
-                    Résultats
                 </h2>
-                <div id="results" class="result-card p-4 rounded-lg bg-gray-50">
                     <div class="text-center text-gray-500">
                         <i class="fas fa-upload text-4xl mb-3"></i>
-                        <p>Importez ou capturez deux images pour démarrer l'analyse.</p>
                     </div>
                 </div>
                 <button id="compareBtn" class="btn-primary w-full mt-6 py-3 rounded-lg text-white font-semibold hidden">
                     <i class="fas fa-sync-alt mr-2"></i>
-                    Lancer la comparaison
                 </button>
             </div>
         </div>
@@ -371,7 +506,7 @@
     <!-- GitHub Corner -->
     <a href="https://github.com/Yusufibin" class="github-corner" target="_blank" aria-label="Voir le code source sur GitHub">
-        <svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--primary-color); color:#fff;">
             <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
             <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>
             <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>
@@ -424,7 +559,7 @@
                 // Arrêter la caméra
                 stream.getTracks().forEach(track => track.stop());
                 video.classList.add('hidden');
-                cameraBtn.innerHTML = '<i class="fas fa-video mr-2"></i>Caméra';
                 stream = null;
             } else {
                 // Démarrer la caméra
@@ -432,7 +567,7 @@
                     stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } });
                     video.srcObject = stream;
                     video.classList.remove('hidden');
-                    cameraBtn.innerHTML = '<i class="fas fa-times mr-2"></i>Arrêter';
                 } catch (err) {
                     console.error('Erreur lors de l\'accès à la caméra:', err);
                 }

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FaceAI Pro - Démonstration de Reconnaissance Faciale</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
     <style>
         :root {
+            --primary-color: #2563eb; /* Bleu plus formel */
+            --secondary-color: #1d4ed8; /* Bleu secondaire */
+            --gray-dark: #1f2937;
+            --gray-light: #f3f4f6;
+            --font-sans: 'Inter', sans-serif; /* Police plus professionnelle */
+        }
+        body {
+            font-family: var(--font-sans);
+            background-color: var(--gray-light);
+            color: var(--gray-dark);
+            line-height: 1.6;
         }
         /* Animations */
         }
         /* Composants */
+        .container {
+            max-width: 1200px;
+        }
         .preview-container {
             position: relative;
             aspect-ratio: 1;
+            background: white;
+            border-radius: 0.5rem;
             overflow: hidden;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
         .preview-image {
             height: 100%;
             background-size: cover;
             background-position: center;
+            transition: transform 0.2s ease;
         }
         .preview-container:hover .preview-image {
+            transform: scale(1.03);
         }
         .delete-btn {
             position: absolute;
             bottom: 0.5rem;
             right: 0.5rem;
+            background-color: rgba(220, 53, 69, 0.9); /* Red-500 with opacity */
             color: white;
+            padding: 0.4rem 0.5rem;
             border-radius: 50%;
             opacity: 0;
+            transition: opacity 0.2s ease;
             cursor: pointer;
             z-index: 10;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         }
         .preview-container:hover .delete-btn {
+            opacity: 0.9;
+        }
+        .preview-container:hover .delete-btn:hover {
+            background-color: rgba(220, 53, 69, 1);
             opacity: 1;
         }
             left: 0;
             width: 100%;
             height: 100%;
+            background: rgba(0, 0, 0, 0.8);
             display: none;
             justify-content: center;
             align-items: center;
         }
         .progress-ring {
+            animation: spin 1.5s linear infinite;
+            width: 60px;
+            height: 60px;
         }
         .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
+            transition: all 0.2s ease;
             font-weight: 600;
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.375rem;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         }
         .btn-primary:hover {
+            background-color: var(--secondary-color);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .btn-primary:active {
+            transform: translateY(1px);
+        }
+        .btn-secondary {
+            background-color: #4b5563;
+            color: white;
+            transition: all 0.2s ease;
+            font-weight: 600;
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.375rem;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+        .btn-secondary:hover {
+            background-color: #374151;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
         .result-card {
+            border: 1px solid #e5e7eb;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            padding: 1.5rem;
+            border-radius: 0.5rem;
+            background-color: white;
         }
         .result-card.show {
+            animation: fadeInUp 0.4s; /* Animation plus subtile */
         }
+        @keyframes fadeInUp {
+            from {
+              opacity: 0;
+              transform: translate3d(0, 20px, 0);
+            }
+            to {
+              opacity: 1;
+              transform: none;
+            }
+          }
         .camera-feed {
+            border-radius: 0.5rem;
             transform: scaleX(-1);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         }
         .github-corner {
             position: fixed;
             top: 0;
             right: 0;
+            width: 70px;
+            height: 70px;
+            z-index: 1001;
         }
         .github-corner:hover {
+            transform: scale(1.05);
+            transition: transform 0.2s ease;
         }
         .section-title {
+            font-size: 1.75rem;
             font-weight: 700;
+            color: var(--gray-dark);
             margin-bottom: 1.5rem;
             display: flex;
             align-items: center;
+            border-bottom: 2px solid var(--primary-color);
+            padding-bottom: 0.75rem;
         }
         .section-title i {
             color: var(--primary-color);
+            margin-right: 1rem;
+            font-size: 1.5rem;
         }
         .input-hidden {
         }
         .comparison-result {
+            font-size: 1.2rem;
+            margin-bottom: 0.75rem;
         }
         .comparison-result.positive {
+            color: #22c55e; /* Vert plus formel */
+            font-weight: 600;
         }
         .comparison-result.negative {
+            color: #ef4444; /* Rouge plus formel */
+            font-weight: 600;
         }
         .progress-bar {
+            height: 1rem;
+            background-color: #e5e7eb;
+            border-radius: 0.5rem;
             margin-bottom: 1rem;
             overflow: hidden;
         }
             transition: width 0.5s ease;
         }
         .project-description {
+            background-color: white;
+            padding: 2.5rem;
             border-radius: 0.5rem;
+            margin-bottom: 2.5rem;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
         .project-description h2 {
+            font-size: 2.25rem;
+            font-weight: 800;
+            color: var(--gray-dark);
+            margin-bottom: 1.5rem;
+            line-height: 1.2;
         }
         .project-description p {
+            font-size: 1.1rem;
             color: #4b5563;
+            line-height: 1.7;
         }
         .project-description ul {
         }
         .project-description ul li {
+            margin-bottom: 0.75rem;
+            font-size: 1.1rem;
+            line-height: 1.7;
         }
+        .project-description ul li ul{
+            list-style-type: circle;
+        }
+        .tech-used {
             margin-top: 0.5rem;
         }
+        /* Navigation */
+        .navbar {
+            background-color: white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            padding: 1rem 1.5rem;
+        }
+        .navbar .container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .navbar-brand {
+            display: flex;
+            align-items: center;
+            font-weight: 800;
+            font-size: 1.75rem;
+            color: var(--gray-dark);
+        }
+        .navbar-brand i {
+            color: var(--primary-color);
+            margin-right: 1rem;
+            font-size: 2rem;
+        }
+        .navbar-brand:hover{
+          color: var(--secondary-color);
+          transition: all 0.2s ease;
+        }
+        .navbar-links {
+            display: flex;
+            align-items: center;
+        }
+        .navbar-links a {
+            color: #4b5563;
+            font-weight: 500;
+            margin-left: 2rem;
+            transition: color 0.2s ease;
+        }
+        .navbar-links a:hover {
+            color: var(--primary-color);
+        }
+        .font-bold{
+          font-weight: 700;
+        }
         /* Responsiveness */
         @media (max-width: 768px) {
             .preview-container {
                 margin-bottom: 1rem;
             }
+            .project-description {
+                margin-bottom: 1.5rem;
+                padding: 1.5rem;
+            }
+            .project-description h2 {
+                font-size: 2rem;
+            }
+            .section-title {
+                font-size: 1.5rem;
+            }
+            .section-title i {
+                font-size: 1.25rem;
+            }
+            .navbar-brand {
+                font-size: 1.5rem;
+            }
+            .navbar-brand i {
+                font-size: 1.75rem;
+            }
+            .navbar-links a {
+                margin-left: 1.5rem;
             }
         }
     </style>
 </head>
+<body class="bg-gray-100">
     <div class="loading-overlay">
         <svg class="progress-ring text-blue-500" viewBox="0 0 50 50">
             <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-dasharray="80, 200"/>
     </div>
     <!-- Navigation -->
+    <nav class="navbar">
+        <div class="container mx-auto">
+            <a href="/" class="navbar-brand">
+                <i class="fas fa-brain text-blue-600"></i>
+                FaceAI Pro
+            </a>
+            <div class="navbar-links">
+                <a href="#" class="hover:text-blue-600">
+                    <i class="fas fa-question-circle text-lg"></i>
+                    <span class="hidden md:inline-block ml-1">Aide</span>
+                </a>
+                <a href="#" class="hover:text-blue-600">
+                    <i class="fas fa-cog text-lg"></i>
+                    <span class="hidden md:inline-block ml-1">Paramètres</span>
+                </a>
             </div>
         </div>
     </nav>
     <main class="container mx-auto p-6">
         <!-- Description du projet -->
         <div class="project-description">
+            <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>
+            <p class="text-gray-700">
+                <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.
             </p>
+            <p class="mt-4 text-gray-700">
+                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.
             </p>
+            <h3 class="text-xl font-bold text-gray-800 mt-8 mb-3">Fonctionnalités Clés :</h3>
+            <ul class="text-gray-700">
+                <li><strong class="font-bold">Comparaison en temps réel</strong> de deux images contenant des visages.</li>
+                <li><strong class="font-bold">Détection automatique</strong> et précise des visages dans les images téléchargées.</li>
+                <li><strong class="font-bold">Évaluation quantitative</strong> de la similarité entre les visages détectés, exprimée en pourcentage.</li>
+                <li><strong class="font-bold">Capture d'image</strong> via la caméra de l'appareil pour une analyse instantanée.</li>
+                <li><strong class="font-bold">Interface utilisateur épurée</strong> et intuitive pour une expérience optimale.</li>
             </ul>
+            <h3 class="text-xl font-bold text-gray-800 mt-8 mb-3">Technologies Employées :</h3>
+            <ul class="text-gray-700">
                 <li>
+                    <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.
                 </li>
                 <li>
+                    <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.
+                    <ul class="tech-used text-gray-700">
                         <li>
+                            Modèle par défaut : <strong class="font-bold">VGG-Face</strong>, un modèle reconnu pour sa précision et sa robustesse.
                         </li>
                         <li>
+                            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.
                         </li>
                         <li>
+                            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.
                         </li>
                     </ul>
                 </li>
                 <li>
+                    <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é.
                 </li>
                 <li>
+                    <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.
                 </li>
                 <li>
+                    <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.
                 </li>
             </ul>
+            <p class="mt-4 text-gray-700">
+                <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>.
+            </p>
         </div>
         <div class="grid md:grid-cols-2 gap-8">
             <!-- Section de capture -->
+            <div class="bg-white rounded-lg shadow-md p-6">
                 <h2 class="section-title">
                     <i class="fas fa-camera"></i>
                     Capture d'Images
                     <div class="flex space-x-4">
                         <label for="fileInput" class="btn-primary text-white px-6 py-3 rounded-lg flex items-center cursor-pointer">
                             <i class="fas fa-upload mr-2"></i>
+                            Importer des Images
                         </label>
+                        <button id="cameraBtn" class="btn-secondary text-white px-6 py-3 rounded-lg flex items-center transition-all">
                             <i class="fas fa-video mr-2"></i>
+                            Utiliser la Caméra
                         </button>
                     </div>
             </div>
             <!-- Section des résultats -->
+            <div class="bg-white rounded-lg shadow-md p-6">
                 <h2 class="section-title">
                     <i class="fas fa-chart-bar"></i>
+                    Résultats de l'Analyse
                 </h2>
+                <div id="results" class="result-card">
                     <div class="text-center text-gray-500">
                         <i class="fas fa-upload text-4xl mb-3"></i>
+                        <p class="text-gray-600">Importez ou capturez deux images pour démarrer l'analyse.</p>
                     </div>
                 </div>
                 <button id="compareBtn" class="btn-primary w-full mt-6 py-3 rounded-lg text-white font-semibold hidden">
                     <i class="fas fa-sync-alt mr-2"></i>
+                    Lancer la Comparaison
                 </button>
             </div>
         </div>
     <!-- GitHub Corner -->
     <a href="https://github.com/Yusufibin" class="github-corner" target="_blank" aria-label="Voir le code source sur GitHub">
+        <svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--gray-dark); color:#fff;">
             <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
             <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>
             <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>
                 // Arrêter la caméra
                 stream.getTracks().forEach(track => track.stop());
                 video.classList.add('hidden');
+                cameraBtn.innerHTML = '<i class="fas fa-video mr-2"></i>Utiliser la Caméra';
                 stream = null;
             } else {
                 // Démarrer la caméra
                     stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } });
                     video.srcObject = stream;
                     video.classList.remove('hidden');
+                    cameraBtn.innerHTML = '<i class="fas fa-times mr-2"></i>Arrêter la caméra';
                 } catch (err) {
                     console.error('Erreur lors de l\'accès à la caméra:', err);
                 }