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 erledigen, z. B. Text generieren, Informationen in natürlicher Sprache abrufen und Dokumente zusammenfassen. Die Aufgabe bietet integrierte Unterstützung für mehrere Text-zu-Text-LLMs, sodass Sie die neuesten generativen KI-Modelle auf dem Gerät auf Ihre Webanwendungen anwenden können. Wenn Sie die neuesten Gemma-3n-Modelle verwenden, werden auch Bild- und Audioeingaben unterstützt.

Wenn Sie die LLM Inference API schnell zu Ihrer Webanwendung hinzufügen möchten, folgen Sie der Kurzanleitung. Ein einfaches Beispiel für eine Webanwendung, die die LLM Inference API ausführt, finden Sie in der Beispielanwendung. Weitere Informationen zur Funktionsweise der LLM Inference API finden Sie in den Abschnitten zu 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 zu Ihrer Webanwendung hinzuzufügen. 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-Browser kompatibilität.

Abhängigkeiten hinzufügen

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

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

npm install @mediapipe/tasks-genai

Wenn Sie die Bereitstellung auf einem Server vornehmen möchten, verwenden Sie einen CDN-Dienst (Content Delivery Network) wie jsDelivr, um Code direkt zu 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 HuggingFace herunter. Modelle mit „-Web“ im Namen wurden 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 HuggingFace-Community-Seite, Dort finden Sie die neu veröffentlichten Modelle Gemma 4 E2B und E4B, sowie mehrere zusätzliche Gemma 3-Varianten, die in der Dokumentation nicht behandelt werden, aber alle 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 Objekts baseOptions 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 Inferenz 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;
});

Multimodales Prompting

Bei Gemma-3n-Modellen unterstützen die Web-APIs der LLM Inference API multimodales Prompting. 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 Gemma-3n Dokumentation.

Wenn Sie die Bildunterstützung aktivieren möchten, muss maxNumImages auf einen positiven Wert festgelegt sein. Dadurch wird die maximale Anzahl von Bildteilen festgelegt, die das LLM in einem einzelnen Prompt verarbeiten kann.

Wenn Sie die Audiounterstützung aktivieren möchten, muss supportAudio auf true festgelegt 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 aus 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 die Bildverarbeitung werden Bild-URLs und die gängigsten Bild-, Video- oder Canvas-Objekte unterstützt. Für Audio werden nur AudioBuffer-URLs mit einem Kanal und Mono-Audiodatei-URLs unterstützt. Weitere Informationen finden Sie im Quellcode.

Beispielanwendung

Die Beispielanwendung ist ein Beispiel für eine einfache App zur Textgenerierung für das Web, die die LLM Inference API verwendet. Sie können die App als Ausgangspunkt für Ihre eigene Webanwendung verwenden oder sie als Referenz nutzen, 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 in der Einrichtungsanleitung für das Web.

Konfigurationsoptionen

Verwenden Sie die folgenden Konfigurationsoptionen, um eine Webanwendung 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 Zufallswert, der bei der Textgenerierung verwendet wird.	Ganzzahl	0
`loraRanks`	LoRA-Ränge, die von den LoRA-Modellen während der 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, von denen einige eine Modellkonvertierung erfordern. In der Tabelle finden Sie die erforderliche Methode für Ihr Modell.

Modelle	Konvertierungsmethode	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-Bibliothek	Android, iOS	.task

Informationen zum Konvertieren anderer Modelle finden Sie im Abschnitt Modell konvertierung.

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 Format safetensors herunter.

Das Basismodell muss im Format safetensors vorliegen, um LoRA-Gewichte zu erstellen. 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 Methods Anleitung von 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 Gewichte des feinabgestimmten LoRA-Modells 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. In ConversionConfig werden die Optionen für das Basismodell zusammen mit den 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

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

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 die Modellreferenz übergeben, wenn Sie die LLM-Antwort generieren.

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