이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹사이트 그리기: Gemini 모델을 사용하여 상상력을 웹사이트로 바꿔보세요.

1. 소개

웹 개발 분야에서 디자인 개념을 실용적인 웹사이트로 변환하는 과정은 시간이 오래 걸리고 복잡할 수 있습니다. 그러나 Gemini와 같은 생성형 AI 모델의 출현으로 이 프로세스는 점점 간소화되고 접근성이 향상되고 있습니다. 손으로 그린 와이어프레임을 웹사이트 코드로 변환하는 데 특화된 솔루션을 구축합니다. 이 강력한 도구를 통해 디자이너와 개발자는 전례 없는 쉽고 효율적인 방식으로 웹사이트의 비전을 실현할 수 있습니다.

이 실습에서는 사용자가 Vertex AI의 생성형 AI 모델 (Gemini 1.5 Flash, Gemini 1.5 Pro 등)을 사용하여 입력하는 와이어프레임과 프롬프트에서 웹사이트 코드 (html, CSS, JavaScript)를 생성할 수 있는 웹 애플리케이션을 빌드합니다. 이 애플리케이션은 널리 사용되는 Python 웹 프레임워크인 Flask를 사용하여 빌드되며, Vertex AI 클라이언트 라이브러리를 사용해 생성 모델 서비스와 상호작용합니다.

빌드할 항목

이 실습을 마치면 와이어프레임과 프롬프트에서 이미지를 생성할 수 있는 웹 애플리케이션이 작동할 것입니다. 또한 Vertex AI의 생성형 AI 모델을 사용하는 방법도 더 잘 이해할 수 있습니다.

웹 애플리케이션은 다음과 같습니다.

앱 흐름

손으로 그린 와이어프레임 업로드: 사용자는 손으로 그린 와이어프레임의 이미지를 앱에 업로드할 수 있습니다.
모델 선택: 앱에서 다양한 디자인 스타일에 최적화된 선행 학습된 Gemini 모델을 제공합니다.
프롬프트 제공: 사용자는 선택적으로 모델 생성을 안내하는 텍스트 프롬프트를 제공할 수 있습니다.
웹사이트 코드 생성: 앱이 와이어프레임과 프롬프트를 Gemini에 전송하여 해당하는 웹사이트 코드를 생성합니다.
결과 표시: 생성된 코드가 앱의 응답 페이지에 표시됩니다.

먼저 와이어프레임과 프롬프트의 기본사항과 이를 사용하여 웹사이트 코드를 생성하는 방법을 알아보겠습니다. 그런 다음 사용자 입력을 처리하고, 응답을 생성하고, 결과를 표시하는 방법을 포함하여 웹 애플리케이션을 빌드하는 단계를 살펴보겠습니다.

2. 시작하기 전에

Google Cloud 콘솔의 프로젝트 선택기 페이지에서 Google Cloud 프로젝트를 선택하거나 만듭니다.
Google Cloud 프로젝트에 결제가 사용 설정되어 있는지 확인합니다. 프로젝트에 결제가 사용 설정되어 있는지 확인하는 방법을 알아보세요.
Google Cloud에서 실행되는 명령줄 환경인 Cloud Shell을 사용합니다. 액세스하려면 Google Cloud 콘솔 상단에서 'Cloud Shell 활성화'를 클릭하세요.

Cloud Shell에 연결되면 다음 명령어를 사용하여 인증이 완료되었는지, 프로젝트가 내 프로젝트 ID로 설정되어 있는지 확인합니다.

gcloud auth list

Cloud Shell에서 다음 명령어를 실행하여 gcloud 명령어가 프로젝트를 알고 있는지 확인합니다.

gcloud config list project

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

gcloud config set project <YOUR_PROJECT_ID>

다음 API가 사용 설정되어 있는지 확인합니다.

Cloud Run
Vertex AI

gcloud 명령어 대신 이 링크를 통해 콘솔을 사용할 수도 있습니다. gcloud 명령어 및 사용법은 문서를 참조하세요.

3. 1단계: Python Cloud Run 웹 앱 부트스트랩

먼저 Cloud Shell에서 Python Cloud Run 웹 애플리케이션 템플릿을 만듭니다.

Cloud Shell 터미널로 이동하여 편집기 열기 버튼을 클릭합니다. <ph type="x-smartling-placeholder"></ph>

Cloud Code 프로젝트가 아래 이미지에 강조 표시된 대로 Cloud Shell 편집기의 왼쪽 하단 (상태 표시줄)에 설정되어 있고 결제가 사용 설정된 활성 Google Cloud 프로젝트로 설정되어 있는지 확인합니다. 메시지가 표시되면 승인합니다.

상태 표시줄에서 활성 프로젝트를 클릭하고 Cloud Code 팝업이 열릴 때까지 기다립니다. 팝업에서 '새 애플리케이션'을 선택합니다.

애플리케이션 목록에서 Cloud Run 애플리케이션을 선택합니다.

2/2 페이지에서 Python Flask 템플릿을 선택합니다.

원하는 프로젝트 이름 (예: 'amazing-gemini-app')을 입력하고 확인을 클릭합니다.

방금 설정한 새 프로젝트의 템플릿이 열립니다.

이처럼 간단하게 Google Cloud Shell로 웹 애플리케이션을 부트스트랩할 수 있습니다.

4. 2단계: 프런트엔드 빌드

이를 위해서는 HTML 페이지가 필요합니다. 이 페이지에는 웹 애플리케이션의 사용자 인터페이스를 정의하는 코드가 포함되어 있습니다. 여기에는 사용자가 손으로 그린 와이어프레임 이미지를 업로드하고 생성 모델을 선택하고 텍스트 프롬프트를 제공할 수 있는 양식이 포함되어 있습니다. 양식을 제출하면 결과가 다른 탭에 표시됩니다.

아래 코드를 복사하고 templates 폴더의 index.html 파일을 바꿉니다.

<!DOCTYPE html>
<html>
<head>
   <title>Draw a Website</title>
   <style>
       body {
           font-family: sans-serif;
           display: flex;
           justify-content: center;
           align-items: center;
           min-height: 100vh; /* Ensure form is centered vertically */
           background-color: #f4f4f4;
       }
       .container {
           background-color: white;
           padding: 30px;
           border-radius: 8px;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
           text-align: center;
       }
       h2 {
           text-align: center;
           margin-bottom: 20px;
       }
       input[type="file"], textarea, select {
           width: 100%;
           padding:10px;
           margin-bottom: 15px;
           border: 1px solid #ccc;
           border-radius: 4px;
           box-sizing: border-box;
       }
       button {
           background-color: #4CAF50;
           color: white;
           padding: 12px 20px;
           border: none;
           border-radius: 4px;
           cursor: pointer;
       }
   </style>
</head>
<body>
   <div class="container">
       <h2>Draw a Website</h2>
       <form action="/response" target="_blank" method="post" enctype="multipart/form-data">
           <input type="file" id="image-upload" name="image-upload" accept=".png, .jpg, .jpeg">
           <select name="model">
               <option value="gemini-1.5-flash-001">Gemini 1.5 Flash</option>
               <option value="gemini-1.5-pro-001">Gemini 1.5 Pro</option>
               <option value="gemini-1.0-pro-vision-001">Gemini 1.0 Pro Vision</option>
               </select>
           <textarea name="prompt" placeholder="Write your prompt here. For example: 'Convert this drawing into an html page'">Convert this drawing into an html page</textarea>
           <button type="submit">Submit</button>
       </form>
   </div>
</body>
</html>

사용자가 앱과 상호작용할 때 다음 작업이 발생합니다.

사용자가 와이어프레임 이미지를 선택하고, 모델을 선택하고, 프롬프트를 입력합니다.
사용자가 '제출' 버튼을 클릭할 때 버튼을 클릭하면 양식 데이터 (이미지, 모델, 프롬프트)가 HTTP POST 메서드를 사용하여 /response URL로 전송됩니다.
app.py에 구현된 서버 측 코드는 양식 데이터를 처리하고 지정된 모델과 프롬프트를 사용하여 응답을 생성합니다.
생성된 응답이 새 탭에 표시됩니다.

이제 웹 애플리케이션의 프런트엔드 부분을 준비했습니다.

5. 3단계: 백엔드 빌드 (생성형 AI)

이 웹 애플리케이션의 주요 부분을 작성해 보겠습니다. 사용자 입력 이미지, 모델 선택, 프롬프트를 가져와 웹사이트 코드로 변환하는 app.py 파일입니다.

app.py의 전체 코드를 복사합니다.

# Import the necessary libraries.
import os
import random
from flask import (
    Flask,
    render_template,
    request,
    redirect
)

import vertexai
from vertexai.generative_models import (
    GenerativeModel,
    Image
)

# Initialize the Flask app.
app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16 MB per image

# TODO: Replace "YOUR_PROJECT_ID" before running
# Initialize the Vertex AI client library.
vertexai.init(project="YOUR_PROJECT_ID", location="us-central1")

# Define a function to generate response from a wireframe and a prompt.
def generate(wireframe, model, prompt):
    '''Generates a response from a wireframe and a prompt.
    Args:
    wireframe: The wireframe image.
    model: The generative model to use.
    prompt: The prompt to use.
    Returns:The generated response.
    '''
    # Create a GenerativeModel object.
    model = GenerativeModel(model)

    # Create a list of contents to pass to the model.
    contents = [
        wireframe,
        prompt
    ]
   
    # Generate the response.
    responses = model.generate_content(
        contents=contents,
        stream=True,
    )

    # Concatenate the response text.
    response = ""
    for res in responses:
        response += res.text.strip()
   
    # Return the generated response.
    return response

# Define the home page route.
@app.route('/', methods=['GET'])
def index():
    '''Renders the home page.
    Returns:The rendered template.
    '''
    return render_template('index.html')

# Define the response route.
@app.route('/response', methods=['GET', 'POST'])
def response():
    '''Handles the response to the user's input.
    Returns:The rendered template.
    '''
    # If the request is a POST request, process the form data.
    if request.method == 'POST':
        # Get the uploaded image from the request.
        uploaded_image = request.files['image-upload']
       
        # Convert the uploaded image to a wireframe image.
        wireframe = Image.from_bytes(uploaded_image.read())

        # Get the model and prompt from the request.
        model = request.form['model']
        prompt = request.form['prompt']
       
        # Generate the response and render the response.
        try:
            response = generate(wireframe, model, prompt)
            response = response.replace("```html", "").replace("```", "").strip()
            return response
        except ValueError as e:
            raise e
   
    # If the request is a GET request, redirect to the home page.
    else:
        return redirect('/')

# Run the app.
if __name__ == '__main__':
    # Get the server port from the environment variables.
    server_port = os.environ.get('PORT', '8080')

    # Run the app.
    app.run(debug=False, port=server_port, host='0.0.0.0')

코드는 본질적으로 다음과 같은 역할을 합니다.

이 코드는 애플리케이션에 필요한 라이브러리를 가져옵니다.

Flask: Python용 경량 웹 프레임워크입니다.

os: 운영체제와 상호작용하는 데 사용됩니다.

random: 랜덤 숫자를 생성합니다.

Vertex AI 클라이언트 라이브러리입니다.

GenerativeModel 및 Image: Vertex AI 생성 모델 라이브러리의 클래스입니다.

flask 앱 초기화:

그런 다음 Flask 애플리케이션을 초기화하고 업로드된 이미지에 허용되는 최대 크기를 16MB로 설정합니다.

Vertex AI 클라이언트 초기화

지정된 프로젝트 ID와 위치로 Vertex AI 클라이언트 라이브러리를 초기화합니다. YOUR_PROJECT_ID를 프로젝트 ID로 바꿔야 합니다.

generate 함수 정의

이 함수는 와이어프레임 이미지, 생성 모델, 프롬프트를 입력으로 사용합니다. 그런 다음 지정된 모델과 프롬프트를 사용하여 웹사이트 HTML을 생성합니다. 생성된 응답은 문자열로 반환됩니다.

홈페이지 경로 정의

이 함수는 홈페이지 경로를 정의합니다. 사용자가 애플리케이션의 루트 URL을 방문하면 이 함수가 호출됩니다. 애플리케이션의 홈페이지인 index.html 템플릿을 렌더링합니다.

응답 경로 정의

이 함수는 응답 경로를 정의합니다. 사용자가 홈페이지에서 양식을 제출하면 이 함수가 호출됩니다. 업로드된 이미지, 모델, 프롬프트를 처리한 후 웹사이트 코드를 생성합니다. 생성된 응답이 새 탭에 표시됩니다.

애플리케이션 실행

이 코드 부분은 스크립트가 기본 프로그램으로 실행되고 있는지 확인합니다. 이 경우 환경 변수에서 서버 포트를 가져와 지정된 포트에서 앱을 실행합니다.

6. 4단계: 종속 항목 및 Dockerfile 준비

requirements.txt 파일에 다음과 같은 종속 항목이 있어야 합니다.

Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-cloud-aiplatform>=1.38

Dockerfile 콘텐츠를 아래와 같이 바꿉니다.

# Python image to use.
FROM python:3.11-slim

# Set the working directory to /app
WORKDIR /app

# copy the requirements file used for dependencies
COPY requirements.txt .

# Install any needed packages specified in requirements.txt
RUN pip install -r requirements.txt

# Copy the rest of the working directory contents into the container at /app
COPY . .

# Run app.py when the container launches
ENTRYPOINT ["python", "app.py"]

7. 5단계: 웹 애플리케이션 배포

이제 애플리케이션 구성요소를 만들었으므로 앱을 배포해 보겠습니다.

Cloud Shell 터미널로 이동하여 현재 프로젝트가 활성 프로젝트에 구성되어 있는지 확인합니다. 아직 구성되지 않았다면 gcloud 구성 명령어를 사용하여 프로젝트 ID를 설정합니다.

gcloud config set project [PROJECT_ID]

그런 다음 아래 명령어를 하나씩 순서대로 입력합니다.

cd draw-a-website
gcloud run deploy --source .

서비스 이름을 입력하라는 메시지가 표시됩니다(예: 'draw-website'). 'us-central1' 리전에 해당하는 번호를 선택합니다. 'y'라고 말합니다. 인증되지 않은 호출을 허용할지 묻는 메시지가 표시됩니다. 참고로 데모 애플리케이션이므로 인증되지 않은 액세스가 허용됩니다. 엔터프라이즈 및 프로덕션 애플리케이션에 적절한 인증을 사용하는 것이 좋습니다.

배포가 완료되면 아래와 비슷한 링크가 표시됩니다.

**https://draw-website-*****eua-uc.a.run.app/

애플리케이션을 테스트합니다.

8. 삭제

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

Google Cloud 콘솔에서 리소스 관리 페이지로 이동합니다.
프로젝트 목록에서 삭제할 프로젝트를 선택하고 삭제를 클릭합니다.
대화상자에서 프로젝트 ID를 입력하고 종료를 클릭하여 프로젝트를 삭제합니다.
또는 콘솔에서 Cloud Run으로 이동하여 방금 배포한 서비스를 선택하고 삭제합니다.

9. 축하합니다

축하합니다. Cloud Run에 배포된 Python Flask로 그림을 웹사이트로 변환하는 간단한 웹 애플리케이션을 빌드했습니다. 전체 저장소는 여기에서 확인할 수 있습니다. 웹사이트 그리기 앱은 웹 개발 프로세스를 간소화하는 Gemini의 혁신적인 힘을 보여줍니다. AI를 활용하면 디자이너와 개발자가 웹사이트를 더 빠르고 정확하고 창의성 있게 만들 수 있습니다. 생성형 AI 모델이 계속 발전함에 따라 향후 더 많은 획기적인 애플리케이션이 등장할 것으로 예상됩니다.