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 integrados en el dispositivo cuando están disponibles y recurrir sin problemas a modelos alojados en la nube en caso contrario (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, consulta las opciones de configuración y capacidades adicionales (como el resultado estructurado).

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

Ir a los ejemplos de código

Casos de uso recomendados y funciones compatibles

Casos de uso recomendados:

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

  • Privacidad mejorada
  • 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 integrado en el dispositivo o de la conectividad a Internet

Funciones y capacidades compatibles para la inferencia integrada en el dispositivo:

La inferencia integrada 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 una entrada 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 enumeraciones.

Antes de comenzar

Observa lo siguiente:

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

• En esta página, se describe cómo comenzar a desarrollar con localhost (obtén más información para usar 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).

Comienza a usar localhost

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

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

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

2. Para habilitar el modelo multimodal integrado en el dispositivo, establece el siguiente parámetro en Habilitado:

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

3. Reinicia Chrome.

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

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

   Consulta las instrucciones para descargar el modelo integrado 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, inicia la descarga del modelo ejecutando el siguiente comando:

      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, luego, 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 cualquiera de las siguientes opciones:

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

   • Opción 2: "Agrega Firebase" a un proyecto de Google Cloud existente haciendo clic en Agregar Firebase al proyecto de Google Cloud (en la parte inferior de la página). 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 SDK de Firebase AI Logic.

2. En la consola de Firebase, ve a Servicios de IA > Lógica de IA.

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

4. Si se te solicita, sigue las instrucciones en pantalla para registrar tu app y agregar la configuración de Firebase a la app.

5. Cuando se te solicite que elijas un "proveedor de la API de Gemini", te recomendamos que selecciones la API de Gemini Developer, que te permite comenzar rápidamente sin costo.

   En cualquier momento posterior, puedes configurar el Agent Platform Gemini API (formerly Vertex AI) (y su requisito de facturación).

6. Continúa en el flujo de trabajo para configurar las APIs requeridas y los servicios asociados para Firebase AI Logic.

   En esta etapa del flujo de trabajo, se aplica automáticamente Firebase App Check para AI Logic, que es un servicio fundamental para ayudar a proteger Gemini API cuando se accede directamente desde tu app. Como parte de los primeros pasos (consulta los pasos más adelante en esta guía), deberás configurar el proveedor de depuración de App Check para el desarrollo local cuando se aplique App Check.

7. Continúa con el siguiente paso de esta guía para agregar los SDKs necesarios 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";
   import { initializeAppCheck } from "firebase/app-check";
   
   // 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: Configura el proveedor de depuración de App Check para el desarrollo local

Como parte del flujo de trabajo de configuración guiada para AI Logic en la consola, se aplica automáticamente Firebase App Check para proteger el Gemini API. Para el desarrollo local, debes configurar el proveedor de depuración de App Check para omitir la certificación y, al mismo tiempo, mantener la aplicación de App Check.

A continuación, se explica cómo usar el proveedor de depuración mientras ejecutas la app desde localhost de forma interactiva (por ejemplo, durante el desarrollo local):

1. En la compilación de depuración, habilita el modo de depuración estableciendo self.FIREBASE_APPCHECK_DEBUG_TOKEN en true antes de inicializar App Check. Por ejemplo:

   self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   initializeAppCheck(firebaseApp, { /* App Check options */ });
   

2. Visita la app web de forma local y abre las herramientas para desarrolladores del navegador. En la consola de depuración, verás un token de depuración:

   AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
   You will need to safelist it in the Firebase console for it to work.
   

3. Registra tu token de depuración con App Check:

   1. En la consola de Firebase, ve a la pestaña Seguridad > Verificación de aplicaciones > Apps.

   2. Busca tu app, haz clic en el menú ampliado (more_vert) y, luego, selecciona Administrar tokens de depuración.

   3. Sigue las instrucciones en pantalla para registrar tu token de depuración.

Para obtener detalles sobre el proveedor de depuración (incluido cómo obtener un token de depuración nuevo), consulta la documentación oficial de App Check.

Paso 5: Inicializa el servicio y crea una instancia de 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. Crear una instancia de GenerativeModel. Asegúrate de establecer el mode en uno de los siguientes valores:

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

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

   • PREFER_IN_CLOUD: Utilice el modelo alojado en la nube si está disponible; de ​​lo contrario, recurra al modelo integrado en el dispositivo.

   • ONLY_IN_CLOUD: Usa el modelo alojado en la nube si está disponible; de lo contrario, arroja 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
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

Paso 6: Inicializa el modelo integrado en el dispositivo

Debes llamar a initializeDeviceModel() después de una interacción de página del usuario final o durante ella (como un clic en un botón) y antes de enviar una solicitud de instrucción al modelo. Obtén más información sobre el requisito de activación del usuario en la documentación de Chrome.

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
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

// `initializeDeviceModel` must be called:
// (1) after or on an end-user page interaction such as a button click
// and
// (2) before any queries to the model (such as `generateContent()`)
// You may want to `await` this promise if using `ONLY_ON_DEVICE` (see note below).
model.initializeDeviceModel((val) =>
  // Example: "Download progress: 72.62%""
  console.log(`Download progress: ${Math.round(val*10000) / 100}%`)
);

Paso 7: 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 una entrada de solo texto
• Genera texto a partir de una entrada de texto e imagen (multimodal)

Si quieres generar un resultado estructurado (como JSON o enumeraciones), 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 una entrada 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 y de imagen, proporcionando el mimeType de cada archivo de entrada y el archivo en sí.

Los tipos de imágenes de entrada admitidos para la inferencia integrada 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 {
    type: "inlineData",
    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).

¿Qué más puedes hacer?

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

• Establece un modo de inferencia

• Anula el modelo de resguardo predeterminado alojado en la nube

• Usa la configuración del modelo para controlar las respuestas

• Genera un resultado estructurado (como JSON)

Funciones que aún no están disponibles para la inferencia integrada en el dispositivo

No todas las funciones del SDK web están disponibles para la inferencia integrada en el dispositivo. Las siguientes funciones aún no son compatibles con la inferencia integrada 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 ni PNG

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

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

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

• Genera imágenes con los modelos de Gemini Nano Banana

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

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

• Chat de varios turnos

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

• Transmisión bidireccional con 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, fundamentación con Google Search y fundamentación con Google Maps)

• Cuenta tokens

  • Siempre arroja un error. El recuento diferirá entre los modelos alojados en la nube y los integrados en el dispositivo, por lo que no hay un resguardo intuitivo.

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

  • Ten en cuenta que cualquier inferencia que use los modelos alojados en la nube se puede supervisar como cualquier otra inferencia que use el SDK de cliente de Firebase AI Logic para la Web.

Envía comentarios sobre tu experiencia con Firebase AI Logic