Przewodnik wykrywania punktów orientacyjnych pozycji w przeglądarce

Zadanie MediaPipe Pose pointer umożliwia wykrywanie na zdjęciach lub filmach punktów orientacyjnych ludzkich ciał. Możesz używać tego zadania do identyfikowania kluczowych lokalizacji ciała, analizowania postawy i kategoryzowania ruchów. To zadanie wykorzystuje modele systemów uczących się, które działają z pojedynczymi obrazami lub filmami. Zadanie wyprowadza punkty orientacyjne ustalania pozycji ciała we współrzędnych zdjęcia i w trójwymiarowych współrzędnych świata.

W tych instrukcjach pokazujemy, jak korzystać z aplikacji Pose Twoja w aplikacjach internetowych i JavaScript. Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w sekcji Omówienie.

Przykładowy kod

Przykładowy kod Pose pointer zawiera pełną implementację tego zadania w JavaScript. Ten kod ułatwia przetestowanie tego zadania i rozpoczęcie tworzenia własnej aplikacji do tworzenia punktów orientacyjnych ułożenia pozycji. Możesz wyświetlić, uruchomić i edytować przykładowy kod aplikacji Pose Sighter tylko w przeglądarce.

Konfiguracja

W tej sekcji opisujemy najważniejsze czynności, jakie należy wykonać, by skonfigurować środowisko programistyczne pod kątem użycia funkcji Pozycjonowanie. Ogólne informacje o konfigurowaniu środowiska programistycznego do obsługi stron internetowych i JavaScript, w tym o wymaganiach dotyczących wersji platformy, znajdziesz w przewodniku po konfiguracji na potrzeby stron internetowych.

Pakiety JavaScript

Kod punktu orientacyjnego Pose pointer jest dostępny w pakiecie MediaPipe @mediapipe/tasks-vision NPM. Aby znaleźć i pobrać te biblioteki, wykonaj instrukcje podane w przewodniku po konfiguracji dotyczącym platformy.

Wymagane pakiety możesz zainstalować za pomocą NPM za pomocą tego polecenia:

npm install @mediapipe/tasks-vision

Jeśli chcesz zaimportować kod zadania przez usługę sieci dostarczania treści (CDN), dodaj ten kod do tagu <head> w pliku HTML:

<!-- 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

Zadanie MediaPipe Pose pointer wymaga wytrenowanego modelu zgodnego z tym zadaniem. Więcej informacji o dostępnych wytrenowanych modelach dla funkcji Punkt orientacyjny pozycji znajdziesz w omówieniem zadań w sekcji dotyczącej modeli.

Wybierz i pobierz model, a następnie zapisz go w katalogu projektu:

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

Tworzenie zadania

Użyj jednej z funkcji createFrom...() Punktu orientacyjnego, aby przygotować zadanie do uruchamiania wnioskowania. Użyj funkcji createFromModelPath() ze ścieżką względną lub bezwzględną do wytrenowanego pliku modelu. Jeśli model jest już załadowany do pamięci, możesz użyć metody createFromModelBuffer().

Poniższy przykładowy kod pokazuje, jak skonfigurować zadanie za pomocą funkcji createFromOptions(). Funkcja createFromOptions() umożliwia dostosowanie punktu orientacyjnego Pozycje za pomocą opcji konfiguracji. Więcej informacji o opcjach konfiguracji znajdziesz w artykule Opcje konfiguracji.

Poniższy kod pokazuje, jak skompilować i skonfigurować zadanie z opcjami niestandardowymi:

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

Opcje konfiguracji

To zadanie ma następujące opcje konfiguracji dla aplikacji internetowych i JavaScript:

Nazwa opcji Opis Zakres wartości Wartość domyślna
runningMode Ustawia tryb działania zadania. Są 2 tryby:

IMAGE: tryb wprowadzania pojedynczych obrazów.

WIDEO: tryb dla zdekodowanych klatek filmu lub strumienia danych wejściowych na żywo, np. z kamery.
{IMAGE, VIDEO} IMAGE
numPoses Maksymalna liczba pozycji, które może wykryć Punkt orientacyjny pozycji. Integer > 0 1
minPoseDetectionConfidence Minimalny poziom ufności, że wykrywanie pozycji zostanie uznane za udane. Float [0.0,1.0] 0.5
minPosePresenceConfidence Minimalny wskaźnik ufności dotyczący obecności pozycji podczas wykrywania punktu orientacyjnego pozycji. Float [0.0,1.0] 0.5
minTrackingConfidence Minimalny wskaźnik ufności pozwalający na uznanie śledzenia pozycji za udane. Float [0.0,1.0] 0.5
outputSegmentationMasks Określa, czy Kreator elementów budowy pozycji generuje maskę podziału na segmenty dla wykrytej pozycji. Boolean False

Przygotuj dane

Narzędzie do wykrywania pozycji może wykrywać pozycje na zdjęciach w dowolnym formacie obsługiwanym przez przeglądarkę hosta. Zadaniem tego zadania jest również wstępne przetwarzanie danych wejściowych, w tym zmiana rozmiaru, rotacja i normalizacja wartości. Do punktów orientacyjnych ujęć w filmie można wykorzystać interfejs API, aby szybko przetwarzać kolejne klatki. Wykorzystując sygnaturę czasową klatki w celu określenia momentu, w którym pojawia się ona w filmie.

Uruchamianie zadania

Punkt orientacyjny pozycji generuje wnioskowanie za pomocą metod detect() (w trybie uruchamiania IMAGE) i detectForVideo() (w trybie biegania VIDEO). Zadanie przetwarza dane, próbuje wyznaczyć punkty orientacyjne, a potem zgłasza wyniki.

Wywołania metod detect() i detectForVideo() komponentu Punkt orientacyjny do pozycjonowania są uruchamiane synchronicznie i blokują wątek pośredniego użytkownika. Jeśli wykryjesz pozy znajdujące się w klatkach wideo wysyłanych przez kamerę urządzenia, każde wykrycie blokuje wątek główny. Aby temu zapobiec, zaimplementuj instancje robocze, które uruchamiają metody detect() i detectForVideo() w innym wątku.

Ten kod pokazuje, jak wykonywać przetwarzanie za pomocą modelu zadań:

Obraz

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

Wideo

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

Pełniejszą implementację znajdziesz w przykładowym kodzie.

Obsługa i wyświetlanie wyników

Punkt orientacyjny pozycji zwraca obiekt poseLandmarkerResult przy każdym uruchomieniu wykrywania. Wynikowy obiekt zawiera współrzędne każdego punktu orientacyjnego umiejscowienia.

Poniżej znajdziesz przykład danych wyjściowych z tego zadania:

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)

Dla każdego punktu orientacyjnego dane wyjściowe zawierają zarówno znormalizowane współrzędne (Landmarks), jak i współrzędne świata (WorldLandmarks).

Dane wyjściowe zawierają te znormalizowane współrzędne (Landmarks):

  • x i y: współrzędne punktu orientacyjnego znormalizowane od 0,0 do 1,0 według szerokości obrazu (x) i wysokości (y).

  • z: głębokość punktu orientacyjnego, której początek znajduje się w połowie bioder. Im mniejsza wartość, tym bliżej kamery znajduje się punkt orientacyjny. Wielkość „z” jest mniej więcej taka sama jak w przypadku właściwości x.

  • visibility: prawdopodobieństwo, że punkt orientacyjny będzie widoczny na zdjęciu.

Dane wyjściowe zawierają te współrzędne świata (WorldLandmarks):

  • x, y i z: rzeczywiste trójwymiarowe współrzędne w metrach, gdzie punktem początkowym jest środek bioder.

  • visibility: prawdopodobieństwo, że punkt orientacyjny będzie widoczny na zdjęciu.

Poniższy obraz przedstawia wizualizację wyników zadania:

Opcjonalna maska podziału na segmenty reprezentuje prawdopodobieństwo, że każdy piksel należy do wykrytej osoby. Ten obraz przedstawia maskę podziału danych wyjściowych zadania:

Przykładowy kod Pozycje punktu orientacyjnego pokazuje, jak wyświetlać wyniki zwrócone z zadania; patrz przykładowy kod.