Creare funzionalità di AI generativa basate sui tuoi dati con Genkit

1. Prima di iniziare

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

Genkit è progettato per gli sviluppatori di app e ti aiuta a integrare facilmente potenti funzionalità di AI nelle tue app con pattern e paradigmi familiari. È stato creato dal team di Firebase, sfruttando la nostra esperienza nella creazione di strumenti utilizzati da milioni di sviluppatori in tutto il mondo.

Prerequisiti

• Dimestichezza con Firestore, Node.js e TypeScript.

Obiettivi didattici

• Come creare app più intelligenti con le funzionalità avanzate di ricerca di somiglianze vettoriali di Firestore.
• Come implementare praticamente l'AI generativa nelle tue app utilizzando 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 tuo progetto Firebase

Nota: questo codelab utilizza i servizi Firebase e Google che richiedono un account di fatturazione Cloud. Se non hai mai utilizzato Firebase e Google Cloud, verifica la tua idoneità a ricevere un credito di 300$ e un account Cloud Billing 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 sulla 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 nel codebase di un'app chiamata Compass, un'app per la pianificazione delle vacanze. Gli utenti possono scegliere una destinazione, esaminare le attività disponibili e creare un itinerario per il loro viaggio.

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

• Al momento l'app mostra un elenco statico di destinazioni. Lo cambierai in modo che sia dinamico.
• Implementerai un itinerario compilato automaticamente per aumentare la fidelizzazione.

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

• Prenditi il tempo necessario facendo delle pause.
• Quando lavori con il codice, prenditi il tempo necessario per capire di cosa si tratta e come funziona, anziché copiarlo e incollarlo senza pensarci.
• Se non riesci ad andare avanti, torna all'ultimo stato funzionante e assicurati di aver completato ogni passaggio in modo accurato.
• Se trovi un bug nel codelab o nel suo codice, segnalalo su GitHub.

Servizi utilizzati

In questo codelab, utilizzerai molti servizi e funzionalità di Firebase e Google Cloud e la maggior parte del codice iniziale è già fornita. La tabella seguente contiene i servizi che utilizzerai e i motivi per cui li utilizzerai.

Servizio	Motivo dell'utilizzo
Genkit	Utilizzi Genkit per integrare l'IA generativa in un'applicazione Node.js / Next.js.
Cloud Firestore	I dati vengono archiviati in Cloud Firestore, che vengono poi utilizzati per la ricerca di similarità vettoriale.
Vertex AI di Google Cloud	Utilizzi i modelli di base di Vertex AI (come Gemini) per potenziare le funzionalità di AI.
Firebase App Hosting	Se vuoi, puoi utilizzare il nuovo Firebase App Hosting semplificato per pubblicare la tua app web dinamica Next.js (collegata a un repository GitHub).

3. Configurazione dell'ambiente di sviluppo

Verificare la versione di Node.js

1. Nel terminale, verifica che sia installata la versione 20.0.0 o successive di Node.js:

   node -v
   

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

Recuperare il codice sorgente del codelab

Se hai un account GitHub:

1. Crea un nuovo repository utilizzando il nostro modello da 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

Sulla macchina locale, trova il repository clonato e rivedi la struttura delle cartelle:

Cartella	Descrizione
load-firestore-data	Strumento a riga di comando di assistenza per precompilare rapidamente la 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 è la prima volta che utilizzi questo codelab, devi completarlo (anziché la guida rapida) perché contiene il set di istruzioni più completo.

Se non hai la certezza di aver applicato correttamente il codice come indicato in questo codelab, puoi trovare il codice della soluzione nel ramo git end.

Installa l'interfaccia a riga di comando di Firebase

1. Verifica di aver installato la CLI di Firebase e che la versione sia 13.6 o successive:

   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 progetto Firebase di questo codelab.
2. Nel terminale, a seconda che tu voglia che Firebase raccolga i dati, inserisci Y o N. (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. Inoltre, attiverai alcuni servizi utilizzati dall'app web di esempio più avanti in questo codelab.

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

Crea un progetto Firebase

1. Accedi alla console Firebase utilizzando lo stesso Account Google utilizzato nel passaggio precedente.
2. Fai clic sul pulsante per creare un nuovo progetto, quindi inserisci un nome per il progetto (ad esempio Compass Codelab).
   

   Questo nome del progetto viene utilizzato come nome visualizzato nelle interfacce Firebase e Firebase crea automaticamente un ID progetto univoco in base a questo nome. Tieni presente che ora puoi fare clic sull'icona Modifica per impostare l'ID progetto che preferisci, ma non potrai modificarlo dopo la creazione del progetto.

   Ricorda l'ID progetto perché ti servirà in seguito per identificare il tuo progetto Firebase nella CLI Firebase. Se dimentichi l'ID, puoi 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. (Facoltativo) Attiva l'assistenza AI nella console Firebase (denominata "Gemini in Firebase").
6. Per questo codelab non hai bisogno di Google Analytics, quindi disattiva l'opzione Google Analytics.
7. Fai clic su Crea progetto, attendi il provisioning del progetto, poi fai clic su Continua.

Aggiungere un'app web al tuo progetto Firebase

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

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

Esegui l'upgrade del piano tariffario Firebase

Per utilizzare Genkit e Vertex AI (e i relativi servizi cloud sottostanti), il tuo progetto Firebase deve essere incluso nel piano di prezzi con pagamento a consumo (Blaze), il che significa che è 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, verifica se hai diritto a un credito di 300$e a un account Cloud Billing 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:

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

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

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 l'ID database impostato su (default).
4. Seleziona una posizione per il database, poi fai clic su Avanti.
   Per un'app reale, devi scegliere una posizione vicina ai tuoi utenti.
5. Fai clic su Avvia in modalità di test. Leggi l'esclusione di responsabilità relativa 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 la CLI gcloud per configurare Vertex AI. Per tutti i comandi in 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 visualizzi un messaggio di avviso che indica "AVVISO: il progetto attivo non corrisponde al progetto di quota nel file delle credenziali predefinite dell'applicazione locale. Ciò potrebbe causare problemi di quota imprevisti.", quindi esegui il seguente 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, devi eseguire i comandi nel terminale e aggiungere 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 in modo da scegliere come target il tuo progetto

1. Nel terminale, vai alla directory principale del progetto codelab.
2. Per fare in modo che la Firebase CLI esegua tutti i comandi sul tuo progetto Firebase, esegui questo 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 codebase locale di eseguire codice che normalmente utilizza un service account, esegui questo comando nel terminale:

   gcloud auth application-default login
   

   Si aprirà una nuova scheda nel browser. Accedi utilizzando lo stesso Account Google utilizzato nei passaggi precedenti.
2. Per importare i dati di esempio di Firestore, 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 accedendo alla sezione Firestore del progetto Firebase nella console Firebase.Dovresti visualizzare lo schema dei dati importati e i relativi contenuti.

Collega la tua app web al progetto Firebase

La base di codice della tua app web deve essere associata al progetto Firebase corretto per utilizzare i suoi servizi, ad esempio il database. Per farlo, devi aggiungere la configurazione Firebase al codebase della tua app. Questa configurazione include valori essenziali come l'ID progetto, la chiave API e l'ID 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 "SDK setup and configuration" (Configurazione e configurazione dell'SDK), seleziona l'opzione Config.
   5. Copia lo snippet. Inizia con const firebaseConfig ....
2. Aggiungi la configurazione Firebase al codebase 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.

Visualizzare l'anteprima dell'app web nel browser

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

   npm install
   npm run dev:next
   

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 i componenti server React e questa è la home page.

Nota: se l'app non appare come nello screenshot, attendi qualche secondo e aggiorna. Next.js potrebbe essere lento durante il primo rendering.

Fai clic su Trova il viaggio dei miei sogni. Puoi vedere che vengono visualizzati alcuni dati hardcoded per alcune destinazioni fisse:

Esplora liberamente. Quando è tutto pronto, fai clic sul pulsante Home (nell'angolo in alto a destra).

6. Esplora l'AI generativa con Genkit

Ora puoi sfruttare la potenza dell'AI generativa nella tua applicazione. Questa sezione del codelab ti guiderà nell'implementazione di una funzionalità che suggerisce destinazioni in base all'ispirazione fornita dall'utente. Utilizzerai Genkit e Vertex AI di Google Cloud come provider per il modello generativo (utilizzerai Gemini).

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

Come passaggio finale di questo codelab, eseguirai il deployment dell'app Genkit su Firebase App Hosting.

Collega l'app Genkit al progetto Firebase

Abbiamo già collegato Genkit al tuo progetto modificando src/lib/genkit/genkit.config.ts nel passaggio precedente.

Avviare la UI per sviluppatori di Genkit

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

Nel terminale, esegui:

npm run dev:genkit

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

Interagire con Gemini

Ora puoi utilizzare la UI per sviluppatori di Genkit per interagire con uno qualsiasi dei modelli supportati o con uno qualsiasi degli altri componenti di AI, come prompt, retriever e flussi Genkit.

Ad esempio, prova a chiedere a Gemini di suggerirti una vacanza. Prendi nota di come puoi utilizzare le istruzioni di sistema per orientare il comportamento del modello in base alle tue esigenze specifiche. Funziona anche per i modelli che non supportano in modo nativo le istruzioni di sistema.

Gestire i prompt

Genkit introduce Dotprompt, un plug-in e un formato di testo progettati per semplificare la creazione e la gestione dei prompt di AI generativa. L'idea alla base di Dotprompt è trattare i prompt come codice, consentendoti di scriverli, gestirli e controllarne le versioni insieme al codice dell'applicazione.

Per utilizzare Dotprompt, inizia con un hello-world:

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

Arricchisci l'output con i dati strutturati

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

Esplorare gli schemi di output

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

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

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

   3. Fai clic su Esegui.

Informazioni sull'output basato sullo schema

Nota come l'output generato sia conforme allo schema definito. Specificando la struttura desiderata, hai chiesto all'LLM di produrre dati facilmente analizzabili e integrabili nella tua applicazione. Genkit convalida automaticamente l'output rispetto 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.

Principali vantaggi degli schemi di output

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

Sfruttare gli schemi di output migliora l'esperienza con Genkit, consentendoti di creare dati strutturati personalizzati per esperienze utente più ricche e dinamiche.

Utilizzare l'input multimodale

Immagina la tua app che suggerisce destinazioni per le vacanze personalizzate in base alle immagini che i tuoi utenti trovano stimolanti. Genkit, combinato con un modello generativo multimodale, ti consente di dare vita a questa visione.

1. Nell'editor di codice, esamina il file del prompt:
   1. Apri il file prompts/imgDescription.prompt.
   2. Nota l'inclusione di {{media url=this}}, un elemento della sintassi Handlebars che facilita l'incorporamento di immagini nel prompt.
2. Interagisci con la UI:
   1. Nell'interfaccia utente per sviluppatori di Genkit, apri il prompt prompts/imgDescription.
   2. Inserisci un URL immagine nel campo imageUrls incollando l'URL di un'immagine. Ad esempio, puoi utilizzare un'immagine in miniatura di 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. Implementa il recupero con la ricerca di similarità vettoriale

Sebbene la generazione di contenuti creativi con modelli di AI sia impressionante, le applicazioni pratiche spesso richiedono di basare l'output su 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 di questo database.

Per colmare il divario tra query non strutturate e contenuti pertinenti, sfrutterai la potenza della ricerca di similarità vettoriale sugli incorporamenti generati.

Informazioni sugli embedding e sulla similarità vettoriale

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

Informazioni sul funzionamento della procedura di recupero

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

Se incorpori questo meccanismo di recupero nella tua applicazione, sfrutti il modello Gemini per generare suggerimenti non solo creativi, ma anche saldamente 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 compilato il database Firestore con luoghi e attività di esempio. Ogni voce del luogo include un campo di testo knownFor che descrive i suoi attributi notevoli, insieme a un campo embedding corrispondente contenente la rappresentazione vettoriale di questa descrizione.

Per sfruttare la potenza della ricerca di somiglianze vettoriali su questi embedding, devi creare un indice Firestore. Questo indice consente di recuperare in modo efficiente i luoghi in base alla somiglianza dei relativi vettori di incorporamento con una determinata query.

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

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

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

   export const placesRetriever = defineFirestoreRetriever(ai, {
     name: 'placesRetriever',
     firestore,
     collection: 'places',
     contentField: 'knownFor',
     vectorField: 'embedding',
     embedder: vertexAI.embedder('text-embedding-005', {outputDimensionality: 768}),
     distanceMeasure: 'COSINE',
   });
   

Testare il recuperatore

1. Nell'UI per sviluppatori di Genkit, apri il recuperatore retrievers/placesRetriever.
2. Fornisci la seguente query:

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

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

   {
       "limit": 4
   }
   

4. Fai clic su Esegui.

Puoi filtrare ulteriormente i dati oltre alla somiglianza aggiungendo 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 le destinazioni pertinenti dal tuo database Firestore. Ora è il momento di orchestrare questi componenti in un flusso di generazione RAG (Retrieval-Augmented Generation) coeso.

Questa sezione introduce un concetto importante di Genkit chiamato flussi. I flussi sono funzioni fortemente tipizzate e trasmissibili in streaming che possono essere richiamate sia localmente che in remoto, con piena osservabilità. Puoi gestire e richiamare i flussi sia dall'interfaccia a riga di comando di Genkit sia dalla UI per sviluppatori di Genkit.

1. Nell'editor di codice, esamina il prompt dell'itinerario:
   1. Apri il file prompts/itineraryGen.prompt.
   2. Nota come il prompt sia stato espanso per accettare input aggiuntivi, in particolare i dati delle attività recuperati dal retriever.
2. Nella UI per sviluppatori di Genkit, visualizza un flusso Genkit nel file src/lib/genkit/itineraryFlow.ts.
   Suggerimento: per semplificare il debug, valuta la possibilità di suddividere i flussi lunghi in passaggi più piccoli e gestibili.
3. Migliora il flusso integrando un passaggio "Descrizione immagine":
   1. Individua il commento TODO: 2 (circa alla riga 81). Questo punto indica dove migliorare il flusso.
   2. Sostituisci il segnaposto vuoto imgDescription con l'output generato dalla chiamata del prompt imgDescription.
4. Testa il flusso:
   1. Vai alla flows/itineraryFlow.
   2. Utilizza il seguente input per testare l'esecuzione corretta 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 di itinerario.
5. Se riscontri errori o comportamenti imprevisti, controlla la scheda Ispezione per i dettagli. Puoi anche utilizzare questa scheda per esaminare la cronologia delle esecuzioni di Trace Store.

RAG per la tua applicazione web

1. Assicurati che l'app web sia ancora in esecuzione visitando la pagina 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. Consulta 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 della tua applicazione con Firebase App Hosting

Il passaggio finale di questo percorso è il deployment della tua app web. Sfrutterai Firebase App Hosting, una soluzione di hosting consapevole del framework progettata per semplificare il deployment di app Next.js e Angular in un backend serverless.

1. Esegui il commit delle modifiche nel repository Git locale e poi esegui il push su GitHub.
2. Nella console Firebase, vai ad App Hosting all'interno del tuo progetto Firebase.
3. Fai clic su Inizia > Connettiti a GitHub.
4. Seleziona il tuo account GitHub e il repository. Fai clic su Avanti.
5. In Impostazione deployment > Directory principale, lascia invariato il valore predefinito.
6. Per il ramo Live, seleziona il ramo main del tuo repository GitHub. Fai clic su Avanti.
7. Inserisci un ID per il tuo 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 seleziona l'app che hai creato in un passaggio precedente di questo codelab.
9. Fai clic su Fine ed esegui il deployment.

Monitoraggio dello stato del deployment

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

Concedi le autorizzazioni al service account

Affinché il backend Node.js possa accedere alle risorse Vertex AI, devi assegnare il ruolo aiplatform.user al service account 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"

Una volta completata, la tua app web sarà accessibile agli utenti.

Riassegnazione automatica

Firebase App Hosting semplifica gli aggiornamenti futuri. Ogni volta che esegui il push delle modifiche nel ramo principale del repository GitHub, Firebase App Hosting ricompila ed esegue nuovamente il deployment dell'app, garantendo che gli utenti utilizzino sempre l'ultima versione.

10. Conclusione

Congratulazioni per aver completato questo codelab completo.

Hai sfruttato con successo la potenza di Genkit, Firestore e Vertex AI per creare un "flusso" sofisticato che genera consigli personalizzati per le vacanze in base alle preferenze e all'ispirazione degli utenti, il tutto basato sui dati della tua applicazione.

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

• Gestione dei prompt: organizzare e gestire i prompt come codice per una migliore collaborazione e controllo delle versioni.
• Contenuti multimodali: integrazione di diversi tipi di dati, come immagini e testo, per migliorare le interazioni con l'AI.
• Schemi di input/output: strutturazione dei dati per un'integrazione e una convalida perfette nella tua applicazione.
• Archivi vettoriali: sfruttano gli incorporamenti vettoriali per una ricerca efficiente della somiglianza e il recupero di informazioni pertinenti.
• Recupero dei dati: implementazione di meccanismi per recuperare e incorporare i dati dai database nei contenuti generati con l'AI.
• Retrieval Augmented Generation (RAG): combinazione di tecniche di recupero con l'AI generativa per output accurati e pertinenti al contesto.
• Strumentazione del flusso: creazione e orchestrazione di workflow di AI complessi per un'esecuzione fluida e osservabile.

Se padroneggi questi concetti e li applichi nell'ecosistema Firebase, avrai gli strumenti giusti per intraprendere le tue avventure con l'AI generativa. Esplora le vaste possibilità, crea applicazioni innovative e continua a superare i limiti di ciò che è possibile ottenere con l'AI generativa.

Esplorare 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 quella più adatta a te eseguendo il seguente comando all'interno della cartella del nodo (package.json):

npx genkit init

Passaggi successivi

• Sperimenta con i prompt e sfrutta le ampie finestre contestuali in Google AI Studio o Vertex AI Studio.
• Scopri di più sulla ricerca RAG (Retrieval-Augmented Generation) con l'AI.
• Consulta la documentazione ufficiale di Genkit.
• Scopri di più sulle funzionalità di ricerca per similarità in Firestore e Cloud SQL per PostgreSQL.
• Approfondisci i flussi di genAI con le chiamate di funzione.