Client-Side AI & Edge Hybrid Execution: WebGPU & Transformers.js
Routing every keystroke classification and PII check to cloud LLMs inflates latency and transmits sensitive enterprise data across the public internet. This article runs quantised Small Language Models and embedding models directly in the browser via WebGPU and Transformers.js v3, implementing a hybrid routing strategy that keeps private data on-device and reserves cloud inference for complex reasoning.
Full-Stack AI Architecture: From Streaming Foundations to Resilient Agentic Systems in Node.js & React
Client-Side AI & Edge Hybrid Execution: WebGPU & Transformers.js
Every request that reaches an LLM API carries a privacy risk proportional to the sensitivity of the text it contains. A user pasting a compensation spreadsheet into the Workspace chat sends salary data to a third-party API. A query containing a customer's medical record enters a cloud provider's inference pipeline. GDPR, HIPAA, and enterprise data governance policies increasingly require that certain categories of data never leave the user's device.
This article implements a hybrid execution model: quantised SLMs running on WebGPU via Transformers.js handle local PII scrubbing, on-device embeddings, and fast intent classification — keeping sensitive data on the device. Complex reasoning and long-context generation route to cloud LLMs only after sensitive entities are redacted. The routing decision is made by a data-sensitivity classifier that runs entirely in the browser.
Who this is for: Engineers building AI features for regulated industries (healthcare, finance, legal) or enterprise customers with strict data residency requirements, who need client-side inference as a practical production capability rather than a demo.
1. WebGPU and Transformers.js in 2025
1.1 What Is Possible On-Device
Modern quantised SLMs (4-bit GGUF, INT8 ONNX) run comfortably in the browser on a GPU with 8GB VRAM via WebGPU. On a MacBook M3 Pro:
| Task | Model | Latency | VRAM |
|---|---|---|---|
| Sentence embedding | Xenova/all-MiniLM-L6-v2 |
5–15ms | 90MB |
| PII entity recognition | Xenova/bert-base-NER |
20–40ms | 120MB |
| Intent classification | Xenova/distilbert-base-uncased-finetuned-sst-2-english |
10–25ms | 70MB |
| Small generation | Xenova/Qwen2.5-0.5B-Instruct |
8–12 t/s | 400MB |
2. On-Device PII Scrubbing Pipeline
2.1 NER-Based Entity Detection
3. On-Device Embeddings for Private Documents
4. Hybrid Routing Layer
5. Loading State and Model Download UX
WebGPU model loading requires downloading quantised weights (70MB–400MB). Users must see a meaningful loading state.
Summary
| Capability | Tool | VRAM | Latency |
|---|---|---|---|
| PII scrubbing | Xenova/bert-base-NER (INT8) |
120MB | 20–40ms |
| Local embedding | Xenova/all-MiniLM-L6-v2 (INT8) |
90MB | 5–15ms |
| Simple generation | Xenova/Qwen2.5-0.5B (INT4) |
400MB | 8–12 t/s |
| Routing decision | Rule-based + NER score | 0 | <5ms |
What's Next
Part 22 switches to quality assurance. We build a Ragas evaluation pipeline that automatically scores every RAG response on Faithfulness, Answer Relevance, and Context Recall — integrated into the CI pipeline so RAG quality regressions are blocked before they reach production.
This article was developed with AI-assisted deep search, specification cross-referencing, and technical research synthesis.