این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

1. مقدمه

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

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

چیزی که خواهی ساخت

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

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

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

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

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

2. قبل از شروع

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

پس از اتصال به 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 را بوت استرپ کنید

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

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

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

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

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

برای صفحه 2/2، قالب Python Flask را انتخاب کنید:

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

با این کار الگوی پروژه جدیدی که به تازگی راه اندازی کرده اید باز می شود.

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

4. مرحله 2: Frontend را بسازید

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

کد زیر را کپی کنید و فایل 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>

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

کاربر یک تصویر Wireframe را انتخاب می کند، یک مدل را انتخاب می کند و یک درخواست را وارد می کند.
هنگامی که کاربر روی دکمه "ارسال" کلیک می کند، داده های فرم (تصویر، مدل، و درخواست) با استفاده از روش HTTP POST به آدرس /response ارسال می شود.
کد سمت سرور (پیاده‌شده در app.py) داده‌های فرم را پردازش می‌کند و با استفاده از مدل و درخواست مشخص‌شده، پاسخ را تولید می‌کند.
پاسخ تولید شده در تب جدید نمایش داده می شود.

ما اکنون با بخش جلویی برنامه وب آماده هستیم.

5. مرحله 3: ساخت Backend (AI Generative)

بیایید قسمت اصلی این وب اپلیکیشن را بنویسیم. فایل 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: یک چارچوب وب سبک برای پایتون.

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

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

vertexai: کتابخانه مشتری Vertex AI.

GenerativeModel and Image: کلاس هایی از کتابخانه Vertex AI Generative Models.

راه اندازی برنامه flask:

سپس، برنامه Flask را مقداردهی اولیه می کند و حداکثر اندازه مجاز برای تصاویر آپلود شده را روی 16 مگابایت تنظیم می کند.

راه اندازی Vertex AI Client

کتابخانه مشتری Vertex AI را با شناسه و مکان پروژه مشخص شده اولیه می کند. مطمئن شوید که YOUR_PROJECT_ID را با شناسه پروژه خود جایگزین کنید.

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

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

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

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

تعریف مسیر پاسخگویی

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

در حال اجرای برنامه

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

6. مرحله 4: Dependencies و Dockerfile را آماده کنید

مطمئن شوید که وابستگی های زیر را در فایل requirement.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 برای تنظیم شناسه پروژه استفاده کرده اید:

gcloud config set project [PROJECT_ID]

سپس دستورات زیر را به ترتیب یکی یکی وارد کنید:

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

از شما می خواهد که یک نام برای سرویس خود وارد کنید، مثلاً " طراحی-وب سایت ". شماره مربوطه را برای منطقه " us-central1 " انتخاب کنید. وقتی از شما می پرسد که آیا می خواهید به فراخوان های احراز هویت نشده اجازه دهید، بگویید " y ". توجه داشته باشید که ما در اینجا اجازه دسترسی بدون احراز هویت را می دهیم زیرا این یک برنامه آزمایشی است. توصیه این است که از احراز هویت مناسب برای برنامه های تجاری و تولیدی خود استفاده کنید.

پس از تکمیل استقرار، باید پیوندی شبیه به زیر دریافت کنید:

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

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

8. پاکسازی کنید

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

در کنسول Google Cloud، به صفحه مدیریت منابع بروید.
در لیست پروژه، پروژه ای را که می خواهید حذف کنید انتخاب کنید و سپس روی Delete کلیک کنید.
در محاوره، شناسه پروژه را تایپ کنید و سپس روی Shut down کلیک کنید تا پروژه حذف شود.
یا می‌توانید به Cloud Run در کنسول بروید، سرویسی را که به تازگی مستقر کرده‌اید انتخاب کرده و حذف کنید.

9. تبریک می گویم

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