浏览器端跑大模型的疯狂项目Web-Llm

今天在 GitHub 上逛到了一个很疯狂的项目，可以直接在浏览器端跑大模型，服务端都给省了，也就是说，你不需要挂一个后端服务器来跑你的大模型出 token，妥妥的的分布式啊，把压力丢给了你的终端用户了，demo 上，m1 pro 的机器跑起来毫无压力。

，这个项目目前已经超过 10K star 了，项目地址是：

https://github.com/mlc-ai/web-llm

使用方式

使用方式也是相当 easy，因为，他的资源都上 CDN 了，所以直接 import 就可以了，不需要安装什么依赖，也不需要配置什么环境，直接js 开写就完事。

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

async function main() {
  const initProgressCallback = (report: webllm.InitProgressReport) => {
    const label = document.getElementById("init-label");
    label.innerText = report.text;
  };
  const selectedModel = "Llama-3-8B-Instruct-q4f32_1";
  const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(
    selectedModel,
    /*engineConfig=*/{ initProgressCallback: initProgressCallback }
  );

  const reply0 = await engine.chat.completions.create({
    messages: [{ "role": "user", "content": "Tell me about Pittsburgh." }]
  });
  console.log(reply0);
  console.log(await engine.runtimeStatsText());
}

main();

怕卡顿？毕竟在浏览器主线程上跑大模型，怎么说也得担心下UI 卡死把，别急，Web Worker 搬出来

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

// Hookup an MLCEngine to a worker handler
const engine = new MLCEngine();
const handler = new MLCEngineWorkerHandler(engine);
self.onmessage = (msg: MessageEvent) => {
  handler.onmessage(msg);
};

这下好了，直接把大模型跑到 Web Worker 里面，可以看出来，作者明显是个老手啊，性能优化安排的明明白白的。

支持的开源模型也还算比较多的，有 meta 的 llama，Google 的Gemma 等。

• • Llama-2

• • Llama-3

• • Gemma

• • Phi-1.5 and Phi-2

• • Mistral-7B-Instruct

• • OpenHermes-2.5-Mistral-7B

• • NeuralHermes-2.5-Mistral-7B

• • TinyLlama

• • RedPajama

功能特性

• • 无需服务器：可以直接在浏览器中运行，无需服务器支持，相当低的运营成本。

• • 高性能：使用 WebAssembly 和 Web Worker 技术，具有出色的性能。

• • 易于使用：提供了简单易用的 API，方便开发者快速集成。

• • 支持多种模型：支持多种预训练模型，满足不同需求。

• • 隐私保护：因为直接在浏览器中运行，用户数据不会离开本地，保护用户隐私。

• • 标准化 api：与 OpenAI API 完全兼容。也就是说，您可以在本地的任何开源模型上使用相同的 OpenAI API，其功能包括 json 模式、函数调用、流式处理等。

他提供了一个 demo 的网站可以体验：https://webllm.mlc.ai/

开始对话的时候，浏览器就回去把开源模型拖回来，然后开始跑，这个过程中，你可以看到模型下载的进度，等到进度条走完，就可以开始对话了。