Übersicht

In diesem Lab binden Sie einen KI-Agenten in eine Flutter-Anwendung ein. Flutter wird als Framework für die Client-Anwendung eingesetzt, Vertex AI Search dient als Vektordatenbank und die Reasoning Engine wird zum Erstellen und Bereitstellen eines Agenten mit LangChain in Vertex AI genutzt. Der Agent verwendet Gemini, eine Familie leistungsstarker Large Language Models (LLMs), um KI-Antworten auf Text- und Bildprompts zu generieren.

Das Lab wird mit VSCode als IDE, die code-server verwendet, bereitgestellt, sowie mit den Flutter- und Dart-Erweiterungen, die zum Ausführen der Flutter-Anwendung erforderlich sind. In diesem Lab wird ebenfalls das fwr-Tool verwendet. Damit stellen Sie die Flutter-Anwendung als Webanwendung bereit, auf die Sie über einen Browser zugreifen.

Dieses Lab ist für Entwickler aller Erfahrungsstufen gedacht, die an der Entwicklung von Anwendungen beteiligt sind, aber unter Umständen nicht mit dem Erstellen von Cloud-Anwendungen vertraut sind. Erfahrung mit Python sowie dem Flutter-Framework ist hilfreich. Sie müssen Flutter nicht kennen, um die Aufgaben in diesem Lab auszuführen. Sie werden jedoch einen Teil des Codes der Flutter-Anwendung überprüfen und ihre Funktionen testen.

Lernziele

Aufgaben in diesem Lab:

• Mit KI-Anwendungen in der Google Cloud Console einen Suchdatenspeicher und eine Suchanwendung erstellen

• Mit Vertex AI Workbench einen Reasoning Engine-Agent bereitstellen

• Eine Python-Anwendung nutzen, die in Vertex AI Search und den Reasoning-Engine-Agent eingebunden ist

• Die Anwendung in Cloud Run bereitstellen und als Backend für eine Flutter-Anwendung verwenden

• Ein Firebase-Projekt einrichten und mit der Flutter-Anwendung verbinden

  Hier ist eine Übersicht der verschiedenen Komponenten, die in diesem Lab verwendet werden:

  

Einrichtung

Für jedes Lab werden Ihnen ein neues Google Cloud-Projekt und die entsprechenden Ressourcen für eine bestimmte Zeit kostenlos zur Verfügung gestellt.

1. Melden Sie sich über ein Inkognitofenster in Qwiklabs an.

2. Beachten Sie die Zugriffszeit (z. B. 1:15:00). Das Lab muss in dieser Zeit abgeschlossen werden.
   Es gibt keine Pausenfunktion. Sie können bei Bedarf neu starten, müssen dann aber von vorn beginnen.

3. Wenn Sie bereit sind, klicken Sie auf Lab starten.

4. Notieren Sie sich Ihre Anmeldedaten (Nutzername und Passwort). Mit diesen Daten melden Sie sich in der Google Cloud Console an.

5. Klicken Sie auf Google Console öffnen.

6. Klicken Sie auf Anderes Konto verwenden. Kopieren Sie den Nutzernamen und das Passwort für dieses Lab und fügen Sie beides in die entsprechenden Felder ein.
   Wenn Sie andere Anmeldedaten verwenden, tritt ein Fehler auf oder es fallen Kosten an.

7. Akzeptieren Sie die Nutzungsbedingungen und überspringen Sie die Seite zur Wiederherstellung der Ressourcen.

Aufgabe 1: Suchdatenspeicher und Suchanwendung erstellen

In dieser Aufgabe implementieren Sie die Suchfunktion für Ihre Flutter-Anwendung, indem Sie mit KI-Anwendungen in der Google Cloud Console einen Suchdatenspeicher und eine Suchanwendung erstellen.

Suchdatenspeicher erstellen

1. Klicken Sie in der Cloud Console auf Alle Produkte ansehen. Scrollen Sie auf der Seite Alle Produkte zum Bereich Künstliche Intelligenz und klicken Sie auf KI-Anwendungen.

2. Klicken Sie auf Aktivieren und fortfahren.

3. Klicken Sie im linken Bereich auf Datenspeicher und dann auf der Seite Datenspeicher auf Datenspeicher erstellen.

   Auf dieser Seite konfigurieren Sie die Datenquelle, die für die Suchergebnisse verwendet werden soll. Das Lab wird mit einem Cloud Storage-Bucket bereitgestellt, der eine CSV-Datei mit Daten zu Artikeln aus dem Merchandise-Onlineshop von Google enthält.

4. Klicken Sie unter Cloud Storage auf Auswählen, um Cloud Storage als Datenquelle auszuwählen.

5. Wählen Sie als Art der importierten Daten Strukturierte FAQ-Daten für eine Chatanwendung (CSV) aus.

6. Klicken Sie auf Datei, um einen Ordner oder eine Datei zum Importieren auszuwählen.

7. Klicken Sie auf Durchsuchen, um die Cloud Storage-URL für die CSV-Datei anzugeben.

8. Klicken Sie auf , um den Inhalt des Cloud Storage-Buckets anzusehen.

9. Wählen Sie die Datei goog_merch.csv aus und klicken Sie dann auf Auswählen.

   Der gs://-URI zum Ordner wird eingefügt.

   

10. Klicken Sie auf Weiter.

11. Geben Sie als Namen des Datenspeichers goog-merch-ds ein.

12. Klicken Sie auf Erstellen.

    Ein Datenspeicher wird erstellt und die Datenaufnahme aus der CSV-Datei wird gestartet.

13. Klicken Sie auf der Seite Datenspeicher auf den Namen des neu erstellten Datenspeichers.

14. Auf dem Tab Dokumente ist eine Liste der importierten Dokumente zu sehen. Klicken Sie auf Dokument anzeigen, um die mit einem Dokument verknüpften Daten anzusehen.

Klicken Sie auf Fortschritt prüfen. Vertex AI Search-Datenspeicher erstellen.

Suchanwendung erstellen

Damit Sie den Suchdatenspeicher verwenden können, verbinden Sie ihn in Vertex AI Agent Builder mit einer Suchanwendung.

1. Klicken Sie in der Cloud Console auf KI-Anwendungen und dann auf Anwendungen.

2. Klicken Sie auf Anwendung erstellen.

3. Klicken Sie auf der Seite Anwendung erstellen unter Suche und Assistent > Benutzerdefinierte Suche (allgemein) auf Erstellen.

4. Konfigurieren Sie auf der Seite Konfiguration der Suchanwendung eine Website-Suchanwendung mit diesen Einstellungen. Lassen Sie ansonsten die Standardeinstellungen unverändert:

   Attribut	Wert (eingeben oder auswählen)
   Features der Enterprise-Version	Deaktivieren
   Name der Anwendung	gms-search-app
   Externer Name Ihres Unternehmens oder Ihrer Organisation	gms-company
   Standort der Anwendung	global (Global)

5. Klicken Sie auf Weiter.

6. Eine Liste der vorhandenen Datenspeicher wird angezeigt. Wählen Sie den Datenspeicher goog_merch_ds aus, den Sie in der vorherigen Unteraufgabe erstellt haben.

7. Klicken Sie zum Erstellen der Suchanwendung auf Erstellen.

   Die Suchanwendung wird erstellt und der Datenspeicher wird mit der Anwendung verbunden.

8. Klicken Sie im Navigationsmenü von KI-Anwendungen auf Vorschau, um die Suchanwendung zu testen.

9. Geben Sie im Feld Suchen das Wort Dino ein.

   Eine Liste mit ähnlichen Suchergebnissen aus den Dokumenten, die in den Datenspeicher importiert wurden, wird angezeigt.

   

   Hinweis: Wenn Ihnen die Fehlermeldung Suchvorschau ist noch nicht bereit angezeigt wird, warten Sie einige Minuten und versuchen Sie es dann noch einmal. Falls Sie nicht warten möchten, können Sie mit der nächsten Aufgabe im Lab fortfahren.

Klicken Sie auf Fortschritt prüfen. Vertex AI Search-Anwendung erstellen.

Aufgabe 2: Backend erstellen und bereitstellen

Das Backend unserer Flutter-Anwendung wird als Cloud Run-Dienst in Google Cloud ausgeführt. Der Backend-Dienst wird in die Suchanwendung eingebunden, die Sie im vorherigen Schritt erstellt haben, um Antworten aus den Daten des Merchandise-Onlineshops zu generieren. Das Backend ist außerdem in einen Reasoning-Engine-Agent eingebunden. So kann auf generative KI-basierte Inhalte in Gemini zugegriffen werden, um Abfragen der Flutter-Anwendung zu beantworten.

In dieser Aufgabe erstellen Sie die Backend-Python-Anwendung und stellen sie in Cloud Run bereit.

Backend-Anwendung konfigurieren und überprüfen

1. Für dieses Lab wurde eine auf VSCode basierende IDE bereitgestellt. Kopieren Sie die IDE-Dienst-URL aus dem Bereich mit den Qwiklabs-Anmeldedaten des Labs und fügen Sie sie in ein neues Inkognito-Browserfenster ein, um auf die IDE zuzugreifen.

   

   Hinweis: Die URL des IDE-Diensts ist der Endpunkt eines Cloud Run-Diensts, der für dieses Lab vorkonfiguriert wurde, und verarbeitet Anfragen an die „code-server“-VM. Die IDE wurde mit code-server erstellt und umfasst die Erweiterungen für Flutter, Dart und Vim.

   

2. Öffnen Sie ein Terminalfenster in der IDE. Klicken Sie im Navigationsmenü der IDE () auf Terminal > Neues Terminal.

   Hinweis: Führen Sie die Befehle in den folgenden Schritten im Terminalfenster der IDE aus.

3. Eine erste Version der Backend-Anwendung und die zugehörigen Dateien sind für das Lab vorkonfiguriert. Kopieren Sie diese Version des Backend-Anwendungsordners und seinen Inhalt aus Cloud Storage:

   gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/ag-web ~ Hinweis: Wenn Sie dazu aufgefordert werden, klicken Sie auf Zulassen, um Text und Bilder aus der Zwischenablage einzufügen, und drücken Sie dann die Eingabetaste.

4. Führen Sie im Terminalfenster der IDE den folgenden Befehl aus, um den Inhalt des Ordners aufzulisten:

   ls ~/ag-web/app

   Der Ordner ag-web/app enthält den Quellcode der Anwendung sowie weitere Dateien, die zum Erstellen der Backend-Anwendung und zum Bereitstellen in Cloud Run erforderlich sind.

5. Konfigurieren Sie PROJECT_ID, LOCATION und STAGING_BUCKET für die Anwendung.

   sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCS_BUCKET/{{{project_0.startup_script.lab_bucket_name|set at lab start}}}/' ~/ag-web/app/app.py

6. Konfigurieren Sie die Backend-Anwendung so, dass sie den zuvor erstellten Suchdatenspeicher verwendet.

   Ersetzen Sie im folgenden Befehl {YOUR_SEARCH_DATA_STORE_ID} durch die ID des Suchdatenspeichers.

   Entfernen Sie die geschweiften Klammern im sed-Befehl.

   Hinweis: Gehen Sie in der Cloud Console zu KI-Anwendungen > Datenspeicher und klicken Sie auf den Namen des zuvor erstellten Suchdatenspeichers, um die ID des Suchdatenspeichers abzurufen. Kopieren Sie den Wert der Datenspeicher-ID, die mit der Suchmaschinen-ID übereinstimmt. sed -i 's/SEARCH_ENGINE_ID/{YOUR_SEARCH_DATA_STORE_ID}/' ~/ag-web/app/app.py

   

7. Klicken Sie im Navigationsmenü der IDE auf und dann auf Ordner öffnen, um den Code in der IDE anzusehen.

8. Wählen Sie den Ordner IDE-DEV/ag-web/ aus der Liste aus und klicken Sie auf Ok.

9. Wenn Sie den Erstellern des Codes vertrauen, klicken Sie auf Yes, I trust the authors (Ja, ich vertraue den Erstellern).

10. Maximieren Sie im Bereich Explorer den Ordner app und klicken Sie dann auf app.py, um die Datei im Editor zu öffnen.

    Der Code der Backend-Anwendung bewirkt Folgendes:

    • Er initialisiert Vertex AI mit der Google Cloud-Projekt-ID, der Region und dem Cloud Storage-Bucket aus diesem Lab.
    • Die Funktion search_gms() nutzt den API-Datenspeicherendpunkt discoveryengine.googleapis.com, um eine Suchanfrage zu starten. Die zuvor erstellte Datenspeicher-ID wird in der URL verwendet.
    • Die Funktion verwendet die vom Nutzer bereitgestellte Suchanfrage, um den Inhalt des Datenspeichers zu durchsuchen, und formatiert die Ergebnisse als JSON-Antwort.
    • Die Anwendung verwendet flask, um Aufrufe an die einzelnen Funktionen weiterzuleiten. Der Endpunkt / ist die Standardseite, mit der überprüft wird, ob die Anwendung erfolgreich geladen wird. Der Endpunkt /ask_gms ruft die Funktion search_gms() auf, die Vertex AI Search verwendet.

Anwendung erstellen und in Cloud Run bereitstellen

Ein Bereitstellungsscript ist verfügbar, um die Backend-Anwendung zu erstellen und in Cloud Run bereitzustellen.

1. Öffnen Sie ein Terminalfenster in der IDE und wechseln Sie in den Ordner der Backend-Anwendung:

   cd ~/ag-web/app

2. Authentifizieren Sie sich über die gcloud CLI bei Google Cloud:

   gcloud auth login

3. Geben Sie Y ein, um fortzufahren.

4. Drücken Sie zum Starten der Anmeldung unter Windows und Linux die Strg-Taste oder unter macOS die Befehlstaste und klicken Sie auf den Link im Terminal.

5. Wenn Sie aufgefordert werden, das Öffnen der externen Website zu bestätigen, klicken Sie auf Öffnen.

6. Klicken Sie auf Ihre E‑Mail-Adresse für das Lab.

7. Wenn Sie aufgefordert werden fortzufahren, klicken Sie auf Fortfahren.

8. Klicken Sie auf Zulassen, um dem Google Cloud SDK Zugriff auf Ihr Google-Konto zu gewähren und die Nutzungsbedingungen zu akzeptieren.

   Ihr Bestätigungscode wird im Browsertab angezeigt.

9. Klicken Sie auf Kopieren.

10. Fügen Sie den Code im Terminalfenster der IDE unter Autorisierungscode eingeben ein und drücken Sie die Eingabetaste.

    Sie sind jetzt in Google Cloud angemeldet.

11. Machen Sie das Script deploy.sh ausführbar und führen Sie es aus, um die Anwendung in der angegebenen Cloud Run-Region bereitzustellen:

    chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

    Nachdem die App erstellt und in Cloud Run bereitgestellt wurde, wird am Ende der Scriptausgabe ihre Endpunkt-URL angezeigt. Die URL wurde durch den Befehl gcloud run deploy generiert, der im Script ausgeführt wurde.

    Hinweis: Die Ausführung dieses Befehls kann einige Zeit in Anspruch nehmen. Warten Sie, bis er abgeschlossen ist, bevor Sie mit der nächsten Aufgabe fortfahren.

Backend-Anwendung testen

Sie testen die Funktionen der Anwendung, indem Sie auf den Cloud Run-Endpunkt zugreifen.

1. Kopieren Sie die Endpunkt-URL der Anwendung, die im vorherigen Schritt generiert wurde, und rufen Sie diese URL in einem neuen Browsertab auf.

2. Wenn die Anwendung geladen wird, wird auf der Startseite Welcome to the ag-web backend app (Willkommen bei der Backend-Anwendung ag-web) angezeigt.

3. Hängen Sie in der Browserleiste den folgenden Pfad an die URL an:

   /ask_gms?query=dino

4. Prüfen Sie, ob die Anwendung mit Ergebnissen aus dem Suchdatenspeicher antwortet, den Sie zuvor erstellt haben.

Klicken Sie auf Fortschritt prüfen. Backend-Anwendung erstellen.

Aufgabe 3: Firebase konfigurieren

Zum Aufrufen der Gemini API verwendet die Frontend-Flutter-Anwendung das Vertex AI for Firebase Dart SDK. Dieses SDK ist als firebase_vertexai-Paket über pub.dev verfügbar – das offizielle Package Repository für Dart- und Flutter-Anwendungen.

Firebase ist eine Backend-Plattform von Google zur Anwendungsentwicklung, die Dienste für verschiedene Plattformen wie Android und iOS bereitstellt.

In dieser Aufgabe richten Sie Firebase ein und melden sich in der Firebase CLI an. Später im Lab verbinden Sie Ihre Flutter-Anwendung mit Firebase.

Firebase einrichten

Sie richten ein Firebase-Projekt ein, um das SDK zu verwenden.

1. Rufen Sie in einem Inkognitofenster die Firebase Console unter https://console.firebase.google.com auf.

2. Klicken Sie auf Firebase-Projekt erstellen.

3. Klicken Sie unten auf der Seite auf Firebase dem Google Cloud-Projekt hinzufügen, um Firebase dem vorhandenen Google Cloud-Projekt Ihres Labs hinzuzufügen.

4. Klicken Sie auf Google Cloud-Projekt auswählen und wählen Sie dann das Lab-Projekt aus der Liste aus.

5. Akzeptieren Sie die Nutzungsbedingungen und klicken Sie auf Weiter.

6. Klicken Sie noch einmal auf Weiter.

7. Klicken Sie auf Bestätigen und fortfahren, um den Standardtarif zu verwenden.

8. Deaktivieren Sie Google Analytics für dieses Projekt und klicken Sie dann auf Firebase hinzufügen.

9. Warten Sie, bis Ihr Firebase-Projekt bereit ist, und klicken Sie dann auf Weiter.

   Firebase kann jetzt mit Ihrem Google Cloud-Projekt im Lab verwendet werden.

In Firebase anmelden

1. Melden Sie sich über das Terminalfenster der IDE in der Firebase CLI an:

   firebase login --no-localhost

2. Wenn Sie Firebase gestatten möchten, Informationen zu CLI- und Emulator-Berichten zu erheben, geben Sie Y ein und drücken Sie die Eingabetaste.

3. Notieren Sie sich die Sitzungs-ID und folgen Sie dann den Schritten, um den Anmeldevorgang zu starten. Drücken Sie unter Windows und Linux die Strg-Taste oder unter macOS die Befehlstaste und klicken Sie auf die URL im Terminal.

4. Wenn Sie aufgefordert werden, die externe Website zu öffnen, klicken Sie auf Öffnen.

5. Klicken Sie auf Ihre E‑Mail-ID für das Lab.

6. Klicken Sie auf Weiter.

7. Klicken Sie auf Zulassen, um der Firebase CLI die entsprechenden Berechtigungen zu gewähren.

8. Klicken Sie auf Ja, ich habe diesen Befehl ausgeführt.

9. Prüfen Sie die Sitzungs-ID und klicken Sie dann auf Ja, das ist meine Sitzungs-ID.

10. Klicken Sie auf Kopieren, um den Autorisierungscode zu kopieren.

11. Fügen Sie den Autorisierungscode im Terminalfenster der IDE ein und drücken Sie die Eingabetaste.

    Sie sind jetzt in der Firebase CLI angemeldet.

Aufgabe 4: Reasoning-Engine-KI-Agent erstellen

Ein KI-Agent ist eine Anwendung, die Large Language Models (LLMs) für Schlussfolgerungen und die Orchestrierung externer Tools nutzt, um ihr Ziel zu erreichen. Vertex AI Agent Builder umfasst eine Reihe von Produkten und Tools von Google, mit denen Sie KI-Agents erstellen können, indem Sie sie mit Ihren zuverlässigen Datenquellen verbinden.

Die Vertex AI Reasoning Engine (auch bekannt als LangChain in Vertex AI) unterstützt Sie beim Erstellen und Bereitstellen eines Reasoning-Engine-Agents mit Vertex AI Agent Builder. LangChain ist ein beliebtes OSS-Tool zum Erstellen von Chatbots und RAG-Systemen.

In der Reasoning Engine können Entwickler Funktionsaufrufe verwenden, um die Ausgabe von LLMs (Gemini) Python-Funktionen zuzuordnen. Die Reasoning Engine lässt sich eng in das Python SDK für das Gemini-Modell in Vertex AI einbinden und ist mit LangChain und anderen Python-Frameworks kompatibel.

In dieser Aufgabe stellen Sie mit Vertex AI Workbench und einem Jupyter-Notebook einen Reasoning-Engine-Agent mit Python-Funktionen bereit. Er kommt bei der nächsten Lab-Aufgabe in unserer auf generativer KI basierenden Backend-Anwendung zum Einsatz.

Vertex AI Workbench-Instanz erstellen

Vertex AI Workbench ist eine Jupyter-Notebook-basierte Entwicklungsumgebung für den gesamten Data-Science- und Machine-Learning-Workflow. Sie können über das Jupyter-Notebook einer Vertex AI Workbench-Instanz mit Vertex AI und anderen Google Cloud-Diensten interagieren. Mit Vertex AI Workbench können Sie beispielsweise über BigQuery- und Cloud Storage-Integrationen in einem Jupyter-Notebook auf Ihre Daten zugreifen und sie analysieren.

Vertex AI Workbench-Instanzen enthalten eine vorinstallierte Suite von Deep-Learning-Paketen mit Unterstützung für die Frameworks TensorFlow und PyTorch.

Vertex AI Workbench-Notebooks bieten eine flexible und skalierbare Lösung für das Entwickeln und Bereitstellen von ML-Modellen in Google Cloud.

1. Klicken Sie zum Erstellen einer Workbench-Instanz in der Cloud Console auf das Navigationsmenü () und wählen Sie Vertex AI > Workbench aus.

2. Wenn Sie in der Cloud Console dazu aufgefordert werden, klicken Sie auf Notebooks API, um diese zu aktivieren.

3. Prüfen Sie, ob auf dem Tab Instanzen die Option Instanzen ausgewählt ist, und klicken Sie dann auf Neu erstellen.

   

4. Geben Sie auf der Seite „Neue Instanz“ als Name den Wert my-instance ein.

5. Lassen Sie alle anderen Einstellungen unverändert und klicken Sie auf Erstellen.

   Die neue Instanz wird im Abschnitt „Instanzen“ gestartet. Warten Sie, bis die Instanz erstellt wurde, bevor Sie mit dem nächsten Schritt fortfahren.

   Hinweis: Wenn die Instanz einsatzbereit ist, wird neben dem Namen ein grünes Häkchen angezeigt.

6. Wenn die Instanz bereit ist, klicken Sie auf JupyterLab öffnen.

   

7. Klicken Sie auf das Python 3-Notebook, um ein Jupyter-Notebook mit Python 3 zu starten.

   

Notebookdatei kopieren

Für dieses Lab wurde ein Notebook bereitgestellt, mit dem ein Reasoning-Engine-Agent erstellt und bereitgestellt wird.

1. Fügen Sie diesen Code in die erste Zelle des neuen Notebooks ein, um das Notebook in Ihre JupyterLab-Instanz zu kopieren:

   !gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .

   

2. Wählen Sie die Zelle aus und führen Sie sie aus, indem Sie im Zellenmenü auf Ausführen klicken:

   

   Durch den Befehl wird das Notebook aus Cloud Storage in Ihre JupyterLab-Instanz kopiert. Nachdem der Befehl ausgeführt wurde, wird die Notebookdatei im obersten Stammordner aufgeführt.

   

3. Doppelklicken Sie zum Öffnen des Notebooks in der Ordnerliste auf die Notebookdatei. Es wird ein separater Tab mit dem Inhalt des Notebooks erstellt.

Reasoning-Engine-Agent erstellen und bereitstellen

1. Führen Sie alle Codezellen im Notebook in der angegebenen Reihenfolge aus. Um eine Zelle auszuführen, klicken Sie auf eine beliebige Stelle in der Zelle. Klicken Sie dann im Zellenmenü oder im oberen Notebook-Menü auf Ausführen.

   Hinweis: Wenn Sie den Befehl in einer Zelle ausführen, warten Sie, bis er abgeschlossen ist, bevor Sie zur nächsten Zelle wechseln. Nachdem ein Befehl ausgeführt wurde, wird der Stern (*) im Feld mit der Zellennummer durch die Nummer der Zelle ersetzt. Hinweis: Lesen Sie die unten stehenden zellspezifischen Anweisungen oder Schritte, bevor Sie eine Zelle ausführen. Diese Anweisungen sind mit dem Präfix CELL INSTR gekennzeichnet.

   a. [CELL INSTR] Restart current runtime (Aktuelle Laufzeit neu starten)

   Wenn Sie dazu aufgefordert werden, klicken Sie im Dialogfeld Kernel Restarting (Kernel neu starten) auf Ok.

   b. [CELL INSTR] Set Google Cloud project information and initialize Vertex AI SDK (Google Cloud-Projektinformationen festlegen und das Vertex AI SDK initialisieren)

   Aktualisieren Sie die Konfigurationswerte für PROJECT_ID, LOCATION und STAGING_BUCKET, bevor Sie diese Zelle ausführen, um das Vertex AI SDK zu initialisieren:

   PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"

   Aktualisierte Zelle mit Beispielkonfiguration:

   

   c. [CELL INSTR] Define Tool function for Vertex AI Search (Toolfunktion für Vertex AI Search definieren)

   Ersetzen Sie den Wert von GOOGLE_SHOP_VERTEXAI_SEARCH_URL durch die Cloud Run-Endpunkt-URL Ihrer Backend-Anwendung, bevor Sie diese Zelle ausführen.

   Die Endpunkt-URL rufen Sie ab, indem Sie in der Cloud Console zu Cloud Run gehen und dann auf den Namen der Backend-Anwendung (ag-web) klicken. Kopieren Sie die Endpunkt-URL und fügen Sie sie in die Zelle ein.

   

   Aktualisierte Zelle mit beispielhafter Cloud Run-Endpunkt-URL der Backend-Anwendung:

   

   Hinweis: Sie können eine Zelle auch ausführen, indem Sie in der Notebook-Menüleiste auf Ausführen klicken.

2. Nachdem Sie die Zelle Deploy the Agent to the Reasoning Engine runtime (Agent in der Reasoning-Engine-Laufzeit bereitstellen) ausgeführt haben, warten Sie, bis der Befehl ausgeführt und der Reasoning-Engine-Agent erstellt wurde. Kopieren Sie dann die Reasoning-Engine-ID:

   

   Sie verwenden diese ID, um die Backend-Anwendung in der nächsten Aufgabe zu konfigurieren und neu bereitzustellen.

   Hinweis: Das Ausführen dieser Zelle kann bis zu zehn Minuten dauern. Warten Sie, bis die endgültige Ausgabe angezeigt wird, die angibt, dass der Reasoning-Engine-Agent erstellt wurde, bevor Sie mit dem nächsten Schritt fortfahren.

3. Um zu testen, ob der Reasoning-Engine-Agent korrekt funktioniert, führen Sie die nächsten beiden Zellen aus und beobachten die Ausgabe.

   Der Reasoning-Engine-Agent hat je nach Abfrage und Ausgabe des Gemini-Modells entweder den Wikipedia- oder den Vertex AI Search-Datenspeicher aufgerufen.

Klicken Sie auf Fortschritt prüfen. Reasoning-Engine-Agent bereitstellen.

Aufgabe 5: Backend-Anwendung erweitern

Wir erweitern jetzt die Backend-Anwendung, damit sie den Reasoning-Engine-Agent aufruft, den Sie in der vorherigen Aufgabe bereitgestellt haben.

Die erste Version der Backend-Anwendung ruft Ergebnisse nur direkt aus Vertex AI Search ab. In der neuen Version ruft sie den Reasoning-Engine-Agent auf, der die Ausgaben von Gemini und die Tools des Agents verwendet, um je nach Prompt mithilfe von Vertex AI Search oder Wikipedia eine Antwort zu generieren.

In dieser Aufgabe aktualisieren Sie den Code der Backend-Anwendung und fügen einen Einstiegspunkt hinzu, über den der Reasoning-Engine-Agent mit einer Abfrage aufgerufen und die Antwort des Agents zurückgegeben wird.

Backend-Anwendung ändern

1. Im Terminalfenster der IDE hängen Sie an die Datei app.py den Code für den neuen Einstiegspunkt an. Führen Sie dazu folgenden Befehl aus:

   cat << EOF >> ~/ag-web/app/app.py # # Reasoning Engine # NB_R_ENGINE_ID = "REASONING_ENGINE_ID" from vertexai.preview import reasoning_engines remote_agent = reasoning_engines.ReasoningEngine( f"projects/{PROJECT_ID}/locations/{LOCATION}/reasoningEngines/{NB_R_ENGINE_ID}" ) # Endpoint for the Flask app to call the Agent @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF

2. Konfigurieren Sie die Backend-Anwendung so, dass sie den zuvor erstellten Reasoning-Engine-Agent verwendet.

   Ersetzen Sie den String {YOUR_REASONING_ENGINE_ID} im folgenden Befehl durch die Reasoning-Engine-ID, die Sie in der vorherigen Aufgabe aus der Notebookzelle kopiert haben. Führen Sie dann den Befehl im Terminalfenster der IDE aus.

   Entfernen Sie die geschweiften Klammern im sed-Befehl.

   sed -i 's/REASONING_ENGINE_ID/{YOUR_REASONING_ENGINE_ID}/' ~/ag-web/app/app.py

3. Klicken Sie im Navigationsmenü der IDE auf und wählen Sie die Datei IDE-DEV/ag-web/app/app.py aus, um den Code in der IDE anzusehen.

   In der erweiterten Version der Backend-Anwendung:

   • wird aus der Reasoning-Engine-Laufzeit ein Handle für den Remote-Agent mit der REASONING_ENGINE_ID des Agents abgerufen, den Sie in der vorherigen Aufgabe erstellt haben.
   • wird ein neuer /ask_gemini-Endpunkt festgelegt, der die Funktion „ask_gemini()“ definiert.
   • übergibt die Funktion den vom Nutzer bereitgestellten query-Parameter aus der Anfrage an die Reasoning Engine (remote_agent) und gibt die Antwort des Agents zurück.

Backend-Anwendung erstellen und erneut in Cloud Run bereitstellen

1. Wechseln Sie in den Ordner der Backend-Anwendung:

   cd ~/ag-web/app

2. Führen Sie das Script aus, um die Anwendung in der angegebenen Cloud Run-Region erneut bereitzustellen:

   ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

Backend-Anwendung testen

Sie testen die Funktionen der Anwendung, indem Sie auf den Cloud Run-Endpunkt zugreifen.

1. Kopieren Sie die Endpunkt-URL der Anwendung, die im vorherigen Schritt generiert wurde, und rufen Sie diese URL in einem neuen Browsertab auf.

2. Wenn die Anwendung geladen wird, wird auf der Startseite Welcome to the ag-web backend app (Willkommen bei der Backend-Anwendung ag-web) angezeigt.

3. Hängen Sie in der Browserleiste den folgenden Pfad an die URL an:

   /ask_gemini?query=where can I buy the chrome dino pin

   Die Anwendung antwortet mit Ergebnissen des Agenten, die dieser aus dem zuvor erstellten Vertex AI Search-Datenspeicher abgerufen hat.

   Der Emaille-Anstecker mit dem Chrome Dino ist ein Produkt, das im Google Merchandise-Shop erhältlich ist. Er kostet 7,00 USD. Sie können das Produkt im Onlineshop von Google kaufen: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/.

4. Ersetzen Sie in der Browserleiste den Pfad durch:

   /ask_gemini?query=what is fallingwater

   Die Anwendung antwortet mit Ergebnissen des Agents, der eine Antwort über die Wikipedia API abgerufen hat, die Sie im Notebook konfiguriert haben.

   Fallingwater wurde 1935 vom Architekten Frank Lloyd Wright entworfen. Das Haus liegt im Südwesten Pennsylvanias, rund 70 Meilen südöstlich von Pittsburgh. Es ist bekannt, weil es über einen Wasserfall hinausragt. Hinweis: Die tatsächliche Antwort, die Sie erhalten, kann von den oben angezeigten Antworten abweichen.

Aufgabe 6: Gemini 2.0 Flash testen

Nachdem Sie die Backend-Anwendung, die Vertex AI Search-Komponenten und einen Reasoning-Engine-Agent entwickelt und bereitgestellt haben, können Sie jetzt mit dem Entwerfen und Erstellen des Flutter-Frontends beginnen.

Mit der Flutter-Anwendung können Nutzer mehr über Fotos erfahren, die sie in die Anwendung hochladen. Diese ist in Gemini eingebunden, um Antworten zu den Fotos zu generieren, und verwendet einen KI-Agenten, um die Antworten über eine Chat-Oberfläche bereitzustellen.

Bevor Sie die Frontend-Anwendung entwickeln, müssen Sie die Struktur der Antworten festlegen, die vom Gemini 2.0 Flash-Modell zurückgegeben werden. Dieses Modell wird vom KI-Agenten verwendet, den Sie zuvor im Lab bereitgestellt haben.

In dieser Aufgabe senden Sie einen Prompt an das Gemini 2.0 Flash-Modell und sehen sich die Antwort im JSON-Format an.

1. Gemini 2.0 Flash ist in Vertex AI Studio in der Cloud Console verfügbar. Klicken Sie zum Öffnen von Vertex AI Studio auf das Navigationsmenü () und wählen Sie Vertex AI > Prompt erstellen (unter Vertex AI Studio) aus.

2. Wenn Sie aufgefordert werden, die APIs zu aktivieren, die für die Verwendung von Vertex AI Studio erforderlich sind, klicken Sie auf Zustimmen und fortfahren.

   Hinweis: Vertex AI Studio ist ein Tool in der Google Cloud Console, mit dem Sie generative KI-Modelle schnell testen und Prototypen erstellen können, um ihre Funktionen in Anwendungen zu nutzen.

3. Klicken Sie neben Prompt auf Medien einfügen und wählen Sie Aus Cloud Storage importieren aus.

   

4. Klicken Sie neben dem Namen des Lab-Buckets auf >.

5. Wählen Sie die Bilddatei fallingwater.jpg aus und klicken Sie dann auf Auswählen.

   Das Bild wird in das Prompt-Feld hochgeladen.

6. Geben Sie im Prompt-Feld unter dem Bild den Prompt Was ist das? ein und klicken Sie auf Senden ().

   Das Modell liefert eine kurze Antwort, in der das Objekt im Bild korrekt beschrieben wird.

7. Wenn Sie weitere Informationen aus dem Modell im JSON-Format abrufen möchten, ändern Sie den Textprompt. Wenn Sie den Prompt bearbeiten möchten, scrollen Sie zum Anfang des Prompt-Bereichs und klicken Sie auf Bearbeiten. Aktualisieren Sie den Prompt-Text auf:

   Was ist das? Nenne den Namen des Gegenstands und beschreibe ihn so genau wie möglich. Stelle auch 3 weiterführende Fragen bereit, mit denen ich mehr über diesen Gegenstand erfahren kann. Generiere die Antwort im JSON-Format mit den Schlüsseln „name“, „description“ und „description“.

8. Klicken Sie auf Senden ().

9. Sehen Sie sich die JSON-Antwort an, die vom Modell generiert wird.

   { "name": "Fallingwater", "description": "Das ist Fallingwater, ein Haus nach dem Entwurf des bekannten Architekten Frank Lloyd Wright. Es ist über einem Wasserfall des Flusses Bear Run errichtet und liegt im Südwesten Pennsylvanias. Es fügt sich nahtlos in seine natürliche Umgebung ein und gilt als Meisterwerk der organischen Architektur.", "suggestedQuestions": [ "Von wem wurde Frank Lloyd Wright für den Entwurf von Fallingwater beauftragt?", "Welches sind architektonische Schlüsselmerkmale von Fallingwater?", "Ist Fallingwater für den Publikumsverkehr geöffnet und, wenn ja, wie kann ich das Haus besichtigen?" ] }

   Sie haben jetzt einen Prompt und eine Modellantwort im JSON-Format, die wir zum Erstellen der Flutter-Anwendung verwenden können.

   Hinweis: Die Antwort des Modells kann sich von der oben angezeigten Antwort unterscheiden.

Aufgabe 7: Flutter-Frontend-Anwendung bereitstellen

Nachdem Sie die Struktur der Daten festgelegt haben, die vom Modell zurückgegeben werden, können Sie nun die Frontend-Anwendung erstellen.

Flutter ist ein Open-Source-Framework zur Anwendungsentwicklung für mehrere Plattformen. Sie können eine Codebasis schreiben, die unter Android, iOS, macOS, Windows, Linux und im Web ausgeführt wird. Flutter-Anwendungen werden in der Programmiersprache Dart entwickelt.

In diesem Lab verwenden Sie Web als Zielplattform, damit die Flutter-Anwendung als Webanwendung bereitgestellt und über einen Browser aufgerufen werden kann.

In dieser Aufgabe sehen Sie sich den Code der Flutter-Anwendung an, erstellen die Anwendung als Webanwendung und führen sie aus.

Codebasis der Flutter-Anwendung prüfen

Eine der Funktionen der Anwendung ermöglicht es Nutzern, ein Foto einer Sehenswürdigkeit hochzuladen. Dazu werden dann von Gemini Informationen abgerufen. Für dieses Lab wurde die Flutter-Anwendung entwickelt und in Cloud Storage bereitgestellt.

1. Laden Sie im Terminalfenster der IDE den Code der Flutter-Anwendung herunter:

   gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/app ~

2. Führen Sie im Terminalfenster der IDE den folgenden Befehl aus, um die Projektabhängigkeiten der Anwendung abzurufen:

   cd ~/app; flutter pub get

3. Klicken Sie im Navigationsmenü der IDE () auf Datei und dann auf Ordner öffnen, um sich den Code anzusehen.

4. Wählen Sie /home/ide-dev/app/ aus der Liste aus und klicken Sie auf Ok.

5. Wenn Sie den Erstellern der Dateien in dem Ordner vertrauen, klicken Sie auf Yes, I trust the authors (Ja, ich vertraue den Erstellern).

   Hier ist eine kurze Übersicht über den Inhalt des Ordners app:

   Ordner/Datei	Beschreibung
   app	Stammordner des Projekts, der die Unterordner und Dateien enthält, aus denen die Flutter-Anwendung besteht
   android/ios/linux/macos/web/windows	Enthält plattformspezifische Dateien, die zum Ausführen der Flutter-Anwendung auf den unterstützten Plattformen erforderlich sind
   lib	Enthält die zentralen Dart-Anwendungsdateien für die Funktionen, das Routing, die Datenmodelle und die Benutzeroberfläche
   test	Enthält Dart-Tests, die zum Testen der Anwendungs-Widgets verwendet werden
   pubspec.yaml	Enthält die Abhängigkeiten der Anwendung, die Flutter-Version und andere Konfigurationseinstellungen
   analysis_options.yaml	Enthält Konfigurationseinstellungen für die statische Analyse der Anwendung

   Sehen wir uns einige der Dateien in diesen Ordnern an.

6. Klicken Sie im Explorer-Menü auf den Ordner /app/lib/models und dann auf die Datei metadata.dart, um sie zu öffnen.

   Die Datei metadata.dart enthält das Datenmodell, das von der Flutter-Anwendung verwendet wird.

   class Metadata { String name = ''; String description = ''; List suggestedQuestions = []; // more code follows ... }

   Die Metadaten-Objektattribute werden den JSON-Attributen zugeordnet, die in der Antwort der Gemini API zurückgegeben werden. Die Methode fromJson initialisiert die Objektattribute, wenn sie aufgerufen wird.

7. Klicken Sie im Explorer-Menü auf die Datei /app/lib/main.dart, um sie zu öffnen.

   Dies ist der Einstiegspunkt für die Flutter-Anwendung. Nach dem Ausführen der Initialisierungsaufgaben wird durch den Code in dieser Datei die Benutzeroberfläche der Anwendung anhand von Material-Komponenten erstellt und Titel, Design und Routingkonfiguration werden festgelegt.

   Hinweis: Eine Material-Anwendung beginnt mit dem MaterialApp-Widget, das eine Reihe nützlicher Widgets im Stammverzeichnis der Anwendung erstellt, einschließlich eines Navigators, der das Routing zu verschiedenen Bildschirmen der Anwendung verwaltet.

8. Wenn Sie die Routingkonfiguration der Anwendung aufrufen möchten, klicken Sie im Explorer-Menü auf die Datei /app/lib/functionality/routing.dart, um sie zu öffnen.

   Der Code in dieser Datei definiert die /-, /chat- und /settings-Routen für die Anwendung.

   Flutter verwendet Widgets. Dies sind deklarative Klassen, die zum Erstellen der Anwendung verwendet werden. In Flutter erstellen Sie ein Layout, indem Sie Widgets zu komplexeren Widgets zusammenstellen, die einen Widget-Baum bilden. Weitere Informationen zum Erstellen von Benutzeroberflächen in Flutter finden Sie in der Dokumentation.

9. Sehen wir uns einmal den Code für einige der Bildschirme und Funktionen der Anwendung an. Klicken Sie im Explorer-Menü auf die Datei /app/lib/ui/screens/quick_id.dart, um sie zu öffnen.

   Diese Datei enthält die Klassen, die die Widgets der Anwendung erstellen. Dazu gehört die Klasse GenerateMetadataScreen zum Erstellen der Hauptseite der Anwendung. Sie wird über den in der Datei routing.dart definierten Pfad / aufgerufen. Über die Benutzeroberfläche kann der Nutzer ein Bild von seinem Computer oder Mobilgerät hochladen oder mit der Kamera des Geräts ein Foto aufnehmen.

   

   Die Anwendung umfasst weitere Bildschirme für die Einstellungen und die Chatseite. Sie sind in den Dateien settings.dart und chat.dart im Ordner app/lib/ui/screens/ implementiert.

   Bei der Anwendungsinitialisierung wird das Vertex AI for Firebase Dart SDK verwendet, um eine Instanz des Gemini-GenAI-Modells abzurufen, das von der Anwendung verwendet wird. Dies ist in der Klasse _GenerateMetadataScreenState implementiert.

   void initState() { super.initState(); model = FirebaseVertexAI.instance.generativeModel( model: geminiModel, generationConfig: GenerationConfig( temperature: 0, responseMimeType: 'application/json', ), ); }

   Nachdem der Nutzer ein Bild ausgewählt hat, ruft die Anwendung die Vertex AI Gemini API mit dem Bild und einem Textprompt auf. Dies ist derselbe Textprompt, den Sie in einer früheren Aufgabe beim Testen des Gemini 2.0 Flash-Modells verwendet haben.

   Die Methode _sendVertexMessage() enthält den Code, der den Prompt sendet. Hier ist ein Auszug daraus:

   Future _sendVertexMessage() async { ... final messageContents = Content.multi( [ TextPart( 'Was ist der Gegenstand in diesem Foto? Nenne den Namen des Gegenstands, beschreibe ihn so genau wie möglich und stelle 3 weiterführende Fragen bereit, mit denen ich mehr über diesen Gegenstand erfahren kann. Antworte im JSON-Format mit den Schlüsseln "name", "description" und "suggestedQuestions".'), DataPart('image/jpeg', _image!), ], ); var response = await model.generateContent([messageContents]); var text = response.text; if (text == null) { _showError('No response from API.'); return; } else { var jsonMap = json.decode(text); if (mounted) { context.read().updateMetadata(Metadata.fromJson(jsonMap)); } } ... }

   Die JSON-Antwort des Modells wird decodiert, um die Schlüssel name, description und suggestedQuestions zu extrahieren. Diese werden lokal gespeichert und in der Benutzeroberfläche der Anwendung angezeigt.

Flutter-Anwendung mit Firebase verbinden

1. Wechseln Sie im Terminalfenster der IDE in den Projektstammordner app und aktivieren Sie das Paket flutterfire_cli:

   cd ~/app dart pub global activate flutterfire_cli

2. Führen Sie den folgenden Befehl aus, um die Flutter-Anwendung bei Firebase zu registrieren:

   flutterfire configure --project={{{project_0.project_id|set at lab start}}}

   Nach dem Ausführen des Befehls wird dem Ordner lib Ihres Flutter-Projekts die Konfigurationsdatei firebase_options.dart hinzugefügt.

3. Zum Konfigurieren der unterstützten Plattformen für die Anwendung drücken Sie die Leertaste, um die Auswahl aller Plattformen außer Web aufzuheben. Mit der Pfeiltaste können Sie durch die Plattformen scrollen. Drücken Sie dann die Eingabetaste.

   Ihre Flutter-Webanwendung ist jetzt für die Verwendung mit Firebase registriert.

Chatfunktion der Flutter-Anwendung konfigurieren

Die Flutter-Anwendung hat eine Chatfunktion, mit der Nutzer mehr Informationen über das in die Anwendung hochgeladene Bild erhalten oder Informationen aus anderen externen Datenquellen anfordern können, die möglicherweise aktuellere Angaben enthalten. Dazu müssen wir das Gemini-Modell mit diesen Datenquellen verknüpfen oder fundieren.

Zur Implementierung dieser Funktion wird die Flutter-Anwendung in den Reasoning-Engine-Agent eingebunden, den Sie zuvor in diesem Lab bereitgestellt haben. Die Integration erfolgt durch die Verbindung der Flutter-Anwendung mit dem Endpunkt der Backend-Anwendung, die Sie ebenfalls erstellt und in Cloud Run bereitgestellt haben.

1. Rufen Sie zuerst den Hostnamen des Cloud Run-Endpunkts der Backend-Anwendung ab und speichern Sie den Wert in einer Umgebungsvariablen. Führen Sie im Terminalfenster der IDE den folgenden Befehl aus:

   BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST

2. Der Endpunkt der Backend-Anwendung für die Flutter-Anwendung ist in der Datei ~/app/lib/config.dart konfiguriert. Aktualisieren Sie den Konfigurationseintrag in der Datei:

   sed -i "s/cloudRunHost = .*/cloudRunHost = '$BACKEND_APP_HOST';/" ~/app/lib/config.dart

3. Klicken Sie zum Überprüfen der Änderung im Explorer-Menü der IDE auf die Datei IDE-DEV/app/lib/config.dart, um sie zu öffnen. Prüfen Sie, ob der Wert des Konfigurationseintrags cloudRunHost wie in dem Beispiel unten aktualisiert wurde.

   

   Hinweis: Der Wert sollte mit dem Wert der Umgebungsvariablen BACKEND_APP_HOST übereinstimmen, die Sie in einem vorherigen Schritt festgelegt haben.

Code der Chatfunktion prüfen

Jetzt sehen wir uns den Code für die Chatfunktion in der Flutter-Anwendung an.

1. Klicken Sie im Explorer-Menü der IDE auf die Datei /app/lib/ui/screens/chat.dart, um sie zu öffnen.

   Die Klasse ChatPage dient zum Erstellen des Flutter-Widgets für die Chatseite in der Benutzeroberfläche. Diese Seite wird angezeigt, wenn ein Nutzer auf die Schaltfläche Tell me more (Weitere Informationen) klickt.

   

   Zum Erstellen der Chatbenutzeroberfläche verwendet die Anwendung das Paket flutter_chat_ui, das den größten Teil des anpassbaren Boilerplate-Codes für die Chatfunktion implementiert. Die Methode build() verwendet die Klasse Chat, um das Widget zu erstellen.

   Widget build(BuildContext context) { ... Chat( typingIndicatorOptions: TypingIndicatorOptions( typingUsers: typingUsers, ), listBottomWidget: suggestionsWidget, messages: _messages, onSendPressed: _handleSendPressed, showUserAvatars: true, showUserNames: true, user: _user, theme: DefaultChatTheme( receivedMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSurface, ), sentMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSecondary, ), userAvatarNameColors: [ Theme.of(context).colorScheme.primary, ], backgroundColor: Theme.of(context).colorScheme.surfaceContainerHigh, primaryColor: Theme.of(context).colorScheme.primary, secondaryColor: Theme.of(context).colorScheme.surface, ), ), ... }

   Das listBottomWidget dient dazu, die Liste der vorgeschlagenen Fragen anzuzeigen, die in der Antwort auf den vorherigen Gemini-Aufruf zurückgegeben werden. Der Nutzer kann dann eine Frage als Chat-Nachricht auswählen.

   Die Callback-Methode _handleSendPressed() wird aufgerufen, wenn der Nutzer im Chatfenster auf Senden klickt. Die Methode erstellt eine neue Nachricht, fügt sie der Nachrichtenliste hinzu und sendet sie mit der Methode askAgent() an das Backend.

2. Scrollen Sie im Code nach unten und suchen Sie die Methode askAgent().

   Zum Aufrufen von Gemini mit dem Reasoning-Engine-Agent sendet die askAgent()-Methode eine Anfrage an die /ask_gemini-URL am Cloud Run-Endpunkt der Backend-Anwendung. Die Abfrageparameter der Anfrage enthalten die Werte name und description für das Bild, die im vorherigen Gemini-Aufruf zurückgegeben wurden, sowie die Nachricht des Nutzers.

   Future askAgent( String name, String description, String question) async { var query = 'The photo is $name. $description. $question.'; var endpoint = Uri.https(cloudRunHost, '/ask_gemini', {'query': query}); var response = await http.get(endpoint); if (response.statusCode == 200) { var responseText = convert.utf8.decode(response.bodyBytes); return responseText.replaceAll(RegExp(r'\*'), ''); } return 'Sorry I can\'t answer that.'; }

   Die Antwort der Backend-Anwendung wird durch die aufrufende Funktion _sendMessageToAgent() der Nachrichtenliste im Chatfenster hinzugefügt.

Flutter-Anwendung bereitstellen

Da die Konfiguration der Flutter-Anwendung nun abgeschlossen ist, können Sie sie erstellen und bereitstellen. Für dieses Lab verwenden wir fwr, einen Entwicklungsserver für Flutter Web, um die Anwendung als Webanwendung auszuführen.

1. Achten Sie darauf, dass Sie sich im Ordner der Flutter-Anwendung befinden. Führen Sie im Terminalfenster der IDE den folgenden Befehl aus:

   cd ~/app

2. Führen Sie den folgenden Befehl aus, um die Projektabhängigkeiten der Anwendung abzurufen:

   flutter pub get

3. Mit diesem Befehl erstellen Sie das Projekt und starten den Webserver:

   fwr

   Warten Sie, bis der Server gestartet wurde und die Flutter-Anwendung bereitstellt. Nach dem Start sollte die Ausgabe des Befehls in etwa so aussehen:

   

Klicken Sie auf Fortschritt prüfen. Firebase-Projekt und Flutter-Anwendung konfigurieren

Aufgabe 8: Flutter-Anwendung testen

Nun testen wir die Funktionen der Flutter-Anwendung.

Testbilder herunterladen

1. Laden Sie ein Bild herunter und speichern Sie es auf Ihrem Computer, um die Anwendung zu testen. Kopieren Sie die URL, um das Bild in einem separaten Browsertab anzusehen:

   Bild von Fallingwater

2. Klicken Sie mit der rechten Maustaste auf das Bild und speichern Sie es auf Ihrem Computer.

3. Wiederholen Sie diese Schritte, um ein Bild des Google Chrome Dino-Ansteckers über die folgende URL herunterzuladen:

   Bild des Google Chrome Dino-Ansteckers

Anwendung testen

1. Kopieren Sie die Live-Server-URL aus dem Bereich mit den Qwiklabs-Anmeldedaten und öffnen Sie sie in einem neuen Tab Ihres Inkognito-Browserfensters, um auf die Flutter-Anwendung zuzugreifen.

2. Es dauert einige Sekunden, bis die Anwendung geladen ist. Klicken Sie dann auf Aus der Galerie auswählen, um das Bild von Fallingwater hochzuladen.

   Nachdem Sie das Bild hochgeladen haben, ruft die Anwendung die Vertex AI Gemini API auf, um eine Antwort zu generieren, die den Namen und die Beschreibung des Bildes enthält. Diese werden dann in der Benutzeroberfläche der Anwendung angezeigt.

   

   Es kann einige Sekunden dauern, bis die Felder für Name und Beschreibung in der Benutzeroberfläche der Anwendung mit der Antwort des Gemini-Modells gefüllt sind.

   Hinweis: Falls Sie eine Fehlermeldung über eine verweigerte Berechtigung erhalten, ignorieren Sie diese und klicken Sie auf „Ok“, um fortzufahren. Klicken Sie auf Bild entfernen und laden Sie das Bild noch einmal hoch.

3. Klicken Sie auf Weitere Informationen.

   Die Chatseite wird geladen und zeigt die vorgeschlagenen Fragen an, die in der Antwort auf den vorherigen Aufruf der Gemini API zurückgegeben wurden.

   

   Hinweis: Falls keine vorgeschlagenen Fragen angezeigt werden, aktualisieren Sie die Seite und wiederholen Sie die beiden vorherigen Schritte zum Hochladen des Bildes.

Anwendung mit Merchandise-Daten testen

1. Klicken Sie in der Chat-Benutzeroberfläche auf Bild entfernen.

2. Klicken Sie zum Hochladen des Google Chrome Dino-Ansteckers auf Aus der Galerie auswählen und laden Sie das zuvor gespeicherte Bild hoch.

   Nachdem Sie das Bild hochgeladen haben, ruft die Anwendung die Vertex AI Gemini API auf, um eine Antwort zu generieren, die den Namen und die Beschreibung des Bildes enthält. Diese werden dann in der Benutzeroberfläche der Anwendung angezeigt.

3. Klicken Sie auf Weitere Informationen.

4. Geben Sie in das Chat-Nachrichtenfeld Folgendes ein:

   Wo kann ich diesen Anstecker kaufen?

   Der Agent sendet einen HTTPS-Aufruf an den Cloud Run-Endpunkt der Backend-Anwendung, die den Reasoning-Engine-Agent aufruft. Dieser gibt mithilfe von Gemini eine Antwort aus dem Vertex AI Search-Datenspeicher zurück.

   

5. (Optional) Wenn Sie das für Mobilgeräte optimierte Layout der Flutter-Anwendung sehen möchten, verkleinern Sie das Browserfenster auf die ungefähre Größe eines Mobilgeräts.

   

   Dies zeigt, dass die Flutter-Anwendung auf Änderungen der Bildschirm- oder Fenstergröße reagieren kann. Flutter bietet Widgets und Pakete, mit denen Sie Ihre Anwendung responsiv und an die Gerätekonfiguration anpassbar machen können.

Lab beenden

Wenn Sie das Lab abgeschlossen haben, klicken Sie auf Lab beenden. Qwiklabs entfernt daraufhin die von Ihnen genutzten Ressourcen und bereinigt das Konto.

Anschließend erhalten Sie die Möglichkeit, das Lab zu bewerten. Wählen Sie die entsprechende Anzahl von Sternen aus, schreiben Sie einen Kommentar und klicken Sie anschließend auf Senden.

Die Anzahl der Sterne hat folgende Bedeutung:

• 1 Stern = Sehr unzufrieden
• 2 Sterne = Unzufrieden
• 3 Sterne = Neutral
• 4 Sterne = Zufrieden
• 5 Sterne = Sehr zufrieden

Wenn Sie kein Feedback geben möchten, können Sie das Dialogfeld einfach schließen.

Verwenden Sie für Feedback, Vorschläge oder Korrekturen den Tab Support.

Das wars! Sie haben das Lab erfolgreich abgeschlossen.

Die Aufgaben in diesem Lab:

• Mit Vertex AI Agent Builder in der Google Cloud Console einen Suchdatenspeicher und eine Suchanwendung erstellen
• Mit Vertex AI Workbench einen Reasoning-Engine-Agent bereitstellen
• Eine Python-Anwendung entwickeln, die in Vertex AI Search und den Reasoning-Engine-Agent eingebunden ist
• Die Anwendung in Cloud Run bereitstellen und als Backend für eine Flutter-Anwendung verwenden
• Ein Firebase-Projekt einrichten und mit der Flutter-Anwendung verbinden
• Code der Flutter-Anwendung ansehen, um mehr über die Funktionen zu erfahren
• Flutter-Anwendung ausführen und testen

Weitere Informationen

• Gemini für Google Cloud – Übersicht
• Einführung in Vertex AI Workbench
• Vertex AI Studio
• Firebase

© 2024 Google LLC. Alle Rechte vorbehalten. Google und das Google-Logo sind Marken von Google LLC. Alle anderen Unternehmens- und Produktnamen können Marken der jeweils mit ihnen verbundenen Unternehmen sein.