DeepSeek · Browser

A 1.5B-Parameter Reasoning Model Running Locally in Your Browser with WebGPU

By 小月土星 · Jul 21, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Running a 1.5B-parameter model locally in the browser eliminates the two structural problems of remote APIs: per-token costs that become uncontrollable at scale, and the security risk of sending user context over HTTP. WebGPU support in browsers has matured to the point where a four-file React project can serve as a complete inference runtime, making on-device AI accessible through a link rather than a native install.

Summary

A single-page application built with React, Vite, TypeScript, and TailwindCSS loads the ONNX version of DeepSeek-R1-Distill-Qwen-1.5B and executes it locally through the browser's WebGPU runtime. The architecture uses four files — `index.html`, `main.tsx`, `App.tsx`, and `index.css` — to create a complete inference pipeline that never sends user data to a remote server.

The state machine inside `App.tsx` handles WebGPU capability detection, model download progress tracking, error display, and a progressive-enhancement fallback for unsupported browsers. TailwindCSS utility classes inline all styling decisions, eliminating the need for a separate stylesheet beyond a single `@import` directive.

The project demonstrates that the browser is becoming a viable first-party runtime for AI inference. A 1.5-billion-parameter distilled reasoning model, converted to ONNX and loaded through Transformers.js, can run entirely on the user's GPU with zero installation — just a URL.

Takeaways

— Four files — `index.html`, `main.tsx`, `App.tsx`, and `index.css` — form a complete browser-based AI inference application with no external API dependencies.

— The model is DeepSeek-R1-Distill-Qwen-1.5B, converted to ONNX format and loaded via Transformers.js for WebGPU-accelerated inference.

— A single-line WebGPU capability check (`!!(navigator as any).gpu`) gates the entire application, with a degradation message for unsupported browsers.

— TailwindCSS v4 requires only `@import "tailwindcss"` in `index.css` for full configuration, eliminating the need for a separate config file.

— React's `useEffect` with an empty dependency array runs once after mount, setting the `ready` status — a placeholder for future asynchronous model loading logic.

— The `progress` state is an array of objects tracking file, progress, and total bytes, pre-structured for multi-file model shard downloads.

— JSX conditional rendering (`{error && <ErrorUI />}`) maps application state to UI without manual DOM manipulation.

— Vite's HMR decouples heavy model loading from light UI iteration, allowing instant feedback on component changes without reloading the model.

Conclusions

The project's architecture is deliberately minimal — four files with unidirectional dependencies — proving that WebGPU inference does not require a complex build pipeline or backend server.

Defensive initialization of `loadingMessage` to `'出错了'` (Error occurred) rather than `'加载中...'` (Loading...) is a small but sharp design choice: if a code path fails to update the message before display, the user sees a meaningful error instead of a misleading loading state.

TailwindCSS's atomic class names (`flex`, `items-center`, `justify-end`) map more cleanly to LLM-generated code than custom CSS, which explains why the framework is becoming the default for AI-assisted UI development.

The commented-out `setTimeout` in the codebase reveals a bottom-up development strategy: validate UI state transitions with simulated delays before wiring up real asynchronous model loading.

The technology chain — DeepSeek R1 → Distillation → Qwen 1.5B → ONNX → Transformers.js → WebGPU — represents a series of capability sacrifices (size, precision, format) that ultimately trade raw power for the accessibility of a URL-based deployment.

Concepts & terms

WebGPU

A browser API that provides low-level access to the GPU for computation and rendering, enabling machine learning inference to run directly in the browser without plugins or native installations.

ONNX (Open Neural Network Exchange)

An open format for representing machine learning models, allowing models trained in one framework (like PyTorch) to be exported and run in a different runtime (like a browser via ONNX Runtime Web).

TailwindCSS

A utility-first CSS framework that provides atomic class names (e.g., `flex`, `text-center`) instead of requiring custom stylesheets. Classes are scanned at build time and only the used styles are included in the final bundle.

JSX

A syntax extension for JavaScript that allows writing HTML-like tags directly inside JavaScript code. It compiles to `React.createElement` calls and is the standard templating approach in React.

HMR (Hot Module Replacement)

A development feature, provided by tools like Vite, that updates modules in the browser at runtime without a full page reload, preserving application state and dramatically speeding up UI iteration.

Transformers.js

A JavaScript library that brings Hugging Face's Transformers ecosystem to the browser, enabling models to be loaded and run entirely client-side using ONNX Runtime Web and WebGPU.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗