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

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

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

Shembull kodi

Shembulli i kodit për Hand Landmarker ofron një zbatim të plotë të kësaj detyre në JavaScript për referencën tuaj. Ky kod të ndihmon të testosh këtë detyrë dhe të fillosh të ndërtosh aplikacionin tënd për zbulimin e pikave referuese. Mund të shikoni, ekzekutoni dhe modifikoni shembullin e kodit 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 . Ju mund t'i gjeni dhe shkarkoni këto biblioteka duke ndjekur udhëzimet në udhëzuesin e konfigurimit të platformës.

Ju 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 dëshironi 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.js"
    crossorigin="anonymous"></script>
</head>

Model

Detyra MediaPipe Hand Landmarker kërkon një model të trajnuar që është në përputhje 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ë detyrave.

Zgjidhni dhe shkarkoni një model dhe më pas ruajeni në direktorinë e 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 konkluzioneve. Përdorni funksionin createFromModelPath() me një shteg relative ose absolute drejt skedarit të modelit të trajnuar. Nëse modeli juaj tashmë është i ngarkuar në memorie, mund të përdorni metodën createFromModelBuffer() .

Shembulli i kodit më poshtë tregon përdorimin e funksionit createFromOptions() për të vendosur detyrën. Funksioni createFromOptions ju lejon të personalizoni Shënuesin e dorës me opsionet e konfigurimit. Për më shumë informacion mbi opsionet e konfigurimit, shihni Opsionet e konfigurimit .

Kodi i mëposhtëm tregon se si të ndërtoni dhe konfiguroni detyrën 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 Gama e vlerave Vlera e paracaktuar
runningMode Vendos modalitetin e ekzekutimit për detyrën. Ka dy mënyra:

IMAGE: Modaliteti për hyrjet e një imazhi të vetëm.

VIDEO: Modaliteti për kornizat e deshifruara të një videoje ose në një transmetim të drejtpërdrejtë të të dhënave hyrëse, si p.sh. nga një aparat fotografik.		 { IMAGE, VIDEO } IMAGE
numHands Numri maksimal i duarve të zbuluara nga detektori i pikës referuese Hand. Any integer > 0 1
minHandDetectionConfidence Rezultati minimal i besimit për zbulimin e dorës për t'u konsideruar 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 referimi me dorë. Në modalitetin "Video" dhe "Transmetimi i drejtpërdrejtë", nëse rezultati i besueshmërisë së pranisë së dorës nga modeli i pikës së dorës është nën këtë prag, "Shënuesi i dorës" aktivizon modelin e zbulimit të pëllëmbës. Përndryshe, një algoritëm i lehtë i gjurmimit të dorës përcakton vendndodhjen e dorës(ave) për zbulimet e mëvonshme të pikës referimi. 0.0 - 1.0 0.5
minTrackingConfidence Rezultati minimal i besimit që gjurmimi i dorës të konsiderohet i suksesshëm. Ky është pragu kufizues IoU i kutisë midis duarve në kuadrin aktual dhe kuadrit të fundit. Në modalitetin "Video" dhe "Transmetim" të "Hand Landmarker", nëse gjurmimi dështon, Hand Landmarker aktivizon zbulimin me dorë. 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 referuese të dorës në imazhe në çdo format të mbështetur nga shfletuesi pritës. Detyra trajton gjithashtu parapërpunimin e hyrjes së të dhënave, duke përfshirë ndryshimin e madhësisë, rrotullimin dhe normalizimin e vlerës. Për të zbuluar pikat referuese të dorës në video, mund të përdorni API-në për të përpunuar me shpejtësi një kornizë në një kohë, duke përdorur vulën kohore të kornizës për të përcaktuar se kur shfaqen pikat referuese të dorës brenda videos.

Drejtoni detyrën

Shënuesi i dorës përdor metodat detect() (me image e modalitetit të ekzekutimit ) dhe detectForVideo() (me video në modalitetin e ekzekutimit ) për të nxjerrë përfundime. Detyra përpunon të dhënat, përpiqet të zbulojë shenjat e dorës dhe më pas raporton rezultatet.

Thirrjet në metodat Hand Landmarker detect() dhe detectForVideo() ekzekutohen në mënyrë sinkronike dhe bllokojnë lidhjen e ndërfaqes së përdoruesit. Nëse zbuloni pika referimi të dorës në kornizat video nga kamera e një pajisjeje, çdo zbulim bllokon lidhjen kryesore. Ju mund ta parandaloni këtë duke zbatuar punëtorët e uebit për të ekzekutuar metodat detect() dhe detectForVideo() në një thread tjetër.

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

Imazhi 

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ë zbatim më të plotë të ekzekutimit të një detyre Hand Landmarker, shihni shembullin e kodit .

Trajtoni dhe shfaqni rezultatet

Shënuesi i dorës gjeneron një objekt të rezultatit të pikës së dorës për çdo ekzekutim zbulimi. Objekti i rezultatit përmban pika referimi të dorës në koordinatat e imazhit, pikë referimi të dorës në koordinatat botërore dhe dorëzimin (dora e majtë/djathtas) e duarve të zbuluara.

Më poshtë tregon një shembull të të dhënave dalëse nga kjo detyrë:

Dalja HandLandmarkerResult përmban tre komponentë. Çdo komponent është një grup, ku secili element përmban rezultatet e mëposhtme për një dorë të vetme të zbuluar:

  • Duartësia

    Duartësia përfaqëson nëse duart e zbuluara janë duart e majta apo të djathta.

  • Pikat e referimit

    Ka 21 pika referimi, 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, respektivisht. 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 kamerës është pikë referimi. Madhësia e z përdor përafërsisht të njëjtën shkallë si x .

  • Monumentet e botës

    21 pikat referuese të dorës janë paraqitur gjithashtu në koordinatat 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ë daljes së detyrës:

Një dorë në një lëvizje gishti lart me strukturën skeletore të dorës të përcaktuar

Shembulli i kodit Hand Landmarker tregon se si të shfaqen rezultatet e kthyera nga detyra, shikoni shembullin e kodit