WebLLM：ブラウザ内での高性能LLM推論エンジン

WebLLM 高性能ブラウザ内LLM推論エンジン ドキュメント | ブログ記事 | ペーパー | 例 概要 WebLLMは、ハードウェアアクセラレーションを備えた大規模言語モデル（LLM）推論を直接Webブラウザにもたらす、高性能なブラウザ内LLM推論エンジンです。すべてサーバーサポートなしでブラウザ内で実行され、WebGPUによってアクセラのレーションされます。WebLLMはOpenAI APIと完全に互換性があります。つまり、ストリーミング、JSONモード、関数呼び出し（開発中）などの機能を含め、ローカルで任意のオープンソースモデルに対して同じOpenAI APIを使用できます。これにより、すべての人にAIアシスタントを構築するための多くの楽しい機会をもたらし、GPUアクセラレーションを楽しみながらプライバシーを有効にすることができます。WebLLMをベースnpmパッケージとして使用し、以下の例に従って独自のWebアプリケーションを構築できます。このプロジェクトは、MLC LLMのコンパニオンプロジェクトであり、あらゆるハードウェア環境へのLLMのユニバーサル展開を可能にします。WebLLM Chatをチェックして試してみてください！ 主な特徴 ブラウザ内推論：WebLLMは、WebGPUを活用してハードウェアアクセラレーションを行う高性能なブラウザ内言語モデル推論エンジンであり、サーバーサイド処理なしでWebブラウザ内で直接強力なLLM操作を可能にします。 完全なOpenAI API互換性：ストリーミング、JSONモード、logitレベル制御、シードなどの機能を使用して、WebLLMとアプリをシームレスに統合できます。 構造化JSON生成：WebLLMは、最適なパフォーマンスのためにモデルライブラリのWebAssembly部分に実装された、最先端のJSONモード構造化生成をサポートしています。HuggingFaceのWebLLM JSON Playgroundをチェックして、カスタムJSONスキーマを使用したJSON出力の生成を試してください。 豊富なモデルサポート：WebLLMは、Llama 3、Phi 3、Gemma、Mistral、Qwen（通義千問）など、さまざまなモデルをネイティブにサポートしており、さまざまなAIタスクに汎用的に対応できます。サポートされているモデルの完全なリストについては、MLC Modelsを参照してください。 カスタムモデル統合：MLC形式のカスタムモデルを簡単に統合および展開できるため、WebLLMを特定のニーズやシナリオに適応させ、モデル展開の柔軟性を高めることができます。 プラグアンドプレイ統合：NPMやYarnなどのパッケージマネージャーを使用するか、CDNを直接使用して、WebLLMをプロジェクトに簡単に統合できます。包括的な例とUIコンポーネントとの接続のためのモジュラー設計が用意されています。 ストリーミングとリアルタイムインタラクション：ストリーミングチャット補完をサポートしており、リアルタイムの出力生成が可能で、チャットボットや仮想アシスタントなどのインタラクティブなアプリケーションを強化します。 Web WorkerとService Workerのサポート：計算を個別のワーカー スレッドまたはサービスワーカーにオフロードすることで、UIパフォーマンスを最適化し、モデルのライフサイクルを効率的に管理します。 Chrome拡張機能のサポート：WebLLMを使用してカスタムChrome拡張機能を通じてWebブラウザの機能を拡張できます。基本的な拡張機能と高度な拡張機能の両方を構築するための例が用意されています。 組み込みモデル MLC Modelsで利用可能なモデルの完全なリストを確認してください。WebLLMはこれらの利用可能なモデルの一部をサポートしており、リストはprebuiltAppConfig.model_listでアクセスできます。現在サポートされている主なモデルファミリーは次のとおりです。 Llama：Llama 3、Llama 2、Hermes-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 Chatを参照してください。さまざまなユースケースのその他の例は、examplesフォルダにあります。 開始方法 WebLLMは、ブラウザでチャットボットにアクセスするためのミニマリストでモジュラーなインターフェイスを提供します。パッケージは、UIコンポーネントにフックするためのモジュラー方法で設計されています。 インストール パッケージマネージャー # npm npm install @mlc-ai/web-llm # yarn yarn add @mlc-ai/web-llm # または pnpm pnpm install @mlc-ai/web-llm その後、コードでモジュールをインポートします。 // すべてをインポート import * as webllm from "@mlc-ai/web-llm"; // 必要なものだけをインポート import { CreateMLCEngine } from "@mlc-ai/web-llm"; CDN配信 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"); MLCEngineの作成 WebLLMのほとんどの操作は、MLCEngineインターフェイスを通じて呼び出されます。MLCEngineインスタンスを作成し、CreateMLCEngine()ファクトリ関数を呼び出してモデルをロードできます。（モデルのロードにはダウンロードが必要であり、キャッシュされていない最初の実行ではかなりの時間がかかる場合があります。この非同期呼び出しは適切に処理する必要があります。） import { CreateMLCEngine } from "@mlc-ai/web-llm"; // モデルロードの進行状況を更新するコールバック関数 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"; // これは同期呼び出しで、すぐに返されます const engine = new MLCEngine({ initProgressCallback: initProgressCallback }); // これは非同期呼び出しで、完了に時間がかかる場合があります await engine.reload(selectedModel); キャッシュバックエンドポリシー WebLLMは、AppConfig.cacheBackendを介して4つのキャッシュバックエンドをサポートしています。 "cache": ブラウザキャッシュAPI（デフォルト）。 "indexeddb": ブラウザIndexedDB。 "opfs": ブラウザOrigin Private File System (OPFS)。 "cross-origin": 実験的なChromeクロスオリジンストレージAPI拡張機能バックエンド。これを使用するには、クロスオリジンストレージ拡張機能をインストールしてください。（拡張機能がインストールされていない場合、WebLLMは自動的にデフォルトのキャッシュにフォールバックします。） 例： import { CreateMLCEngine, prebuiltAppConfig } from "@mlc-ai/web-llm"; const appConfig = { ...prebuiltAppConfig, cacheBackend: "cross-origin", }; const engine = await CreateMLCEngine("Llama-3.1-8B-Instruct-q4f32_1-MLC", { appConfig, }); 注： "opfs"がOPFSをサポートしていない環境で選択された場合、キャッシュ操作はOPFS利用可能性エラーで失敗します。"opfs"を使用する場合、appConfig.opfsAccessModeは"auto"に設定して、サポートされている場所ではOPFS同期アクセスハンドルを使用するか、"sync"に設定して同期アクセスハンドルを要求することができます。デフォルトは"async"です。"cross-origin"バックエンドは、互換性のあるブラウザ拡張機能のインストールと有効化が必要です。クロスオリジンバックエンドは現在、プログラムによるテンソルキャッシュの削除をサポートしていません。クリアは拡張機能によって管理されます。 チャット補完 エンジンを正常に初期化した後、エンジン.chat.completionsインターフェイスを通じてOpenAIスタイルのチャットAPIを使用してチャット補完を呼び出すことができます。パラメータとその説明の完全なリストについては、以下のセクションとOpenAI APIリファレンスを参照してください。（注：モデルパラメータはサポートされておらず、無視されます。代わりに、上記の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: "sy