Spaces:

Docfile
/

Reconnaissance

Running

App Files Files Community

Docfile commited on 1 day ago

Commit

9a3cea8

•

1 Parent(s): 93b0af7

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +208 -196

templates/index.html CHANGED Viewed

@@ -3,235 +3,247 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Application de Reconnaissance Faciale</title>
-    <!-- Tailwind CSS -->
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    <!-- Font Awesome (pour les icônes) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
     <style>
-        /* Styles personnalisés (si nécessaire) */
         .preview-image {
             background-size: cover;
             background-position: center;
-            min-height: 150px;
         }
-        .github-link {
             position: fixed;
-            bottom: 20px;
-            right: 20px;
-            padding: 10px;
-            background-color: #333;
-            color: white;
-            border-radius: 5px;
-            text-decoration: none;
-            display: flex;
             align-items: center;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
         }
-        .github-link i {
-            margin-right: 8px;
-            font-size: 20px;
         }
-        .github-link:hover {
-            background-color: #555;
         }
     </style>
 </head>
-<body class="bg-gray-100 font-sans">
-    <div class="container mx-auto p-4">
-        <h1 class="text-4xl font-bold text-center text-blue-700 mb-8">
-            <i class="fas fa-user-check text-5xl mr-3"></i>
-            Reconnaissance et Comparaison Faciale
-        </h1>
         <div class="grid md:grid-cols-2 gap-8">
-            <!-- Section de sélection d'images -->
-            <div class="bg-white p-6 rounded-lg shadow-lg">
-                <h2 class="text-2xl font-semibold mb-4 text-gray-700">
-                    <i class="fas fa-images text-blue-500 mr-2"></i>
-                    Sélectionner des images
                 </h2>
-                <input type="file" id="imageUpload" accept="image/*" class="mb-4 hidden">
-                <label for="imageUpload" class="cursor-pointer bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg inline-flex items-center transition duration-200 ease-in-out">
-                    <i class="fas fa-upload mr-2"></i>
-                    Choisir un fichier
-                </label>
-                <button id="cameraButton" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg ml-4 inline-flex items-center transition duration-200 ease-in-out">
-                    <i class="fas fa-camera mr-2"></i>
-                    Utiliser la caméra
-                </button>
-                <video id="videoFeed" width="320" height="240" autoplay class="hidden mt-4 rounded-lg"></video>
-                <canvas id="canvas" width="320" height="240" class="hidden"></canvas>
-                <!-- Prévisualisation des images -->
-                <div class="grid grid-cols-2 gap-4 mt-6">
-                    <div id="imagePreview1" class="w-full aspect-w-1 aspect-h-1 rounded-lg overflow-hidden preview-image"></div>
-                    <div id="imagePreview2" class="w-full aspect-w-1 aspect-h-1 rounded-lg overflow-hidden preview-image"></div>
                 </div>
             </div>
             <!-- Section des résultats -->
-            <div class="bg-white p-6 rounded-lg shadow-lg">
-                <h2 class="text-2xl font-semibold mb-4 text-gray-700">
-                    <i class="fas fa-poll-h text-blue-500 mr-2"></i>
-                    Résultats de la comparaison
                 </h2>
-                <div id="results" class="text-center">
-                    <p class="text-gray-600">Veuillez sélectionner des images ou utiliser la caméra pour commencer.</p>
                 </div>
-                <button id="compareButton" class="hidden bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mt-4">
-                    Comparer les visages
                 </button>
             </div>
         </div>
-    </div>
-    <!-- Lien GitHub -->
-    <a href="https://github.com/Yusufibin" target="_blank" class="github-link">
-        <i class="fab fa-github"></i>
-        <span>Yusufibin</span>
     </a>
     <script>
-        const imageUpload = document.getElementById('imageUpload');
-        const cameraButton = document.getElementById('cameraButton');
-        const videoFeed = document.getElementById('videoFeed');
-        const canvas = document.getElementById('canvas');
-        const imagePreview1 = document.getElementById('imagePreview1');
-        const imagePreview2 = document.getElementById('imagePreview2');
-        const resultsDiv = document.getElementById('results');
-        const compareButton = document.getElementById('compareButton');
-        const API_BASE_URL = 'http://127.0.0.1:5000'; // URL de base de ton API Flask
-        let usingCamera = false;
-        let currentImage = 1; // 1 or 2 pour suivre quelle image prévisualiser
-        // Gestionnaire pour le téléchargement de fichiers
-        imageUpload.addEventListener('change', async (event) => {
-            const file = event.target.files[0];
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    if (currentImage === 1) {
-                        imagePreview1.style.backgroundImage = `url(${e.target.result})`;
-                        currentImage = 2;
-                    } else {
-                        imagePreview2.style.backgroundImage = `url(${e.target.result})`;
-                        currentImage = 1;
-                    }
-                    compareButton.classList.remove('hidden'); // Affiche le bouton de comparaison
-                };
-                reader.readAsDataURL(file);
-            }
-        });
-        // Gestionnaire pour le bouton de la caméra
-        cameraButton.addEventListener('click', async () => {
-            usingCamera = !usingCamera;
-            if (usingCamera) {
-                cameraButton.textContent = 'Arrêter la caméra';
-                try {
-                    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-                    videoFeed.srcObject = stream;
-                    videoFeed.classList.remove('hidden');
-                } catch (err) {
-                    console.error("Erreur lors de l'accès à la caméra :", err);
-                }
-            } else {
-                cameraButton.textContent = 'Utiliser la caméra';
-                const tracks = videoFeed.srcObject.getTracks();
-                tracks.forEach(track => track.stop());
-                videoFeed.classList.add('hidden');
-            }
-        });
-        // Capture d'image à partir de la caméra
-        function captureImageFromCamera() {
-            const context = canvas.getContext('2d');
-            context.drawImage(videoFeed, 0, 0, canvas.width, canvas.height);
-            const imageDataURL = canvas.toDataURL('image/png');
-            if (currentImage === 1) {
-                imagePreview1.style.backgroundImage = `url(${imageDataURL})`;
-                currentImage = 2;
-            } else {
-                imagePreview2.style.backgroundImage = `url(${imageDataURL})`;
-                currentImage = 1;
-            }
-            compareButton.classList.remove('hidden'); // Affiche le bouton de comparaison
-        }
-        // Gestionnaire pour le bouton de comparaison
-        compareButton.addEventListener('click', () => {
-            if (imagePreview1.style.backgroundImage && imagePreview2.style.backgroundImage) {
-                const formData = new FormData();
-                const imageData1 = dataURLtoBlob(imagePreview1.style.backgroundImage.slice(5, -2));
-                const imageData2 = dataURLtoBlob(imagePreview2.style.backgroundImage.slice(5, -2));
-                formData.append('image1', imageData1, 'image1.png');
-                formData.append('image2', imageData2, 'image2.png');
-                fetch(`${API_BASE_URL}/verify`, {
-                    method: 'POST',
-                    body: formData,
-                })
-                .then(response => response.json())
-                .then(data => {
-                    displayResults(data);
-                })
-                .catch(error => {
-                    console.error('Erreur lors de la comparaison des visages:', error);
-                    resultsDiv.innerHTML = `<p>Erreur lors de la comparaison.</p>`;
-                });
-            } else {
-                alert('Veuillez télécharger deux images pour la comparaison.');
-            }
-        });
-        // Fonction pour convertir une URL de données en Blob
-        function dataURLtoBlob(dataURL) {
-            const parts = dataURL.split(';base64,');
-            const contentType = parts[0].split(':')[1];
-            const raw = window.atob(parts[1]);
-            const rawLength = raw.length;
-            const uInt8Array = new Uint8Array(rawLength);
-            for (let i = 0; i < rawLength; ++i) {
-                uInt8Array[i] = raw.charCodeAt(i);
-            }
-            return new Blob([uInt8Array], { type: contentType });
-        }
-        // Fonction pour afficher les résultats de la comparaison
-        function displayResults(data) {
-            let resultHTML = '';
-            if (data.error) {
-                resultHTML = `<p class="text-red-600">${data.error}</p>`;
-            } else {
-                const similarity = data.verified ? 'Visages similaires' : 'Visages différents';
-                resultHTML += `<p class="text-lg ${data.verified ? 'text-green-600' : 'text-red-600'}">${similarity}</p>`;
-                if (data.distance !== undefined && data.threshold !== undefined) {
-                    resultHTML += `<p class="mt-2">Distance : ${data.distance.toFixed(4)}</p>`;
-                    resultHTML += `<p>Seuil de similarité : ${data.threshold.toFixed(4)}</p>`;
-                }
-                if (data.image1_url && data.image2_url) {
-                    resultHTML += `<img src="${API_BASE_URL}/${data.image1_url}" alt="Image 1" class="w-32 h-32 mt-4 rounded-lg">`;
-                    resultHTML += `<img src="${API_BASE_URL}/${data.image2_url}" alt="Image 2" class="w-32 h-32 mt-4 rounded-lg">`;
-                }
-            }
-            resultsDiv.innerHTML = resultHTML;
         }
     </script>
 </body>
 </html>

 <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;
+            background: #f8fafc;
+            border-radius: 1rem;
+            overflow: hidden;
+            transition: all 0.3s ease;
+        }
         .preview-image {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
             background-size: cover;
             background-position: center;
+            transition: transform 0.3s ease;
+        }
+        .preview-container:hover .preview-image {
+            transform: scale(1.05);
         }
+        .loading-overlay {
             position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            display: none;
+            justify-content: center;
             align-items: center;
+            z-index: 1000;
+        }
+        .progress-ring {
+            animation: spin 2s linear infinite;
+            width: 50px;
+            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 {
+            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;
+        }
+        .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">
+    <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"/>
+        </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>
             </div>
             <!-- 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>
+                <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>
+    </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');
+            setTimeout(() => {
+                resultsDiv.innerHTML = `
+                    <div class="text-center">
+                        <div class="text-4xl mb-4 ${data.verified ? 'text-green-500' : 'text-red-500'}">
+                            <i class="fas ${data.verified ? 'fa-check-circle' : 'fa-times-circle'}"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">
+                            ${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';
+        }
+        function hideLoading() {
+            document.querySelector('.loading-overlay').style.display = 'none';
+        }
+        // Le reste du code JavaScript original avec les gestionnaires d'événements...
     </script>
 </body>
 </html>