Erkennen eines Gesichts mit JavaScript

Was sind die Möglichkeiten? Es gibt viele Lösungen für maschinelles Lernen.

Wenn Sie sich nach Möglichkeiten ansehen, Gesichter zu identifizieren, finden Sie eine Vielzahl von Lösungen. Viele sind allgemein, einige sind Schnittstellen zu vorhandenen Frameworks. Für JavaScript haben Sie einige beliebte zur Auswahl. Sie können sogar durch die Auswahl an Lösungen verwirrt sein. Auch für die Gesichtserkennung haben Sie mehrere Optionen. Viele, die meisten, sind für Python, aber Sie können auch einige in JavaScript finden. Frameworks, die speziell auf die Gesichtserkennung abzielen, sind Gesicht, JS und Gesichtserkennung.JS. Letzteres gilt jedoch als veraltet. Der kleinste in Bezug auf den Code ist Pico.JS mit etwa 200 Codezeilen kann Ihr eigenes Gesicht mit Ihrer Webcam erkennen. Der Pico -Code wird bereits mit einem geschulten Set geliefert, was bedeutet, dass er sich nicht verbessert, während Sie ihn verwenden. Für die Neugierigen sind die vorgebildeten Klassifizierungskaskaden in ihrem Github-Repository verfügbar. Wenn Sie es selbst trainieren möchten, können Sie eine Lernfunktion verwenden, die Sie verwenden können. Dies ist ein C -Programm, das auf GitHub verfügbar ist. Dies ist ein langer Prozess, um es zu einer interessanten Übung und nicht zu etwas Nützlichem zu machen. Einer der interessanteren API ist Face-API.JS, dieser verwendet Tensorflow.JS für den Teil des maschinellen Lernens.

Wie funktioniert es?

Das einfachste Beispiel für maschinelles Lernen ist ein Parameterpaar wie die Blütenblätter der Irisblume. Dies ist der häufigste anfängliche Datensatz, wenn Sie mit dem Lernen maschinelles Lernen beginnen möchten. Die Daten können in einfachen Tabellen zusammengefasst werden.

Sepallänge	Sepalbreite	Blütenblattlänge	Blütenbreite	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-Verssicolor
6.9	3.1	4.9	1.5	Iris-Verssicolor
6.3	3.3	6.0	2.5	Iris-virginica
5.8	2.7	5.1	1.9	Iris-virginica

Wie Sie aus dem Tisch sehen können, ist es jetzt möglich, die Größen zu finden, die am besten zu einer bestimmten Blume passen. Dies ist keine absolute Wahrheit, aber es kann mit genügend Datenpunkten sehr genau werden.

Die Frage wird nun: Wie repräsentieren Sie ein Bild als lange Liste von Werten?? Oder ein Gesicht für diese Angelegenheit? Nun, die Kurzgeschichte ist, dass Sie das Bild in den Wert der Intensität jedes Pixels konvertieren. Von dort aus können Sie entscheiden, wohin Linien und Punkte gehen, die ein Gesicht darstellen. Was ein Gesicht tatsächlich ist, wurde durch ein vorgebildetes Modell bestimmt. Wenn Sie dies auf eine Reihe von Bildern der Person anwenden, die Sie erkennen möchten, kann eine Tabelle ähnlich wie die oben genannte Iris verwendet werden.

Wie es tatsächlich funktioniert, ist etwas komplexer als das. Damit Sie Ihre eigene Lösung erstellen können, müssen Sie eine Bibliothek verwenden, die dafür erstellt wurde. Glücklicherweise stehen viele kostenlose und Open -Source -Lösungen zur Verfügung.

Was sind die Möglichkeiten?

Es gibt viele Bibliotheken für die Verwendung von JavaScript, einer ist Face-api.JS. Die anderen können eine bessere Auswahl haben, aber diese hat eine sehr einfache Demo -Seite. Sie können die Demo -Seite von GitHub herunterladen. Die Seite enthält die Bibliothek und die Demo -Seiten. Wenn Sie auf einer tieferen Ebene beginnen möchten, können Sie TensorFlow und DLIB überprüfen. Face-API verwendet TensorFlow als Bibliothek für maschinelles Lernen.

Sobald Sie alles von Github heruntergeladen haben, können Sie die Beispiele-Bibliothek verwenden, um verschiedene Methoden für die Gesichtserkennung zu untersuchen.

Was sind die Anwendungsfälle??

In der Industrie wird die Gesichtserkennung für Zugangskontrolle, Anwesenheitsprüfungen und andere Sicherheitsfall verwendet. In Social -Media -Netzwerken kann Ihr Gesicht markiert werden, damit Sie eher nach Ihrem Gesicht als nach Ihrem Namen suchen können. Für Ihr eigenes System können Sie es für den Zugriff auf Ihren Computer verwenden und sogar einige Ihrer Anwendungen steuern.

Was entwickeln wir uns??

Wir machen ein einfaches System, um ein Gesicht zu erkennen.

Um ein Gesicht zu erkennen, müssen Sie die Software, Bilder und ein geschultes Modell haben. Sie können das Modell selbst trainieren und sollten Sie jedoch für Ihre spezifische Aufgabe auch ein vorhandenes Modell erneut ausdehnen. In diesem Beispiel ist das Modell vorgeschrieben und heruntergeladen.

Damit der Code funktioniert, müssen Sie das Beispiel sammeln. In diesem Fall verwenden wir eine Webcam, einfach genug mit HTML5. Fügen Sie dazu ein Video -Tag in den HTML -Code hinzu.

Einfach rechts? Aber warten Sie, dass Sie dies auch von Ihrem JavaScript anrufen müssen.

const Video = Dokument.GetElementById ('VideoID')

Jetzt können Sie die Konstante verwenden, um Ihren Stream in den JavaScript -Code zu bringen. Erstellen Sie eine StartVideo -Funktion.

Funktion startVideo ()
Navigator.MediaDevices.GetUsermedia (
Video: ,
Stream => Video.srcObject = stream,
ERR => Konsole.Fehler (ERR)
)

Dies ist eine allgemeine Funktion, die die VideoID nicht aufruft. Sie müssen eine Funktion festlegen, die den eingehenden Stream aufruft. Eine Möglichkeit, den Stream zu fangen, besteht darin, Versprechungsfunktionen zu verwenden.

Versprechen.alle([
Faceapi.Netze.TinyFacedEtektor.lastfromuri ('/models'),
Faceapi.Netze.FACELANDMARK68NET.lastfromuri ('/models'),
Faceapi.Netze.Fasionsekognitionnet.lastfromuri ('/models'),
Faceapi.Netze.faceExpressionnet.lastfromuri ('/models')
])).dann (startvideo);

Die obige Verheißungsanweisung wird nun die Funktion startVideo ausführen, wenn der Stream verfügbar ist. Schließlich wird der unten stehende Video -Event -Listener die von der Face API verfügbaren Funktionen ausführen.

Video.AddEventListener ('Play', () =>
const canvas = faceapi.CreateCanvasfrommedia (Video);
dokumentieren.Körper.anhängen (Canvas);
const displaySize = width: Video.Breite, Höhe: Video.Höhe ;
Faceapi.MatchDimensions (Canvas, DisplaySize);
setInterval (async () =>
const detektionen = erwarten faceapi.DetectAllFaces (Video, neu
Faceapi.TinyFacedaTeTectorOptions ()).withfacelandmarks ().withaceExpressions ();
const resizsizddetektionen = faceapi.ResizerSults (Erkennungen, DisplaySize);
Leinwand.getContext ('2d').ClearRect (0, 0, Leinwand.Breite, Leinwand.Höhe);
Faceapi.ziehen.Drawdetektionen (Leinwand, hochgrenzende Dennzeichen);
Faceapi.ziehen.Drawfacelandmarks (Leinwand, hochgrenzende Dennzeichen);
Faceapi.ziehen.DrawfaceExpressions (Leinwand, hochgrenzende Dennzeichen);
, 100);
);

Was brauchen Sie in Ihrer Entwicklungsumgebung??

Da wir JavaScript verwenden, brauchen wir NodeJs, Knoten und NPM (oder ähnliches). Ihre beste Taktik hier ist es, Ihr Entwicklungsverzeichnis zu erstellen und dann das Repository aus GitHub zu klonen. Die Beispiele sind im Beispielverzeichnis.

$ cd Beispiele/Beispiel-Browser/

Im Verzeichnis müssen Sie die Pakete mit NPM installieren.

$ npm install

Da Sie sich im Verzeichnis befinden, in dem Sie Face-API heruntergeladen haben.JS, NPM findet, was Sie herunterladen müssen. Als nächstes können Sie die Demo starten und in Ihrem Browser öffnen.

$ npm Start

Die letzte Zeile in der Ausgabe zeigt den Port, den Sie in Ihrem Browser verwenden müssen. Diese Beispiele sind in der Regel die Besetzung der Urknalltheorie, aber Sie können Ihre eigenen Bilder laden und sogar die Webcam verwenden, um Ihr Alter zu bestimmen.

Diese Demos machen Spaß zu spielen, aber der wahre Wert ist, dass der Code zum Studium verfügbar ist.

In den Dateien werden das JavaScript in einem separaten Verzeichnis getrennt, um es einfach zu verwenden. Damit Ihre Seiten arbeiten können, müssen Sie die API und alle Skripte, die Sie verwenden, einladen.

Abschluss

Dies ist ein sehr kurzes Beispiel dafür. Das wirklich faszinierende Teil ist es, nützliche Anwendungen für die Technologie zu finden. Wofür werden Sie es verwenden?? Zugriff auf Ihren eigenen Computer oder nur einige spezifische Daten oder Anwendungen?