Crea experiencias híbridas en apps web con modelos alojados en el dispositivo y en la nube

Compila apps y funciones web potenciadas por IA con inferencia híbrida usando Firebase AI Logic. La inferencia híbrida permite ejecutar la inferencia con modelos en el dispositivo cuando están disponibles y, de lo contrario, recurrir sin problemas a los modelos alojados en la nube (y viceversa).

En esta página, se describe cómo comenzar a usar el SDK de cliente. Después de completar esta configuración estándar setup, consulta las opciones y capacidades de configuración adicionales (como el resultado estructurado).

Ten en cuenta que la inferencia en el dispositivo es compatible con apps web que se ejecutan en Chrome en computadoras de escritorio.

Ir a los ejemplos de código

Casos de uso recomendados y capacidades compatibles

Casos de uso recomendados:

• El uso de un modelo en el dispositivo para la inferencia ofrece lo siguiente:

  • Mejora la privacidad
  • Contexto local
  • Inferencia sin costo
  • Funcionalidad sin conexión

• El uso de la funcionalidad híbrida ofrece lo siguiente:

  • Llega al 100% de tu público, independientemente de la disponibilidad del modelo en el dispositivo o la conectividad a Internet.

Funciones y capacidades compatibles para la inferencia en el dispositivo:

La inferencia en el dispositivo solo admite la generación de texto de un solo turno (no chat), con salida de transmisión o sin transmisión. Admite las siguientes capacidades de generación de texto:

• Generar texto a partir de entradas de solo texto

• Generar texto a partir de entradas de texto e imagen, específicamente tipos de imágenes de entrada de JPEG y PNG

También puedes generar resultados estructurados, incluidos JSON y enums.

Antes de comenzar

Observa lo siguiente:

• La inferencia con un modelo en el dispositivo usa la API de Prompt de Chrome; mientras que la inferencia con un modelo alojado en la nube usa el proveedor Gemini API que elijas (ya sea Gemini Developer API o la Vertex AI Gemini API).

• En esta página, se describe cómo comenzar a desarrollar con localhost (obtén más información sobre el uso de APIs en localhost en la documentación de Chrome).

  Después de completar esta configuración estándar, consulta las opciones y capacidades de configuración adicionales (como el resultado estructurado).

• Después de implementar tu función, puedes permitir que los usuarios finales la prueben en tu app real.

Comienza en localhost

En estos pasos para comenzar, se describe la configuración general requerida para cualquier solicitud de instrucción compatible que desees enviar.

Paso 1: Configura Chrome y la API de Prompt para la inferencia en el dispositivo

1. Asegúrate de usar una versión reciente de Chrome. Actualiza en chrome://settings/help.
   La inferencia en el dispositivo está disponible a partir de Chrome v139 y versiones posteriores.

2. Para habilitar el modelo multimodal en el dispositivo, configura la siguiente marca en Habilitado:

   • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input

3. Reinicia Chrome.

4. (Opcional) Descarga el modelo en el dispositivo antes de la primera solicitud.

   La API de Prompt está integrada en Chrome; sin embargo, el modelo en el dispositivo no está disponible de forma predeterminada. Si aún no descargaste el modelo antes de tu primera solicitud de inferencia en el dispositivo, la solicitud iniciará automáticamente la descarga del modelo en segundo plano.

   Ver instrucciones para descargar el modelo en el dispositivo

   1. Abre Herramientas para desarrolladores > Consola.

   2. Ejecuta lo siguiente:

      await LanguageModel.availability();
      

   3. Asegúrate de que el resultado sea available, downloading o downloadable.

   4. Si el resultado es downloadable, ejecuta lo siguiente para iniciar la descarga del modelo:

      await LanguageModel.create();
      

   5. Puedes usar la siguiente devolución de llamada monitor para escuchar el progreso de la descarga y asegurarte de que el modelo esté available antes de realizar solicitudes:

      const session = await LanguageModel.create({
        monitor(m) {
          m.addEventListener("downloadprogress", (e) => {
            console.log(`Downloaded ${e.loaded * 100}%`);
          });
        },
      });
      

Paso 2: Configura un proyecto de Firebase y conecta tu app a Firebase

1. Accede a la consola de Firebase, y selecciona tu proyecto de Firebase.

   ¿Aún no tienes un proyecto de Firebase?

   Si aún no tienes un proyecto de Firebase, haz clic en el botón para crear uno nuevo y, luego, usa una de las siguientes opciones:

   • Opción 1: Crea un proyecto de Firebase completamente nuevo (y su proyecto subyacente Google Cloud automáticamente) ingresando un nuevo nombre de proyecto en el primer paso del flujo de trabajo.

   • Opción 2: Haz clic en Agregar Firebase al proyecto de Google Cloud (en la parte inferior de la página) para "agregar Firebase" a un proyecto existente de Google Cloud project by . En el primer paso del flujo de trabajo, comienza a ingresar el nombre del proyecto existente y, luego, selecciónalo en la lista que aparece.

   Completa los pasos restantes del flujo de trabajo en pantalla para crear un proyecto de Firebase. Ten en cuenta que, cuando se te solicite, no es necesario que configures Google Analytics para usar los Firebase AI Logic SDKs.

2. En Firebase console, ve a la página Firebase AI Logic.

3. Haz clic en Comenzar para iniciar un flujo de trabajo guiado que te ayudará a configurar las APIs necesarias y los recursos para tu proyecto.

4. Configura tu proyecto para usar un proveedor de "Gemini API".

   Te recomendamos que comiences a usar Gemini Developer API. En cualquier momento, puedes configurar la Vertex AI Gemini API (y su requisito de facturación).

   En el caso de la Gemini Developer API, la consola habilitará las APIs requeridas y creará una clave de API Gemini en tu proyecto.
   No agregues esta clave de API Gemini a la base de código de tu app. Obtén más información.

5. Si se te solicita en el flujo de trabajo de la consola, sigue las instrucciones en pantalla para registrar tu app y conectarla a Firebase.

6. Continúa con el siguiente paso de esta guía para agregar el SDK a tu app.

Paso 3: Agrega el SDK

La biblioteca de Firebase proporciona acceso a las APIs para interactuar con modelos generativos. La biblioteca se incluye como parte del SDK de Firebase JavaScript para la Web.

1. Instala el SDK de Firebase JS para la Web con npm:

   npm install firebase
   

2. Inicializa Firebase en tu app:

   import { initializeApp } from "firebase/app";
   
   // TODO(developer) Replace the following with your app's Firebase configuration
   // See: https://firebase.google.com/docs/web/learn-more#config-object
   const firebaseConfig = {
     // ...
   };
   
   // Initialize FirebaseApp
   const firebaseApp = initializeApp(firebaseConfig);
   

Paso 4: Inicializa el servicio y crea una instancia del modelo

Configura lo siguiente antes de enviar una solicitud de instrucción al modelo.

1. Inicializa el servicio para el proveedor de la API que elegiste.

2. Crea una instancia de GenerativeModel. Asegúrate de hacer lo siguiente:

   1. Llama a getGenerativeModel después de una interacción del usuario final o en ella (como un clic en un botón). Este es un requisito previo para inferenceMode.

   2. Configura el mode en uno de los siguientes valores:

      • PREFER_ON_DEVICE: Usa el modelo en el dispositivo si está disponible; de lo contrario, recurre al modelo alojado en la nube.

      • ONLY_ON_DEVICE: Usa el modelo en el dispositivo si está disponible; de lo contrario, genera una excepción.

      • PREFER_IN_CLOUD: Usa el modelo alojado en la nube si está disponible; de lo contrario, recurre al modelo en el dispositivo.

      • ONLY_IN_CLOUD: Usa el modelo alojado en la nube si está disponible; de lo contrario, genera una excepción.

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);

// Initialize the Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Call `getGenerativeModel` after or on an end-user interaction
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

Paso 5: Envía una solicitud de instrucción a un modelo

En esta sección, se muestra cómo enviar varios tipos de entrada para generar diferentes tipos de salida, incluidos los siguientes:

• Genera texto a partir de entradas de solo texto.
• Genera texto a partir de entradas de texto e imagen (multimodales).

Si deseas generar resultados estructurados (como JSON o enums), entonces usa uno de los siguientes ejemplos de "generar texto" y, además, configura el modelo para que responda según un esquema proporcionado.

Genera texto a partir de entradas de solo texto

Puedes usar generateContent() para generar texto a partir de una instrucción que contenga texto:

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Wrap in an async function so you can use await
async function run() {
  // Provide a prompt that contains text
  const prompt = "Write a story about a magic backpack."

  // To generate text output, call `generateContent` with the text input
  const result = await model.generateContent(prompt);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

Ten en cuenta que Firebase AI Logic también admite la transmisión de respuestas de texto con generateContentStream (en lugar de generateContent).

Genera texto a partir de entradas de texto e imagen (multimodales)

Puedes usar generateContent() para generar texto a partir de una instrucción que contenga archivos de texto e imagen, proporcionando el archivo de entrada mimeType y el archivo en sí.

Los tipos de imágenes de entrada admitidos para la inferencia en el dispositivo son PNG y JPEG.

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Converts a File object to a Part object.
async function fileToGenerativePart(file) {
  const base64EncodedDataPromise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
  return {
    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
  };
}

async function run() {
  // Provide a text prompt to include with the image
  const prompt = "Write a poem about this picture:";

  const fileInputEl = document.querySelector("input[type=file]");
  const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

  // To generate text output, call `generateContent` with the text and image
  const result = await model.generateContent([prompt, imagePart]);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

Ten en cuenta que Firebase AI Logic también admite la transmisión de respuestas de texto con generateContentStream (en lugar de generateContent).

Permite que los usuarios finales prueben tu función

Para que los usuarios finales prueben tu función en tu app, debes inscribirte en las pruebas de origen de Chrome. Ten en cuenta que estas pruebas tienen una duración y un uso limitados.

1. Regístrate en la prueba de origen de Chrome de la API de Prompt. Recibirás un token.

2. Proporciona el token en cada página web para la que deseas habilitar la función de prueba. Usa una de las siguientes opciones:

   • Proporciona el token como una metaetiqueta en la <head> etiqueta: <meta http-equiv="origin-trial" content="TOKEN">

   • Proporciona el token como un encabezado HTTP: Origin-Trial: TOKEN

   • Proporciona el token de forma programática.

¿Qué más puedes hacer?

Puedes usar varias opciones y capacidades de configuración adicionales para tus experiencias híbridas:

• Establece un modo de inferencia.

• Anula el modelo de respaldo predeterminado alojado en la nube.

• Usa la configuración del modelo para controlar las respuestas (como la temperatura).

• Genera resultados estructurados (como JSON).

Funciones aún no disponibles para la inferencia en el dispositivo

Como versión preliminar, no todas las capacidades del SDK web están disponibles para la inferencia en el dispositivo. Las siguientes funciones aún no son compatibles con la inferencia en el dispositivo (pero suelen estar disponibles para la inferencia basada en la nube).

• Generar texto a partir de tipos de entrada de archivos de imagen que no sean JPEG y PNG

  • Puede recurrir al modelo alojado en la nube; sin embargo, el modo ONLY_ON_DEVICE generará un error.

• Generar texto a partir de entradas de audio, video y documentos (como PDFs)

  • Puede recurrir al modelo alojado en la nube; sin embargo, el modo ONLY_ON_DEVICE generará un error.

• Generar imágenes con modelos de Gemini o Imagen

  • Puede recurrir al modelo alojado en la nube; sin embargo, el modo ONLY_ON_DEVICE generará un error.

• Proporcionar archivos con URLs en solicitudes multimodales. Debes proporcionar archivos como datos intercalados a los modelos en el dispositivo.

• Chat de varios turnos

  • Puede recurrir al modelo alojado en la nube; sin embargo, el modo ONLY_ON_DEVICE generará un error.

• Transmisión bidireccional con la Gemini Live API

• Proporcionar al modelo herramientas para ayudarlo a generar su respuesta (como llamadas a funciones, ejecución de código, contexto de URL y grounding con la Búsqueda de Google)

• Cuenta tokens

  • Siempre genera un error. El recuento diferirá entre los modelos alojados en la nube y los modelos en el dispositivo, por lo que no hay una alternativa intuitiva.

• Supervisión de IA en la Firebase console para la inferencia en el dispositivo

  • Ten en cuenta que cualquier inferencia que use los modelos alojados en la nube se puede supervisar al igual que otras inferencias con el Firebase AI Logic SDK de cliente para la Web.

Envía comentarios sobre tu experiencia con Firebase AI Logic