Machine Learning im Browser mit TensorFlow.js

TensorFlow.js ist eine JavaScript-Bibliothek, die das Training und das Ausführen neuronaler Netze im Browser erlaubt. WebGL zum Zugriff auf die lokale Grafikkarte sorgt für ausreichende Rechenleistung.

In Pocket speichern vorlesen Druckansicht 5 Kommentare lesen
Machine Learning im Browser mit TensorFlow.js
Lesezeit: 16 Min.
Von
  • Oliver Zeigermann
Inhaltsverzeichnis

Auf dem lezten TensorFlow Summit hat die JavaScript-Bibliothek TensorFlow.js den Sprung auf Version 1.0 vollzogen und ist seitdem noch stärker in die Plattform rund um das Machine-Learning-Framework TensorFlow integriert. Version 1.0 gibt Entwicklern Garantien über API-Stabilität und Performance, sodass sie TensorFlow.js produktiv einsetzen können.

Es gibt gute Gründe, neuronale Netze mit JavaScript im Browser zu nutzen, obwohl die dominante Programmiersprache für Machine Learning Python ist und das Training sowie die Ausführung typischerweise auf leistungsstarken Servern stattfinden.

  • Einige Entwickler fühlen sich in der Entwicklung mit JavaScript wohler als mit Python.
  • Die Browser-APIs ermöglichen einen komfortablen Zugriff auf Eingabemöglichkeiten für Video und Audio.
  • JavaScript ermöglicht interaktive Ausgaben während oder nach dem Training.* Der Browser ist eine automatisch skalierende Ausführungsumgebung für das Deployment eines komplexen Modells.

Aufgrund der verringerten Rechenleistung eignet sich der Browser vor allem für vortrainierte Modelle, die Entwickler entweder unverändert nutzen oder nachtrainieren. Dass die Daten und/oder Modelle den Browser nicht verlassen und offline verfügbar sind, hat einige Vorteile:

  • Vertrauliche Daten lassen sich lokal in ein Modell trainieren.
  • Nutzer können Bilder kontrollieren, damit vertrauliche Daten wie Ausweise oder unangebrachten Fotos nicht den Rechner verlassen.
  • Die Latenz ist gering.

Zum Lieferumfang von TensorFlow.js gehören einige Modelle, die sich relativ einfach in eigene Anwendungen einbauen lassen. Dass zahlreiche Beispiele vor allem spielerischer Natur sind, sollte Entwickler nicht davon abhalten, sie als Grundlage für ernsthafte Anwendungen herzunehmen.

Mehr Infos

WebGL

WebGL (Web Graphics Library) ist eine Browser-API, zum interaktiven Rendern von 2D- und 3D-Grafiken. Alle aktuellen Browser können die Schnittstelle verwenden, die auf OpenGL ES 2.0 aufbaut.

Die API ist somit für Grafiken ausgelegt, aber die Operationen, die man zur Berechnung von Grafiken benötigt, sind dieselben wie für neuronale Netze.

TensorFlow.js speichert dazu Tensoren (Daten) als WebGL-Texturen und die mathematischen Operationen wie Matrix-Multiplikationen darauf als WebGL Shader. Auf Wunsch kann TensorFlow.js auf der CPU arbeiten, wenn beispielsweise keine GPU vorhanden ist. Allerdings wird in dem Fall der UI-Thread blockiert, was dazu führt, dass während einer Berechnung die Nutzerschnittstelle nicht mehr reagiert.

Im Folgenden dient die Abschätzung des Unfallrisikos für Autofahrer als Fallbeispiel. Die Grundlage ist ein Datensatz mit vier Spalten, der sich folgendermaßen laden lässt, um ihn grafisch zu betrachten:

const csvDataset = await tf.data.csv(DATA_URL, {
delimiter: ";",
columnConfigs: {
group: { isLabel: true }
}
});
Mehr Infos

enterJS 2019

Vom 25. bis 28. Juni findet in Darmstadt die enterJS 2019 statt. Auf der von heise Developer, iX und dpunkt.verlag veranstalteten Konferenz zu Enterprise-JavaScript hält der Autor dieses Artikels im Rahmen des zweitägigen Vortragsprogramms einen Vortrag zu Tensorflow.js.

Neben der URL für den Datensatz und dem Trennzeichen in der CSV-Datei legt der Code fest, dass die Spalte "group" als Label dienen soll. Label heißt die Spalte, deren Wert die anderen Spalten vorhersagen sollen.

Die anderen Spalten geben die Höchstgeschwindigkeit des Fahrzeugs in Meilen pro Stunde, das Alter des Fahrers und die jährliche Laufleistung in tausend Meilen an. Sie bilden die Grundlage für die Vorhersage, ob ein Fahrer viele oder wenige Unfälle haben wird.

Zur Illustration zeigt folgende Grafik mit der Geschwindigkeit und dem Alter zwei der Werte für alle vorliegenden Datensätze. Die Farbe und das Symbol geben die Risikogruppe an, wie sie in der Legende rechts beschrieben ist. Mit bloßem Auge sind zwei Bereiche erkennbar, in denen eine oder zwei Kategorien das Bild dominieren.

Scatterplot für Risikogruppen

In JavaScript lässt sich eine Reihe für jede der drei Risikogruppen erstellen und als Scatterplot ausgeben. Dazu steht mit der TensorFlow.js-Erweiterung tfjs-vis eine komfortable API zur Verfügung.

tfvis.render.scatterplot(
{
values: [valuesAgeSpeedRed,
valuesAgeSpeedGreen,
valuesAgeSpeedYellow],

series: ["many accidents",
"few or no accidents",
"in the middle"]
});