Crea funzionalità di IA generativa basate sui tuoi dati con Firebase Genkit

1. Prima di iniziare

In questo codelab, imparerai a utilizzare Firebase Genkit per integrare l'IA generativa nella tua app. Firebase Genkit è un framework open source che ti aiuta a creare, eseguire il deployment e monitorare app basate sull'IA pronte per la produzione.

Genkit è progettato per gli sviluppatori di app, per aiutarti a integrare facilmente potenti funzionalità di IA nelle tue app con pattern e paradigmi familiari. È stato sviluppato dal team di Firebase e si basa sulla nostra esperienza nella creazione di strumenti utilizzati da milioni di sviluppatori in tutto il mondo.

Prerequisiti

• Familiarità con Firestore, Node.js e TypeScript.

Obiettivi didattici

• Come creare app più intelligenti con le funzionalità avanzate di ricerca di similitudine vettoriale di Firestore.
• Come implementare praticamente l'IA generativa nelle tue app utilizzando Firebase Genkit.
• Prepara la soluzione per il deployment e l'integrazione.

Che cosa ti serve

• Un browser a tua scelta, ad esempio Google Chrome.
• Un ambiente di sviluppo con un editor di codice e un terminale
• Un Account Google per la creazione e la gestione del progetto Firebase

Nota: questo codelab utilizza Firebase e servizi Google che richiedono un account di fatturazione Cloud. Se non hai mai utilizzato Firebase e Google Cloud, controlla se hai diritto a un credito di 300$ e a un account di fatturazione Cloud di prova senza costi per provare i nostri servizi. In caso contrario, dovrai fornire un metodo di pagamento (ad esempio una carta di credito) per configurare un account di fatturazione Cloud (per informazioni dettagliate sui metodi di pagamento, consulta la documentazione di Fatturazione Cloud).

2. Esamina l'app web e i servizi cloud utilizzati

In questa sezione, esaminerai l'app web che creerai con questo codelab e scoprirai i servizi cloud che utilizzerai.

App web

In questo codelab, lavorerai nella base di codice di un'app chiamata Compass, un'app per la pianificazione delle vacanze. Gli utenti possono scegliere una destinazione, sfogliare le attività disponibili e creare un itinerario per il loro viaggio.

In questo codelab, implementerai due nuove funzionalità volte a migliorare il coinvolgimento degli utenti con la home page dell'app. Entrambe le funzionalità sono basate sull'IA generativa:

• Al momento l'app mostra un elenco statico di destinazioni. Lo modificherai in modo dinamico.
• Implementerai un itinerario completato automaticamente per aumentare il livello di fidelizzazione.

Nota: questo è un codelab di grandi dimensioni con molti passaggi. Per sfruttare al meglio questo codelab:

• Prenditi delle pause.
• Quando lavori con il codice, prenditi il tempo di capire di che cosa si tratta e come funziona, anziché copiare e incollare senza pensarci.
• Se non riesci ad andare avanti, ripercorri i passaggi per ripristinare lo stato precedente e assicurati di aver completato ogni passaggio correttamente.
• Se trovi un bug nel codelab o nel relativo codice, invia una segnalazione su GitHub.

Servizi utilizzati

In questo codelab, utilizzerai molti servizi e funzionalità Firebase e Cloud e la maggior parte del relativo codice di avvio ti verrà fornita. La tabella seguente contiene i servizi che utilizzerai e i motivi per cui li utilizzerai.

Servizio	Motivo dell'utilizzo
Genkit di Firebase	Utilizza Genkit per integrare l'IA generativa in un'applicazione Node.js/Next.js.
Cloud Firestore	I dati vengono archiviati in Cloud Firestore, che vengono quindi utilizzati per la ricerca di similitudini vettoriali.
Vertex AI di Google Cloud	Puoi utilizzare i modelli di base di Vertex AI (come Gemini) per potenziare le tue caratteristiche di IA.
Firebase App Hosting	Facoltativamente, puoi utilizzare il nuovo Firebase App Hosting semplificato per pubblicare la tua app web Next.js dinamica (collegata a un repository GitHub).

3. Configurazione dell'ambiente di sviluppo

Verifica la versione di Node.js

1. Nel terminale, verifica di avere installato Node.js versione 20.0.0 o successiva:

   node -v
   

2. Se non disponi di Node.js 20.0.0 o versioni successive, scarica l'ultima versione LTS e installala.

Recupera il codice sorgente del codelab

Se hai un account GitHub:

1. Crea un nuovo repository utilizzando il modello disponibile su github.com/FirebaseExtended/codelab-ai-genkit-rag
2. Crea un clone locale del repository GitHub del codelab che hai appena creato:

   git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
   

Se non hai installato Git o preferisci non creare un nuovo repository:

Scarica il repository GitHub come file ZIP.

Esamina la struttura delle cartelle

Sul computer locale, trova il repository clonato ed esamina la struttura delle cartelle:

Cartella	Descrizione
genkit-functions	Codice Genkit di backend
load-firestore-data	Strumento a riga di comando di supporto per precompilare rapidamente la tua raccolta Firestore
*tutto il resto	Codice dell'app web Next.js

La cartella principale include un file README.md che offre un avvio rapido per eseguire l'app web, utilizzando istruzioni semplificate. Tuttavia, se sei un nuovo studente, è consigliabile completare questo codelab (anziché la guida rapida) perché contiene il set di istruzioni più completo.

Se hai dubbi sull'applicazione corretta del codice come indicato in questo codelab, puoi trovare il codice della soluzione nel ramo end git.

Installa l'interfaccia a riga di comando di Firebase

1. Verifica di avere installato l'interfaccia a riga di comando di Firebase e che sia la versione 13.6 o successiva:

   firebase --version
   

2. Se hai installato l'interfaccia a riga di comando di Firebase, ma non la versione 13.6 o successive, aggiornala:

   npm update -g firebase-tools
   

3. Se non hai installato l'interfaccia a riga di comando di Firebase, installala:

   npm install -g firebase-tools
   

Se non riesci ad aggiornare o installare l'interfaccia a riga di comando di Firebase a causa di errori di autorizzazione, consulta la documentazione di npm o utilizza un'altra opzione di installazione.

Accedi a Firebase

1. Nel terminale, accedi a Firebase:

   firebase login
   

   Se il terminale indica che hai già eseguito l'accesso a Firebase, puoi passare alla sezione Configura il tuo progetto Firebase di questo codelab.
2. Nel terminale, inserisci Y o N, a seconda che tu voglia che Firebase raccolga i dati. (entrambe le opzioni funzionano per questo codelab)
3. Nel browser, seleziona il tuo Account Google e fai clic su Consenti.

Installa gcloud CLI di Google Cloud

1. Installa gcloud CLI.
2. Nel terminale, accedi a Google Cloud:

   gcloud auth login
   

4. Configura il progetto Firebase

In questa sezione, configurerai un progetto Firebase e registrerai un'app web Firebase al suo interno. Attiverai anche alcuni servizi utilizzati dall'app web di esempio in un secondo momento in questo codelab.

Tutti i passaggi in questa sezione vengono eseguiti nella console Firebase.

Crea un progetto Firebase

1. Accedi alla console di Firebase con lo stesso Account Google utilizzato nel passaggio precedente.
2. Fai clic su Crea un progetto, quindi inserisci un nome per il progetto, ad esempio Compass Codelab.
   Ricorda l'ID progetto assegnato automaticamente per il tuo progetto Firebase o fai clic sull'icona Modifica per impostare l'ID progetto che preferisci. Ti servirà questo ID in un secondo momento per identificare il tuo progetto Firebase nell'interfaccia a riga di comando di Firebase. Se dimentichi il tuo ID, potrai sempre trovarlo in un secondo momento nelle Impostazioni progetto.
3. Fai clic su Continua.
4. Se richiesto, leggi e accetta i Termini di Firebase, quindi fai clic su Continua.
5. Per questo codelab non è necessario Google Analytics, quindi disattiva l'opzione Google Analytics.
6. Fai clic su Crea progetto, attendi che venga eseguito il provisioning del progetto, quindi fai clic su Continua.

Aggiungi un'app web al progetto Firebase

1. Vai alla schermata Panoramica del progetto nel progetto Firebase e fai clic su Web.
2. Nella casella di testo Nickname app, inserisci un nickname app facile da ricordare, ad esempio My Compass Codelab App. Puoi lasciare deselezionata la casella di controllo per configurare Firebase Hosting, perché facoltativamente configurerai un servizio di hosting nell'ultimo passaggio di questo codelab.
   
3. Fai clic su Registra app > Vai alla console.

Bene. Ora hai registrato un'app web nel tuo nuovo progetto Firebase.

Eseguire l'upgrade del piano tariffario di Firebase

Per utilizzare Firebase Genkit e Vertex AI (e i relativi servizi cloud sottostanti), il tuo progetto Firebase deve utilizzare il piano tariffario con pagamento a consumo (Blaze), il che significa che deve essere collegato a un account di fatturazione Cloud.

• Un account di fatturazione Cloud richiede un metodo di pagamento, ad esempio una carta di credito.
• Se non hai mai utilizzato Firebase e Google Cloud, controlla se hai diritto a un credito di 300$e a un account di fatturazione Cloud di prova senza costi.
• Se stai svolgendo questo codelab nell'ambito di un evento, chiedi all'organizzatore se sono disponibili crediti Cloud.

Scopri di più sui prezzi di Vertex AI.

Per eseguire l'upgrade del progetto al piano Blaze, segui questi passaggi:

1. Nella console Firebase, scegli di eseguire l'upgrade del piano.
2. Seleziona il piano Blaze. Segui le istruzioni sullo schermo per collegare un account di fatturazione Cloud al progetto.
   Se nell'ambito di questo upgrade dovevi creare un account di fatturazione Cloud, potresti dover tornare al flusso di upgrade nella console Firebase per completare l'upgrade.

Nota: puoi eseguire il downgrade del tuo progetto al piano tariffario senza costi (Spark) dopo aver completato questo codelab.

Configura Cloud Firestore

1. Nel riquadro a sinistra della console Firebase, espandi Build e seleziona Database Firestore.
2. Fai clic su Crea database.
3. Lascia il campo ID database impostato su (default).
4. Seleziona una posizione per il database, poi fai clic su Avanti.
   Per un'app reale, scegli una posizione vicina ai tuoi utenti.
5. Fai clic su Avvia in modalità di test. Leggi il disclaimer relativo alle regole di sicurezza.
   Non distribuire o esporre pubblicamente un'app senza aggiungere regole di sicurezza per il tuo database.
6. Fai clic su Crea.

Abilita Vertex AI

Utilizza l'interfaccia a riga di comando gcloud per configurare Vertex AI. Per tutti i comandi di questa pagina, assicurati di sostituire YOUR_PROJECT_ID con l'ID del tuo progetto Firebase.

1. Nel terminale, imposta il progetto predefinito per Google Cloud SDK:

   gcloud config set project YOUR_PROJECT_ID
   

2. Se viene visualizzato il messaggio di avviso "ATTENZIONE: il progetto attivo non corrisponde al progetto quota nel file delle credenziali predefinite dell'applicazione locale. Ciò potrebbe causare problemi di quota imprevisti.", quindi esegui questo comando per impostare il progetto di quota:

   gcloud auth application-default set-quota-project YOUR_PROJECT_ID
   

3. Abilita il servizio Vertex AI nel tuo progetto:

   gcloud services enable aiplatform.googleapis.com
   

5. Configurare l'app web

Per eseguire l'app web, dovrai eseguire i comandi nel terminale e aggiungere il codice nell'editor di codice. Per tutti i comandi in questa pagina, assicurati di sostituire YOUR_PROJECT_ID con l'ID del tuo progetto Firebase.

Configura l'interfaccia a riga di comando di Firebase per la destinazione del progetto

1. Nel terminale, vai alla directory radice del tuo progetto codelab.
2. Per fare in modo che l'interfaccia a riga di comando di Firebase esegua tutti i comandi relativi al tuo progetto Firebase, esegui il seguente comando:

   firebase use YOUR_PROJECT_ID
   

Importa dati di esempio in Firestore

Per consentirti di iniziare rapidamente, questo codelab fornisce dati di esempio pregenerati per Firestore.

1. Per consentire alla base di codice locale di eseguire codice che normalmente utilizzerebbe un account di servizio, esegui il seguente comando nel terminale:

   gcloud auth application-default login
   

   Si aprirà una nuova scheda del browser. Accedi con lo stesso Account Google utilizzato nei passaggi precedenti.
2. Per importare i dati Firestore di esempio, esegui questi comandi:

   cd load-firestore-data
   npm ci
   node index.js YOUR_PROJECT_ID
   cd ..
   

3. Verifica che i dati siano stati aggiunti correttamente al database andando alla sezione Firestore del tuo progetto Firebase nella Console Firebase. Dovresti vedere lo schema dei dati importati e i relativi contenuti.

Collega la tua app web al progetto Firebase

Il codebase della tua app web deve essere associato al progetto Firebase corretto per utilizzare i suoi servizi, ad esempio il database. Per farlo, devi aggiungere la configurazione Firebase al codice di base della tua app. Questa configurazione include valori essenziali come l'ID progetto, la chiave API e l'ID app della tua app, nonché altri valori che consentono alla tua app di interagire con Firebase.

1. Ottieni la configurazione Firebase della tua app:
   1. Nella console Firebase, vai al progetto Firebase.
   2. Nel riquadro a sinistra, fai clic sull'icona a forma di ingranaggio accanto a Panoramica del progetto e seleziona Impostazioni progetto.
   3. Nella scheda "Le tue app", seleziona la tua app web.
   4. Nella sezione "Impostazione e configurazione dell'SDK", seleziona l'opzione Config.
   5. Copia lo snippet. Inizia con const firebaseConfig ....
2. Aggiungi la configurazione Firebase al codice base della tua app web:
   1. Nell'editor di codice, apri il file src/lib/genkit/genkit.config.ts.
   2. Sostituisci la sezione pertinente con il codice che hai copiato.
   3. Salva il file.

Visualizza l'anteprima dell'app web nel browser

1. Nel terminale, installa le dipendenze ed esegui l'app web:

   npm install
   npm run dev
   

2. Nel browser, vai all'URL di hosting ospitato localmente per visualizzare l'app web. Ad esempio, nella maggior parte dei casi l'URL è http://localhost:3000/ o qualcosa di simile.

Compass è un'app Next.js che utilizza React Server Components e questa è la home page.

Fai clic su Trova il mio viaggio da sogno. Puoi vedere che al momento vengono visualizzati alcuni dati hardcoded per alcune destinazioni fisse:

Esplora pure. Quando vuoi continuare, fai clic sul pulsante Home (nell'angolo in alto a destra).

6. Esplora l'IA generativa con Genkit

Ora puoi sfruttare la potenza dell'IA generativa nella tua applicazione. Questa sezione del codelab ti guiderà nell'implementazione di una funzionalità che suggerisce le destinazioni in base alle fonti di ispirazione fornite dagli utenti. Utilizzerai Firebase Genkit e Vertex AI di Google Cloud come provider per il modello generativo (utilizzerai Gemini).

Genkit può memorizzare lo stato della traccia e del flusso (che ti consente di ispezionare il risultato dell'esecuzione dei flussi Genkit). In questo codelab utilizzerai Firestore per archiviare queste tracce.

Come ultimo passaggio di questo codelab, eseguirai il deployment della tua app Genkit su Firebase App Hosting.

Collega l'app Genkit al tuo progetto Firebase

Prima di poter lanciare Genkit, il tuo codebase deve essere associato al progetto Firebase corretto per utilizzare i suoi servizi, ad esempio il database. Per farlo, devi aggiungere la configurazione Firebase al codice di base dell'app Genkit. Questa configurazione include valori essenziali come l'ID progetto, la chiave API e l'ID app dell'app, nonché altri valori che consentono all'app di interagire con Firebase.

1. Ottieni la configurazione Firebase della tua app:
   1. Nella Console Firebase, vai al tuo progetto Firebase.
   2. Nel riquadro a sinistra, fai clic sull'icona a forma di ingranaggio accanto a Panoramica del progetto e seleziona Impostazioni progetto.
   3. Nella scheda "Le tue app", seleziona la tua app web.
   4. Nella sezione "Impostazione e configurazione dell'SDK", seleziona l'opzione Config.
   5. Copia lo snippet. Inizia con const firebaseConfig ....
2. Aggiungi la configurazione Firebase della tua app al codice di base dell'app Genkit:
   1. Nell'editor di codice, apri il file genkit-functions/src/lib/genkit.config.ts.
   2. Sostituisci la sezione pertinente con il codice che hai copiato.
   3. Salva il file.

Avvia l'interfaccia utente per sviluppatori di Genkit

Genkit è dotato di un'interfaccia utente basata sul web che ti consente di interagire con LLM, flussi di Genkit, retriever e altri componenti di IA.

1. Avvia l'interfaccia utente per sviluppatori Genkit:
   1. Apri una nuova finestra del terminale.
   2. Vai alla directory principale genkit-functions.
   3. Esegui questo comando per avviare la UI dello sviluppatore di Genkit:

      cd genkit-functions
      npx genkit start
      

2. Nel browser, vai all'URL di Genkit ospitato localmente. Nella maggior parte dei casi, è http://localhost:4000/.

Interagire con Gemini

Ora puoi utilizzare l'UI sviluppatore di Genkit per interagire con uno qualsiasi dei modelli supportati o con qualsiasi altro componente di IA, come prompt, retriever e flussi Genkit.

Ad esempio, prova a chiedere a Gemini di suggerirti una vacanza. Tieni presente che puoi utilizzare le istruzioni di sistema per indirizzare il comportamento del modello in base alle tue esigenze specifiche. Questo metodo funziona anche per i modelli che non supportano in modo nativo le istruzioni di sistema.

Gestire i prompt

Firebase Genkit introduce Dotprompt, un plug-in e un formato di testo progettato per semplificare la creazione e la gestione dei tuoi prompt di IA generativa. L'idea di base di Dotprompt è trattare i prompt come codice, consentendoti di scriverli, gestirli e controllarne la versione insieme al codice dell'applicazione.

Per utilizzare Dotprompt, inizia con un messaggio di benvenuto:

1. Nell'editor di codice, apri il file genkit-functions/prompts/1-hello-world.prompt.
2. Nell'interfaccia utente per sviluppatori di Genkit, apri dotprompt/1-hello-world.
3. Utilizza qualsiasi nome o codice della lingua che conosci o lascia una stringa vuota.
4. Fai clic su Esegui.
5. Prova con valori diversi. I modelli linguistici di grandi dimensioni sono bravi a comprendere prompt abbreviati, con errori ortografici o incompleti in query semplici come questa.

Arricchisci l'output con dati strutturati

Oltre a generare testo normale, Genkit ti consente di strutturare l'output per una presentazione e un'integrazione migliorate all'interno dell'interfaccia utente della tua app. Se definisci uno schema, puoi indicare all'LLM di produrre dati strutturati in linea con il formato che preferisci.

Esplorazione degli schemi di output

Puoi anche specificare lo schema di output di una chiamata LLM.

1. Nell'editor di codice, esamina il file prompt:
   1. Apri il file dotprompt/2-simple-itinerary.
   2. Esamina gli schemi di input e output definiti.
2. Interagisci con l'interfaccia utente:
   1. Nell'interfaccia utente di Genkit Developer, vai alla sezione dotprompt/2-simple-itinerary.
   2. Fornisci input compilando i campi place e interests con dati di esempio:

      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
      

   3. Fai clic su Esegui.

Informazioni sull'output basato su schema

Nota come l'output generato sia conforme allo schema definito. Specificando la struttura desiderata, hai indicato all'LLM di produrre dati che possono essere facilmente analizzati e integrati nella tua applicazione. Genkit convalida automaticamente l'output in base allo schema, garantendo l'integrità dei dati.

Inoltre, puoi configurare Genkit in modo che riprovi o tenti di riparare l'output se non corrisponde allo schema.

Vantaggi principali degli schemi di output

• Integrazione semplificata: incorpora facilmente i dati strutturati negli elementi UI della tua app.
• Convalida dei dati: assicurati l'accuratezza e la coerenza dell'output generato.
• Gestione degli errori: implementa meccanismi per risolvere le mancate corrispondenze dello schema.

L'utilizzo degli schemi di output migliora la tua esperienza Genkit, consentendoti di creare dati strutturati personalizzati per esperienze utente più complete e dinamiche.

Utilizza input multimodale

Immagina che la tua app suggerisca destinazioni di vacanza personalizzate in base a immagini che ispirano i tuoi utenti. Genkit, combinato con un modello generativo multimodale, ti consente di realizzare questa vision.

1. Esamina il file del prompt nell'editor di codice:
   1. Apri il file genkit-functions/prompts/imgDescription.prompt.
   2. Tieni presente l'inclusione di {{media url=this}}, un elemento di sintassi di Handlebars che semplifica l'integrazione delle immagini nel prompt.
2. Interagisci con l'interfaccia utente:
   1. Nell'interfaccia utente di Genkit Developer, apri il prompt dotprompt/imgDescription.
   2. Inserisci un URL immagine nel campo imageUrls incollando l'URL di un'immagine. Ad esempio, puoi utilizzare un'immagine in miniatura da Wikipedia che mostra la Torre Eiffel:

      {
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      

   3. Fai clic su Esegui.

7. Implementazione del recupero con la ricerca di somiglianze vettoriali

Sebbene generare contenuti creativi con modelli di IA sia impressionante, le applicazioni pratiche spesso richiedono di basare l'output in un contesto specifico.

Nel caso di questo codelab, hai un database di destinazioni (luoghi e attività) e vuoi assicurarti che i suggerimenti generati dal modello Gemini facciano riferimento esclusivamente alle voci all'interno di questo database.

Per colmare il divario tra query non strutturate e contenuti pertinenti, potrai sfruttare la potenza della ricerca di similitudine vettoriale sugli incorporamenti generati.

Comprensione degli incorporamenti e della somiglianza vettoriale

• Vettori: i vettori sono rappresentazioni numeriche di punti dati, spesso utilizzati per modellare informazioni complesse come testo o immagini. Ogni dimensione in un vettore corrisponde a una funzionalità specifica dei dati.
• Modelli di embedding: questi modelli di IA specializzati trasformano i dati di input, come il testo, in vettori ad alta dimensione. L'aspetto affascinante è che gli input simili vengono mappati a vettori vicini tra loro in questo spazio ad alta dimensione.
• Ricerca di somiglianza vettoriale: questa tecnica sfrutta la vicinanza dei vettori di embedding per identificare i punti dati pertinenti. Data una query di input, trova voci nel database con vettori di embedding simili, che indicano la pertinenza semantica.

Informazioni sul funzionamento della procedura di recupero

1. Incorporamento della query: l'input dell'utente (ad esempio, "cena romantica a Parigi") viene trasmesso attraverso un modello di incorporamento, generando un vettore di query.
2. Embedding del database: idealmente, hai pre-elaborato il database delle destinazioni creando vettori di embedding per ogni voce.
3. Calcolo della somiglianza: il vettore di query viene confrontato con ogni vettore di incorporamento nel database utilizzando una metrica di somiglianza (ad esempio somiglianza coseno).
4. Recupero: le voci più simili del database, in base alla loro vicinanza al vettore di query, vengono recuperate come suggerimenti pertinenti.

Se incorpori questo meccanismo di recupero nella tua applicazione, puoi sfruttare il modello Gemini per generare suggerimenti non solo creativi, ma anche ben radicati nel tuo set di dati specifico. Questo approccio garantisce che l'output generato rimanga pertinente al contesto e in linea con le informazioni disponibili nel database.

Attivare la ricerca di similarità vettoriale in Firestore

In un passaggio precedente di questo codelab, hai popolato il tuo database Firestore con luoghi e attività di esempio. Ogni voce di luogo include un campo di testo knownFor che descrive i relativi attributi principali, insieme a un campo embedding corrispondente contenente la rappresentazione vettoriale di questa descrizione.

Per sfruttare la potenza della ricerca di somiglianza vettoriale su questi incorporamenti, devi creare un indice Firestore. Questo indice consente il recupero efficiente dei luoghi in base alla somiglianza dei loro vettori di incorporamento con una determinata query.

1. Nel terminale, esegui il seguente comando per installare il componente alpha più recente. È necessaria la versione 2024.05.03 o successive:

   gcloud components install alpha
   

2. Crea l'indice, assicurandoti di sostituire YOUR_PROJECT_ID con l'ID del tuo progetto.

   gcloud alpha firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding
   

3. Nell'interfaccia utente di Genkit Developer, apri placesRetriever.
4. Fai clic su Esegui. Osserva l'oggetto scaffolded con un testo segnaposto, che indica dove implementerai la logica del retriever.
5. Nell'editor di codice, apri il file genkit-functions/src/lib/placesRetriever.ts.
6. Scorri fino in fondo e sostituisci il segnaposto placesRetriever con quanto segue:

   export const placesRetriever = defineFirestoreRetriever({
     name: 'placesRetriever',
     firestore,
     collection: 'places',
     contentField: 'knownFor',
     vectorField: 'embedding',
     embedder: textEmbeddingGecko,
     distanceMeasure: 'COSINE',
   });
   

Testa il retriever

1. Nell'interfaccia utente di Genkit Developer, apri il retriever placesRetriever.
2. Fornisci la seguente query:

   {
       "content": [
           {
               "text": "UNESCO"
           }
       ]
   }
   

3. Puoi anche fornire Opzioni. Ad esempio, ecco come specificare il numero di documenti che deve restituire il recuperatore:

   {
       "limit": 4
   }
   

4. Fai clic su Esegui.

Puoi applicare ulteriori filtri ai dati oltre alla somiglianza aggiungendo le clausole where alle Opzioni.

8. Retrieval Augmented Generation (RAG) con Genkit

Nelle sezioni precedenti hai creato singoli prompt in grado di gestire testo, JSON e immagini, generando destinazioni per le vacanze e altri contenuti coinvolgenti per i tuoi utenti. Hai anche implementato un prompt che recupera destinazioni pertinenti dal tuo database Firestore. Ora è il momento di orchestrare questi componenti in un flusso RAG (Retrieval Augmented Generation) coerente.

Questa sezione introduce un importante concetto di Genkit chiamato flow. I flussi sono funzioni altamente digitate e riproducibili in streaming che possono essere richiamate sia in locale che da remoto, con la massima osservabilità. Puoi gestire e richiamare i flussi sia dall'interfaccia a riga di comando di Genkit sia dall'interfaccia utente per sviluppatori di Genkit.

1. Nell'editor di codice, esamina la richiesta relativa all'itinerario:
   1. Apri il file genkit-functions/prompts/itineraryGen.prompt.
   2. Nota come il prompt sia stato espanso per accettare input aggiuntivi, in particolare i dati delle attività provenienti dal retriever.
2. Nell'interfaccia utente di Genkit Developer, visualizza un flusso Genkit nel file genkit-functions/src/lib/itineraryFlow.ts.
   Suggerimento: per semplificare il debug, ti consigliamo di suddividere i flussi lunghi in passaggi più piccoli e gestibili.
3. Migliora il flusso integrando un passaggio di "descrizione dell'immagine":
   1. Individua il commento TODO: 2 (intorno alla riga 70). È il punto in cui migliorerai il flusso.
   2. Sostituisci il segnaposto imgDescription vuoto con l'output generato dalla chiamata del prompt imgDescription.
4. Testa il flusso:
   1. Vai a itineraryFlow.
   2. Usa il seguente input per testare la riuscita esecuzione di itineraryFlow con il passaggio appena aggiunto:

      {
          "request": "Sightseeing in Paris",
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      

   3. Fai clic su Esegui.
   4. Osserva l'output generato, che dovrebbe incorporare la descrizione dell'immagine nel suggerimento dell'itinerario.
5. Se riscontri errori o comportamenti imprevisti, controlla la scheda Esamina per maggiori dettagli. Puoi utilizzare questa scheda anche per rivedere la cronologia delle esecuzioni da Trace Store.

RAG per la tua applicazione web

1. Assicurati che l'app web sia ancora in esecuzione visitando l'indirizzo http://localhost:3000/ nel browser.
2. Se l'app web non è più in esecuzione, esegui questi comandi nel terminale:

   npm install
   npm run dev
   

3. Visita la pagina dell'app web Dream Your Vacation (http://localhost:3000/gemini).
4. Visualizza il codice sorgente (src/app/gemini/page.tsx) per un esempio di integrazione di Next.js.

9. Esegui il deployment dell'applicazione con Firebase App Hosting

Il passaggio finale di questo percorso prevede il deployment della tua app web. Utilizzerai Firebase App Hosting, una soluzione di hosting basata su framework progettata per semplificare il deployment delle app Next.js e Angular su un backend serverless.

1. Esegui il commit delle modifiche nel tuo repository Git locale e poi esegui il push su GitHub.
2. Nella Console Firebase, vai ad App Hosting nel tuo progetto Firebase.
3. Fai clic su Inizia > Connettiti a GitHub.
4. Seleziona il tuo account GitHub e il repository. Fai clic su Next (Avanti).
5. In Impostazione di deployment > Directory root, lascia il valore predefinito.
6. Per Ramo live, seleziona il ramo main del tuo repository GitHub. Fai clic su Next (Avanti).
7. Inserisci un ID per il backend (ad esempio compass).
8. Quando ti viene chiesto se creare o associare un'app web Firebase, scegli Seleziona un'app web Firebase esistente e scegli l'app che hai creato in un passaggio precedente in questo codelab.
9. Fai clic su Termina ed esegui il deployment.

Monitoraggio dello stato del deployment

Il processo di deployment richiederà alcuni minuti. Puoi monitorare l'avanzamento nella sezione Hosting app della Console Firebase.

Concedi le autorizzazioni al tuo account di servizio

Per consentire al backend Node.js di accedere alle risorse Vertex AI, devi assegnare il ruolo aiplatform.user all'account di servizio della tua app:

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"

Al termine, la tua app web sarà accessibile agli utenti.

Redeployment automatico

Firebase App Hosting semplifica gli aggiornamenti futuri. Ogni volta che esegui il push delle modifiche al ramo principale del tuo repository GitHub, Firebase App Hosting ricrea e sottopone automaticamente a deployment la tua app, assicurando che gli utenti utilizzino sempre la versione più recente.

10. Conclusione

Complimenti per aver completato questo codelab completo.

Hai sfruttato con successo la potenza di Firebase Genkit, Firestore e Vertex AI per creare un "flusso" sofisticato che genera consigli personalizzati per le vacanze in base alle preferenze e all'ispirazione dell'utente, il tutto sfruttando i suggerimenti nei dati della tua applicazione.

Durante questo percorso, hai acquisito esperienza pratica con gli schemi di ingegneria del software essenziali per creare applicazioni di AI generativa solide. Questi pattern includono:

• Gestione dei prompt: organizzazione e gestione dei prompt come codice per migliorare la collaborazione e il controllo delle versioni.
• Contenuti multimodali: integrazione di diversi tipi di dati, come immagini e testo, per migliorare le interazioni con l'IA.
• Schemi di input/output: strutturazione dei dati per l'integrazione e la convalida senza interruzioni nell'applicazione.
• Archiviazioni vettoriali: sfrutta gli incorporamenti vettoriali per una ricerca efficiente di somiglianze e il recupero di informazioni pertinenti.
• Riempimento dei dati: implementazione di meccanismi per recuperare e incorporare i dati dei database nei contenuti creati con l'IA.
• RAG (Retrieval Augmented Generation): combina tecniche di recupero con l'IA generativa per ottenere output contestualmente pertinenti e accurati.
• Strumentazione dei flussi: creazione e orchestrazione di flussi di lavoro di IA complessi per un'esecuzione fluida e osservabile.

Se padroneggi questi concetti e li applichi all'interno dell'ecosistema Firebase, hai tutto l'occorrente per intraprendere le tue avventure con l'IA generativa. Esplora le vaste possibilità, crea applicazioni innovative e continua a superare i limiti di ciò che è possibile ottenere con l'IA generativa.

Esplorazione di opzioni di deployment alternative

Genkit offre una serie di opzioni di deployment per soddisfare le tue esigenze specifiche, tra cui:

• Cloud Functions for Firebase
• Cloud Run
• Next.js
• Qualsiasi ambiente Node.js
• Genkit supporta anche Go

Scegli quello più adatto alle tue esigenze eseguendo questo comando all'interno della cartella del nodo (package.json):

npx genkit init

Passaggi successivi

• Fai esperimenti con i prompt e sfrutta le grandi finestre di contesto in Google AI Studio o Vertex AI Studio.
• Scopri di più sulla ricerca RAG (AI Retrieval Augmented Generation).
• Consulta la documentazione ufficiale di Firebase Genkit.
• Scopri di più sulle funzionalità di ricerca di similarità in Firestore e Cloud SQL per PostgreSQL.
• Approfondisci i flussi di AI generativa con le chiamate di funzione.