ข้อมูลไปยัง 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 เป็น API บริการ
• แอปพลิเคชัน Java Spring Boot สำหรับกรณีการใช้งานการสร้างอิมเมจโดยใช้ Imagen
• อินเทอร์เฟซผู้ใช้แบบอินเทอร์แอกทีฟสำหรับอินพุตและการตอบกลับ

2. ข้อกำหนด

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

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

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

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

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

gcloud config set project <YOUR_PROJECT_ID>

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

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

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

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 เพื่อให้เราสร้างแอปพลิเคชันสำหรับรองเท้าสปริงกัน

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 Console

1. เปิดเครื่องแอป Spring Boot หากต้องการเปิดเครื่องแอปนี้ตั้งแต่ต้น ให้ติดตามบล็อกนี้ หากต้องการโคลนจากที่เก็บและนำไปใช้งานจริง เพียงเรียกใช้คำสั่งด้านล่างในเทอร์มินัล 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) แล้ว ต่อไปเราจะสร้างแอปพลิเคชันไคลเอ็นต์ที่เรียกใช้ข้อมูลประแจ เรียก IMAGEN API ด้วยพรอมต์และแสดงผลสตริงที่เข้ารหัส Base64 เป็นรูปภาพไปยังอินเทอร์เฟซผู้ใช้

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

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

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

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

Prompt และ Yoga คือคลาส POJO ที่มีช่อง, Getters และ setters ที่จะเชื่อมต่อกับ Imagen API และ Spanner Data Server API ตามลำดับ

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

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

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

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