Udhëzues dore për zbulimin e pikave referuese për ueb

Detyra MediaPipe Hand Landmarker ju lejon të zbuloni pikat e referimit të duarve në një imazh. Këto udhëzime ju tregojnë se si ta përdorni Hand Landmarker për aplikacionet e uebit dhe JavaScript.

Për më shumë informacion rreth aftësive, modeleve dhe opsioneve të konfigurimit të kësaj detyre, shihni Përmbledhjen .

Shembull kodi

Kodi shembull për Hand Landmarker ofron një implementim të plotë të kësaj detyre në JavaScript për referencën tuaj. Ky kod ju ndihmon të testoni këtë detyrë dhe të filloni ndërtimin e aplikacionit tuaj të zbulimit të pikave të referimit me dorë. Mund ta shikoni, ekzekutoni dhe modifikoni shembullin e Hand Landmarker duke përdorur vetëm shfletuesin tuaj të internetit.

Konfigurimi

Ky seksion përshkruan hapat kryesorë për konfigurimin e mjedisit tuaj të zhvillimit posaçërisht për të përdorur Hand Landmarker. Për informacion të përgjithshëm mbi konfigurimin e mjedisit tuaj të zhvillimit të uebit dhe JavaScript, duke përfshirë kërkesat e versionit të platformës, shihni udhëzuesin e konfigurimit për ueb .

Paketat JavaScript

Kodi Hand Landmarker është i disponueshëm përmes paketës MediaPipe @mediapipe/tasks-vision NPM . Mund t'i gjeni dhe shkarkoni këto biblioteka duke ndjekur udhëzimet në udhëzuesin e konfigurimit të platformës.

Mund të instaloni paketat e kërkuara përmes NPM duke përdorur komandën e mëposhtme:

npm install @mediapipe/tasks-vision

Nëse doni të importoni kodin e detyrës nëpërmjet një shërbimi të rrjetit të shpërndarjes së përmbajtjes (CDN), shtoni kodin e mëposhtëm në etiketën <head> në skedarin tuaj HTML:

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

Model

Detyra MediaPipe Hand Landmarker kërkon një model të trajnuar që është i pajtueshëm me këtë detyrë. Për më shumë informacion mbi modelet e trajnuara të disponueshme për Hand Landmarker, shihni seksionin Modelet e përmbledhjes së detyrës.

Zgjidhni dhe shkarkoni një model dhe më pas ruajeni atë brenda direktorisë së projektit tuaj:

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

Krijo detyrën

Përdorni një nga funksionet Hand Landmarker createFrom...() për të përgatitur detyrën për ekzekutimin e inferencave. Përdorni funksionin createFromModelPath() me një shteg relativ ose absolut për në skedarin e modelit të trajnuar. Nëse modeli juaj është ngarkuar tashmë në memorie, mund të përdorni metodën createFromModelBuffer() .

Shembulli i kodit më poshtë demonstron përdorimin e funksionit createFromOptions() për të konfiguruar detyrën. Funksioni createFromOptions ju lejon të personalizoni Shenjuesin e Dorës me opsione konfigurimi. Për më shumë informacion mbi opsionet e konfigurimit, shihni Opsionet e konfigurimit .

Kodi i mëposhtëm tregon se si të ndërtohet dhe konfigurohet detyra me opsione të personalizuara:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const handLandmarker = await HandLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "hand_landmarker.task"
      },
      numHands: 2
    });

Opsionet e konfigurimit

Kjo detyrë ka opsionet e mëposhtme të konfigurimit për aplikacionet Web dhe JavaScript:

Emri i opsionit	Përshkrimi	Diapazoni i Vlerave	Vlera e parazgjedhur
`runningMode`	Cakton modalitetin e ekzekutimit për detyrën. Ekzistojnë dy mënyra: IMAZH: Modaliteti për futjen e një imazhi të vetëm. VIDEO: Modaliteti për kuadrot e dekoduara të një videoje ose në një transmetim të drejtpërdrejtë të të dhënave hyrëse, si p.sh. nga një kamera.	{ `IMAGE, VIDEO` }	`IMAGE`
`numHands`	Numri maksimal i duarve të zbuluara nga detektori i pikave të referimit të duarve.	`Any integer > 0`	`1`
`minHandDetectionConfidence`	Rezultati minimal i besimit që zbulimi i dorës të konsiderohet i suksesshëm në modelin e zbulimit të pëllëmbës.	`0.0 - 1.0`	`0.5`
`minHandPresenceConfidence`	Rezultati minimal i besimit për rezultatin e pranisë së dorës në modelin e zbulimit të pikës referuese të dorës. Në modalitetin Video dhe modalitetin e transmetimit të drejtpërdrejtë, nëse rezultati i besimit të pranisë së dorës nga modeli i pikës referuese të dorës është nën këtë prag, Shënuesi i Pikës së Drejtpërdrejtë aktivizon modelin e zbulimit të pëllëmbës. Përndryshe, një algoritëm i lehtë për ndjekjen e dorës përcakton vendndodhjen e dorës/duarve për zbulimet pasuese të pikës referuese.	`0.0 - 1.0`	`0.5`
`minTrackingConfidence`	Rezultati minimal i besimit që gjurmimi i dorës të konsiderohet i suksesshëm. Ky është pragu i hapësirës së pakufizuar të kutisë kufizuese midis duarve në kuadrin aktual dhe kuadrin e fundit. Në modalitetin Video dhe modalitetin Transmetim të Shënuesit të Dorës, nëse gjurmimi dështon, Shënuesi i Dorës aktivizon zbulimin e dorës. Përndryshe, ai anashkalon zbulimin e dorës.	`0.0 - 1.0`	`0.5`

Përgatitni të dhënat

Hand Landmarker mund të zbulojë pikat e referimit të duarve në imazhe në çdo format të mbështetur nga shfletuesi pritës. Detyra gjithashtu trajton përpunimin paraprak të të dhënave të futura, duke përfshirë ndryshimin e madhësisë, rrotullimin dhe normalizimin e vlerës. Për të zbuluar pikat e referimit të duarve në video, mund të përdorni API-n për të përpunuar shpejt një kuadër në të njëjtën kohë, duke përdorur vulën kohore të kuadrit për të përcaktuar se kur ndodhin pikat e referimit të duarve brenda videos.

Ekzekuto detyrën

Shënuesi i Dorës përdor metodat detect() (me modalitetin e ekzekutimit image ) dhe detectForVideo() (me modalitetin e ekzekutimit video ) për të shkaktuar përfundime. Detyra përpunon të dhënat, përpiqet të zbulojë pikat e referimit të duarve dhe më pas raporton rezultatet.

Thirrjet në metodat Hand Landmarker detect() dhe detectForVideo() ekzekutohen në mënyrë sinkrone dhe bllokojnë fijen e ndërfaqes së përdoruesit. Nëse zbuloni pika referimi dore në kuadro video nga kamera e një pajisjeje, çdo zbulim bllokon fijen kryesore. Mund ta parandaloni këtë duke zbatuar punëtorët e uebit për të ekzekutuar metodat detect() dhe detectForVideo() në një fije tjetër.

Kodi i mëposhtëm tregon se si ekzekutohet përpunimi me modelin e detyrës:

Imazh

const image = document.getElementById("image") as HTMLImageElement;
const handLandmarkerResult = handLandmarker.detect(image);

Video

await handLandmarker.setOptions({ runningMode: "video" });

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

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

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

Për një implementim më të plotë të ekzekutimit të një detyre Hand Landmarker, shihni shembullin .

Trajtoni dhe shfaqni rezultatet

Shënuesi i Dorës gjeneron një objekt rezultati të shënuesit të dores për çdo ekzekutim zbulimi. Objekti i rezultatit përmban shënuesit e duarve në koordinatat e imazhit, shënuesit e duarve në koordinatat botërore dhe dorën (dora e majtë/e djathtë) të duarve të zbuluara.

Më poshtë tregohet një shembull i të dhënave të nxjerra nga kjo detyrë:

Rezultati i HandLandmarkerResult përmban tre komponentë. Çdo komponent është një varg, ku çdo element përmban rezultatet e mëposhtme për një dorë të vetme të zbuluar:

Dora e përdorur
Dora e përdorur tregon nëse duart e zbuluara janë të majta apo të djathta.
Pika referimi
Ekzistojnë 21 pika referimi për dorën, secila e përbërë nga koordinatat x , y dhe z . Koordinatat x dhe y normalizohen në [0.0, 1.0] nga gjerësia dhe lartësia e imazhit, përkatësisht. Koordinata z përfaqëson thellësinë e pikës referuese, me thellësinë në kyçin e dorës që është origjina. Sa më e vogël të jetë vlera, aq më afër është pika referuese me kamerën. Madhësia e z përdor afërsisht të njëjtën shkallë si x .
Monumentet Botërore
21 pikat e referimit të dorës paraqiten gjithashtu në koordinata botërore. Çdo pikë referimi përbëhet nga x , y dhe z , që përfaqësojnë koordinatat 3D të botës reale në metra me origjinën në qendrën gjeometrike të dorës.

HandLandmarkerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : -3.41E-7
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
    ... (21 landmarks for a hand)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
    ... (21 world landmarks for a hand)

Imazhi i mëposhtëm tregon një vizualizim të rezultatit të detyrës:

Një dorë me gishtin e madh lart me strukturën skeletore të dorës të hartuar

Kodi shembullor i Hand Landmarker tregon se si të shfaqen rezultatet e kthyera nga detyra, shihni shembullin