Wenn man über Machine Learning und Googles TensorFlow spricht, denken die meisten Leute eher an Python und spezialisierte Hardware als an JavaScript und einen beliebigen Browser. Was TensorFlow.js kann und warum es Sinn ergibt, Machine Learning im Browser zu betreiben, erklärt dieser Artikel.

TensorFlow.js [1] ist eine JavaScript-Bibliothek, die sowohl im Browser als auch mit Node.js auf dem Server läuft. Wir interessieren uns in diesem Artikel allerdings nur für die Anwendung im Browser. Die Schnittstelle von TensorFlow.js ist stark an TensorFlows High-Level API Keras [2] angelehnt. Keras-Code ist oft nur auf den zweiten Blick von TensorFlow.js-Code zu unterscheiden. Die meisten Unterschiede gehen auf die unterschiedlichen Sprachkonstrukte von Python und JavaScript für Konfigurationsparameter zurück.

Machine Learning mit jeder GPU

Mit TensorFlow.js lassen sich Machine-Learning-Projekte von null auf erstellen. Stehen die notwendigen Daten zur Verfügung, können Modelle direkt im Browser trainiert und ausgeführt werden. Dabei nutzt TensorFlow.js die Grafikkarte (GPU) des Rechners über das Browser-API WebGL. Man verliert dadurch zwar etwas Performance, weil WebGL nur durch ein paar Tricks dazu gebracht werden kann, die von TensorFlow.js gewünschten Matrixmultiplikationen auszuführen. Doch die sind notwendig, da TensorFlow.js als Strategie für Machine Learning hauptsächlich neuronale Netzwerke unterstützt. Diese sind sowohl beim Training, als auch bei der Vorhersage sehr gut durch Matrixmultiplikationen abbildbar. Hier sehen wir schon den ersten Vorteil von TensorFlow.js gegenüber TensorFlow: Während TensorFlow zurzeit nur NVIDIA-GPUs über CUDA unterstützt, funktioniert TensorFlow.js mit jeder Grafikkarte. Listing 1 enthält den Code, um mit dem High-Level API ein sequenzielles neuronales Netzwerk im Browser zu erstellen. Wer TensorFlows Keras API kennt, kommt hier sehr schnell klar. Tutorials finden sich unter [3].

// create a sequential model
const model = tf.sequential();
 
// add a fully connected layer with 10 units (neurons)
model.add(tf.layers.dense({units: 10}));
 
// add a convolutional layer to work on a monochrome 28x28 pixel image
// with 8 filter units
model.add(tf.layers.conv2d({
  inputShape: [28, 28, 1],
  filters: 8
}));
 
// compile the model like you would do in Keras
// the API speaks for itself
model.compile({
  optimizer: 'adam',
  loss: 'categoricalCrossentropy',
  metrics: ['accuracy']
});

Interaktion mit allen Browser-APIs

Das Ansprechen von Schnittstellen auf unterschiedlichen Betriebssystemen und Geräten kann immer noch eine leidvolle Erfahrung sein. Nicht so, wenn man eine browserbasierte Anwendung entwickelt. Selbst der Zugriff auf so komplexe Hardware wie eine Kamera oder ein Mikrofon sind im HTML-Standard verankert und werden von allen aktuellen Browsern unterstützt. Auch die ohnehin von Natur aus auf Interaktion ausgelegte Natur des Browsers kommt einem hier zupass. Interaktive Anwendungen mit einem Anteil an Machine Learning sind damit so leicht wie noch nie.

Als Beispiel haben wir ein einfaches Spiel, Scavenger Hunt [4], das natürlich auch im Browser eines Mobiltelefons läuft und damit auch am meisten Spaß bringt. Wie in Abbildung 1 gezeigt, musst man in der echten Welt innerhalb kurzer Zeit ein Objekt finden, das zum angezeigten Emoticon passt. Dazu wird die eingebaute Kamera und ein entsprechend trainiertes neuronales Netzwerk verwendet, das die passenden Objekte erkennen kann. Ein solches Modell kann von jedem JavaScript-Entwickler auch ohne Machine-Learning-Kenntnisse genutzt werden.

Abb. 1: Mach ein Foto des Emoticons im echten Leben

Machine Learning ohne Installation auf jedem Rechner

TensorFlow.js ermöglicht das Deployment eines vorab mit TensorFlow erzeugten Modells. Dieses Modell kann bereits komplett oder auch teilweise auf starker Hardware trainiert worden sein. Im Browser kommt es dann nur noch zur Anwendung oder wird weiter trainiert. Abbildung 2 zeigt eine Pac-Man-Variante, die sich durch unterschiedliche Posen steuern lässt. Sie basiert auf einem vortrainierten Netzwerk [5], das im Browser auf die eigenen Posen nachtrainiert wird. Man spricht hier von Transfer-Learning.

Abb. 2: Ein vortrainiertes MobilNet wird durch eigene Posen nachtrainiert

Das Modell wird dazu von einem mitgelieferten Programm konvertiert und kann nach dem Laden durch eine Zeile, ähnlich wie die folgende, asynchron geladen werden:

const model = await tf.loadModel('model.json');

Danach ist das Modell nicht mehr von einem direkt im Browser entstandenen Modell unterscheidbar. Es kann z. B. sehr einfach zur Vorhersage genutzt werden, die wiederum asynchron auf der GPU ausgeführt wird:

const example = tf.tensor([[150, 45, 10]]);
const prediction = model.predict(example);
const value = await prediction.data();

Neben der Unterhaltung durch Spiele sind hier noch nützlichere Anwendungen denkbar. Navigation oder Interaktion durch Gesten können sowohl für Menschen mit Behinderungen als auch für Menschen in besonderen Situationen hilfreich sein. Und wie gesagt: ohne jegliche Installation, durch einfaches Laden einer Webseite.

Ein weiteres Beispiel für eine solche Positionserkennung ist das PoseNet [6] in Abbildung 3. Es ist bereits so vortrainiert, dass es auch bei mehreren Personen im Bild die Position von Gesicht, Armen und Beinen erkennen kann. Auch hier reicht das Potenzial von Spielen bis zu Steuerungen seriöser Anwendungen auch aus einer gewissen Entfernung. Die Nutzung des PoseNet ist wieder trivial und erfordert nicht einmal Grundkenntnisse im Bereich Machine Learning. In Listing 2 ist kurz skizziert, wie einfach das geht.

Abb. 3: Ein vortrainiertes Modell erkennt auch bei mehreren Personen die Position

import * as posenet from '@tensorflow-models/posenet';
import * as tf from '@tensorflow/tfjs';
 
// load the posenet model
const model = await posenet.load();
 
// get the poses from a video element linked to the camera
const poses = await model.estimateMultiplePoses(video);
 
// poses contain
// - confidence score
// - x, y positions

Userdaten müssen den Browser nicht verlassen

Gerade jetzt, wo Datenschutz durch die DSGVO [7] immer größere Bedeutung bekommt, überlegt sich so mancher zweimal, ob er ein bestimmtes Cookie auf seinem Rechner haben möchte oder ob man eine Statistik seiner Nutzerdaten für die Verbesserung der User Experience an den Hersteller einer Software senden möchte. Wie wäre nun aber die Umkehrung? Der Hersteller liefert ein generelles Modell über die Nutzung einer Software, und ähnlich wie beim oben beschriebenen Pac-Man-Spiel wird dieses mit Transfer-Learning-Modell an den einzelnen User angepasst. Hier ist bisher noch nicht viel passiert, das Potenzial ist aber groß. Warten wir die Entwicklungen ab.

Fazit

Machine Learning im Browser erscheint im ersten Moment für viele Entwickler nicht sonderlich sinnvoll. Wenn man jedoch etwas genauer hinsieht, ergeben sich Anwendungsmöglichkeiten, die sonst keine andere Plattform bieten kann:

1. Ausbildung: Man kann direkt mit Machine-Learning-Konzepten interagieren und durch Experimentieren lernen

2. Entwicklung: Wenn man ohnehin eine JS-Anwendung hat oder bauen will bzw. muss, kann man darin direkt Machine-Learning-Modelle nutzen oder mittrainieren

3. Spiele: Real-Time Position Estimation nur über die Kamera (also wie die Personen vor der Kamera sich gerade bewegen) oder Image Recognition kann direkt mit Spielen gekoppelt werden. Es gibt sehr coole Beispiele dafür, was man alles damit machen kann. Die Möglichkeiten gehen aber deutlich über Spiele hinaus

4. Deployment: Man hat bereits ein Machine-Learning-Modell und fragt sich, wie man es in Produktion bringt. Der Browser ist eine Lösung. Auch fertige Modelle können ohne tiefe Kenntnis von Machine Learning in die eigene Anwendung eingebunden werden

5. Interaktive Visualisierungen: Für interaktives Clustering [8] oder auch künstlerische Projekte [9]

Wie in Abbildung 4 zu sehen, müssen wir, was die Performanz gegenüber TensorFlow angeht, bei gleicher Hardware allerdings noch einige Abstriche machen. Der Vergleich läuft auf einer 1080 GTX GPU und misst die Zeit für eine Vorhersage mit dem MobileNet, wie es auch für die Beispiele hier verwendet wird. TensorFlow läuft in diesem Fall drei- bis viermal schneller als TensorFlow. js; allerdings sind beide Werte sehr niedrig. Der WebGPU-Standard [11], der einen direkteren Zugang zur GPU erlauben wird, lässt auf bessere Performanz hoffen.

Abb. 4: Performanzvergleich: klassisches TensorFlow und TensorFlow.js (Quelle: [10])