Rozpoznanie twarzy za pomocą JavaScript

Jakie są opcje? Istnieje wiele rozwiązań do uczenia maszynowego.

Kiedy rozglądasz się za sposobami identyfikacji twarzy, wymyślisz wiele rozwiązań. Wiele jest ogólnych, niektóre są interfejsami do istniejących ram. W przypadku JavaScript masz kilka popularnych do wyboru. Możesz nawet być zdezorientowany szeregiem rozwiązań. Nawet w przypadku rozpoznawania twarzy masz kilka opcji. Wiele, w rzeczywistości, jest dla Pythona, ale można również znaleźć kilka w JavaScript. Ramy skierowane specjalnie na twarz to twarz, JS i rozpoznanie twarzy.JS. Ten ostatni jest uważany za przestarzały. Najmniejszym pod względem kodu jest Pico.JS z około 200 wierszami kodu może wykryć własną twarz za pomocą kamery internetowej. Kod Pico jest już wyposażony w wyszkolony zestaw, co oznacza, że ​​nie poprawi się, gdy go używasz. Dla ciekawych wstępnie wyszkolone kaskady klasyfikacyjne są dostępne w ich repozytorium Github. Jeśli chcesz go wyszkolić, istnieje funkcja nauki, której możesz użyć. To jest program C dostępny na GitHub. Jest to długi proces ukończenia, co czyni go interesującym ćwiczeniem, a nie czymś przydatnym. Jednym z bardziej interesujących interfejsów API jest twarz-api.JS, ten używa TensorFlow.JS dla części uczenia maszynowego.

Jak to działa?

Najprostszym przykładem uczenia maszynowego jest para parametrów, takich jak płatki kwiatu tęczówki. Jest to najczęstszy początkowy zestaw danych, gdy chcesz uczyć się uczenia maszynowego. Dane można podsumować w prostych tabelach.

Długość seda	Szerokość sepalowa	Długość płatków	Szerokość płatków	Klasa
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-Reversicolor
6.9	3.1	4.9	1.5	Iris-Reversicolor
6.3	3.3	6.0	2.5	Iris-Virginica
5.8	2.7	5.1	1.9	Iris-Virginica

Jak widać ze stołu, można teraz znaleźć rozmiary, które najlepiej pasują do określonego kwiatu. To nie jest absolutna prawda, ale może być bardzo dokładna z wystarczającą ilością punktów danych.

Pytanie pojawia się teraz: jak reprezentujesz obraz jako długą listę wartości? Lub twarz w tej sprawie? Krótka historia polega na przekształcaniu obrazu na wartość intensywności każdego piksela. Począwszy od stamtąd, możesz zdecydować, dokąd idą linie i lub punkty, które przedstawiają twarz. To, co właściwie jest twarz, zostało określone przez modelu wstępnie wyszkoloną. Jeśli zastosujesz to do wielu zdjęć osoby, którą próbujesz wykryć, wówczas do ustalenia, która jest twarzą.

Jak to naprawdę działa, jest nieco bardziej złożone. Aby stworzyć własne rozwiązanie, musisz użyć do niego biblioteki. Na szczęście dostępnych jest wiele bezpłatnych i open source.

Jakie są opcje?

Istnieje wiele bibliotek do korzystania z JavaScript, jedna to Face-api.JS. Inne mogą bardziej zdolne wybór, ale ta ma bardzo prostą stronę demo. Możesz pobrać stronę demo z Github. Strona zawiera bibliotekę i strony demo. Jeśli chcesz zacząć na głębszym poziomie, możesz sprawdzić TensorFlow i DLIB. Face-API używa TensorFlow jako biblioteki uczenia maszynowego.

Po pobraniu wszystkiego z GitHub możesz użyć biblioteki przykładów, aby zbadać różne metody rozpoznania twarzy.

Jakie są przypadki użycia?

W branży rozpoznawanie twarzy jest wykorzystywane do kontroli dostępu, kontroli frekwencji i innej sprawy związanej z bezpieczeństwem. W sieciach społecznościowych twarz można oznaczyć, abyś mógł szukać twarzy, a nie imienia. W przypadku własnego systemu możesz go używać do dostępu do komputera, a nawet kontrolować niektóre z swoich aplikacji.

Co rozwijamy?

Tworzymy prosty system do wykrycia twarzy.

Aby wykryć twarz, musisz mieć oprogramowanie, obrazy i wyszkolony model. Możesz sam trenować model i powinieneś, ale dla swojego konkretnego zadania możesz również ponownie wyszkolić istniejący model. W tym przykładzie model jest wstępnie wyszkolony i pobierany.

Aby kod działał, musisz zebrać próbkę. W takim przypadku używamy kamery internetowej, wystarczająco prostej z HTML5. Aby to zrobić, dodaj znacznik wideo w kodzie HTML.

Proste prawo? Ale poczekaj, aby zadzwonić również ze swojego JavaScript.

const video = dokument.getElementById („videoid”)

Teraz możesz użyć stałej, aby wprowadzić strumień do kodu JavaScript. Utwórz funkcję StartVideo.

funkcja startVideo ()
nawigator.Medidevices.getusermedia (
wideo: ,
Stream => wideo.srcObject = Stream,
err => konsola.Błąd (err)
)

Jest to ogólna funkcja, która nie wywołuje videoid, musisz ustawić funkcję, która wywołuje przychodzący strumień. Sposobem na złapanie strumienia jest użycie funkcji obietnicy.

Obietnica.Wszystko([
faeapi.sieci.TinyFaceDetector.loadFromuri ('/modele'),
faeapi.sieci.FACELANDMark68net.loadFromuri ('/modele'),
faeapi.sieci.FACERECognitionnet.loadFromuri ('/modele'),
faeapi.sieci.FaceExpressionnet.loadFromuri ('/modele')
]).następnie (startVideo);

Powyższe oświadczenie o obietnicy będzie teraz uruchomić funkcję startVideo, gdy strumień jest dostępny. Wreszcie, poniższy słuchacz zdarzeń wideo uruchomi funkcje dostępne w API Face.

wideo.addEventListener („Play”, () =>
const canvas = faeapi.CreateCanvasfrommedia (wideo);
dokument.ciało.append (Canvas);
const wyświetla się = szerokość: wideo.szerokość, wysokość: wideo.wysokość ;
faeapi.MatchDimensions (płótno, wyświetlanie);
setInterval (async () =>
Wykrywanie conster = czekaj na faeapi.detectallfaces (wideo, nowe
faeapi.TinyFaceDetectorOptions ()).z Facelandmarks ().zfaceExpressions ();
constreDedDetections = faeapi.RESIZERESULTS (detekcje, wyświetla się);
płótno.getContext („2d”).clearRect (0, 0, płótno.szerokość, płótno.wysokość);
faeapi.rysować.Drawdetections (płótno, rozmiaruDetekcje);
faeapi.rysować.DrawfaCelandMarks (płótno, rozmiaruDetections);
faeapi.rysować.DrawfaceExpressions (płótno, rozmiaruDetekcje);
, 100);
);

Czego potrzebujesz w swoim środowisku programistycznym?

Ponieważ używamy JavaScript, potrzebujemy nodejs, węzła i NPM (lub podobny). Twoją najlepszą taktyką jest utworzenie katalogu rozwoju, a następnie sklonowanie repozytorium z GitHub. Przykłady znajdują się w katalogu przykładów, więc przenieś się tam.

$ CD Przykłady/przykład-przeglądarka/

W katalogu musisz zainstalować pakiety za pomocą NPM.

$ npm instalacja

Ponieważ jesteś w katalogu, w którym pobrałeś Face-API.JS, NPM znajdzie to, czego potrzebujesz do pobrania. Następnie możesz rozpocząć demo i otworzyć je w przeglądarce.

$ npm start

Ostatnia linia na wyjściu pokazuje port, którego musisz użyć w przeglądarce. Te przykłady są zwykle obsady teorii Wielkiego Wybuchu, ale możesz załadować własne zdjęcia, a nawet korzystać z kamery internetowej, aby określić swój wiek.

Te dema są fajne do zabawy, ale prawdziwą wartością jest to, że kod jest dostępny do nauki.

W plikach JavaScript są oddzielone w osobnym katalogu, aby ułatwić użycie. Aby Twoje strony działały, musisz załadować API i wszystkie skrypty, których będziesz używać.

Wniosek

To bardzo krótki przykład używania istniejących interfejsów API do wykrywania twarzy i rozpoznawania ich. Naprawdę fascynującą częścią jest znalezienie przydatnych aplikacji dla technologii. Do czego go użyjesz? Dostęp do własnego komputera lub tylko określone dane lub aplikacja?