Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <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 */ | |
| @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; | |
| 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); | |
| } | |
| .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; | |
| 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; | |
| } | |
| .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 { | |
| 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%); } | |
| } | |
| /* 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> | |
| <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> | |
| <!-- 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"> | |
| <!-- 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 | |
| </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> | |
| </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> | |
| </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 = []; | |
| 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); | |
| } | |
| } | |
| } | |
| document.querySelectorAll('.delete-btn').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const targetPreviewId = this.dataset.target; | |
| const targetPreview = document.getElementById(targetPreviewId); | |
| targetPreview.style.backgroundImage = ''; | |
| uploadedImages = uploadedImages.filter(image => image.preview !== targetPreviewId); | |
| updateCompareButtonState(); | |
| }); | |
| }); | |
| 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); | |
| } | |
| } | |
| }); | |
| 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'); | |
| } | |
| }); | |
| 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); | |
| } | |
| 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 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'); | |
| 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); | |
| } | |
| function showLoading() { | |
| document.querySelector('.loading-overlay').style.display = 'flex'; | |
| } | |
| function hideLoading() { | |
| document.querySelector('.loading-overlay').style.display = 'none'; | |
| } | |
| </script> | |
| </body> | |
| </html> |