Google AI Edge Portal のご紹介: エッジ AI を大規模にベンチマークします。限定公開プレビュー中にアクセスをリクエストするには、登録してください。

ウェブ用 LLM 推論ガイド

LLM Inference API を使用すると、ウェブアプリケーションで大規模言語モデル（LLM）を完全にオンデバイスで実行できます。これにより、テキストの生成、自然言語形式での情報の取得、ドキュメントの要約など、幅広いタスクを実行できます。このタスクは、複数のテキストからテキストへの大規模言語モデルの組み込みサポートを提供するため、最新のオンデバイス生成 AI モデルをウェブアプリに適用できます。最新の Gemma-3n モデルを使用している場合は、画像入力と音声入力もサポートされます。

LLM Inference API をウェブアプリケーションにすばやく追加するには、クイックスタートの手順に沿って操作してください。LLM Inference API を実行するウェブアプリケーションの基本的な例については、サンプルアプリケーションをご覧ください。LLM Inference API の仕組みについて詳しくは、構成オプション、モデル変換、および LoRA チューニングの各セクションをご覧ください。

このタスクの動作は、MediaPipe Studio デモで確認できます。このタスクの機能、モデル、構成オプションの詳細については、概要をご覧ください。

クイックスタート

LLM Inference API をウェブアプリケーションに追加する手順は次のとおりです。LLM Inference API には、WebGPU と互換性のあるウェブブラウザが必要です。互換性のあるブラウザの完全なリストについては、GPU ブラウザの互換性をご覧ください。

依存関係を追加する

LLM Inference API は @mediapipe/tasks-genai パッケージを使用します。

ローカルステージングに必要なパッケージをインストールします。

npm install @mediapipe/tasks-genai

サーバーにデプロイするには、 jsDelivrなどのコンテンツ配信ネットワーク（CDN）サービスを使用して、HTML ページに直接コードを追加します。

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai/genai_bundle.cjs"
    crossorigin="anonymous"></script>
</head>

モデルのダウンロード

HuggingFace から Gemma-3n E4B または E2B をダウンロードします。名前が「-Web」のモデルはウェブでの使用に特化して変換されているため、常にこれらのモデルのいずれかを使用することを強くおすすめします。

利用可能なモデルの詳細については、モデルのドキュメントをご覧ください。また、HuggingFace コミュニティページでは、新しくリリースされた Gemma 4 E2B と E4Bのほか、ドキュメントには記載されていないがウェブ用に特別に変換された Gemma 3 のバリアント（270M、 4B、12B、 27B、および MedGemma-27B-Textなど）も提供されています。

モデルをプロジェクトディレクトリに保存します。

<dev-project-root>/assets/gemma-3n-E4B-it-int4-Web.litertlm

baseOptions オブジェクトの modelAssetPath パラメータを使用して、モデルのパスを指定します。

baseOptions: { modelAssetPath: `/assets/gemma-3n-E4B-it-int4-Web.litertlm`}

タスクを初期化する

基本的な構成オプションを使用してタスクを初期化します。

const genai = await FilesetResolver.forGenAiTasks(
    // path/to/wasm/root
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai@latest/wasm"
);
llmInference = await LlmInference.createFromOptions(genai, {
    baseOptions: {
        modelAssetPath: '/assets/gemma-3n-E4B-it-int4-Web.litertlm'
    },
    maxTokens: 1000,
    topK: 40,
    temperature: 0.8,
    randomSeed: 101
});

タスクを実行する

generateResponse() 関数を使用して推論をトリガーします。

const response = await llmInference.generateResponse(inputPrompt);
document.getElementById('output').textContent = response;

レスポンスをストリーミングするには、次のようにします。

llmInference.generateResponse(
  inputPrompt,
  (partialResult, done) => {
        document.getElementById('output').textContent += partialResult;
});

マルチモーダルプロンプト

Gemma-3n モデルの場合、LLM Inference API Web API はマルチモーダルプロンプトをサポートしています。マルチモーダルを有効にすると、プロンプトに画像、音声、テキストの順序付きの組み合わせを含めることができます。LLM はテキストレスポンスを提供します。

まず、MediaPipe とウェブ互換の形式で Gemma-3n E4B または Gemma-3n E2B を使用します。詳細については、Gemma-3n ドキュメントをご覧ください。

ビジョンサポートを有効にするには、maxNumImages が正の値に設定されていることを確認します。これにより、LLM が 1 つのプロンプトで処理できる画像の最大数が決まります。

音声サポートを有効にするには、supportAudio が true に設定されていることを確認します。

llmInference = await LlmInference.createFromOptions(genai, {
    baseOptions: {
        modelAssetPath: '/assets/gemma-3n-E4B-it-int4-Web.litertlm'
    },
    maxTokens: 1000,
    topK: 40,
    temperature: 0.8,
    randomSeed: 101,
    maxNumImages: 5,
    supportAudio: true,
});

レスポンスは、文字列、画像、音声データの順序付き配列を使用して、以前と同様に生成できます。

const response = await llmInference.generateResponse([
  '<start_of_turn>user\n',
  'Describe ',
  {imageSource: '/assets/test_image.png'},
  ' and then transcribe ',
  {audioSource: '/assets/test_audio.wav'},
  '<end_of_turn>\n<start_of_turn>model\n',
]);

ビジョンでは、画像 URL と最も一般的な画像、動画、キャンバスオブジェクトがサポートされています。音声の場合、シングルチャンネルの AudioBuffer とモノラルチャンネルの音声ファイル URL のみがサポートされます。詳細については、ソースコードをご覧ください。

サンプルアプリケーション

サンプルアプリケーションは、LLM Inference API を使用したウェブ向けの基本的なテキスト生成アプリの例です。このアプリは、独自のウェブアプリの出発点として使用することも、既存のアプリを変更する際に参照することもできます。サンプルコードは次の場所で GitHub。

次のコマンドを使用して、git リポジトリのクローンを作成します。

git clone https://github.com/google-ai-edge/mediapipe-samples

詳細については、ウェブの設定ガイドをご覧ください。

構成オプション

次の構成オプションを使用して、ウェブアプリを設定します。

オプション名	説明	値の範囲	デフォルト値
`modelPath`	モデルが保存されているプロジェクトディレクトリ内のパス。	経路	なし
`maxTokens`	モデルが処理するトークンの最大数（入力トークン + 出力トークン）。	整数	512
`topK`	モデルが生成の各ステップで考慮するトークンの数。予測を上位 k 個の最も可能性の高いトークンに制限します。	整数	40
`temperature`	生成時に導入されるランダム性の量。温度が高いほど、生成されるテキストの創造性が高くなり、温度が低いほど、予測可能な生成になります。	浮動小数点数	0.8
`randomSeed`	テキスト生成時に使用されるランダムシード。	整数	0
`loraRanks`	実行時に LoRA モデルで使用される LoRA ランク。注: これは GPU モデルとのみ互換性があります。	整数配列	なし

モデル変換

LLM Inference API は次のタイプのモデルと互換性があります。一部のモデルではモデル変換が必要です。表を使用して、モデルに必要な手順を確認してください。

モデル	変換方法	対応プラットフォーム	ファイル形式
Gemma-3 1B	変換は不要	Android、ウェブ	.task
Gemma 2B、Gemma 7B、Gemma-2 2B	変換は不要	Android、iOS、ウェブ	.bin
Phi-2、StableLM、Falcon	MediaPipe 変換スクリプト	Android、iOS、ウェブ	.bin
すべての PyTorch LLM モデル	LiteRT Torch Generative ライブラリ	Android、iOS	.task

他のモデルを変換する方法については、モデル変換セクションをご覧ください。

LoRA のカスタマイズ

LLM Inference API は、 PEFT（Parameter-Efficient Fine-Tuning）ライブラリを使用した LoRA（Low-Rank Adaptation）チューニングをサポートしています。LoRA チューニングは、費用対効果の高いトレーニングプロセスを通じて LLM の動作をカスタマイズします。モデル全体を再トレーニングするのではなく、新しいトレーニングデータに基づいてトレーニング可能な重みの小さなセットを作成します。

LLM Inference API は、 Gemma-2 2B、Gemma 2B、 Phi-2 モデルのアテンションレイヤへの LoRA 重みの追加をサポートしています。モデルを safetensors 形式でダウンロードします。

LoRA 重みを作成するには、ベースモデルが safetensors 形式である必要があります。LoRA トレーニング後、モデルを FlatBuffers 形式に変換して MediaPipe で実行できます。

LoRA 重みを準備する

PEFT の LoRA メソッドガイドを使用して、独自のデータセットでファインチューニングされた LoRA モデルをトレーニングします。

LLM Inference API はアテンションレイヤでの LoRA のみをサポートしているため、LoraConfig でアテンションレイヤのみを指定します。

# For Gemma
from peft import LoraConfig
config = LoraConfig(
    r=LORA_RANK,
    target_modules=["q_proj", "v_proj", "k_proj", "o_proj"],
)

# For Phi-2
config = LoraConfig(
    r=LORA_RANK,
    target_modules=["q_proj", "v_proj", "k_proj", "dense"],
)

準備したデータセットでトレーニングしてモデルを保存すると、ファインチューニングされた LoRA モデルの重みが adapter_model.safetensors で使用できるようになります。safetensors ファイルは、モデル変換時に使用される LoRA チェックポイントです。

モデル変換

MediaPipe Python パッケージを使用して、モデルの重みを Flatbuffer 形式に変換します。ConversionConfig には、ベースモデルのオプションと追加の LoRA オプションを指定します。

'gpu'

import mediapipe as mp
from mediapipe.tasks.python.genai import converter

config = converter.ConversionConfig(
  # Other params related to base model
  ...
  # Must use gpu backend for LoRA conversion
  backend='gpu',
  # LoRA related params
  lora_ckpt=LORA_CKPT,
  lora_rank=LORA_RANK,
  lora_output_tflite_file=LORA_OUTPUT_FILE,
)

converter.convert_checkpoint(config)

コンバータは、ベースモデル用と LoRA モデル用の 2 つの MediaPipe 互換ファイルを作成します。

LoRA モデルの推論

ウェブは実行時に動的 LoRA をサポートしています。つまり、ユーザーは初期化時に LoRA ランクを宣言します。つまり、実行時に異なる LoRA モデルをスワップできます。

const genai = await FilesetResolver.forGenAiTasks(
    // path/to/wasm/root
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai@latest/wasm"
);
const llmInference = await LlmInference.createFromOptions(genai, {
    // options for the base model
    ...
    // LoRA ranks to be used by the LoRA models during runtime
    loraRanks: [4, 8, 16]
});

ベースモデルを初期化した後、実行時に LoRA モデルを読み込みます。LLM レスポンスを生成するときにモデル参照を渡して、LoRA モデルをトリガーします。

// Load several LoRA models. The returned LoRA model reference is used to specify
// which LoRA model to be used for inference.
loraModelRank4 = await llmInference.loadLoraModel(loraModelRank4Url);
loraModelRank8 = await llmInference.loadLoraModel(loraModelRank8Url);

// Specify LoRA model to be used during inference
llmInference.generateResponse(
  inputPrompt,
  loraModelRank4,
  (partialResult, done) => {
        document.getElementById('output').textContent += partialResult;
});

ウェブ用 LLM 推論ガイド

クイックスタート

依存関係を追加する

モデルのダウンロード

タスクを初期化する

タスクを実行する

マルチモーダル プロンプト

サンプル アプリケーション

構成オプション

モデル変換

LoRA のカスタマイズ

LoRA 重みを準備する

モデル変換

LoRA モデルの推論

マルチモーダルプロンプト

サンプルアプリケーション