運用 PaLM API 和 Flutter 塑造 Google 產品的智慧

1. 事前準備

生成式 AI 是最令人驚豔的機器學習 (ML) 突破性成果之一，這項技術可根據使用者的簡單文字或提示，根據使用者的簡單文字或提示，產生令人驚豔的影像、文字、音訊和影片。具體來說，PaLM API 推出後，Google 憑藉以 PaLM 技術重新構思的嶄新使用者體驗，為開發人員打造各類應用程式。

在本程式碼研究室中，您將建構使用 PaLM API 根據 Google 產品名稱產生 haikus 的應用程式。您也會使用 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 的網路設定
• PaLM API 的 API 金鑰

2. 做好準備

下載範例程式碼

1. 前往這個 GitHub 存放區。
2. 按一下「程式碼」>下載 ZIP 檔案即可下載這個程式碼研究室的所有程式碼。
3. 將下載的 ZIP 檔案解壓縮，將 codelabs-main 根資料夾解壓縮。只需要 haiku-generator 子目錄，其中包含下列資料夾：

• step0 到 step3 資料夾，其中包含您在本程式碼研究室中各步驟建構的範例程式碼。
• finished 資料夾，其中包含已完成範例應用程式的完整程式碼。

下載專案依附元件

1. 在 VS Code 中，按一下「File」(檔案) > 開啟資料夾 >Codes-main >haiku_generator >步驟 0 >lib >main.dart。
2. 如果看到 VS Code 對話方塊，提示您下載範例應用程式所需的套件，請按一下「Get package」(取得套件)。

3. 如果您沒有看到 VS Code 對話方塊，提示您下載範例應用程式所需的套件，請開啟終端機，然後前往 step0 資料夾並執行 flutter pub get 指令。

執行範例應用程式

1. 在 VS Code 中，請確認 Android Emulator 或 iOS 模擬器已正確設定，並顯示在狀態列中。

舉例來說，搭配 Android Emulator 使用 Pixel 5 時，畫面上顯示的內容如下：

搭載 iOS 模擬器的 iPhone 13 會出現以下內容：

2. 按一下「開始偵錯」圖示 。應用程式會在 Android Emulator 或 iOS 模擬器上啟動。

探索範例應用程式

在範例應用程式中，請注意下列事項：

• 使用者介面非常簡單，
• 當中的下拉式選單可讓使用者選擇特定 Google 產品。
• 使用者選取「Generate haiku!」按鈕後，Flutter 應用程式會將內建提示傳送至 PaLM API 端點，並產生 haikus。
• 應用程式收到回應後，會在文字小工具中顯示產生的 Haikus。不過，如果您選取「Generate haiku!」，應用程式仍無法與 PaLM API 通訊，因此不會有任何反應。

3. 設定 PaLM API 存取權

您必須具備 API 金鑰，才能使用 PaLM API。本程式碼研究室的發布時，PaLM API 仍為不公開預先發布版。

• 如要設定 PaLM API 存取權，請按照說明文件建立 API 金鑰，然後記下金鑰供稍後在本程式碼研究室中使用。

4. 新增 Google 產品選單

你的目標是產生 Google 產品的 Haikus 相關資訊。在執行階段，應用程式使用者可以從預先填入的產品名稱清單中動態選擇產品。

如要在應用程式中新增 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 端點以產生 Haiku，請按照下列步驟操作：

1. 在 VS Code 中，前往 step2/lib/data/repositories/poem_repository_impl.dart 檔案。
2. 在 getPoems() 函式的主體中新增下列程式碼：

poem_repository_impl.dart

// TODO: Replace YOUR_API_KEY with your API key.
var apiKey = 'YOUR_API_KEY';
const haikuCount = 5;

final url = Uri.parse(
   'https://generativelanguage.googleapis.com/v1beta2/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 for $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 金鑰。

成功接收回應並解碼後，UI 中的文字小工具會轉譯產生的 Haikus。

注意：酬載中的 examples 欄位會當做參考，並指示 API 如何產生類似文字。這通常稱為「語境學習」。您可以提供多個範例。

本程式碼研究室不會詳細說明如何調整提示或思考提示構想，但您可以透過整個提示工程領域，研究如何以最佳方式撰寫 LLM 提示。如要瞭解詳情，請試用其他提示，並據以調整 UI。您也可以參閱這份提示指南，瞭解這個即將出現的網域。

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. 在網路平台上執行應用程式

此外，您也可以在 Flutter 應用程式中新增網頁支援。根據預設，Flutter 應用程式會自動啟用網路平台，你只需啟動這個平台即可。

如要在網路平台中執行應用程式，請按照下列步驟操作：

1. 在 VS Code 中，將目標裝置設為「Chrome (web-javascript)」。
2. 按一下「開始偵錯」圖示 ，然後等待應用程式載入 Google Chrome。
3. 從下拉式選單中選擇產品，然後選取「Generate haiku!」。

9. 恭喜

您建構了一套完整堆疊應用程式，產生與 Google 產品相關的 AI 技術！雖然這個應用程式只會針對特定 Google 產品產生哈利克文，但你可以輕鬆變更提示，並生成所需文字。現在您已經瞭解如何使用 PaLM API，現在可以運用強大的 LLM 功能建構出色的應用程式！

瞭解詳情

• PaLM API 與MakerSuite：以簡單明瞭的方式開始原型設計及建構生成式 AI 應用程式
• Google 生成式 AI
• Flutter