Guide d'inférence LLM pour le Web

L'API LLM Inference vous permet d'exécuter de grands modèles de langage (LLM) entièrement sur l'appareil pour les applications Web. Vous pouvez l'utiliser pour effectuer un large éventail de tâches, comme générer du texte, récupérer des informations en langage naturel et résumer des documents. La tâche offre une compatibilité intégrée avec plusieurs grands modèles de langage de texte à texte. Vous pouvez ainsi appliquer les derniers modèles d'IA générative sur l'appareil à vos applications Web. Si vous utilisez les derniers modèles Gemma-3n, les entrées audio et d'image sont également acceptées.

Pour ajouter rapidement l'API LLM Inference à votre application Web, suivez le guide de démarrage rapide. Pour obtenir un exemple de base d'application Web exécutant l'API LLM Inference, consultez l'exemple d'application. Pour mieux comprendre le fonctionnement de l'API LLM Inference, consultez les sections Options de configuration, Conversion de modèle et Réglage LoRA.

Vous pouvez voir cette tâche en action dans la démonstration MediaPipe Studio. Pour en savoir plus sur les fonctionnalités, les modèles et les options de configuration de cette tâche, consultez la présentation.

Guide de démarrage rapide

Suivez les étapes ci-dessous pour ajouter l'API LLM Inference à votre application Web. L'API LLM Inference nécessite un navigateur Web compatible avec WebGPU. Pour obtenir la liste complète des navigateurs compatibles, consultez Compatibilité des navigateurs avec les GPU.

Ajouter des dépendances

L'API LLM Inference utilise le package @mediapipe/tasks-genai.

Installez les packages requis pour la préparation locale :

npm install @mediapipe/tasks-genai

Pour déployer sur un serveur, utilisez un service de réseau de diffusion de contenu (CDN, Content Delivery Network) tel que jsDelivr pour ajouter du code directement à votre page HTML :

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

Télécharger un modèle

Téléchargez Gemma-3n E4B ou E2B depuis HuggingFace. Les modèles dont le nom contient "-Web" sont convertis spécifiquement pour une utilisation Web. Il est donc fortement recommandé d'en utiliser un.

Pour en savoir plus sur les modèles disponibles, consultez la documentation sur les modèles ou parcourez notre page de la communauté Hugging Face, qui propose plusieurs variantes supplémentaires de Gemma 3 non couvertes dans la documentation, mais qui ont été spécialement converties pour le Web, comme 270M, 4B, 12B, 27B et MedGemma-27B-Text.

Stockez le modèle dans le répertoire de votre projet :

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

Spécifiez le chemin d'accès du modèle avec le paramètre modelAssetPath de l'objet baseOptions :

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

Initialiser la tâche

Initialisez la tâche avec les options de configuration de base :

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

Exécuter la tâche

Utilisez la fonction generateResponse() pour déclencher des inférences.

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

Pour diffuser la réponse, utilisez ce qui suit :

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

Requêtes multimodales

Pour les modèles Gemma-3n, les API Web de l'API LLM Inference sont compatibles avec les requêtes multimodales. Lorsque la multimodalité est activée, les utilisateurs peuvent inclure une combinaison ordonnée d'images, d'éléments audio et de texte dans leurs requêtes. Le LLM fournit ensuite une réponse textuelle.

Pour commencer, utilisez Gemma-3n E4B ou Gemma-3n E2B, au format compatible avec MediaPipe et le Web. Pour en savoir plus, consultez la documentation Gemma-3n.

Pour activer la prise en charge de la vision, assurez-vous que maxNumImages est défini sur une valeur positive. Cela détermine le nombre maximal de parties d'image que le LLM peut traiter dans une seule requête.

Pour activer la prise en charge audio, assurez-vous que supportAudio est défini sur 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,
});

Les réponses peuvent désormais être générées comme auparavant, mais en utilisant un tableau ordonné de chaînes, d'images et de données audio :

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

Pour la vision, les URL d'images et les objets d'image, vidéo ou canevas les plus courants sont acceptés. Pour l'audio, seules les URL de fichiers audio monocanaux et AudioBuffer à canal unique sont acceptées. Pour en savoir plus, parcourez le code source.

Exemple d'application

L'application exemple est un exemple d'application de génération de texte de base pour le Web, utilisant l'API LLM Inference. Vous pouvez utiliser l'application comme point de départ pour votre propre application Web ou vous y référer lorsque vous modifiez une application existante. L'exemple de code est hébergé sur GitHub.

Clonez le dépôt Git à l'aide de la commande suivante :

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

Pour en savoir plus, consultez le Guide de configuration pour le Web.

Options de configuration

Utilisez les options de configuration suivantes pour configurer une application Web :

Nom de l'option Description Plage de valeurs Valeur par défaut
modelPath Chemin d'accès à l'emplacement où le modèle est stocké dans le répertoire du projet. CHEMIN N/A
maxTokens Nombre maximal de jetons (jetons d'entrée + jetons de sortie) que le modèle peut traiter. Nombre entier 512
topK Nombre de jetons que le modèle prend en compte à chaque étape de la génération. Limite les prédictions aux k jetons les plus probables. Nombre entier 40
temperature Degré d'aléatoire introduit lors de la génération. Une température plus élevée rend le texte généré plus créatif, tandis qu'une température plus basse le rend plus prévisible. Float 0,8
randomSeed Source aléatoire utilisée lors de la génération de texte. Nombre entier 0
loraRanks Rangs LoRA à utiliser par les modèles LoRA lors de l'exécution. Remarque : Cette fonctionnalité n'est compatible qu'avec les modèles de GPU. Tableau d'entiers N/A

Conversion de modèles

L'API LLM Inference est compatible avec les types de modèles suivants, dont certains nécessitent une conversion. Utilisez le tableau pour identifier la méthode de procédure requise pour votre modèle.

Modèles Méthode de conversion Plates-formes compatibles Type de fichier
Gemma-3 1B Aucune conversion requise Android, Web .task
Gemma 2B, Gemma 7B, Gemma-2 2B Aucune conversion requise Android, iOS, Web .bin
Phi-2, StableLM, Falcon Script de conversion MediaPipe Android, iOS, Web .bin
Tous les modèles LLM PyTorch Bibliothèque de génération AI Edge Torch Android, iOS .task

Pour savoir comment convertir d'autres modèles, consultez la section Conversion de modèles.

Personnalisation LoRA

L'API LLM Inference est compatible avec le réglage LoRA (Low-Rank Adaptation) à l'aide de la bibliothèque PEFT (Parameter-Efficient Fine-Tuning). Le réglage LoRA personnalise le comportement des LLM grâce à un processus d'entraînement économique. Il crée un petit ensemble de pondérations entraînables basées sur de nouvelles données d'entraînement au lieu de réentraîner l'intégralité du modèle.

L'API LLM Inference permet d'ajouter des pondérations LoRA aux couches d'attention des modèles Gemma-2 2B, Gemma 2B et Phi-2. Téléchargez le modèle au format safetensors.

Le modèle de base doit être au format safetensors pour que vous puissiez créer des pondérations LoRA. Après l'entraînement LoRA, vous pouvez convertir les modèles au format FlatBuffers pour les exécuter sur MediaPipe.

Préparer les pondérations LoRA

Utilisez le guide Méthodes LoRA de PEFT pour entraîner un modèle LoRA affiné sur votre propre ensemble de données.

L'API LLM Inference n'est compatible qu'avec LoRA sur les couches d'attention. Par conséquent, ne spécifiez que les couches d'attention dans 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"],
)

Après l'entraînement sur l'ensemble de données préparé et l'enregistrement du modèle, les pondérations du modèle LoRA affiné sont disponibles dans adapter_model.safetensors. Le fichier safetensors est le point de contrôle LoRA utilisé lors de la conversion du modèle.

Conversion de modèles

Utilisez le package Python MediaPipe pour convertir les pondérations du modèle au format Flatbuffer. ConversionConfig spécifie les options du modèle de base ainsi que les options LoRA supplémentaires.

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)

Le convertisseur génère deux fichiers compatibles avec MediaPipe, l'un pour le modèle de base et l'autre pour le modèle LoRA.

Inférence du modèle LoRA

Le Web est compatible avec les LoRA dynamiques lors de l'exécution, ce qui signifie que les utilisateurs déclarent les rangs LoRA lors de l'initialisation. Cela signifie que vous pouvez remplacer différents modèles LoRA lors de l'exécution.

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

Chargez les modèles LoRA lors de l'exécution, après avoir initialisé le modèle de base. Déclenchez le modèle LoRA en transmettant la référence du modèle lors de la génération de la réponse du LLM.

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