วาดเว็บไซต์: เปลี่ยนจินตนาการของคุณให้เป็นเว็บไซต์ด้วยโมเดล 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

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

คัดลอกโค้ดด้านล่างและแทนที่ไฟล์ 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: สร้างแบ็กเอนด์ (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: สำหรับการโต้ตอบกับระบบปฏิบัติการ

random: สำหรับสร้างตัวเลขสุ่ม

vertexai: ไลบรารีไคลเอ็นต์ Vertex AI

GenerativeModel และ Image: คลาสจากไลบรารีโมเดล Generative AI ของ Vertex AI

เริ่มต้นแอป Flask

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

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

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

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

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

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

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

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

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

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

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

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

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

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 สำหรับทรัพยากรที่ใช้ในโค้ดแล็บนี้

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

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

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