Panduan deteksi tempat terkenal pose untuk Web

Tugas MediaPipe Pose Landmarker memungkinkan Anda mendeteksi penanda tubuh manusia dalam gambar atau video. Anda dapat menggunakan tugas ini untuk mengidentifikasi lokasi tubuh utama, menganalisis postur, dan mengategorikan gerakan. Tugas ini menggunakan model machine learning (ML) yang berfungsi dengan satu gambar atau video. Tugas ini menghasilkan penanda pose tubuh dalam koordinat gambar dan dalam koordinat dunia 3 dimensi.

Petunjuk ini menunjukkan cara menggunakan Pose Landmarker untuk aplikasi web dan JavaScript. Untuk mengetahui informasi selengkapnya tentang kemampuan, model, dan opsi konfigurasi tugas ini, lihat Ringkasan.

Contoh kode

Kode contoh untuk Pose Landmarker memberikan implementasi lengkap tugas ini dalam JavaScript sebagai referensi Anda. Kode ini membantu Anda menguji tugas ini dan mulai membangun aplikasi penanda pose Anda sendiri. Anda dapat melihat, menjalankan, dan mengedit kode contoh Pose Landmarker hanya menggunakan browser web.

Penyiapan

Bagian ini menjelaskan langkah-langkah utama untuk menyiapkan lingkungan pengembangan Anda khusus untuk menggunakan Pose Landmarker. Untuk informasi umum tentang cara menyiapkan lingkungan pengembangan web dan JavaScript, termasuk persyaratan versi platform, lihat Panduan penyiapan untuk web.

Paket JavaScript

Kode Pose Landmarker tersedia melalui paket @mediapipe/tasks-vision NPM MediaPipe. Anda dapat menemukan dan mendownload library ini dengan mengikuti petunjuk di Panduan penyiapan platform.

Anda dapat menginstal paket yang diperlukan melalui NPM 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 <head> dalam file HTML Anda:

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

Model

Tugas MediaPipe Pose Landmarker memerlukan model terlatih yang kompatibel dengan tugas ini. Untuk informasi selengkapnya tentang model terlatih yang tersedia untuk Pose Landmarker, lihat bagian Model ringkasan tugas.

Pilih dan download model, lalu simpan dalam direktori project Anda:

<dev-project-root>/app/shared/models/

Membuat tugas

Gunakan salah satu fungsi createFrom...() Pose Landmarker untuk menyiapkan tugas untuk menjalankan inferensi. Gunakan fungsi createFromModelPath() dengan jalur relatif atau absolut ke file model yang telah 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 Pose Landmarker dengan opsi konfigurasi. Untuk informasi selengkapnya tentang opsi konfigurasi, lihat Opsi konfigurasi.

Kode berikut menunjukkan cara mem-build dan mengonfigurasi tugas dengan opsi kustom:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const poseLandmarker = await poseLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

Opsi konfigurasi

Tugas ini memiliki opsi konfigurasi berikut untuk aplikasi Web dan JavaScript:

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 yang didekode dari video atau pada live stream data input, seperti dari kamera.		 {IMAGE, VIDEO} IMAGE
numPoses Jumlah maksimum pose yang dapat dideteksi oleh Pose Landmarker. Integer > 0 1
minPoseDetectionConfidence Skor keyakinan minimum agar deteksi pose dianggap berhasil. Float [0.0,1.0] 0.5
minPosePresenceConfidence Skor keyakinan minimum dari skor kehadiran postur dalam deteksi penanda postur. Float [0.0,1.0] 0.5
minTrackingConfidence Skor keyakinan minimum agar pelacakan postur dianggap berhasil. Float [0.0,1.0] 0.5
outputSegmentationMasks Apakah Pose Landmarker menghasilkan mask segmentasi untuk postur yang terdeteksi. Boolean False

Menyiapkan data

Pose Landmarker dapat mendeteksi pose dalam gambar dalam format apa pun yang didukung oleh browser host. Tugas ini juga menangani prapemrosesan input data, termasuk perubahan ukuran, rotasi, dan normalisasi nilai. Untuk menandai pose dalam video, Anda dapat menggunakan API untuk memproses satu frame secara cepat, menggunakan stempel waktu frame untuk menentukan kapan pose terjadi dalam video.

Menjalankan tugas

Pose Landmarker menggunakan metode detect() (dengan mode berjalan IMAGE) dan detectForVideo() (dengan mode berjalan VIDEO) untuk memicu inferensi. Tugas ini memproses data, mencoba menandai pose, lalu melaporkan hasilnya.

Panggilan ke metode Pose Landmarker detect() dan detectForVideo() berjalan secara sinkron dan memblokir thread interpose pengguna. Jika Anda mendeteksi pose dalam frame video dari kamera perangkat, setiap deteksi akan memblokir thread utama. Anda dapat mencegah hal ini dengan menerapkan pekerja web untuk menjalankan metode detect() dan detectForVideo() di thread lain.

Kode berikut menunjukkan cara menjalankan pemrosesan dengan model tugas:

Gambar

const image = document.getElementById("image") as HTMLImageElement;
const poseLandmarkerResult = poseLandmarker.detect(image);

Video

await poseLandmarker.setOptions({ runningMode: "VIDEO" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const poseLandmarkerResult = poseLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Untuk penerapan yang lebih lengkap dalam menjalankan tugas Pose Landmarker, lihat contoh kode.

Menangani dan menampilkan hasil

Pose Landmarker menampilkan objek poseLandmarkerResult untuk setiap deteksi yang dijalankan. Objek hasil berisi koordinat untuk setiap penanda pose.

Berikut adalah contoh data output dari tugas ini:

PoseLandmarkerResult:
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : 0.129959
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
      visibility   : 0.999909
      presence     : 0.999958
    ... (33 landmarks per pose)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
      visibility   : 0.999976
      presence     : 0.999998
    ... (33 world landmarks per pose)
  SegmentationMasks:
    ... (pictured below)

Output-nya berisi koordinat ternormalisasi (Landmarks) dan koordinat dunia (WorldLandmarks) untuk setiap penanda.

Output berisi koordinat ternormalisasi berikut (Landmarks):

  • x dan y: Koordinat penanda yang dinormalisasi antara 0,0 dan 1,0 berdasarkan lebar (x) dan tinggi (y) gambar.

  • z: Kedalaman penanda, dengan kedalaman di titik tengah pinggul sebagai asal. Makin kecil nilainya, makin dekat penanda ke kamera. Magnitudo z menggunakan skala yang kira-kira sama dengan x.

  • visibility: Kemungkinan penanda terlihat dalam gambar.

Output berisi koordinat dunia berikut (WorldLandmarks):

  • x, y, dan z: Koordinat 3 dimensi dunia nyata dalam meter, dengan titik tengah pinggul sebagai asal.

  • visibility: Kemungkinan penanda terlihat dalam gambar.

Gambar berikut menunjukkan visualisasi output tugas:

Seorang wanita dalam pose meditasi. Posenya ditandai dengan wireframe yang menunjukkan posisi anggota tubuh dan torsonya

Topeng segmentasi opsional mewakili kemungkinan setiap piksel milik orang yang terdeteksi. Gambar berikut adalah mask segmentasi dari output tugas:

Mask segmentasi gambar sebelumnya yang menguraikan bentuk wanita

Kode contoh Pose Landmarker menunjukkan cara menampilkan hasil yang ditampilkan dari tugas, lihat contoh kode