1. Wprowadzenie
W tym ćwiczeniu utworzysz generator póz oparty na AI, korzystając z języka Java, Spring Boot, bazy danych Cloud Spanner i interfejsu Vertex AI Imagen API. Użytkownik wpisuje prompt, a aplikacja generuje na jego podstawie pozę. Będziemy też używać danych z bazy danych Spanner udostępnianych jako interfejs API REST. To ciekawy i edukacyjny sposób na zaprezentowanie możliwości generatywnej AI w Spring Boot w Google Cloud.
Lista używanych usług:
- Cloud Spanner
- Vertex AI Imagen API
- Cloud Run
Diagram przepływu wysokiego poziomu

Co utworzysz
Utworzysz
- Aplikacja Java Spring Boot dla interfejsu API Spanner Data as a Service
- Aplikacja Java Spring Boot do generowania obrazów za pomocą modelu Imagen
- Interaktywny interfejs użytkownika do wprowadzania promptów i odpowiedzi
2. Wymagania
Zanim zaczniesz
- W konsoli Google Cloud na stronie selektora projektu wybierz lub utwórz projekt Google Cloud.
- Sprawdź, czy w projekcie Cloud włączone są płatności. Dowiedz się, jak sprawdzić, czy w projekcie włączone są płatności
- Upewnij się, że wszystkie niezbędne interfejsy API (Cloud Spanner API, Vertex AI API, Cloud Run API, Cloud Functions API) są włączone.
- Będziesz używać Cloud Shell, czyli środowiska wiersza poleceń działającego w Google Cloud, które jest wstępnie załadowane narzędziem bq. Informacje o poleceniach gcloud i sposobie ich używania znajdziesz w dokumentacji.
W konsoli Cloud kliknij Aktywuj Cloud Shell w prawym górnym rogu:

Jeśli projekt nie jest ustawiony, użyj tego polecenia, aby go ustawić:
gcloud config set project <YOUR_PROJECT_ID>
- Aby rozpocząć, otwórz stronę Cloud Spanner w aktywnym projekcie Google Cloud.
3. Przygotowywanie danych za pomocą usługi Spanner
Zanim utworzymy aplikację, skonfigurujmy bazę danych, tworząc instancję, bazę danych i tabelę Cloud Spanner. Więcej informacji o funkcjach Cloud Spanner, językach DDL i DML oraz innych kwestiach znajdziesz na tym blogu. Aby utworzyć obiekty bazy danych wymagane w tym projekcie, wykonaj te czynności:
- Utwórz instancję, klikając UTWÓRZ INSTANCJĘ na stronie instancji.
- Wpisz dane widoczne na poniższym obrazie i kliknij UTWÓRZ:

- Po utworzeniu instancji na stronie przeglądu instancji kliknij UTWÓRZ BAZĘ DANYCH.
- W sekcji DDL TEMPLATES (SZABLONY DDL) podaj nazwę bazy danych „first-spanner-db” i wpisz ten kod DDL, a potem kliknij SUBMIT (PRZEŚLIJ):
CREATE TABLE Yoga_Poses(
Pose_Id INT64 NOT NULL,
Name STRING(1024),
Breath STRING(1024),
Description STRING(1024)
) PRIMARY KEY(Pose_Id);
W wyniku ostatniego kroku powinny zostać utworzone baza danych i tabela. Teraz wstawmy kilka wierszy do tabeli Yoga_Poses, abyśmy mogli przystąpić do tworzenia aplikacji Spring Boot.
- W panelu Baza danych po lewej stronie kliknij Spanner Studio i otwórz nową kartę edytora zapytań, jak pokazano na obrazie poniżej:

- Uruchom te zapytania INSERT:
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');
Mamy już utworzoną instancję, bazę danych, tabelę i dane usługi Spanner, które są gotowe do użycia w aplikacji.
4. Tworzenie interfejsu REST API za pomocą Spring Boot i Spanner do danych o pozycji
Aby zapoznać się z Spring Boot i konsolą Google Cloud, przeczytaj ten blog.
- Wczytywanie aplikacji Spring Boot Aby wczytać tę aplikację od zera, przeczytaj ten blog. Aby sklonować repozytorium i zacząć działać, uruchom to polecenie w terminalu Cloud Shell:
git clone https://github.com/AbiramiSukumaran/spanner-springb
W ten sposób powinien zostać utworzony projekt spanner-springb na maszynie Cloud Shell. Aby poznać komponenty aplikacji, przeczytaj bloga.
- Skompiluj i uruchom aplikację. Aby to zrobić, uruchom w terminalu Cloud Shell te polecenia:
cd spanner-springb
./mvnw package
./mvnw spring-boot:run
- Wdróż aplikację w Cloud Run, aby była dostępna dla aplikacji do generowania póz. Aby to zrobić, uruchom to polecenie w terminalu Cloud Shell:
gcloud run deploy –source .
Przekaż wymagane parametry i upewnij się, że aplikacja jest wdrożona. Wygenerowany adres URL usługi powinien umożliwiać wyświetlanie danych utworzonych w usłudze Spanner.
5. Tworzenie aplikacji do generowania póz za pomocą Spring Boot, Spanner i Imagen
Na tym etapie zakończyliśmy górną część diagramu przepływu, czyli udostępnianie danych Spanner jako usługi (API typu REST). Teraz utwórzmy aplikację kliencką, która wywołuje dane Spannera, wywołuje interfejs IMAGEN API z promptem i zwraca ciąg tekstowy z kodowaniem Base64 jako obraz do interfejsu użytkownika.
- Znasz już strukturę projektu Spring Boot i jej znaczenie. Od razu przejdziemy do klonowania repozytorium na maszynę Cloud Shell, uruchamiając w terminalu Cloud Shell to polecenie:
git clone https://github.com/AbiramiSukumaran/genai-posegen
W ten sposób powinien zostać utworzony projekt genai-posegen na maszynie Cloud Shell. Sklonowana struktura projektu będzie wyglądać w edytorze Cloud Shell tak:

Klasa Java PromptController zawiera wywołanie usługi bazy danych, implementację logiki biznesowej i wywołanie interfejsu Imagen API generatywnej AI. Ta klasa wchodzi w interakcję z szablonami Thymeleaf, które odpowiadają za integrację danych z interfejsem użytkownika. Ta klasa zawiera 3 metody usługi: 1) pobieranie danych wejściowych promptu, 2) przetwarzanie żądania i wywoływanie interfejsu API Imagen oraz 3) przetwarzanie odpowiedzi Imagen.
Prompt i Yoga to klasy POJO, które zawierają pola, metody pobierające i ustawiające do komunikacji odpowiednio z interfejsem Imagen API i interfejsem API serwera danych Spanner.
Pliki HTML index i getImage w folderze templates zawierają szablony interfejsu użytkownika i mają zależności od skryptów JS i CSS w odpowiednich folderach.
Integracja z interfejsem Vertex AI Imagen API W przypadku generowania obrazów używamy interfejsu Vertex AI Imagen API w tym formacie:
https://<<region>>- aiplatform.googleapis.com/v1/projects/<<your-project-id>>/locations/<<region>>/publishers/google/models/imagegeneration:predict
Więcej informacji o możliwościach Imagen znajdziesz tutaj. Zwraca odpowiedź w formacie ciągu tekstowego zakodowanego w Base64. Aby przekonwertować go na obraz, użyliśmy metody javascript setattribute (w pliku getImage.js) na obiekcie obrazu w pliku getImage.HTML w ten sposób:
poseImage.setAttribute('src', "data:image/jpg;base64," + baseStr64);
Autoryzacja: interfejs Imagen API wymaga włączenia uwierzytelniania za pomocą tokena dostępu. W naszym przypadku użyłem podejścia JSON opartego na domyślnym uwierzytelnianiu aplikacji. Możesz to zrobić, uruchamiając w terminalu Cloud Shell to polecenie i postępując zgodnie z instrukcjami wyświetlanymi w terminalu:
gcloud auth application-default login
Wpisz „Y”, aby uwierzytelnić się za pomocą konta. Zezwól na dostęp i skopiuj kod autoryzacji, który pojawi się w wyskakującym okienku. Gdy to zrobisz, otrzymasz domyślne dane logowania aplikacji w pliku JSON zapisanym w lokalizacji podobnej do tej: /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json.
Pobierz plik lub skopiuj jego zawartość, uruchamiając polecenie cat (cat /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json), i użyj go w aplikacji w metodzie callImagen() klasy PromptController.java. Więcej informacji o uwierzytelnianiu znajdziesz tutaj.
Interfejs użytkownika: jako silnika szablonów użyliśmy Thymeleaf, aby analizować i renderować dane w plikach szablonów interfejsu oraz dodać elegancki wygląd interfejsu użytkownika. Jest podobny do HTML-a, ale obsługuje więcej atrybutów do pracy z renderowanymi danymi. Plik index.html zawiera komponenty projektu strony docelowej i umożliwia użytkownikowi wybranie tematu oraz dodanie prompta zastępującego, aby wygenerować wybrany obraz.
6. Tworzenie i wdrażanie
Po sklonowaniu kodu i zastąpieniu wartości symboli zastępczych odpowiednimi wartościami projektu, regionu i danych logowania przejdźmy do tworzenia i wdrażania aplikacji. W terminalu Cloud Shell przejdź do folderu projektu, używając tego polecenia, a następnie kolejno wykonaj te 3 polecenia, aby utworzyć i wdrożyć aplikację do testowania lokalnego na maszynie Cloud Shell:
cd genai-posegen
./mvnw package
./mvnw spring-boot:run
wdrożyć aplikację w Cloud Run, aby była dostępna w chmurze; Aby to zrobić, uruchom to polecenie w terminalu Cloud Shell w folderze projektu:
gcloud run deploy –source .
Przekaż wymagane parametry i upewnij się, że aplikacja jest wdrożona.
7. Prezentacja
Po wdrożeniu aplikacji w terminalu powinien pojawić się adres URL usługi. Kliknij link i zobacz, jak Twoja aplikacja do generowania obrazów z pozami działa bezserwerowo w Google Cloud.

8. Czyszczenie danych
Aby uniknąć obciążenia konta Google Cloud opłatami za zasoby użyte w tym poście, wykonaj te czynności:
- W konsoli Google Cloud otwórz stronę Zarządzanie zasobami.
- Z listy projektów wybierz projekt do usunięcia, a potem kliknij Usuń.
- W oknie wpisz identyfikator projektu i kliknij Wyłącz, aby usunąć projekt.
- Jeśli nie chcesz usuwać projektu, usuń instancję Spanner. W tym celu przejdź do instancji utworzonej na potrzeby tego projektu i w prawym górnym rogu strony Przegląd instancji kliknij przycisk USUŃ INSTANCJĘ.
- Możesz też otworzyć stronę usług Cloud Run, wybrać usługi utworzone w tym projekcie i kliknąć przycisk usuwania, aby je usunąć.
9. Gratulacje
W tym artykule na blogu udało nam się przenieść pełną aplikację Spring Boot, która przechowuje i przetwarza dane w Cloud Spanner, aby generować pozy przy użyciu interfejsu Imagen API w Google Cloud Vertex AI w interaktywnej aplikacji klienckiej wdrożonej w Cloud Run. W sekcji diagramu architektury tego bloga widzisz komponent Cloud Functions (Java), którego nigdy nie udało nam się wdrożyć. Jeśli chcesz w tym pomóc, możesz to zrobić. Możesz wdrożyć 2 funkcje Cloud Functions w Javie, aby wykonać 2 metody, które można znaleźć w pliku getimage.html: zapisywanie pozycji w bazie danych i przesyłanie obrazu. Więcej informacji o modelu znajdziesz w dokumentacji Imagen w Vertex AI.