Machine learning in een webapplicatie inbouwen betekende lang: kies een API, beheer een sleutel, schrijf een backend-route en zorg dat je gebruikersdata naar een externe server gaat. Transformers.js snijdt al die stappen weg. Het model draait in de tab van je gebruiker — op hun GPU, met hun hardware, zonder dat er één byte de browser verlaat.
Wat je nodig hebt
Eén npm-pakket, een modern framework of vanilla JavaScript, en een browser die WebGPU of WebAssembly ondersteunt. Dat is het.
npm install @xenova/transformersGeen API-sleutel, geen .env-bestand, geen backend. Het pakket laadt modellen rechtstreeks van de Hugging Face CDN en cachet ze in je browser.
Stap 1: een pipeline initialiseren
Transformers.js werkt via pipelines — vooraf gebundelde combinaties van model + tokenizer + post-processing die een specifieke taak uitvoeren. Je geeft een taak op, en de library kiest het best passende standaard-model:
import { pipeline } from '@xenova/transformers';
// Eerste keer: model wordt gedownload en gecached (~50-150 MB)
const classifier = await pipeline('sentiment-analysis');
const result = await classifier('Dit product werkt erg goed.');
// → [{ label: 'POSITIVE', score: 0.998 }]De tweede keer dat je de pagina laadt, start inferentie direct — geen download, geen wachten.
💡 Beginner-tip: De eerste
await pipeline(...)call kan 10-30 seconden duren terwijl het model laadt. Laat in je UI een laadstatus zien (“Model laden…”) zodat gebruikers weten wat er gebeurt. Na die eerste keer is alles gecached en duurt het een fractie van een seconde.
Stap 2: kies de juiste taak voor jouw use case
Transformers.js ondersteunt een brede set taken. De meest gebruikte voor webapplicaties:
| Taak | Pipeline-naam | Typisch modelformaat |
|---|---|---|
| Sentimentanalyse | sentiment-analysis | ~50 MB |
| Vertaling | translation | ~300 MB |
| Spraakherkenning | automatic-speech-recognition | ~150 MB (Whisper-klein) |
| Samenvatting | summarization | ~250 MB |
| Beeldclassificatie | image-classification | ~90 MB |
| Named entity recognition | token-classification | ~65 MB |
Voor spraakherkenning geef je een audio-blob door; voor beeldclassificatie een URL of canvas-element:
const transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny');
const result = await transcriber(audioBlob);
// → { text: "Dit is een testzin." }Stap 3: WebGPU inschakelen voor betere prestaties
Standaard gebruikt Transformers.js WebAssembly. Voor gebruikers met een moderne GPU schakel je WebGPU in als execution provider — dat geeft tot tien keer hogere throughput op grotere modellen:
import { pipeline, env } from '@xenova/transformers';
// Kies WebGPU als voorkeur, val terug op WASM
env.backends.onnx.wasm.proxy = false;
const classifier = await pipeline('sentiment-analysis', null, {
device: 'webgpu', // of 'wasm' voor maximale compatibiliteit
});Transformers.js detecteert automatisch of WebGPU beschikbaar is en valt terug op WASM als dat niet zo is. Je gebruikers op oudere hardware merken er niets van.
⚡ Gevorderden: Je kunt ook specifieke model-varianten kiezen om te optimaliseren voor grootte of snelheid.
'Xenova/distilbert-base-uncased-finetuned-sst-2-english'is kleiner en sneller dan het standaard sentiment-model. Zoek op de Hugging Face Transformers.js model hub op de filterlibrary:transformers.jsom te zien welke modellen direct beschikbaar zijn zonder conversie.
Stap 4: privacy als architectuurkeuze
Als het model client-side draait, verlaat de data de browser niet. Dat is meer dan een privacyclaim in een cookiebanner — het is een technische eigenschap van de architectuur. Medische tekst, juridische documenten, vertrouwelijke notities: met Transformers.js in de browser heb je een garantie die geen cloud-API kan geven. Heb je zwaardere modellen nodig met dezelfde privacygarantie, dan is lokaal draaien de volgende trede — zie onze gids over open-weight modellen lokaal draaien.
Voor de bredere context over waarom en wanneer browser-inferentie het juiste architectuurpatroon is — inclusief de beperkingen qua modelgrootte — lees de analyse op Het Laatste AI Nieuws: AI in de browser zonder server. (Bron: Hugging Face)
Checklist: ben je klaar?
-
npm install @xenova/transformersgedaan - Pipeline-taak gekozen op basis van use case (zie tabel)
- Laadstatus in de UI toegevoegd voor de eerste model-download
- Getest op de browsers van je doelgroep (Chrome/Edge voor WebGPU, Firefox/Safari recent)
- Model-variant gekozen die past bij de hardware van je gebruikers
- Besloten of WebGPU of WASM de beste keuze is voor jouw doelgroep
- Privacy-voordeel gecommuniceerd als dat relevant is voor je use case