概述

WebLLM 是一款高性能的浏览器内LLM推理引擎，它通过硬件加速将语言模型推理直接带到网页浏览器中。 所有计算都在浏览器内部完成，无需服务器支持，并且借助WebGPU进行加速。

WebLLM 完全兼容OpenAI API。 也就是说，你可以在本地使用相同的OpenAI API调用任何开源模型，并享受流式响应、JSON模式、函数调用（开发中）等功能。

这为我们带来了许多有趣的机会，可以为每个人构建AI助手，在保护隐私的同时享受GPU加速带来的性能提升。

你可以将WebLLM作为一个基础的NPM包，并参考下面的示例来构建自己的Web应用。该项目是MLC LLM的配套项目，后者实现了LLM在各种硬件环境中的通用部署。

核心特性

• 浏览器内推理：WebLLM是一款高性能的浏览器内语言模型推理引擎，利用WebGPU进行硬件加速，能够在不依赖服务器的情况下直接在浏览器中运行强大的LLM任务。

• 完全兼容OpenAI API：通过OpenAI API无缝集成你的应用与WebLLM，支持流式响应、JSON模式、对logit级别的控制、种子设置等功能。

• 结构化JSON生成：WebLLM支持最先进的JSON模式结构化生成功能，该功能在模型库的WebAssembly部分实现，以确保最佳性能。你可以在HuggingFace上访问WebLLM JSON Playground，尝试使用自定义JSON模式生成JSON输出。

• 广泛的模型支持：WebLLM原生支持一系列模型，包括Llama 3、Phi 3、Gemma、Mistral、Qwen（通义千问）等，使其适用于多种AI任务。完整的支持模型列表请参阅MLC Models。

• 自定义模型集成：轻松集成和部署MLC格式的自定义模型，使你能够根据特定需求和场景调整WebLLM，从而提高模型部署的灵活性。

• 即插即用的集成方式：可以通过NPM、Yarn等包管理器，或直接通过CDN轻松将WebLLM集成到你的项目中，并配有全面的示例和模块化的设计，方便与UI组件对接。

• 流式传输与实时交互：支持流式聊天补全，允许实时生成输出，从而增强聊天机器人和虚拟助手等交互式应用的体验。

• Web Worker与Service Worker支持：通过将计算任务卸载到独立的工作线程或服务工作者中，优化UI性能并高效管理模型的生命周期。

• Chrome扩展支持：利用WebLLM通过自定义Chrome扩展来扩展浏览器的功能，我们提供了构建基础和高级扩展的示例。

内置模型

完整的可用模型列表请参见MLC Models。WebLLM支持其中的一部分模型，具体列表可在prebuiltAppConfig.model_list中找到。

目前主要支持的模型系列如下：

• Llama：Llama 3、Llama 2、Hermes-2-Pro-Llama-3
• Phi：Phi 3、Phi 2、Phi 1.5
• Gemma：Gemma-2B
• Mistral：Mistral-7B-v0.3、Hermes-2-Pro-Mistral-7B、NeuralHermes-2.5-Mistral-7B、OpenHermes-2.5-Mistral-7B
• Qwen（通义千问）：Qwen2 0.5B、1.5B、7B

如果你需要更多模型，可以通过提交issue请求新模型，或者查看自定义模型部分，了解如何编译并使用自己的模型与WebLLM结合。

从示例开始

通过这个简单的聊天机器人示例，学习如何使用WebLLM将大型语言模型集成到你的应用中，并生成聊天回复：

如果你想了解一个更复杂、规模更大的项目示例，请查看WebLLM Chat。

更多不同用例的示例可在examples文件夹中找到。

开始使用

WebLLM提供了一个极简且模块化的接口，用于在浏览器中访问聊天机器人。 该软件包采用模块化设计，可与任何UI组件无缝对接。

安装

包管理器

# npm
npm install @mlc-ai/web-llm
# yarn
yarn add @mlc-ai/web-llm
# 或 pnpm
pnpm install @mlc-ai/web-llm

然后在你的代码中导入模块。

// 导入全部内容
import * as webllm from "@mlc-ai/web-llm";
// 或仅导入你需要的部分
import { CreateMLCEngine } from "@mlc-ai/web-llm";

CDN交付

借助jsdelivr.com，WebLLM可以直接通过URL引入，并在云开发平台如jsfiddle.net、Codepen.io和Scribbler上开箱即用：

import * as webllm from "https://esm.run/@mlc-ai/web-llm";

也可以动态导入：

const webllm = await import("https://esm.run/@mlc-ai/web-llm");

创建 MLCEngine

WebLLM 中的大多数操作都是通过 MLCEngine 接口调用的。你可以通过调用 CreateMLCEngine() 工厂函数来创建一个 MLCEngine 实例并加载模型。

（注意：加载模型需要下载，首次运行且未使用缓存时可能需要较长时间。你应该妥善处理这个异步调用。）

import { CreateMLCEngine } from "@mlc-ai/web-llm";

// 用于更新模型加载进度的回调函数
const initProgressCallback = (initProgress) => {
  console.log(initProgress);
};
const selectedModel = "Llama-3.1-8B-Instruct-q4f32_1-MLC";

const engine = await CreateMLCEngine(
  selectedModel,
  { initProgressCallback: initProgressCallback }, // engineConfig
);

在底层，这个工厂函数会先同步地创建一个引擎实例，然后再异步地加载模型。你也可以在应用中分别执行这些步骤。

import { MLCEngine } from "@mlc-ai/web-llm";

// 这是一个立即返回的同步调用
const engine = new MLCEngine({
  initProgressCallback: initProgressCallback,
});

// 这是一个异步调用，可能需要较长时间才能完成
await engine.reload(selectedModel);

缓存后端策略

WebLLM 通过 AppConfig.cacheBackend 支持三种缓存后端：

• "cache"：浏览器 Cache API（默认）。
• "indexeddb"：浏览器 IndexedDB。
• "cross-origin"：实验性的 Chrome 跨域存储 API 扩展后端。你需要安装 跨域存储扩展 才能使用它。（如果未安装该扩展，WebLLM 会自动回退到默认缓存。）

示例：

import { CreateMLCEngine, prebuiltAppConfig } from "@mlc-ai/web-llm";

const appConfig = { ...prebuiltAppConfig, cacheBackend: "cross-origin" };
const engine = await CreateMLCEngine("Llama-3.1-8B-Instruct-q4f32_1-MLC", {
  appConfig,
});

注意事项：

• "cross-origin" 后端需要安装并启用兼容的浏览器扩展。
• 跨域后端目前不支持以编程方式删除张量缓存；清除操作由扩展管理。

对话完成

成功初始化引擎后，你现在可以使用 OpenAI 风格的聊天 API，通过 engine.chat.completions 接口调用对话完成。有关完整参数列表及其说明，请参阅下方章节以及 OpenAI API 参考文档。

（注意：此处不支持 model 参数，该参数将被忽略。请改用上面 创建 MLCEngine 中所示的 CreateMLCEngine(model) 或 engine.reload(model)。）

const messages = [
  { role: "system", content: "你是一位乐于助人的 AI 助手。" },
  { role: "user", content: "你好！" },
];

const reply = await engine.chat.completions.create({
  messages,
});
console.log(reply.choices[0].message);
console.log(reply.usage);

流式传输

WebLLM 还支持流式生成对话完成结果。要使用此功能，只需在调用 engine.chat.completions.create 时传递 stream: true 即可。

const messages = [
  { role: "system", content: "你是一位乐于助人的 AI 助手。" },
  { role: "user", content: "你好！" },
];

// chunks 是一个异步生成器对象
const chunks = await engine.chat.completions.create({
  messages,
  temperature: 1,
  stream: true, // <-- 启用流式传输
  stream_options: { include_usage: true },
});

let reply = "";
for await (const chunk of chunks) {
  reply += chunk.choices[0]?.delta.content || "";
  console.log(reply);
  if (chunk.usage) {
    console.log(chunk.usage); // 只有最后一个块包含 usage 信息
  }
}

const fullReply = await engine.getMessage();
console.log(fullReply);

高级用法

使用 Worker

你可以将繁重的计算任务放到 worker 脚本中，以优化应用性能。为此，你需要：

1. 在 worker 线程中创建一个与前端通信并处理请求的处理器。
2. 在主应用中创建一个 Worker Engine，它会在后台向 worker 线程中的处理器发送消息。

有关不同类型 Worker 的详细实现，请参阅以下章节。

专用 Web Worker

WebLLM 提供对 WebWorker 的 API 支持，因此你可以将生成过程挂载到一个独立的 worker 线程中，这样 worker 线程中的计算就不会阻塞 UI。

我们在 worker 线程中创建了一个与前端通信并处理请求的处理器。

// worker.ts
import { WebWorkerMLCEngineHandler } from "@mlc-ai/web-llm";

// 居住在 worker 线程中的处理器
const handler = new WebWorkerMLCEngineHandler();
self.onmessage = (msg: MessageEvent) => {
  handler.onmessage(msg);
};

在主逻辑中，我们创建了一个 WebWorkerMLCEngine，它实现了相同的 MLCEngineInterface。其余逻辑保持不变。

// main.ts
import { CreateWebWorkerMLCEngine } from "@mlc-ai/web-llm";

async function main() {
  // 此处使用 WebWorkerMLCEngine 而不是 MLCEngine
  const engine = await CreateWebWorkerMLCEngine(
    new Worker(new URL("./worker.ts", import.meta.url), {
      type: "module",
    }),
    selectedModel,
    { initProgressCallback }, // engineConfig
  );

  // 其余部分保持不变
}

使用 Service Worker

WebLLM 提供了对 ServiceWorker 的 API 支持，因此你可以将生成过程挂载到 Service Worker 中，以避免每次访问页面时都重新加载模型，并优化应用的离线体验。

（注意，Service Worker 的生命周期由浏览器管理，可能会在任何时候被终止而不会通知 Web 应用。ServiceWorkerMLCEngine 会通过定期发送心跳事件来尝试保持 Service Worker 线程的存活，但你的应用也应包含适当的错误处理逻辑。更多详情请参阅 ServiceWorkerMLCEngine 中的 keepAliveMs 和 missedHeatbeat。）

我们在 Worker 线程中创建了一个处理器，用于与前端通信并处理请求。

// sw.ts
import { ServiceWorkerMLCEngineHandler } from "@mlc-ai/web-llm";

let handler: ServiceWorkerMLCEngineHandler;

self.addEventListener("activate", function (event) {
  handler = new ServiceWorkerMLCEngineHandler();
  console.log("Service Worker is ready");
});

然后在主逻辑中，我们注册 Service Worker 并使用 CreateServiceWorkerMLCEngine 函数创建引擎。其余逻辑保持不变。

// main.ts
import {
  MLCEngineInterface,
  CreateServiceWorkerMLCEngine,
} from "@mlc-ai/web-llm";

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register(
    new URL("sw.ts", import.meta.url), // Worker 脚本
    { type: "module" },
  );
}

const engine: MLCEngineInterface = await CreateServiceWorkerMLCEngine(
  selectedModel,
  { initProgressCallback }, // 引擎配置
);

你可以在 examples/service-worker 中找到如何在 Service Worker 中运行 WebLLM 的完整示例。

Chrome 扩展

你还可以在 examples/chrome-extension 和 examples/chrome-extension-webgpu-service-worker 中找到使用 WebLLM 构建 Chrome 扩展的示例。后者利用了 Service Worker，因此扩展可以在后台持续运行。此外，你还可以探索另一个完整的 Chrome 扩展项目——WebLLM Assistant，它正是基于 WebLLM 构建的，请参见 这里。

完全兼容 OpenAI

WebLLM 被设计为与 OpenAI API 完全兼容。因此，除了构建一个简单的聊天机器人之外，你还可以使用 WebLLM 实现以下功能：

• 流式输出：以 AsyncGenerator 的形式实时返回分块输出。
• JSON 模式：高效地确保输出为 JSON 格式，更多信息请参阅 OpenAI 文档。
• 可复现性种子：通过设置 seed 字段来确保输出的可复现性。
• 函数调用（开发中）：使用 tools 和 tool_choice 字段进行函数调用（已提供初步支持）；或者不使用 tools 或 tool_choice 进行手动函数调用（保留最大灵活性）。

完整性验证

WebLLM 支持使用 SRI（子资源完整性） 哈希对模型文件进行可选的完整性验证。当 ModelRecord 中设置了 integrity 字段时，WebLLM 会在加载之前，根据提供的哈希值验证下载的配置文件、WASM 文件和分词器文件。

import { CreateMLCEngine } from "@mlc-ai/web-llm";

const appConfig = {
  model_list: [
    {
      model: "https://huggingface.co/mlc-ai/Llama-3.2-1B-Instruct-q4f16_1-MLC",
      model_id: "Llama-3.2-1B-Instruct-q4f16_1-MLC",
      model_lib:
        "https://raw.githubusercontent.com/user/model-libs/main/model.wasm",
      integrity: {
        config: "sha256-<base64-hash-of-mlc-chat-config.json>",
        model_lib: "sha256-<base64-hash-of-wasm-file>",
        tokenizer: {
          "tokenizer.json": "sha256-<base64-hash-of-tokenizer.json>",
        },
        onFailure: "error", // "error"（默认）会抛出 IntegrityError，"warn" 则会记录警告并继续执行
      },
    },
  ],
};

const engine = await CreateMLCEngine("Llama-3.2-1B-Instruct-q4f16_1-MLC", {
  appConfig,
});

你可以使用以下命令为模型文件生成 SRI 哈希值：

# SHA-256
openssl dgst -sha256 -binary <file> | openssl base64 -A | sed 's/^/sha256-/'
# SHA-384
openssl dgst -sha384 -binary <file> | openssl base64 -A | sed 's/^/sha384-/'
# SHA-512
openssl dgst -sha512 -binary <file> | openssl base64 -A | sed 's/^/sha512-/'

openssl 命令需要类 Unix 环境（macOS/Linux）。在 Windows 上，可以通过 Git Bash 或 WSL 来运行 openssl。

如果哈希值不匹配，将会抛出 IntegrityError（或在 onFailure: "warn" 时记录警告）。integrity 中的所有字段都是可选的——只有指定的文件才会被验证。如果完全省略 integrity 字段，WebLLM 将按原有方式运行（不进行任何验证）。

完整的演示示例请参阅 integrity-verification 示例。

自定义模型

WebLLM 是 MLC LLM 的配套项目，支持 MLC 格式的自定义模型。它复用 MLC LLM 的模型工件，并沿用了其工作流程。要使用 WebLLM 编译和运行您自己的模型，请参阅 MLC LLM 文档，了解如何将新的模型权重和库部署到 WebLLM 中。

以下我们简要介绍其高层次的设计思路。WebLLM 包中有两个关键元素，用于支持新模型及其权重变体：

• model：包含指向模型工件（如权重和元数据）的 URL。
• model_lib：指向 WebAssembly 库（即 .wasm 文件）的 URL，该库包含用于加速模型计算的可执行代码。

这两个元素均可在 WebLLM 中进行自定义配置。

import { CreateMLCEngine } from "@mlc-ai/web-llm";

async function main() {
  const appConfig = {
    "model_list": [
      {
        "model": "/url/to/my/llama",
        "model_id": "MyLlama-3b-v1-q4f32_0",
        "model_lib": "/url/to/myllama3b.wasm",
      }
    ],
  };
  // 覆盖默认设置
  const chatOpts = {
    "repetition_penalty": 1.01
  };

  // 加载预构建模型，并应用聊天选项覆盖及应用配置
  // 在后台，它会从 myLlamaUrl 加载模型并缓存在浏览器缓存中
  // 同时，聊天界面也会从 "/url/to/myllama3b.wasm" 加载模型库，
  // 假设该库与 myLlamaUrl 中的模型兼容。
  const engine = await CreateMLCEngine(
    "MyLlama-3b-v1-q4f32_0",
    { appConfig }, // 引擎配置
    chatOpts,
  );
}

在许多情况下，我们只需提供不同的模型权重变体，而不一定需要引入全新的模型（例如，“NeuralHermes-Mistral”可以复用“Mistral”的模型库）。有关不同模型变体如何共享同一模型库的示例，请参阅 webllm.prebuiltAppConfig。

从源码构建 WebLLM 包

注意：除非您希望修改 WebLLM 包，否则无需从源码构建。若要使用 npm 包，只需按照快速入门或任何示例中的说明操作即可。

若要从源码构建，只需执行以下命令：

npm install
npm run build

然后，要在示例中测试您的代码更改效果，在 examples/get-started/package.json 中将 "@mlc-ai/web-llm": "^0.2.82" 更改为 "@mlc-ai/web-llm": ../.."。

接着运行：

cd examples/get-started
npm install
npm start

请注意，有时需要在 file:../.. 和 ../.. 之间切换，以使 npm 识别到新更改。最坏的情况下，您可以执行以下操作：

cd examples/get-started
rm -rf node_modules dist package-lock.json .parcel-cache
npm install
npm start

如需从源码构建 TVMjs

WebLLM 的运行时环境很大程度上依赖于 TVMjs：https://github.com/apache/tvm/tree/main/web。虽然它也可以作为 npm 包使用：https://www.npmjs.com/package/@mlc-ai/web-runtime，但如有需要，您仍可按照以下步骤从源码构建。

1. 安装 emscripten。它是一个基于 LLVM 的编译器，可将 C/C++ 源代码编译为 WebAssembly。

   • 按照安装说明安装最新版本的 emsdk。
   • 执行 source path/to/emsdk_env.sh 来加载 emsdk_env.sh，以便 emcc 可通过 PATH 访问，并确保 emcc 命令正常运行。

   我们可以通过尝试运行 emcc 终端命令来验证安装是否成功。

   注意：我们最近发现，使用最新版本的 emcc 可能在运行时遇到问题。目前，作为临时解决方案，建议使用 ./emsdk install 3.1.56 而不是 ./emsdk install latest。错误信息可能如下所示：

   初始化错误，LinkError：WebAssembly.instantiate(): 导入 #6 模块="wasi_snapshot_preview1"
   函数="proc_exit"：函数导入需要一个可调用对象
   

2. 在 ./package.json 中，将 "@mlc-ai/web-runtime": "0.18.0-dev2", 更改为 "@mlc-ai/web-runtime": "file:./tvm_home/web",。

3. 设置必要的环境

   准备所有用于 Web 构建的依赖项：

   ./scripts/prep_deps.sh
   

   在此步骤中，如果环境中未定义 $TVM_SOURCE_DIR，我们将执行以下命令来构建 tvmjs 依赖项：

   git clone https://github.com/mlc-ai/relax 3rdparty/tvm-unity --recursive
   

   这将克隆 mlc-ai/relax 的当前 HEAD 版本。然而，这并不总是正确的分支或提交。要从源码构建特定的 npm 版本，请参考版本更新的 PR，其中会说明当前 WebLLM 版本依赖于哪个分支（即 mlc-ai/relax 或 apache/tvm）以及具体哪个提交。例如，根据其版本更新 PR https://github.com/mlc-ai/web-llm/pull/521，版本 0.2.52 是基于 apache/tvm 中的提交 https://github.com/apache/tvm/commit/e6476847753c80e054719ac47bc2091c888418b6 构建的，而非 mlc-ai/relax 的 HEAD。

   此外，--recursive 参数是必要且重要的。否则，您可能会遇到类似 fatal error: 'dlpack/dlpack.h' file not found 的错误。

4. 构建 WebLLM 包

   npm run build
   

5. 验证部分子包

   您可以进入 examples 中的子文件夹，验证其中的部分子包。我们使用 Parcelv2 进行打包。尽管 Parcel 有时难以追踪父目录的变化，但当您对 WebLLM 包进行更改时，可以尝试编辑子文件夹的 package.json 并保存，这样会触发 Parcel 重新构建。

链接

• 演示应用：WebLLM 聊天
• 如果您希望在原生运行时环境中运行 LLM，请查看 MLC-LLM。
• 您可能还会对 Web 稳定扩散感兴趣。

致谢

本项目由 CMU Catalyst、UW SAMPL、上海交通大学、OctoML 以及 MLC 社区的成员共同发起。我们期待继续开发并支持开源机器学习社区。

本项目得以实现，离不开我们所依托的开源生态系统。我们衷心感谢 Apache TVM 社区以及 TVM Unity 团队的开发者们。正是开源机器学习社区的成员们公开了这些模型，而 PyTorch 和 Hugging Face 社区则让这些模型更加易于获取。我们特别感谢 Vicuna、SentencePiece、LLaMA 和 Alpaca 团队的支持。此外，我们也感谢 WebAssembly、Emscripten 和 WebGPU 社区，以及 Dawn 和 WebGPU 的开发者们。

引用

如果您觉得本项目有用，请引用以下文献：

@misc{ruan2024webllmhighperformanceinbrowserllm,
      title={WebLLM：一款高性能的浏览器内LLM推理引擎},
      author={Charlie F. Ruan、Qin Yucheng、Zhou Xun、Lai Ruihang、Jin Hongyi、Dong Yixin、Hou Bohan、Yu Meng-Shiun、Zhai Yiyan、Agarwal Sudeep、Cao Hangrui、Feng Siyuan、Chen Tianqi},
      year={2024},
      eprint={2412.15803},
      archivePrefix={arXiv},
      primaryClass={cs.LG},
      url={https://arxiv.org/abs/2412.15803},
}

贡献者

⬆ 返回顶部 ⬆

WebLLM 快速上手指南

WebLLM 是一个高性能的浏览器端大语言模型（LLM）推理引擎。它利用 WebGPU 进行硬件加速，无需服务器支持即可在浏览器中直接运行开源大模型，并完全兼容 OpenAI API 格式。

环境准备

在使用 WebLLM 之前，请确保满足以下软硬件要求：

• 浏览器要求：必须使用支持 WebGPU 的现代浏览器。
  • 推荐：Chrome 113+、Edge 113+ 或其他基于 Chromium 且开启 WebGPU 支持的浏览器。
  • 检查方法：访问 chrome://gpu 查看 WebGPU 状态是否为 "Enabled"。
• 网络环境：首次运行时需要下载模型权重文件（通常几百 MB 到几 GB），请确保网络连接稳定。
• 前置依赖：无需安装 Python 或后端服务，仅需标准的 Web 开发环境（Node.js 用于构建项目，或直接使用 CDN）。

安装步骤

你可以通过包管理器安装，也可以直接通过 CDN 在网页中使用。

方式一：使用包管理器（推荐用于项目开发）

在项目目录中执行以下命令之一：

# npm
npm install @mlc-ai/web-llm

# yarn
yarn add @mlc-ai/web-llm

# pnpm
pnpm install @mlc-ai/web-llm

安装完成后，在代码中导入模块：

// 导入全部功能
import * as webllm from "@mlc-ai/web-llm";

// 或仅导入所需功能
import { CreateMLCEngine } from "@mlc-ai/web-llm";

方式二：使用 CDN（推荐用于快速测试或原型开发）

无需安装，直接在 HTML 或 JS 文件中通过 URL 导入，适用于 JSFiddle、Codepen 等在线编辑器：

import * as webllm from "https://esm.run/@mlc-ai/web-llm";

或者动态导入：

const webllm = await import("https://esm.run/@mlc-ai/web-llm");

基本使用

以下是创建一个聊天机器人并生成回复的最简示例。

1. 初始化引擎 (Create MLCEngine)

首先加载模型。注意：首次加载模型需要下载文件，耗时较长，建议添加进度回调。

import { CreateMLCEngine } from "@mlc-ai/web-llm";

// 定义进度回调函数
const initProgressCallback = (initProgress) => {
  console.log("加载进度:", initProgress);
};

// 选择模型 (此处以 Llama-3.1-8B 为例，也可选用 Qwen, Phi 等)
const selectedModel = "Llama-3.1-8B-Instruct-q4f32_1-MLC";

// 创建引擎实例
const engine = await CreateMLCEngine(
  selectedModel,
  { initProgressCallback: initProgressCallback }
);

提示：内置支持的模型家族包括 Llama 3, Phi 3, Gemma, Mistral, Qwen (通义千问) 等。完整列表可查阅 MLC Models。

2. 发送对话请求 (Chat Completion)

引擎初始化完成后，即可使用类似 OpenAI 的 API 格式进行对话。

const messages = [
  { role: "system", content: "你是一个乐于助人的 AI 助手。" },
  { role: "user", content: "你好！请介绍一下你自己。" },
];

// 获取完整回复
const reply = await engine.chat.completions.create({
  messages,
});

console.log("AI 回复:", reply.choices[0].message.content);
console.log("资源使用情况:", reply.usage);

3. 流式输出 (Streaming)

为了实现打字机效果，可以启用流式模式：

const messages = [
  { role: "user", content: "写一首关于春天的短诗。" },
];

// 启用 stream: true
const chunks = await engine.chat.completions.create({
  messages,
  temperature: 1,
  stream: true, 
  stream_options: { include_usage: true },
});

let fullReply = "";
for await (const chunk of chunks) {
  const content = chunk.choices[0]?.delta.content || "";
  fullReply += content;
  // 在此处将 content 渲染到 UI 上实现流式显示
  console.log(content); 
  
  if (chunk.usage) {
    console.log("最终统计:", chunk.usage);
  }
}

进阶提示：缓存策略

为了加速二次加载，WebLLM 默认使用浏览器的 Cache API。如果需要跨域存储或更持久的缓存，可在配置中指定 cacheBackend：

import { CreateMLCEngine, prebuiltAppConfig } from "@mlc-ai/web-llm";

const appConfig = { 
  ...prebuiltAppConfig, 
  cacheBackend: "indexeddb" // 可选："cache"(默认), "indexeddb", "cross-origin"
};

const engine = await CreateMLCEngine("Llama-3.1-8B-Instruct-q4f32_1-MLC", {
  appConfig,
});