Diese Seite wurde von der Cloud Translation API übersetzt.

Anwendungen im Zeitalter der KI entwickeln

1. Übersicht

In diesem Lab verwenden Sie die generativen KI-Produkte von Google, um mithilfe von Gemini Cloud Assist eine Infrastruktur in Google Cloud zu erstellen, BigQuery-Daten mithilfe von SQL-Funktionen von Data Canvas in natürlicher Sprache abzufragen, Code in Colab Enterprise Jupyter-Notebooks und in Eclipse Theia (Visual Studio Code) mithilfe von Gemini Code Assist zu schreiben und KI-Such- und Chatfunktionen auf Cloud Storage- und BigQuery-Grundlagenquellen in Vertex AI Agent Builder zu integrieren.

Unser Ziel ist es, eine Rezept- und Kochwebsite namens „AI Recipe Haven“ zu erstellen. Die Website wird in Python und Streamlit erstellt und enthält zwei Hauptseiten. Cooking Advice beherbergt einen Chatbot, den wir mit Gemini und einer Vertex AI Agent Builder-fundierten Quelle erstellen, die mit einer Gruppe von Kochbüchern verknüpft ist. Er bietet Kochtipps und beantwortet fragen zum Kochen. Die Rezeptsuche ist eine von Gemini unterstützte Suchmaschine, die auf einer BigQuery-Rezeptdatenbank basiert.

Wenn Sie bei einem Code in dieser Übung nicht weiterkommen, finden Sie Lösungen für alle Codedateien im GitHub-Repository der Übung im Branch solution.

Lernziele

Aufgaben in diesem Lab:

Gemini Cloud Assist aktivieren und verwenden
Such-App in Vertex AI Agent Builder für den Chatbot mit Kochtipps erstellen
Daten mithilfe von Gemini Code Assist in ein Colab Enterprise-Notebook laden und bereinigen
Such-App in Vertex AI Agent Builder für den Rezeptgenerator erstellen
Mit etwas Hilfe von Gemini die Hauptfunktionen der Python- und Streamlit-Webanwendung skizzieren
Webanwendung in Cloud Run bereitstellen
Die Seite „Kochtipps“ mit der Agent Builder-App für die Suche nach Kochbüchern verknüpfen
Optional: Seite „Rezeptsuche“ mit der Agent Builder App für die Rezeptsuche verknüpfen
(Optional) Die fertige Anwendung ansehen

2. Einrichtung und Anforderungen

Vor dem Klick auf „Lab starten“

Lesen Sie diese Anleitung. Labs sind zeitlich begrenzt und können nicht pausiert werden. Der Timer beginnt zu laufen, wenn Sie auf „Lab starten“ klicken, und zeigt Ihnen, wie lange die Ressourcen für das Lab verfügbar sind.

In diesem praxisorientierten Qwiklabs-Lab führen Sie die Aktivitäten in einer echten Cloud-Umgebung aus, nicht in einer Simulations- oder Demoumgebung. Dazu erhalten Sie neue, temporäre Anmeldedaten, mit denen Sie für die Dauer des Labs auf Google Cloud zugreifen können.

Voraussetzungen

Für dieses Lab benötigen Sie Folgendes:

Einen Standardbrowser (empfohlen wird Chrome)
Genügend Zeit, um das Lab abzuschließen

Hinweis:Auch wenn Sie bereits ein eigenes Google Cloud-Konto oder -Projekt haben, sollten Sie es nicht für das Lab verwenden.

Hinweis:Wenn Sie ein Pixelbook verwenden, führen Sie dieses Lab in einem Inkognitofenster aus.

Klicken Sie auf die Schaltfläche „Lab starten“. Wenn Sie für das Lab bezahlen müssen, wird ein Pop-up-Fenster geöffnet, in dem Sie Ihre Zahlungsmethode auswählen können. Auf der linken Seite sehen Sie ein Feld, in dem Ihre temporären Anmeldedaten für dieses Lab angezeigt werden.

Kopieren Sie den Nutzernamen und klicken Sie dann auf „Google Console öffnen“. Im Lab werden Ressourcen aktiviert. Anschließend wird ein weiterer Tab mit der Anmeldeseite geöffnet.

Tipp: Öffnen Sie die Tabs nebeneinander in separaten Fenstern.

Wenn die Seite „Konto auswählen“ angezeigt wird, klicken Sie auf „Anderes Konto verwenden“.

Fügen Sie auf der Seite Anmelden den Nutzernamen ein, den Sie im Feld mit den Verbindungsinformationen kopiert haben. Kopieren Sie dann das Passwort und fügen Sie es ein.

Wichtig: Sie müssen sich mit dem Nutzernamen und Passwort aus dem Bereich "Verbindungsdetails" anmelden. Verwenden Sie nicht Ihre Qwiklabs-Anmeldedaten. Auch wenn Sie bereits ein eigenes Google Cloud-Konto haben, sollten Sie es nicht für dieses Lab verwenden, um anfallende Gebühren zu vermeiden. 4. Klicken Sie sich durch die nachfolgenden Seiten:

Akzeptieren Sie die Nutzungsbedingungen.
Fügen Sie keine Wiederherstellungsoptionen oder Zwei-Faktor-Authentifizierung hinzu (da dies nur ein temporäres Konto ist).
Melden Sie sich nicht für kostenlose Testversionen an.

Nach wenigen Augenblicken wird die Cloud Console in diesem Tab geöffnet.

Hinweis:Klicken Sie auf das Navigationsmenü oben links, um das Menü mit einer Liste der Google Cloud-Produkte und ‑Dienste aufzurufen.

3. Aufgabe 0: Workstation-Cluster prüfen

In einem späteren Teil dieses Labs verwenden Sie eine Google Cloud-Workstation für einige Entwicklungsarbeiten. Beim Starten dieses Labs sollte der Cluster Ihrer Workstation erstellt worden sein. Bevor wir fortfahren, prüfen wir, ob der Cluster erstellt wird.

Suchen Sie in der Google Cloud Console im Suchfeld nach Cloud Workstations.
Rufen Sie im linken Navigationsmenü Clusterverwaltung auf.
Wenn Sie einen Cluster haben, der gerade aktualisiert wird, können Sie mit Aufgabe 1 fortfahren. Wenn Sie keine Cluster in einem bestimmten Status sehen, aktualisieren Sie die Seite. Wenn Sie immer noch keinen Cluster sehen, der aktualisiert wird (erstellt wird), beenden Sie das Lab über die Schaltfläche links oben in dieser Anleitung und starten Sie es neu.

4. Aufgabe 1: Gemini Cloud Assist aktivieren und verwenden

In dieser Aufgabe aktivieren und verwenden wir Gemini Cloud Assist. Wenn Sie in der Google Cloud Console arbeiten, kann Gemini Cloud Assist Ihnen Ratschläge geben, Sie beim Erstellen, Konfigurieren und Überwachen Ihrer Google Cloud-Infrastruktur unterstützen und sogar gcloud-Befehle vorschlagen und Terraform-Scripts schreiben.

Wenn Sie Cloud Assist verwenden möchten, klicken Sie oben in der Cloud Console-Benutzeroberfläche in das Suchfeld und wählen Sie Ask Gemini aus (möglicherweise auch Ask Gemini for Cloud console).
Scrollen Sie auf der Seite zum Abschnitt „Erforderliche API“ und aktivieren Sie die Gemini for Google Cloud API.
Wenn die Chatoberfläche nicht sofort angezeigt wird, klicken Sie auf Chat starten. Bitten Sie Gemini, einige der Vorteile von Cloud Workstations zu erläutern. Nehmen Sie sich ein paar Minuten Zeit, um sich die generierte Antwort anzusehen.
Fragen Sie als Nächstes nach den Vorteilen von Agent Builder und wie es dabei helfen kann, generative Antworten zu erstellen.
Sehen wir uns zum Schluss einen Vergleich an. Stellen Sie im Gemini-Chatfenster der Google Cloud Console die folgende Frage:

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

Rufen Sie jetzt in einem normalen Fenster die öffentliche Gemini-Website auf, melden Sie sich gegebenenfalls an und stellen Sie dieselbe Frage. Sind die Antworten identisch oder zumindest ähnlich? Die konkreten Schritte? Ist eine der beiden Optionen deutlich besser? Denken Sie aber an Ihre Antworten, wenn wir die nächsten Schritte durchgehen.

Hinweis:Wenn Sie versuchen, den obigen Schritt mit Ihrem temporären Qwiklabs-Konto auszuführen, werden Sie blockiert. Wenn Ihr Arbeitskonto ebenfalls blockiert ist, weil Ihre Organisation die Nutzung der Gemini-Web-App nicht zulässt, überspringen Sie diesen Schritt einfach und fahren Sie fort. Das hat keine Auswirkungen darauf, ob Sie diese Übung abschließen können.

5. Aufgabe 2: Such-App in Vertex AI Agent Builder für den Chatbot mit Kochtipps erstellen

Die von uns erstellte Website enthält eine Seite mit Kochratschlägen, auf der sich ein Chatbot befindet, der Nutzern bei der Suche nach Antworten auf kochbezogene Fragen helfen soll. Es wird von Gemini angetrieben und basiert auf einer Quelle mit 70 Kochbüchern aus der Public Domain. Die Rezeptbücher dienen als „Source of Truth“, die Gemini bei der Beantwortung von Fragen verwendet.

Suchen Sie in der Cloud Console nach Vertex AI. Klicken Sie im Dashboard auf Alle empfohlenen APIs aktivieren. Wenn Sie in einem Pop-up-Fenster aufgefordert werden, die Vertex AI API zu aktivieren, aktivieren Sie sie bitte.
Suchen Sie nach Agent Builder und klicken Sie dann auf Weiter und API aktivieren.
Wie Gemini in unserer früheren Anfrage vorgeschlagen hat, beginnt das Erstellen einer Such-App in Agent Builder mit der Erstellung einer vertrauenswürdigen Datenquelle. Wenn der Nutzer sucht, versteht Gemini die Frage und weiß, wie er intelligente Antworten formuliert. Er greift jedoch auf die fundierte Quelle zurück, um die Informationen für die Antwort zu erhalten, anstatt auf sein inhärentes Wissen zurückzugreifen.

Wählen Sie im Menü auf der linken Seite „Datenspeicher“ und dann „Datenspeicher erstellen“ aus. 4. Die Kochbücher aus der Public Domain, die wir als Grundlage für unsere Seite mit Kochtipps verwenden, befinden sich derzeit in einem Cloud Storage-Bucket in einem externen Projekt. Wählen Sie den Cloud Storage-Quelltyp aus. 5. Prüfen Sie die Standardoptionen für die Art der importierten Informationen, ändern Sie sie aber nicht. Lassen Sie den Importtyp auf „Ordner“ eingestellt und verwenden Sie für den Bucket-Pfad: labs.roitraining.com/labs/old-cookbooks. Klicken Sie dann auf Weiter. 6. Benennen Sie den Datenspeicher: old-cookbooks. Bearbeiten Sie die ID und ändern Sie sie in old-cookbooks-id. Erstellen Sie dann den Datenspeicher.

Vertex AI Agent Builder unterstützt mehrere App-Typen und der Datenspeicher dient als vertrauenswürdige Quelle für alle. Such-Apps eignen sich für die allgemeine Nutzung und Suche. Chat-Apps sind für generative Abläufe in Dataflow-basierten Chatbot-/Voicebot-Anwendungen gedacht. Empfehlungs-Apps tragen dazu bei, bessere Empfehlungssysteme zu erstellen. Agent-Apps dienen zum Erstellen von GenAI-basierten Agents. Letztendlich würde Agent wahrscheinlich am besten zu unseren Anforderungen passen, aber da das Produkt derzeit nur in der Vorabversion verfügbar ist, bleiben wir beim App-Typ „Suche“. 7. Klicken Sie im Menü auf der linken Seite auf Apps und dann auf App erstellen. Wählen Sie den Typ der Such-App aus. Sehen Sie sich die verschiedenen Optionen an, ändern Sie sie aber nicht. Geben Sie einen Namen für die App ein: cookbook-search. Bearbeiten Sie die App-ID und legen Sie sie auf cookbook-search-id fest. Legen Sie das Unternehmen auf Google fest und klicken Sie auf Weiter. 9. Prüfen Sie den Datenspeicher old-cookbooks, den Sie vor ein paar Schritten erstellt haben, und erstellen Sie die Such-App.

Wenn Sie den Tab Aktivität prüfen, sehen Sie wahrscheinlich, dass die Kochbücher noch importiert und indexiert werden. Es dauert mehr als fünf Minuten, bis Agent Builder die Tausende von Seiten in den 70 Kochbüchern indexiert hat, die wir ihm gegeben haben. Währenddessen laden und bereinigen wir einige Daten aus der Rezeptdatenbank für unseren Rezeptgenerator.

6. Aufgabe 3: Daten mithilfe von Gemini Code Assist in ein Colab Enterprise-Notebook laden und bereinigen

Google Cloud bietet mehrere Möglichkeiten, mit Jupiter Notebooks zu arbeiten. Wir verwenden das neueste Angebot von Google, Colab Enterprise. Einige von Ihnen kennen vielleicht das Colab-Produkt von Google, das häufig von Einzelpersonen und Organisationen verwendet wird, die in einer kostenlosen Umgebung mit Jupiter-Notebooks experimentieren möchten. Colab Enterprise ist ein kommerzielles Google Cloud-Angebot, das vollständig in die übrigen Cloud-Produkte von Google eingebunden ist und die Sicherheits- und Compliance-Funktionen der GCP-Umgebung voll ausschöpft.

Eine der Funktionen von Colab Enterprise ist die Integration von Gemini Code Assist von Google. Code Assist kann in einer Reihe verschiedener Code-Editoren verwendet werden und bietet während des Codierens Ratschläge sowie nahtlose Inline-Vorschläge. Wir werden diesen generativen Assistenten nutzen, während wir unsere Rezeptdaten bearbeiten.

Suchen Sie nach Colab Enterprise und Notebook erstellen. Wenn Sie das Angebot erhalten, neue Colab-Funktionen auszuprobieren, lehnen Sie es ab. Um die Laufzeit und die Rechenleistung des Notebooks zu nutzen, drücken Sie rechts oben auf dem neuen Notebook auf Verbinden.

Verwenden Sie das Dreipunkt-Menü neben dem aktuellen Notebooknamen im Bereich „Colab Enterprise-Dateien“, um es in „Data Wrangling“ umzubenennen.

Erstellen Sie ein neues Feld vom Typ + Text und verschieben Sie es mit dem Aufwärtspfeil so, dass es die erste Zelle auf der Seite ist.

Bearbeiten Sie das Textfeld und geben Sie Folgendes ein:

# Data Wrangling

Import the Pandas library

Geben Sie im Codeblock unter dem gerade erstellten Textblock „imp“ ein. Gemini Code Assist sollte den Rest des Imports in grau vorschlagen. Drücken Sie die Tabulatortaste, um den Vorschlag zu akzeptieren.

import pandas as pd

Erstellen Sie unter dem Feld für den Importcode ein weiteres Textfeld und geben Sie Folgendes ein:

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

Erstellen und bearbeiten Sie einen weiteren Codeblock. Geben Sie noch einmal „df“ ein und sehen Sie sich den von Gemini Code Assist generierten Code an. Wenn über dem generierten Vorschlag eine Drop-down-Liste mit Python-Keywords zur automatischen Vervollständigung angezeigt wird, drücken Sie die Escape-Taste, um den vorgeschlagenen Code in hellgrau zu sehen. Drücken Sie noch einmal die Tabulatortaste, um den Vorschlag zu akzeptieren. Wenn Ihr Vorschlag den Funktionsaufruf „head()“ nicht enthält, fügen Sie ihn hinzu.

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

Klicken Sie auf die erste Codezelle, in die Sie Pandas importiert haben, und führen Sie die ausgewählte Zelle über das Menü Befehle oder die Tastatur aus. Mit der Tastenkombination Umschalttaste + Eingabetaste wird die Zelle ausgeführt und der Fokus auf die nächste Zelle verschoben. Falls erforderlich, wird eine neue Zelle erstellt. Warten Sie, bis die Zelle ausgeführt wurde, bevor Sie fortfahren.

Hinweis:Wenn eine Zelle nicht ausgeführt wurde, wird links daneben [ ] angezeigt. Während eine Zelle ausgeführt wird, sehen Sie eine sich drehende Arbeitsanimation. Sobald die Zelle fertig ist, wird eine Zahl angezeigt, z. B. [13]. 9. Führen Sie die Zelle aus, die die CSV-Datei in den DataFrame lädt. Warten Sie, bis die Datei geladen ist, und sehen Sie sich die ersten fünf Datenzeilen an. Das sind die Rezeptdaten, die wir in BigQuery laden und schließlich als Grundlage für unseren Rezeptgenerator verwenden. 10. Erstellen Sie einen neuen Codeblock und geben Sie den folgenden Kommentar ein. Nachdem Sie den Kommentar eingegeben haben, springen Sie zur nächsten Codezeile. Sie sollten dann den Vorschlag df.columns erhalten. Akzeptieren Sie die Warnung und führen Sie die Zelle aus.

# List the current DataFrame column names

Wir haben gerade gezeigt, dass Sie in einem Jupyter-Notebook zwei Möglichkeiten haben, wie Sie Hilfe von Gemini Code Assist erhalten: Textzellen über Codezellen oder Kommentare in der Codezelle selbst. Kommentare in Codezellen funktionieren gut in Jupyter-Notebooks, aber auch in jeder anderen IDE, die den Gemini Code Assist von Google unterstützt.

Bereinigen wir die Spalten ein wenig. Benennen Sie die Spalte Unnamed: 0 in id und link in uri um. Verwenden Sie die gewünschten Prompt- und Codetechniken, um den Code zu erstellen, und führen Sie die Zelle aus, wenn Sie zufrieden sind.

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

Entfernen Sie die Spalten source und NER und verwenden Sie head(), um die ersten Zeilen aufzurufen. Lassen Sie sich noch einmal von Gemini helfen. Führen Sie die letzten beiden Zeilen aus und prüfen Sie die Ergebnisse.

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

Sehen wir uns an, wie viele Datensätze in unserem Dataset enthalten sind. Beginnen Sie wieder mit der von Ihnen ausgewählten Prompt-Technik und sehen Sie, ob Gemini Ihnen beim Generieren des Codes helfen kann.

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

2,23 Millionen Einträge sind wahrscheinlich mehr Rezepte, als wir Zeit haben. Der Indexierungsvorgang in Agent Builder würde für unsere Übung heute wahrscheinlich zu lange dauern. Als Kompromiss nehmen wir 150.000 Rezepte als Stichprobe. Verwenden Sie Ihren Ansatz „Prompt > Code“, um die Stichprobe in einem neuen DataFrame mit dem Namen dfs (s für „small“) zu speichern.

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

Die Daten der Rezeptquelle können jetzt in BigQuery geladen werden. Bevor wir mit dem Laden beginnen, rufen wir BigQuery auf und bereiten ein Dataset für unsere Tabelle vor. Suchen Sie in der Google Cloud Console im Suchfeld nach BigQuery. Sie können mit der rechten Maustaste auf BigQuery klicken und es in einem neuen Browsertab öffnen.
Falls das Gemini-Chatfeld noch nicht sichtbar ist, öffnen Sie es über das Gemini-Logo oben rechts in der Cloud Console. Wenn Sie aufgefordert werden, die API noch einmal zu aktivieren, drücken Sie entweder auf „Aktivieren“ oder aktualisieren Sie die Seite. Führen Sie den Prompt aus: What is a dataset used for in BigQuery? Nachdem Sie sich die Antwort angesehen haben, stellen Sie sich folgende Fragen: How can I create a dataset named recipe_data using the Cloud Console? Vergleichen Sie die Ergebnisse mit den folgenden Schritten.

Klicken Sie im BigQuery-Explorer neben Ihrer Projekt-ID auf das Dreipunkt-Menü Aktionen ansehen. Wählen Sie dann Dataset erstellen aus.

Geben Sie den Datensatz und die ID von recipe_data an. Lassen Sie den Standorttyp auf US und klicken Sie auf Dataset erstellen. Wenn Sie die Fehlermeldung erhalten, dass das Dataset bereits vorhanden ist, fahren Sie einfach fort.

Nachdem wir das Dataset in BigQuery erstellt haben, kehren wir zu unserem Notebook zurück und führen die Dateneingabe aus. 19. Kehren Sie zu Ihrem Data Wrangling-Notebook in Colab Enterprise zurück. Erstellen Sie in einer neuen Codezelle eine Variable mit dem Namen project_id und speichern Sie darin die aktuelle Projekt-ID. Die aktuelle Projekt-ID finden Sie links oben in dieser Anleitung unter der Schaltfläche „Lab beenden“. Sie finden sie auch auf der Cloud Console-Startseite. Weisen Sie den Wert der Variablen project_id zu und führen Sie die Zelle aus.

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

Verwenden Sie den Ansatz „Prompt > Code“, um einen Codeblock zu erstellen, mit dem der DataFrame dfs in eine Tabelle namens recipes im gerade erstellten Dataset recipe_data eingefügt wird. Führen Sie die Zelle aus.

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

7. Aufgabe 4: Such-App in Vertex AI Agent Builder für den Rezeptgenerator erstellen

Sehr gut. Jetzt, da wir unsere Tabelle mit Rezeptdaten erstellt haben, können wir damit eine fundierte Datenquelle für unseren Rezeptgenerator erstellen. Der Ansatz, den wir verwenden werden, ähnelt dem, den wir für unseren Koch-Chatbot verwendet haben. Wir erstellen mit Vertex AI Agent Builder einen Datenspeicher und verwenden ihn dann als vertrauenswürdige Quelle für eine Such-App.

Sie können Gemini in der Google Cloud Console bitten, Sie an die Schritte zum Erstellen einer Agent Builder-Suche zu erinnern. Alternativ können Sie auch die folgenden Schritte ausführen.

Rufen Sie über die Suche Agent Builder auf. Öffnen Sie Datenspeicher und Datenspeicher erstellen. Wählen Sie diesmal den BigQuery-Datenspeichertyp aus.
Klicken Sie in der Tabellenauswahlzelle auf Durchsuchen und suchen Sie nach recipes. Klicken Sie auf das Optionsfeld neben der Tabelle. Wenn Sie Rezepte aus anderen „qwiklabs-gcp-…“-Projekten sehen, wählen Sie dasjenige aus, das Ihnen gehört.

Hinweis:Wenn Sie auf recipes klicken, anstatt das nebenstehende Kästchen anzuklicken, wird in Ihrem Browser ein neuer Tab geöffnet und Sie gelangen zur Übersichtsseite der Tabelle in BigQuery. Schließen Sie einfach den Browsertab und wählen Sie das Optionsfeld in Agent Builder aus. 3. Prüfen Sie die restlichen Standardoptionen, ändern Sie sie aber nicht, und klicken Sie dann auf Weiter. 4. Prüfen Sie auf der Seite „Schemaüberprüfung“ die ursprünglichen Standardkonfigurationen, nehmen Sie aber keine Änderungen vor. Weiter 5. Geben Sie dem Datenspeicher den Namen recipe-data. Bearbeiten Sie die Datenspeicher-ID und legen Sie sie auf recipe-data-id fest. Erstellen Sie den Datenspeicher. 6. Klicken Sie im linken Navigationsmenü auf Apps und dann auf App erstellen. Wählen Sie die Such-App noch einmal aus. Benennen Sie die App recipe-search und legen Sie die ID auf recipe-search-id fest. Legen Sie den Namen des Unternehmens auf Google fest und klicken Sie auf Weiter. 8. Prüfen Sie diesmal die Datenquellen recipe-data. Erstellen Sie die App.

Es dauert eine Weile, bis die Datenbanktabelle indexiert ist. In der Zwischenzeit können wir mit dem neuen Data Canvas von BigQuery experimentieren und sehen, ob wir ein oder zwei interessante Rezepte finden. 9. Verwenden Sie das Suchfeld, um BigQuery aufzurufen. Klicken Sie oben in BigQuery Studio neben dem rechten Tab auf den Drop-down-Pfeil und wählen Sie Datencanvas aus. Legen Sie als Region us-central1 fest.

Suchen Sie im Suchfeld des Daten-Canvas nach recipes und fügen Sie die Tabelle zum Canvas hinzu.
Eine visuelle Darstellung Ihrer Rezepttabelle wird in das BigQuery-Daten-Canvas geladen. Sie können sich das Schema der Tabelle ansehen, eine Vorschau der Daten in der Tabelle anzeigen lassen und weitere Details prüfen. Klicken Sie unter der Tabellendarstellung auf Abfrage.
Auf dem Canvas wird ein mehr oder weniger typisches BigQuery-Abfragedialogfeld mit einer zusätzlichen Funktion geladen: Über dem Abfragefenster befindet sich ein Textfeld, über das Sie Gemini um Hilfe bitten können. Sehen wir uns an, ob wir in unserer Stichprobe Kuchenrezepte finden. Führen Sie den folgenden Prompt aus (Geben Sie den Text ein und drücken Sie die Eingabetaste, um die SQL-Generierung auszulösen):

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

Sehen Sie sich die generierte SQL-Abfrage an. Wenn Sie mit der Abfrage zufrieden sind, führen Sie sie aus.
Nicht schlecht! Sie können noch mit ein paar anderen Prompts und Abfragen experimentieren, bevor Sie fortfahren. Probieren Sie bei Ihren Tests weniger spezifische Prompts aus, um herauszufinden, was funktioniert und was nicht. Beispiel:

Do I have any chili recipes?

(Denken Sie daran, die neue Abfrage auszuführen.) Es wurde eine Liste mit Chilirezepten zurückgegeben, die Zutaten wurden jedoch nicht berücksichtigt, bis ich die Abfrage so geändert habe:

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

(Ja, ich sage „bitte“, wenn ich etwas auffordere. Meine Mama wäre so stolz.)

Mir ist aufgefallen, dass ein Chili-Rezept Pilze enthält. Wer möchte das schon in Chili? Ich habe Gemini gebeten, mir dabei zu helfen, diese Rezepte auszuschließen.

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

8. Aufgabe 5: Mit etwas Hilfe von Gemini die Hauptfunktionen der Python- und Streamlit-Webanwendung skizzieren

Die Indexierung unserer beiden Vertex AI Agent Builder-Datenspeicher ist abgeschlossen und unsere Suchanwendungen sind fast einsatzbereit. Jetzt können wir mit dem Erstellen unserer Webanwendung beginnen.

Dabei nutzen wir Gemini Code Assist. Weitere Informationen zur Verwendung von Gemini Code Assist in Visual Studio Code finden Sie in der Dokumentation.

Wir werden unsere Entwicklung in einer Google Cloud Workstation durchführen, einer cloudbasierten Entwicklungsumgebung, die in unserem Fall mit Eclipse Theia (Open-Source-Visual Studio Code) vorinstalliert ist. In dieser Übung wurde mit einem automatisierten Script der Cluster und die Konfiguration für die Cloud Workstation erstellt. Die Cloud Workstation selbst müssen wir jedoch noch erstellen. Wenn Sie weitere Informationen zu Cloud Workstations und ihrer Verwendung benötigen, wenden Sie sich bitte an Gemini Cloud Assist.

Suchen Sie nach Cloud Workstations und dann nach Workstation erstellen. Benennen Sie die Workstation dev-env und verwenden Sie die Konfiguration my-config. Erstellen Sie die Workstation.
Nach einigen Minuten wird Ihre neue Workstation in der Liste „Meine Workstations“ angezeigt. Starten Sie die dev-env und starten Sie dann die Entwicklungsumgebung.
Der Workstation-Editor wird in einem neuen Browsertab geöffnet. Nach wenigen Augenblicken sollte die bekannte Theia-Oberfläche (Visual Studio Code) angezeigt werden. Maximieren Sie links in der Benutzeroberfläche den Tab Versionskontrolle und klicken Sie auf Repository klonen.

Geben Sie als Repository-URL https://github.com/haggman/recipe-app ein. Klonen Sie das Repository in Ihren Ordner user und öffnen Sie es zur Bearbeitung.
Bevor wir uns den geklonten Ordner ansehen und mit der Arbeit an unserer Webanwendung beginnen, müssen wir das Cloud Code-Plug-in des Editors in Google Cloud anmelden und Gemini aktivieren. Machen wir uns also daran, die Tabellen zu befüllen. Klicken Sie links unten im Editor auf Cloud Code – Anmelden. Wenn Sie den Link nicht sehen, warten Sie eine Minute und versuchen Sie es noch einmal.

Im Terminalfenster wird eine lange URL angezeigt. Öffnen Sie die URL im Browser und führen Sie die Schritte aus, um Cloud Code Zugriff auf Ihre Google Cloud-Umgebung zu gewähren. Verwenden Sie bei der Authentifizierung Ihr temporäres student-...-Konto für das Training und nicht Ihr privates Google Cloud-Konto. Kopieren Sie im letzten Dialogfeld den Bestätigungscode und fügen Sie ihn wieder in das wartende Terminalfenster auf dem Browsertab Ihrer Cloud Workstation ein.
Nach einigen Augenblicken ändert sich der Cloud Code-Link links unten im Editor in Cloud Code – kein Projekt. Klicken Sie auf den neuen Link, um ein Projekt auszuwählen. Die Befehlspalette sollte oben im Editor geöffnet werden. Klicken Sie auf Google Cloud-Projekt auswählen und wählen Sie Ihr Projekt qwiklabs-gcp-... aus. Nach einigen Momenten wird im Editor links unten der Link aktualisiert und Ihre Projekt-ID angezeigt. Dies bedeutet, dass Cloud Code Ihrem Arbeitsprojekt erfolgreich zugeordnet wurde.
Nachdem Cloud Code mit Ihrem Projekt verbunden ist, können Sie jetzt Gemini Code Assist aktivieren. Klicken Sie rechts unten im Editor auf das durchgestrichene Gemini-Logo. Der Gemini-Chatbereich wird links im Editor geöffnet. Klicken Sie auf Google Cloud-Projekt auswählen. Wählen Sie in der Befehlspalette Ihr Projekt qwiklabs-gcp-... aus. Wenn Sie die Schritte korrekt ausgeführt haben und Google nichts geändert hat, sollte jetzt ein aktives Gemini-Chatfenster angezeigt werden.

Konfigurieren wir nun auch das Terminalfenster des Editors. Öffnen Sie das Terminalfenster über das Dreistrich-Menü > Ansicht > Terminal. Führen Sie gcloud init aus. Verwenden Sie noch einmal den Link, um dem Cloud Shell-Terminal die Ausführung für Ihr qwiklabs-gcp-...-Projekt zu erlauben. Wählen Sie bei Aufforderung die numerische Option Ihres qwiklabs-gcp-...-Projekts aus.
Sehr gut. Terminal, Gemini-Chat und Cloud Code-Konfigurationen sind jetzt eingerichtet. Öffnen Sie den Tab Explorer und sehen Sie sich die Dateien im aktuellen Projekt an.

Öffnen Sie die Datei requirements.txt im Explorer zur Bearbeitung. Wechseln Sie zum Gemini-Chatbereich und stellen Sie folgende Frage:

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

Wir erstellen also eine interaktive Webanwendung mit Python und Streamlit, die mit Vertex AI und der Discovery Engine interagiert. Konzentrieren wir uns vorerst auf die Komponenten der Webanwendung. Wie Gemini erklärt, ist Streamlit ein Framework zum Erstellen datengetriebener Webanwendungen in Python. Fragen Sie jetzt:

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

Hier treten in der Regel Probleme mit Gemini auf. Gemini kann auf die Datei zugreifen, die Sie derzeit im Editor geöffnet haben, aber nicht auf das gesamte Projekt. Sie können zum Beispiel Folgendes fragen:

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

Eine bessere Antwort erhalten?

Weitere Informationen zu Streamlit:

What can you tell me about Streamlit?

Sehr gut. Gemini bietet also eine gute Übersicht mit Vor- und Nachteilen.

Wenn Sie die Nachteile kennenlernen möchten, könnten Sie fragen:

What are the major downsides or shortcomings?

Beachten Sie, dass wir nicht „von Streamlit“ sagen mussten, da Gemini Chat konversationell (mehrfach nutzbar) ist. Gemini weiß, wovon wir sprechen, da wir uns in einer Chatsitzung befinden. Wenn Sie den Gemini-Chatverlauf löschen möchten, klicken Sie oben im Gemini-Code-Chatfenster auf das Papierkorbsymbol.

9. Aufgabe 6: Webanwendung in Cloud Run bereitstellen

Sehr gut. Wir haben die Hauptstruktur der Anwendung festgelegt. Aber funktioniert das alles? Besser noch: Wo sollten wir es in Google Cloud hosten?

Fragen Sie im Gemini-Chatfenster:

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

Wenn Sie noch nicht in Ihrer IDE gearbeitet haben, können Sie auch Google Cloud Assist verwenden. Öffnen Sie die Google Cloud Console und dann Gemini Cloud Assist. Stellen Sie folgende Fragen:

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

Waren die beiden Ratschläge identisch? Stimmen Sie den Ratschlägen zu oder nicht? Denken Sie daran, dass Gemini ein Assistent mit generativer KI ist. Wie bei einem menschlichen Assistenten werden Sie nicht immer mit allem einverstanden sein, was er sagt. Dennoch kann es sehr effizient sein, wenn Sie diesen Helfer immer zur Hand haben, während Sie in Google Cloud und in Ihrem Code-Editor arbeiten.

Für eine zustandslose, kurzlebige containerisierte Webanwendung ist Cloud Run eine gute Option. Probieren Sie den folgenden Prompt im Gemini-Chatfenster Ihres Code-Editors aus:

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

Als Erstes müssen wir ein Dockerfile erstellen. Erstellen Sie mit dem Editor im Stammverzeichnis Ihres Projektordners eine Datei mit dem Namen Dockerfile. Achten Sie darauf, dass Sie die Datei nicht versehentlich in den Ordner „Seiten“ verschieben. Öffnen Sie die Datei zur Bearbeitung.
Verwenden wir den Gemini-Chatbereich, um unsere Dockerfile zu erstellen. Verwenden Sie einen Prompt wie den folgenden. Wenn die Ergebnisse im Chat angezeigt werden, klicken Sie neben dem Kopiersymbol direkt über dem vorgeschlagenen Dockerfile auf das Pluszeichen, um den vorgeschlagenen Code in das Dockerfile einzufügen.

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 gibt nicht immer dieselbe Antwort auf denselben Prompt zurück. Als ich Gemini zum ersten Mal um ein Dockerfile bat, erhielt ich genau die Datei, die ich Ihnen empfehlen möchte. Ich habe gerade den folgenden Vorschlag erhalten:

```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:

Wo in Google Cloud können Docker-Images am besten gespeichert werden?

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.

Wie kann ich mit gcloud eine Docker-Registry in Artifact Registry erstellen?

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.

Wie könnte ich mit gcloud einen neuen Cloud Run-Dienst namens „recipe-web-app“ aus einem Image mit demselben Namen aus dem gerade erstellten Artifact Registry-Repository erstellen?

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.

Bitte kommentieren Sie die aktuelle Datei.

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 &gt; Data Stores &gt; 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.

Woran erkenne ich, ob eine Tomate reif ist?

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("Wie erkenne ich, ob eine Tomate reif ist?") 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("Wie erkenne ich, ob eine Tomate reif ist?") 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:

Fügen Sie den Code, den Sie aus Ihrem Notebook kopiert haben, unter diese Nachricht ein.

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:

Hier ist der Code zum Einrichten Ihrer Sitzungsvariablen:

Entfernen Sie die Kommentarzeichen für diesen Block, wenn Sie dazu aufgefordert werden.

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.

Hier ist der Code zum Erstellen der Chatoberfläche:

Entfernen Sie den Kommentar zu dem Code unten, wenn Sie dazu aufgefordert werden.

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:

Haben Sie einen Tipp für die Zubereitung von Brokkoli?

Wie wäre es mit einem klassischen Rezept für Hühnersuppe?

Erzählen Sie mir etwas über Baiser.

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

Chili, Mais, Reis

Zitronen-Baiser-Kuchen

Ein Dessert mit Erdbeeren

## 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!