Vorhandene Apps mit Gemini entdecken und optimieren

1. Übersicht

In diesem Codelab erfahren Sie, wie Sie mit Gemini eine Clientanwendung auf einem vorhandenen API-Back-End erstellen.

Lerninhalte

In diesem Lab soll die Verwendung von Gemini mit einer vorhandenen Anwendung veranschaulicht werden. In diesem Lab lernen Sie Folgendes:

• Schnellstartlösung für die KI-/ML-Bildverarbeitung bereitstellen
• Mit Gemini die API-Anwendung kennenlernen
• Gemini verwenden, um einen Client für die API-Anwendung zu erstellen

Einrichtung – Neues Projekt erstellen

Je nach Ihren Organisationsrichtlinien können Sie diese Lösung möglicherweise nicht korrekt bereitstellen.

Empfehlung: Verwenden Sie anstelle eines Unternehmens- oder Schulkonto ein Konto, für das Sie uneingeschränkte Berechtigungen haben (z. B. ein privates Konto)

Hinweis:Wenn Sie vor Kurzem ein Projekt erstellt haben, für das Sie alle Berechtigungen haben, und die Gemini API für dieses Projekt bereits aktiviert ist, können Sie dieses Projekt weiterverwenden und diesen Schritt überspringen. Wenn Sie beispielsweise vor Kurzem ein weiteres Gemini-Codelab abgeschlossen haben, können Sie diesen Schritt überspringen.

1. Öffnen Sie die Google Cloud Console
2. Klicken Sie auf das Drop-down-Menü für das aktuelle Projekt.
3. Klicken Sie auf New Project (Neues Projekt).
4. 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

Schnellstart-Lösungen sind vordefinierte Lösungsvorlagen von Google Cloud. In diesem Lab wird anhand einer Schnellstartlösung gezeigt, wie Gemini eine vorhandene Anwendung verbessern kann.

1. Detailseite der Schnellstartlösung für die KI/ML-Bildverarbeitung aufrufen
   • Klicken Sie auf das Dreistrich-Menü.
   • Klicken Sie im Menü Produkte und klicken Sie im Untermenü der Lösungen auf Schnellstart-Lösungen.
   • Klicken Sie auf KI/ML-Bildverarbeitung in Cloud Functions.
2. Klicken Sie auf BEREITSTELLEN.
   • Sollte die Abrechnung für Ihr Projekt nicht aktiviert sein, aktivieren Sie die Abrechnung.
   • Bestätigen Sie den Projektnamen und klicken Sie auf WEITER.
   • Wählen Sie us-central1 (Iowa) als Region aus.
   • Übernehmen Sie die Standardwerte, wenn Sie zur Eingabe anderer Informationen aufgefordert werden.
   • Klicken Sie auf DEPLOY (Bereitstellen).
   • Dies kann bis zu 15 Minuten dauern.
   • Sie müssen keine Änderungen vornehmen, können sich aber gerne über die Bereitstellung der Schnellstart-Lösung informieren.

Fehlerbehebung

1. Problem: Wird die Fehlermeldung Partial deployment. angezeigt?
   • Lösung: Dies bedeutet leider, dass Sie die Bereitstellung wahrscheinlich löschen und von vorn beginnen sollten. Es sollte eine Schaltfläche mit dem Text DELETE DEPLOYMENT angezeigt werden. Klicken Sie auf diese Schaltfläche und stellen Sie die Schnellstart-Lösung erneut bereit.

3. Gemini aktivieren

Codebearbeitungsumgebung einrichten und Gemini aktivieren

1. 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 die Schaltfläche Neuen Editor testen nicht angezeigt wird, verwenden Sie wahrscheinlich bereits den neuen Editor. Sie können zwar den alten Editor verwenden, aber die Ansichten sehen etwas anders aus.
   • Klicken Sie auf das Symbol „In neuem Fenster öffnen“ .
2. Wenn Sie dazu aufgefordert werden, melden Sie sich an oder autorisieren Sie Ihr Konto.
   • Je nach Ihren Einstellungen werden Sie während dieses Labs möglicherweise mehrmals aufgefordert, Ihr Konto zu autorisieren. Wählen Sie dann bei Aufforderung jedes Mal "Autorisieren" aus.
3. Klicken Sie wie dargestellt in der unteren Statusleiste auf die Schaltfläche Cloud Code – Sign in (Cloud Code – Anmelden). Autorisieren Sie das Plug-in wie angegeben.
4. Wenn Sie dazu aufgefordert werden, klicken Sie auf Google Cloud-Projekt auswählen und wählen Sie das Projekt aus, das Sie verwenden
5. Gemini aktivieren
   • Klicken Sie auf Cloud Code .
     • Hinweis: Je nach Größe des Bildschirms können ein bis zwei Schritte erforderlich sein.
   • Klicken Sie im Abschnitt HILFE UND FEEDBACK auf Einstellungen ändern.
   • Gemini: Enable eingeben
   • Klicken Sie das Kästchen an (falls noch nicht geschehen).
   • Aktualisieren Sie Ihre IDE.
   • Dadurch wird Gemini in Cloud Code aktiviert und die Gemini-Statusleiste wird in Ihrer IDE angezeigt.
6. Klicken Sie rechts unten auf die Schaltfläche Gemini und wählen Sie das richtige Google Cloud-Projekt aus.
   • Wenn ein Fehler angezeigt wird, Gemini has not been enabled for your selected project. Klicken Sie auf Gemini API aktivieren
7. Prüfen Sie, ob Sie links in der Statusleiste das richtige Google Cloud-Projekt sehen (der Projektname wird angezeigt) und Gemini auf der rechten Seite aktiviert:

4. Cloud Functions-Code herunterladen

Laden Sie den Code herunter und verwenden Sie Gemini, um mehr über Schnellstart-Lösungen und den von Ihnen bereitgestellten Code zu erfahren.

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

Gemini Chat zurücksetzen

Aufforderungen wirken sich auf zukünftige Aufforderungen aus. Wenn Sie sich beispielsweise in der Projekt-ID oder in der Region vertippt haben, werden diese in zukünftigen Aufforderungen und Antworten übernommen, was sich negativ auf Ihre Nutzererfahrung auswirken kann. Wenn Sie sich vertippt haben oder den Verlauf aus einem anderen Grund löschen möchten, können Sie den Chat über das Papierkorbsymbol 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.

1. Geben Sie den Prompt ein:
   • WICHTIG: Ersetzen Sie my-project-with-duet in der folgenden Eingabeaufforderung 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 erhalten, die einen curl-Befehl wie diesen enthält:

     curl -X POST \
         -H "Authorization: Bearer $(gcloud auth print-access-token)" \
     ...
     

   • Kopieren Sie diesen curl-Befehl zur Verwendung im nächsten Schritt
2. Testen Sie den Befehl in einem neuen Terminal.
   • 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 Enter, 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,
     ...
     

3. (Optional) Tun Sie dies mit einem anderen Bild aus dem öffentlichen Internet, indem Sie Duet mit einem Befehl wie dem folgenden auffordern:
   • Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

Fehlerbehebung

Hinweis zur Nicht-Determinismus-Funktion: Gemini und andere Produkte, die auf Large Language Models (LLMs) basieren, sind nicht deterministisch. Das bedeutet, dass Sie bei gleicher Eingabe möglicherweise unterschiedliche Ausgaben erhalten. Auch wenn Sie die Schritte perfekt befolgen, erhalten Sie möglicherweise keine funktionierenden Befehle. Mit den folgenden Schritten zur Fehlerbehebung können Sie diese Probleme lösen.

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, bei der es sich um ein Bild des Eiffelturms handelt.

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

1. Problem: Enthält der URL-Endpunkt .a.run.app?
   • Lösung: Duet geht möglicherweise davon aus, dass die Bereitstellung in Cloud Run erfolgt. 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 abzurufen und diesen für den curl-Befehl zu verwenden.
2. Problem: Enthält der URL-Endpunkt my-project-with-duet?
   • Lösung: Ersetzen Sie my-project-with-duet durch Ihre Projekt-ID.
3. Problem: Fehlt im URL-Endpunkt us-central1?
   • Lösung: Achten Sie darauf, dass die URL mit us-central1 beginnt, z. B. https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate durch Ihre Projekt-ID.
4. Problem: Je nach verwendeter Aufforderung sieht der generierte Endpunkt manchmal so aus: cloudfunctions.net/annotate-http oder cloudfunctions.net/annotate. Fehlt im URL-Endpunkt /annotate-http/annotate am Ende?
   • Lösung: Achten Sie darauf, dass der URL-Endpunkt mit dem vollständigen API-Anwendungspfad cloudfunctions.net/annotate-http/annotate endet
5. Problem: Die cURL-Anfrage funktioniert, es werden jedoch nicht viele Informationen zurückgegeben. Enthält der Antrag Funktionen?
   • Lösung: Dies ist kein größeres Problem. Wenn Sie fortfahren, ohne etwas zu ändern, funktioniert der Rest des Labs weiterhin. Wenn Sie weitere Informationen erhalten möchten, können Sie Duet bitten, der cURL-Anfrage Funktionen hinzuzufügen.
6. Problem: Die Antworten scheinen falsch zu sein oder es scheint kein codespezifischer Kontext zu geben. Verwenden Sie Gemini Chat im Cloud Shell-Editor?
   • Lösung: Öffnen Sie die Datei main.py und markieren Sie den Code für Ihren Prompt, während Sie Gemini Chat im Cloud Shell-Editor verwenden. Der Gemini-Assistent in Google Cloud hat einen anderen Kontext, der zu unterschiedlichen Antworten führt.
7. Problem: Die direkte Antwort ist immer noch nicht richtig.
   • Lösung: Probiere einen anderen Prompt aus, um Gemini noch mehr Hinweise zu geben, was du produzieren möchtest. Achten Sie darauf, my-project-with-duet durch Ihre Projekt-ID zu ersetzen. 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" }
     

8. Problem: Nachdem alle Schritte zur Fehlerbehebung durchgeführt wurden, funktioniert es immer noch nicht.
   • Lösung: Aufgrund der nicht deterministischen Natur von LLMs ist es möglich, dass Duet eine Antwort generiert hat, die nicht funktioniert. Kopieren Sie in diesem Fall den obigen curl-Beispielbefehl und führen Sie ihn im Terminal aus. Achten Sie darauf, my-project-with-duet durch Ihre Projekt-ID zu ersetzen.

6. Webanwendungsclient für die API erstellen

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

1. Clientseitigen Code generieren
   • Geben Sie in das Gemini-Chatfeld den 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 Ort, falls Sie befürchten, dass er verloren geht.
   • Schließen Sie main.py.
2. Neues frontend-Verzeichnis erstellen
   • Sie können Gemini zum Beispiel fragen:
     • What are the console commands to create and navigate to a new frontend directory?
   • Sie sollten Ergebnisse wie mkdir frontend und cd frontend sehen.
   • 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
3. Prüfen Sie, ob Sie im richtigen Projekt im Cloud Shell-Terminal angemeldet sind.
   • Sie können Gemini zum Beispiel fragen:
     • What is the gcloud command to set my project?
   • Du solltest ein Ergebnis wie gcloud config set project my-project-with-duet sehen.
     • Prüfen Sie, ob die Projekt-ID korrekt ist, und führen Sie dann den Befehl im Cloud Shell-Terminal aus.
4. Firebase
   aktivieren
   • Öffnen Sie in einem neuen Tab den aktuellen Cloud Shell-Editor und rufen Sie https://console.firebase.google.com/ auf.
   • Klicken Sie auf Projekt hinzufügen.
   • Projekt-ID eingeben und warten, bis sie im Drop-down-Menü angezeigt wird
   • Klicken Sie auf Ihre Projekt-ID.
   • Klicken Sie auf Weiter.
   • Klicken Sie auf Abo bestätigen.
   • Klicken Sie auf Weiter.
   • Heben Sie die Auswahl von Google Analytics für dieses Projekt aktivieren auf.
     • Firebase empfiehlt die Verwendung von Google Analytics, aber sie werden in dieser Anwendung nicht verwendet.
   • Klicken Sie auf Weiter.
   • Diesen Tab schließen und zum Cloud Shell-Editor zurückkehren
   • Hinweis: Diese Schritte sind nur für Nutzer erforderlich, die Firebase noch nicht verwendet haben, können aber so für alle Nutzer den gleichen Weg einschlagen. Wenn Sie diesen Schritt später noch einmal ausführen, können Sie diesen Schritt überspringen.
5. Melden Sie sich in Cloud Shell bei Firebase an.
   • Führen Sie im Terminal des Cloud Shell-Editors den Befehl firebase login --no-localhost aus.
   • Rufen Sie die angegebene URL auf:
     • Klicken Sie auf Ja, ich habe diesen Befehl gerade ausgeführt.
     • Klicken Sie auf Ja, das ist meine Sitzungs-ID.
     • Klicken Sie auf Kopieren.
   • Kehren Sie zum Terminal des Cloud Shell-Editors zurück
   • Fügen Sie den kopierten Wert an der Stelle im Terminal ein: Enter authorization code:
   • Drücke Enter
6. Neue Website in Firebase Hosting bereitstellen
   • Neues Firebase-Projekt initialisieren
     • Sie können Gemini zum Beispiel fragen:
       • What are the commands to initialize and deploy a new firebase application?
     • Sie sollten Ergebnisse wie firebase init und firebase deploy mit Anweisungen sehen.
     • Gemini kann Ihnen je nach Ihren Präferenzen viele Möglichkeiten dazu empfehlen. Deshalb haben wir hier eine konkrete Empfehlung für Sie:
       • firebase init
         • Pfeil nach unten zu Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
           • Drücke die Space-Leiste
           • Drücke Enter
         • Pfeil nach unten zu Use an existing project
           • Drücke Enter
         • Wenn Sie eine Liste mit Projekten sehen, scrollen Sie nach unten zu dem Projekt, 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
         • Für alle verbleibenden Aufforderungen Enter drücken
       • firebase deploy
7. Stellen Sie die Anwendung mit einem Aufruf an den Cloud Functions API-Endpunkt noch einmal bereit.
   • Mit den vorherigen Befehlen sollte ein public-Verzeichnis mit einer index.html-Datei in dem frontend-Verzeichnis erstellt werden, das du zuvor erstellt hast. 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 sehen, ob das funktioniert.
     • Hinweis: Sie müssen die Website wahrscheinlich 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, überprüfen Sie Folgendes:

1. Problem: 404 (Nicht gefunden) Enthält die in der fetch-Methode verwendete URL my-project-with-duet?
   • Lösung: Ersetzen Sie my-project-with-duet durch Ihre Projekt-ID.
2. Problem: 404 (Nicht gefunden) Fehlt bei der in der fetch-Methode verwendeten URL die vollständige URL?
   • Lösung: Geben Sie in der Methode fetch die vollständige URL an. Es sollte in etwa so aussehen: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
3. Problem: Die direkte Antwort ist immer noch nicht richtig.
   • Lösung: Probiere einen anderen Prompt aus, um Gemini noch mehr Hinweise zu geben, was du produzieren möchtest. Achten Sie darauf, my-project-with-duet durch Ihre Projekt-ID zu ersetzen. 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.
4. Problem: Wurde Ihre Website bereitgestellt, funktioniert aber nicht?
   • Lösung: Aufgrund der nicht deterministischen Natur von LLMs ist es möglich, dass Duet eine Antwort generiert hat, die nicht funktioniert. Kopieren Sie in diesem Fall das Beispiel index.html oben und stellen Sie es noch einmal mit firebase deploy bereit. Achten Sie darauf, my-project-with-duet durch Ihre Projekt-ID zu ersetzen.

7. Optional: Explorative Datenanalyse öffnen

1. Verwenden Sie Gemini und den Assistenten im Editor, um Ihrer Anwendung CSS-Stile hinzuzufügen und die Anwendung wieder bereitzustellen, wenn Sie fertig sind. Wenn Sie nach Inspiration suchen, finden Sie hier einen Beispiel-Prompt, den Sie ausprobieren könnten:
   • Make this index.html file use material design.
2. Weitere Möglichkeiten:
   • Die generierte Website sollte mit jedem öffentlichen http-Bild funktionieren. Arbeiten Sie mit Duet, um das Bild auf der Seite anzuzeigen.

8. (Optional) Projekt löschen

Wenn Sie vermeiden möchten, dass Ihnen die Ressourcen, die Sie heute erstellt haben, in Rechnung gestellt werden, können Sie Duet fragen, wie das geht.

1. Geben Sie den Prompt ein:
   • How can I delete my project?
   • Sie sollten ein Ergebnis wie gcloud projects delete my-project-with-duet sehen.
   • WICHTIG: Ersetzen Sie my-project-with-duet im vorherigen Befehl durch Ihre Projekt-ID.
2. Führen Sie den Befehl gcloud projects delete aus, um alle Ressourcen zu entfernen, die Sie heute erstellt haben.