Spaces:
Sleeping
Sleeping
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Pengenalan Wajah - Sistem Pengenalan Wajah</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" /> | |
| <style> | |
| body { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| .card { | |
| border-radius: 15px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| border: none; | |
| } | |
| .video-container { | |
| position: relative; | |
| background: #000; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| #video { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .status-indicator { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background: rgba(0, 0, 0, 0.7); | |
| color: white; | |
| padding: 5px 10px; | |
| border-radius: 5px; | |
| font-size: 0.9rem; | |
| } | |
| .recognition-info { | |
| background: #f8f9fa; | |
| border-radius: 10px; | |
| padding: 20px; | |
| margin-top: 20px; | |
| } | |
| .navbar-brand { | |
| font-weight: bold; | |
| font-size: 1.5rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgba(0, 0, 0, 0.1)"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="/"> | |
| <i class="fas fa-user-check me-2"></i> | |
| Sistem Pengenalan Wajah | |
| </a> | |
| <a href="/" class="btn btn-outline-light"> | |
| <i class="fas fa-arrow-left me-2"></i> | |
| Kembali | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="container mt-5"> | |
| <div class="row justify-content-center"> | |
| <div class="col-md-10"> | |
| <div class="card"> | |
| <div class="card-header text-center bg-primary text-white"> | |
| <h2 class="mb-0"> | |
| <i class="fas fa-search me-2"></i> | |
| Pengenalan Wajah Real-time | |
| </h2> | |
| </div> | |
| <div class="card-body p-4"> | |
| <div class="row"> | |
| <div class="col-md-8"> | |
| <div class="video-container"> | |
| <img id="video" src="{{ url_for('recognition_feed') }}" alt="Recognition Stream" /> | |
| <div class="status-indicator"> | |
| <i class="fas fa-circle text-success me-2"></i> | |
| Live Recognition | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="recognition-info"> | |
| <h5> | |
| <i class="fas fa-info-circle me-2"></i> | |
| Informasi Pengenalan | |
| </h5> | |
| <p>Sistem sedang melakukan pengenalan wajah secara real-time. Wajah yang terdeteksi akan ditampilkan dengan kotak biru dan nama orang (jika dikenali).</p> | |
| <div class="mt-4"> | |
| <h6> | |
| <i class="fas fa-eye me-2"></i> | |
| Status Deteksi | |
| </h6> | |
| <div class="d-flex align-items-center mb-2"> | |
| <div class="badge bg-primary me-2">Kotak Biru</div> | |
| <small>Wajah terdeteksi</small> | |
| </div> | |
| <div class="d-flex align-items-center mb-2"> | |
| <div class="badge bg-success me-2">Nama + %</div> | |
| <small>Wajah dikenali</small> | |
| </div> | |
| <div class="d-flex align-items-center"> | |
| <div class="badge bg-warning me-2">Unknown</div> | |
| <small>Wajah tidak dikenali</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="alert alert-info mt-3"> | |
| <i class="fas fa-lightbulb me-2"></i> | |
| <strong>Tips:</strong> | |
| <ul class="mb-0 mt-2"> | |
| <li>Pastikan wajah menghadap kamera</li> | |
| <li>Gunakan pencahayaan yang cukup</li> | |
| <li>Jaga jarak yang tepat dari kamera</li> | |
| <li>Hindari gerakan yang terlalu cepat</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row justify-content-center mt-4"> | |
| <div class="col-md-10"> | |
| <div class="card"> | |
| <!-- <div class="card-body"> | |
| <h5 class="card-title"> | |
| <i class="fas fa-chart-line me-2"></i> | |
| Tingkat Akurasi | |
| </h5> | |
| <p>Persentase yang ditampilkan menunjukkan tingkat kepercayaan sistem terhadap pengenalan wajah:</p> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="text-center p-3 bg-success text-white rounded"> | |
| <h4>90-100%</h4> | |
| <small>Sangat Yakin</small> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="text-center p-3 bg-warning text-dark rounded"> | |
| <h4>70-89%</h4> | |
| <small>Cukup Yakin</small> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="text-center p-3 bg-danger text-white rounded"> | |
| <h4><70%</h4> | |
| <small>Tidak Yakin</small> | |
| </div> | |
| </div> | |
| </div> | |
| </div> --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| // Reload video stream jika ada error | |
| document.getElementById("video").addEventListener("error", function () { | |
| setTimeout(() => { | |
| this.src = this.src + "?t=" + new Date().getTime(); | |
| }, 1000); | |
| }); | |
| // Update timestamp setiap 30 detik untuk menjaga koneksi | |
| setInterval(() => { | |
| const video = document.getElementById("video"); | |
| const currentSrc = video.src.split("?")[0]; | |
| video.src = currentSrc + "?t=" + new Date().getTime(); | |
| }, 30000); | |
| </script> | |
| </body> | |
| </html> | |