使用 Gemini Code Assist 探索和改进 AI 摘要快速起步解决方案

1. 简介

在此 Codelab 中，我们将了解一个现有的快速起步解决方案“AI 总结”，该解决方案使用 Vertex AI 模型来总结已上传到 Google Cloud Storage 的 PDF 文档。

然后，我们将使用 Gemini Code Assist 执行以下操作：

• 了解 Python 代码，该代码可为 Cloud Functions 函数提供支持，以从 PDF 文档中提取文本、总结文本并将结果写入 BigQuery。
• 在整个过程中，我们将借助 Gemini Code Assist 来帮助编写新功能。我们将开发一个 Web 应用 (Python Flask 应用)，并在本地运行该应用以验证我们的代码。
• 我们还可以选择将此应用部署到 Cloud Run，并使用 Material Design 改进 Web 应用的设计（美观性）。

实践内容…

• 您将部署 AI 总结快速起步解决方案并触发流程，以了解其运作方式。
• 然后，您将使用 Cloud Shell IDE 下载快速起步解决方案的现有代码，并使用 Gemini Code Assist 来理解该代码。
• 您将使用 Gemini Code Assist Cloud Shell IDE 为新功能生成代码。

学习内容…

• AI 总结快速起步解决方案的运作方式。
• 如何使用 Gemini Code Assist 执行多项开发者任务，例如代码生成、代码补全和代码总结。

所需条件…

• Chrome 网络浏览器
• Gmail 账号
• 启用了结算功能的 Cloud 项目
• 已为您的云项目启用 Gemini Code Assist

本实验的适用对象为各种水平的开发者，包括新手。虽然示例应用使用的是 Python 语言，但您无需熟悉 Python 编程就能理解代码内容。我们的重点是让开发者熟悉 Gemini Code Assist 的各项功能。

2. 设置

本部分涵盖了开始此实验所需执行的所有操作。

在 Google Cloud 项目中启用 Gemini for Cloud

我们现在将在 Google Cloud 项目中启用 Gemini for Cloud。请按下面给出的步骤操作：

1. 访问 https://console.cloud.google.com，并确保您已选择计划用于本实验的 Google Cloud 项目。点击显示在右上角的“打开 Gemini”图标。

2. Gemini for Cloud 聊天窗口会在控制台右侧打开。点击“启用”按钮，如下所示。如果您没有看到启用按钮，而是看到了聊天界面，可能是因为您已经为项目启用了 Gemini for Cloud，可以直接执行下一步。

3. 启用 Gemini for Cloud 后，您可以向其发出一两句查询来测试一下。下方显示了几个查询示例，不过您可以尝试诸如 What is Cloud Run? 之类的查询

Gemini for Cloud 会回答您的问题。您可以点击右上角的 图标关闭 Gemini for Cloud 聊天窗口。

在 Cloud Shell IDE 中启用 Gemini Code Assist

在此 Codelab 的其余部分，我们将使用 Cloud Shell IDE，这是一个基于 Code OSS 的全托管式开发环境。我们需要在 Cloud Shell IDE 中启用和配置 Code Assist，相关步骤如下所示：

1. 访问 ide.cloud.google.com。IDE 可能需要一段时间才能显示，请耐心等待。
2. 如图所示，点击底部状态栏中的 Cloud Code - 登录按钮。按照说明对插件进行授权。如果您在状态栏中看到 Cloud Code - no project，请选择该选项，然后从项目列表中选择您打算使用的 Google Cloud 项目。

3. 如图所示，点击右下角的 Gemini 按钮，然后再次选择正确的 Google Cloud 项目。如果系统要求您启用 云 AI Companion API，请按照要求操作，然后继续。
4. 选择 Google Cloud 项目后，请确保您能够在状态栏的 Cloud Code 状态消息中看到该项目，并且在状态栏右侧看到已启用 Code Assist，如下所示：

Gemini Code Assist 已准备就绪，可以开始使用了！

Gemini Code Assist 还可在本地 IDE 中使用，例如 Visual Studio Code 或 JetBrains IntelliJ。Google Cloud Workstations 也提供此功能。此 Codelab 重点介绍 Cloud Shell IDE，旨在让每个人都使用相同的环境，但您也可以随意尝试自己喜欢的设置，并点击此链接了解详情。

可选：如果您在右下角的状态栏中没有看到 Gemini，则需要在 Cloud Code 中启用 Gemini。在执行此操作之前，请确保已在 IDE 中启用 Gemini，方法是前往 Cloud Code 扩展程序 → 设置，然后输入文本 Gemini，如下所示。确保选中此复选框。您应重新加载 IDE。这将在 Cloud Code 中启用 Gemini，并且 IDE 中会显示状态栏中的 Gemini 图标。

3. 部署 AI 总结快速起步解决方案

1. 前往生成式 AI 文档摘要解决方案
2. 点击“部署”

• 如果您的项目未启用结算功能，请启用结算功能。
• 选择 us-central1 作为区域。
• 点击“部署”。
• 此过程最多可能需要 15 分钟才能完成。
• 您不需要进行任何更改，但可以点击解决方案部署详情页面中的探索此解决方案按钮，随意探索快速起步解决方案部署。

4. 与 Gemini 对话

首先，我们来学习如何与 Gemini 聊天。Gemini 在 Cloud Shell IDE 中以聊天助理的形式提供，它是 VS Code 中 Cloud Code 扩展程序的一部分。点击左侧导航栏中的“Gemini”按钮即可打开它。在左侧导航工具栏中找到 Gemini 图标 ，然后点击该图标。

系统随即会在 Cloud Shell IDE 中打开“聊天：Gemini”窗格，您可以与 Gemini 聊天以获取 Google Cloud 方面的帮助。

让我们使用 Gemini 对话窗格输入提示，并查看 Gemini 的回答。输入以下提示：

What is Cloud Run? 

Gemini 应该会在回答中提供有关 Cloud Run 的详细信息。提示是描述您所需要的帮助的问题或陈述。提示可以包含现有代码中的上下文，Google Cloud 会分析这些上下文，以提供更实用或更完整的回答。如需详细了解如何撰写提示以生成优质回答，请参阅在 Google Cloud 中撰写更好的 Gemini 提示。

您可以尝试使用以下示例提示或您自己的提示，来询问有关 Google Cloud 的问题：

• What is the difference between Cloud Run and Cloud Functions?
• What services are available on Google Cloud to run containerized workloads?
• What are the best practices to optimize costs while working with Google Cloud Storage?

请注意顶部的回收站图标 - 您可以通过此图标重置 Code Assist 聊天记录的上下文。另请注意，此聊天互动与您在 IDE 中处理的文件相关。

5. 在 Cloud Code 中下载快速起步解决方案 Cloud Functions 函数

假设您位于 Cloud Shell Editor 中，请按以下步骤操作：

• 点击 Cloud Code
• 注意：可能需要一个或两个步骤，具体取决于您的屏幕大小。

或

• 点击 Cloud Functions。
• 如果系统提示，请登录或授权您的账号。
• 点击网络钩子函数。
• 点击“下载到新工作区”图标
• 
• 使用 webhook-1 作为工作区名称（应为默认名称）或任何其他名称，然后点击“确定”。
• 这会在 Cloud Shell IDE 中打开代码。

6. 查看现有项目

此快速起步解决方案如下所示：

查看从“上传 PDF”功能到 Cloud Storage 的流程。如果上传了 PDF 文件，系统将调用的 Cloud Functions 函数在 main.py 文件中指定。

点击相应文件。云函数的入口点是 entrypoint 函数，该函数最终会调用 cloud_event_entrypoint 函数（用于从 PDF 中提取文本），然后调用 summarization_entrypoint 函数（用于使用 Vertex AI 模型进行总结，并将结果分别写入 GCS 和 BigQuery）。

突出显示 main.py 文件中的所有代码或任何特定的代码段。点击 Gemini Chat，然后输入以下提示：Explain this。

这样应该会显示代码的说明。

7. 执行一次示例运行

根据架构图，我们将文件上传到 <PROJECT_ID>_uploads 存储分区，以便调用 Cloud Functions 函数。

确保您已准备好要上传并希望进行总结的 PDF 示例。

• 在 Cloud 控制台中前往 Google Cloud Storage。
• 前往 <PROJECT_ID>_uploads 存储分区。点击上传文件链接，然后上传示例 PDF。

如果您没有示例 PDF 文件，可以使用我们创建的示例。在 Cloud Shell 中，运行以下命令：

gsutil cp \
    gs://arxiv-dataset/arxiv/cmp-lg/pdf/9410/9410009v1.pdf \
    gs://<PROJECT_ID>_uploads/

文件成功上传后，系统会调用 webhook Cloud Functions 函数，该函数会对文档中的文本进行总结。输出将写入名为 summary_dataset 的 BigQuery 数据集中的 summary_table 表。

查询该表以查看摘要结果。

8. 为应用创建 Web 应用客户端

上述流程是手动上传需要总结的 PDF 的分步流程。构建应用的 Web 前端怎么样？

Web 前端的要求很简单：

1. 一个基本的 HTML 表单，可供我们选择并上传需要总结的文件。
2. 成功上传后，文件应写入 <PROJECT_ID>_uploads 存储分区，以便其余功能正常运行。

我们将使用 Python 和 Flask Web 应用框架，在 Duet AI 的帮助下构建此应用。

Let's get started. 我们假设您仍在 Cloud Shell IDE 中打开同一工作区。

关闭所有文件，然后在 Gemini 对话窗口中输入以下提示：

Write a Python Flask application that has a couple of routes:
The root route / should serve the index.html page using the render_template framework. The /upload route should accept a file being uploaded and write that file to a Cloud Storage bucket.

理想情况下，这应该会生成如下代码：

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

将上述代码另存为 IDE 工作区根目录中的 app.py。

我们希望应用在端口 8080 上运行并使用主机地址 0.0.0.0，因此我们提示 Gemini 修改 app.run 语句。

输入以下提示：

Modify the app.py to run on port 8080 and host address 0.0.0.0

现在，您的代码应如下所示：

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

接下来，我们希望系统也生成 index.html。在 Gemini Chat 窗口中输入以下提示：

Provide the index.html file

它应该会为您提供如下所示的 index.html 代码。

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

我们可以问问 Gemini 应将 index.html 文件保存到何处。输入以下提示：

Since this is using the render_template framework, where should this file be saved?

它应给出类似于以下内容的答案：

继续操作，在根文件夹中创建一个名为“templates”的文件夹，并将 index.html 文件保存在该文件夹中。

我们希望在 app.py 文件中添加一些异常处理功能，以防文件无法保存到 Google Cloud Storage 存储分区中。保持 app.py 文件处于打开状态，并在 Gemini 对话窗口中输入以下提示。

modify the app.py to have exception handling in the upload() function. The success or failure should be returned to the index page.

现在，这应该会添加一些异常处理，如下所示：

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client().bucket('your-bucket-name')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

由于我们需要在 index.html 中显示错误消息，因此也需要修改该文件。让我们通过以下提示让 Gemini 执行此操作：

update the index.html to display the error message

这应该会生成更新后的 index.html，如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  {% if error %}
    <p style="color: red;">{{ error }}</p>
  {% endif %}
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

请确保在上述每个步骤中，您分别在 app.py 和 index.html 文件中保存所做的更改。

app.py 的存储分区名称不正确，因此我们可以将该信息提供给 Gemini，并让它进行更改。此外，我们还必须为 storage.Client() 实例提供项目 ID。因此，请在 Gemini Chat 窗口中提供以下几个提示（将 <PROJECT_ID> 替换为您的 Google Cloud 项目 ID），并纳入相应更改：

提示 1

My bucket name is gemini-for-devs-demo_uploads, please change the code to use that.

提示 2

My project id is gemini-for-devs-demo, please change the storage.Client() to use that.

最终的 app.py 文件如下所示（下面显示的是我的项目 ID，但理想情况下应该是您正在使用的项目 ID，也就是您在上面的提示中提供的项目 ID）：

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client(project='gcp-experiments-349209').bucket('gcp-experiments-349209_uploads')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

9. 在本地运行 Web 应用

创建一个 Python 环境，其中包含 requirements.txt 文件中定义的依赖项。前往 Cloud Shell IDE 中的命令面板，如下所示：

输入 Python: Create Environment，然后按照步骤使用 (venv)、Python 3.x 解释器和 requirements.txt 文件创建虚拟环境。这会创建所需的环境。

立即启动终端，如下所示：

在终端中运行以下命令：

python app.py

Flask 应用应该会启动，您应该会看到如下内容：

(.venv) romin@cloudshell:~/webhook-2 (gcp-experiments-349209)$ python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8080
 * Running on http://10.88.0.3:8080
Press CTRL+C to quit
 * Restarting with watchdog (inotify)
 * Debugger is active!
 * Debugger PIN: 989-296-833

访问 http://127.0.0.1:8080 网址，系统应会显示 index.html 页面

从本地机器上传文件，该文件应会得到成功处理。

您可以前往我们在实验中看到的 BigQuery 数据集和表，查看总结情况。或者，您也可以查看 Cloud Storage 存储分区 (<PROJECT_ID>_output)。

10. （可选）打开探索功能 - 部署到 Cloud Run

• 您可以将应用部署到 Cloud Run。
• 使用以下提示问问 Gemini Code Assist（可能需要尝试上述提示的几种变体）：

I don't want to build a container image but deploy directly from source. What is the gcloud command for that?

11. （可选）打开探索功能 - 添加 CSS 样式

• 使用 Gemini Code Assist 和编辑器中的助理将 CSS 样式添加到应用，并在完成后再次部署应用！
• 打开 index.html 文件，然后在 Gemini Chat 中输入以下提示：Can you apply material design styles to this index.html?
• 查看代码，看看它是否有效。

12. 恭喜！

恭喜！您已成功在示例项目中使用了 Gemini Code Assist，了解了它如何协助完成代码生成、代码补全和代码总结，并帮助回答有关 Google Cloud 的问题。

13. 参考文档

• Gemini Code Assist 首页
• 使用 Gemini 进行 AI 辅助和开发 - 文档
• Gemini 应用场景