このページは 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 に送信し、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 Code プロジェクトが Cloud Shell エディタの左下（ステータスバー）に設定されていることと、課金が有効になっているアクティブな Google Cloud プロジェクトに設定されていることを確認します。プロンプトが表示されたら、[承認] をクリックします。

ステータスバーでそのアクティブなプロジェクトをクリックし、Cloud Code のポップアップが開くまで待ちます。ポップアップで [New Application] を選択します。

アプリケーションのリストから、[Cloud Run Application] を選択します。

2/2 ページでは、Python Flask テンプレートを選択します。

希望するプロジェクトの名前（「amazing-gemini-app」など）を指定して、[OK] をクリックします。

今セットアップした新しいプロジェクトのテンプレートが開きます。

このように、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 アプリケーションを初期化し、アップロードされる画像の最大サイズを 16 MB に設定します。

Vertex AI クライアントの初期化

指定したプロジェクト ID とロケーションで Vertex AI クライアントライブラリが初期化されます。YOUR_PROJECT_ID は実際のプロジェクト ID に置き換えてください。

生成関数を定義する

この関数は、ワイヤーフレーム画像、生成モデル、プロンプトを入力として受け取ります。次に、指定されたモデルとプロンプトを使用してウェブサイトの 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]

以下のコマンドをこの順序で 1 つずつ入力します。

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 モデルは進化し続けているため、今後もさらに画期的な用途が登場することが予想されます。