Creare 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, implementare 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 similarità vettoriali 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 i servizi Firebase e 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 per la 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 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 ottenere il massimo da 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 a procedere, torna all'ultimo stato funzionante e assicurati di aver completato ogni passaggio con precisione.
• 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à di Firebase e Cloud e la maggior parte del codice di avvio è già fornita. La seguente tabella contiene i servizi che utilizzerai e i motivi per cui li utilizzerai.

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

3. Configurazione dell'ambiente di sviluppo

Verificare la versione di Node.js

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

   node -v
   

2. Se non hai Node.js versione 20.0.0 o successive, scarica e installa la versione LTS più recente.

Recupera 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

Sul computer locale, trova il repository clonato e controlla la struttura della cartella:

Cartella	Descrizione
load-firestore-data	Strumento a riga di comando di supporto 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 una procedura rapida per eseguire l'app web utilizzando istruzioni semplificate. Tuttavia, se non hai mai utilizzato questo prodotto, ti consigliamo di completare questo codelab (anziché la guida rapida) perché contiene l'insieme 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 Configurare 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 sono valide per questo codelab)
3. Nel browser, seleziona il tuo Account Google e fai clic su Consenti.

Installa l'interfaccia a riga di comando gcloud di Google Cloud

1. Installa la 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 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 su Crea un progetto, poi 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, puoi trovarlo in un secondo momento nelle Impostazioni progetto.
3. Fai clic su Continua.
4. Se richiesto, leggi e accetta i termini di Firebase e poi 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 il provisioning del progetto e poi fai clic su Continua.

Aggiungere un'app web al 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 per l'app facile da ricordare, ad esempio My Compass Codelab App. Puoi lasciare deselezionata la casella di controllo per la configurazione di Firebase Hosting, perché potrai configurare facoltativamente 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 Blaze con pagamento a consumo, 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 l'idoneità a ricevere un credito di 300$e un account di fatturazione Cloud per la 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'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: puoi eseguire il downgrade del progetto al piano tariffario Spark senza costi aggiuntivi 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 l'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.

Attiva Vertex AI

Utilizza l'interfaccia a riga di comando 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 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 il seguente comando per impostare il progetto 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 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.

Configurare l'interfaccia a riga di comando di Firebase in modo che abbia come target il tuo progetto

1. Nel terminale, vai alla directory principale del progetto del 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
   

   Nel browser verrà visualizzata una nuova scheda. Accedi con lo stesso Account Google utilizzato nei passaggi precedenti.
2. Per importare i dati di Firestore di esempio, esegui i seguenti 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.

Collegare l'app web al progetto Firebase

La base di codice dell'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 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 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 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.

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 del server React 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:

Non esitare a esplorare. Quando è tutto pronto, 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 destinazioni in base alle ispirazioni fornite dall'utente. 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 passaggio finale di questo codelab, esegui il deployment dell'app Genkit su Firebase App Hosting.

Collega l'app Genkit al tuo progetto Firebase

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

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.

Nel terminale, esegui:

npm run dev:genkit

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

Interagire con Gemini

Ora puoi utilizzare l'interfaccia utente per sviluppatori di Genkit per interagire con qualsiasi modello supportato o con qualsiasi altro componente di IA, ad esempio prompt, retriever e flussi di Genkit.

Ad esempio, prova a chiedere a Gemini di suggerirti una meta per le vacanze. 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 progettati per semplificare la creazione e la gestione dei 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 prompts/1-hello-world.prompt.
2. Nell'interfaccia utente per sviluppatori di Genkit, apri prompts/1-hello-world.
3. Utilizza un nome o un codice di lingua che conosci o lascia una stringa vuota.
4. Fai clic su Esegui.
5. Prova con alcuni valori diversi. I modelli linguistici di grandi dimensioni sono efficaci nel comprendere prompt abbreviati, con errori ortografici o incompleti in query semplici come questa.

Arricchire l'output con i 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 prompts/2-simple-itinerary.prompt.
   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 prompts/2-simple-itinerary.
   2. Fornisci un 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 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 dell'interfaccia utente 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ù ricche e dinamiche.

Utilizza input multimodale

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

1. Nell'editor di codice, esamina il file prompt:
   1. Apri il file prompts/imgDescription.prompt.
   2. Tieni presente l'inclusione di {{media url=this}}, un elemento di sintassi di Handlebars che semplifica l'integrazione di immagini nel prompt.
2. Interagisci con l'interfaccia utente:
   1. Nell'interfaccia utente di Genkit Developer, 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. Implementare il recupero con la ricerca di somiglianze vettoriali

Sebbene la generazione di contenuti creativi con i modelli di IA 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 all'interno di questo database.

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

Informazioni sugli embedding e sulla somiglianza vettoriale

• Vettori: i vettori sono rappresentazioni numeriche dei 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. Embedding della query: l'input dell'utente (ad es. "cena romantica a Parigi") viene passato a un modello di embedding, 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 della query viene confrontato con ogni vettore di embedding nel database utilizzando una metrica di somiglianza (ad esempio la somiglianza del 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 compilato 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, oltre 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 relativi vettori di incorporamento a una determinata query.

1. Nel terminale, esegui il seguente comando per installare il componente alpha più recente. Devi disporre della 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 firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config field-path=embedding,vector-config='{"dimension":"768","flat": "{}"}'
   

3. Nell'interfaccia utente per sviluppatori di Genkit, apri retrievers/placesRetriever.
4. Fai clic su Esegui. Osserva l'oggetto sottoposto a scaffolding con il testo segnaposto, che indica dove implementerai la logica di recupero.
5. Nell'editor di codice, apri il file src/lib/genkit/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 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 deve restituire il recuperatore:

   {
       "limit": 4
   }
   

4. Fai clic su Esegui.

Puoi applicare ulteriori filtri ai dati oltre alla somiglianza aggiungendo clausole where a 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 RAG (Retrieval Augmented Generation) coerente.

Questa sezione introduce un importante concetto di Genkit chiamato flow. I flussi sono funzioni con tipi di dati definiti e riproducibili in streaming che possono essere richiamate sia localmente che da remoto, con piena 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 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 src/lib/genkit/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 "descrizione immagine":
   1. Individua il commento TODO: 2 (intorno alla riga 81). Questo indica 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 flows/itineraryFlow.
   2. Utilizza i seguenti input per verificare 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 includere la descrizione dell'immagine nel suggerimento di itinerario.
5. Se riscontri errori o comportamenti imprevisti, controlla la scheda Esamina per maggiori dettagli. Puoi anche utilizzare questa scheda per esaminare la cronologia delle esecuzioni dal 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. 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 è il deployment dell'app web. Sfrutterai Firebase App Hosting, una soluzione di hosting basata su framework progettata per semplificare il deployment di app Next.js e Angular in 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 Avanti.
5. In Impostazioni di deployment > Directory principale, mantieni 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 scegli l'app che hai creato in un passaggio precedente di questo codelab.
9. Fai clic su Fine e 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

Affinché il backend Node.js possa 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 ricostruisce e riesegue automaticamente il deployment dell'app, garantendo agli utenti di utilizzare sempre la versione più recente.

10. Conclusione

Complimenti per aver completato questo codelab completo.

Hai sfruttato 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 alle ispirazioni degli utenti, basando al contempo i suggerimenti sui dati della tua applicazione.

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

• Gestione dei prompt: organizzazione e gestione dei prompt come codice per una migliore collaborazione e un maggiore controllo della versione.
• 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 un'integrazione e una convalida senza problemi nella tua applicazione.
• Archivi vettoriali: sfruttano gli incorporamenti vettoriali per una ricerca della somiglianza e un recupero efficienti delle informazioni pertinenti.
• Riempimento dei dati: implementazione di meccanismi per recuperare e incorporare i dati dei database nei contenuti creati con l'IA.
• Retrieval Augmented Generation (RAG): combina le tecniche di recupero con l'IA generativa per ottenere output accurati e pertinenti dal punto di vista del contesto.
• 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 spingere i confini di ciò che è possibile 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 a te eseguendo il seguente 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 (Retrieval Augmented Generation) con l'IA.
• 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.