1. Pengantar
Dalam codelab ini, bangun generator pose dengan teknologi AI menggunakan Java, Spring Boot, database Cloud Spanner, dan Vertex AI Imagen API. Pengguna akan memasukkan prompt, dan aplikasi akan membuat pose berdasarkan prompt tersebut. Kita juga akan menggunakan data dari database Spanner yang diekspos sebagai REST API. Cara ini 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 alir tingkat tinggi
Yang akan Anda build
Anda akan membuat
- Aplikasi Java Spring Boot untuk data Spanner sebagai API layanan
- Aplikasi Java Spring Boot untuk kasus penggunaan pembuatan gambar menggunakan Imagen
- Antarmuka pengguna interaktif untuk input dan respons perintah
2. Persyaratan
Sebelum memulai
- Di Konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud
- Pastikan penagihan diaktifkan untuk project Cloud Anda. Pelajari cara memeriksa apakah penagihan diaktifkan pada sebuah project
- Pastikan semua API yang diperlukan (Cloud Spanner API, Vertex AI API, Cloud Run API, Cloud Functions API) diaktifkan
- Anda akan menggunakan Cloud Shell, yakni lingkungan command line yang berjalan di Google Cloud dan telah dilengkapi dengan bq. Lihat dokumentasi untuk mengetahui perintah dan penggunaan gcloud
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 Anda yang aktif untuk memulai
3. Menyiapkan data dengan Spanner
Sebelum membuat aplikasi, mari selesaikan penyiapan database dengan membuat instance, database, dan tabel Cloud Spanner. Anda dapat membaca blog ini untuk membaca lebih lanjut fitur Cloud Spanner, DDL, DML, dan banyak lagi. Anda dapat mengikuti langkah-langkah di bawah ini untuk membuat objek database yang diperlukan untuk project ini:
- Buat instance dengan mengklik CREATE INSTANCE pada halaman instance.
- Masukkan detail seperti yang ditunjukkan dalam 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 dan klik SUBMIT:
CREATE TABLE Yoga_Poses(
Pose_Id INT64 NOT NULL,
Name STRING(1024),
Breath STRING(1024),
Description STRING(1024)
) PRIMARY KEY(Pose_Id);
{i>Database<i} dan tabel akan dibuat sebagai hasil dari langkah terakhir. Sekarang mari kita masukkan beberapa baris ke dalam tabel Yoga_Poses sehingga kita bisa membangun aplikasi Spring Boot.
- Klik Spanner Studio pada 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 serta siap untuk aplikasi.
4. Membangun REST API dengan Spring Boot dan Spanner untuk data pose
Untuk memahami Spring Boot dan konsol Google Cloud, lihat blog ini.
- Lakukan bootstrap pada aplikasi Spring Boot Untuk melakukan bootstrap pada aplikasi ini dari awal, ikuti blog ini. Untuk meng-clone dari repo dan melakukan tindakan, cukup jalankan perintah di bawah ini di terminal Cloud Shell Anda:
git clone https://github.com/AbiramiSukumaran/spanner-springb
Seharusnya project spanner-springb dibuat di mesin Cloud Shell Anda. Untuk memahami komponen aplikasi, buka 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 pose generator. 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 dibuat harus dapat mencantumkan data yang dibuat di Spanner.
5. Melakukan bootstrap pada 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 prompt, dan menampilkan string yang dienkode Base64 sebagai gambar ke antarmuka pengguna.
- Sekarang, Anda sudah terbiasa dengan struktur proyek Spring Boot dan kepentingannya. Jadi, Anda akan langsung melanjutkan ke cloning repo ke mesin Cloud Shell dengan menjalankan perintah di bawah ini di terminal Cloud Shell:
git clone https://github.com/AbiramiSukumaran/genai-posegen
Seharusnya project genai-posegen sudah dibuat 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, implementasi logika bisnis, dan juga pemanggilan Imagen API AI generatif. Class ini berinteraksi dengan template Thymeleaf yang menangani integrasi data ke antarmuka pengguna. Ada 3 metode layanan di class ini - 1) untuk mendapatkan input prompt 2) untuk memproses permintaan dan memanggil Imagen API dan 3) untuk memproses respons imagen.
Prompt dan Yoga adalah class POJO yang berisi kolom, pengambil, dan penyetel untuk masing-masing berinteraksi dengan Imagen API dan Spanner API server data.
File HTML Index dan getImage dalam folder template berisi template untuk antarmuka pengguna dan keduanya memiliki dependensi skrip JS dan css di folder masing-masing.
Integrasi Vertex AI Imagen API Untuk kasus penggunaan pembuatan gambar, kami menggunakan Imagen API dari Vertex AI dalam format berikut:
https://<<region>>- aiplatform.googleapis.com/v1/projects/<<your-project-id>>/locations/<<region>>/publishers/google/models/imagegeneration:predict
Anda dapat membaca informasi selengkapnya tentang kemampuan Imagen di sini. Metode ini akan menampilkan respons dalam format string yang dienkode Base64. Untuk mengonversinya menjadi gambar, kami telah menggunakan metode javascript setattribute (dalam file getImage.js) pada objek gambar sebagai berikut di file getImage.HTML:
poseImage.setAttribute('src', "data:image/jpg;base64," + baseStr64);
Otorisasi Imagen API mengharuskan Anda mengaktifkan autentikasi token pemilik untuk mengaksesnya. Dalam kasus ini, saya menggunakan pendekatan JSON Kredensial Default Aplikasi. Anda dapat menerapkannya dengan menjalankan perintah di bawah ini dari terminal Cloud Shell dan mengikuti petunjuk yang mengikuti di terminal:
gcloud auth application-default login
Masukkan "Y" untuk melakukan autentikasi dengan akun Anda. Izinkan akses dan salin kode otorisasi yang ditampilkan di jendela pop-up. Segera setelah Anda melakukannya, Anda akan mendapatkan kredensial default aplikasi di 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 dalam aplikasi di 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 frontend dan menambahkan desain elegan ke antarmuka pengguna. Fungsi ini mirip dengan HTML tetapi mendukung lebih banyak atribut agar dapat digunakan dengan data yang dirender. Index.html berisi komponen desain halaman landing dan memungkinkan pengguna memilih topik dan menambahkan perintah pengganti untuk menghasilkan gambar yang diinginkan.
6. Mem-build dan men-deploy
Setelah meng-clone kode dan mengganti nilai placeholder yang berlaku untuk project, region, dan kredensial autentikasi Anda, mari kita lanjutkan ke pembuatan dan deployment aplikasi. Buka folder project di terminal Cloud Shell menggunakan perintah, build, lalu deploy untuk diuji secara lokal di mesin Cloud Shell dengan 3 perintah berikut satu per satu:
cd genai-posegen
./mvnw package
./mvnw spring-boot:run
Men-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 yang 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 dibuat 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, dan mengklik tombol hapus untuk menghapus layanan.
9. Selamat
Dalam blog ini, kami dapat menghadirkan aplikasi Spring Boot stack lengkap yang menyimpan dan menangani data di Cloud Spanner, untuk membuat pose menggunakan Imagen API dari 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 belum pernah kami lakukan? Konten ini tersedia jika Anda ingin berkontribusi. Anda dapat mengimplementasikan 2 Java Cloud Functions untuk melakukan 2 metode yang dapat ditemukan di file getimage.html: metode simpan pose ke database dan upload metode gambar. Lihat dokumentasi Imagen on Vertex AI untuk mempelajari model tersebut lebih lanjut.