طراحی یک وب سایت: تصورات خود را با استفاده از مدل های Gemini به یک وب سایت تبدیل کنید!

۱. مقدمه

در دنیای توسعه وب، فرآیند تبدیل یک مفهوم طراحی به یک وب‌سایت کاربردی می‌تواند هم زمان‌بر و هم پیچیده باشد. با این حال، با ظهور مدل‌های هوش مصنوعی مولد مانند Gemini، این فرآیند به طور فزاینده‌ای ساده‌تر و قابل دسترس‌تر می‌شود. ما راهکاری خواهیم ساخت که در تبدیل وایرفریم‌های دستی به کد وب‌سایت تخصص دارد. این ابزار قدرتمند، طراحان و توسعه‌دهندگان را قادر می‌سازد تا با سهولت و کارایی بی‌سابقه‌ای، چشم‌اندازهای وب‌سایت خود را به واقعیت تبدیل کنند.

در این آزمایش، ما یک برنامه وب خواهیم ساخت که به کاربران امکان می‌دهد کد وب‌سایت (html، css و جاوا اسکریپت) را از طریق وایرفریم‌ها و اعلان‌هایی که کاربر با استفاده از مدل‌های هوش مصنوعی مولد Vertex AI (Gemini 1.5 Flash، Gemini 1.5 Pro و غیره) وارد می‌کند، تولید کنند. این برنامه با استفاده از Flask، یک چارچوب وب محبوب پایتون، ساخته خواهد شد و از کتابخانه کلاینت Vertex AI برای تعامل با سرویس مدل‌های مولد استفاده خواهد کرد.

آنچه خواهید ساخت

در پایان این آزمایش، شما یک برنامه وب کارآمد خواهید داشت که می‌تواند تصاویر را از وایرفریم‌ها و اعلان‌ها تولید کند. همچنین درک بهتری از نحوه استفاده از مدل‌های هوش مصنوعی مولد Vertex AI خواهید داشت.

برنامه وب شما به این شکل خواهد بود:

نحوه جریان برنامه

1. آپلود طرح دستی: کاربران می‌توانند تصویری از طرح دستی خود را در برنامه آپلود کنند.
2. یک مدل را انتخاب کنید: این برنامه مجموعه‌ای از مدل‌های از پیش آموزش‌دیده Gemini را که برای سبک‌های طراحی مختلف بهینه شده‌اند، ارائه می‌دهد.
3. ارائه یک راهنما: کاربران می‌توانند به صورت اختیاری یک راهنمای متنی برای راهنمایی در تولید مدل ارائه دهند.
4. تولید کد وب‌سایت: برنامه، وایرفریم و اعلان را به Gemini ارسال می‌کند که کد وب‌سایت مربوطه را تولید می‌کند.
5. نمایش نتیجه: کد تولید شده در صفحه پاسخ برنامه نمایش داده می‌شود.

ما با بحث در مورد اصول اولیه وایرفریم‌ها و اعلان‌ها و نحوه استفاده از آنها برای تولید کد وب‌سایت شروع خواهیم کرد. سپس مراحل ساخت برنامه وب، از جمله نحوه مدیریت ورودی کاربر، تولید پاسخ و نمایش نتایج را بررسی خواهیم کرد.

۲. قبل از شروع

1. در کنسول گوگل کلود ، در صفحه انتخاب پروژه، یک پروژه گوگل کلود را انتخاب یا ایجاد کنید.
2. مطمئن شوید که صورتحساب برای پروژه Google Cloud شما فعال است. یاد بگیرید که چگونه بررسی کنید که آیا صورتحساب در یک پروژه فعال است یا خیر .
3. شما از Cloud Shell ، یک محیط خط فرمان که در Google Cloud اجرا می‌شود، استفاده خواهید کرد. برای دسترسی به آن، روی Activate Cloud Shell در بالای کنسول Google Cloud کلیک کنید.

4. پس از اتصال به Cloud Shell، با استفاده از دستور زیر بررسی می‌کنید که آیا از قبل احراز هویت شده‌اید و پروژه روی شناسه پروژه شما تنظیم شده است یا خیر:

gcloud auth list

5. دستور زیر را در Cloud Shell اجرا کنید تا تأیید شود که دستور gcloud از پروژه شما اطلاع دارد.

gcloud config list project

6. اگر پروژه شما تنظیم نشده است، از دستور زیر برای تنظیم آن استفاده کنید:

gcloud config set project <YOUR_PROJECT_ID>

7. مطمئن شوید که API های زیر فعال هستند:

• اجرای ابری
• هوش مصنوعی ورتکس

جایگزین استفاده از دستور gcloud، استفاده از کنسول با استفاده از این لینک است. برای دستورات و نحوه استفاده از gcloud به مستندات مراجعه کنید.

۳. مرحله ۱: بوت‌استرپ کردن یک برنامه وب پایتون ابری

ما ابتدا الگوی برنامه وب Python Cloud Run را از Cloud Shell ایجاد خواهیم کرد.

به ترمینال Cloud Shell بروید و روی دکمه Open Editor کلیک کنید.

مطمئن شوید که پروژه Cloud Code در گوشه پایین سمت چپ (نوار وضعیت) ویرایشگر Cloud Shell، همانطور که در تصویر زیر مشخص شده است، تنظیم شده باشد و روی پروژه فعال Google Cloud که در آن صورتحساب را فعال کرده‌اید، تنظیم شده باشد. در صورت درخواست، تأیید کنید .

روی پروژه فعال در نوار وضعیت کلیک کنید و منتظر بمانید تا پنجره Cloud Code باز شود. در پنجره باز شده، "New Application" را انتخاب کنید.

از لیست برنامه‌ها، برنامه Cloud Run را انتخاب کنید:

برای صفحه ۲/۲، الگوی پایتون فلسک را انتخاب کنید:

نام پروژه را به دلخواه خود وارد کنید (مثلاً "amazing-gemini-app") و روی تأیید کلیک کنید:

این کار قالب پروژه جدیدی را که تازه راه‌اندازی کرده‌اید، باز می‌کند.

به همین سادگی می‌توان یک برنامه وب را با Google Cloud Shell بوت‌استرپ کرد.

۴. مرحله ۲: ساخت رابط کاربری (Frontend)

برای انجام این کار، به یک صفحه HTML نیاز داریم. آن صفحه شامل کدی خواهد بود که رابط کاربری برنامه وب را تعریف می‌کند. این صفحه شامل فرمی است که به کاربران اجازه می‌دهد یک تصویر wireframe دست‌ساز را آپلود کنند، یک مدل مولد انتخاب کنند و یک متن برای درخواست ارائه دهند. پس از ارسال فرم، نتیجه در یک تب دیگر نمایش داده می‌شود.

کد زیر را کپی کرده و فایل index.html خود را در پوشه templates جایگزین کنید:

<!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>

وقتی کاربر با برنامه تعامل می‌کند، اقدامات زیر رخ می‌دهد:

1. کاربر یک تصویر wireframe انتخاب می‌کند، یک مدل را انتخاب می‌کند و یک اعلان را وارد می‌کند.
2. وقتی کاربر روی دکمه‌ی «ارسال» کلیک می‌کند، داده‌های فرم (تصویر، مدل و اعلان) با استفاده از متد HTTP POST به آدرس اینترنتی /response ارسال می‌شوند.
3. کد سمت سرور (که در app.py پیاده‌سازی شده است) داده‌های فرم را پردازش کرده و با استفاده از مدل و اعلان مشخص شده، پاسخ را تولید می‌کند.
4. پاسخ تولید شده در تب جدید نمایش داده می‌شود.

اکنون بخش front-end برنامه وب آماده است.

۵. مرحله ۳: ساخت بک‌اند (هوش مصنوعی مولد)

بیایید بخش اصلی این برنامه وب را بنویسیم. فایل 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')

در اصل کاری که این کد انجام می‌دهد به شرح زیر است:

1. این کد کتابخانه‌های لازم برای برنامه را وارد می‌کند:

فلسک: یک چارچوب وب سبک برای پایتون.

os: برای تعامل با سیستم عامل.

تصادفی: برای تولید اعداد تصادفی.

vertexai: کتابخانه کلاینت هوش مصنوعی Vertex.

GenerativeModel و Image: کلاس‌هایی از کتابخانه‌ی مدل‌های مولد هوش مصنوعی Vertex.

2. مقداردهی اولیه برنامه flask:

در مرحله بعد، برنامه Flask را راه‌اندازی اولیه می‌کند و حداکثر اندازه مجاز برای تصاویر آپلود شده را روی ۱۶ مگابایت تنظیم می‌کند.

3. مقداردهی اولیه کلاینت هوش مصنوعی Vertex

این دستور، کتابخانه کلاینت Vertex AI را با شناسه و مکان پروژه مشخص شده، مقداردهی اولیه می‌کند. حتماً YOUR_PROJECT_ID را با شناسه پروژه خود جایگزین کنید.

4. تعریف تابع تولید

این تابع یک تصویر wireframe، یک مدل مولد و یک prompt را به عنوان ورودی می‌گیرد. سپس html وب‌سایت را با استفاده از مدل و prompt مشخص شده تولید می‌کند. پاسخ تولید شده به صورت یک رشته برگردانده می‌شود.

5. تعریف مسیر صفحه اصلی

این تابع مسیر صفحه اصلی را تعریف می‌کند. وقتی کاربر از آدرس ریشه برنامه بازدید می‌کند، این تابع فراخوانی می‌شود. این تابع قالب index.html را که صفحه اصلی برنامه است، رندر می‌کند.

6. تعریف مسیر پاسخ

این تابع مسیر پاسخ را تعریف می‌کند. وقتی کاربر فرم را در صفحه اصلی ارسال می‌کند، این تابع فراخوانی می‌شود. تصویر، مدل و اعلان آپلود شده را پردازش می‌کند و سپس کد وب‌سایت را تولید می‌کند. پاسخ تولید شده در تب جدید نمایش داده می‌شود.

7. اجرای برنامه

این بخش از کد بررسی می‌کند که آیا اسکریپت به عنوان برنامه اصلی اجرا می‌شود یا خیر. در این صورت، پورت سرور را از متغیرهای محیطی دریافت کرده و برنامه را روی پورت مشخص شده اجرا می‌کند.

۶. مرحله ۴: آماده‌سازی وابستگی‌ها و داکرفایل

مطمئن شوید که وابستگی‌های زیر را در فایل 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"]

۷. مرحله ۵: استقرار برنامه وب

حالا که کامپوننت‌های برنامه را ایجاد کرده‌ایم، بیایید برنامه را مستقر کنیم.

به ترمینال Cloud Shell بروید و مطمئن شوید که پروژه فعلی با پروژه فعال شما پیکربندی شده است، در غیر این صورت از دستور gcloud configure برای تنظیم شناسه پروژه استفاده کنید:

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/

ادامه دهید و برنامه خود را آزمایش کنید:

۸. تمیز کردن

برای جلوگیری از تحمیل هزینه به حساب Google Cloud خود برای منابع استفاده شده در این codelab، این مراحل را دنبال کنید:

1. در کنسول گوگل کلود، به صفحه مدیریت منابع بروید.
2. در لیست پروژه‌ها، پروژه‌ای را که می‌خواهید حذف کنید انتخاب کنید و سپس روی «حذف» کلیک کنید.
3. در کادر محاوره‌ای، شناسه پروژه را تایپ کنید و سپس برای حذف پروژه، روی خاموش کردن کلیک کنید.
4. روش دیگر این است که به Cloud Run در کنسول بروید، سرویسی را که اخیراً مستقر کرده‌اید انتخاب کرده و حذف کنید.

۹. تبریک

تبریک! شما با موفقیت یک برنامه وب سریع در پایتون فلاسک که روی Cloud Run مستقر شده است، ساختید که نقاشی‌ها را به وب‌سایت تبدیل می‌کند. مخزن کامل اینجاست . برنامه رسم یک وب‌سایت، قدرت متحول‌کننده Gemini را در ساده‌سازی فرآیند توسعه وب نشان می‌دهد. با بهره‌گیری از هوش مصنوعی، می‌توانیم طراحان و توسعه‌دهندگان را قادر سازیم تا وب‌سایت‌هایی با سرعت، دقت و خلاقیت بیشتر ایجاد کنند. با تکامل مدل‌های هوش مصنوعی مولد، می‌توانیم انتظار برنامه‌های پیشگامانه‌تری را در آینده داشته باشیم.