Udhëzues për njohjen e gjesteve për ueb

Detyra e Njohësit të Gjesteve MediaPipe ju lejon të njihni gjestet e duarve në kohë reale dhe ofron rezultatet e gjesteve të duarve të njohura dhe pikat referuese të duarve të zbuluara. Këto udhëzime ju tregojnë se si të përdorni Njohësin e Gjesteve për aplikacionet e uebit dhe JavaScript.

Mund ta shihni këtë detyrë në veprim duke parë demonstrimin . 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 Gesture Recognizer ofron një implementim të plotë të kësaj detyre në JavaScript për referencën tuaj. Ky kod ju ndihmon ta testoni këtë detyrë dhe të filloni ndërtimin e aplikacionit tuaj të njohjes së gjesteve. Mund ta shikoni, ekzekutoni dhe modifikoni shembullin e Gesture Recognizer 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 Gesture Recognizer. 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 uebin .

Paketat JavaScript

Kodi i Njohësit të Gjesteve ë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 e Njohësit të Gjesteve MediaPipe 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 Njohësin e Gjesteve, shihni seksionin Modele të përmbledhjes së detyrës.

Zgjidhni dhe shkarkoni modelin, dhe pastaj ruajeni atë brenda direktorisë së projektit tuaj:

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

Krijo detyrën

Përdorni një nga funksionet createFrom...() të Gesture Recognizer 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 Njohësin e Gjesteve 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:

// Create task for image file processing:
const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "
);
const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"
  },
  numHands: 2
});

Opsionet e konfigurimit

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

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`
`num_hands`	Numri maksimal i duarve mund të zbulohet nga `GestureRecognizer` .	`Any integer > 0`	`1`
`min_hand_detection_confidence`	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`
`min_hand_presence_confidence`	Rezultati minimal i besimit të rezultatit të pranisë së dorës në modelin e zbulimit të pikës së referimit të dorës. Në modalitetin Video dhe modalitetin e transmetimit të drejtpërdrejtë të Njohësit të Gjesteve, nëse rezultati i besimit të pranisë së dorës nga modeli i pikës së referimit të dorës është nën këtë prag, ai aktivizon modelin e zbulimit të pëllëmbës. Përndryshe, një algoritëm i lehtë i gjurmimit të dorës përdoret për të përcaktuar vendndodhjen e dorës(ve) për zbulimin e mëvonshëm të pikës së referimit.	`0.0 - 1.0`	`0.5`
`min_tracking_confidence`	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ë Njohësit të Gjesteve, nëse gjurmimi dështon, Njohësi i Gjesteve aktivizon zbulimin e dorës. Përndryshe, zbulimi i dorës anashkalohet.	`0.0 - 1.0`	`0.5`
`canned_gestures_classifier_options`	Opsionet për konfigurimin e sjelljes së klasifikuesit të gjesteve të konservuara. Gjestet e konservuara janë `["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"]` Lokalizimi i emrave të ekranit: lokalizimi që do të përdoret për emrat e ekranit të specifikuar përmes Metadatave të Modelit TFLite, nëse ka. Rezultatet maksimale: numri maksimal i rezultateve të klasifikimit me rezultatet më të larta që duhen kthyer. Nëse < 0, do të kthehen të gjitha rezultatet e disponueshme. Pragu i pikëve: rezultati nën të cilin rezultatet refuzohen. Nëse vendoset në 0, do të kthehen të gjitha rezultatet e disponueshme. Lista e lejuar e kategorive: lista e lejuar e emrave të kategorive. Nëse nuk është bosh, rezultatet e klasifikimit kategoria e të cilave nuk është në këtë grup do të filtrohen. Reciprokisht përjashtuese me listën e deny-t. Lista e mohimit të kategorive: lista e mohimit e emrave të kategorive. Nëse nuk është bosh, rezultatet e klasifikimit kategoria e të cilave është në këtë grup do të filtrohen. Reciprokisht përjashtuese me listën e lejimeve.	Lokalizimi i emrave të ekranit: `any string` Rezultatet maksimale: `any integer` Pragu i pikëve: `0.0-1.0` Lista e lejimeve të kategorive: `vector of strings` Lista e mohimeve të kategorive: `vector of strings`	Lokalizimi i emrave të ekranit: `"en"` Rezultatet maksimale: `-1` Pragu i pikëve: `0` Lista e lejuar e kategorive: bosh Lista e mohimeve të kategorive: bosh
`custom_gestures_classifier_options`	Opsione për konfigurimin e sjelljes së klasifikuesit të gjesteve të personalizuara. Lokalizimi i emrave të ekranit: lokalizimi që do të përdoret për emrat e ekranit të specifikuar përmes Metadatave të Modelit TFLite, nëse ka. Rezultatet maksimale: numri maksimal i rezultateve të klasifikimit me rezultatet më të larta që duhen kthyer. Nëse < 0, do të kthehen të gjitha rezultatet e disponueshme. Pragu i pikëve: rezultati nën të cilin rezultatet refuzohen. Nëse vendoset në 0, do të kthehen të gjitha rezultatet e disponueshme. Lista e lejuar e kategorive: lista e lejuar e emrave të kategorive. Nëse nuk është bosh, rezultatet e klasifikimit kategoria e të cilave nuk është në këtë grup do të filtrohen. Reciprokisht përjashtuese me listën e deny-t. Lista e mohimit të kategorive: lista e mohimit e emrave të kategorive. Nëse nuk është bosh, rezultatet e klasifikimit kategoria e të cilave është në këtë grup do të filtrohen. Reciprokisht përjashtuese me listën e lejimeve.	Lokalizimi i emrave të ekranit: `any string` Rezultatet maksimale: `any integer` Pragu i pikëve: `0.0-1.0` Lista e lejimeve të kategorive: `vector of strings` Lista e mohimeve të kategorive: `vector of strings`	Lokalizimi i emrave të ekranit: `"en"` Rezultatet maksimale: `-1` Pragu i pikëve: `0` Lista e lejuar e kategorive: bosh Lista e mohimeve të kategorive: bosh

Përgatitni të dhënat

Njohësi i Gjesteve mund të njohë gjestet 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ë njohur gjestet 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 gjestet brenda videos.

Ekzekuto detyrën

Njohësi i Gjesteve përdor metodat recognize() (me modalitetin e ekzekutimit 'image' ) dhe recognizeForVideo() (me modalitetin e ekzekutimit 'video' ) për të shkaktuar përfundime. Detyra përpunon të dhënat, përpiqet të njohë gjestet e duarve dhe më pas raporton rezultatet.

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 gestureRecognitionResult = gestureRecognizer.recognize(image);

Video

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

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

  if (video.currentTime !== lastVideoTime) {
    const gestureRecognitionResult = gestureRecognizer.recognizeForVideo(video);
    processResult(gestureRecognitionResult);
    lastVideoTime = video.currentTime;
  }

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

Thirrjet në metodat e Njohësit të Gjesteve recognize() dhe recognizeForVideo() funksionojnë në mënyrë sinkrone dhe bllokojnë fijen e ndërfaqes së përdoruesit. Nëse i njihni gjestet në kuadro video nga kamera e një pajisjeje, çdo njohje do të bllokojë fijen kryesore. Mund ta parandaloni këtë duke zbatuar punëtorët e uebit për të ekzekutuar metodat recognize() dhe recognizeForVideo() në një fije tjetër.

Për një implementim më të plotë të ekzekutimit të një detyre të Njohësit të Gjesteve, shihni shembullin .

Trajtoni dhe shfaqni rezultatet

Njohësi i Gjesteve gjeneron një objekt rezultati të zbulimit të gjesteve për çdo ekzekutim njohjeje. Objekti i rezultatit përmban pika referimi të duarve në koordinatat e imazhit, pika referimi të duarve në koordinatat botërore, dorën e majtë/të djathtë dhe kategoritë e gjesteve të duarve të zbuluara.

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

Rezultati GestureRecognizerResult që rezulton përmban katër komponentë, dhe secili komponent është një varg, ku secili element përmban rezultatin e zbuluar të një dore të vetme të zbuluar.

Dora e përdorur
Dora e përdorur tregon nëse duart e zbuluara janë të majta apo të djathta.
Gjestet
Kategoritë e gjesteve të njohura të duarve të zbuluara.
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.

GestureRecognizerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Gestures:
    Categories #0:
      score        : 0.76893
      categoryName : Thumb_Up
  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)

Imazhet e mëposhtme tregojnë një vizualizim të rezultatit të detyrës:

Një dorë me lëvizje të gishtit të madh lart me strukturën skeletore të dorës të hartuar

Për një zbatim më të plotë të krijimit të një detyre të Njohësit të Gjesteve, shihni shembullin .