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

Diese Seite wurde von der Cloud Translation API übersetzt.

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 auf Ihre Web-Apps 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 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.

MediaPipe Studio-Demo Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.

Kurzanleitung

So fügen Sie die LLM Inference API Ihrer Webanwendung hinzu: 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

Für die LLM Inference API wird das Paket @mediapipe/tasks-genai verwendet.

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

Task 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 LLM Inference API Web APIs multimodale Prompts. Wenn die Multimodalität aktiviert ist, können Nutzer eine geordnete Kombination aus Bildern, Audio und Text in ihre Prompts einfügen. Das LLM gibt dann eine Textantwort zurück.

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.

Damit die Unterstützung für Vision 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.

Damit die Audio-Unterstützung aktiviert wird, 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([
  '<ctrl99>user\nDescribe ',
  {imageSource: '/assets/test_image.png'},
  ' and then transcribe ',
  {audioSource: '/assets/test_audio.wav'},
  '<ctrl100>\n<ctrl99>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 vorhersehbareren Generierung führt.	Gleitkommazahl	0,8
`randomSeed`	Der während der Textgenerierung verwendete Zufalls-Seed.	Ganzzahl	0
`loraRanks`	Die LoRA-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 die Methode Ihres Modells.

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	Generative AI Edge Torch-Bibliothek	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 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 den 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)

Der Converter erstellt zwei MediaPipe-kompatible Dateien, 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]
});

LoRA-Modelle während der Laufzeit laden, nachdem das Basismodell initialisiert wurde. Das LoRA-Modell wird ausgelöst, indem die Modellreferenz beim Generieren der LLM-Antwort übergeben wird.

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