如何使用 Duet AI 探索和增强现有应用

1. 概览

此 Codelab 将演示如何使用 Duet AI 在现有 API 后端的基础上构建客户端应用。

学习内容

本实验旨在展示如何将 Duet AI 用于现有应用。在本实验中，您将学习如何完成以下操作：

部署 AI/机器学习图片处理快速起步解决方案
使用 Duet AI 探索 API 应用
使用 Duet AI 为 API 应用创建客户端

设置 - 创建新项目

根据您的组织政策，您可能无法正确部署此解决方案。

建议：使用您拥有完整权限的账号（如个人账号），而不要使用公司或学校账号

注意：如果您最近创建了一个您拥有完整权限的项目，并且已为该项目启用了 Duet AI API，则可以继续使用该项目并跳过此步骤。例如，如果您最近完成了另一个 Duet AI Codelab，则可以跳过此步骤。

前往 Google Cloud 控制台
点击当前项目的下拉菜单。
点击新建项目
添加项目名称，然后点击创建
- 建议：请使用唯一的项目名称，使 Project name 和 Project ID 具有相同的

2. 部署快速起步解决方案

快速起步解决方案是 Google Cloud 提供的预构建解决方案模板。本实验使用快速起步解决方案演示 Duet AI 如何帮助改进现有应用。

前往 AI/机器学习图片处理快速起步解决方案详情页面
- 点击汉堡式菜单
- 在产品和解决方案子菜单中，点击快速起步解决方案
- 点击使用 Cloud Functions 进行 AI/机器学习图片处理
点击部署
- 如果您的项目未启用结算功能，请启用结算功能。
- 确认项目名称，然后点击继续
- 选择 us-central1 (Iowa) 作为区域。
- 如果系统提示您输入其他值，请接受默认值。
- 点击部署。
- 此过程最多可能需要 15 分钟。
- 您不需要进行任何更改，但可以随意探索快速起步解决方案部署。

问题排查

问题：您是否看到显示 Partial deployment. 的错误？
- 解决方案：很抱歉，您可能需要删除部署并重新开始。应该会有一个显示删除部署的按钮。点击该按钮，然后重新部署快速起步解决方案。

3. 启用 Duet AI

设置代码编辑环境并启用 Duet AI

前往 Cloud Shell 编辑器
- 返回 Google Cloud 控制台
- 在搜索栏中输入 Cloud Shell Editor，然后点击下拉菜单中的 Cloud Shell 编辑器。
- 如果您使用的是旧版编辑器，请点击试用新编辑器。
  - 注意：如果您没有看到“试用新编辑器”按钮，说明您可能已经在使用新编辑器。您仍可以使用旧版编辑器，但界面略有不同。
- 点击“在新窗口中打开”图标
如果系统提示，请登录或授权您的账号。
- 根据您的设置，在本实验过程中，系统可能会多次提示您为账号授权，每次提示时都请选择授权。
如图所示，点击底部状态栏中的 Cloud Code - 登录按钮。按照说明对插件进行授权。
如果系统提示，请点击选择 Google Cloud 项目，然后选择您要使用的项目
启用 Duet AI
- 点击 Cloud Code
  - 注意：可能有一个或两个步骤，具体取决于您的屏幕大小。
- 在帮助和反馈部分点击更改设置
- 类型 Duet AI: Enable
- 选择复选框（如果尚未选择）
- 重新加载 IDE。
- 这将在 Cloud Code 中启用 Duet AI，并且 IDE 中会显示 Duet AI 状态栏。
如图所示，点击右下角的 Duet AI 按钮，然后选择正确的 Google Cloud 项目。
- 如果您看到显示 Duet AI has not been enabled for your selected project 的错误，则点击启用 Duet AI API
确认您能在状态栏的左侧看到正确的 Google Cloud 项目（您将看到项目名称），并在右侧看到已启用的 Duet AI，如下图所示：

4. 下载 Cloud Functions 函数代码

下载代码并使用 Duet AI 详细了解快速起步解决方案以及您部署的代码。

如果您已离开，请点击 Cloud Code
点击 Cloud Functions
- 如果您看到选择项目按钮，请点击该按钮，然后选择您所处理的项目。
- 点击 annotate-http 函数
- 点击 Download to new workspace 图标
使用 annotation-http-1 作为工作区名称（应为默认名称），然后点击确定
打开 main.py 文件
- 点击探索器图标
- 点击 main.py 文件以将其打开
点击 Duet AI 聊天图标
- 注意：可能需要一个或两个步骤，具体取决于您的屏幕大小。
尝试向 Duet AI 提问。输入如下提示：
- What is a Jump Start Solution in Google Cloud?
- Explain this code.

重置 Duet AI 聊天

问过的提示会影响后续的提示。例如，如果您在项目 ID 或区域中出现拼写错误，这些拼写错误会在以后的提示和回答中继续出现，这会影响您的使用体验。如果出现拼写错误，或者出于其他原因想要清除聊天记录，您可以使用回收站图标重置聊天。

重置 Duet 聊天回收站具有突出显示功能

5. 调用现有的 Cloud Functions 函数端点

浏览代码并调用您在快速起步解决方案中部署的端点。

输入提示：
- 重要事项：请将以下提示中的 my-project-with-duet 替换为您的项目 ID。
- The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
- 您将会收到包含如下 curl 命令的回答：
```
curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
...
```
- 复制此 curl 命令以便在下一步中使用
在新终端中测试该命令
- 点击汉堡式菜单
- 点击终端
- 点击 New Terminal
- 将上一步中的 curl 命令粘贴到终端中，然后按 Enter 键运行该命令
- 您将会收到开头如下所示的回答：
```
{
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
```
（可选）使用来自公共互联网的另一张图片执行此操作，方法是使用如下内容提示 Duet：
- Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

问题排查

请注意不确定性：Duet AI 和由大语言模型 (LLM) 提供支持的其他产品具有不确定性，也就是说，即使输入相同，您可能也会得到不同的输出。即使您完全按照步骤操作，也可能无法获取正常运行的命令。这些问题排查步骤应该有助于解决这些问题。

生成的 curl 命令应如下所示：

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

Duet AI 正在使用 main.py 文件中的 TEST_IMAGE，这是一张埃菲尔铁塔的图片。

如果 curl 命令无法运行，请检查以下几个方面：

问题：网址端点是否包含 .a.run.app？
- 解决方案：Duet 可能认为您要部署到 Cloud Run。将 my-project-with-duet 替换为 https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate 中的项目 ID，以便获取正确的 Cloud Functions 端点并将其用于 curl 命令。
问题：网址端点是否包含 my-project-with-duet？
- 解决方案：将 my-project-with-duet 替换为您的项目 ID。
问题：网址端点是否缺少 us-central1？
- 解决方案：确保网址以 us-central1 开头，例如包含您的项目 ID 的 https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate。
问题：有时生成的端点会像 cloudfunctions.net/annotate-http 或 cloudfunctions.net/annotate 这样，具体取决于所使用的提示。网址端点末尾是否缺少 /annotate-http/annotate？
- 解决方案：确保网址端点以完整 API 应用路径 cloudfunctions.net/annotate-http/annotate 结尾
问题：cURL 请求可以正常运行，但它并没有得到多少反馈信息。请求是否包含功能？
- 解决方案：这不是主要问题。如果您继续操作而不做任何更改，实验的剩余部分仍会正常进行。如果您想获取更多信息，您可以让 Duet 为 cURL 请求添加功能。
问题：答案似乎不正确或缺少特定于代码的上下文。您是否在 Cloud Shell 编辑器中使用 Duet AI 聊天？
- 解决方案：尝试打开 main.py 文件，并在使用 Cloud Shell 编辑器中的 Duet AI 聊天时突出显示与提示相关的代码。整个 Google Cloud 中的 Duet AI 助理都有不同的上下文，因此会得出不同的答案。

问题：提示的回答仍不太正确。

解决方案：尝试输入其他提示，为 Duet AI 提供更多指导，以便得出您希望生成的内容。请务必将 my-project-with-duet 替换为您的项目 ID。示例如下：

Give me the curl command for:

1- Cloud Function running in us-central1 and project my-project-with-duet
2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }

问题：在完成所有这些问题排查步骤后，仍然无法正常运行。
- 解决方案：由于 LLM 具有不确定性，因此 Duet 生成的回答可能不合适。如果发生这种情况，请复制上面的示例 curl 命令，然后尝试在终端运行该命令。请务必将 my-project-with-duet 替换为您的项目 ID。

6. 为 API 创建 Web 应用客户端

使用 Duet AI 生成一个 index.html 文件，用于调用快速起步解决方案 Cloud Functions 函数端点。然后将 index.html 文件部署到 Firebase Hosting，以便了解代码的实际运行情况。

生成客户端代码
- 返回 Duet AI 聊天框，输入提示：
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
- 复制回答中生成的 index.html 文件。
  - 注意：您稍后需要使用此代码，如果您担心丢失代码，请将其保存在某个位置。
- 关闭 main.py。
创建一个新的 frontend 目录
- 您可以这样询问 Duet AI：
  - What are the console commands to create and navigate to a new frontend directory?
- 您将会看到类似 mkdir frontend 和 cd frontend 的结果。
- 使用 Cloud Shell 终端确认您是否仍在 annotate-http-1 目录中，然后运行以下命令：
  - cd ~/annotate-http-1
  - mkdir frontend
  - cd frontend
确认您已在 Cloud Shell 终端中登录正确的项目
- 您可以这样询问 Duet AI：
  - What is the gcloud command to set my project?
- 您将会看到类似 gcloud config set project my-project-with-duet 的结果
  - 确认项目 ID 正确无误，然后在 Cloud Shell 终端运行该命令。
启用 Firebase
- 保持当前的 Cloud Shell 编辑器为打开状态，在新标签页中访问 https://console.firebase.google.com/
- 点击添加项目
- 输入您的项目 ID，等待它显示在下拉菜单中
- 点击您的项目 ID
- 点击继续
- 点击确认方案
- 点击继续
- 取消选择为此项目启用 Google Analytics（分析）
  - Firebase 推荐使用 Google Analytics（分析），但在此应用中不会用到这些功能。
- 点击继续
- 关闭此标签页并返回 Cloud Shell 编辑器
- 注意：只有之前未使用过 Firebase 的用户才需要执行这些步骤，但所有人都可以执行这些步骤。如果您以后再次执行此操作，可以跳过这一步骤。
在 Cloud Shell 中登录 Firebase
- 在 Cloud Shell 编辑器终端中，运行命令 firebase login --no-localhost
- 访问提供的网址
  - 点击 Yes, I just ran this command
  - 点击 Yes, this is my session ID
  - 点击 Copy
- 返回到 Cloud Shell 编辑器终端
- 将复制的值粘贴到终端中显示 Enter authorization code: 的位置
- 按 Enter 键
将新网站部署到 Firebase Hosting
- 初始化新的 Firebase 项目
  - 您可以这样询问 Duet AI：
    - What are the commands to initialize and deploy a new firebase application?
  - 您将会看到类似 firebase init 和 firebase deploy 的结果以及说明。
  - 根据您的偏好，Duet AI 可能会建议多种可能的操作方法，下面是为您推荐的具体操作步骤：
    - firebase init
      - 将箭头向下移至 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
        
        按 Space 键
        
        按 Enter 键
      - 将箭头向下移至 Use an existing project
        
        按 Enter 键
      - 如果您看到项目列表，请将箭头向下移至您当前正在使用的项目
        
        按 Enter 键
      - 如果您收到这种要求：Please input the ID of the Google Cloud Project you would like to add Firebase:
        
        输入您的项目 ID。
        
        按 Enter 键
      - 对于其余的所有提示，请按 Enter 键
    - firebase deploy
通过调用 Cloud Functions API 端点重新部署应用
- 上述命令将会创建一个 public 目录，其中包含您之前创建的 frontend 目录中的 index.html 文件。您应在 ~/annotate-http-1/frontend/public/index.html 文件中进行后续更改。
- 打开 index.html 文件。
  - 点击探索器图标
  - 点击 frontend 文件夹
  - 点击 public 文件夹
  - 点击 index.html 文件
- 清空现有的 index.html 文件。
- 将您之前复制的代码粘贴到 index.html 文件中
- 运行 firebase deploy 以部署新应用
- 访问 Firebase Hosting 网址，查看它能否正常运行！
  - 注意：您可能需要强制刷新网站才能看到更新。

问题排查

index.html 文件应如下所示：

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

如果网站无法正常运行，请检查以下几个方面：

问题：404（未找到网页）fetch 方法中使用的网址是否包含 my-project-with-duet？
- 解决方案：将 my-project-with-duet 替换为您的项目 ID。
问题：404（未找到网页）fetch 方法中使用的网址是否不完整？
- 解决方案：请务必在 fetch 方法中添加完整网址。网址应类似于 https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
问题：提示的回答仍不太正确。
- 解决方案：尝试输入其他提示，为 Duet AI 提供更多指导，以便得出您希望生成的内容。请务必将 my-project-with-duet 替换为您的项目 ID。示例如下：
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
问题：您的网站在部署后无法正常运行？
- 解决方案：由于 LLM 具有不确定性，因此 Duet 生成的回答可能不合适。如果发生这种情况，请复制上面的示例 index.html，然后尝试使用 firebase deploy 重新部署。请务必将 my-project-with-duet 替换为您的项目 ID。

7. （可选）打开探索功能

使用 Duet AI 和编辑器中的助理将 CSS 样式添加到应用，并在完成后再次部署应用！如果您需要灵感，可以尝试以下示例提示：
- Make this index.html file use material design.
其他可供尝试的操作：
- 生成的网站应该能处理所有公开的 http 图片。使用 Duet 将图片显示在页面上。

8. （可选）删除项目

如果您不想为今天创建的资源付费，可以询问 Duet 如何执行此操作。

输入提示：
- How can I delete my project?
- 您将会看到类似 gcloud projects delete my-project-with-duet 的结果。
- 重要提示：请将上一条命令中的 my-project-with-duet 替换为您的项目 ID。
运行 gcloud projects delete 命令以移除您今天创建的所有资源。