Faites vos premiers pas avec l'API Gemini à l'aide des SDK Vertex AI pour Firebase


Ce guide explique comment effectuer des appels vers l'API Gemini directement à partir de votre application à l'aide du SDK Vertex AI pour Firebase.

Prérequis

Dans ce guide, nous partons du principe que vous savez utiliser JavaScript pour développer des applications Web. Ce guide est indépendant du framework.

  • Assurez-vous que votre environnement de développement et votre application Web répondent aux exigences suivantes:

    • (Facultatif) Node.js
    • Navigateur Web récent

  • (Facultatif) Découvrez l'application exemple.

    Télécharger l'application exemple

    Vous pouvez tester rapidement le SDK, consulter une implémentation complète de divers cas d'utilisation ou utiliser l'application exemple si vous ne disposez pas de votre propre application Web. Pour l'utiliser, vous devez l'associer à un projet Firebase.

Étape 1: Configurez un projet Firebase et connectez votre application à Firebase

Si vous avez déjà un projet et une application associés à Firebase

  1. Dans la console Firebase, accédez à la page Build with Gemini (Compiler avec Gemini), puis cliquez sur la deuxième fiche pour lancer un workflow qui vous aide à effectuer les tâches suivantes. Si la mise en page en cartes ne s'affiche pas, cela signifie que ces tâches sont terminées.

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

Si vous n'avez pas encore de projet Firebase et d'application connectée à Firebase

Étape 2: Ajouter le SDK

Une fois votre projet Firebase configuré et votre application connectée à Firebase (voir l'étape précédente), vous pouvez y ajouter le SDK Vertex AI pour Firebase.

Le SDK Vertex AI pour le Web permet d'accéder à l'API Gemini.

  1. Installez la version preview privée du SDK à l'aide de npm:

    npm install firebase@vertexai-preview

  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 3: Initialiser le service Vertex AI et le modèle génératif

Avant de pouvoir effectuer des appels d'API, vous devez initialiser le service Vertex AI et le modèle génératif.

import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai";

// 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 Vertex AI service
const vertexAI = getVertexAI(firebaseApp);

// Initialize the generative model with a model that supports your use case
// Gemini 1.5 Pro is versatile and can accept both text-only or multimodal prompt inputs
const model = getGenerativeModel(vertexAI, { model: "gemini-1.5-pro-preview-0409" });

Une fois que vous avez terminé le guide de démarrage, découvrez comment choisir un modèle Gemini adapté à votre cas d'utilisation.

Étape 4: Appeler l'API Gemini

Maintenant que vous avez connecté votre application à Firebase, ajouté le SDK et initialisé le service Vertex AI et le modèle génératif, vous êtes prêt à appeler l'API Gemini.

Indiquez si vous souhaitez diffuser la réponse (generateContentStream) ou l'attendre jusqu'à ce que l'intégralité du résultat soit générée (generateContent).

Flux

Par défaut, le modèle renvoie une réponse une fois l'ensemble du processus de génération terminé. Toutefois, vous pouvez obtenir des interactions plus rapides en n'attendant pas le résultat complet et en utilisant plutôt un flux pour gérer les résultats partiels.

Vous pouvez utiliser generateContentStream() pour diffuser du texte généré à partir d'une requête de requête n'incluant que du texte:

import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai";

// 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 Vertex AI service
const vertexAI = getVertexAI(firebaseApp);

// Initialize the generative model with a model that supports your use case
// Gemini 1.5 Pro is versatile and can accept both text-only and multimodal prompt inputs
const model = getGenerativeModel(vertexAI, { model: "gemini-1.5-pro-preview-0409" });

// 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 stream generated text output, call generateContentStream with the text input
  const result = await model.generateContentStream(prompt);

  for await (const chunk of result.stream) {
    const chunkText = chunk.text();
    console.log(chunkText);
  }

  console.log('aggregated response: ', await result.response);
}

run();

Sans streaming

Vous pouvez également attendre l'intégralité du résultat au lieu de le diffuser. Le résultat n'est renvoyé qu'une fois que le modèle a terminé l'ensemble du processus de génération.

Vous pouvez utiliser generateContent() pour générer du texte à partir d'une requête de requête qui n'inclut que du texte:

import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai";

// 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 Vertex AI service
const vertexAI = getVertexAI(firebaseApp);

// Initialize the generative model with a model that supports your use case
// Gemini 1.5 Pro is versatile and can accept both text-only and multimodal prompt inputs
const model = getGenerativeModel(vertexAI, { model: "gemini-1.5-pro-preview-0409" });

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

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

En savoir plus sur les modèles Gemini

Découvrez les modèles disponibles pour différents cas d'utilisation, ainsi que leurs quotas et leur tarification.

Tester d'autres fonctionnalités de l'API Gemini

Découvrez comment contrôler la génération de contenu

Vous pouvez également tester des requêtes et des configurations de modèle à l'aide de Vertex AI Studio.


Donnez-nous votre avis sur votre expérience avec les SDK Vertex AI pour Firebase.