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 Segmentasi Gambar untuk Node dan aplikasi web. Untuk mengetahui informasi selengkapnya tentang kemampuan, model, dan opsi konfigurasi tugas ini, lihat Ringkasan.
Contoh kode
Kode contoh untuk Image Segmenter menyediakan penerapan lengkap tugas ini dalam JavaScript sebagai referensi Anda. Kode ini membantu Anda menguji tugas ini dan memulai membangun aplikasi segmentasi gambar Anda sendiri. Anda dapat melihat, menjalankan, dan mengedit kode contoh Segmentasi Gambar 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 khusus untuk menggunakan 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 Segmentasi Gambar 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 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 Image Segmenter memerlukan model terlatih yang kompatibel dengan tugas ini. Untuk mengetahui informasi selengkapnya tentang model terlatih yang tersedia untuk Segmentasi Gambar, 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...() Segmentasi Image 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
Segmentasi Gambar dengan opsi konfigurasi. Untuk 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 dari pembuatan tugas Segmentasi Gambar, lihat contoh kode.
Opsi konfigurasi
Tugas ini memiliki opsi konfigurasi berikut untuk aplikasi Web:
| Nama Opsi | Deskripsi | Rentang Nilai | Nilai Default |
|---|---|---|---|
runningMode |
Menetapkan mode berjalan untuk tugas. Ada dua
mode: IMAGE: Mode untuk input gambar tunggal. VIDEO: Mode untuk frame video yang didekode atau pada livestream data input, seperti dari kamera. |
{IMAGE, VIDEO} |
IMAGE |
outputCategoryMask |
Jika ditetapkan ke True, output-nya akan menyertakan mask segmentasi sebagai gambar uint8, dengan setiap nilai piksel menunjukkan nilai kategori
yang menang. |
{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
dari kategori tersebut. |
{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 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() Segmentasi Gambar 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
Segmentasi Gambar 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:
Gambar
const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);
Video
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 Segmentasi Gambar, 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 trust mask berisi nilai float antara
[0, 1].
Output mask keyakinan kategori dan gambar asli. Gambar sumber dari set data Pascal VOC 2012.
Nilai kategori
Gambar berikut menunjukkan visualisasi output tugas untuk value mask
kategori. Rentang mask kategori adalah [0, 255] dan setiap nilai piksel
mewakili indeks kategori pemenang dari output model. Indeks kategori yang unggul memiliki skor tertinggi di antara kategori yang dapat dikenali model.
Output mask kategori dan gambar asli. Gambar sumber dari set data Pascal VOC 2012.
Kode contoh Segmentasi Gambar menunjukkan cara menampilkan hasil segmentasi yang ditampilkan dari tugas, lihat contoh kode untuk detailnya.