facezkp
Version:
Face analysis library with liveness detection, biometric template extraction, and fuzzy hashing for privacy-preserving identity verification.
79 lines (72 loc) • 2.71 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FaceZK - Advanced Face Analysis</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>FaceZK</h1>
<p>Advanced Face Analysis with Liveness Detection & Biometric Verification</p>
</div>
<div class="status-bar">
<div class="status-item" id="cameraStatus">
<span class="status-icon">📷</span>
<span class="status-text">Camera: Initializing...</span>
</div>
<div class="status-item" id="modelStatus">
<span class="status-icon">🧠</span>
<span class="status-text">Models: Loading...</span>
</div>
<div class="status-item" id="detectionStatus">
<span class="status-icon">👁️</span>
<span class="status-text">Detection: Waiting...</span>
</div>
<div class="status-item" id="performanceStatus">
<span class="status-icon">⚡</span>
<span class="status-text">FPS: --</span>
</div>
</div>
<div class="main-content">
<div class="video-container">
<video id="video" autoplay playsinline muted></video>
<canvas id="overlay"></canvas>
<div class="instructions" id="instructions">Position your face in the camera view</div>
<div id="spinner" class="spinner" style="display:none;"></div>
</div>
<div class="controls">
<button id="startBtn" class="btn-primary">Start Detection</button>
<button id="verifyBtn" class="btn-secondary" disabled>Verify Identity</button>
<button id="debugBtn" class="btn-secondary">Debug Mode</button>
</div>
<div id="result" class="result" aria-live="polite"></div>
</div>
<div id="debugPanel" class="debug-panel" style="display:none;">
<h3>Debug Information</h3>
<div id="debugInfo"></div>
</div>
<div class="performance-panel">
<div class="perf-item">
<span class="perf-label">Detection FPS:</span>
<span id="detectFPS" class="perf-value">--</span>
</div>
<div class="perf-item">
<span class="perf-label">Draw FPS:</span>
<span id="drawFPS" class="perf-value">--</span>
</div>
<div class="perf-item">
<span class="perf-label">Memory:</span>
<span id="memoryUsage" class="perf-value">--</span>
</div>
<div class="perf-item">
<span class="perf-label">Backend:</span>
<span id="backendInfo" class="perf-value">--</span>
</div>
</div>
</div>
<script type="module" src="main.js"></script>
</body>
</html>