דף זה תורגם על ידי Cloud Translation API.

משרטטים אתר: אפשר להפוך את הדמיון לאתר בעזרת מודלים של Gemini!

1. מבוא

בעולם פיתוח האתרים, תהליך הטרנספורמציה של קונספט עיצובי לאתר פונקציונלי יכול להיות מורכב ולגזול זמן רב. עם זאת, בעקבות ההמצאות של מודלים של בינה מלאכותית גנרטיבית כמו Gemini, התהליך הזה הופך לנגיש יותר ויותר יעיל. אנחנו נבנה פתרון שמתמחה בהמרת פריימים שנוצרו באופן ידני לקוד של אתר. הכלי העוצמתי הזה מאפשר למעצבים ולמפתחים גם להפוך את החזון של האתר למציאות, בקלות וביעילות חסרת תקדים.

בשיעור ה-Lab הזה נפתח אפליקציית אינטרנט שמאפשרת למשתמשים ליצור קוד אתר (html, css ו-JavaScript) ממסגרות Wi-Fi ומהנחיות שהמשתמשים מזינים באמצעות מודלים של AI גנרטיבי של Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro וכו'). האפליקציה תיפתח באמצעות Flask, מסגרת אינטרנט פופולרית של Python, והיא תשתמש בספריית הלקוח של Vertex AI כדי ליצור אינטראקציה עם שירות המודלים הגנרטיביים.

מה תפַתחו

בסוף שיעור ה-Lab הזה כבר תהיה לכם אפליקציית אינטרנט פעילה שיכולה ליצור תמונות ממסגרות חוטים ומהנחיות. תהיה לכם גם הבנה טובה יותר לגבי אופן השימוש במודלים של בינה מלאכותית גנרטיבית של Vertex AI.

אפליקציית האינטרנט תיראה כך:

איך האפליקציה זורמת

העלאת מסגרת תיל בעבודת יד: המשתמשים יכולים להעלות לאפליקציה תמונה של המסגרת הרעיונית שלהם.
בחירת דגם: האפליקציה מספקת מבחר מודלים של Gemini שעברו אימון מקדים, שמותאמים לסגנונות עיצוב שונים.
כתיבת הנחיה: המשתמשים יכולים לספק הנחיית טקסט כדי להנחות את המודל ליצירת המודל.
יצירת קוד אתר: האפליקציה שולחת את המסגרת הרעיונית ואת ההנחיה ל-Gemini, שיוצר את קוד האתר התואם.
הצגת התוצאה: הקוד שנוצר מוצג בדף התגובה של האפליקציה.

נתחיל בדיון על העקרונות הבסיסיים של Wireframes והנחיות ואיך אפשר להשתמש בהם כדי ליצור קוד אתר. לאחר מכן נעבור על השלבים של פיתוח אפליקציית האינטרנט, כולל איך לטפל בקלט של משתמשים, ליצור תגובה ולהציג את התוצאות.

2. לפני שמתחילים

במסוף Google Cloud, בדף בורר הפרויקטים, בוחרים או יוצרים פרויקט ב-Google Cloud.
צריך לוודא שהחיוב מופעל בפרויקט שלכם ב-Cloud. איך בודקים אם החיוב מופעל בפרויקט
משתמשים ב-Cloud Shell, סביבת שורת הפקודה שפועלת ב-Google Cloud. כדי לגשת אליו, לוחצים על Activate Cloud Shell בחלק העליון של מסוף Google Cloud.

אחרי ההתחברות ל-Cloud Shell, בודקים שהאימות כבר בוצע ושהפרויקט מוגדר למזהה הפרויקט שלכם, באמצעות הפקודה הבאה:

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

קודם כל ניצור מ-Cloud Shell את תבנית אפליקציית האינטרנט של Python ל-Cloud Run.

עוברים אל Terminal Cloud Shell ולוחצים על הלחצן Open Editor.

צריך לוודא שהפרויקט ב-Cloud Code מוגדר בפינה השמאלית התחתונה (שורת הסטטוס) של עורך Cloud Shell, כפי המודגש בתמונה למטה, ומוגדר לפרויקט הפעיל ב-Google Cloud שבו הפעלתם את החיוב. מעניקים הרשאה אם מתבקשים לעשות זאת.

לוחצים על הפרויקט הפעיל בשורת הסטטוס וממתינים לפתיחת החלון הקופץ של Cloud Code. בחלון הקופץ, בוחרים באפשרות New Application (אפליקציה חדשה).

מרשימת האפליקציות, בוחרים באפשרות Cloud Run Application (אפליקציית Cloud Run):

בדף 2/2, בוחרים תבנית Python Flask:

מציינים את שם הפרויקט שרוצים (למשל, 'amazing-gemini-app') ולוחצים על OK (אישור):

הפעולה הזו תפתח את התבנית לפרויקט החדש שהגדרתם.

כמה פשוט מאוד לאתחל אפליקציית אינטרנט באמצעות Google Cloud Shell.

4. שלב 2: בניית הקצה הקדמי

לשם כך, נזדקק לדף 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>

כשמשתמש יוצר אינטראקציה עם האפליקציה, מתרחשות הפעולות הבאות:

המשתמש בוחר תמונת שרטוט, בוחר דגם ומזין הנחיה.
כשהמשתמש לוחץ על הלחצן 'שליחה'. נתוני הטופס (תמונה, מודל והנחיה) נשלחים לכתובת ה-URL /response באמצעות שיטת HTTP POST.
הקוד בצד השרת (שמוטמע ב-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: לאינטראקציה עם מערכת ההפעלה.

אקראיות: ליצירת מספרים אקראיים.

vertexai: ספריית הלקוח של Vertex AI.

Generative Model and Image: כיתות מספריית המודלים של Vertex AI גנרטיבי.

מאתחל את אפליקציית הבקבוקונים:

בשלב הבא, הוא מפעיל את אפליקציית Flask ומגדיר את הגודל המקסימלי המותר לתמונות שהועלו ל-16MB.

אתחול הלקוח של Vertex AI

הוא מאתחל את ספריית הלקוח של Vertex AI עם מזהה הפרויקט והמיקום שצוינו. חשוב להחליף את ה-PROJECT_ID במזהה הפרויקט שלך.

הגדרת הפונקציה generate

הפונקציה הזו לוקחת תמונת Wireframe, מודל גנרטיבי והנחיה כקלט. לאחר מכן היא יוצרת את ה-HTML של האתר באמצעות המודל וההנחיה שצוינו. התגובה שנוצרה מוחזרת כמחרוזת.

הגדרת הנתיב בדף הבית

הפונקציה הזו מגדירה את הנתיב של דף הבית. כשמשתמש מבקר בכתובת ה-URL הבסיסית של האפליקציה, מתבצעת קריאה לפונקציה הזו. הוא מעבד את התבנית index.html, שהיא דף הבית של האפליקציה.

הגדרת נתיב התגובה

הפונקציה הזו מגדירה את נתיב התגובה. כשמשתמש שולח את הטופס בדף הבית, מופעלת פונקציה זו. המערכת מעבדת את התמונה, המודל וההנחיה שהועלו, ואז יוצרת את קוד האתר. התגובה שנוצרה תוצג בכרטיסייה החדשה.

הרצת האפליקציה

החלק הזה בקוד בודק אם הסקריפט רץ כתוכנה הראשית. במקרה כזה, היא מקבלת את יציאת השרת ממשתני הסביבה ומריצה את האפליקציה בשקע שצוין.

6. שלב 4: הכנת יחסי תלות ו-Docker

חשוב לוודא שקובץ התלוי הזה כולל את יחסי התלות הבאים בקובץ pending.txt:

Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-cloud-aiplatform>=1.38

מחליפים את התוכן של קובץ Docker בערכים הבאים:

# 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 configuration כדי להגדיר את מזהה הפרויקט:

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. הסרת המשאבים

כדי לא לצבור חיובים לחשבון Google Cloud עבור המשאבים שבהם השתמשתם ב-Codelab הזה:

במסוף Google Cloud, נכנסים לדף Manage resources:
ברשימת הפרויקטים, בוחרים את הפרויקט שרוצים למחוק ולוחצים על Delete.
כדי למחוק את הפרויקט, כותבים את מזהה הפרויקט בתיבת הדו-שיח ולוחצים על Shut down.
לחלופין, אתם יכולים להיכנס אל Cloud Run במסוף, לבחור את השירות שפרסתם ולמחוק אותו עכשיו.

9. מזל טוב

מעולה! יצרתם בהצלחה אפליקציית אינטרנט מהירה ב-Python Flask שנפרסה ב-Cloud Run, שממירה שרטוטים לאתרים. המאגר המלא נמצא כאן. אפליקציית 'שרטוט אתר' מראה את העוצמה המהפכנית של Gemini לייעל את תהליך פיתוח האתרים. שימוש ב-AI יכול לעזור למעצבים ולמפתחים ליצור אתרים במהירות, ברמת דיוק גבוהה יותר וביצירתיות גבוהה יותר. המודלים של בינה מלאכותית גנרטיבית מתפתחים כל הזמן, ובעתיד צפויות עוד יותר אפליקציות פורצי דרך.