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

1. 事前準備

生成式 AI 是機器學習 (ML) 最令人振奮的突破之一，可根據使用者提供的簡單文字或提示，生成令人驚豔的圖片、文字、音訊，甚至是影片。Google 推出 PaLM API，讓開發人員能運用 PaLM 技術，打造各類應用程式，提供令人驚豔的使用者體驗。

在本程式碼研究室中，您將建構一個應用程式，使用 PaLM API 根據 Google 產品名稱生成俳句。您也會使用 Flutter 建立可顯示俳句的跨平台應用程式。

必要條件

• 大型語言模型 (LLM) 的基本知識，例如提示
• 具備使用 Dart 進行 Flutter 開發的基本知識

課程內容

• 如何使用 Google 的 PaLM API。
• 如何建構跨平台的 Flutter 應用程式來顯示結果。

軟硬體需求

• Flutter SDK
• 文字編輯器，例如 Visual Studio Code (VS Code)
• 設定 VS Code 以使用 Flutter 和 Dart
• Flutter 的 Android 或 iOS 設定 (包括模擬器)
• 適用於 Windows、Linux 或 macOS 的 Flutter 桌面設定
• Flutter 的網頁設定
• PaLM API 的 API 金鑰

2. 做好準備

下載範例程式碼

1. 前往這個 GitHub 存放區。
2. 依序點選「Code」>「Download zip」，下載這個程式碼研究室的所有程式碼。
3. 將下載的 ZIP 檔案解壓縮，解壓縮後會產生 codelabs-main 根資料夾。您只需要 haiku-generator 子目錄，其中包含下列資料夾：

• step0 到 step3 資料夾，內含您在本程式碼研究室中每個步驟的範例程式碼。
• 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 Emulator 或 iOS 模擬器已正確設定，並顯示在狀態列中。

舉例來說，在 Android 模擬器中使用 Pixel 5 時，畫面會顯示以下內容：

以下是使用 iOS 模擬器搭配 iPhone 13 時的畫面：

2. 按一下「Start debugging」。應用程式會在 Android Emulator 或 iOS Simulator 上啟動。

探索範例應用程式

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

• 使用者介面相當簡單。
• 使用者可以透過下拉式選單選擇特定 Google 產品。
• 使用者選取「Generate haiku!」(生成俳句！) 按鈕後，Flutter 應用程式會將內建提示傳送至 PaLM API 端點，生成俳句。
• 應用程式收到回覆後，會在文字小工具中顯示生成的俳句。不過，如果您選取「Generate haiku!」(生成俳句！)，應用程式不會有任何反應，因為目前還無法與 PaLM API 通訊。

3. 設定 PaLM API 的存取權

您必須具備 API 金鑰，才能使用 PaLM API。本程式碼實驗室發布時，PaLM API 仍處於不公開預先發布階段。

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

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

// 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 中的文字小工具就會算繪生成的俳句。

附註：酬載中的 examples 欄位會做為參考，並告知 API 如何生成類似文字。這通常稱為「情境內學習」。你可以提供多個範例。

本程式碼研究室不會詳細說明如何調整提示或發想提示，但整個提示工程領域都在研究如何為 LLM 編寫最佳提示。如要瞭解詳情，請嘗試其他提示詞並相應調整 UI，並參閱這個新興領域的提示詞指南。

6. 在行動平台執行應用程式

1. 在 VS Code 中，將目標裝置設為 Android 或 iOS 裝置。
2. 按一下「開始偵錯」圖示 ，然後等待應用程式載入。
3. 從下拉式選單中選取產品，然後選取「生成俳句！」。應用程式會顯示所選產品的俳句。

7. 在電腦平台執行應用程式

除了 Android 和 iOS，Flutter 也支援 Linux、macOS 和 Windows 等電腦平台。

在 Linux 上執行應用程式

1. 在 VS Code 中，將目標裝置設為 Linux (linux-x64)。
2. 按一下「開始偵錯」圖示 ，然後等待應用程式載入。
3. 從下拉式選單中選擇產品，然後選取「生成俳句！」。

在 macOS 上執行應用程式

如果是 macOS，由於應用程式會將 HTTP 要求傳送至後端，因此您需要設定適當的權利。詳情請參閱「Entitlements and the App Sandbox」。

如要在 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. 按一下「開始偵錯」圖示 ，然後等待應用程式載入。
4. 從下拉式選單中選擇產品，然後選取「生成俳句！」。

在 Windows 上執行應用程式

1. 在 VS Code 中，將目標裝置設為 Windows (windows-x64)。
2. 按一下「Start debugging」圖示 ，然後等待應用程式載入。
3. 從下拉式選單中選擇產品，然後選取「生成俳句！」。

8. 在網頁平台上執行應用程式

您也可以為 Flutter 應用程式新增網頁支援。根據預設，Flutter 應用程式會自動啟用網頁平台，因此您只需要啟動即可。

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

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

9. 恭喜

您建構了完整堆疊的應用程式，可生成有關 Google 產品的俳句！雖然這款應用程式只會為特定 Google 產品生成俳句，但你可以輕鬆變更提示詞，生成所需文字。現在您已瞭解如何使用 PaLM API，可以運用 LLM 的強大功能建構出色的應用程式！

瞭解詳情

• PaLM API 和 MakerSuite：輕鬆開始設計原型並建構生成式 AI 應用程式
• Google 生成式 AI
• Flutter