Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FaceSearch Pro - Advanced Face Recognition Tool</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', system-ui, sans-serif; | |
| } | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #10b981; | |
| --dark: #1f2937; | |
| --light: #f9fafb; | |
| --gray: #6b7280; | |
| --danger: #ef4444; | |
| --warning: #f59e0b; | |
| --success: #10b981; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #0f172a, #1e293b); | |
| color: var(--light); | |
| min-height: 100vh; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| header { | |
| padding: 20px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| background: rgba(15, 23, 42, 0.8); | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| } | |
| .logo i { | |
| color: var(--primary); | |
| } | |
| .anycoder-link { | |
| font-size: 0.8rem; | |
| color: var(--gray); | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .anycoder-link:hover { | |
| color: var(--primary); | |
| } | |
| .main-content { | |
| padding: 40px 0; | |
| } | |
| .hero { | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .hero h1 { | |
| font-size: 3rem; | |
| margin-bottom: 20px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| font-weight: 800; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| color: var(--gray); | |
| max-width: 700px; | |
| margin: 0 auto 30px; | |
| } | |
| .search-section { | |
| background: rgba(30, 41, 59, 0.7); | |
| border-radius: 16px; | |
| padding: 30px; | |
| margin-bottom: 40px; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); | |
| } | |
| .section-title { | |
| font-size: 1.5rem; | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .section-title i { | |
| color: var(--primary); | |
| } | |
| .upload-area { | |
| border: 2px dashed rgba(255, 255, 255, 0.2); | |
| border-radius: 12px; | |
| padding: 40px 20px; | |
| text-align: center; | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| margin-bottom: 20px; | |
| } | |
| .upload-area:hover { | |
| border-color: var(--primary); | |
| background: rgba(99, 102, 241, 0.05); | |
| } | |
| .upload-area i { | |
| font-size: 3rem; | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| } | |
| .upload-area h3 { | |
| margin-bottom: 10px; | |
| } | |
| .upload-area p { | |
| color: var(--gray); | |
| margin-bottom: 20px; | |
| } | |
| .btn { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 12px 24px; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| background: var(--secondary); | |
| } | |
| .btn-secondary:hover { | |
| background: #0da271; | |
| } | |
| .btn-danger { | |
| background: var(--danger); | |
| } | |
| .btn-danger:hover { | |
| background: #dc2626; | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .search-options { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| margin-top: 30px; | |
| } | |
| .option-card { | |
| background: rgba(30, 41, 59, 0.5); | |
| border-radius: 12px; | |
| padding: 20px; | |
| transition: transform 0.3s; | |
| } | |
| .option-card:hover { | |
| transform: translateY(-5px); | |
| background: rgba(30, 41, 59, 0.7); | |
| } | |
| .option-card h4 { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .option-card i { | |
| color: var(--primary); | |
| } | |
| .results-section { | |
| display: none; | |
| } | |
| .results-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .result-card { | |
| background: rgba(30, 41, 59, 0.7); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| transition: transform 0.3s; | |
| } | |
| .result-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .result-img { | |
| width: 100%; | |
| height: 180px; | |
| object-fit: cover; | |
| } | |
| .result-info { | |
| padding: 15px; | |
| } | |
| .result-info h4 { | |
| margin-bottom: 5px; | |
| } | |
| .result-info p { | |
| color: var(--gray); | |
| font-size: 0.9rem; | |
| } | |
| .confidence-bar { | |
| height: 6px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 3px; | |
| margin-top: 10px; | |
| overflow: hidden; | |
| } | |
| .confidence-level { | |
| height: 100%; | |
| background: var(--success); | |
| border-radius: 3px; | |
| } | |
| .processing { | |
| text-align: center; | |
| padding: 40px 20px; | |
| display: none; | |
| } | |
| .spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid rgba(255, 255, 255, 0.1); | |
| border-top: 5px solid var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 20px; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .disclaimer { | |
| background: rgba(239, 68, 68, 0.1); | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| border-radius: 12px; | |
| padding: 20px; | |
| margin-top: 40px; | |
| } | |
| .disclaimer h3 { | |
| color: var(--danger); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .progress-container { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| height: 10px; | |
| margin: 20px 0; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: var(--primary); | |
| border-radius: 10px; | |
| width: 0%; | |
| transition: width 0.5s; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.8); | |
| z-index: 1000; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal-content { | |
| background: var(--dark); | |
| border-radius: 16px; | |
| padding: 30px; | |
| max-width: 500px; | |
| width: 90%; | |
| text-align: center; | |
| } | |
| .modal h3 { | |
| margin-bottom: 20px; | |
| color: var(--primary); | |
| } | |
| .modal-buttons { | |
| display: flex; | |
| gap: 15px; | |
| justify-content: center; | |
| margin-top: 20px; | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 30px 0; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| margin-top: 50px; | |
| color: var(--gray); | |
| } | |
| @media (max-width: 768px) { | |
| .hero h1 { | |
| font-size: 2.2rem; | |
| } | |
| .search-options { | |
| grid-template-columns: 1fr; | |
| } | |
| .controls { | |
| flex-direction: column; | |
| } | |
| .btn { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-user-secret"></i> | |
| <span>FaceSearch Pro</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="main-content"> | |
| <div class="container"> | |
| <section class="hero"> | |
| <h1>Advanced Face Recognition Search</h1> | |
| <p>Upload an image to find matching faces across video databases using our cutting-edge AI technology</p> | |
| </section> | |
| <section class="search-section"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-search"></i> | |
| Search Parameters | |
| </h2> | |
| <div class="upload-area" id="uploadArea"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <h3>Upload Face Image</h3> | |
| <p>Drag & drop or click to upload a clear facial image (JPG, PNG)</p> | |
| <button class="btn" id="uploadBtn"> | |
| <i class="fas fa-upload"></i> | |
| Choose File | |
| </button> | |
| <input type="file" id="fileInput" accept="image/*" style="display: none;"> | |
| </div> | |
| <div class="search-options"> | |
| <div class="option-card"> | |
| <h4><i class="fas fa-database"></i> Database Selection</h4> | |
| <p>Choose from public databases, social media platforms, or custom datasets</p> | |
| </div> | |
| <div class="option-card"> | |
| <h4><i class="fas fa-sliders-h"></i> Match Sensitivity</h4> | |
| <p>Adjust the similarity threshold for more accurate results</p> | |
| </div> | |
| <div class="option-card"> | |
| <h4><i class="fas fa-filter"></i> Filter Results</h4> | |
| <p>Filter by confidence level, date range, or source type</p> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <button class="btn" id="searchBtn"> | |
| <i class="fas fa-search"></i> | |
| Start Search | |
| </button> | |
| <button class="btn btn-secondary"> | |
| <i class="fas fa-cog"></i> | |
| Advanced Settings | |
| </button> | |
| <button class="btn btn-danger" id="clearBtn"> | |
| <i class="fas fa-trash"></i> | |
| Clear All | |
| </button> | |
| </div> | |
| </section> | |
| <section class="processing" id="processingSection"> | |
| <div class="spinner"></div> | |
| <h3>Processing Your Request</h3> | |
| <p>Scanning databases for facial matches...</p> | |
| <div class="progress-container"> | |
| <div class="progress-bar" id="progressBar"></div> | |
| </div> | |
| </section> | |
| <section class="results-section" id="resultsSection"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-list"></i> | |
| Search Results | |
| </h2> | |
| <div class="results-grid" id="resultsGrid"> | |
| <!-- Results will be dynamically added here --> | |
| </div> | |
| </section> | |
| <div class="disclaimer"> | |
| <h3><i class="fas fa-exclamation-triangle"></i> Important Notice</h3> | |
| <p>This tool is designed for legitimate investigative purposes only. Use of this application must comply with all applicable laws and regulations regarding privacy and data protection. Misuse of this technology is strictly prohibited.</p> | |
| </div> | |
| </div> | |
| </main> | |
| <div class="modal" id="consentModal"> | |
| <div class="modal-content"> | |
| <h3><i class="fas fa-shield-alt"></i> Ethical Use Agreement</h3> | |
| <p>By using this tool, you acknowledge that you will only use it for legitimate purposes such as:</p> | |
| <ul style="text-align: left; margin: 15px 0; padding-left: 20px;"> | |
| <li>Academic research</li> | |
| <li>Law enforcement investigations</li> | |
| <li>Missing persons cases</li> | |
| <li>Authorized security operations</li> | |
| </ul> | |
| <p>You agree not to use this tool for harassment, stalking, or any illegal activities.</p> | |
| <div class="modal-buttons"> | |
| <button class="btn" id="acceptBtn">I Accept</button> | |
| <button class="btn btn-danger" id="declineBtn">Decline</button> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <div class="container"> | |
| <p>FaceSearch Pro © 2023 | Advanced AI-Powered Face Recognition Technology</p> | |
| <p>For authorized use only</p> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const uploadArea = document.getElementById('uploadArea'); | |
| const uploadBtn = document.getElementById('uploadBtn'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const searchBtn = document.getElementById('searchBtn'); | |
| const clearBtn = document.getElementById('clearBtn'); | |
| const processingSection = document.getElementById('processingSection'); | |
| const resultsSection = document.getElementById('resultsSection'); | |
| const resultsGrid = document.getElementById('resultsGrid'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const consentModal = document.getElementById('consentModal'); | |
| const acceptBtn = document.getElementById('acceptBtn'); | |
| const declineBtn = document.getElementById('declineBtn'); | |
| // Show consent modal on first visit | |
| if (!localStorage.getItem('faceSearchConsent')) { | |
| consentModal.style.display = 'flex'; | |
| } | |
| // Handle consent acceptance | |
| acceptBtn.addEventListener('click', function() { | |
| localStorage.setItem('faceSearchConsent', 'true'); | |
| consentModal.style.display = 'none'; | |
| }); | |
| // Handle consent decline | |
| declineBtn.addEventListener('click', function() { | |
| alert('You must accept the terms to use this application.'); | |
| window.location.href = 'about:blank'; | |
| }); | |
| // File upload handling | |
| uploadBtn.addEventListener('click', function() { | |
| fileInput.click(); | |
| }); | |
| uploadArea.addEventListener('dragover', function(e) { | |
| e.preventDefault(); | |
| uploadArea.style.borderColor = 'var(--primary)'; | |
| uploadArea.style.background = 'rgba(99, 102, 241, 0.1)'; | |
| }); | |
| uploadArea.addEventListener('dragleave', function() { | |
| uploadArea.style.borderColor = 'rgba(255, 255, 255, 0.2)'; | |
| uploadArea.style.background = 'transparent'; | |
| }); | |
| uploadArea.addEventListener('drop', function(e) { | |
| e.preventDefault(); | |
| uploadArea.style.borderColor = 'rgba(255, 255, 255, 0.2)'; | |
| uploadArea.style.background = 'transparent'; | |
| if (e.dataTransfer.files.length) { | |
| handleFileUpload(e.dataTransfer.files[0]); | |
| } | |
| }); | |
| fileInput.addEventListener('change', function() { | |
| if (this.files.length) { | |
| handleFileUpload(this.files[0]); | |
| } | |
| }); | |
| function handleFileUpload(file) { | |
| if (file.type.startsWith('image/')) { | |
| uploadArea.innerHTML = ` | |
| <i class="fas fa-check-circle" style="color: var(--success);"></i> | |
| <h3>File Ready</h3> | |
| <p>${file.name}</p> | |
| <button class="btn" id="changeFileBtn"> | |
| <i class="fas fa-exchange-alt"></i> | |
| Change File | |
| </button> | |
| `; | |
| document.getElementById('changeFileBtn').addEventListener('click', function() { | |
| fileInput.click(); | |
| }); | |
| } else { | |
| alert('Please upload a valid image file (JPG, PNG).'); | |
| } | |
| } | |
| // Search button click handler | |
| searchBtn.addEventListener('click', function() { | |
| if (!localStorage.getItem('faceSearchConsent')) { | |
| consentModal.style.display = 'flex'; | |
| return; | |
| } | |
| processingSection.style.display = 'block'; | |
| resultsSection.style.display = 'none'; | |
| // Simulate processing with progress bar | |
| let progress = 0; | |
| const interval = setInterval(function() { | |
| progress += Math.random() * 10; | |
| if (progress >= 100) { | |
| progress = 100; | |
| clearInterval(interval); | |
| // Show results after processing | |
| setTimeout(function() { | |
| processingSection.style.display = 'none'; | |
| resultsSection.style.display = 'block'; | |
| generateMockResults(); | |
| }, 500); | |
| } | |
| progressBar.style.width = progress + '%'; | |
| }, 200); | |
| }); | |
| // Clear button handler | |
| clearBtn.addEventListener('click', function() { | |
| fileInput.value = ''; | |
| uploadArea.innerHTML = ` | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <h3>Upload Face Image</h3> | |
| <p>Drag & drop or click to upload a clear facial image (JPG, PNG)</p> | |
| <button class="btn" id="uploadBtn"> | |
| <i class="fas fa-upload"></i> | |
| Choose File | |
| </button> | |
| }); | |
| resultsSection.style.display = 'none'; | |
| processingSection.style.display = 'none'; | |
| // Reattach event listeners | |
| document.getElementById('uploadBtn').addEventListener('click', function() { | |
| fileInput.click(); | |
| }); | |
| }); | |
| // Generate mock results for demonstration | |
| function generateMockResults() { | |
| resultsGrid.innerHTML = ''; | |
| const mockResults = [ | |
| { name: 'Match #1', confidence: 92, source: 'Public Database' }, | |
| { name: 'Match #2', confidence: 87, source: 'Social Media' }, | |
| { name: 'Match #3', confidence: 78, source: 'Video Archive' }, | |
| { name: 'Match #4', confidence: 65, source: 'Public Database' }, | |
| { name: 'Match #5', confidence: 59, source: 'Video Archive' }, | |
| { name: 'Match #6', confidence: 45, source: 'Social Media' } | |
| ]; | |
| mockResults.forEach(result => { | |
| const resultCard = document.createElement('div'); | |
| resultCard.className = 'result-card'; | |
| // Generate random placeholder image URL | |
| const gender = Math.random() > 0.5 ? 'men' : 'women'; | |
| const randomId = Math.floor(Math.random() * 70) + 1; | |
| resultCard.innerHTML = ` | |
| <img src="https://randomuser.me/api/portraits/${gender}/${randomId}.jpg" alt="${result.name}" class="result-img"> | |
| <div class="result-info"> | |
| <h4>${result.name}</h4> | |
| <p>Source: ${result.source}</p> | |
| <p>Confidence: ${result.confidence}%</p> | |
| <div class="confidence-bar"> | |
| <div class="confidence-level" style="width: ${result.confidence}%"></div> | |
| </div> | |
| `; | |
| resultsGrid.appendChild(resultCard); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |