웹사이트 그리기: 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에 전송하면 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 터미널로 이동하여 편집기 열기 버튼을 클릭합니다.

아래 이미지에 강조 표시된 것처럼 Cloud Shell 편집기의 왼쪽 하단 (상태 표시줄)에 Cloud Code 프로젝트가 설정되어 있고 결제가 사용 설정된 활성 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: 난수를 생성합니다.

vertexai: 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 configure 명령어를 사용하여 프로젝트 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에서 그림을 웹사이트로 변환하는 빠른 웹 애플리케이션을 빌드했습니다. 전체 저장소는 여기에 있습니다. draw-a-website 앱은 웹 개발 프로세스를 간소화하는 Gemini의 혁신적인 기능을 보여줍니다. AI를 활용하면 디자이너와 개발자가 더 빠른 속도, 정확성, 창의성으로 웹사이트를 만들 수 있습니다. 생성형 AI 모델이 계속 발전함에 따라 앞으로는 더욱 획기적인 애플리케이션이 등장할 것으로 기대됩니다.