Data ke AI Generatif dengan Spanner dan Vertex AI Imagen API

1. Pengantar

Dalam codelab ini, bangun generator pose berteknologi AI menggunakan Java, Spring Boot, database Cloud Spanner, dan Vertex AI Imagen API. Pengguna akan memasukkan perintah, dan aplikasi akan membuat pose berdasarkan perintah tersebut. Kita juga akan menggunakan data dari database Spanner yang diekspos sebagai REST API. Ini adalah cara yang menyenangkan dan mendidik untuk mendemonstrasikan kemampuan AI Generatif dengan Spring Boot di Google Cloud.

Daftar layanan yang digunakan adalah:

Cloud Spanner
Vertex AI Imagen API
Cloud Run

Diagram alur tingkat tinggi

Yang akan Anda build

Anda akan membuat

Aplikasi Java Spring Boot untuk Spanner Data sebagai API Layanan
Aplikasi Java Spring Boot untuk kasus penggunaan pembuatan gambar menggunakan Imagen
Antarmuka pengguna interaktif untuk input dan respons perintah

2. Persyaratan

Browser, seperti Chrome atau Firefox
Project Google Cloud yang mengaktifkan penagihan

Sebelum memulai

Di Konsol Google Cloud, di halaman pemilih project, pilih atau buat project Google Cloud.
Pastikan penagihan diaktifkan untuk project Cloud Anda. Pelajari cara memeriksa apakah penagihan telah diaktifkan pada suatu project.
Pastikan semua API yang diperlukan (Cloud Spanner API, Vertex AI API, Cloud Run API, Cloud Functions API) telah diaktifkan.
Anda akan menggunakan Cloud Shell, lingkungan command line yang berjalan di Google Cloud yang telah dilengkapi dengan bq. Baca dokumentasi untuk mempelajari perintah gcloud dan penggunaannya

Dari Cloud Console, klik Activate Cloud Shell di pojok kanan atas:

Jika project Anda belum ditetapkan, gunakan perintah berikut untuk menetapkannya:

gcloud config set project <YOUR_PROJECT_ID>

Buka halaman Cloud Spanner dengan project Google Cloud yang aktif untuk memulai

3. Menyiapkan data dengan Spanner

Sebelum membuat aplikasi, selesaikan penyiapan database dengan membuat instance, database, dan tabel Cloud Spanner. Anda dapat membaca blog ini untuk mempelajari lebih lanjut fitur, DDL, DML, dan lainnya di Cloud Spanner. Anda dapat mengikuti langkah-langkah di bawah untuk membuat objek database yang diperlukan untuk project ini:

Buat instance dengan mengklik CREATE INSTANCE di halaman instance.
Masukkan detail seperti yang ditunjukkan pada gambar berikut, lalu klik BUAT:

Setelah dibuat, dari halaman ringkasan instance, klik CREATE DATABASE
Berikan nama database sebagai "first-spanner-db" dan masukkan DDL berikut di bagian DDL TEMPLATES, lalu klik SUBMIT:

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

Database dan tabel harus dibuat sebagai hasil dari langkah terakhir. Sekarang, mari kita sisipkan beberapa baris ke dalam tabel Yoga_Poses agar kita dapat membangun aplikasi Spring Boot.

Klik Spanner Studio di panel Database di sebelah kiri dan buka tab editor kueri baru seperti yang ditunjukkan pada gambar di bawah:

Jalankan kueri INSERT berikut:

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');

Sekarang kita telah membuat instance, database, tabel, dan data Spanner yang siap digunakan untuk aplikasi.

4. Membangun REST API dengan Spring Boot dan Spanner untuk data pose

Untuk memahami Spring Boot dan konsol Google Cloud, baca blog ini.

Bootstrapping aplikasi Spring Boot Untuk melakukan bootstrapping aplikasi ini dari awal, ikuti blog ini. Untuk meng-clone dari repo dan mulai beraksi, cukup jalankan perintah di bawah di terminal Cloud Shell Anda:

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

Tindakan ini akan membuat project spanner-springb di mesin cloud shell Anda. Untuk memahami komponen aplikasi, baca blog.

Mari kita bangun dan jalankan aplikasi. Untuk melakukannya, jalankan perintah berikut dari terminal Cloud Shell:

cd spanner-springb

./mvnw package

./mvnw spring-boot:run

Deploy aplikasi di Cloud Run agar tersedia untuk aplikasi pembuat pose. Untuk melakukannya, jalankan perintah berikut dari terminal Cloud Shell:

gcloud run deploy –source .

Teruskan parameter yang diperlukan dan pastikan aplikasi Anda di-deploy. URL layanan yang dihasilkan harus dapat mencantumkan data yang dibuat di Spanner.

5. Mem-bootstrap aplikasi generator pose dengan Spring Boot, Spanner, dan Imagen

Pada titik ini, kita telah menyelesaikan bagian atas diagram alur, yaitu membuat data Spanner tersedia sebagai layanan (REST API). Sekarang mari kita buat aplikasi klien yang memanggil data spanner, memanggil IMAGEN API dengan perintah, dan menampilkan string berenkode Base64 sebagai gambar ke antarmuka pengguna.

Sekarang, Anda sudah memahami struktur project Spring Boot dan signifikansinya. Jadi, kita akan langsung meng-clone repo ke mesin Cloud Shell Anda dengan menjalankan perintah di bawah di terminal Cloud Shell:

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

Tindakan ini akan membuat project genai-posegen di mesin cloud shell Anda. Struktur project yang di-clone akan muncul seperti ini di editor Cloud Shell:

Class Java PromptController memiliki pemanggilan layanan database, penerapan logika bisnis, dan pemanggilan API AI generatif Imagen. Class ini berinteraksi dengan template Thymeleaf yang menangani integrasi data ke antarmuka pengguna. Ada 3 metode layanan di class ini — 1) untuk mendapatkan input perintah 2) untuk memproses permintaan dan memanggil Imagen API, serta 3) untuk memproses respons Imagen.

Prompt dan Yoga adalah class POJO yang berisi kolom, getter, dan setter untuk berinteraksi dengan Imagen API dan Spanner Data Server API.

File html Index dan getImage di folder templates berisi template untuk antarmuka pengguna dan memiliki dependensi skrip JS dan CSS di folder masing-masing.

Integrasi Vertex AI Imagen API Untuk kasus penggunaan pembuatan gambar, kami menggunakan Vertex AI Imagen API dalam format berikut:

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

Anda dapat membaca selengkapnya tentang kemampuan Imagen di sini. API ini menampilkan respons dalam format string berenkode Base64. Untuk mengonversinya menjadi gambar, kita telah menggunakan metode setattribute javascript (dalam file getImage.js) pada objek gambar sebagai berikut dalam file getImage.HTML:

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

Otorisasi Imagen API mengharuskan Anda mengaktifkan autentikasi token pembawa untuk mengaksesnya. Dalam kasus ini, saya telah menggunakan pendekatan JSON Kredensial Default Aplikasi. Anda dapat menerapkannya dengan menjalankan perintah di bawah dari terminal Cloud Shell dan mengikuti petunjuk yang muncul di terminal:

gcloud auth application-default login

Masukkan "Y" untuk melakukan autentikasi dengan akun Anda. Izinkan akses dan salin kode otorisasi yang ditampilkan di pop-up. Segera setelah melakukannya, Anda akan mendapatkan kredensial default aplikasi dalam file JSON yang disimpan ke lokasi yang mirip dengan ini: /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json.

Download file atau salin konten file JSON dengan menjalankan perintah cat (cat /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json) dan gunakan di aplikasi dalam metode callImagen() class PromptController.java. Anda dapat membaca selengkapnya tentang autentikasi di sini.

Antarmuka Pengguna Kami telah menggunakan Thymeleaf sebagai mesin template untuk mengurai dan merender data ke file template front-end dan untuk menambahkan desain yang elegan ke antarmuka pengguna. Mirip dengan HTML, tetapi mendukung lebih banyak atribut untuk memproses data yang dirender. index.html berisi komponen desain halaman landing dan memungkinkan pengguna memilih topik serta menambahkan perintah pengganti untuk membuat gambar yang diinginkan.

6. Mem-build dan men-deploy

Setelah Anda meng-clone kode, mengganti nilai placeholder sesuai dengan project, region, dan kredensial autentikasi Anda, mari kita lanjutkan dengan mem-build dan men-deploy aplikasi. Buka folder project di terminal Cloud Shell menggunakan perintah, lalu build dan deploy untuk pengujian secara lokal di mesin Cloud Shell dengan 3 perintah berikut satu per satu:

cd genai-posegen

./mvnw package

./mvnw spring-boot:run

Deploy aplikasi di Cloud Run agar tersedia di cloud. Untuk melakukannya, jalankan perintah berikut dari terminal cloud shell dalam folder project:

gcloud run deploy –source .

Teruskan parameter yang diperlukan dan pastikan aplikasi Anda di-deploy.

7. Demo

Setelah aplikasi di-deploy, Anda akan melihat URL layanan di terminal. Klik link dan lihat aplikasi pembuatan gambar pose Anda berjalan di Google Cloud secara serverless.

8. Pembersihan

Agar tidak menimbulkan biaya pada akun Google Cloud Anda untuk resource yang digunakan dalam posting ini, ikuti langkah-langkah berikut:

Di konsol Google Cloud, buka halaman Manage resources
Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Delete
Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project
Jika Anda tidak ingin menghapus project, hapus instance Spanner dengan membuka instance yang baru saja Anda buat untuk project ini, lalu klik tombol DELETE INSTANCE di sudut kanan atas halaman ringkasan instance
Anda juga dapat membuka halaman layanan Cloud Run, memilih layanan yang dibuat dalam project ini, lalu mengklik tombol hapus untuk menghapus layanan.

9. Selamat

Dalam blog ini, kami berhasil menghadirkan aplikasi Spring Boot full stack yang menyimpan dan menangani data di Cloud Spanner, untuk membuat pose menggunakan Imagen API Vertex AI Google Cloud dalam aplikasi klien interaktif yang di-deploy di Cloud Run. Di bagian diagram arsitektur blog ini, Anda melihat komponen Cloud Functions (Java) yang tidak pernah kita lakukan? Anda dapat berkontribusi jika ingin. Anda dapat menerapkan 2 Java Cloud Functions untuk melakukan 2 metode yang dapat ditemukan dalam file getimage.html: metode save pose to database dan upload image. Lihat dokumentasi Imagen di Vertex AI untuk mempelajari model lebih lanjut.