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 Schnellstartlösung namens „KI-Zusammenfassung“ an, die mithilfe von Vertex AI-Modellen PDF-Dokumente zusammenfasst, die in Google Cloud Storage hochgeladen wurden.

Wir verwenden Gemini Code Assist dann, um:

• Informieren Sie sich über den Python-Code, der der Cloud Functions-Funktion zugrunde liegt. Diese Funktion extrahiert den Text aus dem PDF-Dokument, fasst ihn zusammen und schreibt die Ergebnisse in BigQuery.
• Während des gesamten Prozesses werden wir Gemini Code Assist unterstützen, um neue Funktionen zu entwickeln. Wir entwickeln eine Webanwendung (Python Flask-Anwendung) und führen die Anwendung lokal aus, um unseren Code zu verifizieren.
• Optional können wir diese Anwendung auch in Cloud Run bereitstellen und das Design (Ästhetik) der Webanwendung mit Material Design verbessern.

Aufgaben

• Sie stellen die Schnellstartlösung „KI-Zusammenfassung“ bereit und lösen den Prozessfluss aus, um die Funktionsweise zu verstehen.
• Anschließend laden Sie mit der Cloud Shell-IDE den vorhandenen Code für die Schnellstartlösung herunter und verwenden Gemini Code Assist, um den Code zu verstehen.
• Sie verwenden die Cloud Shell-IDE von Gemini Code Assist, um Code für eine neue Funktion zu generieren.

Lerninhalte

• So funktioniert die Schnellstartlösung „AI Summarization“.
• Informationen zur Verwendung von Gemini Code Assist für verschiedene Entwickleraufgaben wie Codegenerierung, Codevervollständigung und Codezusammenfassung.

Du brauchst...

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

Dieses Lab richtet sich an Entwickler aller Stufen, auch Anfänger. Die Beispielanwendung ist zwar in Python geschrieben, aber Sie müssen nicht mit der Python-Programmierung vertraut sein, um zu verstehen, wo das Problem liegt. Wir konzentrieren uns darauf, uns mit den Funktionen von Gemini Code Assist für Entwickler vertraut zu machen.

2. Einrichtung

In diesem Abschnitt werden alle Schritte behandelt, die für den Einstieg in dieses Lab erforderlich sind.

Gemini for Cloud im Google Cloud-Projekt aktivieren

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

1. Rufen Sie https://console.cloud.google.com auf und vergewissern Sie sich, dass Sie das Google Cloud-Projekt ausgewählt haben, mit dem Sie für dieses Lab arbeiten möchten. Klicken Sie oben rechts auf das Symbol „Gemini öffnen“.

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

3. Nach der Aktivierung können Sie Gemini für Cloud testen, indem Sie ein oder zwei Abfragen stellen. Es werden einige Beispielabfragen angezeigt, aber Sie können beispielsweise etwas wie What is Cloud Run? ausprobieren

Gemini for Cloud wird Ihre Frage beantworten. Klicken Sie rechts oben auf das -Symbol, um das Chatfenster von 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 Code OSS-basierte Entwicklungsumgebung. Wir müssen Code Assist in der Cloud Shell-IDE aktivieren und konfigurieren. Gehen Sie dazu so vor:

1. Rufen Sie ide.cloud.google.com auf. Es kann eine Weile dauern, bis die IDE angezeigt wird. Bitte haben Sie etwas Geduld.
2. 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. Wenn in der Statusleiste Cloud Code - no project angezeigt wird, wählen Sie diese Option aus und wählen Sie dann das gewünschte 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 und wählen Sie ein letztes Mal das richtige Google Cloud-Projekt aus. Wenn Sie aufgefordert werden, die Cloud AI Companion API zu aktivieren, tun Sie dies, bevor Sie fortfahren.
4. Nachdem Sie Ihr Google Cloud-Projekt ausgewählt haben, prüfen Sie, ob dies in der Cloud Code-Statusmeldung in der Statusleiste zu sehen ist und ob Code Assist auf der rechten Seite aktiviert ist (siehe unten):

Gemini Code Assist kann jetzt verwendet werden.

Gemini Code Assist ist auch in lokalen IDEs wie Visual Studio Code oder JetBrains IntelliJ verfügbar. Es ist auch in Google Cloud Workstations verfügbar. Dieses Codelab konzentriert sich auf die Cloud Shell-IDE, damit alle Nutzer dieselbe Umgebung verwenden können. Sie können aber auch Ihre bevorzugte Einrichtung ausprobieren. Weitere Informationen finden Sie unter diesem Link.

Optional: Wenn Gemini rechts unten in der Statusleiste nicht angezeigt wird, müssen Sie Gemini in Cloud Code aktivieren. Prüfen Sie zuerst, ob Gemini in der IDE aktiviert ist. Rufen Sie dazu Cloud Code-Erweiterung → Einstellungen auf und geben Sie wie unten gezeigt den Text Gemini ein. Das Kästchen muss angeklickt sein. Aktualisieren Sie Ihre IDE.Dadurch wird Gemini in Cloud Code aktiviert und das Gemini-Symbol in der Statusleiste wird in Ihrer IDE angezeigt.

3. Schnellstartlösung für die KI-Zusammenfassung bereitstellen

1. Lösung für die Zusammenfassung von Dokumenten mit generativer KI aufrufen
2. Klicken Sie auf „Bereitstellen“.

• Wenn die Abrechnung für Ihr Projekt nicht aktiviert ist, aktivieren Sie die Abrechnung.
• Wählen Sie als Region us-central1 aus.
• Klicken Sie auf „Bereitstellen“.
• Das kann bis zu 15 Minuten dauern.
• Sie müssen keine Änderungen vornehmen, können sich aber die Bereitstellung der Schnellstart-Lösung genauer ansehen. Klicken Sie dazu auf der Detailseite der Lösungsbereitstellung auf die Schaltfläche DIESE LÖSUNG ENTDECKEN.

4. Mit Gemini chatten

Als Erstes sehen wir uns an, wie man mit Gemini chattet. Gemini ist als Chatassistent in der Cloud Shell-IDE als Teil der Cloud Code-Erweiterung in VS Code verfügbar. Sie können es 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.

Daraufhin wird das Fenster „Chat: GeminiI“ in der Cloud Shell IDE angezeigt. Sie können mit Gemini chatten, um Hilfe zu Google Cloud zu erhalten.

Lassen Sie uns das Gemini-Chatfenster verwenden, um einen Prompt einzugeben und die Antwort von Gemini zu sehen. 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. Diese können Kontext aus vorhandenem Code enthalten, den Google Cloud analysiert, um Ihnen hilfreichere oder vollständigere Antworten zu geben. Weitere Informationen zum Schreiben von Prompts, um gute Antworten zu generieren, finden Sie unter Bessere Prompts für Gemini in Google Cloud schreiben.

Probieren Sie die folgenden Beispielaufforderungen 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?

Beachten Sie das Papierkorbsymbol oben. Damit können Sie den Kontext für den Code Assist-Chatverlauf zurücksetzen. Beachten Sie auch, dass diese Chat-Interaktion kontextabhängig von den Dateien ist, an denen Sie in der IDE arbeiten.

5. Laden Sie die Cloud Functions-Schnellstartlösung in Cloud Code herunter

Wenn Sie sich im Cloud Shell-Editor befinden, gehen Sie so vor:

• Klicken Sie auf Cloud Code .
• Hinweis: Je nach Größe des Bildschirms können ein bis zwei Schritte erforderlich sein.

oder

• Klicken Sie auf „Cloud Functions“.
• Wenn Sie dazu aufgefordert werden, melden Sie sich an oder autorisieren Sie Ihr Konto.
• Klicken Sie auf die Webhook-Funktion.
• Klicken Sie auf das Symbol „In neuen Arbeitsbereich herunterladen“ .
• 
• Verwenden Sie Webhook-1 als Namen des Arbeitsbereichs (sollte die Standardeinstellung 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 gezeigt:

Sehen Sie sich den Ablauf von der Funktion „PDFs hochladen“ in Cloud Storage an. Die Cloud Functions-Funktion, die beim Hochladen der PDF-Datei aufgerufen wird, ist in der Datei main.py angegeben.

Klicken Sie auf diese Datei. Der Einstiegspunkt für die Cloud Functions-Funktion ist die entrypoint-Funktion, die schließlich die cloud_event_entrypoint-Funktion aufruft, die den Text aus der PDF-Datei extrahiert und dann 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.

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

7. Beispielausführung ausführen

Wie im Architekturdiagramm dargestellt, laden wir eine Datei in den Bucket <PROJECT_ID>_uploads hoch, damit die Cloud Functions-Funktion aufgerufen wird.

Achte darauf, dass eine Beispiel-PDF zum Hochladen bereitsteht und für die eine Zusammenfassung erstellt werden soll.

• 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 eine Beispiel-PDF hoch.

Wenn Sie keine PDF-Beispieldatei haben, können Sie eines der von uns erstellten Muster 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/

Nachdem die Datei hochgeladen wurde, wird die Cloud Functions-Funktion webhook aufgerufen und fasst den im Dokument gefundenen Text zusammen. Die Ausgabe wird in ein BigQuery-Dataset namens summary_dataset und in die Tabelle summary_table geschrieben.

Fragen Sie die Tabelle ab, um die Ergebnisse der Zusammenfassung anzusehen.

8. Webanwendungsclient für die Anwendung erstellen

Der obige Vorgang ist eine manuelle Schritt-für-Schritt-Anleitung zum Hochladen der PDF-Datei, die zusammengefasst werden soll. Wie wäre es mit dem Erstellen eines Web-Front-Ends für die Anwendung?

Die Anforderungen für das Web-Frontend sind einfach:

1. Ein einfaches HTML-Formular, mit dem wir die Datei auswählen und hochladen können, die zusammengefasst werden muss.
2. Die Datei sollte nach einem erfolgreichen Upload in den Bucket <PROJECT_ID>_uploads geschrieben werden, damit der Rest der Funktionalität unverändert funktioniert.

Wir verwenden Python und das Flask-Framework für Webanwendungen, um dies in Unterstützung mit Duet AI zu erstellen.

Legen wir los! Es wird davon ausgegangen, dass Sie noch denselben Arbeitsbereich in der Cloud Shell-IDE geöffnet haben.

Schließen Sie alle Dateien und geben Sie im Gemini Chat-Fenster den folgenden Prompt 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.

Idealerweise sollte so Code erzeugt 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():
    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 obigen Code als app.py im Stammverzeichnis des IDE-Arbeitsbereichs.

Die Anwendung soll auf Port 8080 ausgeführt werden und die Hostadresse 0.0.0.0 verwenden. Fordern Sie also Gemini auf , die Anweisung app.run 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 im Gemini Chat-Fenster den folgenden Prompt ein:

Provide the index.html file

Sie sollte den unten stehenden Code für „index.html“ enthalten.

<!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 bitten, uns mitzuteilen, 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 nun im Stammordner einen Ordner namens „templates“ und speichern Sie die Datei „index.html“ darin.

Wir möchten eine Ausnahmebehandlung in der app.py-Datei für den Fall, dass die Datei nicht im Google Cloud Storage-Bucket gespeichert werden kann. Lass die app.py-Datei geöffnet und gib 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.

Damit sollte nun eine Ausnahmebehandlung hinzugefügt werden, wie unten gezeigt:

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 ändern. Bitten wir Gemini, dies über den folgenden Prompt zu tun:

update the index.html to display the error message

Dadurch sollte die Datei index.html wie unten dargestellt aktualisiert 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 bei jedem der oben genannten Schritte die Änderungen in der Datei app.py bzw. index.html speichern.

app.py hat nicht den richtigen Bucket-Namen. Daher können wir diese Informationen an Gemini weitergeben und Gemini bitten, die Änderungen vorzunehmen. Außerdem müssen wir die Projekt-ID für die storage.Client()-Instanz angeben. Geben Sie daher die folgenden Aufforderungen im Gemini Chat-Fenster 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, idealerweise sollte es aber auch die Datei sein, mit der Sie arbeiten und die Sie in der Aufforderung 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 Abhängigkeiten, die in der Datei requirements.txt definiert sind. Öffnen Sie in der Cloud Shell-IDE die Befehlspalette, wie unten gezeigt:

Geben Sie Python: Create Environment ein und führen Sie dann die Schritte zum Erstellen einer virtuellen Umgebung mit (venv), dann dem Python 3.x-Interpreter und der Datei requirements.txt aus. Dadurch wird die erforderliche Umgebung erstellt.

Starten Sie das Terminal jetzt wie unten gezeigt:

Geben Sie im Terminal den folgenden Befehl ein:

python app.py

Die Flask-Anwendung sollte gestartet werden und Sie sollten in etwa 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. Sie sollte die Seite index.html anzeigen.

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

Sie können die Zusammenfassung überprüfen, indem Sie das BigQuery-Dataset und die BigQuery-Tabelle aus einem vorherigen Lab aufrufen. Alternativ können Sie sich den Cloud Storage-Bucket ansehen (&lt;PROJECT_ID&gt;_output).

10. (Optional) Explorative Datenanalyse öffnen – In Cloud Run bereitstellen

• Sie können die Anwendung in Cloud Run bereitstellen.
• Fragen Sie Gemini Code Assist mit dem folgenden Prompt (Sie müssen möglicherweise ein paar Varianten des obigen 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) Explorative Datenanalyse öffnen und CSS-Stile hinzufügen

• Verwenden Sie Gemini Code Assist und den Assistenten im Editor, um Ihrer Anwendung CSS-Stile hinzuzufügen und die Anwendung wieder bereitzustellen, wenn Sie fertig sind.
• Öffnen Sie die Datei index.html und geben Sie den folgenden Prompt in Gemini Chat ein: Can you apply material design styles to this index.html?
• Prüfen Sie, ob der Code funktioniert.

12. Glückwunsch!

Herzlichen Glückwunsch – Sie haben mit Gemini Code Assist erfolgreich an einem Beispielprojekt gearbeitet, um zu verstehen, wie Gemini Code bei der Codegenerierung, bei der Codevervollständigung, bei der Codezusammenfassung und bei der Beantwortung von Fragen zu Google Cloud helfen kann.

13. Referenzdokumente

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