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 Posengenerator. Der Nutzer gibt einen Prompt ein und die Anwendung generiert anhand dieses Prompts eine Pose. Wir verwenden auch Daten aus der Spanner-Datenbank, die als REST API bereitgestellt werden. Es ist eine unterhaltsame und lehrreiche Möglichkeit, die Möglichkeiten von generativer KI mit Spring Boot in Google Cloud zu demonstrieren.
Folgende Dienste werden verwendet:
- Cloud Spanner
- Vertex AI Imagen API
- Cloud Run
Gesamtflussdiagramm
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 unter Verwendung von Imagen
- Eine interaktive Benutzeroberfläche für die Eingabe und Antwort des Prompts
2. Voraussetzungen
Hinweis
- Wählen Sie in der Google Cloud Console auf der Seite für die Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
- Die Abrechnung für das Cloud-Projekt muss aktiviert sein. 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
- Sie verwenden Cloud Shell, eine in Google Cloud ausgeführte Befehlszeilenumgebung mit vorinstalliertem bq. Informationen zu gcloud-Befehlen und deren Verwendung finden Sie in der Dokumentation.
Klicken Sie in der Cloud Console oben rechts auf „Cloud Shell aktivieren“:
Wenn Ihr Projekt noch nicht eingerichtet ist, verwenden Sie den folgenden Befehl, um es festzulegen:
gcloud config set project <YOUR_PROJECT_ID>
- Rufen Sie die Seite Cloud Spanner mit Ihrem aktiven Google Cloud-Projekt auf, um zu beginnen
3. Daten mit Spanner vorbereiten
Bevor Sie die Anwendung erstellen, müssen Sie die Datenbankeinrichtung abschließen, indem Sie eine Cloud Spanner-Instanz, ‐Datenbank und ‐Tabelle erstellen. In diesem Blog finden Sie weitere Informationen zu Cloud Spanner-Features, 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 dem Erstellen in der Instanzübersicht auf CREATE DATABASE
- Geben Sie den Namen der Datenbank als „first-spanner-db“ an. Geben Sie im Abschnitt "DDL TEMPLATES" (DDL-VORLAGEN) die folgende DDL 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 als Ergebnis des letzten Schritts erstellt werden. Fügen wir nun ein paar 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 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 haben wir die Spanner-Instanz, die Datenbank, die Tabelle und die Daten erstellt und sind für die Anwendung bereit.
4. REST API mit Spring Boot und Spanner für Positionsdaten erstellen
In diesem Blog können Sie sich mit Spring Boot und der Google Cloud Console vertraut machen.
- Bootstrapping der Spring Boot-App Folgen Sie diesem Blog, um diese App von Grund auf neu zu starten. Um aus dem Repository zu klonen und in Aktion zu wechseln, 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 Ihrem Cloud Shell-Computer erstellt worden sein. Weitere Informationen zu den Komponenten der App finden Sie im Blog.
- Erstellen Sie die App und führen Sie sie aus. Führen Sie dazu die folgenden Befehle über das Cloud Shell-Terminal aus:
cd spanner-springb
./mvnw package
./mvnw spring-boot:run
- Stellen Sie die Anwendung in Cloud Run bereit, damit sie der Pose-Generator-App zur Verfügung steht. Führen Sie dazu den folgenden Befehl über das Cloud Shell-Terminal aus:
gcloud run deploy –source .
Übergeben Sie die erforderlichen Parameter und sorgen Sie dafür, dass Ihre Anwendung bereitgestellt ist. Die generierte Dienst-URL sollte die in Spanner erstellten Daten auflisten können.
5. Bootstrapping einer Posegenerator-App mit Spring Boot, Spanner und Imagen
Jetzt haben wir den oberen Teil des Flussdiagramms fertiggestellt, d. h., die Spanner-Daten wurden als Dienst (REST API) verfügbar gemacht. Lassen Sie uns nun eine Clientanwendung erstellen, 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.
- Inzwischen sind Sie bereits mit der Struktur des Spring Boot-Projekts und seiner Bedeutung vertraut. Sie können das Repository also direkt in Ihren Cloud Shell-Computer klonen, 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 Datenbankdienstaufruf, die Implementierung der Geschäftslogik und den Generative AI API-Aufruf von Imagen. Diese Klasse interagiert mit den Thymeleaf-Vorlagen, die die Datenintegration in die Benutzeroberfläche übernehmen. In dieser Klasse gibt es drei Dienstmethoden: 1) zum Abrufen der 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 Schnittstelle 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 sind von JS- und CSS-Scripts in den jeweiligen Ordnern abhängig.
Vertex AI Imagen API-Integration: Für die Bildgenerierung verwenden wir die Imagen API der 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 Imagen-Funktionen Die Antwort wird im Base64-codierten Stringformat zurückgegeben. Um es in ein Bild zu konvertieren, haben wir die javascript-Methode setattribute (in der Datei getImage.js) beim Image-Objekt wie 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 Inhabertoken-Authentifizierung aktiviert sein. In unserem Fall habe ich den JSON-Ansatz für Standardanmeldedaten für Anwendungen verwendet. Führen Sie zur Implementierung den folgenden Befehl über das Cloud Shell-Terminal aus und folgen Sie der Anleitung im Terminal:
gcloud auth application-default login
Geben Sie „Y“ ein um dich bei deinem Konto zu authentifizieren. Erlaube den Zugriff und kopiere den Autorisierungscode, der im Pop-up-Fenster angezeigt wird. Anschließend werden die Standardanmeldedaten für Anwendungen in der JSON-Datei an einem Ort wie diesem gespeichert: /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json.
Laden Sie die Datei herunter oder kopieren Sie den Inhalt der JSON-Datei, indem Sie den cat-Befehl (cat /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json) ausführen und in der Anwendung in der Methode "callImagen()" der Klasse "PromptController.java" verwenden. Weitere Informationen zur Authentifizierung
Benutzeroberfläche Wir haben Thymeleaf als Vorlagen-Engine verwendet, um Daten in den Frontend-Vorlagendateien zu parsen und zu rendern sowie ein elegantes Design der Benutzeroberfläche hinzuzufügen. Es ähnelt HTML, unterstützt jedoch mehr Attribute für die Arbeit mit gerenderten Daten. Die Datei „index.html“ enthält die Komponenten für das Design der Landingpage und ermöglicht 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 nun den Code geklont und die Werte für Platzhalter entsprechend Ihrem Projekt, Ihrer Region und Ihren Anmeldedaten für die Authentifizierung ersetzt haben, können Sie mit dem Erstellen und Bereitstellen der Anwendung fortfahren. Rufen Sie mit dem folgenden Befehl den Projektordner im Cloud Shell-Terminal auf, erstellen Sie den Build und stellen Sie ihn dann lokal auf der Cloud Shell-Maschine für den Test bereit. Verwenden Sie dazu die folgenden drei Befehle:
cd genai-posegen
./mvnw package
./mvnw spring-boot:run
Die Anwendung in Cloud Run bereitstellen, damit sie in der Cloud verfügbar ist Führen Sie dazu den folgenden Befehl über das Cloud Shell-Terminal im Projektordner aus:
gcloud run deploy –source .
Übergeben Sie die erforderlichen Parameter und sorgen Sie dafür, dass Ihre Anwendung bereitgestellt ist.
7. Demo
Sobald die Anwendung bereitgestellt ist, sollten Sie die Dienst-URL im Terminal sehen. Klicken Sie auf den Link, um zu sehen, wie Ihre Anwendung zum Generieren von Posen serverlos in Google Cloud ausgeführt wird.
8. Bereinigen
So vermeiden Sie, dass Ihrem Google Cloud-Konto die in diesem Beitrag verwendeten Ressourcen in Rechnung gestellt werden:
- Rufen Sie in der Google Cloud Console die Seite Ressourcen verwalten auf.
- Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie auf „Löschen“.
- Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie dann auf „Beenden“, 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 Übersichtsseite der Instanz auf die Schaltfläche DELETE INSTANCE (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 sie zu löschen.
9. Glückwunsch
In diesem Blog konnten wir die Full-Stack-Anwendung Spring Boot, die Daten in Cloud Spanner speichert und verarbeitet, in eine interaktive Clientanwendung einbinden, die in Cloud Run bereitgestellt wird. So konnten wir Posen mit der Imagen API von Google Cloud Vertex AI generieren. Im Abschnitt zum Architekturdiagramm dieses Blogs sehen Sie die Cloud Functions-Komponente (Java), für die wir nie gedacht haben. Das könnt ihr gewinnen, wenn ihr einen Beitrag leisten möchtet. Sie können zwei Java-Cloud Functions-Funktionen implementieren, um die beiden Methoden auszuführen, die sich in der Datei getimage.html befinden: die Methoden zum Speichern der Pose in der Datenbank und zum Hochladen des Bilds. Weitere Informationen zum Modell finden Sie in der Dokumentation zu Imagen in Vertex AI.