Guide d'inférence LLM pour le Web

L'API d'inférence LLM 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, telles que la génération de texte, la récupération d'informations en langage naturel et la synthèse de documents. La tâche fournit 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 d'image et audio sont également compatibles.

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

Vous pouvez voir cette tâche en action avec la démo 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 d'inférence LLM à votre application Web. L'API d'inférence LLM nécessite un navigateur Web compatible avec WebGPU. Pour obtenir la liste complète des navigateurs compatibles, consultez la section Compatibilité des navigateurs avec les GPU.

Ajouter des dépendances

L'API d'inférence LLM utilise le @mediapipe/tasks-genai package.

Installez les packages requis pour la préparation locale :

npm install @mediapipe/tasks-genai

Pour effectuer un déploiement sur un serveur, utilisez un service de réseau de diffusion de contenu (CDN) 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é HuggingFace, qui propose les nouvelles versions Gemma 4 E2B et E4B, ainsi que plusieurs variantes supplémentaires de Gemma 3 non couvertes dans la documentation, mais qui ont toutes é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 au 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, procédez comme suit :

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

Prompting multimodal

Pour les modèles Gemma-3n, les API Web de l'API d'inférence LLM sont compatibles avec le prompting multimodal. Lorsque la multimodalité est activée, les utilisateurs peuvent inclure une combinaison ordonnée d'images, d'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 compatibilité avec 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 compatibilité 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 à l'aide d'un tableau ordonné de chaînes, d'images et de données audio :

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

Pour la vision, les URL d'image et les objets d'image, de vidéo ou de canevas les plus courants sont compatibles. Pour l'audio, seules les URL de fichiers audio monocanal et AudioBuffer monocanal sont compatibles. Pour en savoir plus, parcourez le code source.

Exemple d'application

L'exemple d'application est un exemple d'application de génération de texte de base pour le Web, à l'aide de l'API d'inférence LLM. 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) gérés par le modèle. 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 Quantité d'aléatoire introduite lors de la génération. Une température plus élevée génère un texte plus créatif, tandis qu'une température plus basse produit une génération plus prévisible. Float 0,8
randomSeed Graine 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 option n'est compatible qu'avec les modèles GPU. Tableau d'entiers N/A

Conversion de modèles

L'API d'inférence LLM est compatible avec les types de modèles suivants, dont certains nécessitent une conversion. Utilisez le tableau pour identifier la méthode 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 générative LiteRT Torch Android, iOS .task

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

Personnalisation LoRA

L'API d'inférence LLM est compatible avec le réglage LoRA (Low-Rank Adaptation) à l'aide de la PEFT (Parameter-Efficient Fine-Tuning). Le réglage LoRA personnalise le comportement des LLM grâce à un processus d'entraînement économique, en créant un petit ensemble de pondérations entraînables basées sur de nouvelles données d'entraînement plutôt que de réentraîner l'ensemble du modèle.

L'API d'inférence LLM 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 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 LoRA Methods guide de PEFT pour entraîner un modèle LoRA affiné sur votre propre ensemble de données.

L'API d'inférence LLM n'est compatible avec LoRA que sur les couches d'attention. Ne spécifiez donc 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, un pour le modèle de base et un autre pour le modèle LoRA.

Inférence du modèle LoRA

Le Web est compatible avec LoRA dynamique lors de l'exécution, ce qui signifie que les utilisateurs déclarent les rangs LoRA lors de l'initialisation. Vous pouvez donc 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 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;
});