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의 기능을 보여주는 재미있고 교육적인 방법입니다.

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

Cloud Spanner
Vertex AI Imagen API
Cloud Run

개략적인 흐름 다이어그램

빌드할 항목

다음과 같은 항목을 만듭니다.

서비스로서의 Spanner 데이터 API용 Java Spring Boot 애플리케이션
Imagen을 사용하는 이미지 생성 사용 사례를 위한 Java Spring Boot 애플리케이션
프롬프트 입력 및 응답을 위한 대화형 사용자 인터페이스

2. 요구사항

브라우저(Chrome 또는 Firefox 등)
결제가 사용 설정된 Google Cloud 프로젝트

시작하기 전에

Google Cloud 콘솔의 프로젝트 선택기 페이지에서 Google Cloud 프로젝트를 선택하거나 만듭니다.
Cloud 프로젝트에 결제가 사용 설정되어 있는지 확인합니다. 프로젝트에 결제가 사용 설정되어 있는지 확인하는 방법을 알아보세요.
필요한 모든 API (Cloud Spanner API, Vertex AI API, Cloud Run API, Cloud Functions API)가 사용 설정되어 있는지 확인합니다.
bq가 미리 로드되어 제공되는 Google Cloud에서 실행되는 명령줄 환경인 Cloud Shell을 사용합니다. gcloud 명령어 및 사용법은 문서를 참조하세요.

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

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

gcloud config set project <YOUR_PROJECT_ID>

활성 Google Cloud 프로젝트로 Cloud Spanner 페이지로 이동하여 시작합니다.

3. Spanner로 데이터 준비

앱을 만들기 전에 Cloud Spanner 인스턴스, 데이터베이스, 테이블을 만들어 데이터베이스 설정을 완료해 보겠습니다. 이 블로그에서 Cloud Spanner 기능, DDL, DML 등에 대해 자세히 알아볼 수 있습니다. 아래 단계에 따라 이 프로젝트에 필요한 데이터베이스 객체를 만들 수 있습니다.

인스턴스 페이지에서 인스턴스 만들기를 클릭하여 인스턴스를 만듭니다.
다음 이미지와 같이 세부정보를 입력하고 '만들기'를 클릭합니다.

생성된 후 인스턴스 개요 페이지에서 데이터베이스 만들기를 클릭합니다.
데이터베이스 이름을 '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 테이블에 몇 개의 행을 삽입해 보겠습니다.

왼쪽의 데이터베이스 창에서 Spanner 스튜디오를 클릭하고 아래 이미지와 같이 새 쿼리 편집기 탭을 엽니다.

다음 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 콘솔에 대해 자세히 알아보려면 이 블로그를 확인하세요.

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

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

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

앱을 빌드하고 실행해 보겠습니다. 이렇게 하려면 Cloud Shell 터미널에서 다음 명령어를 실행합니다.

cd spanner-springb

./mvnw package

./mvnw spring-boot:run

포즈 생성기 앱에서 사용할 수 있도록 Cloud Run에 앱을 배포합니다. 이렇게 하려면 Cloud Shell 터미널에서 다음 명령어를 실행합니다.

gcloud run deploy –source .

필수 매개변수를 전달하고 앱이 배포되었는지 확인합니다. 생성된 서비스 URL은 Spanner에서 생성된 데이터를 나열할 수 있어야 합니다.

5. Spring Boot, Spanner, Imagen으로 포즈 생성기 앱 부트스트랩

이제 흐름 다이어그램의 상단 부분, 즉 Spanner 데이터를 서비스 (REST API)로 제공하는 작업을 완료했습니다. 이제 스패너 데이터를 호출하고, 프롬프트로 IMAGEN API를 호출하고, Base64 인코딩된 문자열을 이미지로 사용자 인터페이스에 반환하는 클라이언트 애플리케이션을 만들어 보겠습니다.

이제 Spring Boot 프로젝트 구조와 그 중요성에 대해 잘 알고 있을 것입니다. 따라서 Cloud Shell 터미널에서 아래 명령어를 실행하여 저장소를 Cloud Shell 머신에 바로 클론합니다.

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

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

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

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

템플릿 폴더의 Index 및 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 파일에서 다음과 같이 이미지 객체에 JavaScript setattribute 메서드 (getImage.js 파일)를 사용했습니다.

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

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

gcloud auth application-default login

'Y'를 입력하여 계정으로 인증합니다. 액세스를 허용하고 팝업에 표시된 승인 코드를 복사합니다. 이렇게 하면 /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json과 같은 위치에 저장된 JSON 파일에 애플리케이션 기본 사용자 인증 정보가 표시됩니다.

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

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

6. 빌드 및 배포

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

cd genai-posegen

./mvnw package

./mvnw spring-boot:run

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

gcloud run deploy –source .

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

7. 데모

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

8. 삭제

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

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

9. 축하합니다

이 블로그에서는 Cloud Spanner에 데이터를 저장하고 처리하는 전체 스택 Spring Boot 애플리케이션을 사용하여 Cloud Run에 배포된 대화형 클라이언트 애플리케이션에서 Google Cloud Vertex AI의 Imagen API를 사용하여 포즈를 생성했습니다. 이 블로그의 아키텍처 다이어그램 섹션에 Cloud Functions (Java) 구성요소가 표시되는데, 이 구성요소는 사용하지 않았습니다. 참여하고 싶다면 이 문제를 해결해 보세요. Java Cloud Functions 2개를 구현하여 getimage.html 파일에 있는 두 가지 메서드(포즈를 데이터베이스에 저장하는 메서드와 이미지를 업로드하는 메서드)를 실행할 수 있습니다. 모델에 대해 자세히 알아보려면 Vertex AI의 Imagen 문서를 확인하세요.