Vorhandene Apps mit Gemini entdecken und optimieren

1. Übersicht

In diesem Codelab wird gezeigt, wie Sie mit Gemini eine Clientanwendung auf einem vorhandenen API-Backend erstellen.

Lerninhalte

In diesem Lab wird veranschaulicht, wie Gemini mit einer vorhandenen Anwendung verwendet wird. In diesem Lab lernen Sie Folgendes:

Jump Start-Lösung für die KI‑/ML-Bildverarbeitung bereitstellen
Gemini verwenden, um die API-Anwendung zu erkunden
Mit Gemini einen Client für die API-Anwendung erstellen

Einrichtung – Neues Projekt erstellen

Je nach den Richtlinien Ihrer Organisation können Sie diese Lösung möglicherweise nicht richtig bereitstellen.

Empfehlung: Verwenden Sie ein Konto mit vollständigen Berechtigungen (z. B. ein privates Konto) anstelle eines Unternehmens- oder Schulkontos.

Hinweis:Wenn Sie vor Kurzem ein Projekt erstellt haben, für das Sie vollständige Berechtigungen haben und in dem die Gemini API bereits aktiviert ist, können Sie dieses Projekt weiterhin verwenden und diesen Schritt überspringen. Wenn Sie beispielsweise vor Kurzem ein anderes Gemini-Codelab abgeschlossen haben, können Sie diesen Schritt überspringen.

Öffnen Sie die Google Cloud Console
Klicken Sie auf das Drop-down-Menü für das aktuelle Projekt.
Klicken Sie auf Neues Projekt.
Geben Sie einen Projektnamen ein und klicken Sie auf ERSTELLEN.
- Empfehlung: Verwenden Sie einen eindeutigen Projektnamen, damit Project name und Project ID identisch sind.

2. Schnellstart-Lösung bereitstellen

Schnellstartlösungen sind vordefinierte Lösungsvorlagen von Google Cloud. In diesem Lab wird anhand einer Jump Start Solution gezeigt, wie Gemini zur Verbesserung einer vorhandenen Anwendung beitragen kann.

Rufen Sie die Detailseite der Jump Start-Lösung für die KI/ML-Bildverarbeitung auf.
- Klicken Sie auf das Dreistrich-Menü.
- Klicken Sie im Untermenü Produkte und Lösungen auf Schnellstartlösungen.
- Klicken Sie auf KI-/ML-Bildverarbeitung in Cloud Functions
Klicken Sie auf DEPLOY (Bereitstellen).
- Wenn die Abrechnung für Ihr Projekt nicht aktiviert ist, aktivieren Sie sie.
- Bestätigen Sie den Projektnamen und klicken Sie auf WEITER.
- Wählen Sie us-central1 (Iowa) als Region aus.
- Wenn Sie zu anderen Eingaben aufgefordert werden, übernehmen Sie die Standardeinstellungen.
- Klicken Sie auf DEPLOY (Bereitstellen).
- Das kann bis zu 15 Minuten dauern.
- Sie müssen keine Änderungen vornehmen, können sich aber die Bereitstellung der Schnellstartlösung ansehen.

Fehlerbehebung

Problem: Wird der Fehler Partial deployment. angezeigt?
- Lösung: In diesem Fall sollten Sie die Bereitstellung wahrscheinlich löschen und von vorn beginnen. Es sollte eine Schaltfläche mit der Aufschrift DEPLOYMENT LÖSCHEN geben. Klicken Sie auf diese Schaltfläche und stellen Sie die Jump Start Solution dann noch einmal bereit.

3. Gemini aktivieren

Codebearbeitungsumgebung einrichten und Gemini aktivieren

Rufen Sie den Cloud Shell-Editor auf.
- Kehren Sie zur Google Cloud Console zurück.
- Geben Sie Cloud Shell Editor in die Suchleiste ein und klicken Sie im Drop-down-Menü auf Cloud Shell Editor.
- Klicken Sie auf Neuen Editor testen, wenn Sie den alten Editor verwenden.
  - Hinweis: Wenn Sie die Schaltfläche Neuen Editor ausprobieren nicht sehen, verwenden Sie wahrscheinlich bereits den neuen Editor. Der Legacy-Editor funktioniert, aber die Ansichten sehen etwas anders aus.
- Klicken Sie auf das Symbol „In neuem Fenster öffnen“ .
Melden Sie sich an oder autorisieren Sie Ihr Konto, wenn Sie dazu aufgefordert werden.
- Je nach Ihren Einstellungen werden Sie in diesem Lab möglicherweise mehrmals aufgefordert, Ihr Konto zu autorisieren. Wählen Sie in diesem Fall jedes Mal „Autorisieren“ aus.
Klicken Sie unten in der Statusleiste auf die Schaltfläche Cloud Code – Anmelden (siehe Abbildung). Autorisieren Sie das Plug-in wie beschrieben.
Klicken Sie bei entsprechender Aufforderung auf Google Cloud-Projekt auswählen und wählen Sie das Projekt aus, das Sie verwenden
Gemini aktivieren
- Klicken Sie auf „Cloud Code“
  - Hinweis: Je nach Größe des Bildschirms kann es ein oder zwei Schritte dauern.
- Klicken Sie im Bereich HILFE UND FEEDBACK auf Einstellungen ändern.
- Typ Gemini: Enable
- Setzen Sie ein Häkchen in das Kästchen , falls noch keins vorhanden ist.
- Laden Sie Ihre IDE neu.
- Dadurch wird Gemini in Cloud Code aktiviert und die Statusleiste Gemini wird in Ihrer IDE angezeigt.
Klicken Sie rechts unten auf die Schaltfläche Gemini (siehe Abbildung) und wählen Sie das richtige Google Cloud-Projekt aus.
- Wenn Sie einen Fehler sehen, der Gemini has not been enabled for your selected project. Klicken Sie auf Gemini API aktivieren.
Prüfen Sie, ob links das richtige Google Cloud-Projekt (Ihr Projektname) und rechts in der Statusleiste Gemini aktiviert ist, wie unten dargestellt:

4. Cloud Functions-Code herunterladen

Laden Sie den Code herunter und verwenden Sie Gemini, um mehr über Jump Start Solutions und den bereitgestellten Code zu erfahren.

Wenn Sie die Ansicht verlassen haben, klicken Sie auf Cloud Code
Klicken Sie auf Cloud Functions
- Wenn die Schaltfläche Projekt auswählen angezeigt wird, klicken Sie darauf und wählen Sie das Projekt aus, an dem Sie arbeiten.
- Klicken Sie auf die Funktion annotate-http.
- Klicken Sie auf das Symbol In neuen Arbeitsbereich herunterladen .
Verwenden Sie annotate-http-1 als Arbeitsbereichsnamen (sollte die Standardeinstellung sein) und klicken Sie auf OK.
Öffnen Sie die Datei main.py.
- Klicken Sie auf das Explorer-Symbol .
- Klicken Sie auf die Datei main.py, um sie zu öffnen.
Klicken Sie auf das Gemini Chat-Symbol
- Hinweis: Je nach Größe des Bildschirms kann es ein oder zwei Schritte dauern.
Stellen Sie Gemini eine Frage. Geben Sie einen Prompt ein, z. B.:
- What is a Jump Start Solution in Google Cloud?
- Explain this code.

Gemini Chat zurücksetzen

Prompts wirken sich auf zukünftige Prompts aus. Wenn Sie beispielsweise einen Tippfehler in der Projekt-ID oder Region machen, wird dieser in zukünftigen Prompts und Antworten übernommen, was sich negativ auf Ihre Nutzung auswirken kann. Wenn Sie einen Tippfehler gemacht haben oder das Protokoll aus einem anderen Grund löschen möchten, können Sie den Chat über das Papierkorbsymbol zurücksetzen.

Hervorhebung des Duet-Chat-Papierkorbs zurücksetzen

5. Vorhandenen Cloud Functions-Endpunkt aufrufen

Sehen Sie sich den Code an und rufen Sie den Endpunkt auf, den Sie in der Schnellstart-Lösung bereitgestellt haben.

Geben Sie den Prompt ein:
- WICHTIG: Ersetzen Sie my-project-with-duet im folgenden Prompt durch Ihre Projekt-ID.
- The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
- Sie sollten eine Antwort mit einem curl-Befehl wie diesem erhalten:
```
curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
...
```
- Kopieren Sie diesen curl-Befehl für den nächsten Schritt.
Befehl in einem neuen Terminal testen
- Klicken Sie auf das Dreistrich-Menü.
- Klicken Sie auf Terminal.
- Klicken Sie auf Neues Terminal.
- Fügen Sie den curl-Befehl aus dem vorherigen Schritt in das Terminal ein und drücken Sie die Enter-Taste, um den Befehl auszuführen.
- Sie sollten eine Antwort erhalten, die so beginnt:
```
{
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
```
Optional: Sie können dies auch mit einem anderen Bild aus dem öffentlichen Internet tun, indem Sie Duet AI mit einem Prompt wie dem folgenden auffordern:
- Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

Fehlerbehebung

Hinweis zum Nichtdeterminismus: Gemini und andere Produkte, die auf Large Language Models (LLMs) basieren, sind nicht deterministisch. Das bedeutet, dass Sie bei derselben Eingabe möglicherweise unterschiedliche Ausgaben erhalten. Auch wenn Sie die Schritte genau befolgen, erhalten Sie möglicherweise keine funktionierenden Befehle. Die folgenden Schritte zur Fehlerbehebung sollten helfen, diese Probleme zu beheben.

Der generierte curl-Befehl sollte in etwa so aussehen:

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

Gemini verwendet das TEST_IMAGE in der Datei main.py, das ein Bild des Eiffelturms ist.

Wenn der curl-Befehl nicht funktioniert, prüfen Sie Folgendes:

Problem: Enthält der URL-Endpunkt .a.run.app?
- Lösung: Duet geht möglicherweise davon aus, dass Sie in Cloud Run bereitstellen. Ersetzen Sie my-project-with-duet durch Ihre Projekt-ID in https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate, um den richtigen Cloud Functions-Endpunkt zu erhalten, und verwenden Sie diesen für den curl-Befehl.
Problem: Enthält der URL-Endpunkt my-project-with-duet?
- Lösung: Ersetzen Sie my-project-with-duet durch Ihre Projekt-ID.
Problem: Fehlt der URL-Endpunkt us-central1?
- Lösung: Die URL muss mit us-central1 beginnen, z. B. https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate mit Ihrer Projekt-ID.
Problem: Je nach verwendetem Prompt sieht der generierte Endpunkt manchmal so aus: cloudfunctions.net/annotate-http oder cloudfunctions.net/annotate. Fehlt am Ende der URL des Endpunkts /annotate-http/annotate?
- Lösung: Achten Sie darauf, dass der URL-Endpunkt mit dem vollständigen API-Anwendungspfad cloudfunctions.net/annotate-http/annotate endet.
Problem: Die cURL-Anfrage funktioniert, aber es werden nicht viele Informationen zurückgegeben. Enthält die Anfrage Funktionen?
- Lösung: Dies ist kein großes Problem. Wenn Sie ohne Änderungen fortfahren, funktioniert der Rest des Labs weiterhin. Wenn Sie weitere Informationen erhalten möchten, können Sie Duet bitten, dem cURL-Befehl Funktionen hinzuzufügen.
Problem: Die Antworten scheinen falsch zu sein oder es fehlt an kontextbezogenen Informationen zum Code. Verwenden Sie Gemini Chat im Cloud Shell-Editor?
- Lösung: Öffnen Sie die Datei main.py und markieren Sie den Code, der sich auf Ihren Prompt bezieht, während Sie den Gemini-Chat im Cloud Shell-Editor verwenden. Der Gemini-Assistent in Google Cloud hat unterschiedliche Kontexte, was zu unterschiedlichen Antworten führt.

Problem: Die Antwort auf den Prompt ist immer noch nicht ganz richtig.

Lösung: Versuchen Sie es mit einem anderen Prompt, in dem Sie Gemini noch mehr Anweisungen dazu geben, was Sie möchten. Ersetzen Sie my-project-with-duet durch Ihre Projekt-ID. Hier ein Beispiel:

Give me the curl command for:

1- Cloud Function running in us-central1 and project my-project-with-duet
2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }

Problem: Nach all diesen Schritten zur Fehlerbehebung funktioniert es immer noch nicht.
- Lösung: Da LLMs nicht deterministisch sind, ist es möglich, dass Duet eine Antwort generiert hat, die nicht funktioniert. Kopieren Sie in diesem Fall den oben gezeigten Beispiel-curl-Befehl und führen Sie ihn im Terminal aus. Ersetzen Sie my-project-with-duet durch Ihre Projekt-ID.

6. Webanwendungsclient für die API erstellen

Mit Gemini eine index.html-Datei generieren, die den Cloud Functions-Endpunkt der Schnellstartlösung aufruft Stellen Sie die index.html-Datei dann in Firebase Hosting bereit, um den Code in Aktion zu sehen.

Clientseitigen Code generieren
- Geben Sie im Gemini-Chatfeld den folgenden Prompt ein:
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
- Kopieren Sie die in der Antwort generierte Datei index.html.
  - HINWEIS: Sie benötigen diesen Code später. Speichern Sie ihn daher an einem sicheren Ort.
- Schließen Sie main.py.
Neues frontend-Verzeichnis erstellen
- Sie können Gemini beispielsweise Folgendes fragen:
  - What are the console commands to create and navigate to a new frontend directory?
- Die Ergebnisse sollten so aussehen: mkdir frontend und cd frontend.
- Prüfen Sie im Cloud Shell-Terminal, ob Sie sich noch im Verzeichnis annotate-http-1 befinden, und führen Sie die folgenden Befehle aus:
  - cd ~/annotate-http-1
  - mkdir frontend
  - cd frontend
Prüfen Sie, ob Sie im Cloud Shell-Terminal im richtigen Projekt angemeldet sind.
- Sie können Gemini beispielsweise Folgendes fragen:
  - What is the gcloud command to set my project?
- Das Ergebnis sollte so aussehen: gcloud config set project my-project-with-duet
  - Prüfen Sie, ob die Projekt-ID korrekt ist, und führen Sie den Befehl dann im Cloud Shell-Terminal aus.
Firebase aktivieren
- Öffnen Sie einen neuen Tab (lassen Sie den aktuellen Cloud Shell-Editor geöffnet) und rufen Sie https://console.firebase.google.com/ auf.
- Klicken Sie auf Projekt hinzufügen.
- Geben Sie Ihre Projekt-ID ein und warten Sie, bis sie im Drop-down-Menü angezeigt wird.
- Klicken Sie auf Ihre Projekt-ID.
- Klicken Sie auf Weiter.
- Klicken Sie auf Tarif bestätigen.
- Klicken Sie auf Weiter.
- Deaktivieren Sie Google Analytics für dieses Projekt aktivieren.
  - Firebase empfiehlt die Verwendung von Google Analytics, aber in dieser Anwendung werden sie nicht verwendet.
- Klicken Sie auf Weiter.
- Schließen Sie diesen Tab und kehren Sie zum Cloud Shell-Editor zurück.
- Hinweis: Diese Schritte sind nur für Nutzer erforderlich, die Firebase noch nicht verwendet haben. So können jedoch alle Nutzer denselben Pfad durchlaufen. Wenn Sie dies in Zukunft noch einmal tun, können Sie diesen Schritt überspringen.
In Cloud Shell in Firebase anmelden
- Führen Sie im Cloud Shell Editor-Terminal den Befehl firebase login --no-localhost aus.
- Rufen Sie die angegebene URL auf.
  - Klicken Sie auf Ja, ich habe diesen Befehl ausgeführt.
  - Klicken Sie auf Ja, das ist meine Sitzungs-ID.
  - Klicken Sie auf Kopieren.
- Zum Cloud Shell-Editor-Terminal zurückkehren
- Fügen Sie den kopierten Wert in das Terminal ein, wo Enter authorization code: steht.
- Drücke Enter
Neue Website in Firebase Hosting bereitstellen
- Neues Firebase-Projekt initialisieren
  - Sie können Gemini beispielsweise Folgendes fragen:
    - What are the commands to initialize and deploy a new firebase application?
  - Sie sollten Ergebnisse wie firebase init und firebase deploy mit Anleitungen sehen.
  - Da es viele Möglichkeiten gibt, dies zu tun, die Gemini je nach Ihren Einstellungen empfehlen könnte, finden Sie hier eine konkrete Empfehlung:
    - firebase init
      - Gehen Sie mit dem Abwärtspfeil zu Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
        .
        Drücken Sie die Leertaste Space.
        
        Drücke Enter
      - Gehen Sie mit dem Abwärtspfeil zu Use an existing project
        .
        Drücke Enter
      - Wenn Sie eine Liste von Projekten sehen, wählen Sie das Projekt aus, das Sie heute verwenden.
        
        Drücke Enter
      - Wenn Sie aufgefordert werden, Please input the ID of the Google Cloud Project you would like to add Firebase:
        
        Geben Sie die Projekt-ID für Ihr Projekt ein.
        
        Drücke Enter
      - Drücken Sie für alle verbleibenden Aufforderungen Enter.
    - firebase deploy
Stellen Sie Ihre Anwendung mit einem Aufruf des Cloud Functions API-Endpunkts
- Mit den vorherigen Befehlen sollte ein Verzeichnis public mit einer Datei index.html im Verzeichnis frontend erstellt werden, das Sie zuvor erstellt haben. Die nächsten Änderungen sollten Sie in der Datei ~/annotate-http-1/frontend/public/index.html vornehmen.
- Öffnen Sie die Datei index.html.
  - Klicken Sie auf das Explorer-Symbol .
  - Klicken Sie auf den Ordner frontend.
  - Klicken Sie auf den Ordner public.
  - Klicken Sie auf die Datei index.html.
- Leeren Sie die vorhandene Datei index.html.
- Fügen Sie den zuvor kopierten Code in die Datei index.html ein.
- Führen Sie firebase deploy aus, um die neue Anwendung bereitzustellen.
- Rufen Sie die Firebase Hosting-URL auf, um zu prüfen, ob alles funktioniert.
  - Hinweis: Möglicherweise müssen Sie die Website vollständig aktualisieren, damit Ihre Änderungen angezeigt werden.

Fehlerbehebung

Die Datei index.html sollte in etwa so aussehen:

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

Wenn die Website nicht funktioniert, können Sie Folgendes überprüfen:

Problem: 404 (Nicht gefunden) Enthält die in der Methode fetch verwendete URL my-project-with-duet?
- Lösung: Ersetzen Sie my-project-with-duet durch Ihre Projekt-ID.
Problem: 404 (Nicht gefunden) Fehlt in der URL, die in der fetch-Methode verwendet wird, die vollständige URL?
- Lösung: Achten Sie darauf, dass die vollständige URL in der fetch-Methode enthalten ist. Sie sollte etwa so https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate aussehen:
Problem: Die Antwort auf den Prompt ist immer noch nicht ganz richtig.
- Lösung: Versuchen Sie es mit einem anderen Prompt, in dem Sie Gemini noch mehr Anweisungen dazu geben, was Sie möchten. Ersetzen Sie my-project-with-duet durch Ihre Projekt-ID. Hier ein Beispiel:
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
Problem: Ihre Website wurde bereitgestellt, funktioniert aber nicht?
- Lösung: Da LLMs nicht deterministisch sind, ist es möglich, dass Duet eine Antwort generiert hat, die nicht funktioniert. Kopieren Sie in diesem Fall das Beispiel index.html oben und versuchen Sie, es mit firebase deploy neu bereitzustellen. Ersetzen Sie my-project-with-duet durch Ihre Projekt-ID.

7. (Optional) Explorative Datenanalyse

Mit Gemini und dem In-Editor-Assistenten können Sie Ihrer Anwendung CSS-Styles hinzufügen und die Anwendung nach Abschluss der Änderungen noch einmal bereitstellen. Wenn Sie Inspiration suchen, können Sie diesen Beispiel-Prompt ausprobieren:
- Make this index.html file use material design.
Weitere Möglichkeiten:
- Die generierte Website sollte mit jedem öffentlichen http-Bild funktionieren. Lassen Sie Duet das Bild auf der Seite anzeigen.

8. (Optional) Projekt löschen

Wenn Sie vermeiden möchten, dass Ihnen die von Ihnen erstellten Ressourcen in Rechnung gestellt werden, können Sie Duet fragen, wie Sie das tun können.

Geben Sie den Prompt ein:
- How can I delete my project?
- Das Ergebnis sollte etwa so aussehen: gcloud projects delete my-project-with-duet.
- WICHTIG: Ersetzen Sie my-project-with-duet im vorherigen Befehl durch Ihre Projekt-ID.
Führen Sie den Befehl gcloud projects delete aus, um alle Ressourcen zu entfernen, die Sie heute erstellt haben.