Stable Diffusion in the Browser with WebNN and ONNX Runtime

Stable Diffusion can now run directly inside a browser tab using WebNN and ONNX Runtime Web, according to a guide from Scribbler. The stack enables local, private image generation without cloud APIs or expensive GPUs, with turbo models generating images in as little as ~100ms on GPU-accelerated hardware. Users must enable experimental WebNN and WebGPU flags in Chrome or Edge to achieve GPU acceleration.

Blog /blog/ Categories: AI-ML /categories/AI-ML , Scribbler /categories/Scribbler , JavaScript /categories/JavaScript Table of Contents A practical guide using Scribbler WebNN + a-practical-guide-using-scribbler-webnn--scribbler-webnnsdjs scribbler-webnn/sd.js 🧠 Core Stack Explained -core-stack-explained ⚙️ How It Works Pipeline ️-how-it-works-pipeline 🧩 An Easy Implementation using -an-easy-implementation-using-scribbler-webnnsdjs scribbler-webnn/sd.js ⚡ Performance: Why This Is Wild -performance-why-this-is-wild 🔥 GPU Acceleration Intel + NVIDIA -gpu-acceleration-intel--nvidia 🌍 Why This Is a Game Changer -why-this-is-a-game-changer 🧠 Architectural Shift: Cloud → Edge → Browser -architectural-shift-cloud--edge--browser ✨ Final Thought -final-thought 🚀 Live demos & resources -live-demos--resources A practical guide using Scribbler WebNN + scribbler-webnn/sd.js a-practical-guide-using-scribbler-webnn--scribbler-webnnsdjs For years, running Stable Diffusion meant: - Python environments - CUDA setup - Expensive GPUs - Cloud APIs That model is breaking. Today, with WebNN + ONNX Runtime Web + WebGPU , you can: Run Stable Diffusion directly inside a browser tab — locally, privately, and fast. This shift is profound. It turns every browser into an AI runtime , not just a UI. According to recent work in browser ML stacks, technologies like WebGPU, WASM, and ONNX Runtime Web now enable high-performance AI inference locally without servers. 🧠 Core Stack Explained -core-stack-explained 1. WebNN Hardware-native AI in browser 1-webnn-hardware-native-ai-in-browser WebNN is a new web standard that allows models to run directly on: - GPU Intel / NVIDIA / AMD - CPU - NPU AI accelerators It exposes native acceleration without needing CUDA or platform-specific code. 👉 Think of it as: “DirectML / CoreML — but for the web.” Note:To run Stable Diffusion efficiently in the browser using WebNN and WebGPU, you must first enable these experimental features in your browser settings. Navigate to chrome://flags or edge://flags and enable WebNN and WebGPU, then restart the browser. Without these enabled, the model will fall back to CPU-based execution, resulting in significantly slower performance. With GPU acceleration active, turbo models can generate images in as little as ~100ms, while full Stable Diffusion 1.5 runs in just a few seconds directly inside the browser. 2. ONNX Runtime Web 2-onnx-runtime-web ONNX Runtime is the execution engine that: - Loads ONNX models - Optimizes execution graph - Chooses backend WebNN, WebGPU, WASM It supports: - WebGPU acceleration - WebNN execution provider - WASM fallback It can deliver massive speedups 20x–500x vs CPU in some cases when GPU is used. 3. Stable Diffusion ONNX optimized 3-stable-diffusion-onnx-optimized Stable Diffusion runs as a pipeline: - Text encoder - UNet denoising core - VAE decoder The trick is: ✔ Convert to ONNX ✔ Quantize fp16 / int8 / 4-bit ✔ Split into browser-friendly chunks 4. Scribbler WebNN sd.js 4-scribbler-webnn-sdjs The project you shared: 👉 scribbler-webnn Provides: - A lightweight Stable Diffusion engine in JS - WebNN + ONNX Runtime integration - Notebook-style execution Scribbler This is the missing piece that makes everything usable. ⚙️ How It Works Pipeline ️-how-it-works-pipeline Prompt → Tokenizer → Text Embedding ↓ UNet diffusion steps ↓ Latent image ↓ VAE decode ↓ Final Image Canvas All of this runs inside the browser . 🧩 An Easy Implementation using scribbler-webnn/sd.js -an-easy-implementation-using-scribbler-webnnsdjs 1. Load ONNX Runtime WebGPU/WebNN 1-load-onnx-runtime-webgpuwebnn js const ortRes = await fetch "https://data.jsdelivr.com/v1/packages/npm/onnxruntime-web" ; const ortData = await ortRes.json ; const ortVersion = ortData.tags.dev; await scrib.loadScript https://cdn.jsdelivr.net/npm/onnxruntime-web@${ortVersion}/dist/ort.webgpu.min.js ; 2. Import sd.js THIS is key 2-import-sdjs-this-is-key js const SD BASE = "https://decentralized-intelligence.com/scribbler-webnn/"; const { SDPipeline, AVAILABLE MODELS } = await import ${SD BASE}/sd.js ; 3. Create Pipeline 3-create-pipeline js const pipeline = new SDPipeline { model: "sd-turbo", // or "sdxl-turbo", "sd-1.5" provider: "webnn", // or "webgpu" } ; 👉 This is the core object — everything runs through it. 4. Load Model async + progress 4-load-model-async--progress js await pipeline.load { onProgress: p = { console.log "Loading:", p, "%" ; } } ; 5. Generate Image Correct API 5-generate-image-correct-api js const result = await pipeline.generate { prompt: "a futuristic city at sunset, ultra realistic", steps: 4, // turbo models: 1–4 steps } ; 6. Render to Canvas 6-render-to-canvas The pipeline does NOT return a DOM image. It returns raw output that you render: js const canvas = document.getElementById "canvas" ; await pipeline.draw result, canvas ; See for yourself see-for-yourself 🖥️ Sample Page ️-sample-page Checkout a simple sample html page that illustrates the power of WebNN: - Prompt input - Model selection Turbo / SD1.5 - Real-time rendering 👉 https://decentralized-intelligence.com/scribbler-webnn/sample/ https://decentralized-intelligence.com/scribbler-webnn/sample/ 📓 Scribbler Notebook -scribbler-notebook We can also use WebNN in Scribbler notebooks. This is where things get interesting: You get: - Interactive cells - Editable prompts - Live GPU execution - Shareable links No setup. Just open and run. ⚡ Performance: Why This Is Wild -performance-why-this-is-wild 🟢 Turbo Models e.g., SD Turbo, LCM -turbo-models-eg-sd-turbo-lcm - ~1–4 steps inference - GPU accelerated via WebNN/WebGPU - Latency: ~100ms to 300ms These models trade a bit of quality for extreme speed. 🔵 Stable Diffusion 1.5 -stable-diffusion-15 - 20–30 steps - Optimized ONNX + fp16 - Latency: ~2–4 seconds in browser This was previously impossible without CUDA GPUs . ⚙️ Why it’s fast ️-why-its-fast - No network latency local execution - GPU acceleration via WebNN/WebGPU - Quantized models smaller tensors - Optimized ONNX graphs 🔥 GPU Acceleration Intel + NVIDIA -gpu-acceleration-intel--nvidia The beauty of WebNN: - Works on Intel iGPUs - Works on NVIDIA GPUs - No CUDA dependency This is huge. Traditionally: | Platform | Requirement | |---|---| | PyTorch SD | CUDA NVIDIA only | | Browser SD | Any GPU via WebNN | 🌍 Why This Is a Game Changer -why-this-is-a-game-changer 1. Zero Setup AI 1-zero-setup-ai No: - Python - pip install - CUDA - Docker Just open a URL. 2. Infinite Scale No Servers 2-infinite-scale-no-servers Every user runs inference locally. Result: - Zero GPU hosting cost - No scaling bottlenecks 3. Privacy by Default 3-privacy-by-default - Prompts stay local - Images never leave device This is critical for: - Design tools - Enterprise apps - Sensitive workflows 4. New App Paradigm 4-new-app-paradigm We are moving from: Frontend → API → GPU server → Response To: Frontend = AI Engine 5. Shareable AI Apps 5-shareable-ai-apps Instead of: “Clone repo, install dependencies” You now say: “Open this link” 6. Democratization of AI 6-democratization-of-ai Anyone with: - A laptop - A browser …can run generative AI. 🧠 Architectural Shift: Cloud → Edge → Browser -architectural-shift-cloud--edge--browser | Era | Compute Location | |---|---| | 2015–2020 | Cloud APIs | | 2020–2023 | Local GPU | | 2024+ | Browser-native AI | This is the same shift we saw with: - IDE → VSCode → Web IDEs - Apps → SaaS → PWA Now: AI → Local AI → Browser AI 🧪 What This Enables Next -what-this-enables-next - Real-time AI design tools - Multiplayer generative apps - AI-powered web games - Local fine-tuning in browser - Edge-first AI startups 🧩 Key Takeaway -key-takeaway What you’re building with: scribbler-webnn sd.js - WebNN + ONNX Runtime …is not just a demo. It’s a preview of a new computing model: The browser is becoming the universal AI runtime. ✨ Final Thought -final-thought When Stable Diffusion runs: - In 100ms - On any GPU - Inside a browser tab it stops being “AI infrastructure” and becomes: a primitive of the web itself 🚀 Live demos & resources -live-demos--resources - GitHub: https://github.com/gopi-suvanam/scribbler-webnn https://github.com/gopi-suvanam/scribbler-webnn - sd.js: https://decentralized-intelligence.com/scribbler-webnn/sd.js https://decentralized-intelligence.com/scribbler-webnn/sd.js - Sample page: https://decentralized-intelligence.com/scribbler-webnn/sample/ https://decentralized-intelligence.com/scribbler-webnn/sample/ - Scribbler Notebook: https://app.scribbler.live/?jsnb=https://decentralized-intelligence.com/scribbler-webnn/sample/WebNN-Stable-Diffusion.jsnb https://app.scribbler.live/?jsnb=https://decentralized-intelligence.com/scribbler-webnn/sample/WebNN-Stable-Diffusion.jsnb