|
ingFang SC";text-wrap: wrap;text-align: left;line-height: 1.75;font-size: 15px;margin: 1.5em 8px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">今天在 GitHub 上逛到了一个很疯狂的项目，可以直接在浏览器端跑大模型，服务端都给省了，也就是说，你不需要挂一个后端服务器来跑你的大模型出 token，妥妥的的分布式啊，把压力丢给了你的终端用户了，demo 上，m1 pro 的机器跑起来毫无压力。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;margin: 1.5em 8px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">，这个项目目前已经超过 10K star 了，项目地址是：ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;margin: 1.5em 8px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">https://github.com/mlc-ai/web-llmingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 1.2em;font-weight: bold;display: table;margin: 4em auto 2em;padding-right: 0.2em;padding-left: 0.2em;background: rgb(150, 18, 238);color: rgb(255, 255, 255);">使用方式ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;margin: 1.5em 8px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">使用方式也是相当 easy，因为，他的资源都上 CDN 了，所以直接import就可以了，不需要安装什么依赖，也不需要配置什么环境，直接js 开写就完事。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;overflow-x: auto;border-radius: 8px;margin: 10px 8px;">import*aswebllmfrom'https://esm.run/@mlc-ai/web-llm';
asyncfunctionmain(){
constinitProgressCallback=(report:webllm.InitProgressReport)=>{
constlabel=document.getElementById("init-label");
label.innerText=report.text;
};
constselectedModel="Llama-3-8B-Instruct-q4f32_1";
constengine:webllm.MLCEngineInterface=awaitwebllm.CreateMLCEngine(
selectedModel,
/*engineConfig=*/{initProgressCallback:initProgressCallback}
);
constreply0=awaitengine.chat.completions.create({
messages:[{"role":"user","content":"TellmeaboutPittsburgh."}]
});
console.log(reply0);
console.log(awaitengine.runtimeStatsText());
}
main();ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;margin: 1.5em 8px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">怕卡顿？毕竟在浏览器主线程上跑大模型，怎么说也得担心下UI 卡死把，别急，Web Worker 搬出来ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;overflow-x: auto;border-radius: 8px;margin: 10px 8px;">//worker.ts
import{MLCEngineWorkerHandler,MLCEngine}from"@mlc-ai/web-llm";
//HookupanMLCEnginetoaworkerhandler
constengine=newMLCEngine();
consthandler=newMLCEngineWorkerHandler(engine);
self.onmessage=(msg:MessageEvent)=>{
handler.onmessage(msg);
};ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;margin: 1.5em 8px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">这下好了，直接把大模型跑到 Web Worker 里面，可以看出来，作者明显是个老手啊，性能优化安排的明明白白的。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;margin: 1.5em 8px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">支持的开源模型也还算比较多的，有 meta 的 llama，Google 的Gemma 等。功能特性•无需服务器：可以直接在浏览器中运行，无需服务器支持，相当低的运营成本。 •高性能：使用 WebAssembly 和 Web Worker 技术，具有出色的性能。 •易于使用：提供了简单易用的 API，方便开发者快速集成。 •支持多种模型：支持多种预训练模型，满足不同需求。 •隐私保护：因为直接在浏览器中运行，用户数据不会离开本地，保护用户隐私。 •标准化 api：与 OpenAI API 完全兼容。也就是说，您可以在本地的任何开源模型上使用相同的 OpenAI API，其功能包括 json 模式、函数调用、流式处理等。
他提供了一个 demo 的网站可以体验：https://webllm.mlc.ai/ 开始对话的时候，浏览器就回去把开源模型拖回来，然后开始跑，这个过程中，你可以看到模型下载的进度，等到进度条走完，就可以开始对话了。
|
