Riconoscere un volto usando JavaScript

Quali sono le opzioni? Esistono molte soluzioni per l'apprendimento automatico.

Quando cerchi i modi per identificare i volti, ti viene in mente una serie di soluzioni. Molti sono generici, alcuni sono interfacce per i framework esistenti. Per JavaScript, hai alcuni popolari tra cui scegliere. Potresti anche essere confuso dalla serie di soluzioni. Anche per il riconoscimento del viso hai diverse opzioni. Molti, la maggior parte in realtà, sono per Python, ma puoi anche trovarne alcuni in JavaScript. I framework che sono rivolti specificamente al riconoscimento facciale sono volti, JS e riconoscimento facciale.js. Quest'ultimo è considerato obsoleto però. Il più piccolo, in termini di codice, è pico.JS con circa 200 righe di codice può rilevare la tua faccia usando la tua webcam. Il codice Pico viene già fornito con un set addestrato, il che significa che non migliorerà mentre lo stai usando. Per i curiosi, le cascate di classificazione pre-addestrate sono disponibili sul loro repository GitHub. Se vuoi addestrarlo da solo, c'è una funzione di apprendimento che puoi usare. Questo è un programma C disponibile su GitHub. Questo è un lungo processo da completare rendendolo un esercizio interessante piuttosto che qualcosa di utile. Una delle API più interessanti è il viso-API.JS, questo usa Tensorflow.JS per la parte di apprendimento automatico.

Come funziona?

L'esempio più semplice di apprendimento automatico è una coppia di parametri come i petali del fiore dell'iride. Questo è il set di dati iniziali più comune quando si desidera iniziare a apprendere l'apprendimento automatico. I dati possono essere riassunti in tabelle semplici.

Lunghezza del sepal	Larghezza del sepal	Lunghezza del petalo	Larghezza del petalo	Classe
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

Come puoi vedere dal tavolo, ora è possibile trovare le dimensioni che si abbinano meglio a un certo fiore. Questa non è una verità assoluta ma può diventare molto accurata con abbastanza punti dati.

La domanda ora diventa: come si rappresenta un'immagine come un lungo elenco di valori? O una faccia per quella materia? Bene, il racconto è che converti l'immagine al valore dell'intensità di ogni pixel. A partire da lì, puoi decidere dove vanno le linee o i punti che raffigurano una faccia. Ciò che un volto è effettivamente è stato determinato da un modello pre-allenato. Se lo applichi a una serie di immagini della persona che stai cercando di rilevare, allora una tabella simile a quella di Iris sopra può essere usata per determinare quale faccia lo è.

Come funziona effettivamente è un po 'più complesso di così. Per creare la tua soluzione, è necessario utilizzare una libreria realizzata per questo. Fortunatamente, ci sono molte soluzioni gratuite e open source disponibili.

Quali sono le opzioni?

Ci sono molte librerie per l'utilizzo di JavaScript, una è Face-API.js. Gli altri possono fare scelte più capaci, ma questa ha una pagina demo molto semplice. Puoi scaricare la pagina Demo da GitHub. La pagina contiene la biblioteca e le pagine demo. Se vuoi iniziare a un livello più profondo, puoi controllare Tensorflow e DLIB. Face-API utilizza Tensorflow come libreria di apprendimento automatico.

Una volta scaricato tutto da GitHub, puoi utilizzare la libreria di esempi per esplorare diversi metodi per il riconoscimento facciale.

Quali sono i casi d'uso?

Nel settore, il riconoscimento del viso viene utilizzato per il controllo degli accessi, i controlli delle presenze e altri casi relativi alla sicurezza. Nei social media, il tuo viso può essere taggato in modo da poter cercare il tuo viso piuttosto che il tuo nome. Per il tuo sistema, puoi usarlo per l'accesso al tuo computer e persino controllare alcune delle tue applicazioni.

Cosa stiamo sviluppando?

Stiamo realizzando un sistema semplice per rilevare una faccia.

Per rilevare una faccia, è necessario disporre del software, delle immagini e di un modello addestrato. Puoi addestrare il modello da solo e dovresti, ma per il tuo compito specifico, puoi anche rinunciare a un modello esistente. In questo esempio, il modello è pre-allenato e scaricato.

Affinché il codice funzioni, è necessario raccogliere il campione. In questo caso utilizziamo una webcam, abbastanza semplice con HTML5. Per fare questo, aggiungi un video tag nel codice HTML.

Semplice diritto? Ma aspetta che tu debba chiamarlo anche dal tuo JavaScript.

const video = documento.getElementById ('Videoid')

Ora puoi usare la costante per ottenere il tuo flusso nel codice JavaScript. Crea una funzione startvideo.

funzione startvideo ()
navigatore.MediaDevices.getusermedia (
video: ,
stream => video.srCobject = stream,
err => console.Errore (err)
)

Questa è una funzione generale che non chiama il videoid, è necessario impostare una funzione che chiama il flusso in arrivo. Un modo per catturare il flusso è utilizzare le funzioni promettenti.

Promettere.Tutto([
Facea.reti.Tinyfacedector.loadfromuri ('/models'),
Facea.reti.Facelandmark68net.loadfromuri ('/models'),
Facea.reti.facerecognitionnet.loadfromuri ('/models'),
Facea.reti.FaceExpressionNet.loadfromuri ('/models')
]).Quindi (startvideo);

L'istruzione Promise sopra ora eseguirà la funzione StartVideo quando è disponibile il flusso. Infine, l'ascoltatore di eventi video qui sotto eseguirà le funzioni disponibili da The Face API.

video.addEventListener ('Play', () =>
const canvas = fapea.CreateCanvasFrommedia (video);
documento.corpo.append (tela);
const displaysize = larghezza: video.larghezza, altezza: video.altezza ;
Facea.matchdimensions (tela, displaySize);
setInterval (async () =>
Const Detections = Aspetta Faceapi.DetectallFaces (video, nuovo
Facea.TinyfacedeTectorOptions ()).WithFacelandmarks ().withFaceExpressions ();
const RESIEDDections = fapea.resizesults (rilevamenti, display);
tela.getContext ('2D').ClearRect (0, 0, tela.larghezza, tela.altezza);
Facea.disegno.Drawdetections (tela, resizeddetections);
Facea.disegno.DrawFacelandMarks (tela, resizeddetections);
Facea.disegno.DrawFaceExpressions (tela, resizeddections);
, 100);
);

Di cosa hai bisogno nel tuo ambiente di sviluppo?

Poiché stiamo usando JavaScript, abbiamo bisogno di nodejs, nodo e NPM (o simile). La tua migliore tattica qui è creare la tua directory di sviluppo e quindi clonare il repository da github. Gli esempi sono nella directory degli esempi, quindi muoviti lì.

$ CD Esempi/Esempio-browser/

All'interno della directory è necessario installare i pacchetti utilizzando NPM.

$ npm Installa

Dato che sei nella directory in cui hai scaricato Face-API.JS, NPM troverà ciò che devi scaricare. Successivamente puoi avviare la demo e aprirla nel tuo browser.

$ npm inizia

L'ultima riga dell'uscita mostra la porta che è necessario utilizzare nel browser. Questi esempi sono generalmente del cast di Big Bang Theory, ma puoi caricare nelle tue immagini e persino utilizzare la webcam per determinare la tua età.

Queste demo sono divertenti con cui giocare, ma il valore reale è che il codice è disponibile per lo studio.

Nei file, i javascript sono separati in una directory separata per renderlo facile da usare. Affinché le tue pagine funzionino devi caricare nell'API e tutti gli script che utilizzerai.

Conclusione

Questo è un esempio molto breve di come utilizzare le API esistenti per rilevare i volti e riconoscerle. La parte davvero affascinante è trovare applicazioni utili per la tecnologia. Per cosa lo userai? Accesso alla propria macchina o solo alcuni dati o applicazioni specifiche?