Spaces:

Docfile
/

Reconnaissance

Sleeping

App Files Files Community

Docfile commited on Dec 22, 2024

Commit

f5f210d

verified ·

1 Parent(s): 7d77f9b

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +659 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,659 @@

+<!DOCTYPE html>
+<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>