Tugas MediaPipe Interactive Image Segmenter mengambil lokasi dalam gambar, memperkirakan batas objek di lokasi tersebut, dan menampilkan segmentasi untuk objek sebagai data gambar. Petunjuk ini menunjukkan cara menggunakan Interactive Image Segmenter untuk Node dan aplikasi web. Untuk mengetahui informasi selengkapnya tentang kemampuan, model, dan opsi konfigurasi tugas ini, lihat Ringkasan.
Contoh kode
Kode contoh untuk Interactive Image Segmenter menyediakan penerapan lengkap tugas ini dalam JavaScript sebagai referensi Anda. Kode ini membantu Anda menguji tugas tersebut dan memulai membangun aplikasi segmentasi gambar interaktif Anda sendiri. Anda dapat melihat, menjalankan, dan mengedit kode contoh Interactive Image Segmenter hanya menggunakan browser web Anda. 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 khusus untuk menggunakan Interactive Image Segmenter. Untuk 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 NPM @mediapipe/tasks-vision
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 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 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 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...()
Interactive Image Segmenter guna
menyiapkan tugas untuk 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
Segmentasi Gambar Interaktif dengan opsi konfigurasi. Untuk mengetahui informasi selengkapnya tentang opsi
konfigurasi, lihat Opsi konfigurasi.
Kode berikut menunjukkan cara mem-build 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 ditetapkan ke True , output-nya akan menyertakan mask segmentasi sebagai gambar uint8, dengan setiap nilai piksel menunjukkan apakah piksel tersebut merupakan 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 float, dengan setiap nilai float mewakili keyakinan bahwa piksel adalah bagian dari objek yang terletak di area yang diinginkan. |
{True, False } |
True |
displayNamesLocale |
Menetapkan bahasa label yang akan digunakan untuk nama tampilan yang diberikan dalam
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
Segmentasi Gambar Interaktif dapat mengelompokkan objek pada gambar dalam format apa pun yang didukung oleh browser host. Tugas ini juga menangani pra-pemrosesan input data, termasuk mengubah ukuran, rotasi, dan normalisasi nilai.
Panggilan ke metode segment()
dan segmentForVideo()
Interactive Image Segmenter berjalan
secara sinkron dan memblokir thread antarmuka pengguna. Jika Anda mengelompokkan objek dalam
frame video dari kamera perangkat, setiap tugas segmentasi akan memblokir thread
utama. Anda dapat mencegah hal ini dengan mengimplementasikan pekerja web untuk menjalankan segment()
dan segmentForVideo()
di thread lain.
Menjalankan tugas
Interactive Image Segmenter menggunakan metode segment()
untuk memicu inferensi. Interactive Image Segmenter 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 implementasi yang lebih lengkap dalam menjalankan tugas Interactive Image Segmenter, lihat contoh kode.
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 mengonfigurasi tugas.
Bagian berikut menjelaskan lebih lanjut data output dari tugas ini:
Mask kategori
Gambar berikut menunjukkan visualisasi output tugas untuk value mask
kategori dengan area lokasi menarik yang ditunjukkan. Setiap piksel adalah nilai uint8
yang menunjukkan apakah piksel tersebut merupakan bagian dari objek yang terletak di area
minat. Lingkaran hitam putih pada gambar kedua menunjukkan area minat yang dipilih.
Output mask kategori dan gambar asli. Gambar sumber dari set data Pascal VOC 2012.
Topeng kepercayaan diri
Output untuk trust mask 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 pada area minat.
Kode contoh Segmentasi Gambar Interaktif menunjukkan cara menampilkan hasil klasifikasi yang ditampilkan dari tugas. Lihat contoh kode untuk mengetahui detailnya.