Panduan segmentasi gambar interaktif untuk web

Tugas MediaPipe Interactive Image Segmenter mengambil lokasi dalam gambar, memperkirakan batas-batas objek di lokasi tersebut, dan menampilkan segmentasi untuk objek sebagai data gambar. Petunjuk ini menunjukkan cara menggunakan Interactive Image Segmenter untuk aplikasi web dan Node. Untuk mengetahui informasi selengkapnya tentang kemampuan, model, dan opsi konfigurasi tugas ini, lihat Ringkasan.

Contoh kode

Contoh kode untuk Interactive Image Segmenter memberikan implementasi lengkap tugas ini di JavaScript untuk referensi Anda. Kode ini membantu Anda menguji tugas ini dan mulai membangun aplikasi segmentasi gambar interaktif Anda sendiri. Anda dapat melihat, menjalankan, dan mengedit contoh Segmentasi Gambar Interaktif hanya menggunakan browser web Anda.

Penyiapan

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

Paket JavaScript

Kode Interactive 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 penyiapan 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.mjs"
    crossorigin="anonymous"></script>
</head>

Model

Tugas MediaPipe Interactive Image Segmenter memerlukan model terlatih yang kompatibel dengan tugas ini. Untuk mengetahui informasi selengkapnya tentang model terlatih yang tersedia untuk Interactive Image Segmenter, lihat bagian Model di ringkasan tugas.

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

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

Buat tugas

Gunakan salah satu fungsi createFrom...() Interactive Image Segmenter untuk menyiapkan tugas untuk menjalankan inferensi. Gunakan fungsi createFromModelPath() dengan jalur relatif atau absolut ke file model terlatih. Jika model Anda 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 Interactive Image Segmenter dengan opsi konfigurasi. Untuk mengetahui informasi selengkapnya tentang opsi konfigurasi, lihat Opsi konfigurasi.

Kode berikut menunjukkan cara membuat dan mengonfigurasi tugas dengan opsi kustom:

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

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

Opsi konfigurasi

Tugas ini memiliki opsi konfigurasi berikut untuk aplikasi Web:

Nama Opsi Deskripsi Rentang Nilai Nilai Default
outputCategoryMask Jika disetel ke True, output akan menyertakan mask segmentasi sebagai gambar uint8, dengan setiap nilai piksel menunjukkan apakah piksel adalah bagian dari objek yang terletak di area yang diminati. {True, False} False
outputConfidenceMasks Jika disetel ke True, output mencakup mask segmentasi sebagai gambar nilai float, dengan setiap nilai float merepresentasikan keyakinan bahwa piksel adalah bagian dari objek yang terletak di area yang diminati. {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 lokal en

Menyiapkan data

Interactive Image Segmenter dapat menyegmentasikan objek 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.

Panggilan ke metode segment() dan segmentForVideo() Interactive 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.

Jalankan tugas

Interactive Image Segmenter menggunakan metode segment() untuk memicu inferensi. Segmentasi Gambar Interaktif menampilkan segmen yang terdeteksi sebagai data gambar ke fungsi callback yang Anda tetapkan saat menjalankan inferensi untuk tugas tersebut.

Kode berikut menunjukkan cara menjalankan pemrosesan dengan model tugas:

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);

Untuk penerapan yang lebih lengkap dalam menjalankan tugas Interactive Image Segmenter, lihat contoh.

Menangani dan menampilkan hasil

Setelah menjalankan inferensi, tugas Interactive Image Segmenter akan menampilkan data gambar segmen ke fungsi callback. Konten output adalah data gambar dan dapat mencakup mask kategori, mask keyakinan, atau keduanya, bergantung pada apa yang Anda tetapkan saat Anda mengonfigurasi tugas.

Bagian berikut menjelaskan lebih lanjut data output dari tugas ini:

Masker kategori

Gambar berikut menunjukkan visualisasi output tugas untuk mask nilai kategori dengan area titik yang ditandai sebagai area yang diminati. Setiap piksel adalah nilai uint8 yang menunjukkan apakah piksel merupakan bagian dari objek yang terletak di area yang diminati. Lingkaran hitam putih pada gambar kedua menunjukkan area minat yang dipilih.

Seekor berdiri di tengah tumpukan daun Bentuk yang digarisbawahi dari gambar sebelumnya

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

Masker keyakinan

Output untuk mask keyakinan berisi nilai float antara [0, 1] untuk setiap saluran input gambar. Nilai yang lebih tinggi menunjukkan keyakinan yang lebih tinggi bahwa piksel gambar adalah bagian dari objek yang terletak di area yang diminati.

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