Xây dựng công cụ tóm tắt video trên YouTube bằng Gemini

1. Giới thiệu

Trong thế giới kỹ thuật số phát triển nhanh chóng ngày nay, thời gian là một tài sản quý giá. YouTube là một kho thông tin khổng lồ, nhưng các video dài có thể tốn rất nhiều thời gian xem. Đây là lúc các công cụ tóm tắt của YouTube trở nên vô cùng hữu ích. Những công cụ này giúp cô đọng hiệu quả các video dài thành bản tóm tắt ngắn gọn, cho phép người dùng nhanh chóng nắm bắt 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à bất kỳ ai muốn trích xuất thông tin chính một cách hiệu quả từ nội dung video trực tuyến. Về cơ bản, công cụ tóm tắt của YouTube giúp người dùng tối đa hoá khả năng học tập và tiếp thu thông tin trong khi giảm thiểu thời gian bỏ 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 và 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 Gemini API, Google Gen AI SDK và tích hợp chúng 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:

13a0825947f9892b.png

Bạn chỉ cần cung cấp đường liên kết đến video trên YouTube và Gemini sẽ lo 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 đám mây 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.

  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.

1829c3759227c19b.png

  1. 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
  1. 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
  1. Nếu bạn chưa đặt dự án, hãy dùng lệnh sau để đặt:
gcloud config set project <YOUR_PROJECT_ID>

Ngoài ra, bạn cũng có thể xem mã PROJECT_ID trong bảng điều khiển

4032c45803813f30.jpeg

Nhấp vào đó, bạn sẽ thấy tất cả dự án và mã dự án ở bên phải

2b4c041c426d8b29.jpeg

  1. Đảm bảo rằng các API sau đã được bật, hãy dùng lệnh sau để đặt API:
  • Vertex AI API
  • Cloud Run Admin API
  • Cloud Build API
  • Cloud Resource Manager API
gcloud services enable aiplatform.googleapis.com \
                           run.googleapis.com \
                           cloudbuild.googleapis.com \
                           cloudresourcemanager.googleapis.com

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.

Điều kiện tiên quyết

  • Có thể đọc và viết mã Python và HTML
  • Thành thạo khi làm việc với Gemini APIGoogle Gen AI SDK
  • Hiểu biết cơ bản về hoạt động phát triển full-stack

Kiến thức bạn sẽ học được

  • Cách tạo API phụ trợ dựa trên Gemini bằng thư viện Flask API
  • Cách tạo một ứng dụng AI tạo sinh liên kết giao diện người dùng và phần phụ trợ 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 hoạt động và 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 mẫu được tạo tự động 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). b16d56e4979ec951.png

Đả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.

LƯU Ý: Có thể mất một lúc sau khi trình chỉnh sửa Cloud Shell khởi động và tải tất cả trình bổ trợ bắt buộc để

Cloud Code - Sign In

sẽ xuất hiện, vui lòng kiên nhẫn

f5003b9c38b43262.png

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". 70f80078e01a02d8.png

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

39abad102a72ae74.png

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

a78b3a0311403ad.png

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

4d8f77279d9509cb.png

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

e85a020a20d38e17.png

Đó là cách đơn giản để tạo một ứng dụng Python Flask trên Cloud Run bằng Google Cloud Shell.

4. Tạo giao diện người dùng

Như đã đề cập trước đó, đây là giao diện của ứng dụng web hoàn chỉnh:

13a0825947f9892b.png

Trang này có một trường nhập dữ liệu để người dùng nhập đường liên kết đến video trên YouTube, một lựa chọn để chọn một họ mô hình khác, một vùng văn bản để cung cấp câu lệnh bổ sung nếu cần và một nút để gửi biểu mẫu.

Nếu bạn thích thử thách, hãy thoải mái thiết kế biểu mẫu của riêng mình 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 bằng mã này.

<!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 thử xem bạn đã thực hiện đúng bước này 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).

690765473f94db9c.png

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 bằng cách nhấp vào nút Web Preview ở phía trên cùng bên phải của Cloud Editor, rồi chọn Preview on port 8080

49cbdfdf77964065.jpeg

5. Tạo phần phụ trợ

Sau khi thiết lập giao diện người dùng, bạn sẽ 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 tất việc 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 Google Gen AI SDK vào tệp requirements.txt. Ứng dụng sẽ hiển thị 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 mã phụ trợ thành công.

  1. Nhấp vào các thanh ở góc trên cùng bên trái rồi chọn Terminal > New Terminal (Thiết bị đầu cuối > Thiết bị đầu cuối mới) (Hoặc bạn có thể nhấn tổ hợp phím Ctrl + Shift + C để mở thiết bị đầu cuối mới)

2cda225f0cd71e7e.png 2. Tạo một môi trường ảo bằng cách nhập vào thiết bị đầu cuối và đợi quá trình cài đặt hoàn tất

python -m venv venv
source venv/bin/activate
pip install -r requirements.txt

Bạn có thể tự do thử thách bản thân và tự tạo một điểm cuối Gemini bằng Flask API. Mã của bạn trong app.py phải 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, đoạn mã này sẽ 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 Gemini Client:

  • Thư viện này thiết lập một kết nối đến Vertex AI của Google, cho phép ứng dụng sử dụng mô hình AI của Gemini. Đừng quên 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 nhận đường liên kết đến video trên YouTube, mã mô hình Gemini và một câu lệnh bổ sung làm dữ liệu đầu vào. Sau đó, tiện ích 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 được tạo.

Xác định tuyến đường Trang chủ (/):

  • Hàm này kết xuất mẫu index.html, mẫu này hiển thị một biểu mẫu để người dùng nhập đường liên kết đến YouTube.

Xác định tuyến đường tóm tắt (/summarize):

  • Hàm này xử lý việc gửi biểu mẫu. Ứng dụng này truy xuất đường liên kết, mô hình và câu lệnh của YouTube 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:

  • Ứng dụng 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 trên thiết bị đầu cuối. Phương thức tương tự như kiểm thử 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 Terminal).

Hãy tiếp tục và kiểm thử ứng dụng của bạn. Ứng dụng sẽ hoạt động như dự kiến.

6. Triển khai ứng dụng web

Giờ đây, khi đã có ứng dụng AI tạo sinh đang hoạt động, hãy triển khai ứng dụng đó trên Cloud Run để bạn có thể chia sẻ với bạn bè và đồng nghiệp để dùng thử.

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]

Đừng quên thay thế [PROJECT_ID] bằng mã dự án của riêng bạn. Đảm bảo thư mục làm việc hiện tại của bạn trong thiết bị đầu cuối là **amazing-gemini-app** Sau đó, hãy nhập lần lượt các lệnh sau theo thứ tự:

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à "youtube-summarizer". 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://amazing-gemini-app-*******.a.run.app/

Hãy tiếp tục sử dụng ứng dụng của bạn trong cửa sổ Ẩn danh hoặc trên thiết bị di động. Nội dung đó đã được xuất bản.

7. Thách thức

Giờ là lúc bạn tỏa sáng. Bạn có đủ khả năng để thay đổi mã sao cho bạn có thể tải video lên ngay từ máy tính không?

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á.