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:

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

3. 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

1. 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.

Catatan: Jika Anda lebih suka membuat aplikasi web dengan detektor objek yang memiliki tujuan yang lebih umum dalam tutorial ini, baca artikel tentang Model.

2. 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

1. 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.

2. 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.

Catatan: Jika Anda ingin menggunakan model deteksi objek yang lebih umum, baca artikel tentang Model.

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);

Catatan: Metode objectDetector.detect() bersifat memblokir, sehingga akan memblokir UI saat dijalankan di thread utama.

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

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

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

2. 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:

1. Di panel pratinjau, klik setiap gambar untuk melihat prediksinya. Kotak pembatas menunjukkan nama anjing dengan tingkat kepercayaan model.
2. 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.

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:

1. Download salah satu foto anjing ke ponsel Anda.
2. Di panel pratinjau, klik Enable webcam.
3. Jika browser Anda menampilkan dialog yang meminta Anda memberikan akses ke webcam, berikan izin.
4. Pegang gambar anjing di ponsel di depan webcam Anda. Kotak pembatas akan menunjukkan nama anjing dan tingkat kepercayaan model.
5. 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.

7. Selamat

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

Pelajari lebih lanjut

• Deteksi objek untuk web
• MediaPipe Studio
• MediaPipe Model Maker
• Melatih model deteksi objek khusus dengan MediaPipe Model Maker
• Deteksi objek kustom di browser menggunakan TensorFlow.js