链载Ai

标题: 浏览器端跑大模型的疯狂项目Web-Llm [打印本页]

作者: 链载Ai 时间: 昨天 10:03
标题: 浏览器端跑大模型的疯狂项目Web-Llm

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: 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 等。

•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/

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

欢迎光临链载Ai (https://www.lianzai.com/)