Spaces:
Sleeping
Sleeping
File size: 7,385 Bytes
d7c88b9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 | <!DOCTYPE html>
<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>
|