1. Panoramica
In questo lab, utilizzerai i prodotti di AI generativa di Google per creare infrastrutture in Google Cloud con l'aiuto di Gemini Cloud Assist, eseguire query sui dati BigQuery utilizzando le funzionalità di linguaggio naturale in SQL di Data Canvas, scrivere codice nei notebook Jupyter 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 AI basate su Cloud Storage e sulle origini di base di 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 fonte di Vertex AI Agent Builder basata su un gruppo di libri di cucina. Offrirà consigli di cucina e risponderà a domande relative alla cucina. Recipe Search sarà un motore di ricerca alimentato da Gemini, questa volta basato su un database di ricette BigQuery.
Se hai difficoltà con il codice di 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 di cucina
- Carica e pulisci 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
- Definisci la struttura dell'applicazione web principale Python e Streamlit, con un piccolo aiuto di Gemini
- Esegui il deployment dell'applicazione web in Cloud Run
- Collega la pagina Consigli di cucina alla nostra app per la creazione di agenti di ricerca di ricette
- (Facoltativo) Collega la pagina di ricerca di 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 Inizia il 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
- Fai clic sul pulsante Avvia 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.

- Copia il nome utente, quindi 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.

- 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:
- Accetta i termini e le condizioni.
- Non inserire opzioni di recupero o l'autenticazione a due fattori, perché si tratta di un account temporaneo.
- Non registrarti per le prove senza costi.
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: Controllare il cluster di workstation
In una parte successiva di questo lab utilizzerai una workstation Google Cloud per svolgere alcune attività di sviluppo. Il processo di avvio di questo lab dovrebbe aver avviato la creazione del cluster della workstation. Prima di andare avanti, assicuriamoci che il cluster sia in fase di creazione.
- Nella console Google Cloud, utilizza la casella di ricerca per andare a Cloud Workstations.
- Utilizza il menu di navigazione a sinistra per visualizzare Gestione cluster.
- Se hai un cluster in fase di aggiornamento, puoi passare all'attività 1. Se non vedi cluster in nessuno stato, aggiorna la pagina. Se ancora non vedi un cluster in aggiornamento (in 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. Mentre lavori nella console Google Cloud, Gemini Cloud Assist può offrirti consigli, aiutarti a creare, configurare e monitorare la tua infrastruttura Google Cloud e può persino suggerire comandi gcloud e scrivere script Terraform.
- Per attivare Cloud Assist, fai clic nella casella di ricerca nella parte superiore della UI della console Cloud e seleziona Chiedi a Gemini (o la dicitura potrebbe essere Chiedi a Gemini per la console Cloud).
- Scorri fino alla sezione API obbligatoria della pagina e abilita l'API Gemini for Google Cloud.
- Se non vedi subito un'interfaccia di chat, fai clic su Inizia a chattare. Inizia chiedendo a Gemini di spiegare alcuni dei vantaggi dell'utilizzo di Cloud Workstations. Dedica qualche minuto del tuo tempo a esplorare la risposta generata.
- Poi, chiedi quali sono i vantaggi di Agent Builder e come può contribuire a rendere più concrete le risposte generative.
- Infine, diamo un'occhiata a un confronto. Nella finestra della chat di Gemini della console Google Cloud, poni la seguente domanda:
What are the major steps to creating a search app grounded in a
GCS data source using Vertex AI Agent builder?
- Ora, nella finestra non in incognito, vai al sito web pubblico di Gemini qui, accedi se necessario e poni la stessa domanda. Le risposte sono uguali o almeno simili? I passaggi specifici? Uno dei due è notevolmente migliore? In ogni caso, tieni a mente le risposte mentre esegui i passaggi successivi.
Nota:se provi a eseguire il passaggio precedente utilizzando il tuo account Qwiklabs temporaneo, l'operazione verrà bloccata. 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 l'esercizio.
5. Attività 2: Crea un'app di ricerca in Vertex AI Agent Builder per il chatbot di consigli di cucina
Il sito web che stiamo creando avrà una pagina di consigli di cucina 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 libri di cucina fungeranno da fonte di riferimento che Gemini utilizza per rispondere alle domande.
- 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 è necessario abilitare l'API Vertex AI, fai clic su Abilita.
- Utilizza la ricerca per andare su Agent Builder, quindi fai clic su Continua e attiva l'API.
- Come suggerito da Gemini nella nostra precedente richiesta di consigli, 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à nella fonte di base le informazioni utilizzate nella risposta, anziché attingere alle sue conoscenze innate.
Nel menu a sinistra, vai a Datastore e fai clic su Crea datastore. 4. I libri di cucina di pubblico dominio che utilizziamo per la nostra pagina di consigli di cucina si trovano attualmente in un bucket Cloud Storage in un progetto esterno. Seleziona il tipo di origine Cloud Storage. 5. Esamina, ma non modificare, le opzioni predefinite relative al tipo di informazioni che importiamo. Lascia il tipo di importazione impostato su Cartella e per il percorso del bucket utilizza: labs.roitraining.com/labs/old-cookbooks, poi fai clic su Continua. 6. Assegna un nome al datastore: old-cookbooks. Modifica e cambia l'ID in old-cookbooks-id e Crea il datastore.
Vertex AI Agent Builder supporta diversi tipi di app e il datastore funge da fonte attendibile per ciascuno. Le app di ricerca sono utili per l'uso e la ricerca generici. 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 Agente, invece, servono per creare agenti basati sull'AI generativa. Alla fine, l'agente probabilmente ci servirà al meglio per quello che vogliamo fare, ma dato che il prodotto è attualmente in anteprima, continueremo a utilizzare il tipo di app di ricerca. 7. Utilizza il menu a sinistra per andare ad App, quindi fai clic su Crea app. 8. Seleziona il tipo di app Ricerca. Esamina le varie opzioni, ma non modificarle. Assegna un nome all'app: cookbook-search. Modifica e imposta l'ID app su cookbook-search-id. Imposta la società su Google e fai clic su Continua. 9. Seleziona il datastore old-cookbooks che hai creato qualche passaggio fa e fai clic su Crea l'app di ricerca.
Se esamini la scheda Attività, probabilmente vedrai che i libri di cucina sono ancora in fase di importazione e indicizzazione. Agent Builder impiegherà più di 5 minuti per indicizzare le migliaia di pagine contenute nelle 70 ricette 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 notebook Colab Enterprise con l'aiuto di Gemini Code Assist
Google Cloud offre due modi principali per lavorare con i notebook Jupiter. Utilizzeremo la nuova offerta di Google, Colab Enterprise. Alcuni di voi potrebbero conoscere il prodotto Colab di Google, comunemente utilizzato da privati e organizzazioni che vogliono sperimentare 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 GCP.
Una delle funzionalità offerte da Colab Enterprise è l'integrazione con Gemini Code Assist di Google. Code Assist può essere utilizzato in diversi editor di codice e può offrire consigli e suggerimenti in linea senza interruzioni durante la codifica. Sfrutteremo questo assistente generativo mentre organizziamo i dati delle nostre ricette.
- Utilizza la ricerca per andare a Colab Enterprise e Crea un notebook. Se ricevi un'offerta per sperimentare nuove funzionalità di Colab, ignorala. Per avviare il runtime, la potenza di calcolo alla base del notebook, premi Connetti nell'angolo in alto a destra del nuovo notebook.

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

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

- Modifica la casella di testo e inserisci:
# Data Wrangling
Import the Pandas library
- Nel blocco di codice sotto il blocco di testo 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
- 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.
- Crea e modifica un altro blocco di codice. Digita di nuovo df ed esamina il codice generato da Gemini Code Assist. Se visualizzi un elenco a discesa di completamento automatico delle parole chiave Python sopra il suggerimento generato, premi Esc per visualizzare il codice suggerito in grigio chiaro. Premi di nuovo Tab per accettare il suggerimento. Se il suggerimento non conteneva la chiamata alla funzione head(), aggiungila.
df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
df.head()
- 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 esegue la cella e sposta 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. Mentre una cella è in esecuzione, vedrai un'animazione rotante. 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, passa alla riga di codice successiva e dovresti ricevere il suggerimento df.columns. Accettalo e poi 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 blocchi note Jupyter, ma questo approccio funziona anche in qualsiasi altro IDE che supporti l'Assistente codice Gemini di Google.
- Facciamo un po' di pulizia delle colonne. Rinomina la colonna
Unnamed: 0inidelinkinuri. Utilizza le tecniche di prompt e codice che preferisci per creare il codice, quindi esegui la cella quando sei soddisfatto.
# Rename the column 'Unnamed: 0' to 'id' and 'link' to 'uri'
df.rename(columns={'Unnamed: 0': 'id', 'link': 'uri'}, inplace=True)
- Rimuovi le colonne
sourceeNERe utilizzahead()per visualizzare le prime righe. Anche in questo caso, chiedi 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()
- Vediamo quanti record ci sono nel nostro set di dati. Ancora una volta, inizia con la tecnica di prompt che preferisci e vedi se riesci a chiedere a Gemini di aiutarti a generare il codice.
# Count the records in the DataFrame
df.shape # count() will also work
- 2,23 milioni di record sono probabilmente più ricette di quelle che abbiamo il tempo di preparare. Il processo di indicizzazione in Agent Builder richiederebbe probabilmente troppo tempo per l'esercizio di oggi. Come compromesso, campioniamo 150.000 ricette e lavoriamo con queste. Utilizza l'approccio prompt > codice per prendere il campione e archiviarlo in un nuovo DataFrame denominato
dfs(s sta per small).
# Sample out 150,000 records into a DataFrame named dfs
dfs = df.sample(n=150000)
- I dati di origine della ricetta sono pronti per essere caricati in BigQuery. Prima di eseguire il caricamento, andiamo su BigQuery e prepariamo un set di dati per contenere la nostra tabella. Nella console Google Cloud, utilizza la casella di ricerca per andare a BigQuery. Potresti fare clic con il tasto destro del mouse su BigQuery e aprirlo in una nuova scheda del browser.
- Se non è già visibile, apri il riquadro della chat con Gemini AI utilizzando il logo di Gemini in alto a destra nella console Google Cloud. Se ti viene chiesto di abilitare di nuovo l'API, premi Abilita 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 successivi.

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

- Fornisci il set di dati e l'ID di
recipe_data. Lascia il tipo di località impostato su Stati Uniti e fai clic su Crea set di dati. Se ricevi un errore che indica che il set di dati esiste già, vai avanti.
Ora che abbiamo creato il set di dati in BigQuery, torniamo al nostro notebook ed eseguiamo l'inserimento. 19. Torna al notebook di Data Wrangling in Colab Enterprise. In una nuova cella di codice, crea una variabile denominata project_id e utilizzala per memorizzare l'ID progetto attuale. Guarda in alto a sinistra in queste istruzioni, sotto il pulsante Termina lab, e troverai l'ID progetto attuale. Se preferisci, puoi trovarlo 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'
- Utilizza l'approccio prompt > codice per creare un blocco di codice che inserirà il DataFrame
dfsin una tabella denominatarecipesnel set di dati che abbiamo appena creatorecipe_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, utilizziamola per creare un'origine dati basata su fatti concreti 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 fonte 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 Agent Builder oppure puoi seguire i passaggi elencati di seguito.
- Utilizza la ricerca per andare ad Agent Builder. Apri Datastore e Crea datastore. Questa volta, seleziona il tipo di archivio dati BigQuery.
- 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 quella 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 di 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, poi fai clic su Continua. 4. Nella pagina di revisione dello schema, esamina le configurazioni predefinite iniziali, ma non modificare nulla. Continua. Assegna un nome al datastore recipe-data. Modifica l'ID datastore e impostalo su recipe-data-id. Crea il datastore. 6. Nel menu di navigazione a sinistra, vai ad App e fai clic su 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 tabella del database richiederà un po' di tempo. Nel frattempo, proviamo il nuovo Data Canvas di BigQuery e vediamo se riusciamo a trovare una o due ricette interessanti. 9. Utilizza la casella di ricerca per andare a BigQuery. Nella parte superiore di BigQuery Studio, fai clic sulla Freccia giù accanto alla scheda più a destra e seleziona Canvas dei dati. Imposta la regione su us-central1.

- Nella casella di ricerca del data canvas, cerca
recipese fai clic su Aggiungi al canvas per aggiungere la tabella. - Una rappresentazione visiva della tabella delle ricette verrà caricata nel canvas di BigQuery Data. Puoi esplorare lo schema della tabella, visualizzare l'anteprima dei dati nella tabella ed esaminare altri dettagli. Sotto la rappresentazione della tabella, fai clic su Query.
- Il canvas caricherà una finestra di dialogo per le query 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 campione. Esegui il seguente prompt (digitando il testo e premendo Invio/Ritorno per attivare la generazione SQL):
Please select the title and ingredients for all the recipes with a title that contains the word cake.
- Esamina l'SQL generato. Quando il risultato ti soddisfa, esegui la query.
- Niente male. Prima di andare avanti, prova a sperimentare con altri prompt e query. Quando fai esperimenti, prova prompt meno specifici per vedere 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 modificata in:
Do I have any chili recipes? Please include their title and ingredients.
(Sì, dico per favore quando do un prompt. Mia mamma sarebbe così orgogliosa.
Ho notato che una ricetta del chili conteneva funghi e chi vuole i funghi 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: Definisci la struttura dell'applicazione web principale Python e Streamlit, con un piccolo aiuto di Gemini
Con l'indicizzazione di entrambi i nostri datastore di Vertex AI Agent Builder e con le nostre app di ricerca quasi pronte per il lancio, iniziamo a creare la nostra applicazione web.
Utilizzeremo Gemini Code Assist durante il lavoro. Per saperne di più sull'utilizzo di Gemini Code Assist in Visual Studio Code, consulta la documentazione qui.
Svilupperemo in una workstation Google Cloud, un ambiente di sviluppo basato sul cloud che, nel nostro caso, è precaricato con Eclipse Theia (Visual Studio Code open source). Uno script automatizzato in questo esercizio ha creato il cluster e la configurazione di Cloud Workstations per noi, ma dobbiamo ancora creare la workstation Cloud. Se vuoi saperne di più su Cloud Workstations e sul loro utilizzo, chiedi a Gemini Cloud Assist :-)
- Utilizza la ricerca per andare a Cloud Workstations, poi fai clic su Crea workstation. Assegna un nome alla workstation
dev-enve utilizza la configurazione my-config. Crea la workstation. - Dopo qualche minuto, la nuova workstation verrà visualizzata nell'elenco Le mie workstation. Avvia
dev-enve, una volta in esecuzione, avvia l'ambiente di sviluppo. - L'editor della workstation si aprirà in una nuova scheda del browser e dopo qualche istante dovresti visualizzare un'interfaccia Theia (Visual Studio Code) familiare. Sul lato sinistro dell'interfaccia, espandi la scheda Controllo della sorgente e premi Clona repository.

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

- Nella finestra del terminale verrà visualizzato un URL lungo. Apri l'URL nel browser e segui i passaggi per concedere a Cloud Code l'accesso al tuo ambiente Google Cloud. Assicurati di utilizzare il tuo account temporaneo
student-...per l'esercizio e non il tuo account Google Cloud personale durante l'autenticazione. Nella finestra di dialogo finale, copia il codice di verifica e incollalo nella finestra del terminale in attesa nella scheda del browser Cloud Workstations. - Dopo alcuni istanti, il link Cloud Code in basso a sinistra dell'editor cambierà in Cloud Code - No Project (Cloud Code - Nessun progetto). Fai clic sul nuovo link 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 tuo progetto qwiklabs-gcp-.... Dopo qualche istante, il link in basso a sinistra dell'editor si aggiornerà per mostrare l'ID progetto. Ciò indica che Cloud Code è stato collegato correttamente al tuo progetto di lavoro.
- Con Cloud Code connesso al tuo progetto, ora puoi attivare Gemini Code Assist. In basso a destra dell'interfaccia dell'editor, fai clic sul logo di Gemini barrato. Il riquadro di Gemini Chat si aprirà a sinistra dell'editor. Fai clic su Seleziona un progetto Google Cloud. Quando si apre la tavolozza dei comandi, seleziona il progetto qwiklabs-gcp-.... Se hai seguito correttamente i passaggi (e Google non ha apportato modifiche), ora dovresti visualizzare una finestra di chat di Gemini attiva.

- Infine, configuriamo la finestra del terminale dell'editor. Utilizza menu hamburger > Visualizza > Terminale per aprire la finestra del terminale. Esegui
gcloud init. Ancora una volta, utilizza il link per consentire al terminale Cloud Shell di funzionare con il tuo progettoqwiklabs-gcp-.... Quando richiesto, seleziona l'opzione numerica del tuo progettoqwiklabs-gcp-.... - Ottimo. Con il terminale, la chat di Gemini e le configurazioni di Cloud Code impostate, apri la scheda Explorer e dedica qualche minuto a esplorare i file nel progetto corrente.

- In Esplora risorse apri il file
requirements.txtper 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?
- Quindi, stiamo creando un'applicazione web interattiva utilizzando Python e Streamlit che interagisce con Vertex AI e Discovery Engine. Per ora, 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?
- Vediamo alcune informazioni aggiuntive su Streamlit:
What can you tell me about Streamlit?
Bene, quindi possiamo vedere che Gemini ci offre una panoramica completa, inclusi pro e contro.
- Se volessi esplorare gli svantaggi, potresti chiedere:
What are the major downsides or shortcomings?
Nota che non abbiamo dovuto dire "di Streamlit" perché Gemini Chat è conversazionale (multi-turno). Gemini sa di cosa abbiamo parlato perché siamo in una sessione di chat. Se in qualsiasi momento vuoi cancellare la cronologia della chat con Gemini, utilizza l'icona del cestino nella parte superiore della finestra della chat di Gemini Code.
9. Attività 6: esegui il deployment dell'applicazione web in Cloud Run
Ottimo, abbiamo la struttura dell'applicazione principale, ma funzionerà tutto? Ancora meglio, dove dobbiamo ospitarlo in Google Cloud?
- Nella finestra della chat con Gemini, chiedi:
If I containerize this application, what compute technologies
in Google Cloud would be best for hosting it?
- Ricorda che, se non stavi già lavorando nel tuo IDE, puoi anche utilizzare Google Cloud Assist. Apri la console Google Cloud, poi 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 consigli erano gli stessi? Sei d'accordo o in disaccordo con uno dei consigli? Ricorda che Gemini è un assistente di AI generativa e, come un assistente umano, non sempre sarai d'accordo con tutto ciò che dice. Tuttavia, avere questo assistente sempre al tuo fianco mentre lavori in Google Cloud e nell'editor di codice può renderti molto più efficiente.
- Per un'applicazione web containerizzata stateless di breve durata, Cloud Run è un'ottima opzione. Nella finestra della chat di Gemini dell'editor di codice, prova il prompt:
What steps would be required to run this application in
Cloud Run?
- Sembra che la prima cosa da fare sia creare un Dockerfile. Utilizzando l'editor, crea un file denominato
Dockerfilenella radice della cartella del progetto. Assicurati di non inserirla per errore nella cartella delle pagine. Apri il file per modificarlo. - Utilizziamo il riquadro laterale della chat con Gemini per creare il nostro
Dockerfile. Utilizza un prompt come quello riportato di seguito. Quando i risultati vengono visualizzati nella chat, utilizza il segno + 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 esattamente il file che ti suggerirò di utilizzare. Ho appena ricevuto il 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.
Come posso utilizzare gcloud per creare un registro Docker 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.
Commenta il 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 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
Decommenta il 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 preparare i 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!