Spaces:

Docfile
/

Reconnaissance

Sleeping

App Files Files Community

Docfile commited on Dec 22, 2024

Commit

dfa3bfa

verified ·

1 Parent(s): f0f505e

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +266 -49

templates/index.html CHANGED Viewed

@@ -3,17 +3,28 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Système de Reconnaissance Faciale Pro</title>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/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>
         @keyframes pulse-border {
-            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
-            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
-            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
         }
         .preview-container {
             position: relative;
             aspect-ratio: 1;
@@ -38,6 +49,24 @@
             transform: scale(1.05);
         }
         .loading-overlay {
             position: fixed;
             top: 0;
@@ -57,19 +86,16 @@
             height: 50px;
         }
-        @keyframes spin {
-            100% { transform: rotate(360deg); }
-        }
         .btn-primary {
-            background: linear-gradient(135deg, #4f46e5, #3b82f6);
             transition: all 0.3s ease;
             animation: pulse-border 2s infinite;
         }
         .btn-primary:hover {
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
         }
         .result-card {
@@ -94,11 +120,75 @@
             width: 80px;
             height: 80px;
             transition: transform 0.3s ease;
         }
         .github-corner:hover {
             transform: scale(1.1);
         }
     </style>
 </head>
 <body class="bg-gradient-to-br from-gray-100 to-gray-200 min-h-screen font-sans">
@@ -108,65 +198,63 @@
         </svg>
     </div>
     <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>
-                    <h1 class="text-2xl font-bold text-gray-800">FaceAI Pro</h1>
                 </div>
                 <div class="flex items-center space-x-4">
-                    <button class="text-gray-600 hover:text-blue-600 transition-colors">
                         <i class="fas fa-question-circle text-xl"></i>
-                    </button>
-                    <button class="text-gray-600 hover:text-blue-600 transition-colors">
                         <i class="fas fa-cog text-xl"></i>
-                    </button>
                 </div>
             </div>
         </div>
     </nav>
     <main class="container mx-auto p-6">
         <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="text-2xl font-bold text-gray-800 mb-6 flex items-center">
-                    <i class="fas fa-camera text-blue-600 mr-3"></i>
                     Capture d'Images
                 </h2>
                 <div class="space-y-4">
                     <div class="flex space-x-4">
-                        <button id="uploadBtn" class="btn-primary text-white px-6 py-3 rounded-lg flex items-center">
                             <i class="fas fa-upload mr-2"></i>
                             Importer
-                        </button>
                         <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>
-                    <input type="file" id="fileInput" class="hidden" accept="image/*">
-                    <video id="video" class="camera-feed w-full hidden" autoplay></video>
                     <div class="grid grid-cols-2 gap-4">
-                        <div class="preview-container shadow-lg">
                             <div id="preview1" class="preview-image"></div>
-                            <div class="absolute bottom-2 right-2">
-                                <button class="bg-red-500 text-white p-2 rounded-full opacity-0 transition-opacity hover:opacity-100">
-                                    <i class="fas fa-times"></i>
-                                </button>
-                            </div>
                         </div>
-                        <div class="preview-container shadow-lg">
                             <div id="preview2" class="preview-image"></div>
-                            <div class="absolute bottom-2 right-2">
-                                <button class="bg-red-500 text-white p-2 rounded-full opacity-0 transition-opacity hover:opacity-100">
-                                    <i class="fas fa-times"></i>
-                                </button>
-                            </div>
                         </div>
                     </div>
                 </div>
@@ -174,15 +262,15 @@
             <!-- Section des résultats -->
             <div class="bg-white rounded-xl shadow-xl p-6 animate__animated animate__fadeInRight">
-                <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
-                    <i class="fas fa-chart-bar text-blue-600 mr-3"></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>
@@ -195,19 +283,130 @@
     </main>
     <!-- GitHub Corner -->
-    <a href="https://github.com/Yusufibin" class="github-corner" target="_blank">
-        <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
             <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>
         </svg>
     </a>
     <script>
-        // Le code JavaScript reste similaire mais avec des améliorations pour les animations
-        // et la gestion des états de l'interface...
-        // Exemple d'amélioration pour l'affichage des résultats
         function showResults(data) {
             const resultsDiv = document.getElementById('results');
             resultsDiv.classList.remove('show');
@@ -222,19 +421,39 @@
                             ${data.verified ? 'Visages identiques' : 'Visages différents'}
                         </h3>
                         <div class="space-y-2">
-                            <p>Similarité: ${(data.similarity * 100).toFixed(1)}%</p>
-                            <div class="w-full bg-gray-200 rounded-full h-2.5">
-                                <div class="bg-blue-600 h-2.5 rounded-full"
-                                     style="width: ${data.similarity * 100}%"></div>
                             </div>
                         </div>
                     </div>
                 `;
                 resultsDiv.classList.add('show');
             }, 300);
         }
-        // Ajout des animations pour le chargement
         function showLoading() {
             document.querySelector('.loading-overlay').style.display = 'flex';
         }
@@ -242,8 +461,6 @@
         function hideLoading() {
             document.querySelector('.loading-overlay').style.display = 'none';
         }
-        // Le reste du code JavaScript original avec les gestionnaires d'événements...
     </script>
 </body>
 </html>

 <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/tailwindcss@2.2.19/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 */
         @keyframes pulse-border {
+            0% { box-shadow: 0 0 0 0 rgba(var(--primary-color), 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(var(--primary-color), 0); }
+            100% { box-shadow: 0 0 0 0 rgba(var(--primary-color), 0); }
         }
+        @keyframes spin {
+            100% { transform: rotate(360deg); }
+        }
+        /* Composants */
         .preview-container {
             position: relative;
             aspect-ratio: 1;
             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;
+        }
         .loading-overlay {
             position: fixed;
             top: 0;
             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 {
             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 {
+            display: none;
+        }
+        .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;
+        }
+        .progress-bar-fill {
+            height: 100%;
+            background-color: var(--primary-color);
+            width: 0%;
+            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%); }
+        }
+        /* Responsiveness */
+        @media (max-width: 768px) {
+            .preview-container {
+                margin-bottom: 1rem;
+            }
+        }
     </style>
 </head>
 <body class="bg-gradient-to-br from-gray-100 to-gray-200 min-h-screen font-sans">
         </svg>
     </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>
+    <!-- Contenu principal -->
     <main class="container mx-auto p-6">
         <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
                 </h2>
                 <div class="space-y-4">
                     <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>
+                    <input type="file" id="fileInput" class="input-hidden" accept="image/*" multiple>
+                    <video id="video" class="camera-feed w-full hidden" autoplay muted playsinline></video>
                     <div class="grid grid-cols-2 gap-4">
+                        <div class="preview-container">
                             <div id="preview1" class="preview-image"></div>
+                            <button class="delete-btn" data-target="preview1" title="Supprimer">
+                                <i class="fas fa-times"></i>
+                            </button>
                         </div>
+                        <div class="preview-container">
                             <div id="preview2" class="preview-image"></div>
+                            <button class="delete-btn" data-target="preview2" title="Supprimer">
+                                <i class="fas fa-times"></i>
+                            </button>
                         </div>
                     </div>
                 </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>
     </main>
     <!-- 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>
         </svg>
     </a>
+    <!-- Script JavaScript -->
     <script>
+        let uploadedImages = []; // Tableau pour stocker les images uploadées
+        // Gestion de l'upload d'images
+        const fileInput = document.getElementById('fileInput');
+        fileInput.addEventListener('change', handleImageUpload);
+        function handleImageUpload(event) {
+            const files = event.target.files;
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                if (uploadedImages.length < 2 && file.type.startsWith('image/')) {
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        const previewId = uploadedImages.length === 0 ? 'preview1' : 'preview2';
+                        const previewImg = document.getElementById(previewId);
+                        previewImg.style.backgroundImage = `url(${e.target.result})`;
+                        uploadedImages.push({ file: file, preview: previewId });
+                        updateCompareButtonState();
+                    };
+                    reader.readAsDataURL(file);
+                }
+            }
+        }
+        // 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;
+        cameraBtn.addEventListener('click', async () => {
+            if (stream) {
+                // 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
+                try {
+                    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);
+                }
+            }
+        });
+        // Capture d'image depuis la caméra
+        video.addEventListener('click', () => {
+            if (stream && uploadedImages.length < 2) {
+                const canvas = document.createElement('canvas');
+                canvas.width = video.videoWidth;
+                canvas.height = video.videoHeight;
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                canvas.toBlob(blob => {
+                    const file = new File([blob], `capture-${Date.now()}.jpg`, { type: 'image/jpeg' });
+                    const previewId = uploadedImages.length === 0 ? 'preview1' : 'preview2';
+                    const previewImg = document.getElementById(previewId);
+                    previewImg.style.backgroundImage = `url(${URL.createObjectURL(file)})`;
+                    uploadedImages.push({ file: file, preview: previewId });
+                    updateCompareButtonState();
+                }, 'image/jpeg');
+            }
+        });
+        // Gestion du bouton de comparaison
+        const compareBtn = document.getElementById('compareBtn');
+        compareBtn.addEventListener('click', () => {
+            if (uploadedImages.length === 2) {
+                showLoading();
+                const formData = new FormData();
+                formData.append('file1', uploadedImages[0].file);
+                formData.append('file2', uploadedImages[1].file);
+                fetch('/compare', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    showResults(data);
+                })
+                .catch(error => {
+                    console.error('Erreur lors de la comparaison:', error);
+                    showError(error);
+                })
+                .finally(() => {
+                    hideLoading();
+                });
+            }
+        });
+        function updateCompareButtonState() {
+            compareBtn.classList.toggle('hidden', uploadedImages.length < 2);
+        }
+        // Affichage des résultats
         function showResults(data) {
             const resultsDiv = document.getElementById('results');
             resultsDiv.classList.remove('show');
                             ${data.verified ? 'Visages identiques' : 'Visages différents'}
                         </h3>
                         <div class="space-y-2">
+                            <p class="comparison-result ${data.verified ? 'positive' : 'negative'}">
+                                Similarité: <span class="font-semibold">${data.similarity}%</span>
+                            </p>
+                            <div class="progress-bar">
+                                <div class="progress-bar-fill" style="width: ${data.similarity}%; --progress-value: ${data.similarity};" data-progress="${data.similarity}"></div>
                             </div>
                         </div>
                     </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}%`;
+                }, 50);
             }, 300);
         }
+        function showError(error) {
+            const resultsDiv = document.getElementById('results');
+            resultsDiv.classList.remove('show');
+            setTimeout(() => {
+                resultsDiv.innerHTML = `
+                    <div class="text-center text-red-500">
+                        <i class="fas fa-exclamation-triangle text-4xl mb-3"></i>
+                        <p>Erreur : ${error.message || 'Une erreur est survenue.'}</p>
+                    </div>
+                `;
+                resultsDiv.classList.add('show');
+            }, 300);
+        }
+        // Fonctions pour afficher et masquer le chargement
         function showLoading() {
             document.querySelector('.loading-overlay').style.display = 'flex';
         }
         function hideLoading() {
             document.querySelector('.loading-overlay').style.display = 'none';
         }
     </script>
 </body>
 </html>