Inizia a utilizzare l'API Gemini usando gli SDK Vertex AI per Firebase


Questa guida mostra come iniziare a effettuare chiamate all'API Gemini direttamente dalla tua app utilizzando l'SDK Vertex AI per Firebase.

Prerequisiti

Questa guida presuppone che tu abbia familiarità con l'uso di JavaScript per sviluppare app web. La guida è indipendente dal framework.

  • Assicurati che l'ambiente di sviluppo e l'app web soddisfino i seguenti requisiti:

    • (Facoltativo) Node.js
    • Browser web moderno

  • (Facoltativo) Dai un'occhiata all'app di esempio.

    Scaricare l'app di esempio

    Puoi provare rapidamente l'SDK, visualizzare un'implementazione completa di vari casi d'uso oppure utilizzare l'app di esempio se non disponi della tua app web. Per utilizzare l'app di esempio, devi connetterla a un progetto Firebase.

Passaggio 1: configura un progetto Firebase e collega la tua app a Firebase

Se hai già un progetto Firebase e un'app collegata a Firebase

  1. Nella console Firebase, vai alla pagina Crea con Gemini, quindi fai clic sulla seconda scheda per avviare un flusso di lavoro che ti aiuta a eseguire le attività seguenti. Se non vedi il layout delle schede, significa che queste attività sono state completate.

  2. Vai al passaggio successivo di questa guida per aggiungere l'SDK alla tua app.

Se non disponi già di un progetto Firebase e di un'app collegati a Firebase

Passaggio 2: aggiungi l'SDK

Dopo aver configurato il progetto Firebase e aver collegato l'app a Firebase (vedi il passaggio precedente), puoi aggiungere l'SDK Vertex AI per Firebase.

L'SDK Vertex AI per il Web fornisce accesso all'API Gemini.

  1. Installa l'anteprima privata dell'SDK utilizzando npm:

    npm install firebase@vertexai-preview

  2. Inizializza Firebase nella tua 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);

Passaggio 3: inizializza il servizio Vertex AI e il modello generativo

Prima di poter effettuare chiamate API, devi inizializzare il servizio Vertex AI e il modello generativo.

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

Una volta terminata la guida introduttiva, impara a scegliere un modello Gemini appropriato per il tuo caso d'uso.

Passaggio 4: chiama l'API Gemini

Ora che hai connesso l'app a Firebase, aggiunto l'SDK e inizializzato il servizio Vertex AI e il modello generativo, puoi chiamare l'API Gemini.

Scegli se vuoi trasmettere la risposta in streaming (generateContentStream) o attendere la risposta fino a quando non viene generato l'intero risultato (generateContent).

Flussi di dati

Per impostazione predefinita, il modello restituisce una risposta dopo aver completato l'intero processo di generazione. Tuttavia, puoi ottenere interazioni più rapide non aspettando l'intero risultato e utilizzando invece i flussi di dati per gestire i risultati parziali.

Puoi utilizzare generateContentStream() per trasmettere in streaming il testo generato da una richiesta di prompt che include solo testo:

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

Senza streaming

In alternativa, puoi attendere l'intero risultato anziché eseguire il flusso di dati; il risultato viene restituito solo dopo che il modello ha completato l'intero processo di generazione.

Puoi utilizzare generateContent() per generare testo da una richiesta di prompt che include solo testo:

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

Che cos'altro puoi fare?

Scopri di più sui modelli Gemini

Scopri i modelli disponibili per vari casi d'uso e le relative quote e i prezzi.

Prova altre funzionalità dell'API Gemini

Scopri come controllare la generazione di contenuti

Puoi anche sperimentare i prompt e le configurazioni dei modelli utilizzando Vertex AI Studio.


Fornisci feedback sulla tua esperienza con gli SDK Vertex AI per Firebase