หน้านี้ได้รับการแปลโดย Cloud Translation API

วาดเว็บไซต์: เปลี่ยนจินตนาการของคุณให้เป็นเว็บไซต์ด้วยโมเดล Gemini

1. เกริ่นนำ

ในโลกของการพัฒนาเว็บ ขั้นตอนการเปลี่ยนแนวคิดการออกแบบให้เป็นเว็บไซต์ที่ใช้การได้อาจเป็นได้ทั้งใช้เวลานานและซับซ้อน อย่างไรก็ตาม หลังจากที่มีโมเดล Generative AI เกิดขึ้นอย่าง Gemini ทำให้กระบวนการนี้มีประสิทธิภาพและเข้าถึงได้มากขึ้นเรื่อยๆ เราจะสร้างโซลูชันที่เชี่ยวชาญในการแปลงไวร์เฟรมที่วาดด้วยมือให้เป็นโค้ดของเว็บไซต์ เครื่องมือที่มีประสิทธิภาพนี้ช่วยเพิ่มศักยภาพให้นักออกแบบและนักพัฒนาซอฟต์แวร์ในการทำให้วิสัยทัศน์ด้านเว็บไซต์ของตนเป็นจริงได้อย่างง่ายดายและมีประสิทธิภาพอย่างที่ไม่เคยมีมาก่อน

ในห้องทดลองนี้ เราจะสร้างเว็บแอปพลิเคชันที่ช่วยให้ผู้ใช้สร้างโค้ดเว็บไซต์ (html, CSS และ JavaScript) จากไวร์เฟรมและพรอมต์ที่ผู้ใช้ป้อนโดยใช้โมเดล Generative AI ของ Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro ฯลฯ) แอปพลิเคชันจะสร้างขึ้นโดยใช้ Flask ซึ่งเป็นเฟรมเวิร์กเว็บ Python ยอดนิยม และจะใช้ไลบรารีไคลเอ็นต์ Vertex AI เพื่อโต้ตอบกับบริการโมเดล Generative

สิ่งที่คุณจะสร้าง

เมื่อห้องทดลองนี้สิ้นสุดลง คุณจะมีเว็บแอปพลิเคชันที่ใช้งานได้ซึ่งสามารถสร้างรูปภาพจากไวร์เฟรมและพรอมต์ได้ นอกจากนี้ คุณจะเข้าใจวิธีใช้โมเดล Generative AI ของ Vertex AI ได้ดียิ่งขึ้นอีกด้วย

เว็บแอปพลิเคชันของคุณจะมีลักษณะดังนี้

การทำงานของแอป

อัปโหลดโครงลวดที่วาดด้วยมือ: ผู้ใช้สามารถอัปโหลดรูปภาพของโครงลวดที่วาดด้วยมือลงในแอป
เลือกโมเดล: แอปจะให้ตัวเลือกโมเดล Gemini ที่ฝึกไว้แล้วล่วงหน้า ซึ่งได้รับการเพิ่มประสิทธิภาพมาเพื่อสไตล์การออกแบบที่แตกต่างกัน
ระบุพรอมต์: ผู้ใช้สามารถให้พรอมต์ข้อความเพื่อเป็นแนวทางในการสร้างโมเดลได้
สร้างโค้ดเว็บไซต์: แอปจะส่งไวร์เฟรมและพรอมต์ไปยัง Gemini ซึ่งจะสร้างโค้ดเว็บไซต์ที่เกี่ยวข้อง
แสดงผลลัพธ์: โค้ดที่สร้างขึ้นจะแสดงในหน้าการตอบสนองของแอป

เราจะเริ่มจากการพูดคุยถึงพื้นฐานของไวร์เฟรมและพรอมต์ รวมถึงวิธีใช้เฟรมเวิร์กเหล่านี้สร้างโค้ดเว็บไซต์ จากนั้นเราจะอธิบายขั้นตอนในการสร้างเว็บแอปพลิเคชัน ซึ่งรวมถึงวิธีจัดการข้อมูลจากผู้ใช้ การสร้างคำตอบ และการแสดงผล

2. ก่อนเริ่มต้น

ในคอนโซล Google Cloud ให้เลือกหรือสร้างโปรเจ็กต์ Google Cloud ในหน้าตัวเลือกโปรเจ็กต์
ตรวจสอบว่าเปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ Google Cloud แล้ว ดูวิธีตรวจสอบว่าเปิดใช้การเรียกเก็บเงินในโปรเจ็กต์แล้ว
คุณจะใช้ Cloud Shell ซึ่งเป็นสภาพแวดล้อมบรรทัดคำสั่งที่ทำงานใน Google Cloud หากต้องการเข้าถึง ให้คลิก "เปิดใช้งาน 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 Cloud Run

เราจะสร้างเทมเพลตเว็บแอปพลิเคชัน Python Cloud Run จาก Cloud Shell ก่อน

ไปที่เทอร์มินัล Cloud Shell แล้วคลิกปุ่ม "เปิดเครื่องมือแก้ไข"

ตรวจสอบว่าได้ตั้งค่าโปรเจ็กต์ Cloud Code ไว้ที่มุมล่างซ้าย (แถบสถานะ) ของเครื่องมือแก้ไข Cloud Shell ตามที่ไฮไลต์ในรูปภาพด้านล่าง และตั้งค่าเป็นโปรเจ็กต์ Google Cloud ที่ใช้งานอยู่ซึ่งเปิดใช้การเรียกเก็บเงินอยู่ ให้สิทธิ์ เมื่อมีข้อความแจ้ง

คลิกโปรเจ็กต์ที่ใช้งานอยู่บนแถบสถานะและรอให้ป๊อปอัป Cloud Code เปิดขึ้น ในป๊อปอัป ให้เลือก "แอปพลิเคชันใหม่"

จากรายการแอปพลิเคชัน ให้เลือกแอปพลิเคชัน Cloud Run แล้วทำดังนี้

สำหรับหน้า 2/2 ให้เลือกเทมเพลต Python Flask ดังนี้

ระบุชื่อโปรเจ็กต์ที่คุณต้องการ (เช่น "amazing-gemini-app") แล้วคลิกตกลง

ซึ่งจะเป็นการเปิดเทมเพลตสำหรับโปรเจ็กต์ใหม่ที่คุณเพิ่งตั้งค่า

ซึ่งเป็นวิธีที่ง่ายในการเริ่มต้นเว็บแอปพลิเคชันด้วย Google Cloud Shell

4. ขั้นตอนที่ 2: สร้างฟรอนท์เอนด์

โดยเราจะกำหนดให้มีหน้า HTML หน้านั้นจะมีโค้ดที่กำหนดอินเทอร์เฟซผู้ใช้สำหรับเว็บแอปพลิเคชัน โดยมีแบบฟอร์มที่อนุญาตให้ผู้ใช้อัปโหลดรูปภาพโครงลวดที่วาดด้วยมือ เลือกโมเดลการสร้าง และใส่พรอมต์ข้อความ เมื่อส่งแบบฟอร์ม ผลลัพธ์จะแสดงในแท็บอื่น

คัดลอกโค้ดด้านล่างและแทนที่ไฟล์ 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>

เมื่อผู้ใช้โต้ตอบกับแอป ระบบจะดำเนินการต่อไปนี้

ผู้ใช้เลือกรูปภาพโครงลวด เลือกโมเดล และป้อนพรอมต์
เมื่อผู้ใช้คลิกปุ่ม "ส่ง" ระบบจะส่งข้อมูลแบบฟอร์ม (รูปภาพ โมเดล และข้อความแจ้ง) ไปยัง URL /response โดยใช้เมธอด HTTP POST
โค้ดฝั่งเซิร์ฟเวอร์ (ใช้ใน app.py) จะประมวลผลข้อมูลในแบบฟอร์มและสร้างคำตอบโดยใช้โมเดลและพรอมต์ที่ระบุ
คำตอบที่สร้างขึ้นจะแสดงในแท็บใหม่

ขณะนี้เราพร้อมแล้วกับส่วนฟรอนท์เอนด์ของเว็บแอปพลิเคชัน

5. ขั้นตอนที่ 3: สร้างแบ็กเอนด์ (Generative 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

GenerativeModel และรูปภาพ: คลาสจากไลบรารีโมเดล Vertex AI Generatives

กำลังเริ่มต้นแอปขวดแก้วทดลอง ให้ทำดังนี้

จากนั้นจึงเริ่มต้นแอปพลิเคชัน Flask และกำหนดขนาดสูงสุดที่อนุญาตสำหรับภาพที่อัปโหลดไว้ที่ 16 MB

กำลังเริ่มต้นไคลเอ็นต์ Vertex AI

ไลบรารีนี้จะเริ่มต้นไลบรารีไคลเอ็นต์ Vertex AI ด้วยรหัสโปรเจ็กต์และตำแหน่งที่ระบุ โปรดแทนที่ YOUR_PROJECT_ID ด้วยรหัสโปรเจ็กต์

การกำหนดฟังก์ชันการสร้าง

ฟังก์ชันนี้จะใช้รูปภาพไวร์เฟรม โมเดล Generative และพรอมต์เป็นอินพุต จากนั้นจะสร้าง HTML ของเว็บไซต์โดยใช้โมเดลและข้อความแจ้งที่ระบุ การตอบกลับที่สร้างขึ้นจะแสดงผลเป็นสตริง

การกำหนดเส้นทางของหน้าแรก

ฟังก์ชันนี้กำหนดเส้นทางของหน้าแรก เมื่อผู้ใช้ไปที่ URL รากของแอปพลิเคชัน ระบบจะเรียกฟังก์ชันนี้ โดยจะแสดงเทมเพลต index.html ซึ่งเป็นหน้าแรกของแอปพลิเคชัน

การกำหนดเส้นทางการตอบกลับ

ฟังก์ชันนี้กำหนดเส้นทางการตอบกลับ เมื่อผู้ใช้ส่งแบบฟอร์มในหน้าแรก ระบบจะเรียกใช้ฟังก์ชันนี้ โดยจะประมวลผลรูปภาพ โมเดล และพรอมต์ที่อัปโหลด จากนั้นจึงสร้างโค้ดเว็บไซต์ คำตอบที่สร้างขึ้นจะแสดงในแท็บใหม่

การเรียกใช้แอปพลิเคชัน

โค้ดส่วนนี้จะตรวจสอบว่าสคริปต์นั้นทำงานเป็นโปรแกรมหลักหรือไม่ หากใช้ เซิร์ฟเวอร์จะรับพอร์ตเซิร์ฟเวอร์จากตัวแปรสภาพแวดล้อม แล้วเรียกใช้แอปในพอร์ตที่ระบุ

6. ขั้นตอนที่ 4: เตรียมการอ้างอิงและ Dockerfile

ตรวจสอบว่าคุณมีทรัพยากร Dependency ต่อไปนี้ในไฟล์ประมาณ.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 GCDS เพื่อตั้งค่ารหัสโปรเจ็กต์

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 ให้ไปที่หน้าจัดการทรัพยากร
ในรายการโปรเจ็กต์ ให้เลือกโปรเจ็กต์ที่ต้องการลบ แล้วคลิกลบ
ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์ แล้วคลิกปิดเครื่องเพื่อลบโปรเจ็กต์
นอกจากนี้ คุณยังไปที่ Cloud Run ในคอนโซล แล้วเลือกบริการที่คุณเพิ่งทำให้ใช้งานได้และลบได้

9. ขอแสดงความยินดี

ยินดีด้วย คุณได้สร้างเว็บแอปพลิเคชันด่วนใน Python Flask ที่ทำให้ใช้งานได้บน Cloud Run แปลงภาพวาดเป็นเว็บไซต์เรียบร้อยแล้ว ดูที่เก็บฉบับเต็มได้ที่นี่ แอปวาดเขียนเว็บไซต์แสดงพลังที่พลิกโฉมของ Gemini ในการเพิ่มประสิทธิภาพให้กับกระบวนการพัฒนาเว็บ การใช้ประโยชน์จาก AI ช่วยให้เราส่งเสริมให้นักออกแบบและนักพัฒนาสร้างเว็บไซต์ได้อย่างรวดเร็ว แม่นยำ และสร้างสรรค์มากขึ้น เนื่องจากโมเดล Generative AI พัฒนาไปอย่างต่อเนื่อง เราจึงคาดหวังได้ว่าจะมีแอปพลิเคชันใหม่ๆ มากมายในอนาคต