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-gestützten Posen-Generator. Der Nutzer gibt einen Prompt ein und die Anwendung generiert eine Pose basierend auf diesem Prompt. Wir verwenden auch Daten aus der Spanner-Datenbank, die als REST API verfügbar gemacht werden. So können Sie auf unterhaltsame und lehrreiche Weise die Möglichkeiten der generativen KI mit Spring Boot in Google Cloud demonstrieren.

Liste der verwendeten Dienste:

Cloud Spanner
Vertex AI Imagen API
Cloud Run

Diagramm des allgemeinen Ablaufs

Aufgaben

Sie erstellen Folgendes:

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

2. Voraussetzungen

Ein Browser wie Chrome oder Firefox
Ein Google Cloud-Projekt mit aktivierter Abrechnung

Hinweis

Wählen Sie in der Google Cloud Console auf der Seite der Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
Die Abrechnung für das Cloud-Projekt muss aktiviert sein. Informationen zum Prüfen, 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 enabled
Sie verwenden die Cloud Shell, eine Befehlszeilenumgebung, die in Google Cloud ausgeführt wird und in der bq vorinstalliert ist. Informationen zu gcloud-Befehlen und ihrer Verwendung finden Sie in der Dokumentation

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 die Cloud Spanner-Seite mit Ihrem aktiven Google Cloud-Projekt auf, um zu beginnen.

3. Daten mit Spanner vorbereiten

Bevor Sie die Anwendung erstellen, richten Sie die Datenbank ein, indem Sie eine Cloud Spanner-Instanz, -Datenbank und -Tabelle erstellen. In diesem Blog finden Sie weitere Informationen zu Cloud Spanner-Funktionen, DDL, DML und mehr. Führen Sie die folgenden Schritte aus, um die für dieses Projekt erforderlichen Datenbankobjekte zu erstellen:

Erstellen Sie eine Instanz, indem Sie auf der Seite „Instanzen“ auf „Instanz erstellen“ klicken.
Geben Sie die Details wie in der folgenden Abbildung gezeigt ein und klicken Sie auf „Erstellen“:

Klicken Sie nach der Erstellung auf der Seite „Instanzübersicht“ auf „Datenbank erstellen“.
Geben Sie den Namen der Datenbank als „first-spanner-db“ ein, geben Sie die folgende DDL im Abschnitt „DDL-VORLAGEN“ ein und klicken Sie auf „Senden“:

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 worden sein. Fügen wir nun einige Zeilen in die Tabelle „Yoga_Poses“ ein, damit wir unsere Spring Boot-Anwendung erstellen können.

Klicken Sie links im Bereich „Datenbank“ auf „Spanner Studio“ und öffnen Sie einen neuen Abfrageeditor-Tab, wie in der folgenden Abbildung gezeigt:

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 sind unsere Spanner-Instanz, -Datenbank, -Tabelle und -Daten erstellt und für die Anwendung bereit.

4. REST API mit Spring Boot und Spanner für Posen-Daten erstellen

In diesem Blog finden Sie weitere Informationen zu Spring Boot und der Google Cloud Console.

Spring Boot-Anwendung bootstrappen Informationen zum Erstellen dieser Anwendung von Grund auf finden Sie in diesem Blog. Wenn Sie das Repository klonen und loslegen möchten, führen Sie einfach den folgenden Befehl im Cloud Shell-Terminal aus:

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

Dadurch sollte das Projekt „spanner-springb“ auf Ihrem Cloud Shell-Computer erstellt worden sein. Informationen zu den Komponenten der Anwendung finden Sie im Blog.

Anwendung erstellen und ausführen Führen Sie dazu die folgenden Befehle im Cloud Shell-Terminal aus:

cd spanner-springb

./mvnw package

./mvnw spring-boot:run

Anwendung in Cloud Run bereitstellen, damit sie für die Posen-Generator-Anwendung 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 prüfen Sie, ob Ihre Anwendung bereitgestellt wurde. Über die generierte Dienst-URL sollten die in Spanner erstellten Daten aufgelistet werden können.

5. Posen-Generator-Anwendung mit Spring Boot, Spanner und Imagen bootstrappen

An diesem Punkt haben wir 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 sind bereits mit der Spring Boot-Projektstruktur und ihrer Bedeutung vertraut. Wir springen also direkt zum Klonen des Repositorys auf Ihren Cloud Shell-Computer, indem Sie den folgenden Befehl im 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 zum 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 „Vorlagen“ enthalten die Vorlagen für die Benutzeroberfläche und haben Abhängigkeiten von JS- und CSS-Skripts in den jeweiligen Ordnern.

Vertex AI Imagen API-Integration Für den Anwendungsfall der Bildgenerierung 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 Imagen-Funktionen finden Sie hier. Die Antwort wird im Base64-codierten Stringformat zurückgegeben. Um sie in ein Bild umzuwandeln, haben wir die JavaScript-Methode „setAttribute“ (in der Datei „getImage.js“) für das Bildobjekt in der Datei „getImage.HTML“ wie folgt verwendet:

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

Autorisierung Für die Imagen API muss die Bearertoken-Authentifizierung aktiviert sein, um darauf zugreifen zu können. In unserem Fall habe ich den JSON-Ansatz für Standardanmeldedaten für Anwendungen verwendet. Sie können ihn 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. Gewähren Sie Zugriff und kopieren Sie den Autorisierungscode, der im Pop-up angezeigt wird. Sobald Sie das getan haben, erhalten Sie die Standardanmeldedaten für Anwendungen in der JSON-Datei, die an einem Speicherort 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 sie in der Anwendung in der Methode „callImagen()“ der Klasse „PromptController.java“. Weitere Informationen zur Authentifizierung finden Sie hier.

Benutzeroberfläche Wir haben Thymeleaf als Vorlagen-Engine verwendet, um Daten in die Vorlagendateien des Front-Ends zu parsen und zu rendern und der Benutzeroberfläche ein elegantes 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 und ermöglicht es dem Nutzer, das Thema auszuwählen und einen überschreibenden Prompt hinzuzufü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 Authentifizierungsanmeldedaten ersetzt haben, können Sie die Anwendung erstellen und bereitstellen. Rufen Sie den Projektordner im Cloud Shell-Terminal mit dem Befehl auf, erstellen Sie die Anwendung und stellen Sie sie dann zum Testen lokal auf dem Cloud Shell-Computer mit den folgenden drei Befehlen nacheinander bereit:

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 prüfen Sie, ob Ihre Anwendung bereitgestellt wurde.

7. Demo

Sobald die Anwendung bereitgestellt ist, wird die Dienst-URL im Terminal angezeigt. Klicken Sie auf den Link und sehen Sie, wie Ihre Anwendung zur Generierung von Posenbildern serverlos in Google Cloud ausgeführt wird.

8. Bereinigen

Mit den folgenden Schritten 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 dann 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 rechts oben auf der Seite „Instanzübersicht“ auf die Schaltfläche „Instanz löschen“.
Sie können auch zur Seite „Cloud Run-Dienste“ wechseln, 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 eine Full-Stack-Spring Boot-Anwendung erstellt, die Daten in Cloud Spanner speichert und verarbeitet, um mit der Imagen API von Google Cloud Vertex AI Posen in einer interaktiven Clientanwendung zu generieren, die in Cloud Run bereitgestellt wird. Im Abschnitt „Architekturdiagramm“ dieses Blogs sehen Sie die Cloud Functions-Komponente (Java), die wir nicht verwendet haben. Sie können sie verwenden, wenn Sie einen Beitrag leisten möchten. Sie können zwei Java Cloud Functions implementieren, um die beiden Methoden auszuführen, die in der Datei „getimage.html“ zu finden sind: „Pose in Datenbank speichern“ und „Bild hochladen“. Weitere Informationen zum Modell finden Sie in der Dokumentation zu Imagen in Vertex AI.