1. 简介
在当今快节奏的数字世界中，时间是一种宝贵的商品。YouTube 是一个庞大的信息库，但冗长的视频可能会占用大量时间。这正是 YouTube 摘要工具的用武之地。这些工具可以高效地将冗长的视频浓缩成简洁的摘要，让用户无需观看完整视频即可快速掌握核心内容。这对于学生、专业人士以及任何希望高效地从在线视频内容中提取关键信息的人来说都非常有用。从本质上讲，YouTube 摘要工具可让用户最大限度地学习和吸收信息，同时最大限度地减少花费的时间。
完成本实验后，您将拥有一个可正常运行的 Web 应用，该应用可以从 YouTube 视频生成摘要。您还将更好地了解如何使用 Gemini API、Google Gen AI SDK，以及如何将它们集成在一起以构建 Web 应用。
您的 Web 应用将如下所示：
您只需提供 YouTube 视频的链接，Gemini 就会完成剩下的工作。
2. 准备工作
本 Codelab 假定您已拥有一个启用了结算功能的 Google Cloud 项目。如果您还没有，可以按照以下说明开始操作。
- 在 Google Cloud 控制台的项目选择器页面上，选择或创建一个 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，您将在右侧看到所有项目和项目 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
- 如何构建 GenAI 应用，将前端和后端链接在一起
- 如何在 Cloud Run 上部署已开发的 GenAI 应用
所需条件
- 一台可正常运行的计算机和稳定的 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 弹出窗口打开。在弹出窗口中，选择“新建应用”。 
从应用列表中，选择 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 Editor 右上角的 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 安装软件包，以便成功运行后端代码。
- 点击左上角的栏，然后选择 Terminal > New Terminal （或者，您可以按
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。
定义 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。确保终端中的当前工作目录为 **amazing-gemini-app**，然后按顺序逐个输入以下命令：
gcloud run deploy --source .
系统会提示您输入服务的名称，例如“youtube-summarizer”。为区域“us-central1”选择相应的数字。当系统询问您是否要允许未经身份验证的调用 时，请回答“y”。请注意，我们在此处允许未经身份验证的访问，因为这是一个演示应用。建议为您的企业和生产应用使用适当的身份验证。
部署完成后，您应该会获得类似于以下内容的链接：
https://amazing-gemini-app-*******.a.run.app/
继续在无痕式窗口或移动设备中使用您的应用。它应该已上线。
7. 挑战
现在是您大显身手的时候了。您是否有能力更改代码，以便可以直接从计算机上传视频？
8. 清理
为避免系统因本 Codelab 中使用的资源向您的 Google Cloud 账号收取费用，请按照以下步骤操作：