Panduan deteksi tempat terkenal pose untuk Web

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

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

Contoh kode

Kode contoh untuk Pose Landmarker memberikan implementasi lengkap dari tugas di JavaScript untuk referensi Anda. Kode ini membantu Anda menguji tugas ini dan mendapatkan mulai membangun aplikasi {i>pose landmarker<i} Anda sendiri. Anda dapat melihat, menjalankan, dan edit kode contoh Pose Landmarker hanya dengan menggunakan {i>browser<i} web.

Penyiapan

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

Paket JavaScript

Kode Pose Landmarker 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) tambahkan kode berikut di kolom <head> di 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 Anda. Untuk informasi selengkapnya tentang model terlatih yang tersedia untuk Pose Landmarker, 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...() Pose Landmarker 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() untuk menyiapkan tugas. Fungsi createFromOptions() memungkinkan Anda menyesuaikan Pose Landmarker dengan opsi konfigurasi. Untuk informasi selengkapnya tentang konfigurasi opsi, lihat Opsi konfigurasi.

Kode berikut menunjukkan cara membangun dan mengonfigurasi tugas dengan opsi:

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 Web dan JavaScript aplikasi:

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
numPoses Jumlah maksimum pose yang bisa dideteksi oleh Pose Landmarker. Integer > 0 1
minPoseDetectionConfidence Skor keyakinan minimum untuk deteksi pose dianggap berhasil. Float [0.0,1.0] 0.5
minPosePresenceConfidence Skor keyakinan minimum dari kehadiran pose skor dalam deteksi penanda pose. Float [0.0,1.0] 0.5
minTrackingConfidence Skor keyakinan minimum untuk pelacakan pose untuk dianggap berhasil. Float [0.0,1.0] 0.5
outputSegmentationMasks Apakah Pose Landmarker menghasilkan mask segmentasi untuk objek yang terdeteksi berpose. Boolean False

Menyiapkan data

Pose Landmarker dapat mendeteksi pose 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 pose terkenal dalam video, Anda dapat menggunakan API untuk memproses satu frame dalam satu waktu dengan cepat, menggunakan stempel waktu {i>frame<i} untuk menentukan kapan pose terjadi dalam video.

Menjalankan tugas

Penanda Pose menggunakan detect() (dengan mode lari IMAGE) dan Metode detectForVideo() (dengan mode berjalan VIDEO) yang akan dipicu inferensi. Tugas itu memproses data, mencoba menentukan pose-pose {i>landmark<i}, dan kemudian melaporkan hasilnya.

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

Kode berikut menunjukkan cara mengeksekusi 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 implementasi yang lebih lengkap dalam menjalankan tugas Pose Landmarker, lihat contoh kode.

Menangani dan menampilkan hasil

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

Berikut ini 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 berisi koordinat yang dinormalkan (Landmarks) dan dunia koordinat (WorldLandmarks) untuk setiap penanda.

Output berisi koordinat yang dinormalkan berikut (Landmarks):

  • x dan y: Koordinat tempat terkenal dinormalisasi antara 0,0 dan 1,0 dengan lebar gambar (x) dan tinggi (y).

  • z: Kedalaman tempat terkenal, dengan kedalaman di titik tengah pinggul sebagai tempat asal. Makin kecil nilainya, makin dekat tempat terkenal tersebut ke kamera. Tujuan magnitudo z menggunakan skala yang kurang lebih sama dengan x.

  • visibility: Kemungkinan tempat terkenal terlihat dalam gambar.

Output berisi koordinat dunia berikut (WorldLandmarks):

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

  • visibility: Kemungkinan tempat terkenal terlihat dalam gambar.

Gambar berikut menunjukkan visualisasi output tugas:

Masker segmentasi opsional mewakili kemungkinan setiap piksel yang termasuk dalam ke orang yang terdeteksi. Gambar berikut adalah mask segmentasi dari output tugas:

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