Creare esperienze ibride nelle app web con modelli ospitati sul dispositivo e nel cloud

Crea app web e funzionalità basate sull'AI con l'inferenza ibrida utilizzando Firebase AI Logic. L'inferenza ibrida consente di eseguire l'inferenza utilizzando i modelli sul dispositivo, se disponibili, e di eseguire automaticamente il fallback ai modelli ospitati sul cloud (e viceversa).

Questa pagina descrive come iniziare a utilizzare l'SDK client. Dopo aver completato questa configurazione standard setup, consulta le opzioni e le funzionalità di configurazione aggiuntive (come l'output strutturato).

Tieni presente che l'inferenza sul dispositivo è supportata per le app web in esecuzione su Chrome su computer desktop.

Vai agli esempi di codice

Casi d'uso consigliati e funzionalità supportate

Casi d'uso consigliati:

• L'utilizzo di un modello sul dispositivo per l'inferenza offre:

  • Privacy migliorata
  • Contesto locale
  • Inferenza senza costi
  • Funzionalità offline

• L'utilizzo della funzionalità ibrida offre:

  • Raggiungi il 100% del pubblico, indipendentemente dalla disponibilità del modello sul dispositivo o dalla connettività a internet

Funzionalità supportate per l'inferenza sul dispositivo:

L'inferenza sul dispositivo supporta solo la generazione di testo a turno singolo (non la chat), con output in streaming o non in streaming. Supporta le seguenti funzionalità di generazione di testo:

• Generazione di testo da input di solo testo

• Generazione di testo da input di testo e immagini, in particolare tipi di immagini di input JPEG e PNG

Puoi anche generare output strutturato, inclusi JSON ed enum.

Prima di iniziare

Tieni presente quanto segue:

• L'inferenza che utilizza un modello sul dispositivo utilizza l' API Prompt di Chrome; mentre l'inferenza che utilizza un modello ospitato sul cloud utilizza il Gemini API provider scelto (l'Gemini Developer API o l' Vertex AI Gemini API).

• Questa pagina descrive come iniziare a sviluppare utilizzando localhost (scopri di più sull' utilizzo delle API su localhost nella documentazione di Chrome).

  Dopo aver completato questa configurazione standard, consulta le opzioni e le funzionalità di configurazione aggiuntive (come l'output strutturato).

• Dopo aver implementato la funzionalità, puoi consentire agli utenti finali di provarla nella tua app effettiva.

Inizia a utilizzare localhost

Questi passaggi iniziali descrivono la configurazione generale richiesta per qualsiasi richiesta di prompt supportata che vuoi inviare.

Passaggio 1: configura Chrome e l'API Prompt per l'inferenza sul dispositivo

1. Assicurati di utilizzare una versione recente di Chrome. Aggiorna in chrome://settings/help.
   L'inferenza sul dispositivo è disponibile a partire da Chrome v139 e versioni successive.

2. Attiva il modello multimodale sul dispositivo impostando il seguente flag su Attivato:

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

3. Riavvia Chrome.

4. (Facoltativo) Scarica il modello sul dispositivo prima della prima richiesta.

   L'API Prompt è integrata in Chrome, ma il modello sul dispositivo non è disponibile per impostazione predefinita. Se non hai ancora scaricato il modello prima della prima richiesta di inferenza sul dispositivo, la richiesta avvierà automaticamente il download del modello in background.

   Visualizza le istruzioni per scaricare il modello sul dispositivo

   1. Apri Strumenti per sviluppatori > Console.

   2. Esegui questo comando:

      await LanguageModel.availability();
      

   3. Assicurati che l'output sia available, downloading o downloadable.

   4. Se l'output è downloadable, avvia il download del modello eseguendo:

      await LanguageModel.create();
      

   5. Puoi utilizzare il seguente callback monitor per ascoltare l'avanzamento del download e assicurarti che il modello sia available prima di effettuare richieste:

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

Passaggio 2: configura un progetto Firebase e connetti la tua app a Firebase

1. Accedi alla Firebase console, quindi seleziona il tuo progetto Firebase.

   Non hai ancora un progetto Firebase?

   Se non hai ancora un progetto Firebase, fai clic sul pulsante per crearne uno nuovo, quindi utilizza una delle seguenti opzioni:

   • Opzione 1: crea un progetto Firebase completamente nuovo (e il relativo progetto sottostante Google Cloud automaticamente) inserendo un nuovo nome del progetto nel primo passaggio del flusso di lavoro.

   • Opzione 2: "Aggiungi Firebase" a un progetto Google Cloud esistente facendo clic su Aggiungi Firebase al progetto Google Cloud (in fondo alla pagina). Nel primo passaggio del flusso di lavoro, inizia a inserire il nome del progetto esistente, quindi seleziona il progetto dall'elenco visualizzato.

   Completa i passaggi rimanenti del flusso di lavoro sullo schermo per creare un progetto Firebase. Tieni presente che, quando ti viene richiesto, non devi configurare Google Analytics per utilizzare gli Firebase AI Logic SDK.

2. Nella Firebase console, vai a Servizi AI > AI Logic.

3. Fai clic su Inizia per avviare un flusso di lavoro guidato che ti aiuterà a configurare le API richieste e le risorse per il tuo progetto.

4. Configura il progetto in modo che utilizzi un provider "Gemini API".

   Ti consigliamo di iniziare a utilizzare Gemini Developer API. In qualsiasi momento, puoi sempre configurare l'Vertex AI Gemini API (e il relativo requisito di fatturazione).

   Per Gemini Developer API, la console attiverà le API richieste e creerà una chiave API Gemini nel tuo progetto.
   Non aggiungere questa chiave API Gemini al codebase della tua app. Scopri di più.

5. Se ti viene richiesto nel flusso di lavoro della console, segui le istruzioni sullo schermo per registrare l'app e collegarla a Firebase.

6. Continua con il passaggio successivo di questa guida per aggiungere l'SDK alla tua app.

Passaggio 3: aggiungi l'SDK

La libreria Firebase fornisce l'accesso alle API per interagire con i modelli generativi. La libreria è inclusa nell'SDK Firebase JavaScript per il web.

1. Installa l'SDK Firebase JS per il web utilizzando npm:

   npm install firebase
   

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 4: inizializza il servizio e crea un'istanza del modello

Configura quanto segue prima di inviare una richiesta di prompt al modello.

1. Inizializza il servizio per il provider dell'API scelto.

2. Crea un'istanza di GenerativeModel. Assicurati di svolgere le seguenti operazioni:

   1. Chiama getGenerativeModel dopo o durante un'interazione dell'utente finale (ad esempio un clic su un pulsante). Questo è un prerequisito per inferenceMode.

   2. Imposta mode su uno dei seguenti valori:

      • PREFER_ON_DEVICE: utilizza il modello sul dispositivo se disponibile; in caso contrario, esegui il fallback al modello ospitato sul cloud.

      • ONLY_ON_DEVICE: utilizza il modello sul dispositivo se disponibile; in caso contrario, genera un'eccezione.

      • PREFER_IN_CLOUD: utilizza il modello ospitato sul cloud se disponibile; in caso contrario, esegui il fallback al modello sul dispositivo.

      • ONLY_IN_CLOUD: utilizza il modello ospitato sul cloud se disponibile; in caso contrario, genera un'eccezione.

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

Passaggio 5: invia una richiesta di prompt a un modello

Questa sezione mostra come inviare vari tipi di input per generare diversi tipi di output, tra cui:

• Generazione di testo da input di solo testo
• Generazione di testo da input di testo e immagini (multimodale)

Se vuoi generare output strutturato (come JSON o enum), allora utilizza uno dei seguenti esempi di "generazione di testo" e inoltre configura il modello in modo che risponda in base a uno schema fornito.

Generazione di testo da input di solo testo

Puoi utilizzare generateContent() per generare testo da un prompt che contiene testo:

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

Tieni presente che Firebase AI Logic supporta anche lo streaming delle risposte di testo utilizzando generateContentStream (anziché generateContent).

Generazione di testo da input di testo e immagini (multimodale)

Puoi utilizzare generateContent() per generare testo da un prompt che contiene file di testo e immagini, fornendo il di ogni file di input mimeType e il file stesso.

I tipi di immagini di input supportati per l'inferenza sul dispositivo sono PNG e 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();

Tieni presente che Firebase AI Logic supporta anche lo streaming delle risposte di testo utilizzando generateContentStream (anziché generateContent).

Consenti agli utenti finali di provare la tua funzionalità

Affinché gli utenti finali possano provare la tua funzionalità nella tua app, devi registrarti alle prove dell'origine di Chrome. Tieni presente che la durata e l'utilizzo di queste prove sono limitati.

1. Registrati alla prova dell'origine di Chrome dell'API Prompt. Ti verrà fornito un token.

2. Fornisci il token su ogni pagina web per la quale vuoi che la funzionalità di prova sia attivata. Utilizza una delle seguenti opzioni:

   • Fornisci il token come meta tag nel tag <head>: <meta http-equiv="origin-trial" content="TOKEN">

   • Fornisci il token come intestazione HTTP: Origin-Trial: TOKEN

   • Fornisci il token a livello di programmazione.

Cos'altro sai fare?

Puoi utilizzare varie opzioni e funzionalità di configurazione aggiuntive per le tue esperienze ibride:

• Imposta una modalità di inferenza

• Sostituisci il modello di fallback ospitato sul cloud predefinito

• Utilizza la configurazione del modello per controllare le risposte (ad esempio la temperatura)

• Genera output strutturato (come JSON)

Funzionalità non ancora disponibili per l'inferenza sul dispositivo

Come release di anteprima, non tutte le funzionalità dell'SDK web sono disponibili per l'inferenza sul dispositivo. Le seguenti funzionalità non sono ancora supportate per l'inferenza sul dispositivo (ma di solito sono disponibili per l'inferenza basata sul cloud).

• Generazione di testo da tipi di file immagine di input diversi da JPEG e PNG

  • Può eseguire il fallback al modello ospitato sul cloud; tuttavia, la modalità ONLY_ON_DEVICE genererà un errore.

• Generazione di testo da input audio, video e documenti (come PDF)

  • Può eseguire il fallback al modello ospitato sul cloud; tuttavia, la modalità ONLY_ON_DEVICE genererà un errore.

• Generazione di immagini utilizzando i modelli Gemini o Imagen

  • Può eseguire il fallback al modello ospitato sul cloud; tuttavia, la modalità ONLY_ON_DEVICE genererà un errore.

• Fornitura di file utilizzando gli URL nelle richieste multimodali. Devi fornire i file come dati in linea ai modelli sul dispositivo.

• Chat a più turni

  • Può eseguire il fallback al modello ospitato sul cloud; tuttavia, la modalità ONLY_ON_DEVICE genererà un errore.

• Streaming bidirezionale con il Gemini Live API

• Fornitura al modello di strumenti per aiutarlo a generare la risposta (ad esempio chiamata di funzioni, esecuzione di codice, contesto URL e grounding con la Ricerca Google)

• Contare i token

  • Genera sempre un errore. Il conteggio sarà diverso tra i modelli ospitati sul cloud e quelli sul dispositivo, quindi non esiste un fallback intuitivo.

• Monitoraggio dell'AI nella console Firebase per l'inferenza sul dispositivo.

  • Tieni presente che qualsiasi inferenza che utilizza i modelli ospitati sul cloud può essere monitorata proprio come altre inferenze che utilizzano l' Firebase AI Logic client SDK per il web.

Dai il tuo feedback sulla tua esperienza con Firebase AI Logic