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

このページは Cloud Translation API によって翻訳されました。

ウェブ用 LLM 推論ガイド

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

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

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

クイックスタート

LLM 推論 API をウェブアプリケーションに追加する手順は次のとおりです。LLM 推論 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 コミュニティページでは、ドキュメントには記載されていないものの、ウェブ用に特別に変換された 270M、4B、12B、27B、MedGemma-27B-Text など、Gemma 3 の追加バリエーションがいくつか提供されています。

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

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

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

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

Task を初期化する

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

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 推論 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([
  '<ctrl99>user\nDescribe ',
  {imageSource: '/assets/test_image.png'},
  ' and then transcribe ',
  {audioSource: '/assets/test_audio.wav'},
  '<ctrl100>\n<ctrl99>model\n',
]);

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

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

このサンプルアプリケーションは、LLM 推論 API を使用したウェブ用の基本的なテキスト生成アプリの例です。このアプリは、独自のウェブアプリの出発点として使用することも、既存のアプリを修正する際に参照することもできます。サンプルコードは GitHub でホストされています。

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

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

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

設定オプション

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

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

モデル変換

LLM 推論 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 モデル	AI Edge Torch 生成ライブラリ	Android、iOS	.task

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

LoRA のカスタマイズ

LLM Inference API は、PEFT（パラメータエフィシエントファインチューニング）ライブラリを使用した 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 推論 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 オプションを指定します。

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 推論ガイド

クイックスタート

依存関係を追加する

モデルのダウンロード

Task を初期化する

タスクを実行する

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

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

設定オプション

モデル変換

LoRA のカスタマイズ

LoRA 重みを準備する

モデル変換

LoRA モデルの推論

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

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