Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Argus Pro - Démonstration de Reconnaissance Faciale</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: #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 */ | |
| @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 */ | |
| .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 { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| 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; | |
| } | |
| .loading-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.8); | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| } | |
| .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 { | |
| display: none; | |
| } | |
| .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; | |
| } | |
| .progress-bar-fill { | |
| height: 100%; | |
| background-color: var(--primary-color); | |
| width: 0%; | |
| 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 { | |
| list-style-type: disc; | |
| margin-left: 1.5rem; | |
| color: #4b5563; | |
| margin-top: 1rem; | |
| } | |
| .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"/> | |
| </svg> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="navbar"> | |
| <div class="container mx-auto"> | |
| <a href="/" class="navbar-brand"> | |
| <i class="fas fa-brain text-blue-600"></i> | |
| Argus 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> | |
| <!-- Contenu principal --> | |
| <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">Argus Pro : Démonstration de Reconnaissance Faciale en Temps Réel</h2> | |
| <p class="text-gray-700"> | |
| <strong class="font-bold">Argus Pro</strong> est une application web pour démontrer la reconnaissance faciale. Comparez deux visages et évaluez leur similarité en temps réel. | |
| </p> | |
| <p class="mt-4 text-gray-700"> | |
| Explorez cette technologie et ses applications dans la sécurité et l'authentification. | |
| </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>Comparaison en temps réel de deux images de visages.</li> | |
| <li>Détection automatique des visages.</li> | |
| <li>Évaluation quantitative de la similarité (en pourcentage).</li> | |
| <li>Capture d'image via la caméra.</li> | |
| <li>Interface utilisateur simple et intuitive.</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> (Python).</li> | |
| <li><strong class="font-bold">Reconnaissance Faciale :</strong> Algorithme de deep learning.</li> | |
| <li><strong class="font-bold">Frontend :</strong> HTML5, CSS3 (<a href="https://tailwindcss.com/" target="_blank" class="text-blue-600 hover:underline">Tailwind CSS</a>), JavaScript.</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>.</li> | |
| <li><strong class="font-bold">Animations :</strong> <a href="https://animate.style/" target="_blank" class="text-blue-600 hover:underline">Animate.css</a>.</li> | |
| </ul> | |
| <p class="mt-4 text-gray-700"> | |
| 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 | |
| </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 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> | |
| <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-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> | |
| </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(--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> | |
| </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>Utiliser la 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 la caméra'; | |
| } 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> |