Anwendungen im Zeitalter der KI entwickeln

1. Übersicht

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

Wir möchten eine Website für Rezepte und Kochen namens „AI Recipe Haven“ erstellen. Die Website wird in Python und Streamlit erstellt und enthält zwei Hauptseiten. Auf der Website „Cooking Advice“ wird ein Chatbot gehostet, den wir mit Gemini und einer fundierten Quelle für Vertex AI Agent Builder erstellen, die mit einer Gruppe von Kochbüchern verknüpft ist. Der Chatbot bietet Kochtipps und beantwortet Fragen zum Kochen. Die Rezeptsuche ist eine Suchmaschine, die von Gemini unterstützt wird und auf einer BigQuery-Rezeptdatenbank basiert.

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

Ziele

Aufgaben in diesem Lab:

Gemini Cloud Assist aktivieren und verwenden
Suchanwendung in Vertex AI Agent Builder für den Chatbot für Kochtipps erstellen
Daten in einem Colab Enterprise-Notebook mit Gemini Code Assist laden und bereinigen
Suchanwendung in Vertex AI Agent Builder für den Rezeptgenerator erstellen
Grundgerüst der Python- und Streamlit-Webanwendung erstellen – mit Unterstützung von Gemini
Webanwendung in Cloud Run bereitstellen
Seite mit Kochtipps mit unserer Agent Builder-App für die Suche nach Kochbüchern verknüpfen
Optional: Rezeptsuche-Seite mit der Agent Builder-App „Rezeptsuche“ verbinden
(Optional) Abschließende 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 Google Cloud-Ressourcen für das Lab verfügbar sind.

In diesem praxisorientierten Qwiklabs-Lab können Sie die Lab-Aktivitäten in einer echten Cloud-Umgebung selbst durchführen – nicht in einer Simulations- oder Demo-Umgebung. 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 „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 Seite „Anmelden“ geöffnet.

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

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

Fügen Sie auf der Seite Anmelden den Nutzernamen ein, den Sie aus dem Bereich „Verbindungsdetails“ 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 Gebühren zu vermeiden. 4. Klicken Sie sich durch die nachfolgenden Seiten:

Akzeptieren Sie die Nutzungsbedingungen.
Fügen Sie keine Wiederherstellungsoptionen oder 2-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:Wenn Sie sich eine Liste der Google Cloud-Produkte und ‑Dienste ansehen möchten, klicken Sie oben links auf das Navigationsmenü.

3. Aufgabe 0: Workstationcluster prüfen

Später in diesem Lab verwenden Sie eine Google Cloud-Workstation für einige Entwicklungsarbeiten. Beim Start dieses Labs sollte die Erstellung des Clusters für Ihre Workstation begonnen haben. Bevor wir fortfahren, prüfen wir, ob der Cluster erstellt wird.

Rufen Sie in der Google Cloud Console über das Suchfeld Cloud Workstations auf.
Rufen Sie über das Navigationsmenü auf der linken Seite die Clusterverwaltung auf.
Wenn Ihr Cluster gerade aktualisiert wird, können Sie mit Aufgabe 1 fortfahren. Wenn Sie keine Cluster in einem beliebigen 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 Sie beraten, 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 aktivieren möchten, klicken Sie oben in der Cloud Console-Benutzeroberfläche in das Suchfeld und wählen Sie Gemini fragen aus (oder Gemini für Cloud Console fragen).
Scrollen Sie auf der Seite zum Abschnitt „Erforderliche API“ und aktivieren Sie die Gemini for Google Cloud API.
Wenn Sie nicht sofort eine Chatoberfläche sehen, klicken Sie auf Chat starten. Bitten Sie Gemini zuerst, einige der Vorteile der Verwendung von Cloud Workstations zu erläutern. Nehmen Sie sich einige Minuten Zeit, um die generierte Antwort zu lesen.
Fragen Sie dann nach den Vorteilen von Agent Builder und wie es helfen kann, generative Antworten zu fundieren.
Sehen wir uns zum Schluss noch 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 nun in Ihrem normalen Browserfenster die öffentliche Gemini-Website auf, melden Sie sich bei Bedarf an und stellen Sie dieselbe Frage. Sind die Antworten gleich oder zumindest ähnlich? Die genauen Schritte? Ist eine der beiden Optionen deutlich besser? Behalten Sie die Antworten im Hinterkopf, während wir die nächsten Schritte durchgehen.

Hinweis:Wenn Sie den oben genannten Schritt mit Ihrem temporären Qwiklabs-Konto ausführen, werden Sie blockiert. Wenn Ihr Arbeitskonto ebenfalls blockiert ist, weil Ihre Organisation die Nutzung der Gemini Web-App nicht zulässt, überspringen Sie den Schritt einfach und fahren Sie fort. Das hat keine Auswirkungen auf Ihre Fähigkeit, diese Übung abzuschließen.

5. Aufgabe 2: Suchanwendung in Vertex AI Agent Builder für den Chatbot für Kochtipps erstellen

Die Website, die wir erstellen, wird eine Seite mit Kochtipps enthalten, auf der ein Chatbot Nutzern bei der Suche nach Antworten auf Fragen zum Kochen helfen soll. Die Funktion basiert auf Gemini und nutzt eine Quelle mit 70 Kochbüchern, die gemeinfrei sind. Die Kochbücher dienen als Quelle für die Informationen, die Gemini zum Beantworten von Fragen verwendet.

Verwenden Sie das Suchfeld der Cloud Console, um zu Vertex AI zu gelangen. Klicken Sie im Dashboard auf Alle empfohlenen APIs aktivieren. Wenn Sie ein Pop-up-Fenster erhalten, in dem Sie aufgefordert werden, die Vertex AI API zu aktivieren, klicken Sie auf Aktivieren.
Suchen Sie nach Agent Builder und klicken Sie dann auf Fortfahren und API aktivieren.
Wie Gemini in unserem vorherigen Ratschlag vorgeschlagen hat, beginnt das Erstellen einer Suchanwendung in Agent Builder mit der Erstellung einer autoritativen Datenquelle. Wenn der Nutzer sucht, versteht Gemini die Frage und weiß, wie intelligente Antworten formuliert werden müssen. Die Informationen, die in der Antwort verwendet werden, stammen jedoch aus der fundierten Quelle und nicht aus dem eigenen Wissen.

Rufen Sie im Menü auf der linken Seite „Datenspeicher“ auf und klicken Sie auf „Datenspeicher erstellen“. 4. Die Kochbücher aus dem öffentlichen Bereich, die wir 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. Sehen Sie sich die Standardoptionen für die Art der Informationen an, die wir importieren, ä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. Geben Sie dem Datenspeicher den Namen old-cookbooks. Bearbeiten Sie die ID zu old-cookbooks-id und erstellen Sie den Datenspeicher.

Vertex AI Agent Builder unterstützt verschiedene App-Typen und der Datenspeicher dient jeweils als Single Source of Truth. Such-Apps eignen sich gut für die allgemeine Nutzung und Suche. Chat-Apps sind für generative Abläufe in Dataflow-basierten Chatbot-/Voicebot-Anwendungen vorgesehen. Empfehlungs-Apps helfen dabei, bessere Empfehlungssysteme zu erstellen. Mit Agent-Apps können Sie auf generativer KI basierende Agents erstellen. Letztendlich wäre Agent wahrscheinlich die beste Lösung für unsere Anforderungen, aber da sich das Produkt derzeit in der Vorschauphase befindet, 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 App-Typ „Suche“ aus. Sehen Sie sich die verschiedenen Optionen an, ohne sie zu ändern. Geben Sie der App den Namen 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. Wählen Sie den old-cookbooks-Datenspeicher aus, den Sie vor einigen Schritten erstellt haben, und erstellen Sie die Such-App.

Wenn Sie den Tab Aktivität aufrufen, sehen Sie wahrscheinlich, dass die Kochbücher noch importiert und indexiert werden. Es dauert mindestens 5 Minuten, bis Agent Builder die Tausenden von Seiten in den 70 Kochbüchern indexiert hat, die wir ihm zur Verfügung gestellt haben. Laden und bereinigen wir in der Zwischenzeit einige Daten aus der Rezeptdatenbank für unseren Rezeptgenerator.

6. Aufgabe 3: Daten in einem Colab Enterprise-Notebook mit Gemini Code Assist laden und bereinigen

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

Eine der Funktionen von Colab Enterprise ist die Integration mit Gemini Code Assist von Google. Code Assist kann in einer Reihe verschiedener Code-Editoren verwendet werden und bietet sowohl Ratschläge als auch nahtlose Inline-Vorschläge während der Programmierung. Wir werden diesen generativen Assistenten nutzen, um unsere Rezeptdaten zu bereinigen.

Suchen Sie nach Colab Enterprise und Notebook erstellen. Wenn Sie ein Angebot zum Ausprobieren neuer Colab-Funktionen erhalten, lehnen Sie es ab. Um die Laufzeit, die Rechenleistung hinter dem Notebook, zu starten, klicken Sie rechts oben in Ihrem neuen Notebook auf Verbinden.

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

Erstellen Sie ein neues + Text-Feld und verschieben Sie es mit dem Aufwärtspfeil an die erste Stelle auf der Seite.

Bearbeiten Sie das Textfeld und geben Sie Folgendes ein:

# Data Wrangling

Import the Pandas library

Beginnen Sie im Codeblock unter dem gerade erstellten Textblock mit der Eingabe von imp. 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 Sie eine Drop-down-Liste mit Python-Schlüsselwörtern über dem generierten Vorschlag sehen, drücken Sie die Esc-Taste, um den hellgrauen vorgeschlagenen Code anzuzeigen. Drücken Sie noch einmal die Tabulatortaste, um den Vorschlag zu akzeptieren. Wenn Ihr Vorschlag den head()-Funktionsaufruf 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 in die erste Codezelle, in der Sie Pandas importiert haben, und verwenden Sie das Menü Befehle oder die Tastatur, um die ausgewählte Zelle auszuführen. Auf der Tastatur wird mit Umschalttaste + Eingabetaste die Zelle ausgeführt und der Fokus auf die nächste Zelle verschoben. Bei Bedarf wird eine neue Zelle erstellt. Warten Sie, bis die Zelle ausgeführt wurde, bevor Sie fortfahren.

Hinweis:Wenn eine Zelle nicht ausgeführt wurde, sehen Sie [ ] direkt links davon. Während eine Zelle ausgeführt wird, sehen Sie eine sich drehende Animation. Wenn die Zelle fertig ist, wird eine Zahl wie [13] angezeigt. 9. Führen Sie die Zelle aus, in der die CSV-Datei in den DataFrame geladen wird. 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 die wir später verwenden, um unseren Rezeptgenerator zu trainieren. 10. Erstellen Sie einen neuen Codeblock und geben Sie den folgenden Kommentar ein. Nachdem Sie den Kommentar eingegeben haben, gehen Sie zur nächsten Codezeile. Dort sollte der Vorschlag df.columns angezeigt werden. Akzeptieren Sie die Meldung 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, Hilfe von Gemini Code Assist zu erhalten: Textzellen über Codezellen oder Kommentare in der Codezelle selbst. Kommentare in Codezellen funktionieren gut in Jupyter-Notebooks, aber dieser Ansatz funktioniert auch in jeder anderen IDE, die Gemini Code Assist von Google unterstützt.

Wir müssen die Spalten etwas bereinigen. Benennen Sie die Spalte Unnamed: 0 in id und link in uri um. Verwenden Sie den Prompt Ihrer Wahl > Codetechniken, um den Code zu erstellen, und führen Sie die Zelle dann 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 sich die ersten Zeilen anzusehen. Lassen Sie sich wieder von Gemini helfen. Führen Sie die letzten beiden Zeilen aus und sehen Sie sich die Ergebnisse an.

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

Sehen wir uns an, wie viele Datensätze unser Dataset enthält. Beginnen Sie wieder mit der von Ihnen gewählten Prompting-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 Datensätze sind wahrscheinlich mehr Rezepte, als wir Zeit haben, auszuprobieren. Der Indexierungsvorgang in Agent Builder würde für unsere heutige Übung wahrscheinlich zu lange dauern. Als Kompromiss können wir 150.000 Rezepte als Stichprobe verwenden. Verwenden Sie den Ansatz „Prompt > Code“, um die Stichprobe zu erstellen und 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 Quelldaten für das Rezept können in BigQuery geladen werden. Bevor wir die Daten laden, erstellen wir in BigQuery ein Dataset für unsere Tabelle. Verwenden Sie in der Google Cloud Console das Suchfeld, um zu BigQuery zu gelangen. Klicken Sie mit der rechten Maustaste auf BigQuery und öffnen Sie die Seite in einem neuen Browsertab.
Wenn das Feld 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, klicken Sie auf „Aktivieren“ oder aktualisieren Sie die Seite. Führen Sie den Prompt aus: What is a dataset used for in BigQuery? Nachdem Sie die Antwort geprüft haben, fragen Sie: How can I create a dataset named recipe_data using the Cloud Console? Vergleiche die Ergebnisse mit den folgenden Schritten.

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

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

Nachdem wir das Dataset in BigQuery erstellt haben, wechseln wir zurück zu unserem Notebook und fügen die Daten ein. 19. Wechseln Sie zurück zu Ihrem Data Wrangling-Notebook in Colab Enterprise. Erstellen Sie in einer neuen Codezelle eine Variable mit dem Namen project_id und verwenden Sie sie, um Ihre aktuelle Projekt-ID zu speichern. Die aktuelle Projekt-ID finden Sie links oben in dieser Anleitung unter der Schaltfläche „Lab beenden“. Sie finden sie auch auf der Startseite der Cloud Console. 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 mit dem Namen recipes im Dataset recipe_data eingefügt wird, das wir gerade erstellt haben. Führen Sie die Zelle aus.

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

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

Ausgezeichnet. Jetzt, da wir unsere Tabelle mit Rezeptdaten erstellt haben, können wir sie verwenden, um eine fundierte Datenquelle für unseren Rezeptgenerator zu erstellen. Die Vorgehensweise ähnelt der, die wir für unseren Koch-Chatbot verwendet haben. Wir verwenden Vertex AI Agent Builder, um einen Datenspeicher zu erstellen, der dann als Single Source of Truth für eine Suchanwendung dient.

Sie können Gemini in der Google Cloud Console bitten, Sie an die Schritte zum Erstellen einer Agent Builder-Suchanwendung zu erinnern, oder Sie können die unten aufgeführten Schritte ausführen.

Suchen Sie nach Agent Builder. Öffnen Sie Datenspeicher und Datenspeicher erstellen. Wählen Sie dieses Mal den BigQuery-Datenspeichertyp Select (Auswählen) aus.
Klicken Sie in der Zelle für die Tabellenauswahl 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 das Projekt aus, das Ihnen gehört.

Hinweis:Wenn Sie auf recipes klicken, anstatt das Optionsfeld daneben auszuwählen, wird in Ihrem Browser ein neuer Tab geöffnet und Sie werden zur Tabellenübersichtsseite in BigQuery weitergeleitet. Schließen Sie einfach den Browser-Tab und wählen Sie die Schaltfläche in Agent Builder aus. 3. Sehen Sie sich die restlichen Standardoptionen an, ändern Sie sie aber nicht, und klicken Sie dann auf Weiter. 4. Sehen Sie sich auf der Seite zur Schemaüberprüfung die anfänglichen Standardkonfigurationen an, nehmen Sie aber keine Änderungen vor. Tippe auf Weiter. 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. 7. Wählen Sie die Such-App noch einmal aus. Geben Sie der App den Namen recipe-search und legen Sie die ID auf recipe-search-id fest. Legen Sie den Unternehmensnamen auf Google fest und klicken Sie auf Weiter. 8. Sehen Sie sich diesmal die Datenquellen für recipe-data an. Erstellen Sie die App.

Es dauert eine Weile, bis unsere Datenbanktabelle indexiert ist. Lassen Sie uns in der Zwischenzeit mit dem neuen Data Canvas von BigQuery experimentieren und sehen, ob wir ein oder zwei interessante Rezepte finden können. 9. Geben Sie BigQuery in das Suchfeld ein, um die Seite aufzurufen. Klicken Sie oben in BigQuery Studio neben dem Tab ganz rechts auf den Abwärtspfeil und wählen Sie Data Canvas aus. Legen Sie die Region auf us-central1 fest.

Suchen Sie im Suchfeld des Data Canvas nach recipes und klicken Sie auf Dem Canvas hinzufügen, um die Tabelle hinzuzufügen.
Eine visuelle Darstellung Ihrer Rezepttabelle wird in den BigQuery Data Canvas geladen. Sie können sich das Tabellenschema ansehen, eine Vorschau der Daten in der Tabelle aufrufen und andere Details prüfen. Klicken Sie unter der Tabellendarstellung auf Abfrage.
Im Canvas wird ein mehr oder weniger typischer BigQuery-Abfragedialog geladen. Es gibt jedoch eine zusätzliche Funktion: Über dem Abfragefenster befindet sich ein Textfeld, in dem Sie Gemini um Hilfe bitten können. Sehen wir uns an, ob wir in unserem Beispiel einige Kuchenrezepte finden können. Geben Sie den folgenden Prompt ein (indem Sie den Text eingeben und die Eingabetaste drücken, 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 den generierten SQL-Code an. Wenn Sie zufrieden sind, führen Sie die Abfrage aus.
Nicht schlecht! Sie können auch andere Prompts und Abfragen ausprobieren, bevor Sie fortfahren. Probieren Sie weniger spezifische Prompts aus, um herauszufinden, was funktioniert und was nicht. Beispiel für einen Prompt:

Do I have any chili recipes?

(Vergessen Sie nicht, die neue Anfrage auszuführen.) Es wurde eine Liste mit Chili-Rezepten zurückgegeben, aber die Zutaten wurden ausgelassen, bis ich die Anfrage so geändert habe:

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

(Ja, ich sage „bitte“, wenn ich einen Prompt eingebe. Meine Mama wäre so stolz auf mich.)

Ich habe gesehen, dass ein Chili-Rezept Pilze enthielt. Wer will 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: Grundgerüst der Python- und Streamlit-Webanwendung erstellen – mit Unterstützung von Gemini

Nachdem beide Datenspeicher von Vertex AI Agent Builder indexiert wurden und unsere Suchanwendungen fast einsatzbereit sind, können wir mit der Entwicklung unserer Webanwendung beginnen.

Wir werden Gemini Code Assist während unserer Arbeit nutzen. Weitere Informationen zur Verwendung von Gemini Code Assist in Visual Studio Code finden Sie in der Dokumentation.

Wir entwickeln in einer Google Cloud-Workstation, einer cloudbasierten Entwicklungsumgebung, die in unserem Fall mit Eclipse Theia (Open-Source-Visual Studio Code) vorinstalliert ist. In dieser Übung wurde der Cloud Workstations-Cluster und die Konfiguration durch ein automatisiertes Skript erstellt. Wir müssen jedoch noch die Cloud Workstation selbst erstellen. Wenn Sie weitere Informationen zu Cloud Workstations und ihrer Verwendung benötigen, fragen Sie Gemini Cloud Assist :-)

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

Geben Sie als Repository-URL https://github.com/haggman/recipe-app ein. Klonen Sie das Repository in den Ordner user und öffnen Sie es dann zur Bearbeitung.
Bevor wir den geklonten Ordner untersuchen und mit der Arbeit an unserer Webanwendung beginnen, müssen wir das Cloud Code-Plug-in des Editors bei Google Cloud anmelden und Gemini aktivieren. Machen wir uns also daran, die Tabellen zu befüllen. Klicken Sie unten links 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. Achten Sie darauf, dass Sie sich mit Ihrem temporären student-...-Konto und nicht mit Ihrem privaten Google Cloud-Konto authentifizieren. Klicken Sie im letzten Dialogfeld auf Kopieren, um den Bestätigungscode zu kopieren, und fügen Sie ihn dann in das wartende Terminalfenster auf dem Cloud Workstation-Browsertab ein.
Nach einigen Augenblicken ändert sich der Cloud Code-Link unten links im Editor zu 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 qwiklabs-gcp-...-Projekt aus. Nach einigen Augenblicken wird der Link unten links im Editor aktualisiert und zeigt Ihre Projekt-ID an. Das bedeutet, dass Cloud Code erfolgreich an Ihr Arbeitsprojekt angehängt wurde.
Nachdem Cloud Code mit Ihrem Projekt verbunden ist, können Sie Gemini Code Assist aktivieren. Klicken Sie rechts unten in der Editoroberfläche auf das durchgestrichene Gemini-Logo. Der Gemini Chat-Bereich 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 zum Schluss noch das Editor-Terminalfenster. Öffnen Sie das Terminalfenster über das Dreistrich-Menü > Ansicht > Terminal. Führe gcloud init aus. Verwenden Sie noch einmal den Link, um dem Cloud Shell-Terminal die Arbeit mit Ihrem qwiklabs-gcp-...-Projekt zu erlauben. Wählen Sie bei Aufforderung die numerische Option Ihres qwiklabs-gcp-...-Projekts aus.
Sehr gut. Nachdem wir das Terminal, Gemini Chat und die Cloud Code-Konfigurationen eingerichtet haben, ö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 Chatfenster Gemini und fragen Sie:

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

Wir entwickeln also eine interaktive Webanwendung mit Python und Streamlit, die mit Vertex AI und Discovery Engine interagiert. Konzentrieren wir uns erst einmal auf die Webanwendungskomponenten. Gemini zufolge ist Streamlit ein Framework zum Erstellen datengesteuerter Webanwendungen in Python. Fragen Sie jetzt:

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

Hier hat Gemini oft Probleme. Gemini kann auf die Datei zugreifen, die Sie gerade im Editor geöffnet haben, aber nicht auf das gesamte Projekt. Fragen Sie zum Beispiel:

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

Haben Sie eine bessere Antwort erhalten?

Hier finden Sie weitere Informationen zu Streamlit:

What can you tell me about Streamlit?

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

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

What are the major downsides or shortcomings?

Wir mussten nicht „von Streamlit“ sagen, da Gemini Chat dialogorientiert (mehrere Turns) ist. Gemini weiß, worüber wir gesprochen haben, weil wir uns in einer Chatsitzung befinden. Wenn Sie den Gemini Code Assist-Chatverlauf löschen möchten, klicken Sie oben im Gemini Code Assist-Chatfenster auf das Papierkorbsymbol.

9. Aufgabe 6: Webanwendung in Cloud Run bereitstellen

Sehr gut, wir haben die grundlegende Anwendungsstruktur eingerichtet. Aber funktioniert auch alles? Noch besser: Wo sollten wir sie 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, dann Gemini Cloud Assist und stellen Sie folgende Frage:

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? Gemini ist ein auf generativer KI basierender Assistent. Wie bei einem menschlichen Assistenten stimmen Sie möglicherweise nicht immer mit allem überein, was er sagt. Dennoch kann es sehr hilfreich sein, diesen Assistenten immer an Ihrer Seite zu haben, wenn 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 im Gemini-Chatfenster Ihres Code-Editors den folgenden Prompt 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 eine Datei mit dem Namen Dockerfile im Stammverzeichnis Ihres Projektordners. Achten Sie darauf, dass Sie sie nicht versehentlich im Ordner „pages“ platzieren. Öffnen Sie die Datei zur Bearbeitung.
Wir verwenden die Gemini-Seitenleiste, um unsere Dockerfile zu erstellen. Verwenden Sie einen Prompt wie den folgenden. Wenn die Ergebnisse im Chat angezeigt werden, klicken Sie auf das Pluszeichen neben dem Kopiersymbol direkt über dem vorgeschlagenen Dockerfile, 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 nach einem Dockerfile gefragt habe, habe ich genau die Datei erhalten, die ich Ihnen empfehlen werde. Ich habe gerade den 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 ist der beste Ort in Google Cloud zum Speichern von Docker-Images?

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 kann ich mit gcloud einen neuen Cloud Run-Dienst mit dem Namen „recipe-web-app“ aus einem Image mit demselben Namen aus dem Artifact Registry-Repository erstellen, das wir gerade erstellt haben?

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("How can I tell if a tomato is ripe?") 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:

Fügen Sie den Code, den Sie aus Ihrem Notebook kopiert haben, unter dieser 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 die Auskommentierung des folgenden Codes, 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:

Hast du Tipps für die Zubereitung von Brokkoli?

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

Erzähl 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

Zitronenbaiserkuchen

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!