Creazione di applicazioni nell'era dell'IA

1. Panoramica

In questo lab utilizzerai i prodotti di IA generativa di Google per creare l'infrastruttura in Google Cloud con l'aiuto di Gemini Cloud Assist, eseguire query sui dati di BigQuery utilizzando il linguaggio naturale per le funzionalità SQL di Data Canvas, scrivere codice nei Jupyter Notebook di Colab Enterprise e in Eclipse Theia (Visual Studio Code) con l'aiuto di Gemini Code Assist e integrare le funzionalità di ricerca e chat basate sull'IA create su Cloud Storage e sulle origini di grounding BigQuery in Vertex AI Agent Builder.

Il nostro obiettivo è creare un sito web di ricette e cucina chiamato AI Recipe Haven. Il sito verrà creato in Python e Streamlit e conterrà due pagine principali. Cooking Advice ospiterà un chatbot che creeremo utilizzando Gemini e una sorgente basata su Vertex AI Agent Builder collegata a un gruppo di libri di cucina. Offrirà consigli culinari e risponderà a domande in merito. Ricerca di ricette sarà un motore di ricerca alimentato da Gemini, questa volta basato su un database di ricette BigQuery.

Se non riesci a capire un passaggio del codice in questo esercizio, le soluzioni per tutti i file di codice si trovano nel repository GitHub dell'esercizio nel ramo solution.

Obiettivi

In questo lab imparerai a:

• Attivare e utilizzare Gemini Cloud Assist
• Crea un'app di ricerca in Vertex AI Agent Builder per il chatbot di consigli culinari
• Caricare e pulire i dati in un notebook Colab Enterprise con l'aiuto di Gemini Code Assist
• Crea un'app di ricerca in Vertex AI Agent Builder per il generatore di ricette
• Creare l'applicazione web di base in Python e Streamlit, con un po' di aiuto di Gemini
• Esegui il deployment dell'applicazione web in Cloud Run
• Collega la pagina Consigli per la cucina alla nostra app Agent Builder per la ricerca di libri di cucina
• (Facoltativo) Collega la pagina di ricerca delle ricette all'app Agent Builder per la ricerca di ricette
• (Facoltativo) Esplora l'applicazione finale

2. Configurazione e requisiti

Prima di fare clic sul pulsante Avvia lab

Leggi le seguenti istruzioni. I lab sono a tempo e non possono essere messi in pausa. Il timer si avvia quando fai clic su Avvia lab e ti mostra per quanto tempo avrai a disposizione le risorse Google Cloud.

Con questo lab pratico Qwiklabs avrai la possibilità di completare le attività in prima persona, in un ambiente cloud reale e non di simulazione o demo. Riceverai delle nuove credenziali temporanee che potrai utilizzare per accedere a Google Cloud per la durata del lab.

Cosa serve

Per completare il lab, avrai bisogno di:

• Accesso a un browser internet standard (Chrome è il browser consigliato).
• Tempo a disposizione per completare il lab.

Nota: se hai già un account o un progetto Google Cloud personale, non utilizzarli per questo lab.

Nota: se utilizzi un Pixelbook, apri una finestra di navigazione in incognito per avviare questo lab.

Come avviare il lab e accedere alla console Google Cloud

1. Fai clic sul pulsante Inizia lab. Se devi effettuare il pagamento per il lab, si apre una finestra popup per permetterti di selezionare il metodo di pagamento. Sul lato sinistro trovi un riquadro con le credenziali temporanee da utilizzare per il lab.

2. Copia il nome utente e poi fai clic su Apri console Google. Il lab avvia le risorse e apre un'altra scheda con la pagina di accesso.

Suggerimento:apri le schede in finestre separate posizionate fianco a fianco.

Se viene visualizzata la pagina Scegli un account, fai clic su Utilizza un altro account.

3. Nella pagina di accesso, incolla il nome utente che hai copiato dal riquadro Dettagli connessione, quindi copia e incolla la password.

Importante:devi utilizzare le credenziali presenti nel riquadro Dettagli connessione. Non utilizzare le tue credenziali Qwiklabs. Se hai un account Google Cloud, non usarlo per questo lab per evitare che ti vengano addebitati dei costi. 4. Fai clic nelle pagine successive:

1. Accetta i termini e le condizioni.
2. Non inserire opzioni di recupero o l'autenticazione a due fattori, perché si tratta di un account temporaneo.
3. Non registrarti per le prove gratuite.

Dopo qualche istante, la console Google Cloud si apre in questa scheda.

Nota:puoi visualizzare il menu con un elenco di prodotti e servizi Google Cloud facendo clic sul menu di navigazione in alto a sinistra.

3. Attività 0: Controlla il cluster di workstation

In una parte successiva di questo lab utilizzerai una workstation Google Cloud per svolgere alcuni lavori di sviluppo. Il processo di avvio di questo lab dovrebbe aver avviato la creazione del cluster della tua workstation. Prima di continuare, assicurati che il cluster sia in fase di creazione.

1. Nella console Google Cloud, utilizza la casella di ricerca per andare a Cloud Workstations.
2. Utilizza il menu di navigazione a sinistra per visualizzare Gestione cluster.
3. Se hai un cluster in fase di aggiornamento, puoi passare all'attività 1. Se non vedi cluster in nessun stato, aggiorna la pagina. Se continui a non vedere un cluster in aggiornamento (in fase di creazione), termina il lab utilizzando il pulsante in alto a sinistra di queste istruzioni e riavvialo.

4. Attività 1: Attivare e utilizzare Gemini Cloud Assist

In questa attività attiveremo e utilizzeremo Gemini Cloud Assist. Quando lavori nella console Google Cloud, Gemini Cloud Assist può offrirti consigli, aiutarti a creare, configurare e monitorare la tua infrastruttura Google Cloud e persino suggerire comandi gcloud e scrivere script Terraform.

1. Per attivare l'utilizzo di Cloud Assist, fai clic nella casella di ricerca nella parte superiore dell'interfaccia utente della console Cloud e seleziona Chiedi a Gemini (o la dicitura potrebbe essere Chiedi a Gemini per la console Cloud).
2. Scorri fino alla sezione API richieste della pagina e Abilita l'API Gemini for Google Cloud.
3. Se non vedi immediatamente un'interfaccia di chat, fai clic su Inizia a chattare. Inizia chiedendo a Gemini di spiegare alcuni dei vantaggi dell'utilizzo delle workstation cloud. Prenditi qualche minuto per esplorare la risposta generata.
4. A questo punto, chiedi i vantaggi di Agent Builder e come può contribuire a creare risposte generative.
5. Infine, diamo un'occhiata a un confronto. Nella finestra della chat di Gemini della console Google Cloud, fai la seguente domanda:

What are the major steps to creating a search app grounded in a
GCS data source using Vertex AI Agent builder?

6. Ora, nella finestra non in incognito, vai al sito web pubblico di Gemini qui, accedi se necessario e fai la stessa domanda. Le risposte sono uguali o almeno simili? I passaggi specifici? È notevolmente migliore? In ogni caso, tieni a mente le risposte mentre svolgi i passaggi successivi.

Nota:se provi a svolgere il passaggio precedente utilizzando il tuo account Qwiklabs temporaneo, il tuo account verrà bloccato. Se anche il tuo account di lavoro è bloccato perché la tua organizzazione non consente l'utilizzo dell'app web Gemini, salta il passaggio e vai avanti. Ciò non influirà sulla tua capacità di completare questo esercizio.

5. Attività 2: Crea un'app di ricerca in Vertex AI Agent Builder per il chatbot di consigli culinari

Il sito web che stiamo creando avrà una pagina di consigli culinari contenente un chatbot progettato per aiutare gli utenti a trovare risposte a domande relative alla cucina. Sarà basato su Gemini e su una fonte contenente 70 libri di cucina di dominio pubblico. I cookbook fungeranno da fonte attendibile utilizzata da Gemini per rispondere alle domande.

1. Utilizza la casella di ricerca della console Cloud per andare a Vertex AI. Nella dashboard, fai clic su Abilita tutte le API consigliate. Se viene visualizzata una finestra popup che indica che l'API Vertex AI stessa deve essere abilitata, Abilita anche questa.
2. Utilizza la ricerca per andare ad Agent Builder, quindi fai clic su Continua e attiva l'API.
3. Come suggerito da Gemini nella nostra precedente richiesta di consulenza, la creazione di un'app di ricerca in Agent Builder inizia con la creazione di un'origine dati autorevole. Quando l'utente esegue una ricerca, Gemini comprende la domanda e come comporre risposte intelligenti, ma cercherà le informazioni utilizzate nella risposta nella fonte attendibile anziché tratte dalle sue conoscenze innate.

Nel menu a sinistra, vai a Datastore e Crea datastore. 4. I libri di cucina di dominio pubblico che utilizziamo per la nostra pagina di consigli culinari si trovano attualmente in un bucket Cloud Storage di un progetto esterno. Seleziona il tipo di origine Cloud Storage. 5. Esamina, ma non modificare, le opzioni predefinite relative al tipo di informazioni che stiamo importando. Lascia il tipo di importazione impostato su Cartella e per il percorso del bucket utilizza: labs.roitraining.com/labs/old-cookbooks, quindi fai clic su Continua. 6. Assegna un nome al datastore: old-cookbooks. Modifica e imposta l'ID su old-cookbooks-id, quindi Crea il datastore.

Vertex AI Agent Builder supporta diversi tipi di app e il Data Store funge da origine attendibile per ciascuna. Le app di ricerca sono ottime per l'uso generale e la ricerca. Le app di chat sono destinate ai flussi generativi nelle applicazioni di chatbot/voicebot basate su Dataflow. Le app di consigli aiutano a creare motori per suggerimenti migliori. Le app Agent servono per creare agenti basati sull'IA generativa. Probabilmente, Agent sarebbe la scelta migliore per ciò che vogliamo fare, ma dato che il prodotto è attualmente in anteprima, rimarremo con il tipo di app di ricerca. 7. Utilizza il menu a sinistra per andare ad App e poi fai clic su Crea app. 8. Seleziona il tipo di app di ricerca. Esamina, ma non modificare le varie opzioni. Assegna un nome all'app: cookbook-search. Modifica e imposta l'ID app su cookbook-search-id. Imposta l'azienda su Google e Continua. 9. Controlla il datastore old-cookbooks che hai creato qualche passaggio fa e crea l'app di ricerca.

Se esamini la scheda Attività, probabilmente noterai che i libri di ricette sono ancora in fase di importazione e indicizzazione. Agent Builder impiegherà più di 5 minuti per indicizzare le migliaia di pagine contenute nei 70 cookbook che gli abbiamo fornito. Mentre è in funzione, carichiamo e puliamo alcuni dati del database delle ricette per il nostro generatore di ricette.

6. Attività 3: Carica e pulisci i dati in un blocco note Colab Enterprise con l'aiuto di Gemini Code Assist

Google Cloud offre un paio di modi principali per lavorare con i notebook Jupiter. Utilizzeremo la più recente offerta di Google, Colab Enterprise. Alcuni di voi potrebbero conoscere il prodotto Colab di Google, comunemente utilizzato da privati e organizzazioni che vogliono fare esperimenti con i notebook Jupiter in un ambiente senza costi. Colab Enterprise è un'offerta commerciale di Google Cloud completamente integrata con gli altri prodotti cloud di Google e che sfrutta appieno le funzionalità di sicurezza e conformità dell'ambiente Google Cloud.

Una delle funzionalità offerte da Colab Enterprise è l'integrazione con Gemini Code Assist di Google. La funzionalità di assistenza alla codifica può essere utilizzata in diversi editor di codice e può offrire consigli e suggerimenti in linea continui durante la codifica. Sfrutteremo questo assistente generativo durante la gestione dei dati delle ricette.

1. Utilizza la ricerca per andare a Colab Enterprise e Crea un blocco note. Se ricevi un'offerta per sperimentare nuove funzionalità di Colab, ignorala. Per avviare il runtime, ovvero la potenza di calcolo alla base del notebook, premi Connetti nell'angolo in alto a destra del nuovo notebook.

2. Utilizza il menu con tre puntini accanto al nome del blocco note corrente nel riquadro File di Colab Enterprise per rinominarlo Data Wrangling.

3. Crea una nuova casella + Testo e utilizza la Freccia su per spostarla in modo che sia la prima cella della pagina.

4. Modifica la casella di testo e inserisci:

# Data Wrangling

Import the Pandas library

5. Nel blocco di codice sotto il blocco di testo che hai appena creato, inizia a digitare imp e Gemini Code Assist dovrebbe suggerire il resto dell'importazione in grigio. Premi Tab per accettare il suggerimento.

import pandas as pd

6. Sotto la casella del codice di importazione, crea un'altra casella di testo e inserisci:

Create a Pandas DataFrame from: gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv. View the first few records.

7. Crea e modifica un altro blocco di codice. Ancora una volta, inizia a digitare df ed esamina il codice generato da Gemini Code Assist. Se sopra il suggerimento generato viene visualizzato un elenco a discesa di completamento automatico delle parole chiave Python, premi Esc per visualizzare il codice suggerito grigio chiaro. Premi di nuovo Tab per accettare il suggerimento. Se il tuo suggerimento non conteneva la chiamata alla funzione head(), aggiungila.

df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
df.head()

8. Fai clic sulla prima cella di codice in cui hai importato Pandas e utilizza il menu Comandi o la tastiera per eseguire la cella selezionata. Sulla tastiera, Maiusc+Invio eseguirà la cella e sposterà lo stato attivo sulla cella successiva, creandone una se necessario. Attendi l'esecuzione della cella prima di procedere.

Nota:vedrai [ ] appena a sinistra quando una cella non è stata eseguita. Durante l'esecuzione di una cella, viene visualizzata un'animazione in rotazione. Al termine della cella viene visualizzato un numero, ad esempio [13]. 9. Esegui la cella che carica il file CSV nel DataFrame. Attendi il caricamento del file ed esamina le prime cinque righe di dati. Questi sono i dati delle ricette che caricheremo in BigQuery e che alla fine utilizzeremo per basare il nostro generatore di ricette. 10. Crea un nuovo blocco di codice e inserisci il commento riportato di seguito. Dopo aver digitato il commento, vai alla riga di codice successiva e dovresti ricevere il suggerimento df.columns. Accettala ed esegui la cella.

# List the current DataFrame column names

Abbiamo appena dimostrato che hai due opzioni per ricevere assistenza da Gemini Code Assist in un notebook Jupyter: celle di testo sopra le celle di codice o commenti all'interno della cella di codice stessa. I commenti all'interno delle celle di codice funzionano bene nei Jupyter Notebook, ma questo approccio funziona anche in qualsiasi altro IDE che supporta l'Assistente codice Gemini di Google.

11. Facciamo un po' di pulizia delle colonne. Rinomina la colonna Unnamed: 0 in id e link in uri. Utilizza la tecnica di prompt > codice che preferisci per creare il codice, quindi esegui la cella quando il risultato ti soddisfa.

# Rename the column 'Unnamed: 0' to 'id' and 'link' to 'uri'
df.rename(columns={'Unnamed: 0': 'id', 'link': 'uri'}, inplace=True)

12. Rimuovi le colonne source e NER e utilizza head() per visualizzare le prime righe. Chiedi di nuovo aiuto a Gemini. Esegui le ultime due righe ed esamina i risultati.

# Remove the source and NER columns
df.drop(columns=['source', 'NER'], inplace=True)
df.head()

13. Vediamo quanti record sono presenti nel nostro set di dati. Anche in questo caso, inizia con la tecnica di richiesta che preferisci e prova a chiedere a Gemini di aiutarti a generare il codice.

# Count the records in the DataFrame
df.shape # count() will also work

14. 2,23 milioni di record sono probabilmente più ricette di quante ne abbiamo il tempo. Il processo di indicizzazione in Agent Builder probabilmente richiederebbe troppo tempo per il nostro esercizio di oggi. Come compromesso, prendiamo un campione di 150.000 ricette e lavoriamo con quello. Utilizza l'approccio prompt > codice per acquisire il campione e memorizzarlo in un nuovo DataFrame denominato dfs (s per piccolo).

# Sample out 150,000 records into a DataFrame named dfs
dfs = df.sample(n=150000)

15. I dati delle nostre origini delle ricette sono pronti per essere caricati in BigQuery. Prima di eseguire il caricamento, vai a BigQuery e prepara un set di dati per contenere la tabella. Nella console Google Cloud, utilizza la casella di ricerca per accedere a BigQuery. Puoi fare clic con il tasto destro del mouse su BigQuery e aprirlo in una nuova scheda del browser.
16. Se non è già visibile, apri il riquadro Chat AI di Gemini utilizzando il logo di Gemini in alto a destra nella console Cloud. Se ti viene chiesto di attivare di nuovo l'API, premi Attiva o aggiorna la pagina. Esegui il prompt: What is a dataset used for in BigQuery? Dopo aver esaminato la risposta, chiedi: How can I create a dataset named recipe_data using the Cloud Console? Confronta i risultati con i passaggi che seguono.

17. Nel riquadro di BigQuery Explorer, fai clic sul menu con tre puntini Visualizza azioni accanto all'ID progetto. Seleziona quindi Crea set di dati.

18. Fornisci il set di dati e l'ID di recipe_data. Lascia il tipo di località su US e fai clic su Crea set di dati. Se ricevi un messaggio di errore che indica che il set di dati esiste già, vai avanti.

Con il set di dati creato in BigQuery, torniamo al nostro notebook ed eseguiamo l'inserimento. 19. Torna al tuo notebook di manipolazione dei dati in Colab Enterprise. In una nuova cella di codice, crea una variabile denominata project_id e utilizzala per contenere l'ID progetto corrente. Guarda in alto a sinistra di queste istruzioni, sotto il pulsante Termina lab, per trovare l'ID progetto corrente. Se vuoi, è disponibile anche nella home page della console Cloud. Assegna il valore alla variabile project_id ed esegui la cella.

# Create a variable to hold the current project_id
project_id='YOUR_PROJECT_ID'

20. Utilizza l'approccio prompt > codice per creare un blocco di codice che inserisca il DataFrame dfs in una tabella denominata recipes nel set di dati che abbiamo appena creato recipe_data. Esegui la cella.

dfs.to_gbq(destination_table='recipe_data.recipes', project_id=project_id, if_exists='replace')

7. Attività 4: Crea un'app di ricerca in Vertex AI Agent Builder per il generatore di ricette

Ottimo, ora che abbiamo creato la tabella dei dati delle ricette, usiamola per creare un'origine dati basata su dati reali per il nostro generatore di ricette. L'approccio che utilizzeremo sarà simile a quello adottato per il nostro chatbot di cucina. Utilizzeremo Vertex AI Agent Builder per creare un datastore, che verrà poi utilizzato come origine attendibile per un'app di ricerca.

Se vuoi, puoi chiedere a Gemini nella console Google Cloud di ricordarti i passaggi per creare un'app di ricerca di Agent Builder oppure puoi seguire i passaggi elencati di seguito.

1. Utilizza la ricerca per accedere ad Agent Builder. Apri Datastore e Crea datastore. Questa volta, seleziona il tipo BigQuery Data Store.
2. Nella cella di selezione della tabella, premi Sfoglia e cerca recipes. Seleziona il pulsante di opzione accanto alla tabella. Se vedi ricette di altri progetti qwiklabs-gcp-…, assicurati di selezionare quello che ti appartiene.

Nota:se fai clic su recipes anziché selezionare il pulsante di opzione accanto, si aprirà una nuova scheda nel browser e verrà visualizzata la pagina Panoramica della tabella in BigQuery. Basta chiudere la scheda del browser e selezionare il pulsante di opzione in Agent Builder. 3. Esamina, ma non modificare le altre opzioni predefinite, quindi fai clic su Continua. 4. Nella pagina di revisione dello schema, esamina le configurazioni predefinite iniziali, ma non apportare modifiche. Continua 5. Assegna un nome al datastore recipe-data. Modifica l'ID del datastore e impostalo su recipe-data-id. Crea il datastore. 6. Vai ad App utilizzando il menu di navigazione a sinistra e seleziona Crea app. 7. Seleziona di nuovo l'app Ricerca. Assegna all'app il nome recipe-search e imposta l'ID su recipe-search-id. Imposta il nome dell'azienda su Google e fai clic su Continua. 8. Questa volta, controlla le origini dati recipe-data. Crea l'app.

L'indicizzazione della nostra tabella di database richiederà un po' di tempo. Nel frattempo, proviamo il nuovo canvas di dati di BigQuery e vediamo se riusciamo a trovare una o due ricette interessanti. 9. Utilizza la casella di ricerca per accedere a BigQuery. Nella parte superiore di BigQuery Studio, fai clic sulla Freccia giù accanto alla scheda più a destra e seleziona Data Canvas. Imposta la regione su us-central1.

10. Nella casella di ricerca del riquadro Dati, cerca recipes e Aggiungi al riquadro la tua tabella.
11. Una rappresentazione visiva della tabella delle ricette verrà caricata nel riquadro dei dati BigQuery. Puoi esplorare lo schema della tabella, visualizzare l'anteprima dei dati al suo interno ed esaminare altri dettagli. Sotto la rappresentazione della tabella, fai clic su Query.
12. Nel canvas verrà caricata una finestra di dialogo di query di BigQuery più o meno tipica con un'aggiunta: sopra la finestra della query è presente una casella di testo che puoi utilizzare per chiedere aiuto a Gemini. Vediamo se riusciamo a trovare alcune ricette di torte nel nostro esempio. Esegui il seguente prompt (digitando il testo e premendo Invio/Return per attivare la generazione di SQL):

Please select the title and ingredients for all the recipes with a title that contains the word cake.

13. Esamina il codice SQL generato. Quando il risultato ti soddisfa, Esegui la query.
14. Non male! Prima di continuare, puoi provare altri prompt e altre query. Quando esegui esperimenti, prova prompt meno specifici per capire cosa funziona e cosa no. Ad esempio, questo prompt:

Do I have any chili recipes?

(Non dimenticare di eseguire la nuova query) Ha restituito un elenco di ricette di chili, ma ha omesso gli ingredienti finché non l'ho modificato in:

Do I have any chili recipes?  Please include their title and ingredients.

Sì, dico per favore quando chiedo. Mia mamma sarebbe così orgogliosa.)

Ho notato che una ricetta del chili conteneva funghi. Chi li vuole nel chili? Ho chiesto a Gemini di aiutarmi a escludere queste ricette.

Do I have any chili recipes?  Please include their title and ingredients, and ignore any recipes with mushrooms as an ingredient.

8. Attività 5: Creare l'applicazione web di base in Python e Streamlit, con un po' di aiuto di Gemini

Ora che abbiamo indicizzato entrambi i datastore di Vertex AI Agent Builder e le nostre app di ricerca sono quasi pronte, iniziamo a creare la nostra applicazione web.

Durante il nostro lavoro, utilizzeremo Gemini Code Assist. Per ulteriori informazioni sull'utilizzo di Gemini Code Assist in Visual Studio Code, consulta la documentazione qui

Svilupperemo il progetto in una stazione di lavoro Google Cloud, un ambiente di sviluppo basato su cloud, nel nostro caso precaricato con Eclipse Theia (Visual Studio Code open source). Uno script automatico in questo esercizio ha creato per noi il cluster e la configurazione di Cloud Workstation, ma dobbiamo comunque creare la stessa Cloud Workstation. Se vuoi saperne di più su Cloud Workstations e sul loro utilizzo, rivolgiti a Gemini Cloud Assist :-)

1. Utilizza la ricerca per andare a Cloud Workstations, quindi a Crea workstation. Assegna un nome alla workstation dev-env e utilizza la configurazione my-config. Crea la workstation.
2. Dopo alcuni minuti, vedrai la nuova workstation nell'elenco Le mie workstation. Avvia dev-env e, una volta in esecuzione, avvia l'ambiente di sviluppo.
3. L'editor della stazione di lavoro si aprirà in una nuova scheda del browser e dopo alcuni istanti dovresti vedere un'interfaccia Theia (Visual Studio Code) familiare. Sul lato sinistro dell'interfaccia, espandi la scheda Controllo del codice sorgente e premi Clona repository.

4. Per l'URL del repository, inserisci https://github.com/haggman/recipe-app. Clona il repository nella cartella user, quindi apri il repository clonato per modificarlo.
5. Prima di esplorare la cartella clonata e iniziare a lavorare alla nostra applicazione web, dobbiamo accedere a Google Cloud con il plug-in Cloud Code dell'editor e attivare Gemini. Ed è quello che faremo ora. In basso a sinistra nell'editor, fai clic su Cloud Code - Accedi. Se non vedi il link, attendi un minuto e ricontrolla.

6. Nella finestra del terminale viene visualizzato un URL lungo. Apri l'URL nel browser ed esegui i passaggi per concedere a Cloud Code l'accesso al tuo ambiente Google Cloud. Assicurati di utilizzare il tuo account temporaneo per l'esercizio student-... e non il tuo account Google Cloud personale durante l'autenticazione. Nella finestra di dialogo finale, copia il codice di verifica e incollalo di nuovo nella finestra del terminale in attesa nella scheda del browser di Cloud Workstation.
7. Dopo alcuni istanti, il link Cloud Code in basso a sinistra nell'editor diventerà Cloud Code - No Project. Fai clic sul nuovo collegamento per selezionare un progetto. La tavolozza dei comandi dovrebbe aprirsi nella parte superiore dell'editor. Fai clic su Seleziona un progetto Google Cloud e seleziona il progetto qwiklabs-gcp-…. Dopo alcuni istanti, il link in basso a sinistra nell'editor verrà aggiornato per mostrare l'ID progetto. Ciò indica che Cloud Code è stato collegato correttamente al tuo progetto di lavoro.
8. Ora che Cloud Code è collegato al tuo progetto, puoi attivare Gemini Code Assist. In basso a destra nell'interfaccia dell'editor, fai clic sul logo Gemini barrato. Il riquadro della chat di Gemini si aprirà a sinistra dell'editor. Fai clic su Seleziona un progetto Google Cloud. Quando si apre la palette dei comandi, seleziona il progetto qwiklabs-gcp-…. Se hai seguito correttamente i passaggi (e Google non ha modificato nulla), ora dovresti vedere una finestra di Gemini Chat attiva.

9. Infine, configura la finestra del terminale dell'editor allo stesso modo. Utilizza il menu a tre linee > Visualizza > Terminale per aprire la finestra del terminale. Esegui gcloud init. Ancora una volta, utilizza il link per consentire al terminale Cloud Shell di lavorare con il tuo progetto qwiklabs-gcp-.... Quando richiesto, seleziona l'opzione numerica del tuo progetto qwiklabs-gcp-....
10. Ottimo, con le configurazioni del terminale, della chat di Gemini e di Cloud Code, apri la scheda Explorer e prenditi qualche minuto per esplorare i file del progetto corrente.

11. In Esplora file, apri il file requirements.txt per modificarlo. Passa al riquadro della chat di Gemini e chiedi:

From the dependencies specified in the requirements.txt file, what type of application are we building?

12. Quindi, stiamo creando un'applicazione web interattiva utilizzando Python e Streamlit che interagisce con Vertex AI e Discovery Engine. Per il momento, concentriamoci sui componenti dell'applicazione web. Come dice Gemini, Streamlit è un framework per la creazione di applicazioni web basate sui dati in Python. Ora chiedi:

Does the current project's folder structure seem appropriate for a Streamlit app?s

È qui che Gemini tende ad avere problemi. Gemini può accedere al file attualmente aperto nell'editor, ma non può vedere l'intero progetto. Prova a chiedere:

Given the below, does the current project's file and folder structure seem appropriate for a Streamlit app?

- build.sh
- Home.py
- requirements.txt
- pages
-- Cooking_Advice.py
-- Recipe_Search.py

Ricevere una risposta migliore?

13. Ecco alcune informazioni aggiuntive su Streamlit:

What can you tell me about Streamlit?

Ottimo, quindi possiamo vedere che Gemini ci offre una bella panoramica, inclusi i pro e i contro.

14. Se vuoi esplorare i lati negativi, puoi chiedere:

What are the major downsides or shortcomings?

Tieni presente che non abbiamo dovuto dire "di Streamlit" perché Gemini Chat è una chat di tipo conversazionale (multi-turno). Gemini sa di cosa stiamo parlando perché siamo in una sessione di chat. Se in un secondo momento vuoi cancellare la cronologia chat di Gemini, utilizza l'icona del cestino nella parte superiore della finestra della chat del codice Gemini.

9. Attività 6: esegui il deployment dell'applicazione web in Cloud Run

Ottimo, abbiamo implementato la struttura di base dell'applicazione, ma funzionerà tutto? Meglio ancora, dove dovremmo ospitarlo in Google Cloud?

1. Nella finestra della chat di Gemini, chiedi:

If I containerize this application, what compute technologies
in Google Cloud would be best for hosting it?

2. Ricorda che, se non stavi già lavorando nell'IDE, puoi anche utilizzare Google Cloud Assist. Apri la console Google Cloud, quindi apri Gemini Cloud Assist e chiedi:

If I have a containerized web application, where would be the
best place to run it in Google Cloud?

I due set di consigli erano uguali? Sei d'accordo o in disaccordo con alcuni dei consigli? Ricorda che Gemini è un assistente con IA generativa e, come un assistente umano, non sarà sempre d'accordo con tutto ciò che dice. Tuttavia, avere questo strumento sempre a portata di mano mentre lavori in Google Cloud e nel tuo editor di codice può aiutarti a essere molto più efficiente.

3. Per un'applicazione web containerizzata stateless di breve durata, Cloud Run è un'ottima opzione. Nella finestra della chat di Gemini del tuo editor di codice, prova il prompt:

What steps would be required to run this application in
Cloud Run?

4. Sembra che la prima cosa da fare sia creare un Dockerfile. Utilizzando l'editor, crea un file denominato Dockerfile nella cartella principale del progetto. Assicurati di non inserirlo per errore nella cartella Pagina. Apri il file per la modifica.
5. Utilizziamo il riquadro laterale della chat di Gemini per creare il nostro Dockerfile. Utilizza un prompt come quello riportato di seguito. Quando i risultati vengono visualizzati nella chat, utilizza il segno Più accanto all'icona di copia appena sopra il Dockerfile suggerito per inserire il codice suggerito nel Dockerfile.

Create a Dockerfile for the application in the current folder.
The dependencies are defined in requirements.txt and I want you
to use the Python 3 slim bookworm base image.

Gemini non restituisce sempre la stessa risposta allo stesso prompt. La prima volta che ho chiesto a Gemini un Dockerfile, ho ricevuto il file esatto che ti suggerirò di utilizzare. Ho appena ricevuto il seguente suggerimento:

```docker
# Base image
FROM python:3-bookworm-slim

# Set working directory
WORKDIR /app

# Install dependencies
RUN apt-get update && apt-get install -y \
    build-essential \
    libpq-dev \
    gcc \
    python3-dev \
    && rm -rf /var/lib/apt/lists/*

# Install pip and virtualenv
RUN pip install --upgrade pip virtualenv

# Create virtual environment
RUN python3 -m venv venv

# Activate virtual environment
WORKDIR /app/venv/bin
RUN . activate

# Install Streamlit and libraries from requirements.txt
RUN pip install -r requirements.txt

# Copy application files
COPY . /app

# Expose port 8501 for Streamlit
EXPOSE 8501

# Start Streamlit app
CMD ["streamlit", "run", "main.py"]

That's a heck of a Dockerfile. I'd simplify it a bit. We don't need the apt-get section as anything needed for Python is already in our base image. Also, using a virtual environment in a Python container is a waste of space, so I'd remove that. The expose command isn't strictly necessary, but it's fine. Also, it's trying to start main.py which I don't have.

6. Tweak the Dockerfile so it resembles the following:

FROM python:3.11-slim-bookworm

WORKDIR /app

COPY requirements.txt . RUN pip install –no-cache-dir –upgrade pip &&
pip install –no-cache-dir -r requirements.txt

COPY . .

CMD ["streamlit", "run", "Home.py"]

7. We need a place in Google cloud where we can store our container image. Let's get a little help from Gemini. In the Google Cloud Console Gemini Cloud Assist ask:

Qual è il posto migliore in Google Cloud per archiviare le immagini Docker?

8. If one of the answers you received is the Google Container Registry, then I guess Gemini hasn't gotten word that GCR is deprecated. Again, just like human assistants, you may get out of date or simply wrong answers (hallucinations). Always make sure to consider your choices carefully, even when Gemini is recommending something.

Let's go with Artifact Registry. Ask Gemini Cloud Assist how to create a docker registry in Artifact Registry named cooking-images.

How can I use gcloud to create a docker registry in Artifact Registry?

9. Now ask Gemini how you could use Cloud Build to build a new image named `recipe-web-app` from the Dockerfile in the current folder.

Come posso utilizzare gcloud per creare un nuovo servizio Cloud Run denominato recipe-web-app da un'immagine con lo stesso nome dal repository Artifact Registry che abbiamo appena creato?

10. To save you a little time, I've created a script that will create the Artifact Registry repo (if needed), use Cloud Build to build and push the image to the repo, and finally to deploy the application to Cloud Run. In your code editor use the **Explorer** view to open `build.sh` and explore the file.
11. Gemini can operate via the chat window, but it can also work directly in your code file using comments, like we used in the Data Wrangling notebook, and it also may be invoked using Control+i on Windows or Command+i on Mac. Click somewhere in the build.sh script file, activate Gemini using the appropriate Command+i / Control+i command.

<img src="img/61ac2c9a245a3695.png" alt="61ac2c9a245a3695.png"  width="624.00" />

12. At the prompt enter the below. Examine and **Accept** the change.

Aggiungi un commento al file corrente.

How cool is that?! How many times have you had to work with someone elses code, only to have to waste time gaining a base understanding of their commentless work before you can even start making your changes. Gemini to the rescue!

13. Let's build and deploy our application. In the terminal window execute the `build.sh` file.

. build.sh

14. If you watch the build process, first it will build the Artifact Registry docker repo. Then, it uses Cloud Build to create the container image from the Dockerfile in the local folder (since we didn't supply a `cloudbuild.yaml`). Lastly, the docker image will be deployed into a new Cloud Run service. At the end of the script you'll get a Cloud Run test URL to use.

Open the returned link in a new tab of your browser. Take a moment and explore the application's structure and pages. Nice, now we need a hook in our generative AI functionality.


## Task 7: Connect the Cooking Advice page to our cookbook-search Agent Builder app



We have the framework for the web application running, but we need to connect the two work pages to our two Vertex AI Agent Builder search apps. Let's start with Cooking Advice.

1. In the Google Cloud console use search to navigate to **Chat** in Vertex AI.
2. In the right hand settings page pane set the model to **gemini-1.5-flash-002**. Slide the output token limit up to the max so the model can return longer answers if needed. Open the **Safety Filter Settings**. Set Hate speech, Sexually explicit content, and Harassment content to **Block some**. Set Dangerous content to **Block few** and **Save**. We're setting Dangerous Content a bit lower because talking about knives and cutting can be misinterpreted by Gemini as violence.
3. Slide on the toggle to enable **Grounding** then click **Customize**. Set the grounding source to **Vertex AI search** and for the datastore path use the following. Change YOUR_PROJECT_ID to the project ID found up near the End Lab button in these instructions, then **Save** the grounding settings

projects/YOUR_PROJECT_ID/locations/global/collections/default_collection/dataStores/old-cookbooks-id

**Note:** If you get an error then you either didn't change the project ID to your actual project ID, or you may have missed the step where you changed the old-cookbooks Agent Builder Data Store ID. Check your Agent Builder > Data Stores > old-cookbooks for its actual Data store ID.

4. Test a couple of chat messages. Perhaps start with the below. Try a few others if you like.

Come faccio a capire se un pomodoro è maturo?

5. The model works, now let's experiment with the code. Click **Clear Conversation** so our conversations don't become part of the code then click **Get Code**.

<img src="img/dce8ad7ee006cca1.png" alt="dce8ad7ee006cca1.png"  width="624.00" />

6. At the top of the code window, press Open Notebook so we can experiment and perfect the code in Colab Enterprise before integrating it into our app.
7. Take a few minutes to familiarize yourself with the code. Let's make a couple of changes to adapt it to what we want. Before we start, run the first code cell to connect to the compute and install the AI Platform SDK. After the block runs you will be prompted to restart the session. Go ahead and do that.
8. Move to the code we pulled out of Vertex AI Studio. Change the name of the method *multiturn_generate_content* to `start_chat_session`.
9. Scroll to the `model = GenerativeModel(` method call. The existing code defines the `generation_config` and `safety_settings` but doesn't actually use them. Modify the creation of the `GenerativeModel` so it resembles:

model = GenerativeModel( "gemini-1.5-flash-002", tools=tools, generation_config=generation_config, safety_settings=safety_settings, )

10. Lastly, add a final line to the method, just below `chat = model.start_chat()`, so the function returns the `chat` object. The finished function should look like the below.

**Note:** DO NOT COPY this code into your notebook. It is simply here as a sanity check.

def start_chat_session(): vertexai.init(project="qwiklabs-gcp-02-9a7298ceaaec", location="us-central1") tools = [ Tool.from_retrieval( retrieval=grounding.Retrieval( source=grounding.VertexAISearch(datastore="projects/qwiklabs-gcp-02-9a7298ceaaec/locations/global/collections/default_collection/dataStores/old-cookbooks-id"), ) ), ] model = GenerativeModel( "gemini-1.5-flash-002", tools=tools, generation_config=generation_config, safety_settings=safety_settings, ) chat = model.start_chat() return chat

11. Scroll to the bottom of the code cell and change the final line calling the old function so it calls the new function name and stores the returned object in a variable `chat`. Once you are satisfied with your changes, run the cell.

chat = start_chat_session()

12. Create a new code cell and add the comment `# Use chat to invoke Gemini and print out the response`. Move to the next line and type resp and Gemini should auto complete the block for you. Update the prompt to `How can I tell if a tomato is ripe?`. Run the cell

response = chat.send_message("Come faccio a capire se un pomodoro è maturo?") print(response)

13. That's the response alright, but the part we really want is that nested text field. Modify the codeblock to print just that section, like:

response = chat.send_message("How can I tell if a tomato is ripe?") print(response.candidates[0].content.parts[0].text)

14. Good, now that we have working chat code, let's integrate it into our web application. Copy all the contents of the code cell that creates the `start_chat_session` function (we won't need the test cell). If you click into the cell you can click the triple dot menu in the upper right corner and copy from there

<img src="img/17bf8d947393d4b.png" alt="17bf8d947393d4b.png"  width="326.00" />

15. Switch to your Cloud Workstation editor and open pages\Cooking_Advice.py for editing.
16. Locate the comment:

Aggiungi il codice che hai copiato dal tuo notebook sotto questo messaggio

17. Paste your copied code just below the above comment. Nice, now we have the section which drives the chat engine via a grounded call to Gemini. Now let's integrate it into Streamlit.
18. Locate section of commented code directly below the comment:

Ecco il codice per configurare le variabili di sessione

Rimuovi il commento da questo blocco quando richiesto

19. Uncomment this section of code (Up till the next `Setup done, let's build the page UI` section) and explore it. It creates or retrieves the chat and history session variables.
20. Next, we need to integrate the history and chat functionality into the UI. Scroll in the code until you locate the below comment.

Ecco il codice per creare l'interfaccia di chat

Rimuovi il commento dal codice riportato di seguito quando richiesto

21. Uncomment the rest of the code below the comment and take a moment to explore it. If you like, highlight it and get Gemini to explain its functionality.
22. Excellent, now let's build the application and deploy it. When the URL comes back, launch the application and give the Cooking Advisor page a try. Perhaps ask it about ripe tomatoes, or the bot knows a good way to prepare brussels sprouts.

. build.sh

How cool is that! Your own personal AI cooking advisor :-)


## Task 8: (Optional) Connect the Recipe Search page to the recipe-search Agent Builder app



When we connected the Cooking Advice page to its grounded source, we did so using the Gemini API directly. For Recipe Search, let's connect to the Vertex AI Agent Builder search app directly.

1. In your Cloud Workstation editor, open the `pages/Recipe_Search.py` page for editing. Investigate the structure of the page.
2. Towards the top of the file, set your project ID.
3. Examine the `search_sample` function. This code more or less comes directly from the Discovery Engine documentation  [here](https://cloud.google.com/generative-ai-app-builder/docs/preview-search-results#genappbuilder_search-python). You can find a working copy in this notebook  [here](https://github.com/GoogleCloudPlatform/generative-ai/blob/main/search/create_datastore_and_search.ipynb).
4. The only change I made was to return the `response.results` instead of just the results. Without this, the return type is an object designed to page through results, and that's something we don't need for our basic application.
5. Scroll to the very end of the file and uncomment the entire section below `Here are the first 5 recipes I found`.
6. Highlight the whole section you just uncommented and open Gemini Code chat. Ask, `Explain the highlighted code`. If you don't have something selected, Gemini can explain the whole file. If you highlight a section and ask Gemini to explain, or comment, or improve it, Gemini will.

Take a moment and read through the explanation. For what it's worth, using a Colab Enterprise notebook is a great way to explore the Gemini APIs before you integrate them into your application. It's especially helpful at exploring some of the newer APIs which may not be documented as well as they could be.
7. At your editor terminal window, run `build.sh` to deploy the final application. Wait until the new version is deployed before moving to the next step.


## Task 9: (Optional) Explore the final application



Take a few minutes to explore the final application.

1. In the Google Cloud console, use search to navigate to **Cloud Run**, then click into your **recipe-web-app**.
2. Locate the application test URL (towards the top) and open it in a new browser tab.
3. The application home page should appear. Note the basic layout and navigation provided by Streamlit, with the python files from the `pages` folder displayed as navigational choices, and the `Home.py` loaded as the home page. Navigate to the **Cooking Advice** page.
4. After a few moments the chat interface will appear. Again, note the nice core layout provided by Streamlit.
5. Try a few cooking related questions and see how the bot functions. Something like:

Hai qualche consiglio per la preparazione dei broccoli?

Che ne dici di una ricetta classica della zuppa di pollo?

Parlami della meringa.

6. Now let's find a recipe or two. Navigate to the Recipe Search page and try a few searches. Something like:

Chili con carne

Peperoncino, mais, riso

Torta meringata al limone

Un dolce contenente fragole

## Congratulations!



You have created an application leveraging Vertex AI Agent Builder applications. Along the way you've explored Gemini Cloud Assist, Gemini Code Assist, and the natural language to SQL features of BigQuery's Data Canvas. Fantastic job!