Créer des expériences hybrides dans les applications Web avec des modèles hébergés sur l'appareil et dans le cloud

Créez des applications et des fonctionnalités Web optimisées par l'IA avec l'inférence hybride à l'aide de Firebase AI Logic. L'inférence hybride permet d'exécuter l'inférence à l'aide de modèles sur l'appareil lorsqu'ils sont disponibles et de revenir de manière transparente aux modèles hébergés dans le cloud dans le cas contraire (et vice versa).

Cette page explique comment commencer à utiliser le SDK client. Une fois cette configuration standard terminée, consultez les options et fonctionnalités de configuration supplémentaires (comme la sortie structurée).

Notez que l'inférence sur l'appareil est compatible avec les applications Web exécutées sur Chrome sur ordinateur.

Accéder aux exemples de code

Cas d'utilisation recommandés et fonctionnalités compatibles

Cas d'utilisation recommandés :

• L'utilisation d'un modèle sur l'appareil pour l'inférence offre les avantages suivants :

  • Amélioration de la confidentialité
  • Contexte local
  • Inférence sans frais
  • Fonctionnalités hors connexion

• L'utilisation de la fonctionnalité hybride offre les avantages suivants :

  • Touchez 100% de votre audience, quelle que soit la disponibilité du modèle sur l'appareil ou la connectivité Internet.

Fonctionnalités compatibles avec l'inférence sur l'appareil :

L'inférence sur l'appareil n'est compatible qu'avec la génération de texte en un seul tour (pas le chat), avec une sortie en streaming ou non. Elle est compatible avec les fonctionnalités de génération de texte suivantes :

• Génération de texte à partir d'une entrée de texte uniquement

• Génération de texte à partir d'une entrée de texte et d'image, en particulier les types d'images d'entrée JPEG et PNG

Vous pouvez également générer une sortie structurée, y compris JSON et des énumérations.

Avant de commencer

Veuillez noter les points suivants :

• L'inférence à l'aide d'un modèle sur l'appareil utilise l' API Prompt de Chrome ; tandis que l'inférence à l'aide d'un modèle hébergé dans le cloud utilise le Gemini API fournisseur de votre choix (l'Gemini Developer API ou l' Vertex AI Gemini API).

• Cette page explique comment commencer à développer à l'aide de localhost (en savoir plus sur l'utilisation des API sur localhost dans la documentation Chrome).

  Une fois cette configuration standard terminée, consultez les options et fonctionnalités de configuration supplémentaires (comme la sortie structurée).

• Une fois votre fonctionnalité implémentée, vous pouvez permettre aux utilisateurs finaux de l'essayer dans votre application.

Premiers pas sur localhost

Ces étapes de démarrage décrivent la configuration générale requise pour toute requête de prompt compatible que vous souhaitez envoyer.

Étape 1 : Configurez Chrome et l'API Prompt pour l'inférence sur l'appareil

1. Assurez-vous d'utiliser une version récente de Chrome. Mettez à jour dans chrome://settings/help.
   L'inférence sur l'appareil est disponible à partir de Chrome 139 et versions ultérieures.

2. Activez le modèle multimodal sur l'appareil en définissant l'indicateur suivant sur Activé:

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

3. Relancez Chrome.

4. (Facultatif) Téléchargez le modèle sur l'appareil avant la première requête.

   L'API Prompt est intégrée à Chrome. Toutefois, le modèle sur l'appareil n'est pas disponible par défaut. Si vous n'avez pas encore téléchargé le modèle avant votre première requête d'inférence sur l'appareil, la requête lancera automatiquement le téléchargement du modèle en arrière-plan.

   Afficher les instructions pour télécharger le modèle sur l'appareil

   1. Ouvrez Outils pour les développeurs > Console.

   2. Exécutez la commande suivante :

      await LanguageModel.availability();
      

   3. Assurez-vous que la sortie est available, downloading ou downloadable.

   4. Si la sortie est downloadable, lancez le téléchargement du modèle en exécutant la commande suivante :

      await LanguageModel.create();
      

   5. Vous pouvez utiliser le rappel monitor suivant pour écouter la progression du téléchargement et vous assurer que le modèle est available avant d'effectuer des requêtes :

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

Étape 2 : Configurez un projet Firebase et associez votre application à Firebase

1. Connectez-vous à la Firebase console, puis sélectionnez votre projet Firebase.

   Vous n'avez pas encore de projet Firebase ?

   Si vous n'avez pas encore de projet Firebase, cliquez sur le bouton pour en créer un, puis utilisez l'une des options suivantes :

   • Option 1 : Créez un projet Firebase entièrement nouveau (et son projet sous-jacent Google Cloud automatiquement) en saisissant un nouveau nom de projet à la première étape du workflow.

   • Option 2 : Ajoutez Firebase à un projet Google Cloud existant en cliquant sur Ajouter Firebase au projet Google Cloud (en bas de la page). À la première étape du workflow, commencez à saisir le nom du projet existant, puis sélectionnez-le dans la liste affichée.

   Suivez les étapes restantes du workflow à l'écran pour créer un projet Firebase. Notez que lorsque vous y êtes invité, vous n'avez pas besoin de configurer Google Analytics pour utiliser les Firebase AI Logic SDK.

2. Dans la console Firebase, accédez à Services d'IA > AI Logic.

3. Cliquez sur Premiers pas pour lancer un workflow guidé qui vous aidera à configurer les API requises et les ressources pour votre projet.

4. Configurez votre projet pour utiliser un fournisseur "Gemini API".

   Nous vous recommandons de commencer à utiliser le Gemini Developer API. Vous pouvez toujours configurer l'Vertex AI Gemini API (et son exigence de facturation) à tout moment.

   Pour le Gemini Developer API, la console activera les API requises et créera une clé API Gemini dans votre projet.
   N'ajoutez pas cette clé API Gemini dans la base de code de votre application. En savoir plus

5. Si vous y êtes invité dans le workflow de la console, suivez les instructions à l'écran pour enregistrer votre application et l'associer à Firebase.

6. Passez à l'étape suivante de ce guide pour ajouter le SDK à votre application.

Étape 3 : Ajoutez le SDK

La bibliothèque Firebase permet d'accéder aux API pour interagir avec les modèles génératifs. La bibliothèque est incluse dans le SDK JavaScript Firebase pour le Web.

1. Installez le SDK Firebase JS pour le Web à l'aide de npm :

   npm install firebase
   

2. Initialisez Firebase dans votre application :

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

Étape 4 : Initialisez le service et créez une instance de modèle

Configurez les éléments suivants avant d'envoyer une requête de prompt au modèle.

1. Initialisez le service pour le fournisseur d'API de votre choix.

2. Créez une instance GenerativeModel. Assurez-vous de procéder comme suit :

   1. Appelez getGenerativeModel après ou lors d'une interaction de l'utilisateur final (par exemple, un clic sur un bouton). Il s'agit d'un prérequis pour inferenceMode.

   2. Définissez mode sur l'une des valeurs suivantes :

      • PREFER_ON_DEVICE: utilisez le modèle sur l'appareil s'il est disponible. Sinon, revenez au modèle hébergé dans le cloud.

      • ONLY_ON_DEVICE: utilisez le modèle sur l'appareil s'il est disponible. Sinon, générez une exception.

      • PREFER_IN_CLOUD: utilisez le modèle hébergé dans le cloud s'il est disponible. Sinon, revenez au modèle sur l'appareil.

      • ONLY_IN_CLOUD: utilisez le modèle hébergé dans le cloud s'il est disponible. Sinon, générez une exception.

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

Étape 5 : Envoyez une requête de prompt à un modèle

Cette section vous explique comment envoyer différents types d'entrées pour générer différents types de sorties, y compris :

• Génération de texte à partir d'une entrée de texte uniquement
• Génération de texte à partir d'une entrée de texte et d'image (multimodale)

Si vous souhaitez générer une sortie structurée (comme JSON ou des énumérations), alors utilisez l'un des exemples de "génération de texte" suivants et configurez également le modèle pour qu'il réponde en fonction d'un schéma fourni.

Génération de texte à partir d'une entrée de texte uniquement

Vous pouvez utiliser generateContent() pour générer du texte à partir d'un prompt contenant du texte :

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

Notez que Firebase AI Logic est également compatible avec le streaming des réponses textuelles à l'aide de generateContentStream (au lieu de generateContent).

Génération de texte à partir d'une entrée de texte et d'image (multimodale)

Vous pouvez utiliser generateContent() pour générer du texte à partir d'un prompt contenant du texte et des fichiers image, en fournissant le fichier d'entréemimeType et le fichier lui-même.

Les types d'images d'entrée compatibles pour l'inférence sur l'appareil sont PNG et 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();

Notez que Firebase AI Logic est également compatible avec le streaming des réponses textuelles à l'aide de generateContentStream (au lieu de generateContent).

Permettre aux utilisateurs finaux d'essayer votre fonctionnalité

Pour que les utilisateurs finaux puissent essayer votre fonctionnalité dans votre application, vous devez vous inscrire aux phases d'évaluation Chrome. Notez que ces essais sont limités en durée et en utilisation.

1. Inscrivez-vous à la phase d'évaluation Chrome de l'API Prompt . Vous recevrez un jeton.

2. Fournissez le jeton sur chaque page Web pour laquelle vous souhaitez activer la fonctionnalité d'évaluation. Utilisez l'une des options suivantes :

   • Fournissez le jeton en tant que balise Meta dans la balise <head> : <meta http-equiv="origin-trial" content="TOKEN">

   • Fournissez le jeton en tant qu'en-tête HTTP: Origin-Trial: TOKEN

   • Fournissez le jeton par programmation.

Qu'est-ce que tu sais faire d'autre ?

Vous pouvez utiliser différentes options et fonctionnalités de configuration supplémentaires pour vos expériences hybrides :

• Définir un mode d'inférence

• Remplacer le modèle de remplacement par défaut hébergé dans le cloud

• Utiliser la configuration du modèle pour contrôler les réponses (comme la température)

• Générer une sortie structurée (comme JSON)

Fonctionnalités pas encore disponibles pour l'inférence sur l'appareil

En tant que version preview, toutes les fonctionnalités du SDK Web ne sont pas disponibles pour l'inférence sur l'appareil. Les fonctionnalités suivantes ne sont pas encore compatibles avec l'inférence sur l'appareil (mais elles sont généralement disponibles pour l'inférence basée sur le cloud).

• Génération de texte à partir de types d'entrées de fichiers image autres que JPEG et PNG

  • Peut revenir au modèle hébergé dans le cloud. Toutefois, le mode ONLY_ON_DEVICE générera une erreur.

• Génération de texte à partir d'entrées audio, vidéo et de documents (comme des PDF)

  • Peut revenir au modèle hébergé dans le cloud. Toutefois, le mode ONLY_ON_DEVICE générera une erreur.

• Génération d'images à l'aide des modèles Gemini ou Imagen

  • Peut revenir au modèle hébergé dans le cloud. Toutefois, le mode ONLY_ON_DEVICE générera une erreur.

• Fourniture de fichiers à l'aide d'URL dans les requêtes multimodales. Vous devez fournir des fichiers en tant que données intégrées aux modèles sur l'appareil.

• Chat multitour

  • Peut revenir au modèle hébergé dans le cloud. Toutefois, le mode ONLY_ON_DEVICE générera une erreur.

• Streaming bidirectionnel avec le Gemini Live API

• Fourniture au modèle d'outils pour l'aider à générer sa réponse (comme l'appel de fonction, l'exécution de code, le contexte d'URL et l'ancrage avec Google Search)

• Compter les jetons

  • Génère toujours une erreur. Le nombre diffère entre les modèles hébergés dans le cloud et sur l'appareil. Il n'y a donc pas de remplacement intuitif.

• Surveillance de l'IA dans la Firebase console pour l'inférence sur l'appareil.

  • Notez que toute inférence utilisant les modèles hébergés dans le cloud peut être surveillée comme toute autre inférence à l'aide du Firebase AI Logic client SDK pour le Web.

Envoyer des commentaires sur votre expérience avec Firebase AI Logic