web llm
v0.2.0
高性能內瀏覽器LLM推理引擎。
文檔| Blogpost |紙|例子
WEBLLM是一種高性能的瀏覽器LLM推理引擎，它將語言模型推理直接帶到具有硬件加速度的Web瀏覽器上。一切都在瀏覽器內部運行，沒有服務器支持，並且使用WebGPU加速。
Webllm與OpenAI API完全兼容。也就是說，您可以在本地的任何開源模型上使用相同的OpenAI API，並具有包括流媒體，JSON模式，功能呼叫（WIP）等功能的功能。
我們可以帶來很多有趣的機會，為每個人建立AI助手，並在享受GPU加速的同時啟用隱私。
您可以將WEBLLM用作基本NPM軟件包，並在下面的示例上構建自己的Web應用程序。該項目是MLC LLM的同伴項目，該項目可以在硬件環境中普遍部署LLM。
查看Webllm聊天嘗試一下！
內瀏覽器推理：WEBLLM是一種高性能的，瀏覽器內語言模型推理引擎，它利用WebGPU進行硬件加速度，可以直接在沒有服務器端處理的Web瀏覽器中直接在Web瀏覽器中進行操作。
完整的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型號。
自定義模型集成：輕鬆以MLC格式集成和部署自定義模型，使您可以適應Webllm適應特定的需求和方案，從而增強了模型部署的靈活性。
插件集成：使用NPM和YARN等軟件包管理器或直接通過CDN將WEBLLM輕鬆整合到您的項目中，並配有全面示例和用於與UI組件連接的模塊化設計。
流和實時互動：支持流聊天完成，允許實時輸出生成，從而增強聊天機器人和虛擬助手等交互式應用程序。
Web Worker＆Service Worker的支持：通過將計算分開以分離工人線程或服務工作者的方式來優化UI性能並有效地管理模型的生命週期。
Chrome擴展支持：通過使用WEBLLM的自定義Chrome擴展擴展Web瀏覽器的功能，其中可用於構建基本和高級擴展。
檢查MLC型號上可用型號的完整列表。 WEBLLM支持這些可用模型的子集，並且可以在prebuiltAppConfig.model_list上訪問列表。
這是當前支持的主要模型家庭：
如果您需要更多模型，請通過打開問題或檢查如何與Webllm一起編譯和使用自己的模型的自定義模型請求新模型。
了解如何使用WEBLLM將大型語言模型集成到您的應用程序中，並通過此簡單的聊天機器人示例生成聊天完成：
對於更大，更複雜的項目的高級示例，請檢查Webllm聊天。
示例文件夾中提供了有關不同用例的更多示例。
Webllm提供了一個簡約和模塊化接口，以訪問瀏覽器中的聊天機器人。該軟件包以模塊化的方式設計，以掛接任何UI組件。
# npm
npm install @mlc-ai/web-llm
# yarn
yarn add @mlc-ai/web-llm
# or pnpm
pnpm install @mlc-ai/web-llm然後在您的代碼中導入模塊。
// Import everything
import * as webllm from "@mlc-ai/web-llm" ;
// Or only import what you need
import { CreateMLCEngine } from "@mlc-ai/web-llm" ; 感謝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" ) ; Webllm中的大多數操作都是通過MLCEngine接口調用的。您可以通過調用CreateMLCEngine()出廠功能來創建MLCEngine實例並加載模型。
（請注意，加載型號需要下載，並且以前不用緩存可能會花費大量時間。您應該正確處理此異步調用。）
import { CreateMLCEngine } from "@mlc-ai/web-llm" ;
// Callback function to update model loading progress
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" ;
// This is a synchronous call that returns immediately
const engine = new MLCEngine ( {
initProgressCallback : initProgressCallback
} ) ;
// This is an asynchronous call and can take a long time to finish
await engine . reload ( selectedModel ) ;成功初始化引擎後，您現在可以通過engine.chat.completions接口使用OpenAI樣式聊天API調用聊天完成。有關參數及其描述的完整列表，請查看下面的部分和OpenAI API參考。
（注意：不支持model參數，並且將在此處忽略。相反，請調用CreateMLCEngine(model)或engine.reload(model) ，如上所述。
const messages = [
{ role : "system" , content : "You are a helpful AI assistant." } ,
{ role : "user" , content : "Hello!" } ,
]
const reply = await engine . chat . completions . create ( {
messages ,
} ) ;
console . log ( reply . choices [ 0 ] . message ) ;
console . log ( reply . usage ) ;Webllm還支持流聊天完成生成。要使用它，只需傳遞stream: true to engine.chat.completions.create Call。
const messages = [
{ role : "system" , content : "You are a helpful AI assistant." } ,
{ role : "user" , content : "Hello!" } ,
]
// Chunks is an AsyncGenerator object
const chunks = await engine . chat . completions . create ( {
messages ,
temperature : 1 ,
stream : true , // <-- Enable streaming
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 ) ; // only last chunk has usage
}
}
const fullReply = await engine . getMessage ( ) ;
console . log ( fullReply ) ; 您可以將重型計算放入工作腳本中，以優化應用程序性能。為此，您需要：
有關各種工人的詳細實現，請檢查以下各節。
WEBLLM具有對Webworker的API支持，因此您可以將生成過程連接到單獨的工作人員線程中，以便Worker線程中的計算不會破壞UI。
我們在工作線程中創建一個處理程序，該處理程序在處理請求時與前端進行通信。
// worker.ts
import { WebWorkerMLCEngineHandler } from "@mlc-ai/web-llm" ;
// A handler that resides in the worker thread
const handler = new WebWorkerMLCEngineHandler ( ) ;
self . onmessage = ( msg : MessageEvent ) => {
handler . onmessage ( msg ) ;
} ;在主要邏輯中，我們創建了一個實現相同MLCEngineInterface的WebWorkerMLCEngine 。其餘的邏輯保持不變。
// main.ts
import { CreateWebWorkerMLCEngine } from "@mlc-ai/web-llm" ;
async function main ( ) {
// Use a WebWorkerMLCEngine instead of MLCEngine here
const engine = await CreateWebWorkerMLCEngine (
new Worker (
new URL ( "./worker.ts" , import . meta . url ) ,
{
type : "module" ,
}
) ,
selectedModel ,
{ initProgressCallback } , // engineConfig
) ;
// everything else remains the same
}WEBLLM對服務工作人員提供了API支持，因此您可以將生成過程連接到服務工作者中，以避免在每個頁面訪問中重新加載模型，並優化應用程序的離線體驗。
（請注意，服務人員的生命週期由瀏覽器管理，可以隨時殺死而無需通知WebApp。ServiceWorkerMlCengine將通過定期發送心跳事件來保持服務工作者的線程的生存，但您的應用程序還應包括適當的錯誤處理。檢查keepAliveMs和ServiceWorkerMLCEngine in ServiceWorkerMLCEngine inserviceMlcengine missedHeatbeat for WorkerMlcengine ins serviceermlcengine for詳細信息。
我們在工作線程中創建一個處理程序，該處理程序在處理請求時與前端進行通信。
// 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" ) ;
} ) ;然後，在主要邏輯中，我們註冊服務工作者並使用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 script
{ type : "module" } ,
) ;
}
const engine : MLCEngineInterface =
await CreateServiceWorkerMLCEngine (
selectedModel ,
{ initProgressCallback } , // engineConfig
) ;您可以在示例/服務工作者中找到有關如何在服務工作者中運行WEBLLM的完整示例。
您還可以在示例/Chrome-Extension和示例/Chrome-Extension-Webgpu-Service-Service-Worker中找到使用Webllm構建Chrome擴展的示例。後一個利用服務工作者，因此擴展在後台持續存在。此外，您可以探索另一個Chrome擴展名的完整項目Webllm Assistant，該項目在這裡利用Webllm。
Webllm的設計與OpenAI API完全兼容。因此，除了構建一個簡單的聊天機器人外，您還可以使用Webllm具有以下功能：
seed的可再現輸出。tools和tool_choice的函數調用（有初步支持）；或無需tools或tool_choice手動函數調用（保持靈活性最高）。 WEBLLM是MLC LLM的同伴項目，並以MLC格式支持自定義模型。它可以重用模型偽像，並構建MLC LLM的流動。要與Webllm一起編譯和使用自己的模型，請查看有關如何編譯和部署新的模型權重和庫中的MLC LLM文檔。
在這裡，我們介紹了高級的想法。 Webllm軟件包中有兩個元素可以實現新的模型和權重變體。
model ：包含模型偽像的URL，例如權重和元數據。model_lib ：Web組裝庫（即WASM文件）的URL，其中包含可執行文件以加速模型計算。兩者在Webllm中都是可自定義的。
import { CreateMLCEngine } from "@mlc-ai/web-llm" ;
async main ( ) {
const appConfig = {
"model_list" : [
{
"model" : "/url/to/my/llama" ,
"model_id" : "MyLlama-3b-v1-q4f32_0" ,
"model_lib" : "/url/to/myllama3b.wasm" ,
}
] ,
} ;
// override default
const chatOpts = {
"repetition_penalty" : 1.01
} ;
// load a prebuilt model
// with a chat option override and app config
// under the hood, it will load the model from myLlamaUrl
// and cache it in the browser cache
// The chat will also load the model library from "/url/to/myllama3b.wasm",
// assuming that it is compatible to the model in myLlamaUrl.
const engine = await CreateMLCEngine (
"MyLlama-3b-v1-q4f32_0" ,
{ appConfig } , // engineConfig
chatOpts ,
) ;
}在許多情況下，我們只想提供模型重量變體，但不一定是新的模型（例如， NeuralHermes-Mistral可以重複使用Mistral的模型庫）。有關如何通過不同模型變體共享模型庫的示例，請參見webllm.prebuiltAppConfig 。
注意：除非您想修改WEBLLM軟件包，否則您無需從源構建。要使用NPM，只需遵循開始或任何示例即可。
要從源構建，只需運行：
npm install
npm run build然後，為了在一個示例中"@mlc-ai/web-llm": "^0.2.77"代碼更改的效果， examples/get-started/package.json "@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 startWEBLLM的運行時很大程度上取決於TVMJS：https：//github.com/apache/tvm/tree/main/main/web
雖然它也可作為NPM軟件包提供：https：//www.npmjs.com/package/@mlc-ai/web-runtime，但您可以從源中從源中構建它，如果需要，請按照以下步驟進行以下步驟。
安裝Emscripten。這是一個基於LLVM的編譯器，將C/C ++源代碼編譯到WebAssembly。
emsdk_env.sh通過source path/to/emsdk_env.sh ，從路徑和命令emcc可以從事emcc 。我們可以通過嘗試emcc終端來驗證成功的安裝。
注意：我們最近發現，使用最新的emcc版本可能會在運行時遇到問題。使用./emsdk install 3.1.56而不是./emsdk install latest方法。錯誤可能看起來像
Init error, LinkError: WebAssembly.instantiate(): Import #6 module="wasi_snapshot_preview1"
function="proc_exit": function import requires a callable
在./package.json中，從"@mlc-ai/web-runtime": "0.18.0-dev2",到"@mlc-ai/web-runtime": "file:./tvm_home/web",
設置必要的環境
為Web構建準備所有必要的依賴項：
./scripts/prep_deps.sh在此步驟中，如果在環境中未定義$TVM_SOURCE_DIR ，我們將執行以下行以構建tvmjs依賴關係：
git clone https://github.com/mlc-ai/relax 3rdparty/tvm-unity --recursive這克隆了mlc-ai/relax的當前頭。但是，它可能並不總是是正確的分支或致力於克隆。要從源構建特定的NPM版本，請參閱版本Bump PR，該版本指出哪個分支（即mlc-ai/relax或apache/tvm ），哪些構成當前WEBLLM版本的依賴。例如，根據其版本的Bump PR＃521，版本0.2.52是通過查看以下提示https://github.com/apache/tvm/commit/e64768477777777719ac47bc47bc2091c2091c888418418418b6-in apache/tvm ，而不是mlc-ai/relax則構建以下提示。
此外， --recursive是必要和重要的。否則，您可能會遇到諸如fatal error: 'dlpack/dlpack.h' file not found 。
構建Webllm軟件包
npm run build驗證一些子包裝
然後，您可以在示例中轉到子文件夾，以驗證一些子包裝。我們使用PARCELV2進行捆綁。儘管包裹不太擅長跟踪父目錄有時會更改。當您在Webllm軟件包中進行更改時，請嘗試編輯package.json夾的json並保存它，這將觸發包裹重建。
該項目是由CMU Catalyst，UW Sampl，SJTU，Octoml和MLC社區的成員發起的。我們希望繼續開發和支持開源ML社區。
僅由於我們站立的肩膀開源生態系統，該項目才有可能。我們要感謝Apache TVM社區和TVM Unity努力的開發商。開源ML社區成員公開可用這些模型。 Pytorch和擁抱的面部社區使這些模型可以訪問。我們要感謝Vicuna，句子，Llama和羊駝背後的團隊。我們還要感謝WebAssembly，Emscripten和WebGPU社區。最後，感謝Dawn和WebGPU開發人員。
如果您發現此項目有用，請引用：
@misc{ruan2024webllmhighperformanceinbrowserllm,
title={WebLLM: A High-Performance In-Browser LLM Inference Engine},
author={Charlie F. Ruan and Yucheng Qin and Xun Zhou and Ruihang Lai and Hongyi Jin and Yixin Dong and Bohan Hou and Meng-Shiun Yu and Yiyan Zhai and Sudeep Agarwal and Hangrui Cao and Siyuan Feng and Tianqi Chen},
year={2024},
eprint={2412.15803},
archivePrefix={arXiv},
primaryClass={cs.LG},
url={https://arxiv.org/abs/2412.15803},
}
⬆回到頂部⬆
