이 Codelab 정보
1. 소개
간단한 텍스트 설명을 몇 초 만에 생생하고 디테일한 이미지로 변환할 수 있다고 상상해 보세요. 이는 시각적 콘텐츠를 만들고 상호작용하는 방식을 재편하는 빠르게 진화하는 분야인 생성형 미디어의 힘입니다. Vertex AI의 Google Imagen 3과 같은 모델은 애플리케이션 개발자에게 최첨단 생성형 AI 기능을 제공하고 있습니다.
Imagen 3은 Google에서 지금까지 개발한 텍스트 이미지 변환 모델 중 가장 높은 품질을 자랑합니다. 놀라운 디테일의 이미지를 만들 수 있습니다. 따라서 개발자는 상상력을 고품질 시각적 애셋으로 변환하는 차세대 AI 제품을 빌드할 때 더 많은 제어 권한을 갖게 됩니다. Vertex AI의 Imagen에 대해 자세히 알아보세요.
이 Codelab에서는 Google 생성형 AI SDK를 사용하여 Imagen의 기능을 활용하는 방법을 안내합니다. 텍스트 프롬프트에서 멋진 이미지를 생성하는 방법을 살펴보고 Python UI 프레임워크인 Mesop을 사용하여 이 기능을 웹 애플리케이션에 통합하는 방법도 알아봅니다.
기본 요건
- 결제 및 Vertex AI API가 사용 설정된 Google Cloud 프로젝트 프로젝트 및 개발 환경 설정에 대해 자세히 알아보세요.
학습할 내용
- Python용 Google Gen AI SDK를 사용하여 Imagen 3과 상호작용하는 방법
- 텍스트 프롬프트에서 이미지를 생성하는 방법
- Mesop 앱을 빌드하고 Cloud Shell에서 실행하는 방법
필요한 항목
- Python에 대한 기본적인 이해
- Cloud Shell 터미널에서 명령어 실행 환경
- Cloud Shell에 액세스할 수 있는 컴퓨터
2. 환경 설정 및 종속 항목 설치
- Cloud Shell 편집기를 엽니다.
- 오른쪽 상단의 터미널 열기 버튼을 클릭합니다.
- 터미널에 다음 명령어를 입력하여 새 폴더를 만듭니다.
mkdir my-imagen-app
- 디렉터리를 새 폴더로 변경합니다.
cd my-imagen-app
- Python 3에서 가상 환경을 만듭니다.
python3 -m venv myenv
- 가상 환경을 활성화합니다.
source myenv/bin/activate
- Mesop를 설치합니다.
pip3 install mesop
- Python용 Google Gen AI SDK를 설치합니다.
pip install google-genai
- Python 파일을 만듭니다.
touch main.py
3. 앱 설정
Mesop 앱을 실행하는 데 필요한 모든 코드는 main.py에 있습니다. 다음 각 단계에서 Cloud Shell 편집기의 이 파일에 코드를 차례로 복사하여 붙여넣습니다.
라이브러리 가져오기
import base64
import mesop as me
from google import genai
from google.genai import types
Google Cloud 프로젝트 정보 설정 및 클라이언트 만들기
- 프로젝트 ID를 설정합니다.
PROJECT_ID = "[your-project-id]"
이 코드 줄을 복사할 때 [your-project-id]를 Google Cloud 프로젝트의 이름으로 바꿉니다.
- 클라이언트를 만듭니다.
client = genai.Client(vertexai=True, project=PROJECT_ID, location="us-central1")
이미지 생성 모델 로드
imagen_model = "imagen-3.0-generate-002"
상태 관리
상태 관리를 정의하면 사용자 여정 전반에서 정보를 저장할 수 있습니다.
@me.stateclass
class State:
input: str = ""
enhanced_prompt: str = ""
img_data: str = "https://storage.googleapis.com/cloud-samples-data/generative-ai/image/flowers.png"
input: 사용자가 이미지 생성에 사용할 입력을 제공합니다.enhanced_prompt:imagen-3.0-generate-002모델은 제공된 프롬프트를 개선하는 옵션을 제공합니다. 고품질 이미지를 생성하는 데 도움이 되도록 원래 프롬프트에서 새로운 상세 프롬프트가 생성되며 이 변수로 반환됩니다.img_data: Imagen 3으로 생성된 이미지의 Cloud Storage 위치 또는 이미지 바이트입니다.
4. 도우미 함수 정의
함수 로드
이 코드는 애플리케이션이 로드될 때 실행됩니다. 앱의 모드를 시스템 색상으로 설정합니다.
def load(e: me.LoadEvent):
me.set_theme_mode("system")
흐리게 처리 함수
이 함수는 사용자 입력을 상태 변수에 저장합니다.
def on_blur(e: me.InputBlurEvent):
state = me.state(State)
state.input = e.value
5. Imagen으로 이미지 생성
이 함수는 사용자가 버튼을 클릭하여 이미지 생성을 위한 텍스트 프롬프트를 제출할 때 호출됩니다.
def generate_image(e: me.ClickEvent):
state = me.state(State)
image = client.models.generate_images(
model=imagen_model,
prompt=state.input,
config=types.GenerateImagesConfig(
number_of_images=1,
aspect_ratio="1:1",
enhance_prompt=True,
safety_filter_level="BLOCK_MEDIUM_AND_ABOVE",
person_generation="DONT_ALLOW",
)
)
img = image.generated_images[0].image.image_bytes
# Encode image in Base64 to display in web app
img64 = base64.b64encode(img).decode('utf-8')
state.enhanced_prompt = image.generated_images[0].enhanced_prompt
state.img_data = f"data:image/png;base64,{img64}"
GenerateImagesConfig에 있는 설정을 구성할 수 있습니다.
number_of_images: 1, 2, 3, 4aspect_ratio: 1:1, 9:16, 16:9, 3:4, 4:3safety_filter_level: BLOCK_LOW_AND_ABOVE, BLOCK_MEDIUM_AND_ABOVE, BLOCK_ONLY_HIGH, BLOCK_NONEperson_generation: DONT_ALLOW, ALLOW_ADULT, ALLOW_ALL
참고: 추가 허용 목록 없이 작동하는 유일한 옵션은 DONT_ALLOW입니다.
6. 앱 레이아웃 구조
@me.page(
on_load=load,
path="/",
title="Imagen 3",
)
def app():
s = me.state(State)
with me.box(
style=me.Style(
display="grid",
width="100%",
place_items="center",
margin=me.Margin(top=100),
)
):
me.text(text="Imagen 3: Image Generation", type="headline-3", style=me.Style(font_family="Google Sans"))
with me.box(
style=me.Style(
border_radius=16,
padding=me.Padding.all(8),
display="flex",
)
):
with me.box(
style=me.Style(flex_grow=1)
):
me.native_textarea(
autosize=True,
on_blur=on_blur,
min_rows=8,
placeholder="Enter your image prompt",
style=me.Style(
padding=me.Padding(top=16, left=16),
width="700px",
border_radius=16,
outline="none",
overflow_y="auto",
border=me.Border.all(
me.BorderSide(style="none"),
),
font_family="Google Sans",
),
)
with me.content_button(
type="icon",
on_click=generate_image,
):
me.icon("send")
with me.box(style=me.Style(margin=me.Margin.all(8),
width="700px",
display="flex",
align_items="center")
):
me.image(
src=s.img_data,
style=me.Style(width="350px", padding=me.Padding.all(16), border_radius=36)
)
with me.box(
style=me.Style(
padding=me.Padding.all(8),
background="white",
height="400px",
width="400px",
border_radius=16,
)
):
me.text(text="Enhanced Prompt:", style=me.Style(font_family="Google Sans", font_weight="bold"))
me.text(text=s.enhanced_prompt, style=me.Style(padding=me.Padding.all(10), font_family="Google Sans"),
)
이 코드는 다음 구성요소가 포함된 단일 페이지 애플리케이션을 만듭니다.
- 제목
- 이미지 프롬프트를 입력하는 텍스트 영역
generate_image함수를 호출하는 전송 버튼- Imagen에서 생성한 이미지
- 이미지와 함께 반환된 향상된 프롬프트
7. Cloud Shell에서 애플리케이션 실행
- 모든 코드 스니펫을
main.py에 복사한 후 Cloud Shell 터미널에서 Mesop 애플리케이션을 실행할 수 있습니다.mesop main.py - 이제 오른쪽 상단의 웹 미리보기 버튼을 클릭한 다음 포트 변경을 클릭합니다. 포트 번호 상자에 32123을 입력한 다음 '변경 및 미리보기'를 클릭합니다. 로드된 앱을 볼 수 있는 새 창이 열립니다. 다음과 같이 표시됩니다.
8. Imagen 3 테스트
여기에서 직접 텍스트 프롬프트를 사용하여 Imagen을 사용해 볼 수 있습니다. 사실주의, 애니메이션, 다양한 예술적 스타일 등 다양한 스타일로 이미지를 생성할 수 있습니다. 특정 카메라 각도, 렌즈 등을 지정할 수도 있습니다. 원래 텍스트 프롬프트도 원래 프롬프트의 의도를 더 잘 반영하는 고품질 이미지를 생성하기 위한 LLM 기반 기능을 통해 재작성됩니다.
참고: 인물 이미지를 생성하려면 추가 액세스 권한이 필요합니다. 그동안 프롬프트에 사람 또는 얼굴 생성이 포함된 경우 오류가 발생합니다.
다음과 같은 프롬프트를 사용해 볼 수 있습니다.
- 'good vibes'라고 흰색 글자로 써 있고 네온 그린으로 윤곽선이 그어진 버블 스터치가 있는 비즈니스 캐주얼 야구 모자
- 기발한 사탕 가게
- 라스베이거스의 도시 이름이 적혀 있고 오른쪽 모서리에 우표가 있는 만화 엽서
- 털실 공을 가지고 노는 강아지와 새끼 고양이
9. 삭제
애플리케이션 중지
애플리케이션을 실행한 터미널로 돌아가 Ctrl C를 눌러 종료합니다.
가상 환경 비활성화
동일한 터미널에서 다음 명령어를 입력합니다.
deactivate