1. Giới thiệu
Trong lĩnh vực phát triển web, quá trình chuyển đổi khái niệm thiết kế thành một trang web chức năng có thể vừa tốn thời gian vừa 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 đơn 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 dây vẽ thủ công thành mã trang web. Công cụ mạnh mẽ này trao quyền cho các nhà thiết kế cũng như nhà phát triển để hiện thực hoá tầm nhìn về trang web của họ một cách dễ dàng và hiệu quả chưa từng có.
Trong phòng thí nghiệm này, chúng ta sẽ xây dựng một ứng dụng web cho phép người dùng tạo mã trang web (html, css và javascript) từ khung xương và câu lệnh mà người dùng nhập vào bằ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 xây dựng bằng Flask (một khung chương trình 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 phòng thí nghiệm này, bạn sẽ có một ứng dụng web hoạt động có thể tạo hình ảnh từ khung xương 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 luồng ứng dụng
- Tải khung dây vẽ tay lên: Người dùng có thể tải hình ảnh khung dây vẽ tay lên ứng dụng.
- Chọn một mô hình: Ứng dụng cung cấp một số mô hình Gemini được huấn luyện trước, được tối ưu hoá cho các kiểu thiết kế khác nhau.
- Cung cấp lời nhắc: Người dùng có thể tuỳ ý cung cấp lời nhắc bằng văn bản để hướng dẫn tạo mô hình.
- Tạo mã trang web: Ứng dụng gửi khung dây và câu lệnh cho Gemini để tạo mã trang web tương ứng.
- Hiển thị kết quả: Mã đã tạo xuất hiện trong trang phản hồi của ứng dụng.
Chúng ta sẽ bắt đầu bằng việc thảo luận những thông tin cơ bản về khung xương 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ẽ hướng dẫn 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
- Trong Google Cloud Console, trên trang bộ chọn dự án, hãy chọn hoặc tạo một dự án trên Google Cloud.
- Nhớ bật tính năng thanh toán cho dự án Google Cloud của bạn. 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.
- Bạn 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 dịch vụ này, hãy nhấp vào Kích hoạt Cloud Shell ở đầu bảng điều khiển Google Cloud.
- Sau khi kết nối với Cloud Shell, bạn cần kiểm tra để chắc chắn rằng mình đã được xác thực và dự án được đặt thành mã dự án bằng lệnh sau đây:
gcloud auth list
- 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
- Nếu dự án của bạn chưa được thiết lập, hãy sử dụng lệnh sau để thiết lập dự án:
gcloud config set project <YOUR_PROJECT_ID>
- Đảm bảo rằng các API sau đã được bật:
- Cloud Run
- Vertex AI
Lựa chọn thay thế cho việc sử dụng lệnh gcloud là thông qua bảng điều khiển bằng đường liên kết này. Hã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: Tự thân khởi nghiệp bằng ứ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 Cloud Shell.
Chuyển đến Cloud Shell Terminal rồi nhấp vào nút Open Editor (Mở trình chỉnh sửa). 
Hãy đảm bảo rằng dự án Cloud Code (Mã đám mây) được đặt ở góc dưới cùng bên trái (thanh trạng thái) của trình chỉnh sửa Cloud Shell (như được làm nổi bật 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.
Hãy nhấp vào dự án đang hoạt động đó trên thanh trạng thái và đợi Mã đám mây bật lên. Trong cửa sổ bật lên, hãy chọn "New Application" (Ứng dụng mới). 
Trong danh sách ứng dụng, hãy chọn Cloud Run Application (Ứng dụng Cloud Run):
Đối với trang 2/2, chọn mẫu Python Flask:
Cung cấp tên dự án theo ý bạn (ví dụ: "amazing-gemini-app") rồi nhấp vào OK:
Thao tác này sẽ mở mẫu của dự án mới mà bạn vừa thiết lập.
Việc khởi động một ứng dụng web bằng Google Cloud Shell thật đơn giản.
4. Bước 2: Xây dựng giao diện người dùng
Để làm được điều đó, chúng tôi cần có trang HTML. Trang đó sẽ chứa mã xác định giao diện người dùng cho ứng dụng web. Trong đó có một biểu mẫu cho phép người dùng tải hình ảnh khung dây vẽ bằng tay lên, chọn một mô hình tạo sinh và đưa ra 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ệpindex.html của bạn 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 đây sẽ xảy ra:
- Người dùng chọn hình ảnh khung xương, chọn một mô hình và nhập câu lệnh.
- 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 HTTP POST.
- Mã phía máy chủ (triển khai trong app.py) sẽ xử lý dữ liệu biểu mẫu và tạo phản hồi bằng cách sử dụng mô hình và câu lệnh được chỉ định.
- Câu trả lời được tạo sẽ xuất hiện trong thẻ mới.
Chúng ta hiện đã 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 lấy hình ảnh do người dùng nhập, lựa chọn mô hình và lời nhắc rồi chuyển đổi thành mã trang web.
Sao chép mã đầy đủ 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 có chức năng sau đây:
- Mã này nhập các thư viện cần thiết cho ứng dụng:
Flask: Một khung web gọn nhẹ dành cho Python.
hệ điều hành: Để tương tác với hệ điều hành.
ngẫu nhiên: Để 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.
- Khởi động ứng dụng bình giữ nhiệt:
Tiếp theo, ứng dụng sẽ khởi chạy ứng dụng Flask và đặt kích thước tối đa cho phép đối với các hình ảnh được tải lên là 16 MB.
- Khởi chạy ứng dụng Vertex AI
Phương thức này sẽ khởi chạy thư viện ứng dụng Vertex AI bằng vị trí và mã dự án đã chỉ định. Hãy nhớ thay thếYour_PROJECT_ID bằng mã dự án của bạn.
- Xác định hàm tạo
Hàm này lấy hình ảnh khung xương, mô hình tạo sinh và câu lệnh làm dữ liệu đầu vào. Sau đó, công cụ này tạo html của trang web bằng mô hình và câu lệnh đã chỉ định. Phản hồi đã tạo được trả về dưới dạng chuỗi.
- Xác định Tuyến trang chủ
Hàm này xác định tuyến của 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 sẽ hiển thị mẫuindex.html, là trang chủ của ứng dụng.
- Xác định lộ trình 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 sẽ 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.
- Chạy ứng dụng
Phần này của mã kiểm tra xem tập lệnh có đang được chạy dưới dạng chương trình chính hay không. Nếu có, hệ thống 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 đã chỉ định.
6. Bước 4: Chuẩn bị phần phụ thuộc và Dockerfile
Hãy đảm bảo rằng bạn có các phần phụ thuộc sau đây trong tệp đòi hỏi.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 dưới đây:
# 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
Bây giờ, chúng ta đã 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 thành dự án đang hoạt động. Nếu chưa, hãy dùng lệnh gcloud configuration để đặt mã dự án:
gcloud config set project [PROJECT_ID]
Sau đó, hãy nhập từng lệnh sau theo thứ tự đó:
cd draw-a-website
gcloud run deploy --source .
Nút này sẽ nhắc bạn nhập tên cho dịch vụ của bạn, giả sử như "draw-website". Chọn số tương ứng cho khu vực "us-central1". Nói "y" khi ứng dụng hỏi bạn có muốn cho phép lời gọi chưa được xác thực hay không. Lưu ý rằng chúng tôi đang cho phép quyền truy cập chưa được xác thực ở đây vì đây là ứng dụng minh hoạ. Bạn nên sử dụng phương pháp xác thực phù hợp cho các ứng dụng chính thức và doanh nghiệp.
Sau khi triển khai xong, bạn sẽ nhận được một đường liên kết tương tự như bên dưới:
**https://draw-website-*****eua-uc.a.run.app/
Hãy tiếp tục và kiểm thử ứng dụng của bạn:
8. Dọn dẹp
Để tránh bị tính phí vào tài khoản Google Cloud cho những tài nguyên sử dụng trong lớp học lập trình này, hãy làm theo các bước sau:
- Trong bảng điều khiển Google Cloud, hãy chuyển đến trang Quản lý tài nguyên.
- Trong danh sách dự án, hãy chọn dự án mà bạn muốn xoá, sau đó nhấp vào Delete (Xoá).
- Trong hộp thoại, hãy nhập mã dự án rồi nhấp vào Tắt để xoá dự án.
- 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 chạy nhanh trong Python Flask và được triển khai trên Cloud Run. Ứng dụng này sẽ chuyển đổi các bản vẽ thành trang web. Kho lưu trữ đầy đủ có tại đây. Ứng dụng vẽ trên một trang web cho thấy sức mạnh chuyển đổi của Gemini trong việc đơn giản hoá quá trình phát triển web. Bằng cách khai thác công nghệ trí tuệ nhân tạo, chúng tôi có thể hỗ trợ các nhà thiết kế và nhà phát triển xây dựng trang web với 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 tôi có thể kỳ vọng sẽ có thêm nhiều ứng dụng đột phá trong tương lai.