Spanner 및 Vertex AI Imagen API를 사용하여 데이터에서 생성형 AI로

1. 소개

이 Codelab에서는 Java, Spring Boot, Cloud Spanner 데이터베이스, Vertex AI Imagen API를 사용하여 AI 기반 포즈 생성기를 빌드합니다. 사용자가 프롬프트를 입력하면 애플리케이션이 이 프롬프트를 기반으로 포즈를 생성합니다. REST API로 노출된 Spanner 데이터베이스의 데이터도 사용합니다. 재미있고 교육적인 방법으로 Google Cloud에서 Spring Boot의 생성형 AI 기능을 시연할 수 있습니다.

사용되는 서비스 목록은 다음과 같습니다.

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

대략적인 흐름 다이어그램

빌드할 항목

생성할 항목:

• Spanner Data as a Service API를 위한 Java Spring Boot 애플리케이션
• Imagen을 사용한 이미지 생성 사용 사례를 위한 Java Spring Boot 애플리케이션
• 프롬프트 입력 및 응답을 위한 대화형 사용자 인터페이스

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. bq가 사전 로드되어 제공되는 Google Cloud에서 실행되는 명령줄 환경인 Cloud Shell을 사용합니다. gcloud 명령어 및 사용법은 문서를 참조하세요.

Cloud 콘솔에서 오른쪽 상단에 있는 Cloud Shell 활성화를 클릭합니다.

프로젝트가 설정되지 않은 경우 다음 명령어를 사용하여 설정합니다.

gcloud config set project <YOUR_PROJECT_ID>

5. 시작하려면 활성 Google Cloud 프로젝트가 있는 Cloud Spanner 페이지로 이동하세요.

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

마지막 단계의 결과로 데이터베이스와 테이블이 생성됩니다. 이제 Spring Boot 애플리케이션을 빌드할 수 있도록 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. Spring Boot 및 Spanner로 포즈 데이터를 위한 REST API 빌드

Spring Boot 및 Google Cloud 콘솔에 익숙해지려면 이 블로그를 확인하세요.

1. Spring Boot 앱 부트스트랩 이 앱을 처음부터 부트스트랩하려면 이 블로그를 팔로우하세요. 저장소에서 클론하고 실행하려면 Cloud Shell 터미널에서 아래 명령어를 실행하기만 하면 됩니다.

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

이렇게 하면 Cloud Shell 머신에 spanner-springb 프로젝트가 생성됩니다. 앱의 구성요소를 이해하려면 블로그를 살펴보세요.

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

이렇게 하면 Cloud Shell 머신에 genai-posegen 프로젝트가 생성됩니다. 클론된 프로젝트 구조는 Cloud Shell 편집기에 다음과 같이 표시됩니다.

PromptController Java 클래스에는 데이터베이스 서비스 호출, 비즈니스 로직 구현, Imagen의 생성형 AI API 호출도 포함되어 있습니다. 이 클래스는 사용자 인터페이스에 대한 데이터 통합을 처리하는 Thymeleaf 템플릿과 상호작용합니다. 이 클래스에는 1) 프롬프트 입력을 가져오기 위한 서비스 메서드 2) 요청을 처리하고 Imagen API를 호출하는 메서드, 3) imagen 응답을 처리하는 세 가지 서비스 메서드가 있습니다.

Prompt와 Yoga는 Imagen API 및 Spanner 데이터 서버 API와 각각 인터페이스하기 위한 필드, getter, setter를 포함하는 POJO 클래스입니다.

templates 폴더의 Index and getImage html 파일에는 사용자 인터페이스용 템플릿이 포함되어 있으며 각 폴더에 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로 인코딩된 문자열 형식으로 응답을 반환합니다. 이를 이미지로 변환하기 위해 getImage.HTML 파일에서 다음과 같이 이미지 객체에 getImage.js 파일의 javascript setattribute 메서드를 사용했습니다.

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

승인: Imagen API에 액세스하려면 Bearer 토큰 인증을 사용 설정해야 합니다. 여기서는 애플리케이션 기본 사용자 인증 정보 JSON 접근 방식을 사용했습니다. Cloud Shell 터미널에서 아래 명령어를 실행하고 터미널에서 다음 안내에 따라 구현할 수 있습니다.

gcloud auth application-default login

'Y'를 입력합니다. 계정을 사용하여 인증합니다. 액세스를 허용하고 팝업에 표시된 승인 코드를 복사합니다. 이 작업을 수행하는 즉시 JSON 파일에서 /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json과 비슷한 위치에 애플리케이션 기본 사용자 인증 정보를 가져올 수 있습니다.

cat 명령어 (cat /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json)를 실행하여 파일을 다운로드하거나 JSON 파일의 콘텐츠를 복사하고, 애플리케이션에서 PromptController.java 클래스의 callImagen() 메서드에 사용합니다. 인증에 대한 자세한 내용은 여기를 참조하세요.

사용자 인터페이스: Thymeleaf를 템플릿 엔진으로 사용하여 데이터를 파싱하여 프런트엔드 템플릿 파일에 렌더링하고 사용자 인터페이스에 우아한 디자인을 추가해 왔습니다. HTML과 비슷하지만 렌더링된 데이터에 사용하기 위해 더 많은 속성을 지원합니다. index.html에는 방문 페이지 디자인 구성요소가 포함되어 있으며, 사용자는 이를 통해 주제를 선택하고 원하는 이미지를 생성하기 위한 재정의 프롬프트를 추가할 수 있습니다.

6. 빌드 및 배포

코드를 클론하고 프로젝트, 리전, 사용자 인증 정보에 해당하는 자리표시자의 값을 바꿨으므로 이제 앱을 빌드하고 배포해 보겠습니다. 명령어와 빌드를 사용하여 Cloud Shell 터미널에서 프로젝트 폴더로 이동한 후 다음 명령어 3개를 사용하여 Cloud Shell 머신에서 로컬로 테스트를 위해 배포합니다.

cd genai-posegen

./mvnw package

./mvnw spring-boot:run

클라우드에서 사용할 수 있도록 Cloud Run에 앱을 배포합니다. 이렇게 하려면 프로젝트 폴더의 Cloud Shell 터미널에서 다음 명령어를 실행합니다.

gcloud run deploy –source .

필수 매개변수를 전달하고 앱이 배포되었는지 확인합니다.

7. 데모

앱이 배포되면 터미널에 서비스 URL이 표시됩니다. 링크를 클릭하고 Google Cloud에서 서버리스로 실행되는 포즈 이미지 생성 앱을 확인하세요.

8. 삭제

이 게시물에서 사용한 리소스 비용이 Google Cloud 계정에 청구되지 않도록 하려면 다음 단계를 따르세요.

1. Google Cloud 콘솔에서 리소스 관리 페이지로 이동합니다.
2. 프로젝트 목록에서 삭제하려는 프로젝트를 선택한 후 '삭제'를 클릭합니다.
3. 대화상자에서 프로젝트 ID를 입력한 후 '종료'를 클릭하여 프로젝트를 삭제합니다.
4. 프로젝트를 삭제하지 않으려면 이 프로젝트용으로 방금 만든 인스턴스로 이동하여 Spanner 인스턴스를 삭제하고 인스턴스 개요 페이지 오른쪽 상단의 인스턴스 삭제 버튼을 클릭하세요.
5. Cloud Run 서비스 페이지로 이동하여 이 프로젝트에서 만든 서비스를 선택하고 삭제 버튼을 클릭하여 서비스를 삭제할 수도 있습니다.

9. 축하합니다

이 블로그에서는 Cloud Spanner에서 데이터를 저장하고 처리하는 풀 스택 Spring Boot 애플리케이션을 가져와 Cloud Run에 배포된 대화형 클라이언트 애플리케이션에서 Google Cloud Vertex AI의 Imagen API를 사용하여 포즈를 생성할 수 있었습니다. 이 블로그의 아키텍처 다이어그램 섹션에서 볼 수 있지만 전혀 몰랐던 Cloud Functions (Java) 구성 요소가 보이시나요? 기여를 원한다면 그만두세요. 2개의 Java Cloud Functions를 구현하여 getimage.html 파일에 있는 두 가지 메서드인 데이터베이스에 포즈 저장과 이미지 업로드 메서드를 실행할 수 있습니다. 모델에 대한 자세한 내용은 Vertex AI의 Imagen 문서를 참조하세요.