ข้อมูลไปยัง Generative AI ด้วย Spanner และ Vertex AI Imagen API

1. บทนำ

ใน Codelab นี้ คุณจะได้สร้างเครื่องมือสร้างท่าทางที่ทำงานด้วยระบบ AI โดยใช้ Java, Spring Boot, ฐานข้อมูล Cloud Spanner และ Vertex AI Imagen API ผู้ใช้จะป้อนพรอมต์ และแอปพลิเคชันจะสร้างท่าทางตามพรอมต์นั้น นอกจากนี้ เรายังใช้ข้อมูลจากฐานข้อมูล Spanner ที่แสดงเป็น REST API ด้วย ซึ่งเป็นวิธีที่สนุกและให้ความรู้ในการสาธิตความสามารถของ Generative AI ด้วย Spring Boot ใน Google Cloud

รายการบริการที่ใช้มีดังนี้

1. Cloud Spanner
2. Vertex AI Imagen API
3. Cloud Run

แผนภาพขั้นตอนการทำงานระดับสูง

สิ่งที่คุณจะสร้าง

คุณจะสร้าง

• แอปพลิเคชัน Java Spring Boot สำหรับ Spanner Data as a Service API
• แอปพลิเคชัน Java Spring Boot สำหรับกรณีการใช้งานการสร้างรูปภาพโดยใช้ Imagen
• อินเทอร์เฟซผู้ใช้แบบอินเทอร์แอกทีฟสำหรับอินพุตพรอมต์และการตอบกลับ

2. ข้อกำหนด

• เบราว์เซอร์ เช่น Chrome หรือ Firefox
• โปรเจ็กต์ Google Cloud ที่เปิดใช้การเรียกเก็บเงิน

ก่อนเริ่มต้น

1. ในคอนโซล Google Cloud ให้เลือกหรือสร้างโปรเจ็กต์ Google Cloud ในหน้าตัวเลือกโปรเจ็กต์
2. ตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ Cloud แล้ว ดูวิธีตรวจสอบว่าโปรเจ็กต์เปิดใช้การเรียกเก็บเงินแล้วหรือไม่
3. ตรวจสอบว่า API ที่จำเป็นทั้งหมด (Cloud Spanner API, Vertex AI API, Cloud Run API, Cloud Functions API) เปิดใช้แล้ว
4. คุณจะใช้ Cloud Shell ซึ่งเป็นสภาพแวดล้อมบรรทัดคำสั่งที่ทำงานใน Google Cloud และมาพร้อมกับ bq ที่โหลดไว้ล่วงหน้า ดูคำสั่งและการใช้งาน gcloud ในเอกสารประกอบ

จาก Cloud Console ให้คลิกเปิดใช้งาน Cloud Shell ที่มุมขวาบน

หากไม่ได้ตั้งค่าโปรเจ็กต์ ให้ใช้คำสั่งต่อไปนี้เพื่อตั้งค่า

gcloud config set project <YOUR_PROJECT_ID>

5. ไปที่หน้า Cloud Spanner ด้วยโปรเจ็กต์ Google Cloud ที่ใช้งานอยู่เพื่อเริ่มต้นใช้งาน

3. การเตรียมข้อมูลด้วย Spanner

ก่อนสร้างแอป ให้ตั้งค่าฐานข้อมูลให้เสร็จสมบูรณ์โดยสร้างอินสแตนซ์ ฐานข้อมูล และตาราง Cloud Spanner คุณสามารถอ่านรายละเอียดเพิ่มเติมเกี่ยวกับฟีเจอร์ DDL, DML และอื่นๆ ของ Cloud Spanner ได้ในบล็อกนี้ คุณสามารถทำตามขั้นตอนด้านล่างเพื่อสร้างออบเจ็กต์ฐานข้อมูลที่จำเป็นสำหรับโปรเจ็กต์นี้

1. สร้างอินสแตนซ์โดยคลิกสร้างอินสแตนซ์ในหน้าอินสแตนซ์
2. ป้อนรายละเอียดตามที่แสดงในรูปภาพต่อไปนี้ แล้วคลิกสร้าง

3. เมื่อสร้างแล้ว ให้คลิกสร้างฐานข้อมูลจากหน้าภาพรวมของอินสแตนซ์
4. ระบุชื่อฐานข้อมูลเป็น "first-spanner-db" และป้อน DDL ต่อไปนี้ในส่วนเทมเพลต DDL แล้วคลิกส่ง

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

ควรสร้างฐานข้อมูลและตารางเป็นผลลัพธ์ของขั้นตอนสุดท้าย ตอนนี้มาแทรกแถว 2-3 แถวลงในตาราง Yoga_Poses เพื่อให้เราสร้างแอปพลิเคชัน Spring Boot ได้

5. คลิก Spanner Studio ในแผงฐานข้อมูลทางด้านซ้าย แล้วเปิดแท็บเครื่องมือแก้ไขการค้นหาใหม่ตามที่แสดงในรูปภาพด้านล่าง

6. เรียกใช้การค้นหา 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');

ตอนนี้เรามีอินสแตนซ์ ฐานข้อมูล ตาราง และข้อมูล Spanner ที่สร้างขึ้นและพร้อมใช้งานสำหรับแอปพลิเคชันแล้ว

4. สร้าง REST API ด้วย Spring Boot และ Spanner สำหรับข้อมูลท่าทาง

หากต้องการทำความคุ้นเคยกับ Spring Boot และคอนโซล Google Cloud โปรดดูบล็อกนี้

1. เริ่มต้นแอป Spring Boot หากต้องการเริ่มต้นแอปนี้ตั้งแต่ต้น ให้ทำตามบล็อกนี้ หากต้องการโคลนจาก repo และเริ่มดำเนินการ ให้เรียกใช้คำสั่งด้านล่างในเทอร์มินัล Cloud Shell

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

ซึ่งควรสร้างโปรเจ็กต์ spanner-springb ในเครื่อง Cloud Shell หากต้องการทำความเข้าใจคอมโพเนนต์ของแอป โปรดอ่านบล็อก

2. มาสร้างและเรียกใช้แอปกัน โดยเรียกใช้คำสั่งต่อไปนี้จากเทอร์มินัล Cloud Shell

cd spanner-springb

./mvnw package

./mvnw spring-boot:run

3. ทำให้แอปใช้งานได้ใน Cloud Run เพื่อให้แอปตัวสร้างท่าทางพร้อมใช้งาน โดยเรียกใช้คำสั่งต่อไปนี้จากเทอร์มินัล Cloud Shell

gcloud run deploy –source .

ส่งพารามิเตอร์ที่จำเป็นและตรวจสอบว่าได้ติดตั้งใช้งานแอปแล้ว URL ของบริการที่สร้างขึ้นควรแสดงข้อมูลที่สร้างใน Spanner ได้

5. เริ่มต้นใช้งานแอปเครื่องมือสร้างท่าทางด้วย Spring Boot, Spanner และ Imagen

ตอนนี้เราได้สร้างส่วนบนสุดของแผนภาพโฟลว์เสร็จแล้ว นั่นคือการทำให้ข้อมูล Spanner พร้อมใช้งานเป็นบริการ (REST API) ตอนนี้มาสร้างแอปพลิเคชันไคลเอ็นต์ที่จะเรียกใช้ข้อมูล Spanner, เรียกใช้ IMAGEN API ด้วยพรอมต์ และแสดงผลสตริงที่เข้ารหัส Base64 เป็นรูปภาพไปยังอินเทอร์เฟซผู้ใช้กัน

1. ตอนนี้คุณคงคุ้นเคยกับโครงสร้างโปรเจ็กต์ Spring Boot และความสำคัญของโครงสร้างดังกล่าวแล้ว ดังนั้นเราจะข้ามไปที่การโคลนที่เก็บลงในเครื่อง Cloud Shell อย่างรวดเร็วโดยการเรียกใช้คำสั่งด้านล่างในเทอร์มินัล Cloud Shell

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

ซึ่งควรสร้างโปรเจ็กต์ genai-posegen ในเครื่อง Cloud Shell โครงสร้างโปรเจ็กต์ที่โคลนจะปรากฏในเครื่องมือแก้ไข Cloud Shell ดังนี้

คลาส Java PromptController มีการเรียกใช้บริการฐานข้อมูล การใช้งานตรรกะทางธุรกิจ และการเรียกใช้ Generative AI API ของ Imagen ด้วย คลาสนี้โต้ตอบกับเทมเพลต Thymeleaf ที่ดูแลการผสานรวมข้อมูลกับอินเทอร์เฟซผู้ใช้ คลาสนี้มีเมธอดบริการ 3 รายการ ได้แก่ 1) สำหรับรับอินพุตพรอมต์ 2) สำหรับประมวลผลคำขอและเรียกใช้ Imagen API และ 3) สำหรับประมวลผลการตอบกลับของ Imagen

Prompt และ Yoga เป็นคลาส POJO ที่มีฟิลด์ Getter และ Setter สำหรับเชื่อมต่อกับ Imagen API และ Spanner Data Server API ตามลำดับ

ไฟล์ HTML index และ getImage ในโฟลเดอร์เทมเพลตมีเทมเพลตสำหรับอินเทอร์เฟซผู้ใช้ และมีทรัพยากร Dependency ของสคริปต์ JS และ CSS ในโฟลเดอร์ที่เกี่ยวข้อง

การผสานรวม Vertex AI Imagen API สำหรับกรณีการใช้งานการสร้างรูปภาพ เราใช้ Vertex AI Imagen API ในรูปแบบต่อไปนี้

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

อ่านเพิ่มเติมเกี่ยวกับความสามารถของ Imagen ได้ที่นี่ โดยจะแสดงผลการตอบกลับในรูปแบบสตริงที่เข้ารหัส Base64 หากต้องการแปลงเป็นรูปภาพ เราได้ใช้วิธี setattribute ของ JavaScript (ในไฟล์ getImage.js) กับออบเจ็กต์รูปภาพดังนี้ในไฟล์ getImage.HTML

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

การให้สิทธิ์ Imagen API กำหนดให้คุณต้องเปิดใช้การตรวจสอบสิทธิ์โทเค็นผู้ถือเพื่อเข้าถึง ในกรณีของเรา ฉันใช้วิธี JSON ของข้อมูลรับรองเริ่มต้นของแอปพลิเคชัน คุณสามารถติดตั้งใช้งานได้โดยเรียกใช้คำสั่งด้านล่างจากเทอร์มินัล Cloud Shell และทำตามวิธีการที่ปรากฏในเทอร์มินัล

gcloud auth application-default login

ป้อน "Y" เพื่อตรวจสอบสิทธิ์ด้วยบัญชี อนุญาตการเข้าถึงและคัดลอกรหัสการให้สิทธิ์ที่แสดงในป๊อปอัป ทันทีที่ดำเนินการดังกล่าว คุณจะได้รับข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชันในไฟล์ JSON ที่บันทึกไว้ในตำแหน่งที่คล้ายกับ /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json

ดาวน์โหลดไฟล์หรือคัดลอกเนื้อหาของไฟล์ JSON โดยเรียกใช้คำสั่ง cat (cat /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json) แล้วใช้ในแอปพลิเคชันในเมธอด callImagen() ของคลาส PromptController.java อ่านเพิ่มเติมเกี่ยวกับการตรวจสอบสิทธิ์ได้ที่นี่

อินเทอร์เฟซผู้ใช้ เราใช้ Thymeleaf เป็นเครื่องมือเทมเพลตเพื่อแยกวิเคราะห์และแสดงข้อมูลไปยังไฟล์เทมเพลตฟรอนท์เอนด์ และเพื่อเพิ่มการออกแบบที่สวยงามให้กับอินเทอร์เฟซผู้ใช้ โดยมีลักษณะคล้ายกับ HTML แต่รองรับแอตทริบิวต์เพิ่มเติมเพื่อใช้กับข้อมูลที่แสดง ไฟล์ index.html มีคอมโพเนนต์การออกแบบหน้า Landing Page และช่วยให้ผู้ใช้เลือกหัวข้อและเพิ่มพรอมต์ที่ลบล้างเพื่อสร้างรูปภาพที่ต้องการได้

6. สร้างและทำให้ใช้งานได้

ตอนนี้คุณได้โคลนโค้ดแล้ว และแทนที่ค่าสำหรับตัวยึดตำแหน่งตามที่เกี่ยวข้องกับโปรเจ็กต์ ภูมิภาค และข้อมูลเข้าสู่ระบบการตรวจสอบสิทธิ์แล้ว มาต่อกันที่การสร้างและทำให้ใช้งานได้แอป ไปที่โฟลเดอร์โปรเจ็กต์ในเทอร์มินัล Cloud Shell โดยใช้คำสั่ง build แล้วทำให้ใช้งานได้เพื่อทดสอบในเครื่อง Cloud Shell ในเครื่องด้วยคำสั่ง 3 คำสั่งต่อไปนี้ทีละคำสั่ง

cd genai-posegen

./mvnw package

./mvnw spring-boot:run

ทำให้แอปใช้งานได้ใน Cloud Run เพื่อให้พร้อมใช้งานในระบบคลาวด์ โดยให้เรียกใช้คำสั่งต่อไปนี้จากเทอร์มินัล Cloud Shell ภายในโฟลเดอร์โปรเจ็กต์

gcloud run deploy –source .

ส่งพารามิเตอร์ที่จำเป็นและตรวจสอบว่าได้ติดตั้งใช้งานแอปแล้ว

7. สาธิต

เมื่อแอปได้รับการติดตั้งใช้งานแล้ว คุณควรเห็น URL ของบริการในเทอร์มินัล คลิกลิงก์และดูแอปสร้างรูปภาพท่าทางที่ทำงานบนเซิร์ฟเวอร์ของ Google Cloud แบบ Serverless!

8. ล้างข้อมูล

โปรดทำตามขั้นตอนต่อไปนี้เพื่อเลี่ยงไม่ให้เกิดการเรียกเก็บเงินกับบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ในโพสต์นี้

1. ในคอนโซล Google Cloud ให้ไปที่หน้าจัดการทรัพยากร
2. ในรายการโปรเจ็กต์ ให้เลือกโปรเจ็กต์ที่ต้องการลบ แล้วคลิกลบ
3. ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์ แล้วคลิกปิดเพื่อลบโปรเจ็กต์
4. หากไม่ต้องการลบโปรเจ็กต์ ให้ลบอินสแตนซ์ Spanner โดยไปที่อินสแตนซ์ที่คุณเพิ่งสร้างสำหรับโปรเจ็กต์นี้ แล้วคลิกปุ่มลบอินสแตนซ์ที่มุมขวาบนของหน้าภาพรวมอินสแตนซ์
5. นอกจากนี้ คุณยังไปที่หน้าบริการ Cloud Run แล้วเลือกบริการที่สร้างในโปรเจ็กต์นี้ แล้วคลิกปุ่มลบเพื่อลบบริการได้ด้วย

9. ขอแสดงความยินดี

ในบล็อกนี้ เราได้นำแอปพลิเคชัน Spring Boot แบบฟูลสแต็กที่จัดเก็บและจัดการข้อมูลใน Cloud Spanner มาสร้างท่าทางโดยใช้ Imagen API ของ Vertex AI ใน Google Cloud ในแอปพลิเคชันไคลเอ็นต์แบบอินเทอร์แอกทีฟที่ติดตั้งใช้งานใน Cloud Run ในส่วนแผนภาพสถาปัตยกรรมของบล็อกนี้ คุณเห็นคอมโพเนนต์ Cloud Functions (Java) ที่เราไม่เคยได้ทำใช่ไหม คุณสามารถรับงานนี้ได้หากต้องการร่วมแปล คุณสามารถใช้ Cloud Functions 2 รายการใน Java เพื่อดำเนินการ 2 วิธีที่อยู่ในไฟล์ getimage.html ได้ ได้แก่ วิธีบันทึกท่าทางลงในฐานข้อมูลและวิธีอัปโหลดรูปภาพ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลได้ในเอกสารประกอบของ Imagen ใน Vertex AI