首页 建站资源 正文
我要发布

web llm

建站资源
2025-12-11 0 756

webllm

高性能内浏览器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上访问列表。

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

  • 骆驼：骆驼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\" ;

CDN交付

感谢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\" ) ;

创建mlcengine

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。

完整的OpenAI兼容性

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软件包

注意：除非您想修改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

如果您需要从源构建TVMJ

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}, 
}

贡献者

⬆回到顶部⬆

下载源码

通过命令行克隆项目:

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

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

申明：本文由第三方发布，内容仅代表作者观点，与本网站无关。对本文以及其中全部或者部分内容的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。本网发布或转载文章出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，也不代表本网对其真实性负责。

左子网 建站资源 web llm https://www.zuozi.net/35494.html

architecture.of.internet product
上一篇： architecture.of.internet product
kirara ai
下一篇： kirara ai
常见问题

发货方式是什么？

  • 1、自动：拍下后，点击（下载）链接即可下载；2、手动：拍下后，联系卖家发放即可或者联系官方找开发者发货。
查看详情

交易周期是多久呢？

  • 1、源码默认交易周期：手动发货商品为1-3天，并且用户付款金额将会进入平台担保直到交易完成或者3-7天即可发放，如遇纠纷无限期延长收款金额直至纠纷解决或者退款！；
查看详情

能退款么？

  • 1、描述：源码描述(含标题)与实际源码不一致的（例：货不对板）； 2、演示：有演示站时，与实际源码小于95%一致的（但描述中有”不保证完全一样、有变化的可能性”类似显著声明的除外）； 3、发货：不发货可无理由退款； 4、安装：免费提供安装服务的源码但卖家不履行的； 5、收费：价格虚标，额外收取其他费用的（但描述中有显著声明或双方交易前有商定的除外）； 6、其他：如质量方面的硬性常规问题BUG等。 注：经核实符合上述任一，均支持退款，但卖家予以积极解决问题则除外。
查看详情

注意事项

  • 1、左子会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全！ 2、左子无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别； 3、在源码同时有网站演示与图片演示，且站演与图演不一致时，默认按图演作为纠纷评判依据（特别声明或有商定除外）； 4、在没有”无任何正当退款依据”的前提下，商品写有”一旦售出，概不支持退款”等类似的声明，视为无效声明； 5、在未拍下前，双方在QQ上所商定的交易内容，亦可成为纠纷评判依据（商定与描述冲突时，商定为准）； 6、因聊天记录可作为纠纷评判依据，故双方联系时，只与对方在左子上所留的QQ、手机号沟通，以防对方不承认自我承诺。 7、虽然交易产生纠纷的几率很小，但一定要保留如聊天记录、手机短信等这样的重要信息，以防产生纠纷时便于左子介入快速处理。
查看详情

相关文章

猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

联系官方团队 在线提交工单
TA的动态
左子网

分享最新WordPress教程共同学习，共同进步，共同成长！

QQ交流群
左子网

QQ交流群

您的支持，是我们最大的动力！ https://qm.qq.com/q/iR7Nj0TrOg
热门文章
热门标签
随机推荐
热门评论
终身VIP会员限时钜惠
首页 源码 菜单 案例 我的