KI-Modelle direkt im Browser ausführen mit Transformers.js

Was wäre, wenn Ihre Web-App Texte klassifizieren, Audio transkribieren oder Objekte in Bildern erkennen könnte – ohne jemals Daten an einen Server zu senden? Genau das ermöglicht Transformers.js. Es bringt clientseitige KI-Inferenz in den Browser und benötigt dafür nichts weiter als JavaScript.

Was ist Transformers.js?

Transformers.js ist eine JavaScript-Bibliothek von Hugging Face, mit der Sie vortrainierte Machine-Learning-Modelle direkt im Browser ausführen können – ohne Backend-Modellserver. Sie spiegelt die API der Python-Bibliothek transformers von Hugging Face wider, sodass das mentale Modell nahtlos übertragbar ist, wenn Sie bereits damit gearbeitet haben.

Das gepflegte Paket ist @huggingface/transformers. Falls Sie auf ältere Verweise auf @xenova/transformers stoßen, beziehen sich diese auf den früheren Paketnamen, bevor das Projekt unter die Wartung von Hugging Face überging. Die aktuelle stabile Version ist die v3-Linie, wobei Entwicklungsvorschauen von v4 verfügbar, aber noch nicht universell stabil sind.

Wie Browser-KI-Inferenz tatsächlich funktioniert

Transformers.js führt Modelle mithilfe der ONNX Runtime aus, die für JavaScript-Umgebungen kompiliert wurde. ONNX (Open Neural Network Exchange) fungiert als universelles Format, das es ermöglicht, in PyTorch, TensorFlow oder JAX trainierte Modelle im Browser auszuführen.

Standardmäßig läuft die Inferenz auf der CPU über WebAssembly (WASM) – was in praktisch allen modernen Browsern funktioniert. Für bessere Performance auf unterstützter Hardware können Sie WebGPU aktivieren, das die Berechnung auf die GPU auslagert.

Die WebGPU-Verfügbarkeit entwickelt sich weiterhin über Browser und Plattformen hinweg. Den aktuellen Implementierungsstatus können Sie auf webstatus.dev überprüfen. In der Praxis variieren Support und Performance je nach Browser, Betriebssystem und GPU-Treibern.

Verwenden Sie WASM, wenn Sie maximale Kompatibilität benötigen. Wechseln Sie zu WebGPU, wenn Performance wichtig ist und Sie moderne Browser mit WebGPU-Unterstützung anvisieren.

Nicht jedes Hugging-Face-Modell läuft im Browser

Dies ist eine wichtige Einschränkung: Modelle benötigen ONNX-kompatible Gewichte, um mit Transformers.js zu funktionieren. Viele beliebte Architekturen – DistilBERT, Whisper, T5, Llama, Qwen und Dutzende mehr – haben bereits ONNX-Versionen auf dem Hugging Face Hub verfügbar. Für Modelle, die diese nicht haben, können Sie sie mit Optimum konvertieren.

Da Browser-Umgebungen ressourcenbeschränkt sind, sind quantisierte Modelle der praktische Standard. Die Option dtype steuert dies:

• "fp32" — volle Präzision, Standard für WebGPU
• "fp16" — halbe Präzision, gute GPU-Balance
• "q8" — 8-Bit-Quantisierung, Standard für WASM
• "q4" — 4-Bit-Quantisierung, kleinste und schnellste Variante

Ihre erste Pipeline ausführen

Die Pipeline-API übernimmt Vorverarbeitung, Inferenz und Nachverarbeitung in einem Aufruf. Installieren Sie das Paket:

npm install @huggingface/transformers

Führen Sie dann eine Sentiment-Analyse in wenigen Zeilen aus:

import { pipeline } from "@huggingface/transformers";

// Defaults to WASM, uses a default model for the task
const classifier = await pipeline("sentiment-analysis");
const result = await classifier("I love building with Transformers.js!");
console.log(result); // [{ label: 'POSITIVE', score: 0.9998 }]

Um WebGPU mit fp16-Präzision zu aktivieren:

const classifier = await pipeline(
  "sentiment-analysis",
  "Xenova/distilbert-base-uncased-finetuned-sst-2-english",
  { device: "webgpu", dtype: "fp16" }
);

Modelldateien werden nach dem ersten Download im Browser zwischengespeichert, sodass wiederholte Verwendung – auch offline – kein erneutes Abrufen erfordert. Für den Produktionseinsatz sollten Sie erwägen, Modell-Assets selbst zu hosten, anstatt sich direkt auf den Hub zu verlassen.

Ein praktischer Hinweis: Standardmäßig läuft die Inferenz im Hauptthread, was die Benutzeroberfläche während aufwändiger Berechnungen einfrieren kann. Die Verlagerung der Inferenz in einen Web Worker ist das richtige Muster für jede Produktionsfunktion.

Warum das für Frontend-Entwickler wichtig ist

Die Ausführung von KI-Modellen im Browser mit Transformers.js eröffnet Anwendungsfälle, die serverseitige Inferenz nicht so elegant abdecken kann:

• Datenschutzfreundliche Inferenz — Benutzerdaten verlassen niemals das Gerät
• Offline-KI-Anwendungen — können nach dem initialen Modell-Download ohne Netzwerkverbindung funktionieren
• Reduzierte Serverkosten — weniger Backend-GPU-Workloads, die bereitgestellt oder skaliert werden müssen
• Features mit geringer Latenz — kein Netzwerk-Roundtrip zu einem API-Endpunkt

Die Liste der unterstützten Aufgaben ist umfangreich: Textklassifizierung, Zusammenfassung, Übersetzung, Objekterkennung, Bildsegmentierung, Spracherkennung, Text-to-Speech und mehr.

Fazit

Transformers.js macht browserbasierte KI für Frontend-Entwickler zunehmend praktikabel. Beginnen Sie mit einem kleinen quantisierten Modell, validieren Sie, ob die Aufgabe zu Ihrem Anwendungsfall passt, und optimieren Sie dann von dort aus – WebGPU für Geschwindigkeit, Web Workers für UI-Reaktionsfähigkeit und selbst gehostete Modelle für Produktionszuverlässigkeit. Die offizielle Dokumentation und der Model Hub sind die besten nächsten Anlaufstellen.

Häufig gestellte Fragen (FAQs)

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.