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

1. 简介

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

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

  • 了解为 Cloud Functions 函数提供支持的 Python 代码，该函数负责从 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 项目
  • 已为您的 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”图标。

28f084ec1e159938

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

e8df9adc4ea43a37.png

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

9859ea86a8310cb.png

Cloud 专用 Gemini 会回答您的问题。你可以点击右上角的 f68286b2b2ea5c0a.png 图标关闭“云端专用 Gemini”聊天窗口。

在 Cloud Shell IDE 中启用 Gemini Code Assist

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

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

6f5ce865fc7a3ef5

  1. 如图所示，点击右下角的 Gemini 按钮，然后最后一次选择正确的 Google Cloud 项目。如果系统要求您启用 Cloud AI Companion API，请启用该功能，然后继续操作。
  2. 选择 Google Cloud 项目后，请确保您能够在状态栏的 Cloud Code 状态消息中看到该信息，并且在右侧状态栏中看到代码助手，如下所示：

709e6c8248ac7d88

Gemini Code Assist 现在可以使用了！

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

228c9c9c6b956c8e

3. 部署 AI 摘要快速起步解决方案

  1. 前往生成式 AI 文档摘要解决方案
  2. 点击“部署”
  • 如果您的项目未启用结算功能，请启用结算功能。
  • 选择 us-central1 作为区域。
  • 点击“部署”。
  • 此过程最多可能需要 15 分钟才能完成。
  • 您无需进行任何更改，但可随时点击解决方案部署详情页面中的探索此解决方案按钮，浏览快速起步解决方案部署。

4. 与 Gemini 对话

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

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

14ad103efaa0ddaa

让我们在 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?

请注意顶部的垃圾箱图标，您可以通过此图标重置代码助理聊天记录的上下文。另请注意，此聊天互动与您在 IDE 中处理的文件相关。

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

假设您使用的是 Cloud Shell Editor，请按以下步骤操作：

  • 点击 Cloud Code c0231861cba4b5d2.png
  • 注意：根据屏幕大小，可能需要一两步。

4bf4e654a1749030 或 a0baa1d1c1c30151.png

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

6. 查看现有项目

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

ddf9ee7ff5346f23.png

查看从“上传 PDF”功能到 Cloud Storage 的流程。在 main.py 文件中提供了 PDF 文件上传后将调用的 Cloud Functions 函数。

点击该文件。Cloud Functions 函数的入口点是 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 表中。

查询表以查看汇总结果。

f2ed627e3e96d84e.png

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

上述流程是一个手动分步流程，用于上传我们想要总结的 PDF 文件。如何为应用构建 Web 前端？

对 Web 前端的要求很简单：

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

我们将使用 Python 和适用于 Web 应用的 Flask 框架来构建此框架，以协助 Duet AI。

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

关闭所有文件，然后在 Gemini Chat 窗口中给出以下提示：

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?

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

c666ee4af5039728.png

接下来，在根文件夹中创建一个名为“ templates ”的文件夹，并将 index.html 文件保存到该文件夹中。

我们希望在 app.py 文件中进行一些异常处理，以防文件无法保存在 Google Cloud Storage 存储分区中。让 app.py 文件保持打开状态，然后在 Gemini Chat 窗口中给出以下提示。

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）：

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 应用

使用 requirements.txt 文件中定义的依赖项创建 Python 环境。转到 Cloud Shell IDE 中的 Command Palette，如下所示：

55dffeed9fe6e9c0

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

现在启动终端，如下所示：

6ede24cb97a4e9c5

在终端中发出以下命令：

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 存储分区 (&lt;PROJECT_ID&gt;_output)。

10. （可选）Open Exploration - Deploy to 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，了解了 Gemini Code Assist 可如何协助您完成代码生成、代码补全和代码总结，并帮助您解答有关 Google Cloud 的问题。

13. 参考文档