web llm
v0.2.0
高性能インブラウザーLLM推論エンジン。
ドキュメント| BlogPost |論文|例
Webllmは、ハードウェアアクセラレーションを備えたWebブラウザーに言語モデルの推論を直接もたらす高性能インブラウザーLLM推論エンジンです。すべてがサーバーサポートなしでブラウザ内で実行され、WebGPUで加速されます。
webllmは、 Openai APIと完全に互換性があります。つまり、ストリーミング、JSONモード、関数 - コール（WIP）などを含む、ローカルでオープンソースモデルで同じOpenAI APIを使用できます。
私たちは、すべての人のためにAIアシスタントを構築し、GPU加速を享受しながらプライバシーを可能にするための多くの楽しい機会をもたらすことができます。
WebllmをベースNPMパッケージとして使用し、以下の例に従って独自のWebアプリケーションを構築できます。このプロジェクトは、MLC LLMのコンパニオンプロジェクトであり、ハードウェア環境全体でLLMの普遍的な展開を可能にします。
Webllmチャットをチェックして試してみてください！
ブラウザー内の推論：WebllMは、ハードウェアアクセラレーションのためにWebGPUを活用する高性能でブラウザの言語モデル推論エンジンであり、サーバー側の処理なしでWebブラウザ内で直接強力なLLM操作を可能にします。
完全なOpenAI API互換性：OpenAI APIを使用して、Streaming、JSON-Mode、Logit-Level Control、Seedingなどの機能とOpenAI APIを使用してWebllMとアプリをシームレスに統合します。
構造化されたJSON世代：WebllMは、最適なパフォーマンスのためにモデルライブラリのWebSasembly部分に実装された最先端のJSONモード構造生成をサポートします。 HuggingfaceでWebllm JSONの遊び場を確認して、カスタムJSONスキーマでJSON出力を生成してみてください。
広範なモデルサポート：Webllmは、Llama 3、Phi 3、Gemma、Mistral、Qwen（通义千问）などのさまざまなモデルをネイティブにサポートしており、さまざまなAIタスクに汎用性があります。サポートされている完全なモデルリストについては、MLCモデルを確認してください。
カスタムモデル統合：カスタムモデルをMLC形式で簡単に統合および展開し、Webllmを特定のニーズとシナリオに適応させ、モデルの展開の柔軟性を向上させることができます。
プラグアンドプレイの統合：NPMやYARNなどのパッケージマネージャーを使用して、またはCDNを介して直接WebllMをプロジェクトに簡単に統合し、包括的な例とUIコンポーネントと接続するためのモジュラー設計を備えています。
ストリーミングとリアルタイムのインタラクション：ストリーミングチャットの完了をサポートし、チャットボットや仮想アシスタントなどのインタラクティブなアプリケーションを強化するリアルタイムの出力生成を可能にします。
Webワーカーおよびサービスワーカーのサポート：UIパフォーマンスを最適化し、モデルのライフサイクルを効率的に管理し、計算をオフロードしてワーカースレッドまたはサービスワーカーを分離します。
Chrome拡張サポート：Webllmを使用してカスタムクロムエクステンションを介して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インターフェイスを介して呼び出されます。 MLCEngineインスタンスを作成し、 CreateMLCEngine()ファクトリ機能を呼び出すことでモデルを読み込むことができます。
（ロードモデルにはダウンロードが必要であり、以前にキャッシュせずに最初の実行にかなりの時間がかかる場合があります。この非同期コールを適切に処理する必要があります。）
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パラメーターはサポートされておらず、ここでは無視されます。代わりに、上記のcreate mlcengineに示すように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は、ストリーミングチャットの完了生成もサポートしています。それを使用するには、単にストリームを渡すだけで、 engine.chat.completions.createコールにstream: trueに渡されます。
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にはWebワーカー向けのAPIサポートが付属しているため、生成プロセスを別のワーカースレッドにフックして、ワーカースレッドのコンピューティングが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 ServiceWorkerMLCEngine 、定期的にハートビートイベントを送信することでサービスワーカースレッドmissedHeatbeat生かし続けようとしkeepAliveMsが、 ServiceWorkerMLCEngineにも適切なエラー処理を含める必要があります。
リクエストを処理しながらフロントエンドと通信するワーカースレッドにハンドラーを作成します。
// 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
) ;Examples/Service-WorkerでサービスワーカーでWebllmを実行する方法に関する完全な例を見つけることができます。
また、examples/chrome-Extensionおよび例/Chrome-Extension-Webgpu-Service-Service-Service-Service-Service-service-service-service-service-service-extensionでWebllmを使用したChrome Extensionを構築する例を見つけることもできます。後者はサービスワーカーを活用するため、拡張機能はバックグラウンドで永続的です。さらに、ここでWebllMを活用するChrome拡張機能の別の完全なプロジェクトであるWebllmアシスタントを探索できます。
Webllmは、OpenaI APIと完全に互換性があるように設計されています。したがって、シンプルなチャットボットを構築する以外に、Webllmで次の機能を持つこともできます。
seedを使用した再現性のある出力を確保します。toolsとtool_choiceを使用した関数呼び出し（予備サポート付き）。または、 toolsやtool_choiceなしで手動関数呼び出し（最も柔軟性を維持します）。 WebllmはMLC LLMのコンパニオンプロジェクトとして機能し、MLC形式でカスタムモデルをサポートしています。モデルアーティファクトを再利用し、MLC LLMのフローを構築します。 Webllmを使用して独自のモデルをコンパイルして使用するには、新しいモデルの重みとライブラリをWebllmにコンパイルおよび展開する方法に関するMLC LLMドキュメントをご覧ください。
ここでは、高レベルのアイデアを調べます。 Webllmパッケージには、新しいモデルと重量バリアントを可能にする2つの要素があります。
model ：重みやメタデータなどのアーティファクトをモデル化するURLが含まれています。model_lib ：モデル計算を加速するための実行可能ファイルを含むWebアセンブリライブラリ（IE 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を使用するには、代わりにGet WartまたはEmplyのいずれかをフォローしてください。
ソースから構築するには、単純に実行します。
npm install
npm run build次に、例の例でコードの変更の効果をテストするために、 examples/get-started/package.json内で、 "@mlc-ai/web-llm": "^0.2.77"から"@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/webに依存しています
NPMパッケージとしても利用できますが、https：//www.npmjs.com/package/@mlc-ai/web-runtimeは、以下の手順に従って必要に応じてソースから構築できます。
emscriptenをインストールします。これは、C/C ++ソースコードをWebAssemblyにコンパイルするLLVMベースのコンパイラです。
emsdk_env.sh source path/to/emsdk_env.sh 。これにより、 emccパスとコマンドemccから到達可能になります。 emcc端末を試して、インストールの成功を確認できます。
注：最近、最新のemccバージョンを使用すると、実行時に問題が発生する可能性があることがわかりました。 ./emsdk install 3.1.56を使用して、 ./emsdk install latest EMSDKの代わりに3.1.56をインストールします。エラーは次のように見える場合があります
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バージョンを構築するには、バージョンバンプPRを参照してください。バンプPRは、どのブランチ（ mlc-ai/relaxまたはapache/tvm ）を記載し、現在のWebllmバージョンをコミットします。たとえば、バージョン0.2.52は、そのバージョンバンプPR＃521に従って、以下のコミットをチェックアウトすることによって構築されますhttps://github.com/apache/tvm/commit/e6476847753c80e054719ac47bc2091c8888418b6 in apache/tvm mlc-ai/relax 。
その上、 --recursiveが必要かつ重要です。それ以外の場合は、 fatal error: 'dlpack/dlpack.h' file not found 。
webllmパッケージを構築します
npm run buildサブパッケージの一部を検証します
その後、サブフォルダーに移動して、サブパッケージの一部を検証できます。バンドリングにはParcelv2を使用します。小包は、親ディレクトリの変更を追跡するのにあまり上手ではありませんが。 WebllMパッケージに変更を加えるときは、サブフォルダーのpackage.jsonを編集して保存してください。これにより、小包が再構築されます。
このプロジェクトは、CMU Catalyst、UW Sampl、SJTU、Octoml、およびMLCコミュニティのメンバーによって開始されます。オープンソースMLコミュニティの開発とサポートを継続したいと考えています。
このプロジェクトは、私たちが立っている肩のオープンソースエコシステムのおかげでのみ可能です。 Apache TVMコミュニティとTVM Unityの取り組みの開発者に感謝したいと思います。オープンソースMLコミュニティメンバーは、これらのモデルを公開しました。 PytorchとHugging Face Communityは、これらのモデルにアクセスできます。 Vicuna、TentePiece、Llama、およびAlpacaの背後にあるチームに感謝します。また、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},
}
toptopに戻ります
