Update templates/index.html

templates/index.html

@@ -62,10 +62,10 @@
             cursor: pointer;
             z-index: 10;
         }
+
         .preview-container:hover .delete-btn {
             opacity: 1;
         }
-        
 
         .loading-overlay {
             position: fixed;
@@ -183,11 +183,49 @@
             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 {
+            list-style-type: disc;
+            margin-left: 1.5rem;
+            color: #4b5563;
+            margin-top: 1rem;
+        }
+
+        .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>
@@ -220,6 +258,55 @@
 
     <!-- Contenu principal -->
     <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">
@@ -293,9 +380,8 @@
 
     <!-- Script JavaScript -->
     <script>
-        let uploadedImages = []; // Tableau pour stocker les images uploadées
+        let uploadedImages = [];
 
-        // Gestion de l'upload d'images
         const fileInput = document.getElementById('fileInput');
         fileInput.addEventListener('change', handleImageUpload);
 
@@ -317,21 +403,18 @@
             }
         }
 
-        // Boutons de suppression
         document.querySelectorAll('.delete-btn').forEach(button => {
             button.addEventListener('click', function() {
                 const targetPreviewId = this.dataset.target;
                 const targetPreview = document.getElementById(targetPreviewId);
                 targetPreview.style.backgroundImage = '';
 
-                // Retirer l'image du tableau uploadedImages
                 uploadedImages = uploadedImages.filter(image => image.preview !== targetPreviewId);
 
                 updateCompareButtonState();
             });
         });
 
-        // Gestion du bouton de la caméra
         const cameraBtn = document.getElementById('cameraBtn');
         const video = document.getElementById('video');
         let stream = null;
@@ -356,7 +439,6 @@
             }
         });
 
-        // Capture d'image depuis la caméra
         video.addEventListener('click', () => {
             if (stream && uploadedImages.length < 2) {
                 const canvas = document.createElement('canvas');
@@ -375,7 +457,6 @@
             }
         });
 
-        // Gestion du bouton de comparaison
         const compareBtn = document.getElementById('compareBtn');
         compareBtn.addEventListener('click', () => {
             if (uploadedImages.length === 2) {
@@ -406,7 +487,6 @@
             compareBtn.classList.toggle('hidden', uploadedImages.length < 2);
         }
 
-        // Affichage des résultats
         function showResults(data) {
             const resultsDiv = document.getElementById('results');
             resultsDiv.classList.remove('show');
@@ -431,7 +511,6 @@
                     </div>
                 `;
                 resultsDiv.classList.add('show');
-                // Animer la barre de progression après un court délai
                 setTimeout(() => {
                     const progressBarFill = resultsDiv.querySelector('.progress-bar-fill');
                     progressBarFill.style.width = `${data.similarity}%`;
@@ -453,7 +532,6 @@
             }, 300);
         }
 
-        // Fonctions pour afficher et masquer le chargement
         function showLoading() {
             document.querySelector('.loading-overlay').style.display = 'flex';
         }