Google AI Edge Portal 隆重推出：大規模基準測試 Edge AI。申請在非公開預先發布版期間要求存取權。

本頁面由 Cloud Translation API 翻譯而成。

網頁版 LLM 推論指南

LLM 推論 API 可讓您完全在裝置上執行大型語言模型 (LLM)，適用於網頁應用程式，可用於執行各種工作，例如生成文字、以自然語言形式擷取資訊，以及摘要文件。這項工作內建支援多種文字轉文字大型語言模型，因此您可以在網頁應用程式中套用最新的裝置端生成式 AI 模型。如果您使用最新的 Gemma-3n 模型，則也支援圖片和音訊輸入。

如要快速將 LLM Inference API 新增至 Web 應用程式，請按照快速入門導覽課程操作。如需執行 LLM Inference API 的網頁應用程式基本範例，請參閱範例應用程式。如要深入瞭解 LLM 推論 API 的運作方式，請參閱設定選項、模型轉換和 LoRA 微調章節。

如要查看這項工作實際運作情形，請參閱 MediaPipe Studio 示範。如要進一步瞭解這項工作的能力、模型和設定選項，請參閱總覽。

快速入門導覽課程

請按照下列步驟，將 LLM Inference API 新增至 Web 應用程式。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 社群頁面，其中提供多種其他 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 支援多模態提示。啟用多模態功能後，使用者可以在提示中加入圖片、音訊和文字的有序組合。接著，大型語言模型會提供文字回覆。

如要開始使用，請採用 MediaPipe 和網頁相容格式的 Gemma-3n E4B 或 Gemma-3n E2B。詳情請參閱 Gemma-3n 說明文件。

如要啟用視覺支援，請確認 maxNumImages 已設為正值。這項設定決定了 LLM 在單一提示中可處理的圖片片段數量上限。

如要啟用音訊支援，請確認 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',
]);

如果是 Vision，則支援圖片網址和最常見的圖片、影片或畫布物件。音訊方面，系統僅支援單聲道 AudioBuffer 和單聲道音訊檔案網址。如要瞭解詳情，請瀏覽原始碼。

應用程式範例

這個範例應用程式是網頁適用的基本文字生成應用程式，使用 LLM 推論 API。您可以將這個應用程式做為自己 Web 應用程式的範本，或在修改現有應用程式時參考。範例程式碼位於 GitHub。

使用下列指令複製 git 存放區：

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

詳情請參閱「網頁設定指南」。

設定選項

請使用下列設定選項設定 Web 應用程式：

選項名稱	說明	值範圍	預設值
`modelPath`	模型在專案目錄中的儲存路徑。	路徑	不適用
`maxTokens`	模型可處理的權杖數量上限 (輸入權杖 + 輸出權杖)。	整數	512
`topK`	模型在生成過程的每個步驟中會考量的權杖數量。將預測結果限制為機率最高的 k 個符記。	整數	40
`temperature`	生成期間導入的隨機程度。溫度越高，生成的文字就越有創意；溫度越低，生成的文字就越可預測。	浮點值	0.8
`randomSeed`	文字生成期間使用的隨機種子。	整數	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 (低秩調整) 微調。LoRA 微調功能會透過經濟實惠的訓練程序，自訂大型語言模型的行為，並根據新的訓練資料建立一小組可訓練的權重，而非重新訓練整個模型。

LLM Inference API 支援將 LoRA 權重新增至 Gemma-2 2B、Gemma 2B 和 Phi-2 模型的注意力層。下載 safetensors 格式的模型。

基礎模型必須採用 safetensors 格式，才能建立 LoRA 權重。完成 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 選項。

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)

轉換器會產生兩個與 MediaPipe 相容的檔案，一個用於基礎模型，另一個用於 LoRA 模型。

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;
});