Mit Gemini Code Assist eine Schnellstartlösung für die KI-Zusammenfassung entdecken und verbessern

1. Einführung

In diesem Codelab sehen wir uns eine vorhandene Jump Start-Lösung an, die KI-Zusammenfassung, die Vertex AI-Modelle verwendet, um PDF-Dokumente zusammenzufassen, die in Google Cloud Storage hochgeladen wurden.

Anschließend verwenden wir Gemini Code Assist für folgende Aufgaben:

• Den Python-Code verstehen, der die Cloud Functions-Funktion unterstützt, die den Text aus dem PDF-Dokument extrahiert, ihn zusammenfasst und die Ergebnisse in BigQuery schreibt.
• Wir werden Gemini Code Assist während des gesamten Prozesses nutzen, um neue Funktionen zu schreiben. Wir entwickeln eine Webanwendung (Python Flask-Anwendung) und führen sie lokal aus, um unseren Code zu überprüfen.
• Optional können wir uns auch ansehen, wie wir diese Anwendung in Cloud Run bereitstellen und das Design (Ästhetik) der Webanwendung mit Material Design verbessern können.

Aufgaben

• Sie stellen die Jump-Start-Lösung für die KI-Zusammenfassung bereit und lösen den Prozessfluss aus, um zu verstehen, wie sie funktioniert.
• Anschließend laden Sie den vorhandenen Code für die Jump Start-Lösung mit Cloud Shell IDE herunter und verwenden Gemini Code Assist, um den Code zu verstehen.
• Sie verwenden Gemini Code Assist in der Cloud Shell-IDE, um Code für eine neue Funktion zu generieren.

Lerninhalte

• So funktioniert die Schnellstart-Lösung für die Zusammenfassung mit künstlicher Intelligenz.
• Hier erfahren Sie, wie Sie Gemini Code Assist für verschiedene Entwickleraufgaben wie Codegenerierung, Codevervollständigung und Codezusammenfassung verwenden.

Voraussetzungen

• Chrome-Webbrowser
• Ein Gmail-Konto
• Ein Cloud-Projekt mit aktivierter Abrechnung
• Gemini Code Assist für Ihr Cloud-Projekt aktiviert

Dieses Lab richtet sich an Entwickler aller Erfahrungsstufen, auch an Anfänger. Obwohl die Beispielanwendung in Python geschrieben ist, müssen Sie sich nicht mit der Python-Programmierung auskennen, um zu verstehen, was passiert. Wir konzentrieren uns darauf, die Funktionen von Gemini Code Assist für Entwickler kennenzulernen.

2. Einrichtung

In diesem Abschnitt erfahren Sie alles, was Sie für den Einstieg in dieses Lab benötigen.

Gemini for Cloud im Google Cloud-Projekt aktivieren

Wir aktivieren jetzt Gemini für Cloud in unserem Google Cloud-Projekt. Gehen Sie dazu so vor:

1. Rufen Sie https://console.cloud.google.com auf und achten Sie darauf, dass Sie das Google Cloud-Projekt ausgewählt haben, mit dem Sie in diesem Lab arbeiten möchten. Klicken Sie oben rechts auf das Symbol zum Öffnen von Gemini.

2. Rechts in der Console wird das Chatfenster für Gemini für Cloud geöffnet. Klicken Sie auf die Schaltfläche „Aktivieren“ (siehe unten). Wenn Sie die Schaltfläche Aktivieren nicht sehen, sondern stattdessen eine Chat-Oberfläche, haben Sie Gemini for Cloud wahrscheinlich bereits für das Projekt aktiviert und können direkt mit dem nächsten Schritt fortfahren.

3. Sobald die Funktion aktiviert ist, können Sie Gemini für Cloud testen, indem Sie ein oder zwei Anfragen stellen. Es werden einige Beispielabfragen angezeigt, Sie können aber auch What is Cloud Run? eingeben.

Gemini for Cloud antwortet auf Ihre Frage. Sie können rechts oben auf das Symbol  klicken, um das Chatfenster für Gemini für Cloud zu schließen.

Gemini Code Assist in der Cloud Shell-IDE aktivieren

Für den Rest des Codelabs verwenden wir die Cloud Shell IDE, eine vollständig verwaltete Entwicklungsumgebung, die auf Code OSS basiert. Wir müssen Code Assist in der Cloud Shell-IDE aktivieren und konfigurieren. Die Schritte dazu sind unten aufgeführt:

1. Rufen Sie ide.cloud.google.com auf. Es kann eine Weile dauern, bis die IDE angezeigt wird.
2. Klicken Sie unten in der Statusleiste auf die Schaltfläche Cloud Code – Anmelden (siehe Abbildung). Autorisieren Sie das Plug-in wie beschrieben. Wenn in der Statusleiste Cloud Code – kein Projekt angezeigt wird, wählen Sie diese Option aus und wählen Sie dann das Google Cloud-Projekt aus der Liste der Projekte aus, mit denen Sie arbeiten möchten.

3. Klicken Sie rechts unten auf die Schaltfläche Gemini (siehe Abbildung) und wählen Sie noch einmal das richtige Google Cloud-Projekt aus. Wenn Sie aufgefordert werden, die Cloud AI Companion API zu aktivieren, tun Sie dies und fahren Sie fort.
4. Nachdem Sie Ihr Google Cloud-Projekt ausgewählt haben, prüfen Sie, ob es in der Cloud Code-Statusmeldung in der Statusleiste angezeigt wird und ob Code Assist rechts in der Statusleiste aktiviert ist (siehe unten):

Gemini Code Assist ist einsatzbereit.

Gemini Code Assist ist auch in lokalen IDEs wie Visual Studio Code oder JetBrains IntelliJ verfügbar. Sie ist auch in Google Cloud Workstations verfügbar. In diesem Codelab wird die Cloud Shell IDE verwendet, damit alle dieselbe Umgebung nutzen. Sie können aber auch Ihre bevorzugte Einrichtung verwenden. Weitere Informationen finden Sie unter diesem Link.

Optional:Wenn Gemini nicht in der Statusleiste rechts unten angezeigt wird, müssen Sie Gemini in Cloud Code aktivieren. Prüfen Sie zuerst, ob Gemini in der IDE aktiviert ist. Klicken Sie dazu auf Cloud Code-Erweiterung → Einstellungen und geben Sie dann den Text Gemini ein, wie unten dargestellt. Achten Sie darauf, dass das Kästchen ausgewählt ist. Laden Sie Ihre IDE neu.Dadurch wird Gemini in Cloud Code aktiviert und das Gemini-Symbol wird in der Statusleiste Ihrer IDE angezeigt.

3. KI-Zusammenfassungs-Schnellstartlösung bereitstellen

1. Zur Lösung „Zusammenfassung von Dokumenten mit generativer KI“
2. Klicken Sie auf „Bereitstellen“.

• Wenn die Abrechnung für Ihr Projekt nicht aktiviert ist, aktivieren Sie sie.
• Wählen Sie us-central1 als Region aus.
• Klicken Sie auf „Bereitstellen“.
• Das kann bis zu 15 Minuten dauern.
• Sie müssen keine Änderungen vornehmen. Sie können sich die Bereitstellung der Schnellstartlösung jedoch ansehen, indem Sie auf der Detailseite der Lösungsbereitstellung auf die Schaltfläche EXPLORE THIS SOLUTION (DIESE LÖSUNG ANSEHEN) klicken.

4. Mit Gemini chatten

Wir beginnen damit, wie Sie mit Gemini chatten können. Gemini ist als Chatassistent in der Cloud Shell-IDE als Teil der Cloud Code-Erweiterung in VS Code verfügbar. Sie können sie aufrufen, indem Sie in der linken Navigationsleiste auf die Gemini-Schaltfläche klicken. Suchen Sie in der linken Navigationsleiste nach dem Gemini-Symbol  und klicken Sie darauf.

Dadurch wird der Bereich „Chat: GeminiI“ in der Cloud Shell-IDE geöffnet und Sie können mit Gemini chatten, um Hilfe zu Google Cloud zu erhalten.

Wir verwenden den Gemini-Chatbereich, um einen Prompt einzugeben und die Antwort von Gemini anzusehen. Geben Sie den folgenden Prompt ein:

What is Cloud Run? 

Gemini sollte mit den Details zu Cloud Run antworten. Prompts sind Fragen oder Aussagen, in denen Sie beschreiben, wobei Sie Unterstützung benötigen. Prompts können Kontext aus vorhandenem Code enthalten, den Google Cloud analysiert, um Ihnen hilfreiche oder vollständige Antworten zu geben. Weitere Informationen zum Schreiben von Prompts, auf die Sie gute Antworten erhalten, finden Sie unter Bessere Prompts für Gemini in Google Cloud schreiben.

Probieren Sie die folgenden Beispiel-Prompts oder eigene Prompts aus, um Fragen zu Google Cloud zu stellen:

• What is the difference between Cloud Run and Cloud Functions?
• What services are available on Google Cloud to run containerized workloads?
• What are the best practices to optimize costs while working with Google Cloud Storage?

Oben sehen Sie das Papierkorbsymbol. Damit können Sie den Kontext für den Code Assist-Chatverlauf zurücksetzen. Beachten Sie auch, dass sich diese Chat-Interaktion auf die Dateien bezieht, an denen Sie in der IDE arbeiten.

5. Jump Start-Lösung für Cloud Functions in Cloud Code herunterladen

Wenn Sie sich im Cloud Shell-Editor befinden, führen Sie die folgenden Schritte aus:

• Klicken Sie auf „Cloud Code“ .
• Hinweis: Je nach Größe Ihres Bildschirms kann es ein oder zwei Schritte dauern.

oder

• Klicken Sie auf „Cloud Functions“.
• Melden Sie sich an oder autorisieren Sie Ihr Konto, wenn Sie dazu aufgefordert werden.
• Klicken Sie auf die Webhook-Funktion.
• Klicken Sie auf das Symbol „In neuen Arbeitsbereich herunterladen“ .
• 
• Verwenden Sie „webhook-1“ als Arbeitsbereichsnamen (sollte der Standard sein) oder einen anderen Namen und klicken Sie auf „OK“.
• Dadurch wird der Code in der Cloud Shell IDE geöffnet.

6. Vorhandenes Projekt überprüfen

Diese Schnellstart-Lösung wird unten dargestellt:

Sehen Sie sich den Ablauf vom Hochladen der PDF-Datei in Cloud Storage an. Die Cloud Functions-Funktion, die aufgerufen wird, wenn die PDF-Datei hochgeladen wird, ist in der Datei main.py angegeben.

Klicken Sie auf die Datei. Der Einstiegspunkt für die Cloud-Funktion ist die Funktion entrypoint, die schließlich die Funktion cloud_event_entrypoint aufruft, die den Text aus der PDF-Datei extrahiert, und dann die Funktion summarization_entrypoint aufruft, die Vertex AI-Modelle verwendet, um die Ergebnisse zusammenzufassen und in GCS bzw. BigQuery zu schreiben.

Markieren Sie den gesamten Code in der Datei main.py oder ein bestimmtes Code-Snippet. Klicken Sie auf Gemini Chat und geben Sie den folgenden Prompt ein: Explain this.

So erhalten Sie eine Erklärung für den Code.

7. Beispiellauf ausführen

Gemäß dem Architekturdiagramm laden wir eine Datei in den Bucket <PROJECT_ID>_uploads hoch, damit die Cloud Functions-Funktion aufgerufen wird.

Halten Sie eine Beispiel-PDF bereit, die Sie hochladen können und für die Sie eine Zusammenfassung erstellen lassen möchten.

• Rufen Sie in der Cloud Console Google Cloud Storage auf.
• Rufen Sie den Bucket <PROJECT_ID>_uploads auf. Klicken Sie auf den Link DATEIEN HOCHLADEN und laden Sie ein Beispiel-PDF hoch.

Wenn Sie keine Beispiel-PDF-Datei haben, können Sie eine der von uns erstellten verwenden. Führen Sie in Cloud Shell den folgenden Befehl aus:

gsutil cp \
    gs://arxiv-dataset/arxiv/cmp-lg/pdf/9410/9410009v1.pdf \
    gs://<PROJECT_ID>_uploads/

Sobald die Datei erfolgreich hochgeladen wurde, wird die Cloud-Funktion webhook aufgerufen und der Text im Dokument wird zusammengefasst. Die Ausgabe wird in ein BigQuery-Dataset mit dem Namen summary_dataset und in die Tabelle summary_table geschrieben.

Führen Sie eine Abfrage für die Tabelle aus, um die Ergebnisse der Zusammenfassung zu sehen.

8. Webanwendungsclient für die Anwendung erstellen

Der oben beschriebene Prozess ist eine manuelle Schritt-für-Schritt-Anleitung zum Hochladen der PDF-Datei, die zusammengefasst werden soll. Wie wäre es, ein Web-Frontend für die Anwendung zu erstellen?

Die Anforderungen an das Web-Frontend sind einfach:

1. Ein einfaches HTML-Formular, mit dem wir die Datei auswählen und hochladen können, die zusammengefasst werden soll.
2. Die Datei sollte nach dem erfolgreichen Hochladen in den Bucket <PROJECT_ID>_uploads geschrieben werden, damit die restliche Funktionalität wie gewohnt funktioniert.

Wir verwenden Python und das Flask-Framework für Webanwendungen, um diese Lösung mit Unterstützung von Duet AI zu entwickeln.

Legen wir los! Wir gehen davon aus, dass Sie in der Cloud Shell IDE noch denselben Arbeitsbereich geöffnet haben.

Schließen Sie alle Dateien und geben Sie den folgenden Prompt im Gemini-Chatfenster ein:

Write a Python Flask application that has a couple of routes:
The root route / should serve the index.html page using the render_template framework. The /upload route should accept a file being uploaded and write that file to a Cloud Storage bucket.

Im Idealfall sollte der Code so aussehen:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

Speichern Sie den oben genannten Code als app.py im Stammverzeichnis des IDE-Arbeitsbereichs.

Die Anwendung soll an Port 8080 ausgeführt werden und die Hostadresse 0.0.0.0 verwenden. Wir bitten Gemini also , die app.run-Anweisung zu ändern.

Geben Sie den folgenden Prompt ein:

Modify the app.py to run on port 8080 and host address 0.0.0.0

Ihr Code sollte jetzt so aussehen:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

Als Nächstes soll auch die Datei index.html generiert werden. Geben Sie den folgenden Prompt im Gemini Chat-Fenster ein:

Provide the index.html file

Sie sollten Code wie unten für index.html erhalten.

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Wir können Gemini fragen, wo die Datei index.html gespeichert werden soll. Geben Sie den folgenden Prompt ein:

Since this is using the render_template framework, where should this file be saved?

Die Antwort sollte in etwa so aussehen:

Erstellen Sie im Stammordner einen Ordner mit dem Namen „templates“ und speichern Sie die Datei „index.html“ darin.

Wir möchten, dass in der Datei „app.py“ eine Ausnahmebehandlung erfolgt, falls die Datei nicht im Google Cloud Storage-Bucket gespeichert werden konnte. Lassen Sie die Datei „app.py“ geöffnet und geben Sie den folgenden Prompt im Gemini Chat-Fenster ein.

modify the app.py to have exception handling in the upload() function. The success or failure should be returned to the index page.

Dadurch sollte nun eine Ausnahmebehandlung wie unten dargestellt hinzugefügt werden:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client().bucket('your-bucket-name')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

Da wir die Fehlermeldung in der Datei „index.html“ anzeigen müssen, müssen wir auch diese Datei ändern. Bitten wir Gemini mit dem folgenden Prompt darum:

update the index.html to display the error message

Dadurch sollte eine aktualisierte index.html wie unten dargestellt erstellt werden:

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  {% if error %}
    <p style="color: red;">{{ error }}</p>
  {% endif %}
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Achten Sie darauf, dass Sie in jedem der oben genannten Schritte die Änderungen in der Datei app.py bzw. index.html speichern.

Der app.py hat nicht den richtigen Bucket-Namen. Daher können wir diese Informationen an Gemini weitergeben und es bitten, die Änderungen vorzunehmen. Außerdem müssen wir die Projekt-ID für die storage.Client()-Instanz angeben. Geben Sie daher die folgenden Prompts im Gemini-Chatfenster ein (ersetzen Sie <PROJECT_ID> durch Ihre Google Cloud-Projekt-ID) und übernehmen Sie die Änderungen:

Prompt 1

My bucket name is gemini-for-devs-demo_uploads, please change the code to use that.

Prompt 2

My project id is gemini-for-devs-demo, please change the storage.Client() to use that.

Die endgültige Datei app.py sieht so aus (meine Projekt-ID wird unten angezeigt, aber sie sollte idealerweise die sein, mit der Sie arbeiten und die Sie im Prompt oben angegeben haben):

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client(project='gcp-experiments-349209').bucket('gcp-experiments-349209_uploads')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

9. Webanwendung lokal ausführen

Erstellen Sie eine Python-Umgebung mit den in der Datei requirements.txt definierten Abhängigkeiten. Rufen Sie die Befehlspalette in Cloud Shell IDE auf, wie unten dargestellt:

Geben Sie Python: Create Environment ein und folgen Sie der Anleitung, um eine virtuelle Umgebung mit (venv), dann den Python 3.x-Interpreter und die Datei requirements.txt zu erstellen. Dadurch wird die erforderliche Umgebung erstellt.

Starten Sie das Terminal jetzt wie unten dargestellt:

Geben Sie im Terminal den folgenden Befehl ein:

python app.py

Die Flask-App sollte gestartet werden und Sie sollten Folgendes sehen:

(.venv) romin@cloudshell:~/webhook-2 (gcp-experiments-349209)$ python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8080
 * Running on http://10.88.0.3:8080
Press CTRL+C to quit
 * Restarting with watchdog (inotify)
 * Debugger is active!
 * Debugger PIN: 989-296-833

Rufen Sie die URL http://127.0.0.1:8080 auf. Die Seite index.html sollte angezeigt werden.

Laden Sie eine Datei von Ihrem lokalen Computer hoch. Sie sollte erfolgreich verarbeitet werden.

Sie können die Zusammenfassung prüfen, indem Sie das BigQuery-Dataset und die BigQuery-Tabelle aufrufen, die wir uns zuvor im Lab angesehen haben. Alternativ können Sie den Cloud Storage-Bucket (<PROJECT_ID>_output) aufrufen.

10. (Optional) Open Exploration – In Cloud Run bereitstellen

• Sie können die Anwendung in Cloud Run bereitstellen.
• Stellen Sie Gemini Code Assist den folgenden Prompt (möglicherweise müssen Sie einige Varianten des oben genannten Prompts ausprobieren):

I don't want to build a container image but deploy directly from source. What is the gcloud command for that?

11. Optional: „Exploration“ – „CSS-Stile hinzufügen“ öffnen

• Mit Gemini Code Assist und dem In-Editor-Assistenten können Sie Ihrer Anwendung CSS-Stile hinzufügen und die Anwendung nach Abschluss der Arbeiten noch einmal bereitstellen.
• Öffnen Sie die Datei index.html und geben Sie im Gemini-Chat den folgenden Prompt ein: Can you apply material design styles to this index.html?
• Sehen Sie sich den Code an und prüfen Sie, ob er funktioniert.

12. Glückwunsch!

Herzlichen Glückwunsch! Sie haben erfolgreich mit Gemini Code Assist an einem Beispielprojekt gearbeitet und erfahren, wie es Sie bei der Codegenerierung, Codevervollständigung und Codezusammenfassung unterstützen und Ihnen helfen kann, Antworten auf Fragen zu Google Cloud zu erhalten.

13. Referenzdokumente

• Startseite von Gemini Code Assist
• Gemini für KI-Unterstützung und Entwicklung verwenden – Dokumentation
• Anwendungsfälle für Gemini