Memperkenalkan LiteRT: Runtime Google berperforma tinggi untuk AI di perangkat, yang sebelumnya dikenal sebagai TensorFlow Lite.

Halaman ini diterjemahkan oleh Cloud Translation API.

Panduan segmentasi gambar untuk web

Tugas Segmentasi Gambar MediaPipe memungkinkan Anda membagi gambar ke dalam wilayah berdasarkan kategori untuk menerapkan efek visual seperti pemburaman latar belakang. Ini petunjuk menunjukkan cara menggunakan Image Segmenter untuk Node dan aplikasi web. Sebagai informasi lebih lanjut tentang kemampuan, model, dan opsi konfigurasi dari tugas ini, lihat Ringkasan.

Contoh kode

Kode contoh untuk Segmentasi Gambar menyediakan penerapan lengkap dari tugas di JavaScript untuk referensi Anda. Kode ini membantu Anda menguji tugas ini dan mulai membuat aplikasi segmentasi gambar Anda sendiri. Anda dapat melihat, menjalankan, dan edit Segmentasi Gambar 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 kode project secara khusus untuk menggunakan Segmentasi Gambar. 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 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 MediaPipe Image Segmenter memerlukan model terlatih yang kompatibel dengan tugas Anda. Untuk informasi selengkapnya tentang model terlatih yang tersedia untuk Segmentasi Gambar, 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 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 dengan opsi konfigurasi. Untuk informasi selengkapnya tentang tugas, konfigurasi, lihat Opsi konfigurasi.

Kode berikut menunjukkan cara membangun dan mengonfigurasi tugas dengan opsi:

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 penerapan yang lebih lengkap terkait 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
`outputCategoryMask`	Jika ditetapkan ke `True`, output akan menyertakan mask segmentasi sebagai gambar uint8, dengan setiap nilai piksel menunjukkan kategori pemenang dengan sejumlah nilai.	{`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 skor kategori kategori.	{`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
`resultListener`	Menetapkan pemroses hasil untuk menerima hasil segmentasi secara asinkron saat pembagi gambar berada dalam mode `LIVE_STREAM`. Hanya dapat digunakan saat mode lari disetel ke `LIVE_STREAM`	T/A	T/A

Menyiapkan data

Segmentasi Gambar 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() Segmentasi Gambar berjalan 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 menggunakan metode segment() dengan mode gambar dan Metode segmentForVideo() dengan mode video untuk memicu inferensi. Tujuan 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:

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 penerapan 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 setel saat Anda mengonfigurasi tugas.

Bagian berikut menunjukkan contoh data output dari tugas ini:

Tingkat keyakinan kategori

Gambar berikut menunjukkan visualisasi output tugas untuk suatu kategori masker untuk kepercayaan diri. Output samaran berisi nilai float antara [0, 1].

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

Nilai kategori

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

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

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