Intelligente Webcam in JavaScript mit einem vortrainierten TensorFlow.js-Modell für maschinelles Lernen erstellen

1. Hinweis

Maschinelles Lernen ist heutzutage ein echter Hype. Die Anwendungsbereiche scheinen unbegrenzt zu sein und es wird erwartet, dass die Technologie in naher Zukunft in fast allen Branchen eingesetzt wird. Wenn Sie als Entwickler oder Designer im Frontend oder Backend arbeiten und mit JavaScript vertraut sind, ist dieses Codelab genau das Richtige für Sie, um Machine Learning in Ihre Fähigkeiten aufzunehmen.

Voraussetzungen

Dieses Codelab wurde für erfahrene Entwickler geschrieben, die bereits mit JavaScript vertraut sind.

Umfang

In diesem Codelab

  • Erstellen Sie eine Webseite, auf der maschinelles Lernen direkt im Webbrowser über TensorFlow.js verwendet wird, um gängige Objekte aus einem Live-Webcam-Stream zu klassifizieren und zu erkennen (ja, auch mehrere gleichzeitig).
  • Mit einer normalen Webcam Objekte erkennen und die Koordinaten des Begrenzungsrahmens für jedes gefundene Objekt abrufen
  • Heben Sie das gefundene Objekt im Videostream hervor, wie unten dargestellt:

8f9bad6e49e646b.png

Stellen Sie sich vor, Sie könnten erkennen, ob eine Person in einem Video zu sehen ist. So könnten Sie zählen, wie viele Personen zu einem bestimmten Zeitpunkt anwesend waren, um zu schätzen, wie stark ein bestimmter Bereich über den Tag hinweg genutzt wurde. Oder Sie könnten sich eine Benachrichtigung senden lassen, wenn Ihr Hund in einem Raum Ihres Hauses erkannt wird, in dem er sich nicht aufhalten sollte, während Sie nicht zu Hause sind. Wenn du das schaffst, bist du auf dem besten Weg, deine eigene Version einer Google Nest-Kamera zu entwickeln, die dich mit deiner eigenen benutzerdefinierten Hardware benachrichtigen kann, wenn sie einen Eindringling (jeglicher Art) erkennt. Ziemlich praktisch. Ist das schwierig? Nö. Los gehts…

Lerninhalte

  • So laden Sie ein vortrainiertes TensorFlow.js-Modell.
  • So rufen Sie Daten aus einem Live-Webcam-Stream ab und stellen sie auf dem Canvas dar.
  • So klassifizieren Sie einen Bildframe, um die Begrenzungsrahmen aller Objekte zu finden, die das Modell erkennen kann.
  • Wie Sie die vom Modell zurückgegebenen Daten verwenden, um gefundene Objekte hervorzuheben.

In diesem Codelab geht es darum, wie Sie mit vortrainierten TensorFlow.js-Modellen beginnen können. Konzepte und Codeblöcke, die nicht für TensorFlow.js und Machine Learning relevant sind, werden nicht erläutert und können einfach kopiert und eingefügt werden.

2. Was ist TensorFlow.js?

1aee0ede85885520.png

TensorFlow.js ist eine Open-Source-Bibliothek für maschinelles Lernen, die überall ausgeführt werden kann, wo JavaScript ausgeführt werden kann. Sie basiert auf der ursprünglichen TensorFlow-Bibliothek, die in Python geschrieben wurde, und zielt darauf ab, diese Entwicklerumgebung und die APIs für das JavaScript-Ökosystem neu zu erstellen.

Wo kann sie verwendet werden?

Da JavaScript portabel ist, können Sie jetzt in einer Sprache schreiben und problemlos maschinelles Lernen auf allen folgenden Plattformen ausführen:

  • Clientseitig im Webbrowser mit nativem JavaScript
  • Serverseitig und sogar auf IoT-Geräten wie Raspberry Pi mit Node.js
  • Desktop-Apps mit Electron
  • Native mobile Apps mit React Native

TensorFlow.js unterstützt auch mehrere Back-Ends in jeder dieser Umgebungen (die tatsächlichen Hardware-basierten Umgebungen, in denen es ausgeführt werden kann, z. B. die CPU oder WebGL). Ein „Backend“ bedeutet in diesem Zusammenhang keine serverseitige Umgebung. Das Backend für die Ausführung kann beispielsweise clientseitig in WebGL sein, um Kompatibilität zu gewährleisten und die Ausführung zu beschleunigen. Derzeit unterstützt TensorFlow.js Folgendes:

  • WebGL-Ausführung auf der Grafikkarte (GPU) des Geräts: Dies ist die schnellste Methode, um größere Modelle (über 3 MB) mit GPU-Beschleunigung auszuführen.
  • WebAssembly-Ausführung (WASM) auf der CPU: Damit wird die CPU-Leistung auf allen Geräten verbessert, auch auf älteren Smartphones. Diese Methode eignet sich besser für kleinere Modelle (unter 3 MB), die aufgrund des Aufwands für das Hochladen von Inhalten auf einen Grafikprozessor mit WASM auf der CPU schneller ausgeführt werden können als mit WebGL.
  • CPU-Ausführung: Der Fallback, wenn keine der anderen Umgebungen verfügbar ist. Diese Methode ist die langsamste der drei, steht Ihnen aber immer zur Verfügung.

Hinweis:Sie können eines dieser Backends erzwingen, wenn Sie wissen, auf welchem Gerät Sie die Ausführung durchführen, oder Sie können TensorFlow.js die Entscheidung überlassen, wenn Sie dies nicht angeben.

Clientseitige Superkräfte

Die Ausführung von TensorFlow.js im Webbrowser auf dem Clientcomputer kann mehrere Vorteile haben, die es wert sind, berücksichtigt zu werden.

Datenschutz

Sie können Daten auf dem Clientcomputer trainieren und klassifizieren, ohne Daten an einen Webserver eines Drittanbieters zu senden. Dies kann erforderlich sein, um lokale Gesetze wie die DSGVO einzuhalten oder um Daten zu verarbeiten, die der Nutzer auf seinem Gerät behalten und nicht an Dritte senden möchte.

Geschwindigkeit

Da Sie keine Daten an einen Remote-Server senden müssen, kann die Inferenz (die Klassifizierung der Daten) schneller erfolgen. Noch besser: Sie haben direkten Zugriff auf die Sensoren des Geräts, z. B. Kamera, Mikrofon, GPS und Beschleunigungsmesser, wenn der Nutzer Ihnen den Zugriff gewährt.

Reichweite und Skalierung

Mit einem Klick kann jeder auf der Welt einen Link anklicken, den Sie ihm senden, die Webseite in seinem Browser öffnen und Ihre Inhalte nutzen. Für die Verwendung des Systems für maschinelles Lernen ist keine komplexe serverseitige Linux-Einrichtung mit CUDA-Treibern und vielem mehr erforderlich.

Kosten

Da keine Server erforderlich sind, müssen Sie nur für ein CDN bezahlen, um Ihre HTML-, CSS-, JS- und Modelldateien zu hosten. Die Kosten für ein CDN sind viel geringer als die Kosten für einen Server, der rund um die Uhr läuft (möglicherweise mit einer Grafikkarte).

Serverseitige Funktionen

Die Node.js-Implementierung von TensorFlow.js bietet die folgenden Funktionen.

Volle CUDA-Unterstützung

Auf der Serverseite müssen Sie zur Beschleunigung der Grafikkarte die NVIDIA CUDA-Treiber installieren, damit TensorFlow mit der Grafikkarte arbeiten kann (im Gegensatz zum Browser, der WebGL verwendet – keine Installation erforderlich). Mit vollständiger CUDA-Unterstützung können Sie jedoch die Low-Level-Funktionen der Grafikkarte voll ausschöpfen, was zu schnelleren Trainings- und Inferenzzeiten führt. Die Leistung ist mit der Python-TensorFlow-Implementierung vergleichbar, da beide dasselbe C++-Backend verwenden.

Modellgröße

Bei hochmodernen Modellen aus der Forschung arbeiten Sie möglicherweise mit sehr großen Modellen, die mehrere Gigabyte groß sind. Diese Modelle können derzeit aufgrund der Einschränkungen der Arbeitsspeichernutzung pro Browser-Tab nicht im Webbrowser ausgeführt werden. Um diese größeren Modelle auszuführen, können Sie Node.js auf Ihrem eigenen Server mit den Hardwareanforderungen verwenden, die für die effiziente Ausführung eines solchen Modells erforderlich sind.

IoT

Node.js wird auf beliebten Einplatinencomputern wie dem Raspberry Pi unterstützt. Das bedeutet, dass Sie TensorFlow.js-Modelle auch auf solchen Geräten ausführen können.

Geschwindigkeit

Node.js ist in JavaScript geschrieben, was bedeutet, dass es von der Just-in-Time-Kompilierung profitiert. Das bedeutet, dass Sie bei der Verwendung von Node.js oft eine Leistungssteigerung feststellen werden, da es zur Laufzeit optimiert wird, insbesondere für die Vorverarbeitung. Ein gutes Beispiel dafür ist diese Fallstudie, in der beschrieben wird, wie Hugging Face mit Node.js die Leistung seines Modells für die Verarbeitung natürlicher Sprache verdoppelt hat.

Nachdem Sie nun die Grundlagen von TensorFlow.js, die Ausführungsumgebung und einige Vorteile kennen, können wir mit der praktischen Anwendung beginnen.

3. Vortrainierte Modelle

TensorFlow.js bietet eine Vielzahl vortrainierter Modelle für maschinelles Lernen (ML). Diese Modelle wurden vom TensorFlow.js-Team trainiert und in eine benutzerfreundliche Klasse verpackt. Sie eignen sich hervorragend für die ersten Schritte mit maschinellem Lernen. Anstatt ein Modell zu erstellen und zu trainieren, um Ihr Problem zu lösen, können Sie ein vortrainiertes Modell als Ausgangspunkt importieren.

Eine wachsende Liste mit einfach zu verwendenden vortrainierten Modellen finden Sie auf der Seite Models for JavaScript (Modelle für JavaScript) von Tensorflow.js. Es gibt auch andere Orte, an denen Sie konvertierte TensorFlow-Modelle erhalten können, die in TensorFlow.js funktionieren, z. B. TensorFlow Hub.

Warum sollte ich ein vortrainiertes Modell verwenden?

Die Verwendung eines beliebten vortrainierten Modells bietet eine Reihe von Vorteilen, wenn es für Ihren gewünschten Anwendungsfall geeignet ist:

  1. Sie müssen keine Trainingsdaten selbst erfassen. Die Aufbereitung von Daten im richtigen Format und die Kennzeichnung, damit ein System für maschinelles Lernen daraus lernen kann, kann sehr zeitaufwendig und kostspielig sein.
  2. Die Möglichkeit, Ideen schnell und kostengünstig zu prototypisieren.
     Es ist nicht sinnvoll, das Rad neu zu erfinden, wenn ein vortrainiertes Modell möglicherweise gut genug ist, um Ihre Anforderungen zu erfüllen. So können Sie sich darauf konzentrieren, das vom Modell bereitgestellte Wissen zu nutzen, um Ihre kreativen Ideen umzusetzen.
  3. Verwendung von hochmoderner Forschung: Vortrainierte Modelle basieren häufig auf beliebten Forschungsergebnissen. So können Sie sich mit diesen Modellen vertraut machen und gleichzeitig ihre Leistung in der realen Welt nachvollziehen.
  4. Nutzerfreundlichkeit und umfangreiche Dokumentation: Aufgrund der Beliebtheit solcher Modelle.
  5. Lerntransfer Funktionen. Einige vortrainierte Modelle bieten die Möglichkeit des Lerntransfers. Dabei werden Informationen, die bei einer Aufgabe für maschinelles Lernen gewonnen wurden, auf eine andere ähnliche Aufgabe übertragen. Ein Modell, das ursprünglich darauf trainiert wurde, Katzen zu erkennen, könnte beispielsweise neu trainiert werden, um Hunde zu erkennen, wenn Sie ihm neue Trainingsdaten zur Verfügung stellen. Das geht schneller, da Sie nicht mit einer leeren Arbeitsfläche beginnen. Das Modell kann das, was es bereits gelernt hat, um Katzen zu erkennen, nutzen, um das neue Objekt zu erkennen. Hunde haben schließlich auch Augen und Ohren. Wenn das Modell also bereits weiß, wie diese Merkmale zu finden sind, ist das schon die halbe Miete. Das Modell lässt sich viel schneller mit Ihren eigenen Daten neu trainieren.

Was ist COCO-SSD?

COCO-SSD ist der Name eines vortrainierten ML-Modells zur Objekterkennung, das Sie in diesem Codelab verwenden. Es soll mehrere Objekte in einem einzelnen Bild lokalisieren und identifizieren. Mit anderen Worten: Das Modell kann Ihnen den Begrenzungsrahmen von Objekten mitteilen, für die es trainiert wurde, um Ihnen die Position des Objekts in einem beliebigen Bild zu zeigen, das Sie ihm präsentieren. Ein Beispiel sehen Sie in der Abbildung unten:

760e5f87c335dd9e.png

Wenn auf dem Bild oben mehr als ein Hund zu sehen wäre, würden Sie die Koordinaten von zwei Begrenzungsrahmen erhalten, die die Position der einzelnen Hunde beschreiben. COCO-SSD wurde vortrainiert, um 90 häufige Alltagsgegenstände wie Personen, Autos oder Katzen zu erkennen.

Woher stammt der Name?

Der Name klingt vielleicht seltsam, aber er setzt sich aus zwei Akronymen zusammen:

  • COCO: Das Modell wurde mit dem COCO-Dataset (Common Objects in Context) trainiert, das für alle frei zum Herunterladen und Verwenden beim Trainieren eigener Modelle verfügbar ist. Das Dataset enthält über 200.000 beschriftete Bilder,die als Lernmaterial verwendet werden können.
  • SSD (Single Shot MultiBox Detection): Bezieht sich auf einen Teil der Modellarchitektur, der in der Implementierung des Modells verwendet wurde. Für das Codelab müssen Sie das nicht verstehen. Wenn Sie mehr darüber erfahren möchten, finden Sie hier weitere Informationen zu SSD.

4. Einrichten

Voraussetzungen

  • Einen modernen Webbrowser.
  • Grundkenntnisse in HTML, CSS, JavaScript und den Chrome-Entwicklertools (Anzeigen der Konsolenausgabe)

Einstieg ins Programmieren

Für Glitch.com oder Codepen.io wurden Boilerplate-Vorlagen erstellt, die als Ausgangspunkt dienen können. Sie können eine der beiden Vorlagen mit nur einem Klick als Ausgangszustand für dieses Codelab klonen.

Klicken Sie auf Glitch auf die Schaltfläche remix this, um das Projekt zu forken und einen neuen Satz von Dateien zu erstellen, die Sie bearbeiten können.

Alternativ können Sie auf CodePen rechts unten auf dem Bildschirm auf Fork klicken.

Dieses sehr einfache Gerüst enthält die folgenden Dateien:

  • HTML-Seite (index.html)
  • Stylesheet (style.css)
  • Datei zum Schreiben unseres JavaScript-Codes (script.js)

Zur Vereinfachung wurde in der HTML-Datei ein Import für die TensorFlow.js-Bibliothek hinzugefügt. Sie sieht so aus:

index.html

<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>

Alternative: Bevorzugten Web-Editor verwenden oder lokal arbeiten

Wenn Sie den Code herunterladen und lokal oder in einem anderen Online-Editor bearbeiten möchten, erstellen Sie einfach die oben genannten drei Dateien im selben Verzeichnis und kopieren Sie den Code aus unserem Glitch-Boilerplate in jede Datei.

5. HTML-Gerüst füllen

Für alle Prototypen ist ein grundlegendes HTML-Gerüst erforderlich. Damit rendern Sie später die Ausgabe des Machine-Learning-Modells. So richtest du das jetzt ein:

  • Ein Titel für die Seite
  • Beschreibender Text
  • Schaltfläche zum Aktivieren der Webcam
  • Ein Video-Tag zum Rendern des Webcam-Streams

Um diese Funktionen einzurichten, öffnen Sie „index.html“ und fügen Sie den folgenden Code ein, um den vorhandenen Code zu überschreiben:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Multiple object detection using pre trained model in TensorFlow.js</title>
    <meta charset="utf-8">
    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css">
  </head>  
  <body>
    <h1>Multiple object detection using pre trained model in TensorFlow.js</h1>

    <p>Wait for the model to load before clicking the button to enable the webcam - at which point it will become visible to use.</p>
    
    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="camView">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay muted width="640" height="480"></video>
      </div>
    </section>

    <!-- Import TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
    <!-- Load the coco-ssd model to use to recognize things in images -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
    
    <!-- Import the page's JavaScript to do some stuff -->
    <script src="script.js" defer></script>
  </body>
</html>

Code verstehen

Beachten Sie einige wichtige Dinge, die Sie hinzugefügt haben:

  • Sie haben ein <h1>-Tag und einige <p>-Tags für den Header sowie einige Informationen zur Verwendung der Seite hinzugefügt. Hier gibt es nichts Besonderes.

Außerdem haben Sie ein Abschnitts-Tag für Ihren Demobereich hinzugefügt:

index.html

    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="webcam">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay width="640" height="480"></video>
      </div>
    </section>
  • Zuerst geben Sie diesem section die Klasse „invisible“. So können Sie dem Nutzer visuell zeigen, wann das Modell bereit ist und er gefahrlos auf die Schaltfläche Webcam aktivieren klicken kann.
  • Sie haben die Schaltfläche enable webcam hinzugefügt, die Sie in Ihrem CSS gestalten.
  • Außerdem haben Sie ein Video-Tag hinzugefügt, an das Sie die Webcam-Eingabe streamen. Sie richten das gleich in Ihrem JavaScript-Code ein.

Wenn Sie sich die Ausgabe jetzt ansehen, sollte sie in etwa so aussehen:

b1bfb8c3de68845c.png

6. Stil hinzufügen

Standardeinstellungen für Elemente

Fügen wir zuerst Stile für die gerade hinzugefügten HTML-Elemente hinzu, damit sie richtig gerendert werden:

style.css

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  color: #3D3D3D;
}

h1 {
  font-style: italic;
  color: #FF6F00;
}

video {
  display: block;
}

section {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

Fügen Sie als Nächstes einige nützliche CSS-Klassen hinzu, um verschiedene Status der Benutzeroberfläche zu unterstützen, z. B. wenn die Schaltfläche ausgeblendet oder der Demobereich als nicht verfügbar angezeigt werden soll, wenn das Modell noch nicht bereit ist.

style.css

.removed {
  display: none;
}

.invisible {
  opacity: 0.2;
}

.camView {
  position: relative;
  float: left;
  width: calc(100% - 20px);
  margin: 10px;
  cursor: pointer;
}

.camView p {
  position: absolute;
  padding: 5px;
  background-color: rgba(255, 111, 0, 0.85);
  color: #FFF;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  z-index: 2;
  font-size: 12px;
}

.highlighter {
  background: rgba(0, 255, 0, 0.25);
  border: 1px dashed #fff;
  z-index: 1;
  position: absolute;
}

Sehr gut! Das ist alles, was Sie brauchen. Wenn Sie Ihre Formatierungen mit den beiden oben genannten Code-Abschnitten erfolgreich überschrieben haben, sollte die Live-Vorschau jetzt so aussehen:

336899a78cf80fcb.png

Beachten Sie, dass der Text im Demobereich und die Schaltfläche nicht verfügbar sind, da im HTML standardmäßig die Klasse „invisible“ angewendet wird. Sie verwenden JavaScript, um diese Klasse zu entfernen, sobald das Modell einsatzbereit ist.

7. JavaScript-Skelett erstellen

Wichtige DOM-Elemente referenzieren

Prüfen Sie zuerst, ob Sie auf wichtige Teile der Seite zugreifen können, die Sie später in unserem Code bearbeiten oder auf die Sie zugreifen müssen:

script.js

const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');

Webcam-Unterstützung prüfen

Sie können jetzt einige unterstützende Funktionen hinzufügen, um zu prüfen, ob der von Ihnen verwendete Browser den Zugriff auf den Webcam-Stream über getUserMedia unterstützt:

script.js

// Check if webcam access is supported.
function getUserMediaSupported() {
  return !!(navigator.mediaDevices &&
    navigator.mediaDevices.getUserMedia);
}

// If webcam supported, add event listener to button for when user
// wants to activate it to call enableCam function which we will 
// define in the next step.
if (getUserMediaSupported()) {
  enableWebcamButton.addEventListener('click', enableCam);
} else {
  console.warn('getUserMedia() is not supported by your browser');
}

// Placeholder function for next step. Paste over this in the next step.
function enableCam(event) {
}

Webcam-Stream abrufen

Füllen Sie als Nächstes den Code für die zuvor leere Funktion enableCam aus, die wir oben definiert haben. Kopieren Sie dazu den folgenden Code und fügen Sie ihn ein:

script.js

// Enable the live webcam view and start classification.
function enableCam(event) {
  // Only continue if the COCO-SSD has finished loading.
  if (!model) {
    return;
  }
  
  // Hide the button once clicked.
  event.target.classList.add('removed');  
  
  // getUsermedia parameters to force video but not audio.
  const constraints = {
    video: true
  };

  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    video.srcObject = stream;
    video.addEventListener('loadeddata', predictWebcam);
  });
}

Fügen Sie abschließend temporären Code hinzu, damit Sie testen können, ob die Webcam funktioniert.

Im folgenden Code wird so getan, als wäre Ihr Modell geladen, und die Schaltfläche für die Kamera wird aktiviert, damit Sie darauf klicken können. Sie ersetzen diesen Code im nächsten Schritt. Löschen Sie ihn also gleich wieder:

script.js

// Placeholder function for next step.
function predictWebcam() {
}

// Pretend model has loaded so we can try out the webcam code.
var model = true;
demosSection.classList.remove('invisible');

Sehr gut! Wenn Sie den Code ausgeführt und auf die Schaltfläche geklickt haben, sollte Folgendes angezeigt werden:

95442d7227216528.jpeg

8. Verwendung von Modellen für maschinelles Lernen

Modell laden

Sie können jetzt das COCO-SSD-Modell laden.

Wenn die Initialisierung abgeschlossen ist, aktivieren Sie den Demobereich und die Schaltfläche auf Ihrer Webseite. Fügen Sie dazu diesen Code anstelle des temporären Codes ein, den Sie im letzten Schritt hinzugefügt haben:

script.js

// Store the resulting model in the global scope of our app.
var model = undefined;

// Before we can use COCO-SSD class we must wait for it to finish
// loading. Machine Learning models can be large and take a moment 
// to get everything needed to run.
// Note: cocoSsd is an external object loaded from our index.html
// script tag import so ignore any warning in Glitch.
cocoSsd.load().then(function (loadedModel) {
  model = loadedModel;
  // Show demo section now model is ready to use.
  demosSection.classList.remove('invisible');
});

Nachdem Sie den oben genannten Code hinzugefügt und die Live-Ansicht aktualisiert haben, wird einige Sekunden nach dem Laden der Seite (abhängig von Ihrer Netzwerkgeschwindigkeit) automatisch die Schaltfläche Webcam aktivieren angezeigt, wenn das Modell einsatzbereit ist. Sie haben jedoch auch die predictWebcam-Funktion eingefügt. Jetzt ist es an der Zeit, das vollständig zu definieren, da unser Code derzeit nichts bewirkt.

Weiter geht es zum nächsten Schritt.

Frame von der Webcam klassifizieren

Führen Sie den folgenden Code aus, damit die App kontinuierlich einen Frame aus dem Webcam-Stream abrufen kann, wenn der Browser bereit ist, und ihn zur Klassifizierung an das Modell übergeben kann.

Das Modell parst dann die Ergebnisse, zeichnet ein <p>-Tag an den zurückgegebenen Koordinaten und legt den Text auf das Label des Objekts fest, sofern ein bestimmter Konfidenzwert überschritten wird.

script.js

var children = [];

function predictWebcam() {
  // Now let's start classifying a frame in the stream.
  model.detect(video).then(function (predictions) {
    // Remove any highlighting we did previous frame.
    for (let i = 0; i < children.length; i++) {
      liveView.removeChild(children[i]);
    }
    children.splice(0);
    
    // Now lets loop through predictions and draw them to the live view if
    // they have a high confidence score.
    for (let n = 0; n < predictions.length; n++) {
      // If we are over 66% sure we are sure we classified it right, draw it!
      if (predictions[n].score > 0.66) {
        const p = document.createElement('p');
        p.innerText = predictions[n].class  + ' - with ' 
            + Math.round(parseFloat(predictions[n].score) * 100) 
            + '% confidence.';
        p.style = 'margin-left: ' + predictions[n].bbox[0] + 'px; margin-top: '
            + (predictions[n].bbox[1] - 10) + 'px; width: ' 
            + (predictions[n].bbox[2] - 10) + 'px; top: 0; left: 0;';

        const highlighter = document.createElement('div');
        highlighter.setAttribute('class', 'highlighter');
        highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '
            + predictions[n].bbox[1] + 'px; width: ' 
            + predictions[n].bbox[2] + 'px; height: '
            + predictions[n].bbox[3] + 'px;';

        liveView.appendChild(highlighter);
        liveView.appendChild(p);
        children.push(highlighter);
        children.push(p);
      }
    }
    
    // Call this function again to keep predicting when the browser is ready.
    window.requestAnimationFrame(predictWebcam);
  });
}

Der wirklich wichtige Aufruf in diesem neuen Code ist model.detect().

Alle vorgefertigten Modelle für TensorFlow.js haben eine solche Funktion (deren Name sich von Modell zu Modell ändern kann, daher sollten Sie die Dokumentation für Details prüfen), die die Machine-Learning-Inferenz tatsächlich ausführt.

Bei der Inferenz wird einfach eine Eingabe genommen und durch das Machine-Learning-Modell (im Wesentlichen eine Vielzahl von mathematischen Operationen) ausgeführt, um dann Ergebnisse zu liefern. Bei den vorgefertigten TensorFlow.js-Modellen werden die Vorhersagen in Form von JSON-Objekten zurückgegeben, was die Verwendung erleichtert.

Vollständige Details zu dieser Vorhersagefunktion finden Sie in unserer GitHub-Dokumentation für das COCO-SSD-Modell. Diese Funktion übernimmt viel Arbeit im Hintergrund: Sie kann jedes „bildähnliche“ Objekt als Parameter akzeptieren, z. B. ein Bild, ein Video oder einen Canvas. Die Verwendung vorgefertigter Modelle kann Ihnen viel Zeit und Mühe ersparen, da Sie diesen Code nicht selbst schreiben müssen und ihn sofort verwenden können.

Wenn Sie diesen Code ausführen, sollte ein Bild wie dieses angezeigt werden:

8f9bad6e49e646b.png

Hier ist ein Beispiel für den Code, der mehrere Objekte gleichzeitig erkennt:

a2c73a72cf976b22.jpeg

Endlich! Stellen Sie sich vor, wie einfach es wäre, mit einer solchen Funktion ein Gerät wie eine Nest Cam zu erstellen, die Sie benachrichtigt, wenn Ihr Hund auf dem Sofa oder Ihre Katze auf der Couch liegt. Wenn Sie Probleme mit Ihrem Code haben, sehen Sie sich hier meine endgültige funktionierende Version an, um zu prüfen, ob Sie etwas falsch kopiert haben.

9. Glückwunsch

Herzlichen Glückwunsch! Sie haben die ersten Schritte bei der Verwendung von TensorFlow.js und maschinellem Lernen im Webbrowser gemacht. Jetzt sind Sie an der Reihe, aus diesen bescheidenen Anfängen etwas Kreatives zu machen. Was wirst du erstellen?

Zusammenfassung

In diesem Codelab

  • Sie haben die Vorteile von TensorFlow.js gegenüber anderen Formen von TensorFlow kennengelernt.
  • Sie haben gelernt, in welchen Situationen es sinnvoll sein kann, mit einem vortrainierten ML-Modell zu beginnen.
  • Sie haben eine voll funktionsfähige Webseite erstellt, die Objekte in Echtzeit über Ihre Webcam klassifizieren kann. Dazu gehören:
  • HTML-Grundgerüst für Inhalte erstellen
  • Stile für HTML-Elemente und -Klassen definieren
  • JavaScript-Scaffolding einrichten, um mit dem HTML zu interagieren und das Vorhandensein einer Webcam zu erkennen
  • Vortrainiertes TensorFlow.js-Modell laden
  • Das geladene Modell wird verwendet, um kontinuierliche Klassifizierungen des Webcam-Streams vorzunehmen und einen Begrenzungsrahmen um Objekte im Bild zu zeichnen.

Nächste Schritte

Teile uns deine Kreationen mit! Sie können die Inhalte, die Sie für dieses Codelab erstellt haben, ganz einfach auf andere kreative Anwendungsfälle ausweiten. Wir möchten Sie ermutigen, über den Tellerrand hinauszuschauen und auch nach Abschluss des Hackathons weiter zu hacken.

Vielleicht könntest du eine einfache serverseitige Ebene hinzufügen, um eine Benachrichtigung an ein anderes Gerät zu senden, wenn es ein bestimmtes Objekt deiner Wahl erkennt – über WebSockets. So können Sie ein altes Smartphone ganz einfach upcyceln und ihm einen neuen Zweck geben. Die Möglichkeiten sind unbegrenzt.)

  • Taggen Sie uns in den sozialen Medien mit dem Hashtag #MadeWithTFJS, damit Ihr Projekt im TensorFlow-Blog vorgestellt oder sogar bei zukünftigen TensorFlow-Veranstaltungen präsentiert wird.

Weitere TensorFlow.js-Codelabs

Websites, die Sie sich ansehen sollten