Cloud Run에 Imagen 배포

1. 이 Codelab에 관한 정보

최종 업데이트: 2024년 10월 11일

작성자: 로리 화이트

이미지 생성

솔직히 대규모 언어 모델 (LLM)을 사용한 이미지 생성은 재미있을 수 있습니다. 맞춤 광고부터 매력적인 프레젠테이션까지 프롬프트에서 이미지를 생성하는 비즈니스 애플리케이션은 다양합니다. (Google Cloud 웹사이트에는 크리에이티브 에이전트를 사용하는 회사의 구체적인 사용 사례가 많이 있습니다.) 하지만 '들판에 있는 행복한 녹색 개' 이미지를 요청했을 때 어떤 결과가 나오는지 확인하는 것은 꽤 재미있을 수 있습니다.

전문적인 이유로든 취미로든 (또는 둘 다) 이미지 생성에 관심이 있다면 이미지 생성 프로그램을 사용하는 것과 웹 애플리케이션에 배포하는 것 사이에는 몇 가지 문제가 있습니다. 이 실습을 통해 이러한 문제를 해결할 수 있습니다.

빌드할 항목

이 Codelab에서는 텍스트 프롬프트를 가져와 해당 프롬프트를 사용하여 생성된 이미지가 포함된 웹페이지를 반환하는 앱을 빌드합니다.

학습할 내용

이 실습에서는 다음 작업을 수행하는 방법을 알아봅니다.

노트북 환경에서 Google Imagen을 사용하여 텍스트 프롬프트로 이미지를 만드는 방법
노트북에서 웹 앱으로 Imagen 코드를 이동할 때의 어려움
Imagen을 사용하여 이미지를 생성하는 Cloud Run 애플리케이션을 배포하는 방법
HTML에 Imagen 이미지를 포함하는 방법

이 Codelab에서는 Imagen 및 배포에 중점을 둡니다. 따라서 이와 관련 없는 개념과 코드 블록은 그냥 넘어가겠습니다. 단, 필요할 때 복사해서 붙여넣을 수 있도록 다른 설명 없이 제공만 해드리겠습니다.

필요한 항목

최신 버전의 Chrome 브라우저
Cloud Run에 대한 지식 여기에서 비교적 짧은 Codelab을 통해 확인할 수 있습니다.
Cloud Shell 또는 Cloud Shell 편집기에서 파일을 편집하는 데 익숙해야 합니다. 이 Codelab에서 Cloud Shell 및 Cloud Shell 편집기에 대해 자세히 알아볼 수 있습니다.
결제가 사용 설정된 Google Cloud 프로젝트 이 가이드에서는 프로젝트를 만드는 방법을 보여줍니다. 무료 등급 및 무료 체험판이 제공되는 제품이 많이 있습니다.

이 Codelab의 전체 코드는 https://github.com/Annie29/imagen-deployment에서 확인할 수 있습니다 .

2. API 사용 설정

이 Codelab에 사용할 프로젝트를 선택합니다. 작업이 끝나면 모든 작업을 쉽게 삭제할 수 있도록 새 프로젝트를 만드는 것이 좋습니다.

Imagen을 시작하려면 몇 가지 API를 사용 설정해야 합니다.

Google Cloud Console로 이동합니다.
Vertex AI 대시보드로 이동합니다.
'모든 권장 API 사용 설정'을 선택합니다.

3. Google Imagen 살펴보기 (선택사항)

Imagen에 익숙하다면 이 섹션을 건너뛰어도 됩니다.

Imagen을 사용하는 웹 앱을 만들기 전에 Imagen의 기능을 확인하는 것이 좋습니다. 다행히 간단한 Imagen 코드를 실행하는 노트북이 여러 개 있으므로 그중 하나로 시작해 보겠습니다.

https://github.com/GoogleCloudPlatform/generative-ai/blob/main/vision/getting-started/image_generation.ipynb에서 노트북으로 이동합니다 .
Colab에서 열기를 선택하여 Google의 노트북 서버에서 노트북을 엽니다.
'파일 -> 드라이브에 사본 저장'을 선택하거나 페이지 상단의 '드라이브에 복사'를 클릭하여 이 노트북의 사본을 만듭니다.
잘못된 사본에서 작업하지 않도록 원래 사본을 닫습니다.
오른쪽 상단의 연결 버튼을 클릭하여 런타임에 연결해야 합니다.
노트북의 각 셀을 살펴봅니다.
셀을 실행하려면 셀 왼쪽에 있는 [] 또는 화살표를 클릭하거나 런타임 메뉴의 선택 항목 실행 옵션 (또는 단축키)을 사용하면 됩니다.
현재 런타임을 다시 시작하면 시스템이 비정상 종료되었다는 메시지가 표시됩니다. 걱정하지 마세요. 이는 정상적인 현상입니다.
노트북 환경을 인증해야 합니다.
코드 오른쪽의 상자에 프로젝트 ID (이름 아님)와 위치 (위치를 설정하지 않은 경우 us-central1 사용)를 입력하면 Colab에서 코드에 삽입해 줍니다.
'이미지 생성'에 도달하면 Imagen의 기능을 확인할 수 있습니다. 프롬프트를 변경하고 셀을 다시 실행하여 얻을 수 있는 다양한 이미지를 확인해 보세요.
이제 Imagen이 노트북에서 이미지를 만드는 방법을 잘 알게 되었습니다. 지금 또는 편한 시간에 이 노트북을 작성하여 이미지 매개변수에 대해 자세히 알아보세요.

4. 이미지를 표시하는 웹 애플리케이션 빌드 시작

Cloud Run에서 Flask 프레임워크를 사용하는 Python을 사용하여 앱을 빌드합니다.

Python Flask 앱은 다음과 같이 폴더에 설정됩니다.

app-folder
    templates
        template.html
        (etc.)
        anothertemplate.html
    main.py
    requirements.txt

템플릿은 HTML이 포함된 파일로, 프로그램이 생성된 텍스트를 삽입할 이름이 지정된 자리표시자가 있습니다. main.py은 웹 서버 앱 자체이고 requirements.txt은 main.py이 사용하는 모든 비표준 라이브러리 목록입니다.

애플리케이션에는 두 페이지가 있습니다. 첫 번째 페이지는 프롬프트를 가져오고 두 번째 페이지는 이미지를 표시하고 사용자가 다른 프롬프트를 입력할 수 있도록 합니다.

먼저 프로젝트 프레임워크를 만듭니다.

파일 구조 만들기

이 Codelab에서는 프로젝트가 imageapp 폴더에 있다고 가정합니다. 다른 이름을 사용하는 경우 적절하게 명령어를 업데이트해야 합니다.

화면 오른쪽 상단에 있는 프롬프트 아이콘을 선택하여 Cloud Shell을 입력합니다.

셸 창 상단의 화살표를 사용하여 셸을 새 탭으로 이동하면 작업 공간을 더 확보할 수 있습니다.

Cloud Shell의 홈 디렉터리에서 imageapp 폴더를 만들고, 해당 폴더로 변경하고, templates 폴더를 만듭니다. 명령줄 또는 Cloud Shell 편집기에서 이 작업을 수행할 수 있습니다.

템플릿 만들기

애플리케이션에는 두 페이지가 있습니다. 첫 번째 페이지 (home.html)는 프롬프트를 가져오고 두 번째 페이지 (display.html)는 이미지를 표시하고 사용자가 다른 프롬프트를 입력할 수 있도록 합니다.

Cloud Shell 편집기 또는 원하는 Linux 편집기를 사용하여 템플릿 두 개를 만듭니다. imageapp/templates 폴더에서 사용자가 보게 될 초기 페이지 home.html을 만듭니다. prompt 변수를 사용하여 사용자가 입력한 설명을 반환합니다.

templates/home.html

<!DOCTYPE html>
<html>
   <head>
       <title>Let's draw a picture</title>
   </head>
   <body>
       <h1>Let's draw a picture</h1>
       <form  action="/" method="post" >
           <input type="text" id="prompt" name="prompt">
           <input type="submit" value="Send">
       </form>
   </body>
</html>

그런 다음 이미지를 표시하는 display.html를 만듭니다. 이미지의 위치는 image_url에 있습니다.

templates/display.html

<!DOCTYPE html>
<html>
   <head>
       <title>Let's draw a picture</title>
   </head>
   <body>
       <h1>Let's draw a picture</h1>

       <div>
           <form  action="/" method="post" >
               <input type="text" id="prompt" name="prompt">
               <input type="submit" value="Send">
           </form>

           <p></p>
       </div>

       <div id="picture">
           <img id="pict" name="pict" alt="The created image" src="{{image_uri}}" style="width:100%;">
       </div>

   </body>
</html>

5. 코드 시작

프로그램에 필요한 모든 라이브러리를 사용할 수 있도록 requirements.txt 파일을 만들어야 합니다. 지금은 requirements.txt 파일에 flask만 포함하세요.

main.py 파일에는 웹 요청을 처리하는 코드가 포함되어 있습니다. 처리해야 하는 요청은 두 가지뿐입니다. 홈페이지에 대한 GET 요청과 생성하려는 이미지를 설명하는 양식을 제출하는 POST 요청입니다.

Cloud Shell 편집기 또는 원하는 Linux 편집기를 사용하여 imageapp 폴더에 main.py 파일을 만듭니다. 아래의 스켈레톤부터 시작해 보겠습니다.

main.py

import flask

app = flask.Flask(__name__)

@app.route("/", methods=["GET"])
def home_page():
    return flask.render_template("home.html")

@app.route("/", methods=["POST"])
def display_image():
    # Code to get the prompt (called prompt) from the submitted form
    # Code to generate the image
    # Code to create a URL for the image (called image_url)

    return flask.render_template("display.html", prompt=prompt, image_url=image_url)

# Initialize the web server app when the code locally (Cloud Run handles it in that environment)
if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=8080)

사실상 앱 전체입니다. Python 코드로 구체화해야 하는 display_image의 주석이 3개 있으며, 이것이 전부입니다.

누락된 부분을 채워 보겠습니다. Flask를 사용하면 프롬프트를 쉽게 가져올 수 있습니다. 아래와 같이 주석 뒤에 줄을 추가합니다.

# Code to get the prompt (called prompt) from the submitted form
prompt = flask.request.form["prompt"]

지금 앱을 테스트하려면 display_image의 return 문 앞에 image_url (이미지를 가리키는 유효한 URL)에 값을 부여하는 줄을 추가하면 됩니다.

예: image_url="<your url here>"

Cloud Shell에서 python main.py 명령어를 사용하여 프로그램을 로컬로 실행하고 화면 오른쪽 상단의 포트 8080에서 미리보기를 사용하여 미리 볼 수 있습니다.

현재 프로그램에서는 항상 제공된 URL의 이미지가 표시됩니다. 다음으로 앱에서 이 값을 가져오는 방법을 살펴보겠습니다. image_url에 정적 값을 부여하는 줄을 삭제해야 합니다.

6. 이미지 만들기

Google Cloud에는 Vertex AI의 생성형 AI를 위한 Python API가 있습니다. 이를 사용하려면 프로그램 상단 근처의 다른 가져오기와 함께 이를 가져오는 줄을 추가해야 합니다.

from vertexai.vision_models import ImageGenerationModel

requirements.txt 파일에 vertexai을 포함합니다.

ImageGenerationModel 문서에서는 사용 방법을 보여줍니다. 프롬프트가 주어지면 모델을 만든 다음 모델에서 이미지를 생성합니다. 두 번째 단계인 이미지를 만들고 response에 저장하는 코드를 main.py에 추가합니다.

# Code to generate the image
model = ImageGenerationModel.from_pretrained("imagegeneration@006")
response = model.generate_images(prompt=prompt)[0]

generate_images에 전송된 매개변수에 따라 한 번에 최대 4개의 이미지를 만들 수 있으므로 반환된 값은 이 경우와 같이 이미지가 하나만 반환되더라도 GeneratedImage 목록이 됩니다.

이제 WWW 페이지에 이미지를 표시해야 합니다. GeneratedImage에는 이미지를 show하는 메서드가 있지만 노트북 환경에서만 작동합니다. 하지만 이미지를 저장하는 방법이 있습니다. 템플릿을 렌더링할 때 이미지를 저장하고 저장된 이미지의 URL을 전송합니다.

이 부분은 약간 까다로우며 다양한 방법이 있습니다. 간단한 접근 방식 중 하나를 단계별로 살펴보겠습니다. (시각적 학습자라면 아래 단계의 그림을 참고하세요.)

먼저 이미지를 저장해야 합니다. 하지만 이름을 뭐라고 지정할까요? 프로그램을 여러 사용자가 동시에 사용할 수 있으므로 정적 이름을 사용하면 문제가 발생할 수 있습니다. 각 사용자에 대해 별도의 이미지 이름 (UUID와 같은 이름)을 만들 수도 있지만, 고유한 이름으로 임시 파일을 만드는 Python의 tempfile 라이브러리를 사용하는 것이 더 간단합니다. 아래 코드는 임시 파일을 만들고, 이름을 가져오고, 이미지 생성 단계의 응답을 임시 파일에 씁니다. 먼저 URL을 가져와야 하므로 아직 코드에 입력하지는 않습니다.

with tempfile.NamedTemporaryFile("wb") as f:
    filename = f.name
    response.save(filename, include_generation_parameters=False)
    # process the saved file here, before it goes away

저장된 파일을 처리하는 방법에는 여러 가지가 있지만 가장 간단하고 안전한 방법 중 하나는 데이터 URL을 사용하는 것입니다.

데이터 URL을 사용하면 실제 데이터를 경로뿐만 아니라 URL로 전송할 수 있습니다. 데이터 URL의 구문은 다음과 같습니다.

data:[image/png][;base64],<data>

이미지의 base64 인코딩을 가져오려면 tempfile로 저장된 파일을 열고 변수로 읽어야 합니다. 예, 긴 문자열이 되지만 최신 브라우저와 서버에서는 문제가 없습니다. 그런 다음 base64 라이브러리를 사용하여 데이터 URL에서 전송할 수 있는 문자열로 인코딩합니다.

세 번째 단계 (URL 만들기)를 실행하는 최종 코드는 다음과 같습니다.

# Code to create a URL for the image (called image_url)
with tempfile.NamedTemporaryFile("wb") as f:
    filename = f.name
    response.save(filename, include_generation_parameters=False)
    # process the saved file here, before it goes away
    with open(filename, "rb") as image_file:
        binary_image = image_file.read()
        base64_image = base64.b64encode(binary_image).decode("utf-8")
        image_url = f"data:image/png;base64,{base64_image}"

아래 이미지에서 이러한 모든 단계를 확인할 수 있습니다.

프로그램 시작 시 tempfile과 base64를 가져와야 합니다.

import tempfile
import base64

main.py가 있는 폴더에 있는지 확인하고 다음 명령어를 실행하여 Cloud Shell에서 프로그램을 실행해 보세요.

python main.py

그런 다음 화면 오른쪽 상단의 포트 8080에서 미리보기를 사용하여 미리 볼 수 있습니다.

7. 일반적인 오류

테스트 중에 또는 배포 후에 프로그램을 실행할 때 다음과 같은 메시지가 표시될 수 있습니다.

Google의 책임감 있는 AI 관행을 위반하는 프롬프트가 원인일 가능성이 큽니다 . '다채로운 공을 가지고 노는 아기 고양이'와 같은 간단한 프롬프트로도 이 문제가 발생할 수 있습니다. 하지만 '다채로운 장난감을 가지고 노는 새끼 고양이' 이미지는 얻을 수 있습니다.

이 오류를 처리하기 위해 이미지를 생성하려고 할 때 발생하는 예외를 포착하는 코드를 추가합니다. 있는 경우 메시지가 표시된 home.html 템플릿이 다시 렌더링됩니다.

먼저 오류가 있는 경우 표시될 첫 번째 양식 뒤에 home.html 템플릿에 div를 추가합니다.

<!DOCTYPE html>
<html>
   <head>
       <title>Let's draw a picture</title>
   </head>
   <body>
       <h1>Let's draw a picture</h1>
       <form  action="/" method="post" >
           <input type="text" id="prompt" name="prompt">
           <input type="submit" value="Send">
       </form>
       {% if mistake %}
       <div id="warning">
       The prompt contains sensitive words that violate
       <a href=\"https://ai.google/responsibility/responsible-ai-practices\">
           Google's Responsible AI practices</a>.
       Try rephrasing the prompt."</div>

       {% endif %}

   </body>
</html>

그런 다음 display_image에서 generate_images 코드를 호출할 때 발생할 수 있는 예외를 포착하도록 main.py에 코드를 추가합니다. 예외가 있는 경우 코드는 메시지와 함께 home.html 템플릿을 렌더링합니다.

# Code to generate the image
   model = ImageGenerationModel.from_pretrained("imagegeneration@006")
   try:
       response = model.generate_images(prompt=prompt)[0]   
   except:
       #  This is probably due to a questionable prompt
       return flask.render_template("home.html", warning=True)

Imagen의 책임감 있는 AI 기능은 이것이 전부가 아닙니다. 사람과 아동의 생성을 보호하는 기능과 이미지에 대한 일반 필터가 있습니다. 자세한 내용은 여기를 참고하세요.

8. 웹에 앱 배포

Cloud Shell의 imageapp 폴더에 있는 명령어를 사용하여 앱을 웹에 배포할 수 있습니다. 명령어에 실제 프로젝트 ID를 사용해야 합니다.

gcloud run deploy imageapp \
  --source . \
  --region us-central1 \
  --allow-unauthenticated \
  --project your-project-id

다음과 같은 응답이 표시되며, 여기에서 애플리케이션을 찾을 수 있습니다.

Service [imageapp] revision [imageapp-00001-t48] has been deployed and is serving 100 percent of traffic.
Service URL: https://imageapp-708208532564.us-central1.run.app```

9. 삭제

Cloud Run에서는 서비스를 사용하지 않을 때 비용이 청구되지 않지만 Artifact Registry에 컨테이너 이미지를 저장하는 데 요금이 부과될 수 있습니다. 비용이 청구되지 않도록 저장소를 삭제하거나 Cloud 프로젝트를 삭제할 수 있습니다. Cloud 프로젝트를 삭제하면 해당 프로젝트 내에서 사용되는 모든 리소스에 대한 청구가 중단됩니다.

컨테이너 이미지 저장소를 삭제하려면 다음 단계를 따르세요.

gcloud artifacts repositories delete cloud-run-source-deploy \
  --location $REGION

Cloud Run 서비스를 삭제하려면 다음 단계를 따르세요.

gcloud run services delete imageapp \
  --platform managed \
  --region $REGION

Google Cloud 프로젝트를 삭제하려면 다음 단계를 따르세요.

현재 프로젝트 ID를 가져옵니다.

PROJECT_ID=$(gcloud config get-value core/project)

삭제하려는 프로젝트가 맞는지 확인하세요.

echo $PROJECT_ID

프로젝트를 삭제합니다.

gcloud projects delete $PROJECT_ID

10. 축하합니다

Imagen으로 만든 이미지를 표시하는 웹 애플리케이션을 빌드했습니다. 애플리케이션에서 어떻게 사용할 수 있나요?

다음 단계

다음 Codelab을 확인하세요.