Gjenkjenne et ansikt ved hjelp av JavaScript

Hva er mulighetene? Det finnes mange løsninger for maskinlæring.

Når du ser deg rundt etter måter å identifisere ansikter på, kommer du med en rekke løsninger. Mange er generiske, noen er grensesnitt til eksisterende rammer. For JavaScript har du noen få populære å velge mellom. Du kan til og med forveksles av en rekke løsninger. Selv for ansiktsgjenkjenning har du flere alternativer. Mange, mest, er faktisk for Python, men du kan også finne noen få i JavaScript. Rammer som er rettet spesielt mot ansiktsgjenkjenning, er ansikt, JS og ansiktsgjenkjenning.JS. Sistnevnte anses som foreldet skjønt. Den minste, med tanke på kode, er Pico.JS med omtrent 200 kodelinjer Det kan oppdage ditt eget ansikt ved å bruke webkameraet ditt. Pico -koden kommer allerede med et trent sett, noe som betyr at den ikke vil forbedre seg mens du bruker det. For de nysgjerrige er de forhåndsutdannede klassifiseringskaskadene tilgjengelige på GitHub-depotet. Hvis du vil trene den selv, er det en læringsfunksjon du kan bruke. Dette er et C -program tilgjengelig på GitHub. Dette er en lang prosess for å fullføre det en interessant øvelse i stedet for noe nyttig. En av de mer interessante API-ene er ansikts-api.JS, denne bruker TensorFlow.JS for maskinlæringsdelen.

Hvordan virker det?

Det enkleste eksemplet på maskinlæring er et par parametere som kronbladene til irisblomsten. Dette er det vanligste innledende datasettet når du vil begynne å lære maskinlæring. Dataene kan oppsummeres i enkle tabeller.

Sepal lengde	Sepal bredde	Kronbladlengde	Kronbladbredde	Klasse
5.1	3.5	1.4	0.2	Iris Setosa
4.9	3.0	1.4	0.2	Iris Setosa
7.0	3.2	4.7	1.4	Iris Versicolor
6.4	3.2	4.5	1.5	Iris-versicolor
6.9	3.1	4.9	1.5	Iris-versicolor
6.3	3.3	6.0	2.5	Iris-Virginica
5.8	2.7	5.1	1.9	Iris-Virginica

Som du ser fra bordet, er det nå mulig å finne størrelsene som best samsvarer med en viss blomst. Dette er ikke en absolutt sannhet, men det kan bli veldig nøyaktig med nok datapunkter.

Spørsmålet blir nå: Hvordan representerer du et bilde som en lang liste over verdier? Eller et ansikt for den saks skyld? Vel, novellen er at du konverterer bildet til verdien av intensiteten til hver piksel. Fra og med derfra kan du bestemme hvor linjer og eller punkter går som skildrer et ansikt. Hva et ansikt faktisk er blitt bestemt av en forhåndsutdannet modell. Hvis du bruker det på en rekke bilder av personen du prøver å oppdage, kan en tabell som ligner på Iris One ovenfor, brukes til å bestemme hvilket ansikt den er.

Hvordan det faktisk fungerer er litt mer sammensatt enn det. For at du skal lage din egen løsning, må du bruke et bibliotek laget for det. Heldigvis er det mange gratis og open source -løsninger tilgjengelig.

Hva er mulighetene?

Det er mange biblioteker for bruk av JavaScript, en er ansikt-api.JS. De andre kan mer dyktige valg, men denne har en veldig enkel demoside. Du kan laste ned demosiden fra github. Siden inneholder biblioteket og demosidene. Hvis du vil starte på et dypere nivå, kan du sjekke ut TensorFlow og DLIB. Face-api bruker TensorFlow som et maskinlæringsbibliotek.

Når du har lastet ned alt fra GitHub, kan du bruke eksempler bibliotek til å utforske forskjellige metoder for ansiktsgjenkjenning.

Hva er brukssakene?

I industrien brukes ansiktsgjenkjenning for tilgangskontroll, deltakelseskontroller og annen sikkerhetsrelatert sak. I sosiale medienettverk kan ansiktet ditt tagges slik at du kan søke etter ansiktet ditt i stedet for navnet ditt. For ditt eget system kan du bruke det til tilgang til datamaskinen din og til og med kontrollere noen av applikasjonene dine.

Hva utvikler vi?

Vi lager et enkelt system for å oppdage et ansikt.

For å oppdage et ansikt, må du ha programvaren, bildene og en trent modell. Du kan trene modellen selv, og du bør, men for din spesifikke oppgave, kan du også trene en eksisterende modell på nytt. I dette eksemplet er modellen forhåndsutdannet og lastet ned.

For at koden skal fungere, må du samle prøven. I dette tilfellet bruker vi et webkamera, enkelt nok med HTML5. For å gjøre dette, legg til en videotag i HTML -koden.

Enkel rett? Men vent du trenger å kalle dette fra JavaScript også.

const video = dokument.getElementById ('Videoid')

Nå kan du bruke konstanten for å få strømmen din inn i JavaScript -koden. Lag en startvideo -funksjon.

funksjon startVideo ()
Navigator.MediaDevices.GetUserMedia (
Video: ,
Stream => video.SRCObject = Stream,
err => konsoll.Feil (feil)
)

Dette er en generell funksjon som ikke kaller Videoid, du må angi en funksjon som kaller den innkommende strømmen. En måte å fange strømmen er å bruke Promise -funksjoner.

Love.alle([
faceapi.garn.Tinyfacedetektor.LoadFromuri ('/Models'),
faceapi.garn.Facelandmark68net.LoadFromuri ('/Models'),
faceapi.garn.FacereCognitionNet.LoadFromuri ('/Models'),
faceapi.garn.FACEEEXPRESSIONNET.LoadFromuri ('/Models')
]).deretter (startvideo);

Promise -uttalelsen ovenfor vil nå kjøre StartVideo -funksjonen når strømmen er tilgjengelig. Endelig vil videoarrangementslytteren nedenfor kjøre funksjonene som er tilgjengelige fra Face API.

video.AddEventListener ('Play', () =>
const lerret = faceapi.CreateCanVasfrommedia (video);
dokument.kropp.vedlegg (lerret);
const displaysize = bredde: video.Bredde, høyde: video.høyde;
faceapi.MatchDimensions (lerret, displaySize);
setInterval (async () =>
const Detections = Await Faceapi.detectallfaces (video, ny
faceapi.TinyFacEDetectorOptions ()).WithFacelandmarks ().withFaceExpressions ();
const recizedDetections = faceapi.resizeresults (deteksjoner, displaySize);
lerret.getContext ('2d').ClearRect (0, 0, lerret.bredde, lerret.høyde);
faceapi.tegne.tegneDeteksjoner (lerret, realizeDetections);
faceapi.tegne.DrawFacelandmarks (lerret, REIZEDDETECTIONS);
faceapi.tegne.DrawFaceExpressions (lerret, REIDEDEDETECTION);
, 100);
);

Hva trenger du i utviklingsmiljøet ditt?

Siden vi bruker JavaScript, trenger vi NodeJs, Node og NPM (eller lignende). Din beste taktikk her er å lage din utviklingskatalog og deretter klone depotet fra GitHub. Eksemplene er i eksemplet katalogen, så flytt dit.

$ cd eksempler/eksempel-nettleser/

Inne i katalogen må du installere pakkene ved hjelp av NPM.

$ npm installasjon

Siden du er i katalogen der du lastet ned Face-api.JS, npm finner det du trenger å laste ned. Neste kan du starte demoen og åpne den i nettleseren din.

$ npm start

Den siste linjen i utgangen viser porten du trenger å bruke i nettleseren din. Disse eksemplene er vanligvis av rollebesetningen til Big Bang -teorien, men du kan laste inn dine egne bilder og til og med bruke webkameraet for å bestemme alderen din.

Disse demoene er morsomme å spille med, men den virkelige verdien er at koden er tilgjengelig for å studere.

I filene skilles JavaScriptet i en egen katalog for å gjøre det enkelt å bruke. For at sidene dine skal fungere, må du laste inn i API -en og alle skriptene du skal bruke.

Konklusjon

Dette er et veldig kort eksempel på hvordan du bruker eksisterende API -er for å oppdage ansikter og gjenkjenne dem. Den virkelig fascinerende delen er å finne nyttige applikasjoner for teknologien. Hva vil du bruke den til? Tilgang til din egen maskin eller bare noen spesifikke data eller applikasjoner?