Memperkenalkan LiteRT: Runtime Google berperforma tinggi untuk AI di perangkat, yang sebelumnya dikenal sebagai TensorFlow Lite.

Halaman ini diterjemahkan oleh Cloud Translation API.

Panduan deteksi wajah untuk Web

Tugas Detektor Wajah MediaPipe memungkinkan Anda mendeteksi wajah dalam gambar atau video. Anda dapat menggunakan tugas ini untuk menemukan wajah dan fitur wajah dalam sebuah {i>frame<i}. Tugas ini menggunakan sebuah model machine learning (ML) yang berfungsi dengan gambar tunggal atau aliran data gambar. Tugas ini menghasilkan lokasi wajah, beserta hal berikut poin utama wajah: mata kiri, mata kanan, ujung hidung, mulut, tragion mata kiri, dan tragion mata kanan.

Petunjuk ini menunjukkan cara menggunakan Detektor Wajah untuk web dan JavaScript aplikasi. Untuk mengetahui informasi selengkapnya tentang kemampuan, model, dan konfigurasi opsi tugas ini, lihat Ringkasan.

Contoh kode

Kode contoh untuk Detektor Wajah memberikan implementasi lengkap dari deteksi ini tugas di JavaScript untuk referensi Anda. Kode ini membantu Anda menguji tugas ini dan mendapatkan mulai membangun aplikasi deteksi wajah Anda sendiri. Anda dapat melihat, menjalankan, dan edit kode contoh Detektor Wajah hanya dengan menggunakan {i>browser<i} web.

Penyiapan

Bagian ini menjelaskan langkah-langkah utama untuk menyiapkan lingkungan pengembangan khususnya untuk menggunakan Detektor Wajah. Untuk informasi umum tentang menyiapkan lingkungan pengembangan web dan JavaScript, termasuk persyaratan versi platform, lihat Panduan penyiapan untuk web.

Paket JavaScript

Kode Detektor Wajah tersedia melalui MediaPipe @mediapipe/tasks-vision NPM. Anda dapat temukan dan download library ini dengan mengikuti petunjuk di platform Panduan penyiapan.

Anda dapat menginstal paket yang diperlukan melalui NPM menggunakan perintah berikut:

npm install @mediapipe/tasks-vision

Jika Anda ingin mengimpor kode tugas melalui jaringan penayangan konten (CDN) tambahkan kode berikut di kolom <head> di file HTML Anda:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Model

Tugas Detektor Wajah MediaPipe memerlukan model terlatih yang kompatibel dengan tugas Anda. Untuk mengetahui informasi selengkapnya tentang model terlatih yang tersedia untuk Detektor Wajah, lihat ringkasan tugas bagian Model.

Pilih dan download model, lalu simpan dalam direktori project Anda:

<dev-project-root>/app/shared/models/

Membuat tugas

Gunakan salah satu fungsi createFrom...() Detektor Wajah untuk mempersiapkan tugas untuk menjalankan inferensi. Menggunakan createFromModelPath() dengan jalur relatif atau absolut ke file model terlatih. Jika model sudah dimuat ke dalam memori, Anda dapat menggunakan Metode createFromModelBuffer().

Contoh kode di bawah ini menunjukkan penggunaan fungsi createFromOptions() untuk menyiapkan tugas. Fungsi createFromOptions memungkinkan Anda menyesuaikan Detektor Wajah dengan opsi konfigurasi. Untuk informasi selengkapnya tentang konfigurasi opsi, lihat Opsi konfigurasi.

Kode berikut menunjukkan cara membangun dan mengonfigurasi tugas dengan opsi:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facedetector = await FaceDetector.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

Opsi konfigurasi

Tugas ini memiliki opsi konfigurasi berikut untuk Web dan JavaScript aplikasi:

Nama Opsi	Deskripsi	Rentang Nilai	Nilai Default
`option_var_1_web_js`	Menetapkan mode berjalan untuk tugas. Ada dua moda: IMAGE: Mode untuk input gambar tunggal. VIDEO: Mode untuk frame yang didekode video atau pada livestream data input, misalnya dari kamera.	{`IMAGE, VIDEO`}	`IMAGE`
`minDetectionConfidence`	Skor keyakinan minimum untuk deteksi wajah agar dianggap berhasil.	`Float [0,1]`	`0.5`
`minSuppressionThreshold`	Ambang batas penyembunyian non-maksimum minimum untuk deteksi wajah agar dianggap tumpang-tindih.	`Float [0,1]`	`0.3`

Menyiapkan data

Detektor Wajah dapat mendeteksi wajah dalam gambar dalam format apa pun yang didukung oleh {i>host<i} di browser web Anda. Tugas ini juga menangani pra-pemrosesan input data, termasuk pengubahan ukuran, rotasi, dan normalisasi nilai. Untuk mendeteksi wajah dalam video, Anda dapat menggunakan API untuk memproses satu frame dalam satu waktu dengan cepat, menggunakan stempel waktu dari {i>frame<i} untuk menentukan kapan munculnya wajah dalam video.

Menjalankan tugas

Detektor Wajah menggunakan detect() (dengan mode berjalan image) dan Metode detectForVideo() (dengan mode berjalan video) yang akan dipicu inferensi. Tugas itu memproses data, mencoba mendeteksi wajah, dan kemudian melaporkan hasilnya.

Panggilan ke metode detect() dan detectForVideo() Detektor Wajah berjalan secara sinkron dan memblokir thread antarmuka pengguna. Jika Anda mendeteksi wajah dalam bingkai video dari kamera perangkat, setiap deteksi memblokir . Anda dapat mencegah hal ini dengan menerapkan pekerja web untuk menjalankan detect() dan detectForVideo() pada thread lain.

Kode berikut menunjukkan cara mengeksekusi pemrosesan dengan model tugas:

Gambar

const image = document.getElementById("image") as HTMLImageElement;
const faceDetectorResult = faceDetector.detect(image);

Video

await faceDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = faceDetector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Untuk implementasi yang lebih lengkap dalam menjalankan tugas Detektor Wajah, lihat contoh kode.

Menangani dan menampilkan hasil

Detektor Wajah membuat objek hasil detektor wajah untuk setiap deteksi akan dijalankan. Objek hasil berisi wajah dalam koordinat gambar dan wajah di dunia pada koordinat tertentu.

Berikut ini contoh data output dari tugas ini:

FaceDetectionResult:
  Detections:
    Detection #0:
      BoundingBox:
        origin_x: 126
        origin_y: 100
        width: 463
        height: 463
      Categories:
        Category #0:
          index: 0
          score: 0.9729152917861938
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.18298381567001343
          y: 0.2961040139198303
        NormalizedKeypoint #1:
          x: 0.3302789330482483
          y: 0.29289937019348145
        ... (6 keypoints for each face)
    Detection #1:
      BoundingBox:
        origin_x: 616
        origin_y: 193
        width: 430
        height: 430
      Categories:
        Category #0:
          index: 0
          score: 0.9251380562782288
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.6151331663131714
          y: 0.3713381886482239
        NormalizedKeypoint #1:
          x: 0.7460576295852661
          y: 0.38825345039367676
        ... (6 keypoints for each face)

Gambar berikut menunjukkan visualisasi output tugas:

Untuk gambar tanpa kotak pembatas, lihat gambar asli.

Kode contoh Detektor Wajah menunjukkan cara menampilkan hasil yang ditampilkan dari tugas, lihat contoh kode