ウェブサイトを描画する: Gemini モデルを使用して、想像力をウェブサイトに変換しましょう。

1. はじめに

ウェブ開発の世界では、デザインコンセプトを機能的なウェブサイトに変換するプロセスは、時間も手間もかかる複雑なものになる可能性があります。しかし、Gemini などの生成 AI モデルの登場により、このプロセスはますます効率化され、アクセスしやすくなっています。手描きのワイヤーフレームをウェブサイトのコードに変換するソリューションを構築します。この強力なツールを使用すると、デザイナーとデベロッパーは、かつてないほど簡単かつ効率的にウェブサイトのビジョンを実現できます。

このラボでは、ユーザーが入力したワイヤーフレームとプロンプトから、Vertex AI の生成 AI モデル（Gemini 1.5 Flash、Gemini 1.5 Pro など）を使用してウェブサイトのコード（HTML、CSS、JavaScript）を生成できるウェブアプリケーションを構築します。このアプリケーションは、一般的な Python ウェブフレームワークである Flask を使用して構築され、Vertex AI クライアントライブラリを使用して Generative Models サービスとやり取りします。

作成するアプリの概要

このラボを終了すると、ワイヤーフレームとプロンプトから画像を生成できるウェブアプリケーションが完成します。また、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 プロジェクトに設定されていることを確認します。プロンプトが表示されたら、[Authorize] をクリックします。

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

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

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 に置き換えてください。

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]

次に、次のコマンドを順番に 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 モデルの進化が続くにつれて、将来的にはさらに画期的なアプリケーションの登場が予想されます。