網頁版 LLM 推論指南

LLM 推論 API 可讓您在裝置上完全執行大型語言模型 (LLM)，用於執行各種網路應用程式，例如產生文字、以自然語言形式擷取資訊，以及摘要文件。這項工作會為多種文字轉文字大型語言模型提供內建支援，讓您將最新的裝置端生成式 AI 模型套用至網頁應用程式。

如要快速將 LLM Inference API 新增至您的網頁應用程式，請按照快速入門操作。如需執行 LLM Inference API 的網路應用程式基本範例，請參閱應用程式範例。如要進一步瞭解 LLM Inference 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>

下載模型

從 Kaggle 模型下載 Gemma-2 2B 的 8 位元量化格式。如要進一步瞭解可用模型，請參閱模型說明文件。

將模型儲存在專案目錄中：

<dev-project-root>/assets/gemma-2b-it-gpu-int8.bin

使用 baseOptions 物件 modelAssetPath 參數指定模型的路徑：

baseOptions: { modelAssetPath: `/assets/gemma-2b-it-gpu-int8.bin`}

初始化工作

使用基本設定選項初始化工作：

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-2b-it-gpu-int8.bin'
    },
    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;
});

應用程式範例

範例應用程式是使用 LLM 推論 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 推論 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 推論 API 支援使用 PEFT (參數高效率微調) 程式庫進行 LoRA (低秩調整) 調整。LoRA 調整功能會透過經濟實惠的訓練程序，自訂 LLM 的行為，並根據新的訓練資料建立一小組可訓練權重，而非重新訓練整個模型。

LLM 推論 API 可在 Gemma-2 2B、Gemma 2B 和 Phi-2 模型的注意力層中新增 LoRA 權重。以 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 模型推論

Web 支援在執行階段動態使用 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;
});