Gesichtserkennung im Netz mit Gesichts-api.js

Webbrowser werden immer leistungsfähiger und die Komplexität von Websites und Webanwendungen nimmt ebenfalls zu. Was ein Supercomputer vor Jahrzehnten verlangte, ist jetzt mit nur einem Smartphone möglich. Die Gesichtserkennung ist einer von ihnen.

Gesichtserkennungs- und Analysefunktionen sind sehr nützlich, da wir clevere Funktionen hinzufügen können. Denken Sie an automatisch verwischende Gesichter (wie Google Maps), das Schwingen und Zoomen von Webcam -Bildern, um sich auf Personen (wie Microsoft -Team) zu konzentrieren, Pässe zu überprüfen, unterhaltsame Filter (wie Instagram und Snapchat) und mehr multifunktionaler. Aber bevor wir das alles tun können, müssen wir zuerst das Gesicht finden!

face-api.js ist eine Bibliothek, mit der Entwickler die Gesichtserkennung in ihren Anwendungen ohne Hintergrund im maschinellen Lernen verwenden können.

Der Code für dieses Tutorial finden Sie in GitHub.

Schlüsselpunkte

• face-api.js ist eine Bibliothek, mit der Entwickler die Gesichtserkennung in ihren Webanwendungen ohne Hintergrund im maschinellen Lernen verwenden können. Es kann Gesichter erkennen, verschiedene Merkmale im Gesicht schätzen und sogar feststellen, wer die Person auf dem Foto ist.
• Diese Bibliothek verwendet TensorFlow.js, eine beliebte JavaScript -Bibliothek für maschinelles Lernen zum Erstellen, Training und Verwendung neuronaler Netzwerke in einem Browser. Es fasst dies jedoch all dies in einer intuitiven API zusammen und erleichtert es einfach zu bedienen.
• face-api.js eignet sich perfekt für Amateurprojekte, Experimente und sogar für MVPs. Es kann jedoch die Leistung beeinflussen, und Entwickler müssen möglicherweise zwischen Bandbreite und Leistung oder Genauigkeit wählen.
• Obwohl Face-api.js ein mächtiges Werkzeug ist, sollte beachtet werden, dass künstliche Intelligenz gut darin ist, Verzerrungen zu verstärken. Daher sollten Entwickler diese Technologie mit Vorsicht einsetzen und eine vielfältige Testgruppe für gründliche Tests verwenden.

Gesichtserkennung mit maschinellem Lernen

Die Erkennung von Objekten (z. B. menschliche Gesichter) ist ziemlich kompliziert. Denken Sie darüber nach: Vielleicht könnten wir ein Programm schreiben, das Pixel nach Augen, Nase und Mund scannt. Dies kann getan werden, aber es ist tatsächlich unmöglich, es völlig zuverlässig zu machen, da es viele Faktoren zu berücksichtigen gibt. Denken Sie an Beleuchtungsbedingungen, Gesichtshaare, große Unterschiede in Form und Farbe, Make -up, Winkel, Masken und mehr.

Nervennetzwerke können jedoch gut mit solchen Problemen umgehen und können sich auf die meisten, wenn nicht alle Bedingungen verallgemeinern. Wir können neuronale Netzwerke in einem Browser mit TensorFlow.js (einer beliebten JavaScript Machine Learning Library) erstellen, trainieren und verwenden. Selbst wenn wir ein vorgefertigtes Modell verwenden, müssen wir uns trotzdem tief in den TensorFlow und die Interpretation der Ausgabe einteilen, um Informationen zur Verfügung zu stellen. Wenn Sie an den technischen Details des maschinellen Lernens interessiert sind, lesen Sie "Anfänger für maschinelles Lernen mit Python".

face-api.js entstand. Es fasst dies all dies in einer intuitiven API zusammen. Wir können IMG-, Leinwand- oder Video -Dom -Elemente übergeben, und die Bibliothek gibt einen oder eine Reihe von Ergebnissen zurück. Face-api.js können Gesichter erkennen und verschiedene Merkmale in Gesichtern schätzen, wie unten gezeigt.

• Gesichtserkennung: Erhalten Sie eine oder mehrere Gesichtsgrenzen. Dies ist sehr nützlich, um die Position und Größe eines Gesichts im Bild zu bestimmen.
• Gesichtsfunktionspunkterkennung: Holen Sie sich die Position und Form von Augenbrauen, Augen, Nase, Mund und Lippen und Kinn. Dies kann verwendet werden, um die Gesichtsorientierung zu bestimmen oder die Figur in einen bestimmten Bereich wie den Bart zwischen Nase und Lippen zu projizieren.
• Gesichtserkennung: Bestimmen Sie, wer die Person auf dem Foto ist.
• Erkennung von Gesichtsexpression: Ausdrücke aus Gesichtern erhalten. Bitte beachten Sie, dass die Ergebnisse von Kultur zu Kultur variieren können.
• Alter und Geschlechtstests: Holen Sie sich Alter und Geschlecht aus Gesichtern. Die „Geschlechtsklassifizierung“ klassifiziert Gesichter als weiblich oder männlich, was ihr Geschlecht nicht unbedingt offenbart.

Bevor Sie diesen Inhalt außerhalb von Experimenten verwenden, beachten Sie bitte, dass KI gut in Vorurteilen verstärkt. Die Klassifizierung der Geschlechter funktioniert gut für Cisgender -Leute, kann aber das Geschlecht meines nicht -binären Freundes nicht erkennen. Es erkennt die meiste Zeit weiße Menschen, erfasst aber oft keine farbigen Menschen.

Seien Sie sehr vorsichtig, wenn Sie diese Technologie verwenden und ein vielfältiges Testteam für gründliche Tests verwenden.

Installation

wir können Gesichts-api.js über npm installieren:

<code>npm install face-api.js
</code>

Um das Einrichten des Build -Tools zu überspringen, werde ich das UMD -Paket über UNPKG.org eingeben:

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

Danach müssen wir das korrekte vorbereitete Modell aus dem Repository der Bibliothek herunterladen. Bestimmen Sie, was wir vom Gesicht aus dem Gesicht wissen möchten, und verwenden Sie den Abschnitt mit den verfügbaren Modellen, um festzustellen, welche Modelle benötigt werden. Einige Funktionen können mehrere Modelle verwenden. In diesem Fall müssen wir zwischen Bandbreite/Leistung und Genauigkeit wählen. Vergleichen Sie die Dateigrößen der verschiedenen verfügbaren Modelle und wählen Sie das Modell aus, von dem Sie glauben, dass es für Ihr Projekt am besten ist.

Sie sind sich nicht sicher, welche Modelle Sie verwenden müssen? Sie können zu diesem Schritt später zurückkehren. Wenn wir die API verwenden, ohne das erforderliche Modell zu laden, wird ein Fehler geworfen, der das Modell angibt, das die Bibliothek erwartet.

Wir können jetzt die Gesichts-API-API verwenden.

Beispiel

lass uns etwas bauen!

Für das folgende Beispiel werde ich diese Funktion verwenden, um ein zufälliges Bild aus der Unsplash -Quelle zu laden:

<code>function loadRandomImage() {
  const image = new Image();

  image.crossOrigin = true;

  return new Promise((resolve, reject) => {
    image.addEventListener('error', (error) => reject(error));
    image.addEventListener('load', () => resolve(image));
    image.src = 'https://source.unsplash.com/512x512/?face,friends';
  });
}
</code>

Kruppierte Bilder

Sie finden den Code für diese Demo im enthaltenen GitHub -Repository.

Zunächst müssen wir das Modell auswählen und laden. Um ein Bild zu beschneiden, müssen wir nur die Begrenzungskiste des Gesichts kennen, sodass die Gesichtserkennung ausreicht. Wir können dies mit zwei Modellen tun: das SSD Mobilenet V1 -Modell (etwas unter 6 MB) und das winzige Gesichtsdetektormodell (Slow 200 KB). Die Genauigkeit der Genauigkeit ist irrelevant, da der Benutzer es auch manuell erschneiden kann. Nehmen wir außerdem an, dass der Besucher diese Funktion in einer langsamen Internetverbindung verwendet. Da unser Fokus auf Bandbreite und Leistung liegt, werden wir das kleinere winzige Gesichtsdetektormodell wählen.

Nach dem Herunterladen des Modells können wir es laden:

<code>npm install face-api.js
</code>

Wir können das Bild jetzt laden und an face-api.js weitergeben. FACEAPI.DETECTALLFACES verwendet standardmäßig das SSD Mobilenet V1 -Modell, sodass wir ausdrücklich neue faceapi.tinyFacedEtectorOptions () bestehen müssen, um es zur Verwendung des winzigen Gesichtsdetektormodells zu zwingen.

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

variable Gesichter enthalten jetzt ein Ergebnisarray. Jedes Ergebnis hat ein Box- und Score -Attribut. Die Punktzahl zeigt den Grad des Vertrauens an, dass das neuronale Netzwerk tatsächlich im Gesicht ist. Das Box -Attribut enthält das Objekt der Gesichtskoordinaten. Wir können das erste Ergebnis auswählen (oder wir können faceapi.Detectsingleface ()) auswählen. Wenn der Benutzer jedoch ein Gruppenfoto einreicht, möchten wir alle Gesichter im Kaufmaterial sehen. Dazu können wir das benutzerdefinierte Begrenzungsfeld berechnen:

<code>function loadRandomImage() {
  const image = new Image();

  image.crossOrigin = true;

  return new Promise((resolve, reject) => {
    image.addEventListener('error', (error) => reject(error));
    image.addEventListener('load', () => resolve(image));
    image.src = 'https://source.unsplash.com/512x512/?face,friends';
  });
}
</code>

Schließlich können wir eine Leinwand erstellen und das Ergebnis anzeigen:

<code>await faceapi.nets.tinyFaceDetector.loadFromUri('/models');
</code>

Put Emoji

Sie finden den Code für diese Demo im enthaltenen GitHub -Repository.

Warum nicht ein bisschen Spaß haben? Wir können einen Filter machen, der einen Mund -Emoji (?) Auf allen Augen legt. Um Augenfunktionspunkte zu finden, brauchen wir ein anderes Modell. Dieses Mal sind wir besorgt über die Genauigkeit, daher verwenden wir SSD Mobilenet V1- und 68-Punkte-Face-Face-Merkmal-Erkennungsmodelle.

In ähnlicher Weise müssen wir zuerst das Modell und das Bild laden:

<code>const image = await loadRandomImage();
const faces = await faceapi.detectAllFaces(image, new faceapi.TinyFaceDetectorOptions());
</code>

Um Feature -Punkte zu erhalten, müssen wir den Funktionsaufruf von Facelandmarks () an detectAllFaces () anhängen, um Feature -Punkte -Daten zu erhalten:

<code>const box = {
  // 将边界设置为其反向无穷大，因此任何数字都大于/小于
  bottom: -Infinity,
  left: Infinity,
  right: -Infinity,
  top: Infinity,

  // 给定边界，我们可以计算宽度和高度
  get height() {
    return this.bottom - this.top;
  },

  get width() {
    return this.right - this.left;
  },
};

// 更新边界框
for (const face of faces) {
  box.bottom = Math.max(box.bottom, face.box.bottom);
  box.left = Math.min(box.left, face.box.left);
  box.right = Math.max(box.right, face.box.right);
  box.top = Math.min(box.top, face.box.top);
}
</code>

Wie beim letzten Mal enthalten Gesichter eine Liste von Ergebnissen. Zusätzlich zur Position des Gesichts enthält jedes Ergebnis auch eine Liste der ursprünglichen Punkte von Feature -Punkten. Um die richtigen Funktionspunkte für jede Funktion zu erhalten, müssen wir die Liste der Punkte schneiden. Da die Anzahl der Punkte festgelegt ist, habe ich den festcodierten Index ausgewählt:

<code>npm install face-api.js
</code>

Jetzt können wir anfangen, Emojis auf dem Bild zu zeichnen. Da wir dies mit beiden Augen tun müssen, können wir Feature.Eyeleft und Feature.eyeright in einem Array einsetzen und über sie iterieren, um denselben Code für jedes Auge auszuführen. Alles, was übrig bleibt, ist, das Emoji auf die Leinwand zu ziehen!

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

Beachten Sie, dass ich einige magische Zahlen verwendet habe, um die Schriftgröße und die präzise Textposition anzupassen. Da Emojis Unicode sind und die Typografie im Web (zumindest für mich) seltsam ist, passe ich die Zahlen nur an, bis sie fast gleich aussehen. Eine leistungsstärkere Alternative besteht darin, Bilder als Overlays zu verwenden.

Zusammenfassung

face-api.js ist eine großartige Bibliothek, die die Erkennung und Erkennung von Gesicht wirklich zugänglich macht. Sie müssen nicht mit maschinellem Lernen und neuronalen Netzwerken vertraut sein. Ich liebe die Tools, die Funktionen ermöglicht haben, und dies ist definitiv einer von ihnen.

Aus meiner Erfahrung kann die Gesichtserkennung im Web die Leistung beeinflussen. Wir müssen zwischen Bandbreite und Leistung oder Genauigkeit wählen. Kleinere Modelle sind sicherlich weniger genau und werden in einigen der zuvor genannten Faktoren ein Gesicht verpassen, wie z. B. unzureichendes Licht oder Gesicht.

Microsoft Azure, Google Cloud und möglicherweise andere Unternehmen bieten eine Gesichtserkennung in der Cloud. Da wir das Herunterladen großer Modelle vermeiden, vermeidet die Erkennung von Cloud-basierten Erkenntnissen starker Seitenbelastung und ist oft genauer, da sie häufig verbessert wird und möglicherweise sogar schneller ist, da die Hardware optimiert ist. Wenn Sie eine hohe Präzision benötigen, möchten Sie möglicherweise einen Plan in Betracht ziehen, mit dem Sie zufrieden sind.

Ich empfehle definitiv, Face-api.js für Amateurprojekte, Experimente und vielleicht MVP zu verwenden.

FAQs (FAQ) über Face api.js

Was ist Face api.js und wie funktioniert es?

Face api.js ist eine JavaScript -Bibliothek, die TensorFlow.js verwendet, um die Erkennung von Gesichtserkennung und Gesichtsfunktionspunkt im Browser durchzuführen. Es erkennt und erkennt Gesichter in Bildern oder Live -Video -Streams mithilfe von Modellen für maschinelles Lernen. Die Bibliothek bietet einige APIs, die es Entwicklern ermöglichen, Aufgaben wie das Erkennen aller Gesichter in einem Bild auszuführen, das Gesicht einer bestimmten Person zu identifizieren und Gesichtsmerkmale wie Augen, Nase und Mund zu identifizieren.

Wie installiere und verwende ich Face api.js in meinem Projekt?

Um Face API.js zu installieren, können Sie NPM oder Garn verwenden. Nach der Installation können Sie die Bibliothek in Ihr Projekt importieren und mit der API beginnen. Diese Bibliothek bietet eine umfassende Reihe von Beispielen und Tutorials, um Ihnen den Einstieg zu erleichtern.

Kann API.js für die Erkennung und Erkennung von Echtzeit-Gesichtsgesichtsanhänger verwendet werden?

Ja, Face API.js können zur Erkennung und Erkennung von Echtzeits verwendet werden. Diese Bibliothek bietet eine API, mit der Videoströme verarbeitet und Gesichter in Echtzeit erfasst oder erkannt werden können. Dies macht es für Anwendungen wie Überwachung, Videokonferenzen und interaktive Installation geeignet.

Was sind die Systemanforderungen für die Verwendung von Face api.js?

Face api.js erfordert einen modernen Browser, der WebGL und WebAssembly unterstützt. Es erfordert auch relativ leistungsstarke CPUs und GPUs, da die Erkennung und Erkennung von Gesicht rechenintensive Aufgaben sind. Die genauen Anforderungen hängen jedoch vom spezifischen Anwendungsfall und der Anzahl der zu verarbeitenden Gesichter ab.

Wie genau ist Face API.js beim Erkennen und Identifizieren von Gesichtern?

Die Genauigkeit der Gesichts -API.js hängt von mehreren Faktoren ab, einschließlich der Qualität des Eingabebildes oder des Videos, der Beleuchtungsbedingungen und der Haltung des Gesichts. Die Bibliothek verwendet jedoch das neueste maschinelles Lernmodell, das auf großen Datensätzen geschult ist, sodass unter den meisten Bedingungen eine hohe Genauigkeit erzielt werden kann.

Kann API.js Gesichter unter verschiedenen Beleuchtungsbedingungen und Haltungen erkennen und erkennen?

Ja, Face -API.js können Gesichter unter verschiedenen Beleuchtungsbedingungen und Haltungen erkennen und erkennen. Wie bei allen Modellen für maschinelles Lernen kann seine Leistung jedoch durch extreme Beleuchtungsbedingungen oder abnormale Körperhaltungen beeinflusst werden.

Kann API.js für kommerzielle Projekte verwendet werden?

Ja, Face api.js ist Open Source und kann für persönliche und kommerzielle Projekte verwendet werden. Es ist jedoch am besten, die Lizenzbedingungen zu überprüfen, bevor Sie eine Open -Source -Bibliothek in einem kommerziellen Projekt verwenden.

Wie verbessert man die Leistung von Face api.js in meiner Anwendung?

Es gibt verschiedene Möglichkeiten, die Leistung von Face API.Js. zu verbessern. Eine Möglichkeit besteht darin, das Eingabebild oder Video zu optimieren, beispielsweise durch Reduzieren der Auflösung oder der Konvertierung in Graustufen. Eine andere Methode besteht darin, die Parameter des Gesichtserkennungs- und Erkennungsalgorithmus zu optimieren.

Kann API.js Gesichter in Bildern oder Videos mit mehreren Personen erkennen?

Ja, Face api.js können mehrere Gesichter im selben Bild oder Video erkennen und erkennen. Diese Bibliothek bietet eine API, um erkannte Gesichtsarrays mit jeweils eigenem Begrenzungsbox und Erkennungsergebnis zurückzugeben.

Kann API.js mit anderen JavaScript -Bibliotheken oder Frameworks verwendet werden?

Ja, Face api.js können mit jeder JavaScript -Bibliothek oder jedem JavaScript -Bibliothek verwendet werden. Es ist so konzipiert, dass es flexibel und einfach in bestehende Projekte integriert ist.

Das obige ist der detaillierte Inhalt vonGesichtserkennung im Netz mit Gesichts-api.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!