WebLLM 完整指南如何用 WebGPU 加速在浏览器里跑起 LLM 推理【免费下载链接】web-llmHigh-performance In-browser LLM Inference Engine项目地址: https://gitcode.com/GitHub_Trending/we/web-llm把 LLM 部署到服务器意味着 GPU 成本、接口密钥和用户数据出域而把推理搬进前端又常被浏览器跑不动的顾虑劝退。WebLLM 就是一个高性能的浏览器端 LLM 推理引擎模型权重与计算内核全部在浏览器内加载执行由 WebGPU 做硬件加速数据不出本机。它内置 Llama、Qwen、Phi、Gemma 等开源模型并完全兼容 OpenAI API 调用方式现有集成代码基本可以原样迁移。它底层是怎么跑的一次推理的数据链路是这样的你的消息先进入对话模板src/conversation.ts按模型的对话格式拼接好角色标记再交给分词器切成一串 token。这串 token 进入模型执行层——核心是一个 WASM 文件WebAssembly一种在浏览器里安全运行的二进制指令格式。它把矩阵乘法、注意力机制这些算子编译成浏览器能直接执行的代码而真正的并行计算由 WebGPU 下发到显卡上执行。你可以把它理解成程序和权重都装在浏览器本地WASM 是程序模型权重是数据显卡相当于本地加速器。生成阶段逐 token 循环每产出一个 token它和对应的键值缓存KV Cache记录历史 token 的注意力中间结果就写回内存供下一步计算复用这决定了上下文越长、内存涨得越快。token 生成完再解码回文字流式地吐回前端界面。模型文件首次加载后会写入浏览器本地缓存缓存后端可通过cacheBackend在 Cache API、IndexedDB、OPFS 之间切换二次访问就不用重新下载。跑起来从零到可用的 4 步第 1 步确认浏览器支持 WebGPU打开一个支持 WebGPU 的 Chrome 版本做验证。没有这层硬件加速模型推理速度会掉到不可用这是最常见的跑不起来原因。验证通过后再选模型能少踩很多坑。第 2 步安装 mlc-ai/web-llm 包用 npm 装mlc-ai/web-llm即可不想动工程的话也可以从 CDN 直接 import。装完就得到一个引擎入口后续所有推理操作都通过MLCEngine接口发起核心引擎逻辑见 src/engine.ts。注意别把它当普通 npm 包直接 require——它依赖浏览器的 GPU 环境必须跑在真实页面里。第 3 步选择量化版本并加载模型通过CreateMLCEngine一行创建引擎并加载模型同时可以覆盖 KV 缓存配置const engine await webllm.CreateMLCEngine( Llama-3.1-8B-Instruct-q4f32_1-MLC, { initProgressCallback }, { context_window_size: 2048 }, );模型名里的q4f32_1是量化格式位数越小权重体积越小下载和显存开销都低适合第一次跑通。context_window_size控制上下文长度它直接决定 KV Cache 的内存占用起步建议 2048。首次加载要下载数 GB 的模型文件异步过程务必挂上进度回调否则用户只会看到页面假死。第 4 步发起 OpenAI 风格的聊天请求模型就绪后调用方式和 OpenAI SDK 几乎一致const reply await engine.chat.completions.create({ messages: [{ role: user, content: Hello! }], stream: true, });stream: true开启流式输出前端可以逐块渲染。参数细节可参考 docs/user/api_reference.rst。如果你的请求里带了model字段它会被忽略——换模型要走engine.reload(model)。让性能再上一个台阶内存占用过高表现为上下文一长页面卡死、浏览器崩溃。手段是把context_window_size调小或改用sliding_window_size加attention_sink_size滑动窗口只保留最近 N 个 token 的缓存sink 保留最开头的几个 token。预期 KV Cache 内存从随上下文线性增长变成近似常数。首次加载慢表现为大模型要下载数 GB。手段是改用更小量化变体如q4f16_1或换 1B、3B 级别的模型先跑通同时确认cacheBackend可用第二次起走本地缓存。预期二次访问的加载时间缩短到秒级。生成时界面卡顿表现为打字或滚动都卡。手段是把引擎挪进 Web Worker用CreateWebWorkerMLCEngine替代直接实例化完整示例见 examples/get-started-web-worker需要跨页面保持模型常驻的话可参考 examples/service-worker 的 Service Worker 写法。预期 UI 线程不再被推理占用。这些场景我推荐你试试 本地聊天应用个人敏感数据不出浏览器适合做隐私优先的对话工具。关键配置小模型加context_window_size: 2048控制内存。 结构化数据提取在表单、爬取结果上做字段抽取JSON mode 保证输出严格合法。关键配置response_format: { type: json_object }参考 examples/json-mode。 浏览器插件扩展的后台 Service Worker 可以常驻模型避免每次打开插件都重新加载。关键配置CreateServiceWorkerMLCEngine参考 examples/chrome-extension-webgpu-service-worker。延伸阅读快速上手与 CDN 用法docs/user/get_started.rst覆盖安装验证与在线沙箱演示各 API 参数说明docs/user/api_reference.rst含流式、seed、函数调用等字段官方示例集examples/每个目录对应一种用法流式、JSON mode、多模型等内置模型清单与预置配置src/config.ts 中的prebuiltAppConfig从源码构建与自定义模型编译docs/developer/【免费下载链接】web-llmHigh-performance In-browser LLM Inference Engine项目地址: https://gitcode.com/GitHub_Trending/we/web-llm创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考