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