Membangun Absensi Face AI dengan face-api.js & Laravel 12

Dalam sistem manajemen karyawan modern, kecurangan presensi atau yang populer disebut "titip absen" masih menjadi tantangan utama bagi tim HR. Salah satu solusi paling efektif untuk mengatasi masalah ini adalah dengan mengimplementasikan verifikasi berbasis pengenalan wajah (Face AI) dan lokasi geografis (GPS Geolocation).

Artikel ini akan membahas bagaimana sistem ForgeLenta HRIS memanfaatkan library open-source face-api.js untuk melakukan deteksi wajah secara real-time langsung di sisi klien (browser pengguna), dan mengirimkan deskriptor wajah ke backend Laravel 12 untuk diverifikasi.

Mengapa Memproses AI di Sisi Klien?

Secara tradisional, gambar wajah dari webcam akan dikirim langsung ke server untuk diproses menggunakan model AI (seperti Python OpenCV atau TensorFlow). Namun, pendekatan ini memiliki beberapa kelemahan besar:

Beban Server Tinggi: Memproses gambar video real-time dari ratusan karyawan secara bersamaan akan membebani CPU/GPU server secara eksponensial.
Bandwidth Boros: Mengirimkan gambar beresolusi tinggi terus-menerus ke server membutuhkan kuota internet yang besar.
Latensi Tinggi: Pengguna harus menunggu waktu upload gambar dan respon server sebelum dinyatakan berhasil check-in.

Dengan menggunakan face-api.js, seluruh pemrosesan neural network (deteksi wajah, pencarian koordinat landmark, dan ekstraksi fitur descriptor) dilakukan langsung di komputer/smartphone pengguna menggunakan WebGL. Server backend hanya menerima representasi numerik wajah (array berisi 128 angka float) untuk dibandingkan dengan data referensi yang tersimpan di database.

Langkah Implementasi

1. Inisialisasi face-api.js di Frontend (Alpine.js)

Kita menggunakan framework Alpine.js untuk membungkus logika kamera dan inisialisasi model di frontend:

import * as faceapi from 'face-api.js';

async function initFaceAI() {
  // Muat model face-api dari direktori public
  await faceapi.nets.tinyFaceDetector.loadFromUri('/models');
  await faceapi.nets.faceLandmark68Net.loadFromUri('/models');
  await faceapi.nets.faceRecognitionNet.loadFromUri('/models');
  
  // Akses kamera web pengguna
  const stream = await navigator.mediaDevices.getUserMedia({ video: {} });
  videoElement.srcObject = stream;
}

2. Mengambil Deskriptor Wajah (Face Descriptor)

Saat pengguna mengklik tombol "Check In", kita mendeteksi wajah tunggal di depan kamera dan mengekstrak facial signature uniknya:

async function captureFace() {
  const detection = await faceapi
    .detectSingleFace(videoElement, new faceapi.TinyFaceDetectorOptions())
    .withFaceLandmarks()
    .withFaceDescriptor();

  if (!detection) {
    alert("Wajah tidak terdeteksi! Pastikan pencahayaan cukup.");
    return;
  }

  // Ambil float32 array dari deskriptor wajah (128 dimensi)
  const faceDescriptor = Array.from(detection.descriptor);
  
  // Kirim ke backend Laravel
  sendAttendanceData(faceDescriptor);
}

3. Validasi di Backend Laravel 12

Di database, setiap karyawan memiliki satu deskriptor wajah acuan yang disimpan saat onboarding pertama kali (misalnya berupa JSON string). Saat presensi masuk, kita membandingkan deskriptor yang dikirim oleh klien dengan deskriptor acuan menggunakan rumus Euclidean Distance:

public function verifyFace(Request $request)
{
    $request->validate([
        'face_descriptor' => 'required|array|size:128',
    ]);

    $employee = Auth::user()->employee;
    $referenceDescriptor = json_decode($employee->face_descriptor_reference);

    $distance = $this->calculateEuclideanDistance(
        $request->face_descriptor, 
        $referenceDescriptor
    );

    // Threshold kecocokan umum adalah di bawah 0.6
    if ($distance < 0.5) {
        return response()->json(['status' => 'success', 'message' => 'Wajah cocok!']);
    }

    return response()->json(['status' => 'failed', 'message' => 'Wajah tidak dikenali!'], 422);
}

private function calculateEuclideanDistance($arr1, $arr2)
{
    $sum = 0.0;
    for ($i = 0; $i < 128; $i++) {
        $diff = $arr1[$i] - $arr2[$i];
        $sum += $diff * $diff;
    }
    return sqrt($sum);
}

Kesimpulan

Implementasi Face AI di sisi browser menggunakan face-api.js terbukti sangat efisien dalam menjaga kinerja server tetap ringan. Dikombinasikan dengan pencatatan lokasi GPS koordinat, modul absensi ForgeLenta HRIS mampu meminimalisasi potensi kecurangan presensi secara signifikan tanpa memerlukan server berspesifikasi GPU tinggi.

Membangun Absensi Face AI di Web: Integrasi face-api.js pada Laravel 12

Table of Contents