Håndpose er en teknologi som brukes til å oppdage og spore håndposisjoner og bevegelser. Den har et bredt spekter av bruksområder, fra VR og AR-opplevelser til menneske-datamaskin interaksjon. Ved å bruke ml5.js-biblioteket kan vi laste inn en forhåndstrent Handpose-modell i vårt p5.js-skript for å oppdage og spore hånden vår ved hjelp av webkameraet.
OBS: Husk å tillate bruk av webkamera i nettleseren din når du blir bedt om det.
Del 1: Last inn Handpose-modellen
La oss begynne med å sette opp vårt p5.js-skisse som laster ml5.js-biblioteket. Vi vil også ha tilgang til video fra våre webkameraer, så sørg for å tillate nettleseren å få tilgang til webkameraet ditt.
Vi kan laste inn den forhåndstrente Handpose-modellen fra ml5 og definere en tilbakeringingsfunksjon for å la oss vite når modellen har lastet inn vellykket. Du kan legge merke til at modellen kan ta litt tid å laste. I forhold til de andre forhåndstrente modellene vi har brukt så langt i disse verkstedene, er Handpose på den større siden og krever litt mer minne.
Del 2: Detektering
Nå som modellen er lastet inn, vil vi implementere en funksjon for å tegne nøkkelpunktene til hånden vår som forutsagt av modellen. For å gjøre dette vil vi lage en nøstet for-loop som først traverserer prediksjonene gitt av modellen i hver videoramme, deretter hvert nøkkelpunkt oppdaget i hver predikasjon.
Hvis vi ser på verdiene som returneres av Handpose ser vi at de er i form av en liste av attributter. For nå er vi interessert i attributtet som kalles landmarks. Det er 21 landmarks for hele hånden, og hvert landmark inneholder tre verdier, x-, y- og z-posisjonen til nøkkelpunktet. Vi vil bruke x- og y-posisjonen til hvert nøkkelpunkt til å tegne en liten sirkel på lerreter vårt ved hjelp av p5.js-funksjonen ellipse.
Del 3: Varme hender / kalde hender
Vi kan gjøre dette litt mer interessant å se på ved å skjule vår video og fokusere på de oppdagede punktene. Vi vil implementere to forskjellige visualiseringer, en for å representere kalde hender og en for å representere varme hender. Først lager vi noen fargegraderinger ved hjelp av color- og lerpColor-funksjonene.
Vi kan også gjøre et lite knep i tegnefunksjonen vår ved å legge til en alfa-verdi til bakgrunnen vår, som vil tillate oss å skape et spøkelsesaktig spor som følger håndbevegelsen. Ettersom tegnefunksjonen kalles i en løkke mens skriptet kjører, vil den overskrive det forrige bildet på lerretet vårt. Ved å sette en lav alfa-verdi gjør vi bakgrunnen litt gjennomsiktig, noe som gir inntrykk av et spor.
Del 4: Bildeklassifisering
La oss nå ta dette et skritt videre ved å legge til litt bildeklassifisering i miksen. Her vil vi bruke en skisse vi laget i vårt forrige verksted for å trene og lagre en bildeklassifisør for å oppdage når vi viser en knyttneve og når vi viser håndflatene våre.
Denne klassifisøren har to klasser, A og B. Ved å klikke på knappene for å legge til bilder samler vi inn bilder fra vår videofeed for å bruke i treningen av bildeklassifisøren. Vi kan samle rundt 30 bilder eller så for klasse A med håndflatene opp og det samme for klasse B som viser vår lukkede knyttneve. Det er nyttig å bevege hånden litt for å sikre at modellen har sett litt variasjon av begge klassene.
Vi kan deretter trykke på train-knappen for å trene klassifisøren og sjekke resultatene ved å klikke på start guessing-knappen. Når vi er fornøyd med nøyaktigheten kan vi lagre modellfilene for senere.
Lagre-knappen vil utløse klassifisøren for å lage to filer, model.json og model_weights.bin. Den første beskriver strukturen på modellen, og den andre inneholder vektene som kommer fra treningen vår. Sørg for å tillate nettleseren din å laste ned flere filer fra p5-editoren når du blir bedt om det!
Del 5: Sette alt sammen
Nå kan vi legge til funksjonalitet for å laste inn en trent bildeklassifisør i Handpose-skriptet vårt. Først vil vi laste ml5 feature extractor og definere strukturen på vår 2-klasses klassifisør. Vi vil også legge til en laste-knapp og en prediker-knapp. Laste-funksjonen åpner en filutforsker og lar oss velge de to filene vi opprettet.
Ved å implementere en lignende logikk som vi brukte i vårt verksted for bildeklassifisering vil vi definere to boolske verdier, varme og kalde, og sette dem begge til falske i starten av skriptet vårt. Når klassifisøren vår oppdager en av klassene, skal den tilsvarende verdien bli sann.
Når bildeklassifisøren vår har lastet inn filene våre, kan vi trykke på start gjetting-knappen. Ved hjelp av vår klassifisør vil vi nå veksle mellom vår varme og kalde håndsporing animasjon uten å trenge å trene modellen på nytt.
Å gå videre:
Utforsk andre prosjekter med hånd- og kroppspose!
- Bruk PoseNet i stedet for Handpose for å oppdage full kroppsbevegelse som i DanceOn-prosjektet.
- Ta dette arbeidet et skritt videre ved å implementere ytterligere oppdagelse av tegnspråk.