WebLLM 浏览器内推理一个 WASM 文件如何把 8B 大模型装进浏览器【免费下载链接】web-llmHigh-performance In-browser LLM Inference Engine项目地址: https://gitcode.com/GitHub_Trending/we/web-llm你想把大模型聊天页放到客户内网常被两件事卡住数据不能出公司GPU 预算又下不来。WebLLM 让 8B 级 LLM 直接在浏览器里跑——模型完全在客户端加载推理走 WebGPU。下面跟着一次reload()调用的完整路径拆清楚 WASM 文件在其中扮演的角色。核心机制拆解reload()是怎么把模型装进 GPU 的WebLLM 的加载入口在 src/engine.ts 的MLCEngine.reload()它做的事可以拆成三段起运行时、接 GPU、跑推理。第 1 步下载并实例化 WASM 运行时reload()先根据你传的model_id查配置拿到两个 URLmlc-chat-config.json模型的说明书含分词表、生成默认值和model_lib指向的.wasm文件。这里说的 WASM 不是单个算子库而是一整个 TVM/WebGPU 推理运行时——它把模型的计算图、量化 kernel、内存管理都打进了一个二进制里。下载走了 src/cache_util.ts 封装的 artifact cache远端 URL 会进浏览器的 Cache Storage第二次打开页面就不再重新拉那 200MB 的 WASM。拿到字节流后引擎调用tvmjs.instantiate(wasm.buffer, ...)把它实例化得到后续所有步骤都要用的tvm对象。第 2 步对接 WebGPU再拉权重WASM 实例化完只是引擎启动了还没法算。接下来reload()会调tvmjs.detectGPUDevice()拿 WebGPU 设备拿不到就直接抛WebGPUNotAvailableError还会校验模型要求的特性比如shader-f16调tvm.initWebGPU(device)把设备接进运行时并挂上device.lost监听——显存不够时 GPU 上下文会丢这是后面DeviceLostError的来源加载 tokenizer再通过tvm.fetchTensorCache把量化后的模型权重比如 q4f32_1 就是 4-bit 权重、fp32 累加拉进显存用LLMChatPipeline见 src/llm_chat.ts把权重、tokenizer、配置组装成一条推理管线并asyncLoadWebGPUPipelines()把 kernel 编译成 WebGPU pipeline。到这一步initProgressCallback会打出 Finish loading on ...模型才真正可用。第 3 步请求如何从主线程流到推理管线你调engine.chat.completions.create(...)时请求并不直接进管线。如果你的引擎跑在 Web Worker 或 Service Worker 里推荐做法否则长 prefill 会卡住页面渲染主线程只是把请求序列化成 src/message.ts 里定义的消息发过去src/web_worker.ts 的WebWorkerMLCEngineHandler收到后转发给里面的MLCEngine。真正的生成是个两步循环_generate()先prefill——一次性处理完整个 prompt填满 KV cache然后进入 decode 循环每轮只算一个新 token直到命中结束符或max_tokens。流式模式下每个 chunk 作为消息发回主线程这就是聊天框逐字出字的来源。上手实战三步跑通第一次浏览器内推理拿到代码并启动最小示例git clone https://gitcode.com/GitHub_Trending/we/web-llm cd web-llm/examples/get-started按 examples/get-started/ 的 README 装依赖、起本地服务器示例用的是 Vitenpm run dev一类的命令以该目录 package.json 为准。浏览器打开后它会自动走CreateMLCEngine加载模型首次下载 WASM 权重耐心等进度条走完。想在自己的代码里跑最小形态就这几行参考 examples/get-started/src/get_started.tsimport * as webllm from mlc-ai/web-llm; const engine await webllm.CreateMLCEngine( Llama-3.1-8B-Instruct-q4f32_1-MLC, { initProgressCallback: (r) console.log(r.text) }, { context_window_size: 2048 }, );第一个参数是预置模型 ID第三个参数chatOpts会覆盖模型自带的mlc-chat-config.json。发起对话接口和 OpenAI 兼容方便你从服务端推理平滑迁移const reply await engine.chat.completions.create({ messages: [{ role: user, content: List three US states. }], max_tokens: 256, });显存吃紧的话把context_window_size调小或改用滑动窗口sliding_window_size: 1024加attention_sink_size: 4长对话的 KV cache 占用会降下来。想要更省主线程的体验看 examples/get-started-web-worker/把引擎搬进 Worker 只需换一下创建入口。避坑速查加载模型时最常撞上的 3 个报错报错可能原因解法MissingModelWasmErrormodel_id查不到记录或记录里缺model_lib字段WASM 地址确认传的 ID 在prebuiltAppConfig里或自己在appConfig.model_list里把model_lib填对格式可抄 get-started 示例里注释掉的 Option 2WebGPUNotAvailableError浏览器不支持或未开启 WebGPU换支持 WebGPU 的浏览器版本并在浏览器设置里确认该特性已启用DeviceLostError加载时一次性预分配显存失败GPU 上下文被系统回收换更小的配置重来更短的context_window_size、更小参数量的模型或先关掉其他占显存的页面另外两个高频问题没调reload就发请求会抛ModelNotLoadedError——用CreateMLCEngine一步到位就能避开model_id传错则是ModelNotFoundError报错信息里会提示检查model_list。如果你要接入官方列表里没有的新模型可以看 docs/developer/add_models.rst 里的构建流程预置配置统一挂在src/config.ts的prebuiltAppConfig下modelVersion版本号升级后注意同步你的 WASM 文件版本避免配置和运行时不匹配。【免费下载链接】web-llmHigh-performance In-browser LLM Inference Engine项目地址: https://gitcode.com/GitHub_Trending/we/web-llm创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考