Panduan klasifikasi gambar untuk Web

Tugas Pengklasifikasi Gambar MediaPipe memungkinkan Anda melakukan klasifikasi pada gambar. Anda dapat menggunakan tugas ini untuk mengidentifikasi apa yang direpresentasikan oleh gambar di antara serangkaian kategori yang ditentukan pada waktu pelatihan. Petunjuk ini menunjukkan cara menggunakan Pengklasifikasi Gambar untuk Node dan aplikasi web.

Anda dapat mengetahui cara kerja tugas ini dengan melihat demo. Untuk informasi selengkapnya tentang kemampuan, model, dan opsi konfigurasi tugas ini, lihat Ringkasan.

Contoh kode

Kode contoh untuk Pengklasifikasi Gambar menyediakan implementasi lengkap tugas ini di JavaScript sebagai referensi Anda. Kode ini membantu Anda menguji tugas ini dan mulai membangun aplikasi klasifikasi gambar Anda sendiri. Anda dapat melihat, menjalankan, dan mengedit kode contoh Pengklasifikasi Gambar hanya menggunakan browser web.

Penyiapan

Bagian ini menjelaskan langkah-langkah utama untuk menyiapkan lingkungan pengembangan dan mengkodekan project secara khusus untuk menggunakan Pengklasifikasi Gambar. 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 Pengklasifikasi Gambar 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 @mediapipe/tasks-vision

Jika Anda ingin mengimpor kode tugas melalui layanan jaringan penayangan konten (CDN), tambahkan kode berikut di tag di file HTML Anda:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Model

Tugas Pengklasifikasi Gambar MediaPipe memerlukan model terlatih yang kompatibel dengan tugas ini. Untuk mengetahui informasi selengkapnya tentang model terlatih yang tersedia untuk Pengklasifikasi 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...() Pengklasifikasi Gambar untuk menyiapkan tugas guna menjalankan inferensi. Gunakan fungsi createFromModelPath() dengan jalur relatif atau absolut ke file model yang 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 Pengklasifikasi Gambar dengan opsi konfigurasi. Untuk informasi selengkapnya tentang opsi konfigurasi, lihat Opsi konfigurasi.

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

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

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`
`displayNamesLocale`	Menyetel 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
`maxResults`	Menetapkan jumlah maksimum opsional dari hasil klasifikasi dengan skor tertinggi untuk ditampilkan. Jika < 0, semua hasil yang tersedia akan ditampilkan.	Semua angka positif	`-1`
`scoreThreshold`	Menetapkan nilai minimum skor prediksi yang menggantikan nilai yang diberikan dalam metadata model (jika ada). Hasil di bawah nilai ini ditolak.	Float mana pun	Tidak ditetapkan
`categoryAllowlist`	Menetapkan daftar opsional untuk nama kategori yang diizinkan. Jika tidak kosong, hasil klasifikasi yang nama kategorinya tidak ada dalam kumpulan ini akan difilter. Nama kategori duplikat atau yang tidak diketahui akan diabaikan. Opsi ini sama-sama bersifat eksklusif dengan `categoryDenylist` dan penggunaan keduanya akan menyebabkan error.	String apa pun	Tidak ditetapkan
`categoryDenylist`	Menetapkan daftar opsional nama kategori yang tidak diizinkan. Jika tidak kosong, hasil klasifikasi dengan nama kategori yang ada dalam kumpulan ini akan difilter. Nama kategori duplikat atau yang tidak diketahui akan diabaikan. Opsi ini sama eksklusif dengan `categoryAllowlist` dan penggunaan keduanya akan menghasilkan error.	String apa pun	Tidak ditetapkan
`resultListener`	Menetapkan pemroses hasil untuk menerima hasil klasifikasi secara asinkron saat Pengklasifikasi Gambar dalam mode live stream. Hanya dapat digunakan saat mode lari disetel ke `LIVE_STREAM`	T/A	Tidak ditetapkan

Menyiapkan data

Pengklasifikasi Gambar dapat mengklasifikasikan objek dalam gambar dalam format apa pun yang didukung oleh browser host. Tugas tersebut juga menangani prapemrosesan input data, termasuk perubahan ukuran, rotasi, dan normalisasi nilai.

Panggilan ke metode classify() dan classifyForVideo() Pengklasifikasi Gambar berjalan secara sinkron dan memblokir thread antarmuka pengguna. Jika Anda mengklasifikasikan objek dalam frame video dari kamera perangkat, setiap klasifikasi akan memblokir thread utama. Anda dapat mencegah hal ini dengan menerapkan pekerja web untuk menjalankan classify() dan classifyForVideo() di thread lain.

Menjalankan tugas

Pengklasifikasi Gambar menggunakan metode classify() dengan mode gambar dan metode classifyForVideo() dengan mode video untuk memicu inferensi. Image Classifier API akan menampilkan kemungkinan kategori untuk objek dalam gambar input.

Kode berikut menunjukkan cara mengeksekusi pemrosesan dengan model tugas:

Gambar

const image = document.getElementById("image") as HTMLImageElement;
const imageClassifierResult = imageClassifier.classify(image);

Video

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

Untuk implementasi yang lebih lengkap dalam menjalankan tugas Pengklasifikasi Gambar, lihat contoh kode).

Menangani dan menampilkan hasil

Setelah menjalankan inferensi, tugas Pengklasifikasi Gambar menampilkan objek ImageClassifierResult yang berisi daftar kategori yang memungkinkan untuk objek dalam gambar atau bingkai input.

Berikut ini contoh data output dari tugas ini:

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

Hasil ini diperoleh dengan menjalankan Bird Classifier di:

Kode contoh Pengklasifikasi Gambar menunjukkan cara menampilkan hasil klasifikasi yang ditampilkan dari tugas. Lihat contoh kode untuk mengetahui detailnya.