Membuat aplikasi web deteksi objek khusus dengan MediaPipe.

1. Sebelum memulai

MediaPipe Solutions dapat Anda gunakan untuk menerapkan solusi machine learning (ML) ke aplikasi Anda. Solusi ini memberikan kerangka kerja yang memungkinkan Anda mengonfigurasi pipeline pemrosesan prebuilt yang memberikan output segera, menarik, dan bermanfaat bagi pengguna. Anda bahkan dapat menyesuaikan solusi ini dengan Model Maker untuk mengupdate model default.

Deteksi objek adalah salah satu dari beberapa tugas ML vision yang ditawarkan MediaPipe Solutions. MediaPipe Tasks tersedia untuk Android, Python, dan web.

Dalam codelab ini, Anda akan menambahkan deteksi objek ke aplikasi web untuk mendeteksi objek anjing dalam gambar dan video webcam live.

Yang akan Anda pelajari

Cara menyertakan tugas deteksi objek di aplikasi web dengan MediaPipe Tasks.

Yang akan Anda bangun

Aplikasi web yang mendeteksi keberadaan objek anjing. Anda juga dapat menyesuaikan model untuk mendeteksi class objek pilihan Anda dengan MediaPipe Model Maker.

Yang Anda butuhkan

Akun CodePen
Perangkat dengan browser web
Pengetahuan dasar tentang JavaScript, CSS, dan HTML

2. Memulai persiapan

Codelab ini menjalankan kode Anda di CodePen, yakni lingkungan pengembangan sosial yang dapat digunakan untuk menulis kode di browser dan memeriksa hasilnya sambil Anda membangun.

Untuk melakukan persiapan, ikuti langkah-langkah berikut:

Di akun CodePen Anda, arahkan ke CodePen ini. Anda menggunakan kode ini sebagai basis awal untuk membuat detektor objek Anda sendiri.
Di bagian bawah CodePen di menu navigasi, klik Fork untuk membuat salinan kode awal.

Menu navigasi di CodePen tempat tombol Fork berada

Di tab JS, klik panah perluas kemudian pilih Maximize JavaScript editor. Anda hanya mengedit pekerjaan ini di tab JS untuk codelab ini, jadi Anda tidak perlu melihat tab HTML atau CSS.

Meninjau aplikasi awal

Di panel pratinjau, perhatikan bahwa ada dua gambar anjing dan sebuah opsi untuk menjalankan webcam Anda. Model yang Anda gunakan dalam tutorial ini dilatih berdasarkan tiga objek anjing yang ditampilkan dalam kedua gambar tersebut.

Pratinjau aplikasi web dari kode awal

Di tab JS, perhatikan bahwa ada beberapa komentar di seluruh kode. Misalnya, ada komentar berikut di baris 15:

// Import the required package.

Komentar ini menunjukkan di mana Anda perlu menyisipkan cuplikan kode.

3. Mengimpor paket task-vision MediaPipe dan menambahkan variabel yang diperlukan

Di tab JS, impor paket tasks-vision dari MediaPipe:

// Import the required package.
import { ObjectDetector, FilesetResolver, Detection } from "https://cdn.skypack.dev/@mediapipe/tasks-vision@latest";

Kode ini menggunakan jaringan penayangan konten (CDN) Skypack untuk mengimpor paket. Untuk mengetahui informasi selengkapnya tentang cara menggunakan Skypack dengan CodePen, baca artikel tentang Skypack + CodePen.

Dalam project Anda, gunakan Node.js dengan npm atau pengelola paket atau CDN pilihan Anda. Untuk mengetahui informasi selengkapnya tentang paket wajib yang perlu Anda instal, baca artikel tentang paket JavaScript.

Mendeklarasikan variabel untuk detektor objek dan mode berjalan:

// Create required variables.
let objectDetector: ObjectDetector;
let runningMode = "IMAGE";

Variabel runningMode adalah string yang ditetapkan ke nilai "IMAGE" saat Anda mendeteksi objek dalam gambar atau nilai "VIDEO" saat Anda mendeteksi objek dalam video.

4. Menginisialisasi detektor objek

Untuk menginisialisasi detektor objek, tambahkan kode berikut setelah komentar yang relevan di tab JS:

// Initialize the object detector.
async function initializeObjectDetector() {
  const visionFilesetResolver = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );
  objectDetector = await ObjectDetector.createFromOptions(visionFilesetResolver, {
    baseOptions: {
      modelAssetPath: "https://storage.googleapis.com/mediapipe-assets/dogs.tflite"
    },
    scoreThreshold: 0.3,
    runningMode: runningMode
  });
}
initializeObjectDetector();

Metode FilesetResolver.forVisionTasks() menentukan lokasi biner WebAssembly (Wasm) untuk tugas tersebut.

Metode ObjectDetector.createFromOptions() membuat instance detektor objek. Anda harus menyediakan jalur ke model yang digunakan untuk deteksi. Dalam hal ini, model deteksi objek anjing dihosting di Cloud Storage.

Properti scoreThreshold ditetapkan ke nilai 0.3. Artinya, model akan menampilkan hasil untuk setiap objek yang terdeteksi dengan tingkat kepercayaan 30% atau lebih. Anda dapat menyesuaikan batas ini agar sesuai dengan kebutuhan aplikasi Anda.

Properti runningMode ditetapkan saat inisialisasi objek ObjectDetector. Anda dapat mengubah opsi ini dan opsi lainnya sesuai kebutuhan nanti.

5. Menjalankan prediksi pada gambar

Untuk menjalankan prediksi pada gambar, arahkan ke fungsi handleClick() lalu tambahkan kode berikut ke isi fungsi:

// Verify object detector is initialized and choose the correct running mode.
if (!objectDetector) {
    alert("Object Detector still loading. Please try again");
    return;
  }

  if (runningMode === "VIDEO") {
    runningMode = "IMAGE";
    await objectDetector.setOptions({ runningMode: runningMode });
  }

Kode ini menentukan apakah detektor objek sudah diinisialisasi atau belum, dan memastikan mode yang berjalan disetel untuk gambar.

Mendeteksi objek

Untuk mendeteksi objek dalam gambar, tambahkan kode berikut ke isi fungsi handleClick():

// Run object detection.
  const detections = objectDetector.detect(event.target);

Cuplikan kode berikut berisi contoh data output dari tugas ini:

ObjectDetectionResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : aci
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : tikka

Memproses dan menampilkan prediksi

Di akhir isi fungsi handleClick(), panggil fungsi displayImageDetections():

// Call the displayImageDetections() function.
displayImageDetections(detections, event.target);

Pada isi fungsi displayImageDetections(), tambahkan kode berikut untuk menampilkan hasil deteksi objek:

// Display object detection results.

  const ratio = resultElement.height / resultElement.naturalHeight;

  for (const detection of detections) {
    // Description text
    const p = document.createElement("p");
    p.setAttribute("class", "info");
    p.innerText =
      detection.categories[0].categoryName +
      " - with " +
      Math.round(parseFloat(detection.categories[0].score) * 100) +
      "% confidence.";
    // Positioned at the top-left of the bounding box.
    // Height is that of the text.
    // Width subtracts text padding in CSS so that it fits perfectly.
    p.style =
      "left: " +
      detection.boundingBox.originX * ratio +
      "px;" +
      "top: " +
      detection.boundingBox.originY * ratio +
      "px; " +
      "width: " +
      (detection.boundingBox.width * ratio - 10) +
      "px;";
    const highlighter = document.createElement("div");
    highlighter.setAttribute("class", "highlighter");
    highlighter.style =
      "left: " +
      detection.boundingBox.originX * ratio +
      "px;" +
      "top: " +
      detection.boundingBox.originY * ratio +
      "px;" +
      "width: " +
      detection.boundingBox.width * ratio +
      "px;" +
      "height: " +
      detection.boundingBox.height * ratio +
      "px;";

    resultElement.parentNode.appendChild(highlighter);
    resultElement.parentNode.appendChild(p);
  }

Fungsi ini menampilkan kotak pembatas di atas objek yang terdeteksi pada gambar. Fungsi ini juga menghapus sorotan sebelumnya, lalu membuat dan menampilkan tag <p> untuk menyoroti setiap objek yang terdeteksi.

Menguji aplikasi

Saat Anda membuat perubahan pada kode Anda di CodePen, panel pratinjau akan otomatis di-refresh setelah disimpan. Jika fitur simpan-otomatis diaktifkan, aplikasi Anda mungkin sudah di-refresh, tetapi sebaiknya refresh kembali.

Untuk menguji aplikasi, ikuti langkah-langkah berikut:

Di panel pratinjau, klik setiap gambar untuk melihat prediksinya. Kotak pembatas menunjukkan nama anjing dengan tingkat kepercayaan model.
Jika tidak ada kotak pembatas, buka Chrome DevTools lalu periksa panel Console untuk mengetahui apakah ada kesalahan atau tidak, atau tinjau langkah sebelumnya untuk memastikan Anda tidak melewatkan hal apa pun.

Pratinjau aplikasi web dengan kotak pembatas di atas objek anjing yang terdeteksi di gambar

6. Menjalankan prediksi pada video webcam live

Mendeteksi objek

Untuk mendeteksi objek dalam video webcam live, buka fungsi predictWebcam() lalu tambahkan kode berikut ke isi fungsi:

// Run video object detection.
  // If image mode is initialized, create a classifier with video runningMode.
  if (runningMode === "IMAGE") {
    runningMode = "VIDEO";
    await objectDetector.setOptions({ runningMode: runningMode });
  }
  let startTimeMs = performance.now();

  // Detect objects with the detectForVideo() method.
  const detections = await objectDetector.detectForVideo(video, startTimeMs);

  displayVideoDetections(detections);

Deteksi objek untuk video menggunakan metode yang sama terlepas dari apakah Anda menjalankan inferensi pada data streaming atau video lengkap. Metode detectForVideo() mirip dengan metode detect() yang digunakan untuk foto, tetapi menyertakan parameter tambahan untuk stempel waktu yang terkait dengan bingkai saat ini. Fungsi tersebut melakukan deteksi secara live, jadi waktu saat ini digunakan sebagai stempel waktu.

Memproses dan menampilkan prediksi

Untuk memproses dan menampilkan hasil deteksi, buka fungsi displayVideoDetections() lalu tambahkan kode berikut ke isi fungsi:

//  Display video object detection results.
  for (let child of children) {
    liveView.removeChild(child);
  }
  children.splice(0);

  // Iterate through predictions and draw them to the live view.
  for (const detection of result.detections) {
    const p = document.createElement("p");
    p.innerText =
      detection.categories[0].categoryName +
      " - with " +
      Math.round(parseFloat(detection.categories[0].score) * 100) +
      "% confidence.";
    p.style =
      "left: " +
      (video.offsetWidth -
        detection.boundingBox.width -
        detection.boundingBox.originX) +
      "px;" +
      "top: " +
      detection.boundingBox.originY +
      "px; " +
      "width: " +
      (detection.boundingBox.width - 10) +
      "px;";

    const highlighter = document.createElement("div");
    highlighter.setAttribute("class", "highlighter");
    highlighter.style =
      "left: " +
      (video.offsetWidth -
        detection.boundingBox.width -
        detection.boundingBox.originX) +
      "px;" +
      "top: " +
      detection.boundingBox.originY +
      "px;" +
      "width: " +
      (detection.boundingBox.width - 10) +
      "px;" +
      "height: " +
      detection.boundingBox.height +
      "px;";

    liveView.appendChild(highlighter);
    liveView.appendChild(p);

    // Store drawn objects in memory so that they're queued to delete at next call.
    children.push(highlighter);
    children.push(p);
  }

Kode ini akan menghapus sorotan sebelumnya, lalu membuat dan menampilkan tag <p> untuk menyoroti setiap objek yang terdeteksi.

Menguji aplikasi

Untuk menguji deteksi objek live, Anda sebaiknya memiliki gambar salah satu anjing yang digunakan untuk melatih model.

Untuk menguji aplikasi, ikuti langkah-langkah berikut:

Download salah satu foto anjing ke ponsel Anda.
Di panel pratinjau, klik Enable webcam.
Jika browser Anda menampilkan dialog yang meminta Anda memberikan akses ke webcam, berikan izin.
Pegang gambar anjing di ponsel di depan webcam Anda. Kotak pembatas akan menunjukkan nama anjing dan tingkat kepercayaan model.
Jika tidak ada kotak pembatas, buka Chrome DevTools lalu periksa panel Console untuk mengetahui apakah ada kesalahan atau tidak, atau tinjau langkah sebelumnya untuk memastikan Anda tidak melewatkan hal apa pun.

Kotak pembatas di atas gambar seekor anjing yang dipegang di hadapan webcam live

7. Selamat

Selamat! Anda telah membangun aplikasi web yang mendeteksi objek dalam gambar. Untuk mempelajari lebih lanjut, baca versi lengkap aplikasi ini di CodePen.

Membuat aplikasi web deteksi objek khusus dengan MediaPipe.

1. Sebelum memulai

Yang akan Anda pelajari

Yang akan Anda bangun

Yang Anda butuhkan

2. Memulai persiapan

Meninjau aplikasi awal

3. Mengimpor paket task-vision MediaPipe dan menambahkan variabel yang diperlukan

4. Menginisialisasi detektor objek

5. Menjalankan prediksi pada gambar

Mendeteksi objek

Memproses dan menampilkan prediksi

Menguji aplikasi

6. Menjalankan prediksi pada video webcam live

Mendeteksi objek

Memproses dan menampilkan prediksi

Menguji aplikasi

7. Selamat

Pelajari lebih lanjut