Cara Membuat Deteksi Wajah dengan face-api.js di React.js

Deteksi wajah adalah salah satu aplikasi menarik dari teknologi pemrosesan gambar dan pengenalan wajah. Dalam artikel ini, kita akan menggunakan face-api.js, sebuah pustaka JavaScript yang kuat untuk membangun aplikasi deteksi wajah sederhana dengan React.js. Mari mulai!

Prasyarat

Sebelum kita mulai, pastikan Anda telah mengatur proyek React.js dasar. Jika belum, Anda dapat membuatnya dengan perintah berikut:

npx create-react-app face-detection-app
cd face-detection-app

Selanjutnya, kita akan menginstal face-api.js:

npm install face-api.js

Membuat Komponen FaceDetection

Pertama-tama, kita akan membuat komponen FaceDetection yang akan menangani logika deteksi wajah dan tampilan. Buat file src/components/FaceDetection.js dan copy code di bawah ini.

import React, { useState } from 'react';
import * as faceapi from 'face-api.js';

const FaceDetection = () => {
  const [imageUrl, setImageUrl] = useState('');
  const [detections, setDetections] = useState([]);

  const loadModels = async () => {
    // Load face-api.js models
    await faceapi.nets.tinyFaceDetector.loadFromUri('/models');
    await faceapi.nets.faceLandmark68Net.loadFromUri('/models');
    await faceapi.nets.faceRecognitionNet.loadFromUri('/models');
  };

  const detectFaces = async () => {
    const image = document.getElementById('input-image');
    const detections = await faceapi.detectAllFaces(image).withFaceLandmarks().withFaceDescriptors();
    setDetections(detections);
  };

  const handleImageChange = (e) => {
    setImageUrl(URL.createObjectURL(e.target.files[0]));
  };

  return (
    <div>
      <h1>Deteksi Wajah</h1>
      <input type="file" accept="image/*" onChange={handleImageChange} />
      {imageUrl && <img id="input-image" src={imageUrl} alt="Input" crossOrigin="anonymous" onLoad={detectFaces} />}
      {detections.length > 0 && (
        <div>
          <h2>Wajah Terdeteksi:</h2>
          <ul>
            {detections.map((detection, i) => (
              <li key={i}>Wajah #{i + 1}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default FaceDetection;

Kode di atas adalah komponen React yang menggunakan face-api.js untuk melakukan deteksi wajah pada gambar yang diunggah oleh pengguna. Berikut ini penjelasan setiap bagian dari kode tersebut:

Import React, useState, dan faceapi: Ini adalah baris-baris pertama yang mengimpor modul yang diperlukan. useState digunakan untuk mengelola state komponen, sementara faceapi adalah pustaka JavaScript yang akan digunakan untuk deteksi wajah.

Komponen FaceDetection: Ini adalah komponen fungsional utama yang akan menampilkan formulir unggahan gambar dan hasil deteksi wajah.

State:

imageUrl adalah state yang digunakan untuk menyimpan URL gambar yang diunggah oleh pengguna.
detections adalah state yang akan menyimpan hasil deteksi wajah yang ditemukan pada gambar.

loadModels Function: Ini adalah fungsi asinkron yang digunakan untuk memuat model-model face-api.js. Model-model ini diperlukan untuk melakukan deteksi wajah.

detectFaces Function: Ini adalah fungsi asinkron yang akan dipanggil saat gambar selesai dimuat. Fungsi ini menggunakan face-api.js untuk mendeteksi wajah di dalam gambar. Hasil deteksi akan disimpan dalam state detections.

handleImageChange Function: Fungsi ini dipanggil saat pengguna memilih gambar dari perangkat mereka. Gambar tersebut diubah menjadi URL objek dan disimpan dalam state imageUrl.

Render Method:

Terdapat elemen HTML, termasuk judul h1 dan input file untuk memilih gambar.
Gambar yang dipilih ditampilkan jika imageUrl memiliki nilai. Ketika gambar ini dimuat (onLoad), detectFaces dipanggil untuk mendeteksi wajah di dalamnya.
Jika terdapat wajah yang terdeteksi (panjang array detections lebih dari 0). Hasil deteksi akan ditampilkan dalam bentuk daftar.

Dengan kode ini, Anda dapat membuat komponen React yang memungkinkan pengguna untuk mengunggah gambar dan mendeteksi wajah dalam gambar tersebut menggunakan face-api.js. Semua deteksi dan pemrosesan gambar terjadi pada sisi klien (di peramban pengguna).

Anda dapat memperluas fungsionalitas ini dengan menambahkan tindakan tambahan seperti menggambar kotak di sekitar wajah yang terdeteksi atau menambahkan informasi tambahan tentang wajah yang teridentifikasi.

Menambahkan CSS

Tambahkan beberapa gaya CSS ke dalam file src/App.css:

body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}

h1 {
  color: #333;
}

input {
  margin: 20px;
}

img {
  max-width: 100%;
  max-height: 400px;
  border: 2px solid #333;
}

Menggunakan Komponen FaceDetection

Selanjutnya, kita akan menggunakan komponen FaceDetection di dalam file src/App.js:

import React from 'react';
import './App.css';
import FaceDetection from './components/FaceDetection';

function App() {
  return (
    <div className="App">
      <FaceDetection />
    </div>
  );
}

export default App;

Menjalankan Aplikasi

Terakhir, jalankan aplikasi React.js dengan perintah:

npm start

Sekarang Anda dapat mengunggah gambar yang berisi wajah ke aplikasi Anda, dan face-api.js akan mendeteksi wajah-wajah tersebut.

Ini adalah tutorial dasar tentang cara membuat deteksi wajah dengan face-api.js di React.js. Anda dapat memodifikasinya dan menambahkan lebih banyak fitur, seperti menggambar kotak di sekitar wajah yang terdeteksi atau menghitung kemiripan antara wajah-wajah tersebut. Selamat mencoba!