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 tempat terkenal wajah untuk Web

Tugas MediaPipe Face Landmarker memungkinkan Anda mendeteksi tanda wajah dan ekspresi wajah pada gambar dan video. Anda dapat menggunakan tugas ini untuk mengidentifikasi ekspresi wajah manusia, menggunakan filter dan efek wajah, serta membuat avatar virtual. Tugas ini menggunakan model machine learning (ML) yang dapat bekerja dengan gambar tunggal atau aliran data gambar. Tugas ini menghasilkan {i>landmark<i} wajah 3 dimensi, blendshape skor (koefisien yang mewakili ekspresi wajah) untuk menyimpulkan detail wajah muncul secara real-time, dan matriks transformasi untuk melakukan transformasi yang diperlukan untuk rendering efek.

Petunjuk ini menunjukkan cara menggunakan Penanda 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 Face Landmarker menyediakan implementasi lengkap tugas di JavaScript untuk referensi Anda. Kode ini membantu Anda menguji tugas ini dan mendapatkan mulai membangun aplikasi penanda wajah Anda sendiri. Anda dapat melihat, menjalankan, dan edit kode contoh Penanda Wajah hanya dengan menggunakan {i>browser<i} web.

Penyiapan

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

Paket JavaScript

Kode Landmark 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 MediaPipe Face Landmarker memerlukan model terlatih yang kompatibel dengan tugas Anda. Untuk mengetahui informasi selengkapnya tentang model terlatih yang tersedia untuk Face Landmarker, 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...() Face Landmarker 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 Face Landmarker dengan opsi konfigurasi. Untuk informasi selengkapnya, 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 faceLandmarker = await faceLandmarker.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
`running_mode`	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`
`numFaces`	Jumlah maksimum wajah yang dapat dideteksi oleh `FaceLandmarker`. Pemulusan hanya diterapkan saat `num_faces` disetel ke 1.	`Integer > 0`	`1`
`minFaceDetectionConfidence`	Skor keyakinan minimum deteksi wajah yang akan dianggap berhasil.	`Float [0.0,1.0]`	`0.5`
`minFacePresenceConfidence`	Skor keyakinan minimum untuk kehadiran wajah skor dalam deteksi penanda wajah.	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	Skor keyakinan minimum untuk pelacakan wajah untuk dianggap berhasil.	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	Apakah Face Landmarker menghasilkan bentuk perpaduan wajah. Bentuk campuran wajah digunakan untuk merender model wajah 3D.	`Boolean`	`False`
`outputFacialTransformationMatrixes`	Apakah FaceLandmarker menghasilkan output matriks transformasi. FaceLandmarker menggunakan matriks untuk mengubah {i>landmark<i} wajah dari model wajah kanonis ke yang terdeteksi, sehingga pengguna dapat menerapkan efek pada {i>landmark<i} yang terdeteksi.	`Boolean`	`False`

Menyiapkan data

Face Landmarker 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 mengenali wajah-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

Penanda Wajah menggunakan detect() (dengan mode lari IMAGE) dan Metode detectForVideo() (dengan mode berjalan VIDEO) yang akan dipicu inferensi. Tugas itu memproses data, mencoba membuat penanda wajah, dan kemudian melaporkan hasilnya.

Panggilan ke metode detect() dan detectForVideo() Face Landmarker 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 faceLandmarkerResult = faceLandmarker.detect(image);

Video

await faceLandmarker.setOptions({ runningMode: "VIDEO" });

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

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

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

Untuk implementasi yang lebih lengkap dalam menjalankan tugas Face Landmarker, lihat contoh kode.

Menangani dan menampilkan hasil

Face Landmarker menampilkan objek hasil untuk setiap deteksi akan dijalankan. Objek hasil berisi mesh wajah untuk setiap wajah yang terdeteksi, dengan koordinat untuk setiap penanda wajah. Secara opsional, objek hasil juga dapat mengandung bentuk gabungan, yang menunjukkan ekspresi wajah, dan matriks transformasi untuk menerapkan efek wajah pada {i>landmark<i} yang terdeteksi.

Berikut ini contoh data output dari tugas ini:

FaceLandmarkerResult:
  face_landmarks:
    NormalizedLandmark #0:
      x: 0.5971359014511108
      y: 0.485361784696579
      z: -0.038440968841314316
    NormalizedLandmark #1:
      x: 0.3302789330482483
      y: 0.29289937019348145
      z: -0.09489090740680695
    ... (478 landmarks for each face)
  face_blendshapes:
    browDownLeft: 0.8296722769737244
    browDownRight: 0.8096957206726074
    browInnerUp: 0.00035583582939580083
    browOuterUpLeft: 0.00035752105759456754
    ... (52 blendshapes for each face)
  facial_transformation_matrixes:
    [9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
    [1.66496094e-02,  9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
    ...

Gambar berikut menunjukkan visualisasi output tugas:

Kode contoh Face Landmarker menunjukkan cara menampilkan hasil yang ditampilkan dari tugas, lihat contoh kode