使用 PaLM API 和 Flutter 创作关于 Google 产品的俳句诗

1. 准备工作

机器学习 (ML) 领域最激动人心的一项突破是生成式 AI，它可以根据用户提供的简单文本（或提示）生成令人惊叹的图片、文本、音频，甚至视频。具体而言，随着 PaLM API 的发布，Google 让开发者可以构建不同类别的应用，利用 PaLM 技术提供焕然一新的愉快用户体验。

在本 Codelab 中，您将构建一个应用，该应用可以使用 PaLM API 生成与 Google 产品名称相关的俳句诗。您还将使用 Flutter 打造一款用来展示俳句诗的跨平台应用。

前提条件

• 具备大型语言模型 (LLM) 的基础知识，例如提示技能
• 了解有关使用 Dart 开发 Flutter 应用的基本知识

学习内容

• 如何使用 Google 的 PaLM API。
• 如何构建用于展示结果的跨平台 Flutter 应用。

所需条件

• Flutter SDK
• 一款文本编辑器，例如 Visual Studio Code (VS Code)
• 适用于 Flutter 和 Dart 的 VS Code 设置
• 适用于 Flutter 的 Android 或 iOS 设置（包括模拟器）
• 适用于 Windows、Linux 或 macOS 的 Flutter 的桌面设置
• 适用于 Flutter 的 Web 设置
• PaLM API 的 API 密钥

2. 进行设置

下载起始代码

1. 进入此 GitHub 代码库。
2. 点击 Code（代码）> Download zip（下载 Zip 文件），下载此 Codelab 的所有代码。
3. 解压缩下载的 ZIP 文件，这会解压缩 codelabs-main 根文件夹。您只需要 haiku-generator 子目录，其中包含以下文件夹：

• step0 到 step4 文件夹，其中包含此 Codelab 中每一步的起始代码，您可以根据这些代码进行构建。
• finished 文件夹，其中包含已完成示例应用的完成后的代码。

下载项目依赖项

1. 在 VS Code 中，依次点击 File（文件）> Open folder（打开文件夹）> Codelabs-main > haiku_generator > step0 > lib > main.dart。
2. 如果您看到一个 VS Code 对话框，提示您下载起始应用所需的软件包，请点击 Get packages（获取软件包）。

3. 如果您没有看到用于提示您下载起始应用所需软件包的 VS Code 对话框，请打开终端，然后打开 step0 文件夹并运行 flutter pub get 命令。

运行起始应用

1. 在 VS Code 中，确保 Android 模拟器或 iOS 模拟器已正确设置并显示在状态栏中。

例如，当您将 Pixel 5 与 Android 模拟器搭配使用时，会看到以下内容：

当您将 iPhone 13 与 iOS 模拟器搭配使用时，会看到以下内容：

2. 点击 Start debugging（开始调试）。应用会在 Android 模拟器或 iOS 模拟器上启动。

探索起始应用

在起始应用中，请注意以下事项：

• 界面非常简单。
• 用户可在一个下拉菜单中选择特定的 Google 产品。
• 用户选择 Generate haiku!（生成俳句诗！）按钮后，Flutter 应用会向 PaLM API 端点发送内置提示，这会生成俳句诗。
• 应用收到响应后，会在文本 widget 中展示生成的俳句诗。但是，如果您选择 Generate haiku!（生成俳句诗！），却不会有任何反应，因为应用还无法与 PaLM API 通信。

3. 设置对 PaLM API 的访问权限

您需要 API 密钥才能使用 PaLM API。在此 Codelab 发布时，PaLM API 仍处于非公开预览版阶段。

• 如需设置对 PaLM API 的访问权限，请按照您收到的文档创建 API 密钥，然后记下该密钥，以便稍后在此 Codelab 中使用。

4. 添加 Google 产品菜单

您的目标是为 Google 产品生成俳句诗。在运行时，应用用户可以从预先填充的产品名称列表中动态选择产品。

如要向应用中添加 Google 产品列表，请按以下步骤操作：

1. 在 VS Code 中，找到 step1/lib/data/repositories/product_repository_impl.dart 文件。
2. 在 getAllProducts() 函数的正文中，添加以下用于存储 Google 产品名称数组的变量：

product_repository_impl .dart

var productData = [
  {'productName': 'Google Search'},
  {'productName': 'YouTube'},
  {'productName': 'Android'},
  {'productName': 'Google Maps'},
  {'productName': 'Gmail'}
];

5. 向 PaLM API 发送请求并解码响应

用户选择的产品名称将填充到以下提示模板：

Context: You are an awesome haiku writer.
Message content: Write a cool haiku about {product name}.

如需将此请求发送到 PaLM API 端点以生成俳句诗，请按以下步骤操作：

1. 在 VS Code 中，找到 step2/lib/data/repositories/poem_repository_impl.dart 文件。
2. 在 getPoems() 函数的正文中添加以下代码：

poem_repository_impl.dart

const haikuCount = 5;
// Replace the YOUR_API_KEY environment variable placeholder with your API key.
final apiKey = dotenv.env['YOUR_API_KEY']!;
final url = Uri.parse(      'https://generativelanguage.googleapis.com/v1beta1/models/chat-bison-001:generateMessage?key=$apiKey');
final headers = {'Content-Type': 'application/json'};
final body = jsonEncode({
 "prompt": {
   "context": "You are an awesome haiku writer.",
   "examples": [
     {
       "input": {"content": "Write a haiku about Google Photos."},
       "output": {
         "content":
             "Google Photos, my friend\nA journey of a lifetime\nCaptured in pixels"
       }
     }
   ],
   "messages": [
     {"content": "Write a cool haiku of about $productName"}
   ]
 },
 "candidate_count": haikuCount,
 "temperature": 1,
});

try {
 final response = await http.post(url, headers: headers, body: body);
 if (response.statusCode == 200) {
   final decodedResponse = json.decode(response.body);
   String haikus = 'Here are $haikuCount haikus about $productName:\n\n';
   for (var i = 0; i < haikuCount; i++) {
     haikus += '${i + 1}.\n';
     haikus += decodedResponse['candidates'][i]['content'] + '\n\n';
   }
   return haikus;
 } else {
   return 'Request failed with status: ${response.statusCode}.\n\n${response.body}';
 }
} catch (error) {
 throw Exception('Error sending POST request: $error');
}

将 YOUR_API_KEY 环境变量替换为之前记下的 API 密钥。

成功接收和解码响应后，界面中的文本 widget 会渲染生成的俳句诗。

注意：载荷中的 examples 字段将作为参考，告知 API 如何生成类似文本。这通常称为“情境学习”。您可以提供多个示例。

此 Codelab 不会详细介绍如何调整提示或构思提示，但有一个完善的提示工程领域，该领域研究如何为大型语言模型 (LLM) 撰写最适合的提示。如需了解详情，不妨试试其他提示并相应地调整界面，从而了解这个新兴领域中的其他资源。

6. 在移动平台上运行应用

1. 在 VS Code 中，将目标设备设置为 Android 或 iOS 设备。
2. 点击 Start debugging（开始调试），然后等待应用加载。
3. 从下拉菜单中选择相应产品，然后选择 Generate haiku!（生成俳句诗！）。该应用会显示与所选产品相关的俳句诗。

7. 在桌面平台上运行应用

除了 Android 和 iOS 之外，Flutter 还支持桌面平台，包括 Linux、macOS 和 Windows。

在 Linux 上运行应用

1. 在 VS Code 中，将目标设备设置为 Linux (linux-x64)。
2. 点击 Start debugging（开始调试），然后等待应用加载。
3. 从下拉菜单中选择相应产品，然后选择 Generate haiku!（生成俳句诗！）。

在 macOS 上运行应用

对于 macOS，您需要设置适当的使用权，因为应用会向后端发送 HTTP 请求。如需了解详情，请参阅使用权和应用沙盒。

如需在 macOS 上运行应用，请按以下步骤操作：

1. 在 step3/macOS/Runner/DebugProfile.entitlements 和 step3/macOS/Runner/Release.entitlements 文件中，添加以下代码：

DebugProfile.entitlements | Release.entitlements

<key>com.apple.security.network.client</key>
<true/>

2. 在 VS Code 中，将目标设备设置为 macOS (darwin)。
3. 点击 Start debugging（开始调试），然后等待应用加载。
4. 从下拉菜单中选择相应产品，然后选择 Generate haiku!（生成俳句诗！）。

在 Windows 上运行应用

1. 在 VS Code 中，将目标设备设置为 Windows (windows-x64)。
2. 点击 Start debugging（开始调试），然后等待应用加载。
3. 从下拉菜单中选择相应产品，然后选择 Generate haiku!（生成俳句诗！）。

8. 在 Web 平台上运行应用

您还可以向 Flutter 应用添加 Web 支持。默认情况下，系统会自动为 Flutter 应用启用 Web 平台，因此您只需启动应用即可。

如需在 Web 平台上运行应用，请按以下步骤操作：

1. 在 VS Code 中，将目标设备设置为 Chrome (web-javascript)。
2. 点击 Start debugging（开始调试），然后等待应用在 Google Chrome 中加载。
3. 从下拉菜单中选择相应产品，然后选择 Generate haiku!（生成俳句诗！）。

9. 恭喜

您已经构建了一个全栈应用，可以生成与 Google 产品有关的俳句了！虽然该应用只能为部分 Google 产品生成俳句诗，但您可以轻松更改提示，并生成想要的文本。现在，您已经知道如何使用 PaLM API 了，那就借助 LLM 的强大能力打造出令人惊叹的应用吧！

了解详情

• PaLM API & MakerSuite：提供方便易用的方法，助力用户开始设计生成式 AI 应用的原型并进行构建
• Flutter