Tugas MediaPipe Object Detector memungkinkan Anda mendeteksi kehadiran dan lokasi beberapa objek tertentu. Tugas ini mengambil data gambar dan menghasilkan daftar deteksi hasil, masing-masing mewakili objek yang diidentifikasi dalam gambar. Contoh kode yang dijelaskan dalam petunjuk ini tersedia di CodePen.
Anda dapat melihat 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 Detektor Objek memberikan implementasi lengkap dari tugas di JavaScript untuk referensi Anda. Kode ini membantu Anda menguji tugas ini dan mulai membangun aplikasi klasifikasi teks Anda sendiri. Anda dapat melihat, menjalankan, dan edit kode contoh Detektor Objek hanya dengan menggunakan {i>browser<i} web.
Penyiapan
Bagian ini menjelaskan langkah-langkah utama untuk menyiapkan lingkungan pengembangan khususnya untuk menggunakan Object Detector. Untuk informasi umum tentang menyiapkan lingkungan pengembangan web dan JavaScript, termasuk persyaratan versi platform, lihat Panduan penyiapan untuk web.
Paket JavaScript
Kode Pendeteksi Objek tersedia melalui MediaPipe @mediapipe/tasks-vision
NPM. Anda dapat
temukan dan download library ini dengan mengikuti petunjuk di platform
Panduan penyiapan.
Anda dapat menginstal paket yang diperlukan melalui NPM menggunakan perintah berikut:
npm install @mediapipe/tasks-vision
Jika Anda ingin mengimpor kode tugas melalui jaringan penayangan konten (CDN)
layanan, tambahkan kode berikut dalam tag <head> 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 Detektor Objek MediaPipe memerlukan model terlatih yang kompatibel dengan tugas Anda. Untuk mengetahui informasi selengkapnya tentang model terlatih yang tersedia untuk Detektor Objek, lihat ringkasan tugas di bagian Model.
Pilih dan download model, lalu simpan dalam direktori project Anda:
<dev-project-root>/app/shared/models/
Membuat tugas
Gunakan salah satu fungsi ObjectDetector.createFrom...() Detektor Objek 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(), yang memungkinkan Anda menetapkan lebih banyak konfigurasi
lainnya. Untuk informasi selengkapnya tentang opsi konfigurasi yang tersedia, lihat
Bagian Opsi konfigurasi.
Kode berikut menunjukkan cara membangun dan mengonfigurasi tugas ini:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
baseOptions: {
modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
},
scoreThreshold: 0.5,
runningMode: runningMode
});
Untuk implementasi yang lebih lengkap dari pembuatan tugas Object Detector, 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
moda: IMAGE: Mode untuk input gambar tunggal. VIDEO: Mode untuk frame yang didekode video atau pada livestream data input, misalnya dari kamera. |
{IMAGE, VIDEO} |
IMAGE |
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 |
maxResults |
Menetapkan jumlah maksimum opsional untuk hasil deteksi dengan skor tertinggi ke kembali. | Semua angka positif | -1 (semua hasil ditampilkan) |
scoreThreshold |
Menetapkan ambang batas skor prediksi yang menggantikan skor 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 deteksi yang nama kategorinya tidak ada dalam kumpulan ini akan
disaring. Nama kategori duplikat atau yang tidak diketahui akan diabaikan.
Opsi ini sama-sama bersifat eksklusif dengan categoryDenylist dan menggunakan
keduanya akan menghasilkan {i>error<i}. |
String apa pun | Tidak ditetapkan |
categoryDenylist |
Menetapkan daftar opsional nama kategori yang tidak diizinkan. Jika
hasil deteksi yang tidak kosong, yang nama kategorinya dalam rangkaian ini akan difilter
posisi-posisi ini. Nama kategori duplikat atau yang tidak diketahui akan diabaikan. Opsi ini sama-sama
eksklusif dengan categoryAllowlist dan menggunakan keduanya akan menyebabkan error. |
String apa pun | Tidak ditetapkan |
Menyiapkan data
Detektor Objek dapat mendeteksi 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. Untuk mendeteksi objek dalam video, Anda dapat menggunakan API untuk memproses frame pada satu waktu dengan cepat, menggunakan stempel waktu untuk menentukan kapan {i>gesture <i}muncul dalam video.
Menjalankan tugas
Detektor Objek menggunakan detect() untuk mengerjakan gambar tunggal dan
detectForVideo() berfungsi untuk mendeteksi objek dalam frame video. {i>Task process<i}
data, berusaha mengenali objek, dan kemudian melaporkan hasilnya.
Panggilan ke metode detect() dan detectForVideo() akan berjalan
secara sinkron dan memblokir
thread antarmuka pengguna. Jika Anda mengenali objek di
frame video dari kamera perangkat, setiap klasifikasi memblokir
. Anda dapat mencegah hal ini dengan menerapkan pekerja web untuk menjalankan deteksi di
thread lain.
Kode berikut menunjukkan cara mengeksekusi pemrosesan dengan model tugas:
Gambar
const image = document.getElementById("image") as HTMLImageElement; const detections = objectDetector.detect(image);
Video
await objectDetector.setOptions({ runningMode: "video" }); let lastVideoTime = -1; function renderLoop(): void { const video = document.getElementById("video"); if (video.currentTime !== lastVideoTime) { const detections = detector.detectForVideo(video); processResults(detections); lastVideoTime = video.currentTime; } requestAnimationFrame(() => { renderLoop(); }); }
Untuk implementasi yang lebih lengkap dalam menjalankan tugas Detektor Objek, lihat contoh kode.
Menangani dan menampilkan hasil
Detektor Objek menghasilkan objek hasil deteksi untuk setiap deteksi yang dijalankan. Objek hasil berisi daftar deteksi, dengan setiap deteksi mencakup kotak pembatas dan informasi kategori tentang objek yang terdeteksi, termasuk nama objek dan skor keyakinan.
Berikut ini contoh data output dari tugas ini:
ObjectDetectorResult:
Detection #0:
Box: (x: 355, y: 133, w: 190, h: 206)
Categories:
index : 17
score : 0.73828
class name : dog
Detection #1:
Box: (x: 103, y: 15, w: 138, h: 369)
Categories:
index : 17
score : 0.73047
class name : dog
Gambar berikut menunjukkan visualisasi output tugas:
Kode contoh Detektor Objek menunjukkan cara menampilkan deteksi hasil yang ditampilkan dari tugas, lihat contoh kode untuk mengetahui detailnya.