1. 简介
在当今快节奏的数字世界中，时间就是金钱。YouTube 是一个庞大的信息库，但观看时长较长的视频会花费大量时间。这时，YouTube 总结工具就变得非常有用。这些工具可高效地将长视频浓缩为简明扼要的摘要，让用户无需观看整个视频即可快速掌握核心内容。这对于学生、专业人士以及任何希望从在线视频内容中高效提取关键信息的人来说都非常有用。从本质上讲，YouTube 总结工具可帮助用户最大限度地提高学习效率和信息吸收量，同时最大限度地减少花费的时间。
完成本实验后，您将拥有一个可从 YouTube 视频生成摘要的 Web 应用。您还将更好地了解如何使用 Gemini API 和 Google Gen AI SDK，以及如何将它们集成在一起以构建 Web 应用。
您的 Web 应用将如下所示：
您只需提供 YouTube 视频的链接，Gemini 就会完成其余工作。
2. 准备工作
此 Codelab 假定您已拥有一个启用了结算功能的 Google Cloud 项目。如果您还没有，可以按照以下说明开始使用。
- 在 Google Cloud Console 的项目选择器页面上，选择或创建一个 Google Cloud 项目。
- 确保您的 Google Cloud 项目已启用结算功能。了解如何检查项目是否已启用结算功能。
- 您将使用 Cloud Shell，它是在 Google Cloud 中运行的命令行环境。如需访问该工具，请点击 Google Cloud 控制台顶部的“激活 Cloud Shell”。
- 连接到 Cloud Shell 后，您可以使用以下命令检查自己是否已通过身份验证，以及项目是否已设置为您的项目 ID：
gcloud auth list
- 在 Cloud Shell 中运行以下命令，以确认 gcloud 命令了解您的项目。
gcloud config list project
- 如果项目未设置，请使用以下命令进行设置：
gcloud config set project <YOUR_PROJECT_ID>
或者，您也可以在控制台中看到 PROJECT_ID ID
点击该项目，您将在右侧看到您的所有项目和项目 ID
- 请确保已启用以下 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
除了使用 gcloud 命令之外，您还可以通过此链接在控制台中完成操作。如需了解 gcloud 命令和用法，请参阅文档。
前提条件
- 能够读写 Python 和 HTML 代码
- 能够熟练使用 Gemini API 和 Google Gen AI SDK
- 了解基本的全栈开发
学习内容
- 如何使用 Flask API 库创建由 Gemini 提供支持的后端 API
- 如何构建将前端和后端链接在一起的生成式 AI 应用
- 如何在 Cloud Run 上部署已开发的生成式 AI 应用
所需条件
- 一台可正常运行的计算机和稳定的 Wi-Fi 连接
- 好奇心
3. 在 Cloud Run 上创建 Python Flask 应用
我们将先使用 Cloud Shell 中自动生成的模板在 Cloud Run 上创建 Python Flask 应用。
前往 Cloud Shell 终端，然后点击“打开编辑器”按钮。
确保 Cloud Code 项目已在 Cloud Shell 编辑器的左下角（状态栏）中设置，如下图中突出显示的那样，并且已设置为已启用结算的有效 Google Cloud 项目。在系统提示时点击授权。
注意：Cloud Shell 编辑器初始化并加载所有必需的插件后，可能需要一段时间才能
Cloud Code - Sign In
按钮，请耐心等待
点击状态栏中的活跃项目，然后等待 Cloud Code 弹出式窗口打开。在弹出式窗口中，选择“New Application”。
从应用列表中选择 Cloud Run 应用：
对于第 2/2 页，请选择 Python Flask 模板：
根据需要提供项目名称（例如“amazing-gemini-app”），然后点击确定：
系统随即会打开您刚刚设置的新项目的模板。
使用 Google Cloud Shell 在 Cloud Run 上创建 Python Flask 应用就是这么简单。
4. 构建前端
如前所述，最终的 Web 应用将如下所示：
它包含一个输入字段，用于接收用户提供的 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。
如果一切顺利，您应该能够通过点击 Cloud 编辑器右上角的 Web Preview 按钮来访问您的 Web 应用，然后选择 Preview on port 8080
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 中的软件包，以便成功运行后端代码。
- 点击左上角的条形图标，然后依次选择终端 > 新终端（或者，您也可以按
Ctrl + Shift + C打开新终端）
2. 在终端中输入命令以创建虚拟环境，并等待其成功安装
python -m venv venv source venv/bin/activate pip install -r requirements.txt
您可以再次挑战自己，使用 Flask API 自行创建 Gemini 端点。app.py 中的代码应与下面提供的代码类似。
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。
定义生成函数：
- 此函数接受 YouTube 视频链接、Gemini 模型 ID 和其他提示作为输入。然后，它会将视频和提示发送给 Gemini，并返回生成的摘要文本。
定义首页路由 (/):
- 此函数会呈现 index.html 模板，该模板会显示一个供用户输入 YouTube 链接的表单。
定义总结路由 (/summarize)：
- 此函数用于处理表单提交内容。它从表单中检索 YouTube 链接、模型和提示，调用生成函数以获取摘要，然后在 result.html 模板中显示摘要。
运行应用：
- 它从环境变量中检索服务器端口，并启动 Flask Web 服务器。
您可以在终端中运行 app.py 来测试代码。与测试前端的方法相同。右键点击 app.py，然后选择 Run Python File in Terminal。
接下来，请测试您的应用。它应该会按预期运行。
6. 部署 Web 应用
现在，您已经拥有可正常运行的生成式 AI 应用，接下来，让我们将该应用部署到 Cloud Run 上，以便您可以与朋友和同事分享并让他们试用。
前往 Cloud Shell 终端，确保当前项目已配置为您的有效项目。如果不是，请使用 gcloud configure 命令设置项目 ID：
gcloud config set project [PROJECT_ID]
别忘了将 [PROJECT_ID] 替换为您自己的项目 ID。确保终端中的当前工作目录为 **amazing-gemini-app**，然后按顺序逐一输入以下命令：
gcloud run deploy --source .
系统会提示您输入服务的名称，我们假设您输入的是“youtube-summarizer”。选择与“us-central1”区域对应的数字。当系统询问您是否要允许未经身份验证的调用时，请说“y”。请注意，我们在此处允许未经身份验证的访问，因为这是一个演示应用。建议为企业和生产应用使用适当的身份验证。
部署完成后，您应该会获得类似于以下内容的链接：
https://amazing-gemini-app-*******.a.run.app/
接下来，您可以在无痕式窗口或移动设备上使用该应用。该功能应该已经上线。
7. 挑战
现在是您大放异彩的时候了。您是否能够更改代码，以便直接从计算机上传视频？
8. 清理
为避免系统因本 Codelab 中使用的资源向您的 Google Cloud 账号收取费用，请按照以下步骤操作：