Presentamos Google AI Edge Portal: Compara la IA de Edge a gran escala. Regístrate para solicitar acceso durante la vista previa privada.

Guía de inferencia de LLM para la Web

La API de inferencia de LLM te permite ejecutar modelos grandes de lenguaje (LLM) por completo en el dispositivo para aplicaciones web, que puedes usar para realizar una amplia variedad de tareas, como generar texto, recuperar información en forma de lenguaje natural y resumir documentos. La tarea proporciona compatibilidad integrada para varios modelos grandes de lenguaje de texto a texto, por lo que puedes aplicar los modelos de IA generativa más recientes en el dispositivo a tus apps web. Si usas los modelos Gemma-3n más recientes, también se admiten las entradas de imagen y audio.

Para agregar rápidamente la API de inferencia de LLM a tu aplicación web, sigue la Guía de inicio rápido. Para obtener un ejemplo básico de una aplicación web que ejecuta la API de inferencia de LLM, consulta la aplicación de ejemplo. Para comprender mejor cómo funciona la API de inferencia de LLM, consulta las secciones de opciones de configuración, conversión de modelos y ajuste de LoRA.

Puedes ver esta tarea en acción con la demostración de MediaPipe Studio. Para obtener más información sobre las capacidades, los modelos y las opciones de configuración de esta tarea, consulta la Descripción general.

Guía de inicio rápido

Sigue los pasos que se indican a continuación para agregar la API de inferencia de LLM a tu aplicación web. La API de inferencia de LLM requiere un navegador web con compatibilidad con WebGPU. Para obtener una lista completa de los navegadores compatibles, consulta Compatibilidad del navegador con GPU.

Cómo agregar dependencias

La API de inferencia de LLM usa el @mediapipe/tasks-genai paquete.

Instala los paquetes necesarios para la etapa de pruebas local:

npm install @mediapipe/tasks-genai

Para realizar la implementación en un servidor, usa un servicio de red de distribución de contenidos (CDN) como jsDelivr para agregar código directamente a tu página HTML:

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

Descarga un modelo

Descarga Gemma-3n E4B o E2B de HuggingFace. Los modelos con "-Web" en el nombre se convierten específicamente para el uso web, por lo que se recomienda usar siempre uno de ellos.

Para obtener más información sobre los modelos disponibles, consulta la documentación de Modelos, o explora nuestra página de la comunidad de HuggingFace, que ofrece los modelos Gemma 4 E2B y E4B lanzados recientemente, así como varias variantes adicionales de Gemma 3 que no se incluyen en la documentación, pero que se convirtieron especialmente para la Web, como 270M, 4B, 12B, 27B y MedGemma-27B-Text.

Almacena el modelo en el directorio de tu proyecto:

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

Especifica la ruta de acceso del modelo con el parámetro modelAssetPath del objeto baseOptions:

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

Inicializa la tarea

Inicializa la tarea con opciones de configuración básicas:

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

Ejecuta la tarea

Usa la función generateResponse() para activar las inferencias.

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

Para transmitir la respuesta, usa lo siguiente:

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

Instrucciones multimodales

Para los modelos Gemma-3n, las APIs web de la API de inferencia de LLM admiten instrucciones multimodales. Con la multimodalidad habilitada, los usuarios pueden incluir una combinación ordenada de imágenes, audio y texto en sus instrucciones. Luego, el LLM proporciona una respuesta de texto.

Para comenzar, usa Gemma-3n E4B o Gemma-3n E2B, en formato compatible con MediaPipe y la Web. Para obtener más información, consulta la documentación de Gemma-3n.

Para habilitar la compatibilidad con la visión, asegúrate de que maxNumImages esté configurado en un valor positivo. Esto determina la cantidad máxima de fragmentos de imagen que el LLM puede procesar en una sola instrucción.

Para habilitar la compatibilidad con el audio, asegúrate de que supportAudio esté configurado como 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,
});

Ahora, las respuestas se pueden generar como antes, pero con un array ordenado de cadenas, imágenes y datos de 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',
]);

En el caso de la visión, se admiten las URLs de imágenes y los objetos de imagen, video o lienzo más comunes. En el caso del audio, solo se admiten las URLs de AudioBuffer de un solo canal y los archivos de audio de un solo canal. Para obtener más detalles, explora el código fuente.

Aplicación de ejemplo

La aplicación de ejemplo es un ejemplo de una app básica de generación de texto para la Web que usa la API de inferencia de LLM. Puedes usar la app como punto de partida para tu propia app web o consultarla cuando modifiques una app existente. El código de ejemplo está alojado en GitHub.

Clona el repositorio de Git con el siguiente comando:

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

Para obtener más información, consulta la Guía de configuración para Web.

Opciones de configuración

Usa las siguientes opciones de configuración para configurar una app web:

Nombre de la opción	Descripción	Rango de valores	Valor predeterminado
`modelPath`	Es la ruta de acceso a la ubicación en la que se almacena el modelo dentro del directorio del proyecto.	RUTA DE ACCESO	N/A
`maxTokens`	Es la cantidad máxima de tokens (tokens de entrada + tokens de salida) que controla el modelo.	Número entero	512
`topK`	Es la cantidad de tokens que el modelo considera en cada paso de la generación. Limita las predicciones a los k tokens más probables.	Número entero	40
`temperature`	Es la cantidad de aleatoriedad que se introduce durante la generación. Una temperatura más alta genera más creatividad en el texto generado, mientras que una temperatura más baja produce una generación más predecible.	Número de punto flotante	0.8
`randomSeed`	Es la semilla aleatoria que se usa durante la generación de texto.	Número entero	0
`loraRanks`	Son las clasificaciones de LoRA que usarán los modelos de LoRA durante el tiempo de ejecución. Nota: Esto solo es compatible con los modelos de GPU.	Array de números enteros	N/A

Conversión de modelos

La API de inferencia de LLM es compatible con los siguientes tipos de modelos, algunos de los cuales requieren la conversión de modelos. Usa la tabla para identificar el método de pasos requerido para tu modelo.

Modelos	Método de conversión	Plataformas compatibles	Tipo de archivo
Gemma-3 1B	No se requiere conversión	Android, Web	.task
Gemma 2B, Gemma 7B, Gemma-2 2B	No se requiere conversión	Android, iOS, Web	.bin
Phi-2, StableLM, Falcon	Secuencia de comandos de conversión de MediaPipe	Android, iOS, Web	.bin
Todos los modelos de LLM de PyTorch	Biblioteca generativa de LiteRT Torch	Android, iOS	.task

Para obtener información sobre cómo convertir otros modelos, consulta la sección Conversión de modelos.

Personalización de LoRA

La API de inferencia de LLM admite el ajuste de LoRA (adaptación de clasificación baja) con la PEFT (ajuste eficiente de parámetros). El ajuste de LoRA personaliza el comportamiento de los LLM a través de un proceso de entrenamiento rentable, que crea un pequeño conjunto de pesos entrenables basados en datos de entrenamiento nuevos en lugar de volver a entrenar todo el modelo.

La API de inferencia de LLM admite la adición de pesos de LoRA a las capas de atención de los Gemma-2 2B, Gemma 2B y Phi-2 modelos. Descarga el modelo en formato safetensors.

El modelo base debe estar en formato safetensors para crear pesos de LoRA. Después del entrenamiento de LoRA, puedes convertir los modelos al formato FlatBuffers para ejecutarlos en MediaPipe.

Prepara los pesos de LoRA

Usa la guía de métodos de LoRA Methods de PEFT para entrenar un modelo de LoRA ajustado en tu propio conjunto de datos.

La API de inferencia de LLM solo admite LoRA en capas de atención, por lo que solo debes especificar las capas de atención en 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"],
)

Después del entrenamiento en el conjunto de datos preparado y de guardar el modelo, los pesos del modelo de LoRA ajustado están disponibles en adapter_model.safetensors. El archivo safetensors es el punto de control de LoRA que se usa durante la conversión del modelo.

Conversión de modelos

Usa el paquete de Python de MediaPipe para convertir los pesos del modelo al formato Flatbuffer. ConversionConfig especifica las opciones del modelo base junto con las opciones adicionales de LoRA.

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)

El convertidor producirá dos archivos compatibles con MediaPipe, uno para el modelo base y otro para el modelo de LoRA.

Inferencia de modelos de LoRA

La Web admite LoRA dinámico durante el tiempo de ejecución, lo que significa que los usuarios declaran las clasificaciones de LoRA durante la inicialización. Esto significa que puedes intercambiar diferentes modelos de LoRA durante el tiempo de ejecución.

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

Carga los modelos de LoRA durante el tiempo de ejecución, después de inicializar el modelo base. Activa el modelo de LoRA pasando la referencia del modelo cuando generes la respuesta de 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;
});