构建一个依托 Gemini 的 YouTube 摘要器

1. 简介

在当今快节奏的数字世界中,时间是一项宝贵的资源。YouTube 是浩瀚的信息宝库,但观看长视频需要花费大量时间。这时,YouTube 总结工具就非常有用了。这些工具可将长视频高效浓缩为简洁的摘要,让用户无需观看完整视频即可快速掌握核心内容。这对于学生、专业人士以及希望从在线视频内容中高效提取关键信息的任何人来说都特别有用。从本质上讲,YouTube 总结工具可让用户最大限度地学习和获取信息,同时最大限度地减少浪费的时间。

在本实验结束时,您将拥有一个可以从 YouTube 视频生成摘要的 Web 应用。您还将更好地了解如何使用 Gemini API、Google Gen AI SDK 并将它们集成以构建 Web 应用。

您的 Web 应用将如下所示:

13a0825947f9892b.png

您只需提供 YouTube 视频的链接,Gemini 便会完成其余工作。

2. 准备工作

本 Codelab 假定您已有一个启用了结算功能的 Google Cloud 项目。如果您尚未拥有此应用,可以按照以下说明开始使用。

  1. Google Cloud Console 的项目选择器页面上,选择或创建一个 Google Cloud 项目
  2. 确保您的 Google Cloud 项目已启用结算功能。了解如何检查项目是否已启用结算功能
  3. 您将使用 Cloud Shell,它是在 Google Cloud 中运行的命令行环境。如需访问该工具,请点击 Google Cloud 控制台顶部的“激活 Cloud Shell”。

1829c3759227c19b.png

  1. 连接到 Cloud Shell 后,您可以使用以下命令检查自己是否已通过身份验证,以及项目是否已设置为您的项目 ID:
gcloud auth list
  1. 在 Cloud Shell 中运行以下命令,以确认 gcloud 命令了解您的项目。
gcloud config list project
  1. 如果项目未设置,请使用以下命令进行设置:
gcloud config set project <YOUR_PROJECT_ID>
  1. 确保已启用以下 API:
  • Cloud Run
  • Vertex AI

使用 gcloud 命令的替代方法是通过此链接前往控制台。如需了解 gcloud 命令和用法,请参阅文档

前提条件

学习内容

  • 如何使用 Flask API 库创建 Gemini 赋能的后端 API
  • 如何构建 GenAI 应用并将前端与后端相关联
  • 如何在 Cloud Run 上部署开发的 GenAI 应用

所需条件

  • 一台可正常运行的计算机和稳定的 Wi-Fi 连接
  • 好奇心

3. 在 Cloud Run 上创建 Python Flask 应用

我们将先在 Cloud Shell 中使用自动生成的模板在 Cloud Run 上创建 Python Flask 应用。

前往 Cloud Shell 终端,然后点击“打开编辑器”按钮。b16d56e4979ec951.png

确保在 Cloud Shell 编辑器的左下角(状态栏)中设置 Cloud Code 项目(如下图所示),并将其设置为已启用结算功能的有效 Google Cloud 项目。出现提示时,授权

f5003b9c38b43262.png

点击状态栏中的相应活跃项目,然后等待 Cloud Code 弹出式窗口打开。在弹出式窗口中,选择“新建应用”。70f80078e01a02d8.png

从应用列表中,选择 Cloud Run 应用

39abad102a72ae74.png

在第 2/2 页中,选择 Python Flask 模板:

a78b3a0311403ad.png

提供项目名称(例如“amazing-gemini-app”),然后点击 OK

4d8f77279d9509cb.png

系统随即会打开您刚刚设置的新项目的模板。

e85a020a20d38e17.png

只需这样几步,您就可以使用 Google Cloud Shell 在 Cloud Run 上创建 Python Flask 应用了。

4. 构建前端

如前所述,最终的 Web 应用将如下所示:

13a0825947f9892b.png

该模板包含一个用于接收用户 YouTube 链接的输入字段、一个用于选择其他型号系列的选项、一个用于根据需要提供其他提示的文本区域,以及一个用于提交表单的按钮。

如果您喜欢这种挑战,可以随意设计自己的表单或修改 CSS 属性。您也可以复制下面的代码,并将其替换为 templates 文件夹中 index.html 文件中的内容。

<!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>

如需测试您是否已正确完成此步骤,请右键点击 app.py,然后选择 Run Python File in Terminal(在终端中运行 Python 文件)。

690765473f94db9c.png

如果一切顺利,您应该能够通过 http://127.0.0.1:8080 访问您的 Web 应用。

5. 构建后端

设置好前端后,您需要创建一个后端服务,该服务利用 Gemini 模型对用户提供的 YouTube 视频进行总结。请注意,您将覆盖 app.py 来完成此任务。

在更改代码之前,您需要创建一个虚拟环境并安装运行 Gemini 组件所需的库。

首先,您需要将 Google Gen AI SDK 库添加到 requirements.txt 文件中。它应如下所示:

Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-genai==1.2.0

其次,您需要创建一个虚拟环境并安装 requirements.txt 中的软件包,以便成功运行后端代码。

  1. 点击左上角的条状标签,然后依次选择 Terminal > New Terminal

2cda225f0cd71e7e.png 2. 在终端中输入命令创建虚拟环境,然后等待其成功安装

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

再次提醒您,欢迎随时挑战自我,自行使用 Flask API 创建 Gemini 端点。您的代码应与以下代码类似。

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')

本质上,该代码会执行以下操作:

导入必要的库

  • Flask:用于创建 Web 应用。
  • os:用于访问环境变量。
  • google.genai:用于与 Google 的 Gemini AI 交互。
  • google.genai.types:用于为 Gemini 定义数据结构。

初始化 Gemini 客户端

  • 它会设置与 Google 的 Vertex AI 的连接,以便应用使用 Gemini AI 模型。请务必将“REPLACE_WITH_YOUR_PROJECT_ID”替换为您的项目 ID。

定义 generate 函数

  • 此函数将 YouTube 视频链接、Gemini 模型 ID 和其他问题作为输入。然后,它会将视频和问题发送给 Gemini,并返回生成的摘要文本。

定义首页路由 (/)

  • 此函数会呈现 index.html 模板,该模板会显示一个表单,供用户输入 YouTube 链接。

定义汇总路线 (/summarize)

  • 此函数用于处理表单提交内容。它会从表单中检索 YouTube 链接、模型和问题,调用 generate 函数以获取摘要,然后在 result.html 模板中显示摘要。

运行应用

  • 它会从环境变量中检索服务器端口,并启动 Flask Web 服务器。

您可以通过从终端运行 app.py 来测试代码。与测试前端相同的方法。右键点击 app.py,然后选择 Run Python File in Terminal

接下来,请测试您的应用。它应该会按预期运行。

6. 部署 Web 应用

现在,您已经拥有可以正常运行的 GenAI 应用,接下来我们将其部署到 Cloud Run 上,以便您与朋友和同事分享,供他们试用。

前往 Cloud Shell 终端,并确保当前项目已配置为您的有效项目,如果没有,请使用 gcloud configure 命令设置项目 ID:

gcloud config set project [PROJECT_ID]

请务必将 [PROJECT_ID] 替换为您自己的项目 ID。然后,依次输入以下命令:

cd amazing-gemini-app
gcloud run deploy --source .

系统会提示您输入服务名称,例如“youtube-summarizer”。为区域“us-central1”选择相应的数字。当系统询问您是否要允许未经身份验证的调用时,请说“y”。请注意,由于这是演示版应用,因此我们允许未经身份验证的访问。建议为企业应用和生产应用使用适当的身份验证。

部署完成后,您应该会收到类似于以下内容的链接:

https://amazing-gemini-app-*******.a.run.app/

您可以继续在无痕式窗口或移动设备上使用应用。它应该已经上线。

7. 挑战

现在是您大显身手的时候了。您是否有能力更改代码,以便直接从计算机上传视频?

8. 清理

为避免系统因本 Codelab 中使用的资源向您的 Google Cloud 账号收取费用,请按照以下步骤操作:

  1. 在 Google Cloud 控制台中,前往管理资源页面。
  2. 在项目列表中,选择要删除的项目,然后点击删除
  3. 在对话框中输入项目 ID,然后点击关停以删除项目。
  4. 或者,您也可以前往控制台中的 Cloud Run,选择刚刚部署的服务并进行删除。