Spaces:
Sleeping
Sleeping
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Daftarkan Wajah Baru - Sistem Pengenalan Wajah</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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; | |
| } | |
| .btn-custom { | |
| border-radius: 25px; | |
| padding: 12px 30px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-custom:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .video-container { | |
| position: relative; | |
| background: #000; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| #video { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .form-control { | |
| border-radius: 10px; | |
| padding: 12px 15px; | |
| } | |
| .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-success text-white"> | |
| <h2 class="mb-0"> | |
| <i class="fas fa-user-plus me-2"></i> | |
| Daftarkan Wajah Baru | |
| </h2> | |
| </div> | |
| <div class="card-body p-4"> | |
| <div class="row"> | |
| <div class="col-md-8"> | |
| <div class="video-container mb-3"> | |
| <img id="video" src="{{ url_for('video_feed') }}" alt="Video Stream" /> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="mb-3"> | |
| <label for="nameInput" class="form-label"> | |
| <i class="fas fa-user me-2"></i> | |
| Nama Lengkap | |
| </label> | |
| <input type="text" class="form-control" id="nameInput" placeholder="Masukkan nama lengkap" required /> | |
| </div> | |
| <button type="button" class="btn btn-success btn-custom w-100 mb-3" id="captureBtn"> | |
| <i class="fas fa-camera me-2"></i> | |
| Ambil Foto | |
| </button> | |
| <div class="alert alert-info"> | |
| <i class="fas fa-info-circle me-2"></i> | |
| <strong>Petunjuk:</strong> | |
| <ul class="mb-0 mt-2"> | |
| <li>Pastikan wajah Anda terlihat jelas</li> | |
| <li>Posisikan wajah di tengah kamera</li> | |
| <li>Pastikan pencahayaan cukup</li> | |
| <li>Hanya satu wajah yang boleh terlihat</li> | |
| </ul> | |
| </div> | |
| <div id="messageArea"></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-question-circle me-2"></i> | |
| Tips untuk Hasil Terbaik | |
| </h5> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <ul> | |
| <li>Gunakan pencahayaan yang baik dan merata</li> | |
| <li>Hindari bayangan pada wajah</li> | |
| <li>Tatap langsung ke kamera</li> | |
| </ul> | |
| </div> | |
| <div class="col-md-6"> | |
| <ul> | |
| <li>Jangan gunakan kacamata hitam atau topi</li> | |
| <li>Pastikan tidak ada orang lain di frame</li> | |
| <li>Jaga ekspresi wajah yang natural</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| document.getElementById("captureBtn").addEventListener("click", function () { | |
| const name = document.getElementById("nameInput").value.trim(); | |
| const messageArea = document.getElementById("messageArea"); | |
| if (!name) { | |
| showMessage("Silakan masukkan nama terlebih dahulu!", "danger"); | |
| return; | |
| } | |
| // Disable button dan show loading | |
| this.disabled = true; | |
| this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Mengambil Foto...'; | |
| fetch("/capture_face", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| }, | |
| body: JSON.stringify({ name: name }), | |
| }) | |
| .then((response) => response.json()) | |
| .then((data) => { | |
| if (data.success) { | |
| showMessage(data.success, "success"); | |
| document.getElementById("nameInput").value = ""; | |
| } else { | |
| showMessage(data.error, "danger"); | |
| } | |
| }) | |
| .catch((error) => { | |
| showMessage("Terjadi kesalahan: " + error, "danger"); | |
| }) | |
| .finally(() => { | |
| // Re-enable button | |
| this.disabled = false; | |
| this.innerHTML = '<i class="fas fa-camera me-2"></i>Ambil Foto'; | |
| }); | |
| }); | |
| function showMessage(message, type) { | |
| const messageArea = document.getElementById("messageArea"); | |
| messageArea.innerHTML = ` | |
| <div class="alert alert-${type} alert-dismissible fade show"> | |
| <i class="fas fa-${type === "success" ? "check-circle" : "exclamation-circle"} me-2"></i> | |
| ${message} | |
| <button type="button" class="btn-close" data-bs-dismiss="alert"></button> | |
| </div> | |
| `; | |
| } | |
| // Enter key support | |
| document.getElementById("nameInput").addEventListener("keypress", function (e) { | |
| if (e.key === "Enter") { | |
| document.getElementById("captureBtn").click(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |