Vẽ trang web: Biến trí tưởng tượng của bạn thành một trang web bằng các mô hình Gemini!

1. Giới thiệu

Trong lĩnh vực phát triển web, quá trình chuyển đổi một ý tưởng thiết kế thành một trang web có chức năng có thể tốn nhiều thời gian và phức tạp. Tuy nhiên, với sự ra đời của các mô hình AI tạo sinh như Gemini, quy trình này ngày càng trở nên tinh giản và dễ tiếp cận hơn. Chúng tôi sẽ xây dựng một giải pháp chuyên chuyển đổi khung sườn vẽ tay thành mã trang web. Công cụ mạnh mẽ này giúp cả nhà thiết kế và nhà phát triển dễ dàng hiện thực hoá tầm nhìn về trang web của họ một cách hiệu quả chưa từng có.

Trong phòng thí nghiệm này, chúng ta sẽ tạo một ứng dụng web cho phép người dùng tạo mã trang web (html, css và javascript) từ các bản phác thảo và câu lệnh mà người dùng nhập bằng cách sử dụng Mô hình AI tạo sinh của Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro, v.v.). Ứng dụng này sẽ được tạo bằng Flask (một khung web Python phổ biến) và sẽ sử dụng thư viện ứng dụng Vertex AI để tương tác với dịch vụ Mô hình tạo sinh.

Sản phẩm bạn sẽ tạo ra

Khi kết thúc bài thực hành này, bạn sẽ có một ứng dụng web hoạt động được, có thể tạo hình ảnh từ khung hình và câu lệnh. Bạn cũng sẽ hiểu rõ hơn về cách sử dụng các mô hình AI tạo sinh của Vertex AI.

Ứng dụng web của bạn sẽ có dạng như sau:

Cách hoạt động của ứng dụng

1. Tải bản phác thảo vẽ tay lên: Người dùng có thể tải hình ảnh bản phác thảo vẽ tay lên ứng dụng.
2. Chọn một mô hình: Ứng dụng này cung cấp nhiều mô hình Gemini được huấn luyện trước và tối ưu hoá cho nhiều kiểu thiết kế.
3. Đưa ra câu lệnh: Người dùng có thể cung cấp câu lệnh dạng văn bản (không bắt buộc) để hướng dẫn quá trình tạo của mô hình.
4. Tạo mã trang web: Ứng dụng sẽ gửi khung hình và câu lệnh đến Gemini. Gemini sẽ tạo mã trang web tương ứng.
5. Hiển thị kết quả: Mã được tạo sẽ xuất hiện trên trang phản hồi của ứng dụng.

Chúng ta sẽ bắt đầu bằng cách thảo luận về những điều cơ bản của khung sườn và câu lệnh, cũng như cách sử dụng chúng để tạo mã trang web. Sau đó, chúng ta sẽ xem xét các bước xây dựng ứng dụng web, bao gồm cả cách xử lý hoạt động đầu vào của người dùng, tạo phản hồi và hiển thị kết quả.

2. Trước khi bắt đầu

1. Trong Google Cloud Console, trên trang chọn dự án, hãy chọn hoặc tạo một dự án trên Google Cloud.
2. Đảm bảo bạn đã bật tính năng thanh toán cho dự án trên Google Cloud của mình. Tìm hiểu cách kiểm tra xem tính năng thanh toán có được bật trên một dự án hay không.
3. Bạn sẽ sử dụng Cloud Shell, một môi trường dòng lệnh chạy trong Google Cloud. Để truy cập vào Cloud Shell, hãy nhấp vào Activate Cloud Shell (Kích hoạt Cloud Shell) ở đầu bảng điều khiển Cloud.

4. Sau khi kết nối với Cloud Shell, bạn có thể kiểm tra để đảm bảo rằng bạn đã được xác thực và dự án được đặt thành mã dự án của bạn bằng lệnh sau:

gcloud auth list

5. Chạy lệnh sau trong Cloud Shell để xác nhận rằng lệnh gcloud biết về dự án của bạn.

gcloud config list project

6. Nếu bạn chưa đặt dự án, hãy dùng lệnh sau để đặt:

gcloud config set project <YOUR_PROJECT_ID>

7. Đảm bảo rằng bạn đã bật các API sau:

• Cloud Run
• Vertex AI

Ngoài việc sử dụng lệnh gcloud, bạn có thể truy cập vào bảng điều khiển bằng cách sử dụng đường liên kết này. Tham khảo tài liệu để biết các lệnh và cách sử dụng gcloud.

3. Bước 1: Khởi động một ứng dụng web Python Cloud Run

Trước tiên, chúng ta sẽ tạo mẫu ứng dụng web Cloud Run bằng Python từ Cloud Shell.

Chuyển đến Cloud Shell Terminal (Cửa sổ dòng lệnh Cloud Shell) rồi nhấp vào nút Open Editor (Mở trình chỉnh sửa).

Đảm bảo dự án Cloud Code được đặt ở góc dưới bên trái (thanh trạng thái) của trình chỉnh sửa Cloud Shell, như được đánh dấu trong hình bên dưới và được đặt thành dự án Google Cloud đang hoạt động mà bạn đã bật tính năng thanh toán. Uỷ quyền nếu được nhắc.

Nhấp vào dự án đang hoạt động đó trên thanh trạng thái và đợi cửa sổ bật lên Cloud Code mở ra. Trong cửa sổ bật lên, hãy chọn "Ứng dụng mới".

Trong danh sách ứng dụng, hãy chọn Ứng dụng Cloud Run:

Đối với trang 2/2, hãy chọn mẫu Python Flask:

Đặt tên cho dự án theo ý muốn (ví dụ: "amazing-gemini-app") rồi nhấp vào OK:

Thao tác này sẽ mở mẫu cho dự án mới mà bạn vừa thiết lập.

Đó là cách đơn giản để khởi động một ứng dụng web bằng Google Cloud Shell.

4. Bước 2: Xây dựng giao diện người dùng

Để làm được việc đó, chúng ta sẽ cần một trang HTML. Trang đó sẽ chứa mã xác định giao diện người dùng cho ứng dụng web. Công cụ này có một biểu mẫu cho phép người dùng tải hình ảnh khung sườn vẽ tay lên, chọn một mô hình tạo sinh và cung cấp câu lệnh dạng văn bản. Sau khi bạn gửi biểu mẫu, kết quả sẽ xuất hiện trong một thẻ khác.

Sao chép mã bên dưới và thay thế tệp index.html trong thư mục 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>

Khi người dùng tương tác với ứng dụng, các hành động sau sẽ xảy ra:

1. Người dùng chọn một hình ảnh khung, chọn một mô hình và nhập câu lệnh.
2. Khi người dùng nhấp vào nút "Gửi", dữ liệu biểu mẫu (hình ảnh, mô hình và câu lệnh) sẽ được gửi đến URL /response bằng phương thức POST trong giao thức HTTP.
3. Mã phía máy chủ (được triển khai trong app.py) xử lý dữ liệu biểu mẫu và tạo phản hồi bằng mô hình và câu lệnh đã chỉ định.
4. Câu trả lời được tạo sẽ xuất hiện trong thẻ mới.

Giờ đây, chúng ta đã sẵn sàng với phần giao diện người dùng của ứng dụng web.

5. Bước 3: Xây dựng phần phụ trợ (AI tạo sinh)

Hãy viết phần chính của ứng dụng web này. Tệp app.py nhận hình ảnh đầu vào của người dùng, lựa chọn về mô hình và câu lệnh rồi chuyển đổi thành mã trang web.

Sao chép toàn bộ mã cho 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')

Về cơ bản, mã này sẽ thực hiện những việc sau:

1. Mã này nhập các thư viện cần thiết cho ứng dụng:

Flask: Một khung web nhẹ cho Python.

os: Để tương tác với hệ điều hành.

random: Để tạo số ngẫu nhiên.

vertexai: Thư viện ứng dụng Vertex AI.

GenerativeModel và Image: Các lớp trong thư viện Mô hình tạo sinh của Vertex AI.

2. Khởi chạy ứng dụng flask:

Tiếp theo, nó khởi tạo ứng dụng Flask và đặt kích thước tối đa cho phép đối với hình ảnh được tải lên là 16 MB.

3. Khởi chạy ứng dụng Vertex AI

Thao tác này sẽ khởi tạo thư viện ứng dụng Vertex AI bằng mã dự án và vị trí đã chỉ định. Nhớ thay thế YOUR_PROJECT_ID bằng mã dự án của bạn.

4. Xác định hàm tạo

Hàm này nhận một hình ảnh khung sườn, một mô hình tạo sinh và một câu lệnh làm dữ liệu đầu vào. Sau đó, ứng dụng sẽ tạo html cho trang web bằng mô hình và câu lệnh đã chỉ định. Câu trả lời được tạo sẽ được trả về dưới dạng một chuỗi.

5. Xác định tuyến đường đến Trang chủ

Hàm này xác định tuyến trang chủ. Khi người dùng truy cập vào URL gốc của ứng dụng, hàm này sẽ được gọi. Thao tác này kết xuất mẫu index.html, là trang chủ của ứng dụng.

6. Xác định tuyến phản hồi

Hàm này xác định tuyến phản hồi. Khi người dùng gửi biểu mẫu trên trang chủ, hàm này sẽ được gọi. Công cụ này xử lý hình ảnh, mô hình và câu lệnh đã tải lên, sau đó tạo mã trang web. Câu trả lời được tạo sẽ xuất hiện trong thẻ mới.

7. Chạy ứng dụng

Phần mã này kiểm tra xem tập lệnh có đang chạy dưới dạng chương trình chính hay không. Nếu có, nó sẽ lấy cổng máy chủ từ các biến môi trường và chạy ứng dụng trên cổng được chỉ định.

6. Bước 4: Chuẩn bị các phần phụ thuộc và Dockerfile

Đảm bảo bạn có các phần phụ thuộc sau trong tệp requirements.txt:

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

Thay thế nội dung Dockerfile bằng nội dung bên dưới:

# 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. Bước 5: Triển khai Ứng dụng web

Giờ đây, khi đã tạo các thành phần ứng dụng, hãy triển khai ứng dụng.

Chuyển đến Cloud Shell Terminal và đảm bảo dự án hiện tại được định cấu hình cho dự án đang hoạt động của bạn. Nếu không, bạn phải dùng lệnh gcloud configure để đặt mã dự án:

gcloud config set project [PROJECT_ID]

Sau đó, hãy nhập lần lượt các lệnh sau theo thứ tự:

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

Thao tác này sẽ nhắc bạn nhập tên cho dịch vụ của mình, giả sử là "draw-website". Chọn số tương ứng cho khu vực "us-central1". Nói "y" khi được hỏi liệu bạn có muốn cho phép lệnh gọi chưa được xác thực hay không. Xin lưu ý rằng chúng tôi đang cho phép truy cập chưa xác thực tại đây vì đây là một ứng dụng minh hoạ. Bạn nên sử dụng phương thức xác thực phù hợp cho các ứng dụng doanh nghiệp và ứng dụng phát hành công khai.

Sau khi quá trình triển khai hoàn tất, bạn sẽ nhận được một đường liên kết tương tự như đường liên kết bên dưới:

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

Hãy tiến hành kiểm thử ứng dụng của bạn:

8. Dọn dẹp

Để tránh phát sinh phí cho tài khoản Google Cloud của bạn đối với các tài nguyên được dùng trong lớp học lập trình này, hãy làm theo các bước sau:

1. Trong bảng điều khiển Google Cloud, hãy chuyển đến trang Quản lý tài nguyên.
2. Trong danh sách dự án, hãy chọn dự án mà bạn muốn xoá, rồi nhấp vào Xoá.
3. Trong hộp thoại, hãy nhập mã dự án rồi nhấp vào Tắt để xoá dự án.
4. Ngoài ra, bạn có thể chuyển đến Cloud Run trên bảng điều khiển, chọn dịch vụ bạn vừa triển khai rồi xoá.

9. Xin chúc mừng

Xin chúc mừng! Bạn đã tạo thành công một ứng dụng web nhanh bằng Python Flask được triển khai trên Cloud Run, có chức năng chuyển đổi bản vẽ thành trang web. Bạn có thể xem toàn bộ kho lưu trữ tại đây. Ứng dụng vẽ trang web cho thấy sức mạnh cải tiến của Gemini trong việc tinh giản quy trình phát triển web. Bằng cách tận dụng AI, chúng tôi có thể giúp các nhà thiết kế và nhà phát triển tạo ra những trang web có tốc độ, độ chính xác và khả năng sáng tạo cao hơn. Khi các mô hình AI tạo sinh tiếp tục phát triển, chúng ta có thể kỳ vọng sẽ có nhiều ứng dụng mang tính đột phá hơn nữa trong tương lai.