Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Daten zu generativer KI mit Spanner und der Vertex AI Imagen API

1. Einführung

In diesem Codelab erstellen Sie mit Java, Spring Boot, der Cloud Spanner-Datenbank und der Vertex AI Imagen API einen KI-basierten Posen-Generator. Der Nutzer gibt einen Prompt ein und die Anwendung generiert auf Grundlage dieses Prompts eine Pose. Wir verwenden auch Daten aus der Spanner-Datenbank, die als REST API verfügbar gemacht werden. Es ist eine unterhaltsame und lehrreiche Möglichkeit, die Funktionen von generativer KI mit Spring Boot in Google Cloud zu demonstrieren.

Folgende Dienste werden verwendet:

Cloud Spanner
Vertex AI Imagen API
Cloud Run

Allgemeines Flussdiagramm

Aufgaben

Sie erstellen

Eine Java Spring Boot-Anwendung für die Spanner Data-as-a-Service API
Eine Java Spring Boot-Anwendung für den Anwendungsfall der Bildgenerierung mit Imagen
Eine interaktive Benutzeroberfläche für die Prompteingabe und die Antwort

2. Voraussetzungen

Ein Browser, z. B. Chrome oder Firefox
Ein Google Cloud-Projekt mit aktivierter Abrechnungsfunktion

Hinweis

Wählen Sie in der Google Cloud Console auf der Seite zur Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
Die Abrechnung für das Cloud-Projekt muss aktiviert sein. So prüfen Sie, ob die Abrechnung für ein Projekt aktiviert ist
Achten Sie darauf, dass alle erforderlichen APIs (Cloud Spanner API, Vertex AI API, Cloud Run API, Cloud Functions API) aktiviert sind.
Sie verwenden Cloud Shell, eine Befehlszeilenumgebung, die in Google Cloud ausgeführt wird und in der bq vorinstalliert ist. Dokumentation zu gcloud-Befehlen und deren Verwendung

Klicken Sie in der Cloud Console rechts oben auf „Cloud Shell aktivieren“:

Wenn Ihr Projekt nicht festgelegt ist, verwenden Sie den folgenden Befehl, um es festzulegen:

gcloud config set project <YOUR_PROJECT_ID>

Rufen Sie mit Ihrem aktiven Google Cloud-Projekt die Seite Cloud Spanner auf, um loszulegen.

3. Daten mit Spanner vorbereiten

Bevor wir die App erstellen, richten wir die Datenbank ein, indem wir eine Cloud Spanner-Instanz, -Datenbank und -Tabelle erstellen. In diesem Blog finden Sie weitere Informationen zu Cloud Spanner-Funktionen, DDL, DML und mehr. Mit den folgenden Schritten können Sie die für dieses Projekt erforderlichen Datenbankobjekte erstellen:

Erstellen Sie eine Instanz, indem Sie auf der Seite „Instanzen“ auf „INSTANZ ERSTELLEN“ klicken.
Geben Sie die Details wie im folgenden Bild ein und klicken Sie auf „ERSTELLEN“:

Klicken Sie nach dem Erstellen auf der Seite „Instanzübersicht“ auf „DATENBANK ERSTELLEN“.
Geben Sie den Namen der Datenbank als „first-spanner-db“ an, geben Sie die folgende DDL in den Abschnitt „DDL TEMPLATES“ ein und klicken Sie auf „SUBMIT“:

CREATE TABLE Yoga_Poses(
  Pose_Id   INT64 NOT NULL,
  Name  STRING(1024),
  Breath STRING(1024),
  Description STRING(1024)
) PRIMARY KEY(Pose_Id);

Die Datenbank und die Tabelle sollten im letzten Schritt erstellt werden. Fügen wir nun einige Zeilen in die Tabelle „Yoga_Poses“ ein, damit wir unsere Spring Boot-Anwendung erstellen können.

Klicken Sie im Bereich „Datenbank“ auf der linken Seite auf „Spanner Studio“ und öffnen Sie einen neuen Tab für den Abfrageeditor, wie in der Abbildung unten dargestellt:

Führen Sie die folgenden INSERT-Abfragen aus:

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(1, 'STAND', 'INHALE AND EXHALE', 
'STAND WITH YOUR FEET HIP WIDTH APART AND ARMS RESTING BY THE SIDES');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(2, 'PLANK', 'INHALE OR EXHALE', 
'PLANT YOUR TOES AND PALMS ON THE MAT WITH BODY PARALLEL TO THE GROUND');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(3, 'SIT', 'INHALE AND EXHALE', 
'SIT ON THE FLOOR LEGS CROSSED');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(4, 'BEND', 'EXHALE', 
'FOLD FORWARD AS YOU STAND, HANDS REACHING TO THE FLOOR');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(5, 'PUSH UP', 'EXHALE', 
'PLANK WITH ELBOWS ON MAT');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(6, 'SEATED FORWARD BEND', 'EXHALE', 
'FOLD FORWARD AS YOU SIT, HANDS TRYING TO REACH THE FEET');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(7, 'LUNGE', 'EXHALE', 
'ONE LEG TO THE FRONT 90 DEGREES TO THE FLOOR AND THE BACK LEG STRAIGHT');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(8, 'COURTESY LUNGE', 'INHALE', 
'ONE LEG TO THE FRONT 90 DEGREES TO THE FLOOR AND THE BACK KNEE TOUCHING THE FLOOR');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(9, 'BANK BEND', 'INHALE', 
'STAND WITH ARMS UP AND BODY BENT BACKWARDS, ARCHING YOUR SPINE, LOOKING AT THE SKY');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(10, 'BICEP ACTION', 'INHALE AND EXHALE', 
'CURL, PRESS AND WORK YOUR BICEPS');

Jetzt haben wir unsere Spanner-Instanz, -Datenbank, -Tabelle und -Daten erstellt und sie sind für die Anwendung bereit.

4. REST API mit Spring Boot und Spanner für Posedaten erstellen

Machen Sie sich mit Spring Boot und der Google Cloud Console vertraut. Lesen Sie dazu diesen Blog.

Spring Boot-App booten: Wenn Sie diese App von Grund auf neu booten möchten, folgen Sie diesem Blog. Wenn Sie das Repository klonen und loslegen möchten, führen Sie einfach den folgenden Befehl in Ihrem Cloud Shell-Terminal aus:

git clone https://github.com/AbiramiSukumaran/spanner-springb

Dadurch sollte das Projekt „spanner-springb“ auf Ihrer Cloud Shell-Maschine erstellt worden sein. Weitere Informationen zu den Komponenten der App finden Sie im Blog.

Erstellen und führen Sie die App aus. Führen Sie dazu die folgenden Befehle im Cloud Shell-Terminal aus:

cd spanner-springb

./mvnw package

./mvnw spring-boot:run

Stellen Sie die App in Cloud Run bereit, damit sie für die Pose Generator App verfügbar ist. Führen Sie dazu den folgenden Befehl im Cloud Shell-Terminal aus:

gcloud run deploy –source .

Übergeben Sie die erforderlichen Parameter und sorgen Sie dafür, dass Ihre App bereitgestellt wird. Über die generierte Dienst-URL sollten die in Spanner erstellten Daten aufgelistet werden können.

5. Pose-Generator-App mit Spring Boot, Spanner und Imagen erstellen

Wir haben jetzt den oberen Teil des Flussdiagramms abgeschlossen, d. h. die Spanner-Daten als Dienst (REST API) verfügbar gemacht. Erstellen wir nun eine Clientanwendung, die die Spanner-Daten aufruft, die IMAGEN API mit einem Prompt aufruft und den Base64-codierten String als Bild an die Benutzeroberfläche zurückgibt.

Sie kennen die Spring Boot-Projektstruktur und ihre Bedeutung bereits. Wir springen also schnell zum Klonen des Repositorys auf Ihren Cloud Shell-Computer, indem Sie den folgenden Befehl in Ihrem Cloud Shell-Terminal ausführen:

git clone https://github.com/AbiramiSukumaran/genai-posegen

Dadurch sollte das Projekt genai-posegen auf Ihrem Cloud Shell-Computer erstellt worden sein. Die geklonte Projektstruktur wird im Cloud Shell-Editor so angezeigt:

Die Java-Klasse PromptController enthält den Aufruf des Datenbankdienstes, die Implementierung der Geschäftslogik und den Aufruf der generativen KI-API von Imagen. Diese Klasse interagiert mit den Thymeleaf-Vorlagen, die für die Datenintegration in die Benutzeroberfläche zuständig sind. Diese Klasse enthält drei Dienstmethoden: 1) zum Abrufen der Prompt-Eingabe, 2) zum Verarbeiten der Anfrage und Aufrufen der Imagen API und 3) zum Verarbeiten der Imagen-Antwort.

Prompt und Yoga sind die POJO-Klassen, die die Felder, Getter und Setter für die Interaktion mit der Imagen API bzw. der Spanner-Datenserver-API enthalten.

Die HTML-Dateien Index und getImage im Ordner „templates“ enthalten die Vorlagen für die Benutzeroberfläche und haben Abhängigkeiten von JS- und CSS-Scripts in den entsprechenden Ordnern.

Vertex AI Imagen API-Integration: Für den Anwendungsfall der Bilderstellung verwenden wir die Imagen API von Vertex AI im folgenden Format:

https://<<region>>- aiplatform.googleapis.com/v1/projects/<<your-project-id>>/locations/<<region>>/publishers/google/models/imagegeneration:predict

Weitere Informationen zu den Funktionen von Imagen Die Antwort wird im Base64-codierten Stringformat zurückgegeben. Um es in sein Bild zu konvertieren, haben wir die JavaScript-Methode „setattribute“ (in der Datei „getImage.js“) für das Bildobjekt wie folgt in der Datei „getImage.HTML“ verwendet:

poseImage.setAttribute('src', "data:image/jpg;base64," + baseStr64);

Autorisierung: Für den Zugriff auf die Imagen API muss die Bearer-Token-Authentifizierung aktiviert sein. In unserem Fall habe ich den JSON-Ansatz für Standardanmeldedaten für Anwendungen verwendet. Sie können sie implementieren, indem Sie den folgenden Befehl im Cloud Shell-Terminal ausführen und der Anleitung im Terminal folgen:

gcloud auth application-default login

Geben Sie „Y“ ein, um sich mit Ihrem Konto zu authentifizieren. Erlauben Sie den Zugriff und kopieren Sie den Autorisierungscode, der im Pop-up-Fenster angezeigt wird. Sobald Sie das tun, erhalten Sie die Standardanmeldedaten der Anwendung in der JSON-Datei, die an einem Ort wie diesem gespeichert ist: /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json.

Laden Sie die Datei herunter oder kopieren Sie den Inhalt der JSON-Datei, indem Sie den Befehl „cat“ ausführen (cat /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json), und verwenden Sie ihn in der Anwendung in der Methode „callImagen()“ der Klasse „PromptController.java“. Weitere Informationen zur Authentifizierung

Benutzeroberfläche: Wir haben Thymeleaf als Vorlagen-Engine verwendet, um Daten in den Frontend-Vorlagendateien zu parsen und zu rendern und der Benutzeroberfläche ein ansprechendes Design zu verleihen. Sie ähnelt HTML, unterstützt aber mehr Attribute für die Arbeit mit gerenderten Daten. Die Datei „index.html“ enthält die Designkomponenten der Landingpage. Der Nutzer kann das Thema auswählen und einen überschreibenden Prompt hinzufügen, um das gewünschte Bild zu generieren.

6. Erstellen und bereitstellen

Nachdem Sie den Code geklont und die Werte für Platzhalter entsprechend Ihrem Projekt, Ihrer Region und Ihren Anmeldedaten ersetzt haben, können Sie die App erstellen und bereitstellen. Rufen Sie den Projektordner im Cloud Shell-Terminal mit dem folgenden Befehl auf und führen Sie dann die folgenden drei Befehle nacheinander aus, um die App lokal in der Cloud Shell-Maschine zu erstellen und bereitzustellen:

cd genai-posegen

./mvnw package

./mvnw spring-boot:run

Stellen Sie die Anwendung in Cloud Run bereit, damit sie in der Cloud verfügbar ist. Führen Sie dazu den folgenden Befehl im Cloud Shell-Terminal im Projektordner aus:

gcloud run deploy –source .

Übergeben Sie die erforderlichen Parameter und sorgen Sie dafür, dass Ihre App bereitgestellt wird.

7. Demo

Sobald die App bereitgestellt wurde, sollte die Dienst-URL im Terminal angezeigt werden. Klicken Sie auf den Link, um Ihre App zur Generierung von Posenbildern serverlos auf Google Cloud auszuführen.

8. Bereinigen

So vermeiden Sie, dass Ihrem Google Cloud-Konto die in diesem Beitrag verwendeten Ressourcen in Rechnung gestellt werden:

Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten.
Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie dann auf „Löschen“.
Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf „Herunterfahren“, um das Projekt zu löschen.
Wenn Sie das Projekt nicht löschen möchten, löschen Sie die Spanner-Instanz. Rufen Sie dazu die Instanz auf, die Sie gerade für dieses Projekt erstellt haben, und klicken Sie oben rechts auf der Übersichtsseite der Instanz auf die Schaltfläche „INSTANZ LÖSCHEN“.
Sie können auch die Seite „Cloud Run-Dienste“ aufrufen, die in diesem Projekt erstellten Dienste auswählen und auf die Schaltfläche „Löschen“ klicken, um die Dienste zu löschen.

9. Glückwunsch

In diesem Blog haben wir die Spring Boot-Anwendung mit dem gesamten Stack, in der Daten in Cloud Spanner gespeichert und verarbeitet werden, verwendet, um Posen mit der Imagen API von Google Cloud Vertex AI in einer interaktiven Clientanwendung zu generieren, die in Cloud Run bereitgestellt wird. Im Abschnitt mit dem Architekturdiagramm dieses Blogs sehen Sie die Komponente „Cloud Functions (Java)“. Warum haben wir sie nicht verwendet? Wenn Sie dazu beitragen möchten, können Sie sich gerne melden. Sie können zwei Java Cloud Functions implementieren, um die beiden Methoden auszuführen, die in der Datei „getimage.html“ enthalten sind: „save pose to database“ (Pose in Datenbank speichern) und „upload image“ (Bild hochladen). Weitere Informationen zum Modell finden Sie in der Dokumentation zu Imagen in Vertex AI.