web llm

WEBLLM是一种高性能的浏览器LLM推理引擎，它将语言模型推理直接带到具有硬件加速度的Web浏览器上。一切都在浏览器内部运行，没有服务器支持，并且使用WebGPU加速。

Webllm与OpenAI API完全兼容。也就是说，您可以在本地的任何开源模型上使用相同的OpenAI API，并具有包括流媒体，JSON模式，功能呼叫（WIP）等功能的功能。

我们可以带来很多有趣的机会，为每个人建立AI助手，并在享受GPU加速的同时启用隐私。

您可以将WEBLLM用作基本NPM软件包，并在下面的示例上构建自己的Web应用程序。该项目是MLC LLM的同伴项目，该项目可以在硬件环境中普遍部署LLM。

• 内浏览器推理：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上访问列表。

这是当前支持的主要模型家庭：

• 骆驼：骆驼3，骆驼2，爱马仕-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

如果您需要更多模型，请通过打开问题或检查如何与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://es*m.*ru*n/@mlc-ai/web-llm" ;

它也可以动态导入为：

 const webllm = await import ( "https://es*m.*ru*n/@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 ) ;

成功初始化引擎后，您现在可以通过ement.chat.completions接口使用OpenAI样式聊天API调用聊天完成。有关参数及其描述的完整列表，请查看下面的部分和OpenAI API参考。

（注意：不支持模型参数，并且将在此处忽略。相反，请调用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还支持流聊天完成生成。要使用它，只需传递流：ture 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 ) ; 

您可以将重型计算放入工作脚本中，以优化应用程序性能。为此，您需要：

1. 在处理请求时，在工作线程中创建一个处理程序，该处理程序与前端进行通信。
2. 在您的主要应用程序中创建一个工人引擎，该引擎在引擎盖下将消息发送给工作线程中的处理程序。

有关各种工人的详细实现，请检查以下各节。

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支持，因此您可以将生成过程连接到服务工作者中，以避免在每个页面访问中重新加载模型，并优化应用程序的离线体验。

(Note, Service Worker's life cycle is managed by the browser and can be killed any time without notifying the webapp. ServiceWorkerMLCEngine will tr​​y to keep the service worker thread alive by periodically sending heartbeat events, but your application should also include proper error handling. Check keepAliveMs and missedHeatbeat in ServiceWorkerMLCEngine for more details.)

我们在工作线程中创建一个处理程序，该处理程序在处理请求时与前端进行通信。

 // 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具有以下功能：

• 流媒体：以异步器的形式实时返回输出作为块
• JSON模式：有效地确保输出以JSON格式，请参阅OpenAI参考。
• 种子到生产：使用播种来确保带有田间种子的可再现输出。
• 功能打击（WIP）：使用字段工具和工具_CHOICE的函数调用（有初步支持）；或无需工具或工具的手动函数调用（保持灵活性最高）。

WEBLLM是MLC LLM的同伴项目，并以MLC格式支持自定义模型。它可以重用模型伪像，并构建MLC LLM的流动。要与Webllm一起编译和使用自己的模型，请查看有关如何编译和部署新的模型权重和库中的MLC LLM文档。

在这里，我们介绍了高级的想法。 Webllm软件包中有两个元素可以实现新的模型和权重变体。

• 模型：包含模型伪像的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 ,
  ) ;
}

在许多情况下，我们只想提供模型重量变体，但不一定是新模型（例如，神经服务器可以重复使用Mistral的模型库）。有关如何通过不同模型变体共享模型库的示例，请参见Webllm.prebuiltappConfig。

注意：除非您想修改WEBLLM软件包，否则您无需从源构建。要使用NPM，只需遵循开始或任何示例即可。

要从源构建，只需运行：

npm install
npm run build

然后，要在一个示例中测试代码更改的效果，示例/get-started/package.json。

然后运行：

 cd examples/get-started
npm install
npm start

请注意，有时您需要在文件之间切换：../ ..和../ ..触发NPM以识别新的更改。在最坏的情况下，您可以运行：

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

WEBLLM的运行时很大程度上取决于TVMJS：https：//github.com/apache/tvm/tree/main/main/web

虽然它也可作为NPM软件包提供：https：//www.npmjs.com/package/@mlc-ai/web-runtime，但您可以从源中从源中构建它，如果需要，请按照以下步骤进行以下步骤。

1. 安装Emscripten。这是一个基于LLVM的编译器，将C/C ++源代码编译到WebAssembly。

   • 按照安装说明安装最新的EMSDK。
   • 源emsdk_env.sh通过源路径/to/emsdk_env.sh，从路径和命令emcc可以从事EMCC。

   我们可以通过尝试EMCC终端来验证成功的安装。

   注意：我们最近发现，使用最新的EMCC版本可能会在运行时遇到问题。使用./emsdk安装3.1.56而不是./emsdk安装最新的方法。错误可能看起来像

   Init error, LinkError: WebAssembly.instantiate(): Import #6 module="wasi_snapshot_preview1"
   function="proc_exit": function import requires a callable
   

2. 在./package.json中，从“@mlc-ai/web-runtime”更改：“ 0.18.0-dev2”，到“@mlc-ai/web-runtime”：“ file：./ tevm_home/web”，。

3. 设置必要的环境

   为Web构建准备所有必要的依赖项：

   ./scripts/prep_deps.sh

   在此步骤中，如果在环境中未定义$ tvm_source_dir，我们将执行以下行以构建TVMJS依赖关系：

   git clone https://gi*thub.c**om/mlc-ai/relax 3rdparty/tvm-unity --recursive

   这克隆了MLC-AI/放松的当前头部。但是，它可能并不总是是正确的分支或致力于克隆。要从源构建特定的NPM版本，请参阅版本Bump PR，该版本指出哪个分支（即MLC-AI/RELAX或APACHE/TVM），哪些构成当前WEBLLM版本的依赖。例如，根据其版本的Bump PR＃521，版本0.2.52是通过查看以下提示https://g*ithub*.c*om/apache/tvm/commit/e64768477777777719ac47bc47bc2091c2091c888418418418b6-in apache/pachem in apache/pachem，而不是head of apache/pachem of mor，而不是headem，而不是heles，则构建以下提示。

   此外， - 恢复是必要和重要的。否则，您可能会遇到诸如致命错误之类的错误：找不到“ dlpack/dlpack.h”文件。

4. 构建Webllm软件包

   npm run build

5. 验证一些子包装

   然后，您可以在示例中转到子文件夹，以验证一些子包装。我们使用PARCELV2进行捆绑。尽管包裹不太擅长跟踪父目录有时会更改。当您在Webllm软件包中进行更改时，请尝试编辑子文件夹的json并保存它，这将触发包裹进行重建。

• 演示应用程序：webllm聊天
• 如果您想在本机运行时运行LLM，请查看MLC-LLM
• 您可能还对Web稳定的扩散感兴趣。

该项目是由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://ar*x**iv.org/abs/2412.15803}, 
}

⬆回到顶部⬆