1. Giới thiệu
Trong thế giới số với tốc độ thay đổi chóng mặt ngày nay, thời gian là một loại hàng hoá quý giá. YouTube là một kho thông tin khổng lồ, nhưng các video dài có thể khiến bạn mất nhiều thời gian để xem. Đây là lúc các công cụ tóm tắt trên YouTube trở nên vô cùng hữu ích. Các công cụ này giúp tóm tắt hiệu quả những video dài thành bản tóm tắt ngắn gọn, giúp người dùng nhanh chóng nắm bắt được nội dung cốt lõi mà không cần xem toàn bộ video. Tính năng này đặc biệt hữu ích cho học viên, chuyên gia và những người muốn trích xuất thông tin chính từ nội dung video trực tuyến một cách hiệu quả. Về cơ bản, tính năng tóm tắt trên YouTube giúp người dùng tối đa hoá việc học tập và tiếp nhận thông tin, đồng thời giảm thiểu thời gian lãng phí.
Khi kết thúc lớp học lập trình này, bạn sẽ có một ứng dụng web đang hoạt động có thể tạo bản tóm tắt từ các video trên YouTube. Bạn cũng sẽ hiểu rõ hơn về cách sử dụng API Gemini, SDK AI của Google Gen và tích hợp các API này với nhau để tạo một ứng dụng web.
Ứng dụng web của bạn sẽ có dạng như sau:
Bạn chỉ cần cung cấp đường liên kết đến video trên YouTube và Gemini sẽ thực hiện phần còn lại.
2. Trước khi bắt đầu
Lớp học lập trình này giả định rằng bạn đã có một dự án trên Google Cloud đã bật tính năng thanh toán. Nếu chưa có, bạn có thể làm theo hướng dẫn bên dưới để 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.
- Đảm bảo bạn đã bật tính năng thanh toán cho dự án trên Google Cloud. Tìm hiểu cách kiểm tra xem tính năng thanh toán có được bật trên dự án hay không.
- 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 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, hãy kiểm tra để đảm bảo 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
- 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 đặt, hãy sử dụng lệnh sau để đặt dự án:
gcloud config set project <YOUR_PROJECT_ID>
- Đảm bảo rằng bạn đã bật các API sau:
- Cloud Run
- Vertex AI
Bạn có thể sử dụng đường liên kết này để truy cập vào bảng điều khiển thay vì sử dụng lệnh gcloud. Tham khảo tài liệu để biết các lệnh và cách sử dụng gcloud.
Điều kiện tiên quyết
- Có thể đọc và ghi mã Python và HTML
- Dễ dàng làm việc với Gemini API và SDK AI thế hệ mới của Google
- Hiểu biết cơ bản về quy trình phát triển full stack
Kiến thức bạn sẽ học được
- Cách tạo API phụ trợ do Gemini cung cấp bằng thư viện API Flask
- Cách tạo một ứng dụng GenAI liên kết phần phụ trợ và phần giao diện người dùng với nhau
- Cách triển khai ứng dụng GenAI đã phát triển trên Cloud Run
Bạn cần có
- Máy tính đang hoạt động và có Wi-Fi đáng tin cậy
- Một tâm trí tò mò
3. Tạo ứng dụng Python Flask trên Cloud Run
Trước tiên, chúng ta sẽ tạo Ứng dụng Python Flask trên Cloud Run bằng cách sử dụng mẫu được tạo tự động từ Cloud Shell.
Chuyển đến Cửa sổ dòng lệnh Cloud Shell rồi nhấp vào nút 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 làm nổi bật trong hình ả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 "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, hãy chọn mẫu Python Flask:
Đặt tên cho 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 cho dự án mới mà bạn vừa thiết lập.
Đó là cách đơn giản để tạo Ứng dụng Flask Python trên Cloud Run bằng Google Cloud Shell.
4. Tạo phần giao diện người dùng
Như đã nêu trước đó, ứng dụng web hoàn thiện sẽ có giao diện như sau:
Biểu mẫu này chứa một trường nhập để lấy đường liên kết đến video trên YouTube của người dùng, một tuỳ chọn để chọn một gia đình mô hình khác, một textarea để cung cấp lời nhắc bổ sung nếu cần và một nút để gửi biểu mẫu.
Nếu thích thử thách này, bạn có thể tự thiết kế biểu mẫu hoặc chỉnh sửa các thuộc tính CSS. Bạn cũng có thể sao chép mã ở bên dưới rồi thay thế nội dung trong tệp index.html trong thư mục templates (mẫu) bằng mã đó.
<!DOCTYPE html>
<html>
<head>
<title>YouTube Summarizer</title>
<style>
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
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="text"], 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>YouTube Summarizer</h2>
<form action="/summarize" target="_blank" method="post">
<input type="text" name="youtube_link" placeholder="Enter YouTube Link">
<select name="model">
<option value="gemini-2.0-flash-001">Gemini 2.0 Flash</option>
</select>
<textarea name="additional_prompt" placeholder="Write your additional prompt here. For example: 'explain to me like I am five years old'"></textarea>
<button type="submit">Summarize</button>
</form>
</div>
</body>
</html>
Để kiểm tra xem bạn đã thực hiện bước này đúng cách hay chưa, hãy nhấp chuột phải vào app.py rồi chọn Run Python File in Terminal (Chạy tệp Python trong Terminal).
Nếu mọi thứ diễn ra suôn sẻ, bạn sẽ có thể truy cập vào ứng dụng web của mình trên http://127.0.0.1:8080.
5. Xây dựng phần phụ trợ
Sau khi thiết lập phần giao diện người dùng, bạn cần tạo một dịch vụ phụ trợ sử dụng mô hình Gemini để tóm tắt video trên YouTube do người dùng cung cấp. Xin lưu ý rằng bạn sẽ ghi đè app.py để hoàn thành nhiệm vụ này.
Trước khi thay đổi mã, bạn cần tạo một môi trường ảo và cài đặt các thư viện cần thiết để chạy các thành phần Gemini.
Trước tiên, bạn cần thêm thư viện SDK AI Gen của Google vào tệp requirements.txt. Mã sẽ có dạng như sau:
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-genai==1.2.0
Thứ hai, bạn cần tạo một môi trường ảo và cài đặt các gói từ requirements.txt để có thể chạy thành công mã phụ trợ.
- Nhấp vào các thanh ở góc trên cùng bên trái rồi chọn Terminal > New Terminal (Cổng > Cổng mới)
2. Tạo môi trường ảo bằng cách nhập vào dòng lệnh và đợi môi trường đó cài đặt thành công
python -m venv venv source venv/bin/activate pip install -r requirements.txt
Một lần nữa, hãy tự thử thách bản thân và tạo một điểm cuối Gemini bằng cách sử dụng API Flask. Mã của bạn sẽ tương tự như mã được cung cấp bên dưới.
import os
from flask import Flask, render_template, request
from google import genai
from google.genai import types
app = Flask(__name__)
PROJECT_ID = "REPLACE_WITH_YOUR_PROJECT_ID"
client = genai.Client(
vertexai=True,
project=PROJECT_ID,
location="us-central1",
)
# Define the home page route.
@app.route('/', methods=['GET'])
def index():
'''
Renders the home page.
Returns:The rendered template.
'''
return render_template('index.html')
def generate(youtube_link, model, additional_prompt):
# Prepare youtube video using the provided link
youtube_video = types.Part.from_uri(
file_uri=youtube_link,
mime_type="video/*",
)
# If addtional prompt is not provided, just append a space
if not additional_prompt:
additional_prompt = " "
# Prepare content to send to the model
contents = [
youtube_video,
types.Part.from_text(text="""Provide a summary of the video."""),
additional_prompt,
]
# Define content configuration
generate_content_config = types.GenerateContentConfig(
temperature = 1,
top_p = 0.95,
max_output_tokens = 8192,
response_modalities = ["TEXT"],
)
return client.models.generate_content(
model = model,
contents = contents,
config = generate_content_config,
).text
@app.route('/summarize', methods=['GET', 'POST'])
def summarize():
'''
Summarize the user provided YouTube video.
Returns: Summary.
'''
# If the request is a POST request, process the form data.
if request.method == 'POST':
youtube_link = request.form['youtube_link']
model = request.form['model']
additional_prompt = request.form['additional_prompt']
# Generate the summary.
try:
summary = generate(youtube_link, model, additional_prompt)
return summary
except ValueError as e:
raise e
# If the request is a GET request, redirect to the home page.
else:
return redirect('/')
if __name__ == '__main__':
server_port = os.environ.get('PORT', '8080')
app.run(debug=False, port=server_port, host='0.0.0.0')
Về cơ bản, mã này thực hiện những việc sau:
Nhập các thư viện cần thiết:
- Flask: Để tạo ứng dụng web.
- os: Để truy cập vào biến môi trường.
- google.genai: Để tương tác với AI Gemini của Google.
- google.genai.types: Để xác định cấu trúc dữ liệu cho Gemini.
Khởi động ứng dụng Gemini:
- Thư viện này thiết lập kết nối với Vertex AI của Google, cho phép ứng dụng sử dụng mô hình AI Gemini. Hãy nhớ thay thế "REPLACE_WITH_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 đường liên kết đến video trên YouTube, mã nhận dạng mô hình Gemini và một câu lệnh bổ sung làm dữ liệu đầu vào. Sau đó, hàm này sẽ gửi video và câu lệnh đến Gemini rồi trả về văn bản tóm tắt đã tạo.
Xác định tuyến Trang chủ (/):
- Hàm này hiển thị mẫu index.html, trong đó có một biểu mẫu để người dùng nhập đường liên kết đến YouTube.
Xác định Tuyến tóm tắt (/summarize):
- Hàm này xử lý việc gửi biểu mẫu. Hàm này truy xuất đường liên kết YouTube, mô hình và lời nhắc từ biểu mẫu, gọi hàm tạo để lấy bản tóm tắt, sau đó hiển thị bản tóm tắt trong mẫu result.html.
Chạy ứng dụng:
- Hàm này truy xuất cổng máy chủ từ các biến môi trường và khởi động máy chủ web Flask.
Bạn có thể kiểm thử mã bằng cách chạy app.py từ dòng lệnh. Phương thức tương tự như kiểm thử phần giao diện người dùng. Nhấp chuột phải vào app.py rồi chọn Run Python File in Terminal (Chạy tệp Python trong dòng lệnh).
Hãy tiếp tục kiểm thử ứng dụng. Tính năng này sẽ hoạt động như dự kiến.
6. Triển khai ứng dụng web
Giờ đây, khi bạn đã có ứng dụng GenAI đang hoạt động, hãy triển khai ứng dụng đó trên Cloud Run để bạn có thể chia sẻ ứng dụng với bạn bè và đồng nghiệp của mình.
Chuyển đến Cloud Shell Terminal (Màn hình điều khiển Cloud Shell) và đảm bảo dự án hiện tại được định cấu hình thành dự án đang hoạt động của bạn. Nếu không, bạn phải sử dụng lệnh gcloud configure để đặt mã dự án:
gcloud config set project [PROJECT_ID]
Đừng quên thay thế [PROJECT_ID] bằng mã dự án của riêng bạn. Sau đó, nhập lần lượt các lệnh sau theo thứ tự đó:
cd amazing-gemini-app
gcloud run deploy --source .
Bạn sẽ được nhắc nhập tên cho dịch vụ của mình, chẳng hạn như "youtube-summarizer". Chọn số tương ứng cho khu vực "us-central1". Nói "y" khi được hỏi xem bạn có muốn cho phép lệnh gọi chưa xác thực hay không. Xin lưu ý rằng chúng tôi đang cho phép quyền truy cập chưa xác thực tại đây vì đây là ứ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 chính thức.
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://amazing-gemini-app-*******.a.run.app/
Hãy tiếp tục sử dụng ứng dụng của bạn từ cửa sổ Ẩn danh hoặc thiết bị di động. Trang web đã được xuất bản.
7. Thách thức
Giờ là lúc bạn tỏa sáng. Bạn có đủ kiến thức để thay đổi mã để có thể tải video lên ngay từ máy tính không?
8. Dọn dẹp
Để tránh bị tính phí cho tài khoản Google Cloud của bạn đối với các tài nguyên được 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 Google Cloud Console, 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á, rồi nhấp vào Xoá.
- Trong hộp thoại, hãy nhập mã dự án, sau đó nhấp vào Shut down (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á.