Google AI Edge Portal: Edge-KI im großen Maßstab benchmarken. Melden Sie sich an, um während der privaten Vorschau Zugriff anzufordern.

LLM-Inferenzleitfaden für das Web

Mit der LLM Inference API können Sie Large Language Models (LLMs) vollständig auf dem Gerät für Webanwendungen ausführen. Damit lassen sich eine Vielzahl von Aufgaben ausführen, z. B. Text generieren, Informationen in natürlicher Sprache abrufen und Dokumente zusammenfassen. Die Aufgabe bietet integrierte Unterstützung für mehrere Large Language Models für Text-zu-Text-Anwendungen, sodass Sie die neuesten On-Device-Modelle für generative KI in Ihren Web-Apps verwenden können. Wenn Sie die neuesten Gemma-3n-Modelle verwenden, werden auch Bild- und Audioeingaben unterstützt.

Wenn Sie die LLM Inference API schnell in Ihre Webanwendung einfügen möchten, folgen Sie der Kurzanleitung. Ein einfaches Beispiel für eine Webanwendung, in der die LLM Inference API ausgeführt wird, finden Sie in der Beispielanwendung. Weitere Informationen zur Funktionsweise der LLM Inference API finden Sie in den Abschnitten Konfigurationsoptionen, Modellkonvertierung und LoRA-Abstimmung.

In der Demo zu MediaPipe Studio können Sie sich die Umsetzung dieser Aufgabe ansehen. Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.

Kurzanleitung

Führen Sie die folgenden Schritte aus, um die LLM Inference API in Ihre Webanwendung einzubinden. Für die LLM Inference API ist ein Webbrowser mit WebGPU-Kompatibilität erforderlich. Eine vollständige Liste der kompatiblen Browser finden Sie unter GPU-Browserkompatibilität.

Abhängigkeiten hinzufügen

Die LLM Inference API verwendet das Paket @mediapipe/tasks-genai.

Installieren Sie die erforderlichen Pakete für das lokale Staging:

npm install @mediapipe/tasks-genai

Wenn Sie auf einem Server bereitstellen möchten, verwenden Sie einen CDN-Dienst (Content Delivery Network) wie jsDelivr, um Code direkt auf Ihrer HTML-Seite hinzuzufügen:

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

Modell herunterladen

Laden Sie Gemma-3n E4B oder E2B von Hugging Face herunter. Modelle mit „-Web“ im Namen werden speziell für die Webnutzung konvertiert. Es wird daher dringend empfohlen, immer eines dieser Modelle zu verwenden.

Weitere Informationen zu den verfügbaren Modellen finden Sie in der Dokumentation zu Modellen oder auf unserer Hugging Face-Communityseite. Dort finden Sie mehrere zusätzliche Gemma 3-Varianten, die nicht in der Dokumentation enthalten sind, aber speziell für das Web konvertiert wurden, z. B. 270M, 4B, 12B, 27B und MedGemma-27B-Text.

Speichern Sie das Modell in Ihrem Projektverzeichnis:

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

Geben Sie den Pfad des Modells mit dem Parameter modelAssetPath des baseOptions-Objekts an:

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

Aufgabe initialisieren

Initialisieren Sie die Aufgabe mit grundlegenden Konfigurationsoptionen:

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

Aufgabe ausführen

Verwenden Sie die Funktion generateResponse(), um Inferenzen auszulösen.

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

So streamen Sie die Antwort:

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

Multimodale Prompts

Bei Gemma-3n-Modellen unterstützen die Web-APIs der LLM Inference API multimodale Prompts. Wenn die Multimodalität aktiviert ist, können Nutzer in ihre Prompts eine geordnete Kombination aus Bildern, Audio und Text einfügen. Das LLM gibt dann eine Textantwort aus.

Verwenden Sie zum Einstieg entweder Gemma-3n E4B oder Gemma-3n E2B im MediaPipe- und Web-kompatiblen Format. Weitere Informationen finden Sie in der Dokumentation zu Gemma-3n.

Damit die Unterstützung für die visuelle Wahrnehmung aktiviert wird, muss maxNumImages auf einen positiven Wert gesetzt sein. Damit wird die maximale Anzahl von Bildteilen festgelegt, die das LLM in einem einzelnen Prompt verarbeiten kann.

Wenn Sie die Audio-Unterstützung aktivieren möchten, muss supportAudio auf true gesetzt sein.

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

Antworten können jetzt wie zuvor generiert werden, aber mit einem geordneten Array von Strings, Bildern und Audiodaten:

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',
]);

Für Vision werden Bild-URLs und die gängigsten Bild-, Video- oder Canvas-Objekte unterstützt. Bei Audio werden nur AudioBuffer mit einem Kanal und URLs für Monochannel-Audiodateien unterstützt. Weitere Informationen finden Sie im Quellcode.

Beispielanwendung

Die Beispielanwendung ist ein Beispiel für eine einfache Textgenerierungs-App für das Web, die die LLM Inference API verwendet. Sie können die App als Ausgangspunkt für Ihre eigene Web-App verwenden oder sich daran orientieren, wenn Sie eine vorhandene App ändern. Der Beispielcode wird auf GitHub gehostet.

Klonen Sie das Git-Repository mit dem folgenden Befehl:

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

Weitere Informationen finden Sie im Einrichtungsleitfaden für das Web.

Konfigurationsoptionen

Verwenden Sie die folgenden Konfigurationsoptionen, um eine Web-App einzurichten:

Option	Beschreibung	Wertebereich	Standardwert
`modelPath`	Der Pfad zum Speicherort des Modells im Projektverzeichnis.	PFAD	–
`maxTokens`	Die maximale Anzahl von Tokens (Eingabetokens + Ausgabetokens), die das Modell verarbeitet.	Ganzzahl	512
`topK`	Die Anzahl der Tokens, die das Modell bei jedem Generierungsschritt berücksichtigt. Beschränkt Vorhersagen auf die k wahrscheinlichsten Tokens.	Ganzzahl	40
`temperature`	Der Grad der Zufälligkeit, der während der Generierung eingeführt wird. Eine höhere Temperatur führt zu mehr Kreativität im generierten Text, während eine niedrigere Temperatur zu einer vorhersagbareren Generierung führt.	Gleitkommazahl	0,8
`randomSeed`	Der während der Textgenerierung verwendete Zufalls-Seed.	Ganzzahl	0
`loraRanks`	Die Ränge, die von den LoRA-Modellen zur Laufzeit verwendet werden sollen. Hinweis: Dies ist nur mit GPU-Modellen kompatibel.	Ganzzahl-Array	–

Modellkonvertierung

Die LLM Inference API ist mit den folgenden Modelltypen kompatibel. Für einige ist eine Modellkonvertierung erforderlich. In der Tabelle finden Sie die erforderlichen Schritte für Ihr Modell.

Modelle	Conversion-Methode	Kompatible Plattformen	Dateityp
Gemma-3 1B	Keine Konvertierung erforderlich	Android, Web	.task
Gemma 2B, Gemma 7B, Gemma-2 2B	Keine Konvertierung erforderlich	Android, iOS, Web	.bin
Phi-2, StableLM, Falcon	MediaPipe-Konvertierungsskript	Android, iOS, Web	.bin
Alle PyTorch-LLM-Modelle	LiteRT Torch Generative Library	Android, iOS	.task

Informationen zum Konvertieren anderer Modelle finden Sie im Abschnitt Modellkonvertierung.

LoRA-Anpassung

Die LLM Inference API unterstützt die LoRA-Abstimmung (Low-Rank Adaptation) mit der PEFT-Bibliothek (Parameter-efficient Fine-tuning). Durch die LoRA-Abstimmung wird das Verhalten von LLMs durch einen kostengünstigen Trainingsprozess angepasst. Dabei wird eine kleine Gruppe von trainierbaren Gewichten auf der Grundlage neuer Trainingsdaten erstellt, anstatt das gesamte Modell neu zu trainieren.

Die LLM Inference API unterstützt das Hinzufügen von LoRA-Gewichten zu Attention-Layern der Modelle Gemma-2 2B, Gemma 2B und Phi-2. Laden Sie das Modell im safetensors-Format herunter.

Das Basismodell muss das Format safetensors haben, damit LoRA-Gewichte erstellt werden können. Nach dem LoRA-Training können Sie die Modelle in das FlatBuffers-Format konvertieren, um sie in MediaPipe auszuführen.

LoRA-Gewichte vorbereiten

Verwenden Sie die LoRA-Methoden aus PEFT, um ein feinabgestimmtes LoRA-Modell mit Ihrem eigenen Dataset zu trainieren.

Die LLM Inference API unterstützt LoRA nur auf Attention-Layern. Geben Sie daher nur die Attention-Layer in LoraConfig an:

# 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"],
)

Nach dem Training mit dem vorbereiteten Dataset und dem Speichern des Modells sind die feinabgestimmten LoRA-Modellgewichte in adapter_model.safetensors verfügbar. Die Datei safetensors ist der LoRA-Prüfpunkt, der bei der Modellkonvertierung verwendet wird.

Modellkonvertierung

Verwenden Sie das MediaPipe Python-Paket, um die Modellgewichte in das Flatbuffer-Format zu konvertieren. Mit ConversionConfig werden die Optionen für das Basismodell sowie die zusätzlichen LoRA-Optionen angegeben.

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)

Bei der Konvertierung werden zwei MediaPipe-kompatible Dateien erzeugt, eine für das Basismodell und eine für das LoRA-Modell.

LoRA-Modellinferenz

Web unterstützt dynamische LoRA-Ränge zur Laufzeit. Das bedeutet, dass Nutzer die LoRA-Ränge bei der Initialisierung deklarieren. Das bedeutet, dass Sie während der Laufzeit verschiedene LoRA-Modelle austauschen können.

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

Laden Sie die LoRA-Modelle während der Laufzeit, nachdem Sie das Basismodell initialisiert haben. Lösen Sie das LoRA-Modell aus, indem Sie beim Generieren der LLM-Antwort auf das Modell verweisen.

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