Panduan gaya wajah untuk Web

Tugas MediaPipe Face Stylizer memungkinkan Anda menerapkan gaya wajah ke wajah dalam gambar. Anda dapat menggunakan tugas ini untuk membuat avatar virtual dengan berbagai gaya.

Contoh kode yang dijelaskan dalam petunjuk ini tersedia di GitHub. Untuk mengetahui informasi selengkapnya tentang kemampuan, model, dan opsi konfigurasi tugas ini, lihat Ringkasan.

Contoh kode

Kode contoh untuk Face Stylizer menyediakan implementasi lengkap tugas ini dalam JavaScript sebagai referensi Anda. Kode ini membantu Anda menguji tugas ini dan mulai membuat aplikasi gaya wajah Anda sendiri. Anda dapat melihat, menjalankan, dan mengedit kode contoh Face Stylizer hanya menggunakan browser web.

Penyiapan

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

Paket JavaScript

Kode Stylizer Wajah tersedia melalui paket @mediapipe/tasks-vision NPM MediaPipe. Anda dapat menemukan dan mendownload library ini dengan mengikuti petunjuk di Panduan penyiapan platform.

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

npm install @mediapipe/tasks-vision

Jika Anda ingin mengimpor kode tugas dengan layanan jaringan penayangan konten (CDN), tambahkan kode berikut pada tag <head> di file HTML:

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

Model

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

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

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

Membuat tugas

Gunakan salah satu fungsi createFrom...() Stylizer Wajah untuk menyiapkan tugas untuk menjalankan inferensi. Gunakan fungsi createFromModelPath() dengan jalur relatif atau absolut ke file model yang dilatih. Jika model sudah dimuat ke dalam memori, Anda dapat menggunakan metode createFromModelBuffer().

Contoh kode di bawah menunjukkan penggunaan fungsi createFromOptions() untuk menyiapkan tugas. Fungsi createFromOptions memungkinkan Anda menyesuaikan Pengatur Wajah dengan opsi konfigurasi.

Kode berikut menunjukkan cara mem-build dan mengonfigurasi tugas dengan opsi kustom:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facestylizer = await FaceStylizer.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_stylizer/blaze_face_stylizer/float32/latest/face_stylizer_color_sketch.task"
      },
    });

Menyiapkan data

Stylizer Wajah dapat menyesuaikan gaya wajah dalam gambar dalam format apa pun yang didukung oleh browser host. Tugas ini juga menangani pra-pemrosesan input data, termasuk pengubahan ukuran, rotasi, dan normalisasi nilai.

Menjalankan tugas

Stylizer Wajah menggunakan metode stylize() untuk memicu inferensi. Tugas ini akan memproses data, mencoba menyesuaikan gaya wajah, lalu melaporkan hasilnya. Panggilan ke metode stylize() Stylizer Wajah berjalan secara sinkron dan memblokir thread antarmuka pengguna.

Kode berikut menunjukkan cara mengeksekusi pemrosesan dengan model tugas:

const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);

Menangani dan menampilkan hasil

Stylizer Wajah menampilkan objek MPImage dengan gaya wajah yang paling terlihat dalam gambar input.

Berikut ini contoh data output dari tugas ini:

Output di atas dibuat dengan menerapkan model Sketsa warna ke gambar input berikut: