Panduan segmentasi gambar interaktif untuk web

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

Contoh kode

Kode contoh untuk Segmentasi Gambar Interaktif menyediakan implementasi lengkap tugas 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 Segmentasi Gambar Interaktif kode contoh hanya dengan menggunakan {i>browser<i} web. Anda juga dapat meninjau kode untuk contoh ini di GitHub.

Penyiapan

Bagian ini menjelaskan langkah-langkah utama untuk menyiapkan lingkungan pengembangan dan membuat kode project secara khusus untuk menggunakan Interactive 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 Segmentasi Gambar Interaktif tersedia melalui MediaPipe @mediapipe/tasks-vision NPM. Anda dapat menemukan dan mendownload library ini dari link yang disediakan dalam platform Panduan penyiapan.

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 jaringan penayangan konten (CDN) tambahan, tambahkan kode berikut dalam tag di file HTML Anda:

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

Model

Tugas Segmentasi Gambar Interaktif MediaPipe memerlukan model terlatih yang kompatibel dengan tugas Anda. Untuk informasi selengkapnya tentang model terlatih yang tersedia untuk Segmentasi Gambar Interaktif, 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...() Segmentasi Gambar Interaktif 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 Segmentasi Gambar Interaktif dengan opsi konfigurasi. Untuk informasi selengkapnya tentang konfigurasi opsi, lihat Opsi konfigurasi.

Kode berikut menunjukkan cara membangun dan mengonfigurasi tugas dengan opsi:

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 ditetapkan ke `True`, output akan menyertakan mask segmentasi sebagai gambar uint8, di mana setiap nilai piksel menunjukkan apakah piksel tersebut adalah bagian dari objek yang terletak di area yang diinginkan.	{`True, False`}	`False`
`outputConfidenceMasks`	Jika ditetapkan ke `True`, output akan menyertakan mask segmentasi sebagai gambar nilai {i>float<i}, dengan setiap nilai {i>float<i} mewakili tingkat keyakinan bahwa piksel adalah bagian dari objek yang terletak di area yang diinginkan.	{`True, False`}	`True`
`displayNamesLocale`	Menyetel bahasa label yang akan digunakan untuk nama tampilan yang diberikan di metadata model tugas, jika tersedia. Defaultnya adalah `en` untuk Bahasa Inggris. Anda dapat menambahkan label yang dilokalkan ke metadata model kustom menggunakan TensorFlow Lite Metadata Writer API	Kode lokal	id

Menyiapkan data

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

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

Menjalankan tugas

Segmentasi Gambar Interaktif menggunakan metode segment() untuk memicu inferensi. Tujuan Interactive Image Segmenter menampilkan segmen yang terdeteksi sebagai data gambar ke callback fungsi 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);