Panduan segmentasi gambar untuk web

Tugas MediaPipe Image Segmenter memungkinkan Anda membagi gambar menjadi beberapa area berdasarkan kategori yang telah ditentukan untuk menerapkan efek visual seperti pemburaman latar belakang. Petunjuk ini menunjukkan cara menggunakan Image Segmenter untuk aplikasi Node dan web. Untuk mengetahui informasi selengkapnya tentang kemampuan, model, dan opsi konfigurasi tugas ini, lihat Ringkasan.

Contoh kode

Kode contoh untuk Image Segmenter memberikan implementasi lengkap tugas ini dalam JavaScript untuk referensi Anda. Kode ini membantu Anda menguji tugas ini dan mulai mem-build aplikasi segmentasi gambar Anda sendiri. Anda dapat melihat, menjalankan, dan mengedit kode contoh Image Segmenter hanya menggunakan browser web. Anda juga dapat meninjau kode untuk contoh ini di GitHub.

Penyiapan

Bagian ini menjelaskan langkah-langkah utama untuk menyiapkan lingkungan pengembangan dan project kode Anda secara khusus untuk menggunakan Image Segmenter. Untuk informasi umum tentang menyiapkan lingkungan pengembangan untuk menggunakan tugas MediaPipe, termasuk persyaratan versi platform, lihat Panduan penyiapan untuk web.

Paket JavaScript

Kode Image Segmenter tersedia melalui paket @mediapipe/tasks-vision NPM MediaPipe. Anda dapat menemukan dan mendownload library ini dari link yang disediakan di Panduan penyiapan platform.

Anda dapat menginstal paket yang diperlukan dengan kode berikut untuk staging lokal menggunakan perintah berikut:

npm install --save @mediapipe/tasks-vision

Jika Anda ingin mengimpor kode tugas melalui layanan jaringan penayangan konten (CDN), tambahkan kode berikut di tag dalam file HTML Anda:

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Model

Tugas MediaPipe Image Segmenter memerlukan model terlatih yang kompatibel dengan tugas ini. Untuk informasi selengkapnya tentang model terlatih yang tersedia untuk Image Segmenter, 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...() Image Segmenter untuk menyiapkan tugas guna menjalankan inferensi. Gunakan fungsi createFromModelPath() dengan jalur relatif atau absolut ke file model yang telah 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 Image Segmenter dengan opsi konfigurasi. Untuk mengetahui informasi selengkapnya tentang konfigurasi tugas, lihat Opsi konfigurasi.

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

runningMode = "IMAGE";

async function createImageSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

Untuk implementasi yang lebih lengkap dalam membuat tugas Image Segmenter, lihat contoh kode.

Opsi konfigurasi

Tugas ini memiliki opsi konfigurasi berikut untuk aplikasi Web:

Nama Opsi Deskripsi Rentang Nilai Nilai Default
outputCategoryMask Jika ditetapkan ke True, output akan menyertakan mask segmentasi sebagai gambar uint8, dengan setiap nilai piksel menunjukkan nilai kategori pemenang. {True, False} False
outputConfidenceMasks Jika ditetapkan ke True, output akan menyertakan mask segmentasi sebagai gambar nilai float, dengan setiap nilai float mewakili peta skor keyakinan kategori. {True, False} True
displayNamesLocale Menetapkan bahasa label yang akan digunakan untuk nama tampilan yang diberikan dalam metadata model tugas, jika tersedia. Default-nya adalah en untuk bahasa Inggris. Anda dapat menambahkan label yang dilokalkan ke metadata model kustom menggunakan TensorFlow Lite Metadata Writer API Kode lokalitas id
resultListener Menetapkan pemroses hasil untuk menerima hasil segmentasi secara asinkron saat pemisah gambar berada dalam mode LIVE_STREAM. Hanya dapat digunakan jika mode berjalan disetel ke LIVE_STREAM T/A T/A

Menyiapkan data

Image Segmenter dapat menyegmentasikan objek dalam gambar dalam format apa pun yang didukung oleh browser host. Tugas ini juga menangani prapemrosesan input data, termasuk perubahan ukuran, rotasi, dan normalisasi nilai.

Panggilan ke metode segment() dan segmentForVideo() Image Segmenter berjalan secara sinkron dan memblokir thread antarmuka pengguna. Jika Anda menyegmentasikan objek dalam frame video dari kamera perangkat, setiap tugas segmentasi akan memblokir thread utama. Anda dapat mencegah hal ini dengan menerapkan pekerja web untuk menjalankan segment() dan segmentForVideo() di thread lain.

Menjalankan tugas

Image Segmenter menggunakan metode segment() dengan mode gambar dan metode segmentForVideo() dengan mode video untuk memicu inferensi. Image Segmenter menampilkan segmen yang terdeteksi sebagai data gambar ke fungsi callback yang Anda tetapkan saat menjalankan inferensi untuk tugas.

Kode berikut menunjukkan cara menjalankan pemrosesan dengan model tugas:

GambarVideo
const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);
 
async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

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

Untuk implementasi yang lebih lengkap dalam menjalankan tugas Image Segmenter, lihat contoh kode.

Menangani dan menampilkan hasil

Setelah menjalankan inferensi, tugas Image Segmenter akan menampilkan data gambar segmen ke fungsi callback. Konten output bergantung pada outputType yang Anda tetapkan saat mengonfigurasi tugas.

Bagian berikut menunjukkan contoh data output dari tugas ini:

Keyakinan kategori

Gambar berikut menunjukkan visualisasi output tugas untuk mask keyakinan kategori. Output mask keyakinan berisi nilai float antara [0, 1].

Dua gadis menunggang kuda dan satu gadis berjalan di samping kuda Mask gambar yang menguraikan bentuk gadis dan kuda dari foto sebelumnya. Setengah kiri garis batas gambar diambil, tetapi setengah kanan gambar tidak diambil

Output mask keyakinan kategori dan gambar asli. Gambar sumber dari set data Pascal VOC 2012.

Nilai kategori

Gambar berikut menunjukkan visualisasi output tugas untuk mask nilai kategori. Rentang mask kategori adalah [0, 255] dan setiap nilai piksel mewakili indeks kategori pemenang dari output model. Indeks kategori pemenang memiliki skor tertinggi di antara kategori yang dapat dikenali model.

Dua gadis menunggang kuda dan satu gadis berjalan di samping kuda Mask gambar yang menguraikan bentuk gadis dan kuda dari gambar sebelumnya. Bentuk ketiga gadis dan kuda disamarkan dengan akurat

Output mask kategori dan gambar asli. Gambar sumber dari set data Pascal VOC 2012.

Kode contoh Image Segmenter menunjukkan cara menampilkan hasil segmentasi yang ditampilkan dari tugas, lihat contoh kode untuk mengetahui detailnya.