Upload 7 files

README.md

@@ -1,10 +1,148 @@
----
-title: Face Recognition
-emoji: 🐠
-colorFrom: blue
-colorTo: red
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Sistem Pengenalan Wajah Sederhana
+
+Website sederhana untuk melakukan pengenalan wajah menggunakan Python, Flask, dan OpenCV.
+
+## Fitur
+
+- **Registrasi Wajah**: Mendaftarkan wajah baru ke dalam database
+- **Pengenalan Wajah**: Mengidentifikasi wajah yang sudah terdaftar secara real-time
+- **Manajemen Data**: Melihat dan menghapus data wajah yang terdaftar
+- **Interface Web**: Antarmuka web yang user-friendly dengan Bootstrap
+
+## Teknologi yang Digunakan
+
+- Python 3.7+
+- Flask (Web Framework)
+- OpenCV (Computer Vision)
+- NumPy (Numerical Computing)
+- Bootstrap 5 (Frontend Framework)
+
+## Instalasi
+
+1. **Clone atau download proyek ini**
+
+2. **Install Python dependencies:**
+
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+3. **Pastikan kamera laptop/PC Anda berfungsi**
+
+## Cara Menjalankan
+
+1. **Jalankan aplikasi:**
+
+   ```bash
+   python app.py
+   ```
+
+2. **Buka browser dan akses:**
+   ```
+   http://localhost:5000
+   ```
+
+## Cara Penggunaan
+
+### 1. Mendaftarkan Wajah Baru
+
+- Klik tombol "Daftarkan Wajah Baru"
+- Masukkan nama lengkap
+- Posisikan wajah di depan kamera
+- Klik "Ambil Foto" ketika wajah sudah terlihat jelas
+- Pastikan hanya ada satu wajah dalam frame
+
+### 2. Pengenalan Wajah
+
+- Klik tombol "Pengenalan Wajah"
+- Sistem akan menampilkan video real-time dengan deteksi wajah
+- Wajah yang dikenali akan ditampilkan dengan nama dan persentase akurasi
+- Wajah yang tidak dikenali akan ditampilkan sebagai "Unknown"
+
+### 3. Mengelola Data Wajah
+
+- Di halaman utama, Anda dapat melihat semua wajah yang terdaftar
+- Klik tombol sampah untuk menghapus data wajah tertentu
+
+## Tips untuk Hasil Terbaik
+
+### Saat Registrasi:
+
+- Gunakan pencahayaan yang baik dan merata
+- Pastikan wajah menghadap langsung ke kamera
+- Hindari bayangan pada wajah
+- Jangan gunakan kacamata hitam atau topi
+- Pastikan tidak ada orang lain di dalam frame
+
+### Saat Pengenalan:
+
+- Jaga jarak yang tepat dari kamera
+- Hindari gerakan yang terlalu cepat
+- Pastikan pencahayaan konsisten dengan saat registrasi
+
+## Struktur Proyek
+
+```
+Pengenalan Wajah/
+├── app.py                 # Aplikasi utama Flask
+├── requirements.txt       # Dependencies Python
+├── README.md             # Dokumentasi proyek
+├── templates/            # Template HTML
+│   ├── index.html        # Halaman utama
+│   ├── register.html     # Halaman registrasi
+│   └── recognize.html    # Halaman pengenalan
+├── static/               # File statis (CSS, JS, images)
+└── face_data/           # Data wajah (dibuat otomatis)
+    ├── names.pkl        # Daftar nama terdaftar
+    └── [nama_orang]/    # Folder untuk setiap orang
+        └── *.jpg        # File gambar wajah
+```
+
+## Cara Kerja Sistem
+
+1. **Deteksi Wajah**: Menggunakan Haar Cascade Classifier dari OpenCV
+2. **Ekstraksi Fitur**: Menggunakan Local Binary Pattern Histogram (LBPH)
+3. **Pelatihan Model**: Model dilatih ulang setiap kali ada penambahan wajah baru
+4. **Pengenalan**: Sistem mencocokkan wajah dengan database yang ada
+
+## Troubleshooting
+
+### Kamera tidak berfungsi:
+
+- Pastikan kamera tidak digunakan oleh aplikasi lain
+- Coba restart aplikasi
+- Periksa permission kamera di sistem operasi
+
+### Wajah tidak terdeteksi:
+
+- Pastikan pencahayaan cukup
+- Coba ubah posisi atau jarak dari kamera
+- Pastikan wajah menghadap langsung ke kamera
+
+### Akurasi pengenalan rendah:
+
+- Daftarkan lebih banyak foto untuk orang yang sama
+- Pastikan kualitas foto registrasi baik
+- Gunakan pencahayaan yang konsisten
+
+## Limitasi
+
+- Sistem bekerja optimal dengan 1 wajah per frame
+- Membutuhkan pencahayaan yang cukup
+- Akurasi tergantung pada kualitas kamera dan kondisi pencahayaan
+- Performa menurun dengan jumlah wajah terdaftar yang sangat banyak
+
+## Pengembangan Lanjutan
+
+Sistem ini dapat dikembangkan lebih lanjut dengan:
+
+- Database yang lebih robust (SQLite/PostgreSQL)
+- Multiple foto per orang untuk akurasi yang lebih baik
+- Logging aktivitas pengenalan
+- API untuk integrasi dengan sistem lain
+- Autentikasi dan authorization
+- Deployment ke cloud platform
+
+## Lisensi
+
+Proyek ini dibuat untuk tujuan edukasi dan penelitian.

app.py

@@ -0,0 +1,220 @@
+from flask import Flask, render_template, request, Response, jsonify, redirect, url_for
+import cv2
+import os
+import numpy as np
+import pickle
+import base64
+from datetime import datetime
+
+app = Flask(__name__)
+
+# Konfigurasi
+FACE_DATA_DIR = 'face_data'
+FACE_CASCADE_PATH = cv2.data.haarcascades + 'haarcascade_frontalface_default.xml'
+
+# Pastikan direktori face_data ada
+if not os.path.exists(FACE_DATA_DIR):
+    os.makedirs(FACE_DATA_DIR)
+
+# Load face cascade
+face_cascade = cv2.CascadeClassifier(FACE_CASCADE_PATH)
+
+# Global variables
+camera = None
+face_recognizer = cv2.face.LBPHFaceRecognizer_create()
+is_trained = False
+
+def load_face_data():
+    """Load data wajah yang sudah disimpan"""
+    global is_trained
+    faces = []
+    labels = []
+    names = []
+    
+    if os.path.exists(os.path.join(FACE_DATA_DIR, 'names.pkl')):
+        with open(os.path.join(FACE_DATA_DIR, 'names.pkl'), 'rb') as f:
+            names = pickle.load(f)
+    
+    for idx, name in enumerate(names):
+        face_dir = os.path.join(FACE_DATA_DIR, name)
+        if os.path.exists(face_dir):
+            for filename in os.listdir(face_dir):
+                if filename.endswith('.jpg'):
+                    img_path = os.path.join(face_dir, filename)
+                    img = cv2.imread(img_path, cv2.IMREAD_GRAYSCALE)
+                    faces.append(img)
+                    labels.append(idx)
+    
+    if faces:
+        face_recognizer.train(faces, np.array(labels))
+        is_trained = True
+        return names
+    
+    return []
+
+def get_camera():
+    """Inisialisasi kamera"""
+    global camera
+    if camera is None:
+        camera = cv2.VideoCapture(0)
+    return camera
+
+@app.route('/')
+def index():
+    """Halaman utama"""
+    names = load_face_data()
+    return render_template('index.html', registered_faces=names)
+
+@app.route('/register')
+def register():
+    """Halaman registrasi wajah baru"""
+    return render_template('register.html')
+
+@app.route('/recognize')
+def recognize():
+    """Halaman pengenalan wajah"""
+    return render_template('recognize.html')
+
+@app.route('/video_feed')
+def video_feed():
+    """Stream video untuk registrasi"""
+    def generate():
+        camera = get_camera()
+        while True:
+            success, frame = camera.read()
+            if not success:
+                break
+            
+            # Convert frame ke format yang bisa dikirim
+            ret, buffer = cv2.imencode('.jpg', frame)
+            frame = buffer.tobytes()
+            yield (b'--frame\r\n'
+                   b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
+    
+    return Response(generate(), mimetype='multipart/x-mixed-replace; boundary=frame')
+
+@app.route('/recognition_feed')
+def recognition_feed():
+    """Stream video untuk pengenalan wajah"""
+    def generate():
+        camera = get_camera()
+        names = load_face_data()
+        
+        while True:
+            success, frame = camera.read()
+            if not success:
+                break
+            
+            gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+            faces = face_cascade.detectMultiScale(gray, 1.3, 5)
+            
+            for (x, y, w, h) in faces:
+                cv2.rectangle(frame, (x, y), (x+w, y+h), (255, 0, 0), 2)
+                
+                if is_trained and names:
+                    roi_gray = gray[y:y+h, x:x+w]
+                    roi_gray = cv2.resize(roi_gray, (100, 100))
+                    
+                    id_, confidence = face_recognizer.predict(roi_gray)
+                    
+                    if confidence < 100:  # Threshold untuk confidence
+                        name = names[id_]
+                        confidence_text = f"{name} ({round(100-confidence)}%)"
+                    else:
+                        confidence_text = "Unknown"
+                    
+                    cv2.putText(frame, confidence_text, (x, y-10), 
+                              cv2.FONT_HERSHEY_SIMPLEX, 0.8, (255, 255, 255), 2)
+            
+            ret, buffer = cv2.imencode('.jpg', frame)
+            frame = buffer.tobytes()
+            yield (b'--frame\r\n'
+                   b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
+    
+    return Response(generate(), mimetype='multipart/x-mixed-replace; boundary=frame')
+
+@app.route('/capture_face', methods=['POST'])
+def capture_face():
+    """Capture wajah untuk registrasi"""
+    name = request.json.get('name', '').strip()
+    
+    if not name:
+        return jsonify({'error': 'Nama tidak boleh kosong'})
+    
+    camera = get_camera()
+    success, frame = camera.read()
+    
+    if not success:
+        return jsonify({'error': 'Gagal mengambil gambar dari kamera'})
+    
+    gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+    faces = face_cascade.detectMultiScale(gray, 1.3, 5)
+    
+    if len(faces) == 0:
+        return jsonify({'error': 'Tidak ada wajah yang terdeteksi'})
+    
+    if len(faces) > 1:
+        return jsonify({'error': 'Terdeteksi lebih dari satu wajah'})
+    
+    # Ambil wajah pertama
+    (x, y, w, h) = faces[0]
+    face_roi = gray[y:y+h, x:x+w]
+    face_roi = cv2.resize(face_roi, (100, 100))
+    
+    # Buat direktori untuk nama ini
+    person_dir = os.path.join(FACE_DATA_DIR, name)
+    if not os.path.exists(person_dir):
+        os.makedirs(person_dir)
+    
+    # Simpan gambar wajah
+    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+    filename = f"{timestamp}.jpg"
+    cv2.imwrite(os.path.join(person_dir, filename), face_roi)
+    
+    # Update daftar nama
+    names_file = os.path.join(FACE_DATA_DIR, 'names.pkl')
+    if os.path.exists(names_file):
+        with open(names_file, 'rb') as f:
+            names = pickle.load(f)
+    else:
+        names = []
+    
+    if name not in names:
+        names.append(name)
+        with open(names_file, 'wb') as f:
+            pickle.dump(names, f)
+    
+    # Retrain model
+    load_face_data()
+    
+    return jsonify({'success': f'Wajah {name} berhasil didaftarkan'})
+
+@app.route('/delete_face/<name>')
+def delete_face(name):
+    """Hapus data wajah"""
+    person_dir = os.path.join(FACE_DATA_DIR, name)
+    
+    if os.path.exists(person_dir):
+        # Hapus semua file di direktori
+        for filename in os.listdir(person_dir):
+            os.remove(os.path.join(person_dir, filename))
+        os.rmdir(person_dir)
+        
+        # Update daftar nama
+        names_file = os.path.join(FACE_DATA_DIR, 'names.pkl')
+        if os.path.exists(names_file):
+            with open(names_file, 'rb') as f:
+                names = pickle.load(f)
+            
+            if name in names:
+                names.remove(name)
+                with open(names_file, 'wb') as f:
+                    pickle.dump(names, f)
+        
+        # Retrain model
+        load_face_data()
+    
+    return redirect(url_for('index'))
+
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=5000)

face_data/names.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ec0a6ccf9debf1c16781445c4b9106080d00478b0559469336db7c7b7b9711c8
+size 5

requirements.txt

@@ -0,0 +1,7 @@
+Flask==2.3.3
+opencv-python==4.8.1.78
+opencv-contrib-python==4.8.1.78
+numpy==1.24.3
+Pillow==10.0.1
+fastapi
+uvicorn[standard]

templates/index.html

@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="id">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>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;
+      }
+      .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);
+      }
+      .face-list {
+        max-height: 300px;
+        overflow-y: auto;
+      }
+      .face-item {
+        background: #f8f9fa;
+        border-radius: 10px;
+        margin-bottom: 10px;
+        padding: 15px;
+        border-left: 4px solid #667eea;
+      }
+      .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>
+      </div>
+    </nav>
+
+    <div class="container mt-5">
+      <div class="row justify-content-center">
+        <div class="col-md-8">
+          <div class="card">
+            <div class="card-header text-center bg-primary text-white">
+              <h2 class="mb-0">
+                <i class="fas fa-home me-2"></i>
+                Dashboard Utama
+              </h2>
+            </div>
+            <div class="card-body p-5">
+              <div class="text-center mb-4">
+                <p class="lead">Selamat datang di sistem pengenalan wajah sederhana!</p>
+              </div>
+
+              <div class="row mb-4">
+                <div class="col-md-6 mb-3">
+                  <a href="/register" class="btn btn-success btn-custom w-100">
+                    <i class="fas fa-user-plus me-2"></i>
+                    Daftarkan Wajah Baru
+                  </a>
+                </div>
+                <div class="col-md-6 mb-3">
+                  <a href="/recognize" class="btn btn-primary btn-custom w-100">
+                    <i class="fas fa-search me-2"></i>
+                    Pengenalan Wajah
+                  </a>
+                </div>
+              </div>
+
+              <div class="mt-5">
+                <h4 class="mb-3">
+                  <i class="fas fa-users me-2"></i>
+                  Wajah Terdaftar ({{ registered_faces|length }})
+                </h4>
+
+                {% if registered_faces %}
+                <div class="face-list">
+                  {% for name in registered_faces %}
+                  <div class="face-item d-flex justify-content-between align-items-center">
+                    <div>
+                      <i class="fas fa-user me-2 text-primary"></i>
+                      <strong>{{ name }}</strong>
+                    </div>
+                    <a href="/delete_face/{{ name }}" class="btn btn-danger btn-sm" onclick="return confirm('Apakah Anda yakin ingin menghapus {{ name }}?')">
+                      <i class="fas fa-trash"></i>
+                    </a>
+                  </div>
+                  {% endfor %}
+                </div>
+                {% else %}
+                <div class="alert alert-info">
+                  <i class="fas fa-info-circle me-2"></i>
+                  Belum ada wajah yang terdaftar. Silakan daftarkan wajah baru terlebih dahulu.
+                </div>
+                {% endif %}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- <div class="row justify-content-center mt-4">
+        <div class="col-md-8">
+          <div class="card">
+            <div class="card-body">
+              <h5 class="card-title">
+                <i class="fas fa-info-circle me-2"></i>
+                Cara Penggunaan
+              </h5>
+              <ol>
+                <li><strong>Daftarkan Wajah Baru:</strong> Klik tombol "Daftarkan Wajah Baru" untuk menambahkan wajah ke database</li>
+                <li><strong>Pengenalan Wajah:</strong> Klik tombol "Pengenalan Wajah" untuk mengidentifikasi wajah yang sudah terdaftar</li>
+                <li><strong>Hapus Data:</strong> Gunakan tombol sampah untuk menghapus data wajah yang tidak diperlukan</li>
+              </ol>
+            </div>
+          </div>
+        </div>
+      </div> -->
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>

templates/recognize.html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<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>&lt;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>

templates/register.html

@@ -0,0 +1,207 @@
+<!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/[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;
+      }
+      .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/[email protected]/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>