使用 Firebase Extensions 建構人工智慧驅動的 Web 應用

1. 開始之前

在此 Codelab 中，您將了解如何建立由 AI 驅動的 Web 應用，透過 Firebase Extensions 提供引人入勝的使用者體驗。

先決條件

• 了解 Node.js 和 JavaScript

你將學到什麼

• 如何使用AI相關的擴充來處理語言和視訊輸入。
• 如何使用 Cloud Functions for Firebase 在擴充之間形成管道。
• 如何使用 JavaScript 存取擴充功能產生的輸出。

你需要什麼

• 您選擇的瀏覽器，例如 Google Chrome
• 具有程式碼編輯器和終端的開發環境
• 用於建立和管理 Firebase 專案的 Google 帳戶

2. 檢查 Web 應用程式及其 Firebase 服務

本部分介紹您將在此 Codelab 中建立的 Web 應用以及將使用哪種 Firebase 來建置它們。

評論應用程式

一家 T 卹公司對其一件 T 恤的長篇評論感到不知所措，並且不確定其總體評級。完成的Reviewly Web 應用程式總結了每條評論，為每條評論提供星級評級，並使用每條評論來推斷產品的整體評級。用戶還可以展開每個摘要評論以查看原始評論。

聊天機器人應用程式

學校的教學人員對一般主題的重複問題感到不知所措，因此他們希望自動回覆。完整的聊天機器人應用程式為學生提供了一個對話式聊天機器人，該機器人由大型語言模型 (LLM) 提供支持，可以回答有關一般主題的問題。聊天機器人具有歷史背景，因此它的回應可以考慮學生在同一對話中提出的先前問題。

影片提示應用程式

政府部門希望其視訊提供音訊描述以提高可訪問性，但他們有數百個視訊需要註釋，需要一種簡化的方法。完成的視訊提示應用程式是一個原型，該部門將對其進行審查以評估其有效性。

這些是視訊提示應用程式中使用的擴充功能：

• 使用 Cloud Video AI 擴充標記影片— 從上傳到儲存的每個影片中擷取標籤。
• 具有 PaLM API 擴充功能的語言任務— 將標籤總結為文字描述。
• 將文字轉換為語音擴充 — 建立視訊描述的音訊版本。

3. 設定您的開發環境

驗證您的 Node.js 版本

1. 在您的終端機中，驗證您是否安裝了 Node.js v20.0.0 或更高版本：

   node -v
   

2. 如果您沒有 Node.js v20.0.0 或更高版本，請下載並安裝它。

下載儲存庫

1. 如果您安裝了 git，請複製 Codelab 的 GitHub 儲存庫：

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. 如果您沒有安裝 git，請以 zip 檔案形式下載 GitHub 儲存庫。

查看資料夾結構

在本機上，找到克隆的儲存庫並查看資料夾結構。下表包含資料夾及其說明：

每個資料夾都包含一個readme.md文件，該文件提供使用簡化指令快速啟動運行相應 Web 應用程式的方法。但是，如果您是首次學習者，則應該完成此 Codelab，因為它包含最全面的說明集。

如果您不確定是否按照本 Codelab 中的指示正確應用了程式碼，您可以在reviewly-end 、 chatbot-end和video-hint-end資料夾中找到相應應用的解決方案代碼。

安裝 Firebase CLI

執行以下命令來驗證您是否已安裝 Firebase CLI 並且其版本是否為 v12.5.4 或更高版本：

firebase --version

• 如果您安裝了 Firebase CLI，但不是 v12.5.4 或更高版本，請更新它：

  npm update -g firebase-tools
  

• 如果您尚未安裝 Firebase CLI，請安裝它：

  npm install -g firebase-tools
  

如果您因權限錯誤而無法安裝 Firebase CLI，請參閱npm 文件或使用其他安裝選項。

登入 Firebase

1. 在您的終端機中，導航至ai-extensions-codelab資料夾並登入 Firebase：

   cd ai-extensions-codelab
   firebase login
   

2. 如果您的終端顯示您已登入 Firebase，請繼續執行此 Codelab 的設定您的 Firebase 專案部分。
3. 根據您是否希望 Firebase 收集數據，輸入Y或N 。
4. 在瀏覽器中，選擇您的 Google 帳戶，然後按一下「允許」 。

4. 設定您的 Firebase 項目

在本部分中，您將設定一個Firebase 專案並將 Firebase Web 應用程式與其關聯。您還將啟用範例 Web 應用程式使用的 Firebase 服務。

創建 Firebase 項目

1. 在Firebase 控制台中，按一下「建立專案」 。
2. 在「輸入您的項目名稱」文字方塊中，輸入AI Extensions Codelab （或您選擇的項目名稱），然後按一下「繼續」 。
3. 對於此 Codelab，您不需要 Google Analytics，因此請關閉為此專案啟用 Google Analytics選項。
4. 點選建立項目。
5. 等待您的專案配置完畢，然後按一下繼續。
6. 在您的 Firebase 專案中，前往專案設定。記下您的項目 ID，因為稍後需要它。此唯一識別碼是您的專案的識別方式（例如，在 Firebase CLI 中）。

下載 Firebase 服務帳戶

您將在此 Codelab 中建立的一些 Web 應用程式使用Next.js進行伺服器端渲染。

適用於 Node.js 的Firebase Admin SDK用於確保安全規則在伺服器端程式碼中發揮作用。要在 Firebase 管理中使用 API，您需要從 Firebase 控制台下載 Firebase服務帳戶。

1. 在 Firebase 控制台中，導覽至專案設定中的服務帳戶頁面。
2. 點選產生新私鑰>產生金鑰。
3. 文件下載到檔案系統後，取得該檔案的完整路徑。
   例如，如果您將檔案下載到「下載」資料夾，則完整路徑可能如下所示： /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. 在終端中，將GOOGLE_APPLICATION_CREDENTIALS環境變數設定為下載的私鑰的路徑。在 Unix 環境中，指令可能如下所示：

   export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
   

5. 保持此終端開啟並在本 Codelab 的剩餘部分中使用它，因為如果啟動新的終端會話，您的環境變數可能會遺失。
   如果開啟新的終端會話，則必須重新執行先前的命令。

升級您的 Firebase 定價計劃

要使用 Cloud Functions 和 Firebase Extensions，您的 Firebase 專案需要採用Blaze 定價計劃，這表示它與Cloud Billing 帳號關聯。

• Cloud Billing 帳號需要付款方式，例如信用卡。
• 如果您是 Firebase 和 Google Cloud 的新手，請檢查您是否有資格獲得 300 美元的贈金和免費試用 Cloud Billing 帳戶。

但請注意，完成此 Codelab 不應產生任何實際費用。

要將您的專案升級到 Blaze 計劃，請按照以下步驟操作：

1. 在 Firebase 控制台中，選擇升級您的計畫。
2. 在對話方塊中，選擇 Blaze 計劃，然後按照螢幕上的指示將您的項目與 Cloud Billing 帳戶關聯。
   如果您需要建立 Cloud Billing 帳號，您可能需要導覽回 Firebase 控制台中的升級流程才能完成升級。

在 Firebase 控制台中設定 Firebase 服務

在此部分中，您將預配並設定本 Codelab 中的 Web 應用程式所使用的多項 Firebase 服務。請注意，並非所有這些服務都會在每個 Web 應用程式中使用，但現在設定所有這些服務可以輕鬆完成此 Codelab。

設定身份驗證

您將在聊天機器人應用程式和視訊提示應用程式中使用身份驗證。但請記住，如果您正在建立真正的應用程序，則每個應用程式都應該有自己的 Firebase 專案。

1. 在 Firebase 控制台中，導覽至身份驗證。
2. 單擊開始。
3. 在其他提供者列中，按一下Google > 啟用。

4. 在面向公眾的項目名稱文字方塊中，輸入一個容易記住的名稱，例如My AI Extensions Codelab 。
5. 從專案支援電子郵件下拉清單中，選擇您的電子郵件地址。
6. 按一下「儲存」 。
   

設定 Cloud Firestore

您將在所有三個應用程式中使用 Firestore。但請記住，如果您正在建立真正的應用程序，則每個應用程式都應該有自己的 Firebase 專案。

1. 在 Firebase 控制台中，導覽至Firestore 。
2. 按一下建立資料庫 > 以測試模式啟動 > 下一步。
   稍後在此 Codelab 中，您將添加安全規則來保護您的資料。請勿在未為資料庫新增安全規則的情況下公開分發或公開應用程式。
3. 使用預設位置或選擇您選擇的位置。
   對於真正的應用程序，您需要選擇靠近用戶的位置。請注意，此位置以後無法更改，並且它也將自動成為您的預設 Cloud Storage 儲存桶的位置（下一步）。
4. 按一下“完成” 。

為 Firebase 設定雲端存儲

您將結合使用 Cloud Storage 和視訊提示應用，並嘗試將文字轉換為語音擴充（Codelab 的下一步）。

1. 在 Firebase 控制台中，導覽至Storage 。
2. 按一下開始 > 以測試模式啟動 > 下一步。
   稍後在此 Codelab 中，您將添加安全規則來保護您的資料。在未為儲存桶添加安全規則的情況下，請勿公開分發或公開應用程式。
3. 您的儲存桶的位置應該已選擇（由於在上一個步驟中設定了 Firestore）。
4. 按一下“完成” 。

在此 Codelab 的下一部分中，您將安裝擴充功能並修改此 Codelab 中每個範例應用的程式碼庫，以使三個不同的 Web 應用程式正常運作。

5. 為 Reviewly 應用程式設定「使用 PaLM API 的語言任務」擴展

使用 PaLM API 擴充安裝語言任務

1. 使用 PaLM API 擴充導航至語言任務。
2. 按一下Firebase 控制台中的「安裝」 。
3. 選擇您的 Firebase 專案。
4. 在查看已啟用的 API 和已建立的資源部分中，按一下向您建議的任何服務旁邊的啟用：

5. 按一下“下一步”>“下一步”。
6. 在集合路徑文字方塊中，輸入bot 。
7. 在提示文字方塊中輸入 。
8. 在變數欄位文字方塊中，輸入input 。
9. 在回應欄位文字方塊中，輸入text 。
10. 從Cloud Functions 位置下拉清單中，選擇Iowa (us-central1)或您先前為 Firestore 和 Cloud Storage 選擇的位置。
11. 從語言模型下拉清單中，選擇text-bison-001 。
12. 將所有其他值保留為預設值。
13. 點擊安裝擴充功能並等待擴充功能安裝。

使用 PaLM API 擴充功能嘗試語言任務

雖然此 Codelab 的目標是透過 Web 應用程式透過PaLM API 擴充功能與語言任務進行交互，但透過使用 Firebase 控制台觸發擴充功能來了解該擴充功能的工作原理會很有幫助。當 Cloud Firestore 文件新增至bot集合時，該擴充功能會觸發。

若要使用 Firebase 控制台檢視該擴充功能的工作原理，請依照下列步驟操作：

1. 在 Firebase 控制台中，導覽至Firestore 。
2. 在bot集合中，點擊新增文件。
3. 在文件 ID文字方塊中，按一下自動 ID 。
4. 在欄位文字方塊中，輸入input 。
5. 在值文字方塊中，輸入Tell me about the moon 。
6. 點擊“儲存”並等待幾秒鐘。您的bot集合中的文件現在包含對您的查詢的回應。

6. 設定 Reviewly 應用程式以使用 Firebase

要執行Reviewly應用，您需要設定應用程式的程式碼和 Firebase CLI 以與您的 Firebase 專案互動。

將 Firebase 服務和配置新增到您的應用程式碼中

要使用 Firebase，您應用的程式碼庫需要適用於您要使用的服務的 Firebase SDK，以及告訴這些 SDK 要使用哪個 Firebase 專案的 Firebase 配置。

此 Codelab 的範例應用程式已包含 SDK 所需的所有匯入和初始化程式碼（請參閱reviewly-start/js/reviews.js ），因此您無需新增這些程式碼。但是，範例套用只有 Firebase 配置的佔位符值（請參閱reviewly-start/js/firebase-config.js ），因此您需要向 Firebase 專案註冊您的應用，以獲得應用程式的唯一 Firebase 設定值。

1. 在 Firebase 控制台的 Firebase 專案中，導覽至專案概述，然後按一下網路.
   
2. 在應用程式暱稱文字方塊中，輸入一個容易記住的應用程式暱稱，例如My Reviewly app 。
3. 不要選取同時為此應用程式設定 Firebase 託管複選框。您稍後將在 Codelab 中執行這些步驟。
4. 點擊註冊應用程式。
5. 控制台顯示一個程式碼片段，用於使用特定於應用程式的 Firebase 設定物件新增和初始化 Firebase SDK。複製 Firebase 配置物件中的所有屬性。
6. 在程式碼編輯器中，開啟reviewly-start/js/firebase-config.js檔案。
7. 將佔位符值替換為您剛剛複製的值。如果您擁有未在Reviewly應用程式中使用的 Firebase 服務屬性和值，也沒關係。
8. 儲存文件。
9. 返回 Firebase 控制台，點選繼續控制台。

設定終端以針對您的 Firebase 專案執行 Firebase CLI 命令

1. 在您的終端機中，導航到您之前下載的ai-extensions-codelab資料夾。
2. 導航到reviewly-start Web 應用程式資料夾：

   cd reviewly-start
   

3. 使 Firebase CLI 針對特定 Firebase 專案執行指令：

   firebase use YOUR_PROJECT_ID
   

運行並查看Reviewly Web 應用程式

若要執行並查看 Web 應用程序，請執行下列步驟：

1. 在終端機中，安裝依賴項，然後執行 Web 應用程式：

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. 在瀏覽器中，導覽至終端機中顯示的 URL。例如： http://localhost:8080 。

該頁面應該加載，但您會注意到缺少各種功能。我們將在此 Codelab 的後續步驟中加入這些內容。

7. 在 Reviewly 應用程式中新增功能

在此 Codelab 的最後一步中，您在本地運行了Reviewly應用，但它沒有太多功能，並且尚未使用已安裝的擴充功能。在 Codelab 的這一步驟中，您將新增此功能並使用 Web 應用程式觸發擴充功能。

部署安全性規則

此 Codelab 的範例應用程式包含 Firestore 和 Cloud Storage for Firebase 的安全規則集。將這些安全規則部署到 Firebase 專案後，可以更好地保護資料庫和儲存桶中的資料免受濫用。

您可以在firestore.rules和storage.rules檔案中查看這些規則。

1. 若要部署這些安全規則，請在終端機中執行下列命令：

   firebase deploy --only firestore:rules,storage
   

2. 如果系統詢問您： "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" ，選擇是。

更新應用程式的程式碼以觸發擴展

在Reviewly應用程式中，新增至 Firestore 的新評論會觸發擴充功能來總結評論。

1. 在程式碼編輯器中，開啟functions/add-mock-reviews.js檔。
2. 將reviewWithPrompt變數替換為以下程式碼，這會提示語言模型進行更短的審查。

   const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
   
   Product name: "Blue t-shirt with cat picture". Review: """${review}"""
   
   Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
   

3. 在reviewWithPrompt變數之後，將reviewDocument變數替換為以下程式碼，這將建立一個審查文檔，以便將其新增至 Firestore。

   const reviewDocument = {
           input: reviewWithPrompt,
           originalReview: review,
           timestamp: Timestamp.now(),
   };
   
   getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
   

4. 儲存文件。
5. 在js/reviews.js檔案中，在Insert code below, to import your Firebase Callable Cloud Function註釋，請使用httpsCallable幫助程式匯入您的 Firebase HTTP 可呼叫函數：

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. 在Insert code below, to invoke your Firebase Callable Cloud Function註釋，請呼叫您的 Firebase HTTP 可呼叫函數：

   await addMockReviews();
   

7. 儲存文件。

部署新增評論的功能

Reviewly Web 應用程式使用雲端功能來新增評論。但目前，雲端功能尚未部署。

若要使用 Firebase CLI 部署您的函數，請依照下列步驟操作：

1. 在終端機中，當仍在reviewly-start資料夾中時，按Control+C停止伺服器。
2. 部署您的函數：

   firebase deploy --only functions
   

3. 如果您Permission denied while using the Eventarc Service Agent或類似錯誤，請等待幾分鐘，然後重試該指令。

您剛剛使用 Cloud Functions 部署了第一個自訂函數。 Firebase 控制台提供了一個儀表板，您可以在其中查看部署到 Firebase 專案的所有功能。

再次運行並查看Reviewly Web 應用程式（現在具有功能）

要運行並查看現在可用的 Web 應用程序，請按照以下步驟操作：

1. 在您的終端機中，再次執行伺服器：

   npm run dev
   

2. 在瀏覽器中，導覽至終端機中顯示的 URL。例如： http://localhost:8080 。
3. 在應用程式中，按一下「新增一些模擬評論」 ，然後等待幾秒鐘，以便出現一些長篇評論。
   在後台，帶有 PaLM API 擴充功能的語言任務會對代表新評論的新文件做出反應。您先前新增的提示請求語言模型提供較短的摘要。
4. 若要查看整個評論以及用於評論的提示，請按一下其中一篇評論，然後選擇「顯示 PaLM 提示」 。

8. 為 Chatbot 應用程式設定「Chatbot with PaLM API」擴充

安裝具有 PaLM API 擴充功能的聊天機器人

1. 使用 PaLM API 擴充導航到聊天機器人。
2. 按一下Firebase 控制台中的「安裝」 。
3. 選擇您的 Firebase 專案。
4. 按一下「下一步」>「下一步」>「下一步」 ，直到到達「設定擴充」部分。
5. 在集合路徑文字方塊中，輸入users/{uid}/discussion/{discussionId}/messages 。
6. 從Cloud Functions 位置下拉清單中，選擇Iowa (us-central1)或您先前為 Firestore 和 Cloud Storage 選擇的位置。
7. 從語言模型下拉清單中，選擇chat-bison 。
8. 將所有其他值保留為預設值。
9. 點擊安裝擴充功能並等待擴充功能安裝。

嘗試使用 PaLM API 擴充功能的聊天機器人

雖然此 Codelab 的目標是透過 Web 應用程式透過PaLM API 擴充功能與聊天機器人進行交互，但透過使用 Firebase 控制台觸發擴充功能來了解該擴充功能的工作原理會很有幫助。當在users/{uid}/discussion/{discussionId}/messages集合中建立 Cloud Firestore 文件時，此擴充功能會觸發。

1. 在 Firebase 控制台中，導覽至Firestore 。
2. 點選開始收集。
   1. 在集合 ID文字方塊中，輸入users ，然後按一下下一步。
   2. 在「文件 ID」文字方塊中，按一下「自動 ID」 ，然後按一下「儲存」 。
3. 在users集合中，按一下開始收集。
   
   1. 在「集合 ID」文字方塊中，輸入discussion ，然後按一下「下一步」 。
   2. 在「文件 ID」文字方塊中，按一下「自動 ID」 ，然後按一下「儲存」 。
4. 在discussion集中，點擊開始收集。
   
   1. 在集合 ID文字方塊中，輸入messages ，然後按一下下一步。
   2. 在文件 ID文字方塊中，按一下自動 ID 。
   3. 在欄位文字方塊中，輸入prompt 。
   4. 在「值」文字方塊中，輸入Tell me 5 random fruits 。
   5. 點擊“儲存”並等待幾秒鐘。 messages集合現在包含一個文檔，其中包含對您的查詢的回應。

5. 在messages集合中，按一下新增文件。
   1. 在文件 ID文字方塊中，按一下自動 ID 。
   2. 在欄位文字方塊中，輸入prompt 。
   3. 在值文字方塊中，輸入And now, vegetables 。
   4. 點擊“儲存”並等待幾秒鐘。 messages集合現在包含一個文檔，其中包含對您的查詢的回應。

9. 設定 Chatbot 應用程式以使用 Firebase

要執行Chatbot應用，您需要設定應用程式的程式碼和 Firebase CLI 以與您的 Firebase 專案進行互動。

將 Firebase 服務和配置新增到您的應用程式碼中

要使用 Firebase，您應用的程式碼庫需要適用於您要使用的服務的 Firebase SDK，以及告訴這些 SDK 要使用哪個 Firebase 專案的 Firebase 配置。

此 Codelab 的範例應用程式已包含 SDK 所需的所有匯入和初始化程式碼（請參閱chatbot-start/lib/firebase/firebase.js ），因此您無需新增這些程式碼。 However, the sample app only has placeholder values for the Firebase configuration (see chatbot-start/lib/firebase/firebase-config.js ), so you need to register your app with your Firebase project to get the unique Firebase configuration values for your應用程式.

1. 在 Firebase 控制台的 Firebase 專案中，導覽至專案概述，然後按一下 Web （或如果您已經向專案註冊了應用程序，請按一下「新增應用程式」）。
2. 在應用程式暱稱文字方塊中，輸入一個容易記住的應用程式暱稱，例如My Chatbot app 。
3. 不要選取同時為此應用程式設定 Firebase 託管複選框。您稍後將在 Codelab 中執行這些步驟。
4. 點擊註冊應用程式。
5. 控制台顯示一個程式碼片段，用於使用特定於應用程式的 Firebase 設定物件新增和初始化 Firebase SDK。複製 Firebase 配置物件中的所有屬性。
6. 在程式碼編輯器中，開啟chatbot-start/lib/firebase/firebase-config.js檔案。
7. 將佔位符值替換為您剛剛複製的值。如果您有 Firebase 服務的屬性和值不在Chatbot應用程式中使用，也沒關係。
8. 儲存文件。
9. 返回 Firebase 控制台，點選繼續控制台。

設定終端以針對您的 Firebase 專案執行 Firebase CLI 命令

1. 在您的終端機中，按Control+C停止伺服器執行先前的 Web 應用程式。
2. 在您的終端機中，導航至chatbot-start Web 應用程式資料夾：

   cd ../chatbot-start
   

3. 使 Firebase CLI 針對特定 Firebase 專案執行指令：

   firebase use YOUR_PROJECT_ID
   

設定應用程式的程式碼庫以使用框架感知的 Firebase 託管

此 Codelab 將 Web 框架與Chatbot Web 應用程式一起使用託管（預覽版） 。

1. 在您的終端機中，使用 Firebase Hosting 啟用 Web 框架：

   firebase experiments:enable webframeworks
   

2. 初始化 Firebase 託管：

   firebase init hosting
   

3. 當提示codebase in your current directory, should we use this? Detected an existing Next.js程式碼庫」時，我們應該使用它嗎？ ，按 Y。
4. 當出現提示時In which region would you like to host server-side content, if applicable? ，選擇預設區域或您先前為 Firestore 和 Cloud Storage 選擇的位置，然後按下Enter （或在 macOS 上return ）。
5. 當提示Set up automatic builds and deploys with GitHub? ，按N 。

運行並查看Chatbot Web 應用程式

1. 在終端機中，安裝依賴項，然後執行 Web 應用程式：

   npm install
   firebase emulators:start --only hosting
   

2. 在瀏覽器中，導覽至本機託管的託管 URL。在大多數情況下，它是http://localhost:5000/或類似的內容。

該頁面應該加載，但您會注意到缺少各種功能。我們將在此 Codelab 的後續步驟中加入這些內容。

排除執行 Web 應用程式的故障

如果您在網頁中看到以下錯誤： Error: Firebase session cookie has incorrect... ，您需要刪除本機主機環境中的所有 cookie。為此，請按照刪除 cookie | 的說明進行操作。開發工具文件。 。

10. 在聊天機器人應用程式中新增功能

在此 Codelab 的最後一步中，您在本機上運行了Chatbot應用，但它沒有太多功能，並且尚未使用已安裝的擴充功能。在 Codelab 的這一步驟中，您將新增此功能並使用 Web 應用程式觸發擴充功能。

部署安全性規則

此 Codelab 的範例應用程式包含 Firestore 和 Cloud Storage for Firebase 的安全規則集。將這些安全規則部署到 Firebase 專案後，可以更好地保護資料庫和儲存桶中的資料免受濫用。

您可以在firestore.rules和storage.rules檔案中查看這些規則。

1. 若要部署這些安全規則，請在終端機中執行下列命令：

   firebase deploy --only firestore:rules,storage
   

2. 如果系統詢問您： "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" ，選擇是。

更新程式碼以將訊息新增至 Cloud Firestore

在Chatbot應用程式中，來自使用者的新訊息會加入 Firestore 中，並觸發擴充功能產生回應。

1. 在程式碼編輯器中，開啟lib/firebase/firestore.js檔案。
2. 在檔案末尾附近，找到addNewMessage函數，該函數處理新訊息的新增。
   此函數已接受以下物件屬性：
   

   範圍	描述
   userId	登入用戶的ID
   discussionId	新增訊息的討論 ID
   message	訊息正文內容
   db	Firestore 資料庫實例

   準備好這些變數後，您可以新增 Cloud Firestore 文件來表示新訊息。
3. 在addNewMessage函數的主體中// Insert your code below ⬇️註解之後，加入以下程式碼：

   await addDoc(
           collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           ),
           {
                   prompt: message,
                   createTime: serverTimestamp(),
           }
   );
   
   await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
           latestMessage: message,
           updatedTime: serverTimestamp(),
   });
   

更新程式碼以建構查詢來取得訊息

1. 仍然在lib/firebase/firestore.js檔案中，找到getMessagesQuery函數，該函數需要傳回一個 Cloud Firestore查詢，該查詢會尋找儲存在users/{uid}/discussion/{discussionId}/messages集合路徑中的消息。
2. 將整個getMessagesQuery函數替換為以下程式碼：

   function getMessagesQuery(db, userId, discussionId) {
           if (!userId || !discussionId) {
                   return null;
           }
           const messagesRef = collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           );
           return query(messagesRef, orderBy("createTime", "asc"));
   }
   

更新程式碼以處理 Cloud Firestore 訊息文檔

1. 仍在lib/firebase/firestore.js檔案中，找到handleMessageDoc函數，該函數接收表示單一訊息的 Cloud Firestore 文件。
   此函數需要以對聊天機器人應用程式的 UI 有意義的方式格式化和建構資料。
2. 將整個handleMessageDoc函數替換為下列程式碼：

   function handleMessageDoc(doc) {
           const data = doc.data();
           const item = {
                   prompt: data.prompt,
                   response: data.response,
                   id: doc.id,
                   createTime: formatDate(data.createTime.toDate()),
           };
   
           if (data?.status?.completeTime) {
                   item.completeTime = formatDate(data.status.completeTime.toDate());
           }
   
           return item;
   }
   

3. 儲存文件。

再次運行並查看Chatbot Web 應用程式（現在具有功能）

要運行並查看現在可用的 Web 應用程序，請按照以下步驟操作：

1. 在瀏覽器中，返回帶有Chatbot Web 應用程式的選項卡並重新載入頁面。
2. 點選使用 Google 登入。
3. 如有必要，請選擇您的 Google 帳戶。
4. 登入後，重新載入頁面。
5. 在「輸入您的訊息」文字方塊中，輸入訊息，例如Tell me about space 。
6. 點擊「發送」並等待幾秒鐘，讓Chatbot Web 應用程式做出回應。

具有 PaLM API 擴充功能的聊天機器人的另一個好處是它的對話歷史記錄。

若要查看其與歷史背景對話的能力的範例，請按照下列步驟操作：

1. 在「輸入訊息」文字方塊中，提出一個問題，例如What are five random fruits? 。
2. 在「輸入訊息」文字方塊中，提出與上一個問題相關的後續問題，例如And what about vegetables? 。

聊天機器人網路應用程式以歷史知識回應。儘管您的上一個問題沒有指定五種隨機蔬菜，但具有 PaLM API 擴充功能的聊天機器人可以理解後續問題。

11.為視訊提示應用程式設定「將文字轉換為語音」擴展

安裝將文字轉換為語音擴展

1. 導航至「將文字轉換為語音」擴充。
2. 按一下Firebase 控制台中的「安裝」 。
3. 選擇您的 Firebase 專案。
4. 點擊下一步。
5. 在查看已啟用的 API 和已建立的資源部分中，按一下向您建議的任何服務旁邊的啟用：

6. 按一下下一步，然後選擇向您建議的任何權限旁邊的授予。

7. 點擊下一步。
8. 在集合路徑文字方塊中，輸入bot 。
9. 在儲存路徑文字方塊中輸入tts 。
10. 將所有其他值保留為其預設選項。
11. 點擊安裝擴充功能並等待擴充功能安裝。

嘗試將文字轉換為語音擴展

雖然此 Codelab 的目標是透過 Web 應用程式與將文字轉換為語音擴充功能進行交互，但透過使用 Firebase 控制台觸發擴充功能來了解該擴充功能的工作原理會很有幫助。在bot集合中建立 Cloud Firestore 文件時會觸發該擴充功能。

若要使用 Firebase 控制台檢視該擴充功能的工作原理，請依照下列步驟操作：

1. 在 Firebase 控制台中，導覽至Firestore
2. 點選開始收集。
3. 在集合 ID文字方塊中，輸入bot 。
4. 點擊下一步。

5. 在文件 ID文字方塊中，按一下自動 ID 。
6. 在欄位文字方塊中，輸入text 。
7. 在值文字方塊中，輸入The quick brown fox jumps over the lazy dog 。
8. 按一下「儲存」 。

若要檢視和聆聽您建立的 MP3 文件，請依照下列步驟操作：

1. 在 Firebase 控制台中，導覽至Storage 。
2. 在可以上傳檔案的窗格中，記下gs://值後面的儲存桶名稱。這是該項目的預設儲存桶的名稱。在本 Codelab 的各個任務中，您都需要它。

3. 在 Google Cloud Console 中，導覽至Cloud Storage 。
4. 選擇您的項目。
   如果您在最近的項目清單中沒有看到您的項目，請按一下「選擇項目」以在項目選擇器中找到您的項目。

5. 選擇您的預設儲存桶。
6. 導航到tts/資料夾。
7. 點選 MP3 檔案。
8. 在 MP3 檔案末尾，按一下並注意您的文字已轉換為語音。

12. 為影片提示應用程式設定「使用 Cloud Video AI 標記影片」擴展

使用 Cloud Video AI 擴充功能安裝標籤視頻

1. 導航至使用 Cloud Video AI 擴展標記影片。
2. 按一下Firebase 控制台中的「安裝」 。
3. 選擇您的 Firebase 專案。
4. 按一下“下一步”>“下一步”>“下一步”，直到到達“配置擴充”部分。
5. 從Cloud Functions 位置下拉清單中，選擇支援的位置（您先前為 Firestore 和 Cloud Storage 選擇的位置或距離其最近的位置）。有關支援的位置，請參閱AnnotateVideoRequest中的location_id部分。
6. 從型號下拉清單中，選擇最新。
7. 從固定攝影機下拉清單中，選擇否。
8. 將所有其他值保留為預設值。
9. 點擊安裝擴充功能並等待擴充功能安裝。

嘗試使用 Cloud Video AI 擴充標記視頻

雖然此 Codelab 的目標是透過 Web 應用程式與具有 Cloud Video AI 擴充功能的 Label Videos進行交互，但透過使用 Firebase 控制台觸發擴充功能來了解該擴充功能的工作原理會很有幫助。當影片檔案上傳到您的儲存桶時，該擴充功能就會觸發。

若要使用 Firebase 控制台檢視該擴充功能的工作原理，請依照下列步驟操作：

1. 導航到 Firebase 專案中的儲存> 建立資料夾。
2. 在資料夾名稱文字方塊中，輸入video_annotation_input 。

3. 點選新增資料夾。
4. 在video_annotation_input資料夾中，按一下上傳檔案。
5. 在您先前複製或下載的ai-extensions-codelab/video-hint-start/public/videos資料夾中，選擇第一個影片檔案。
6. 返回瀏覽器，在 Google Cloud Console 中，導覽至Cloud Storage 。
7. 選擇您之前記下的預設儲存桶。
8. 點選video_annotation_output資料夾。
   如果您沒有看到video_annotation_output資料夾，請等待幾秒鐘並刷新頁面，因為 Video Intelligence API 可能仍在處理影片。

9. 請注意，存在一個 JSON 文件，其名稱與您先前上傳的文件類似。
10. 點選下載檔名。
11. 在程式碼編輯器中開啟下載的 JSON 檔案。它包含 Video Intelligence API 的原始輸出，其中包括檢測到的您上傳的影片的標籤。

13. 設定視訊提示應用程式以使用 Firebase

要執行視訊提示應用，您需要設定應用程式的程式碼和 Firebase CLI 以與您的 Firebase 專案互動。

將 Firebase 服務和配置新增到您的應用程式碼中

要使用 Firebase，您應用的程式碼庫需要適用於您要使用的服務的 Firebase SDK，以及告訴這些 SDK 要使用哪個 Firebase 專案的 Firebase 配置。

此 Codelab 的範例應用程式已包含 SDK 所需的所有匯入和初始化程式碼（請參閱video-hint-start/lib/firebase/firebase.js ），因此您無需新增這些程式碼。但是，範例套用只有 Firebase 配置的佔位符值（請參閱video-hint-start/lib/firebase/firebase-config.js ），因此您需要向 Firebase 專案註冊您的應用程式以取得唯一的 Firebase 設定值為您的應用程式。

1. 在 Firebase 控制台的 Firebase 專案中，導覽至專案概述，然後按一下 Web （或如果您已經向專案註冊了應用程序，請按一下「新增應用程式」）。
2. 在「應用程式暱稱」文字方塊中，輸入一個好記的應用程式暱稱，例如My Video Hint app 。
3. 不要選取同時為此應用程式設定 Firebase 託管複選框。您稍後將在 Codelab 中執行這些步驟。
4. 點擊註冊應用程式。
5. 控制台顯示一個程式碼片段，用於使用特定於應用程式的 Firebase 設定物件新增和初始化 Firebase SDK。複製 Firebase 配置物件中的所有屬性。
6. 在程式碼編輯器中，開啟video-hint-start/lib/firebase/firebase-config.js檔案。
7. 將佔位符值替換為您剛剛複製的值。如果您擁有不在影片提示應用程式中使用的 Firebase 服務屬性和值，也沒關係。
8. 儲存文件。
9. 返回 Firebase 控制台，點選繼續控制台。

設定終端以針對您的 Firebase 專案執行 Firebase CLI 命令

1. 在您的終端機中，按Control+C停止伺服器執行先前的 Web 應用程式。
2. 在您的終端機中，導航至video-hint-start Web 應用程式資料夾：

   cd ../video-hint-start
   

3. 使 Firebase CLI 針對特定 Firebase 專案執行指令：

   firebase use YOUR_PROJECT_ID
   

設定應用程式的程式碼庫以使用框架感知的 Firebase 託管

此 Codelab 使用Web 框架以及影片提示Web 應用程式的託管（預覽版）。

1. 在您的終端機中，使用 Firebase Hosting 啟用 Web 框架：

   firebase experiments:enable webframeworks
   

2. 初始化 Firebase 託管：

   firebase init hosting
   

3. 當提示codebase in your current directory, should we use this? Detected an existing Next.js程式碼庫」時，我們應該使用它嗎？ ，按 Y。
4. 當出現提示時In which region would you like to host server-side content, if applicable? ，選擇預設區域或您先前為 Firestore 和 Cloud Storage 選擇的位置，然後按下Enter （或在 macOS 上return ）。
5. 當提示Set up automatic builds and deploys with GitHub? ，按N 。

運行並查看視訊提示Web 應用程式

1. 在終端機中，在video-hint-start和functions資料夾中安裝依賴項，然後執行應用程式：

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   firebase emulators:start --only hosting
   

2. 在瀏覽器中，導覽至本機託管的託管 URL。在大多數情況下，它是http://localhost:5000/或類似的內容。

該頁面應該加載，但您會注意到缺少各種功能。我們將在此 Codelab 的後續步驟中加入這些內容。

排除執行 Web 應用程式的故障

如果您看到類似錯誤訊息Error: The query requires an index. You can create it here: https://console.firebase.google.com在 DevTools 的控制台窗格中，請按照以下步驟操作：

1. 導航到提供的 URL。

2. 點選Save並等待狀態從Building變更為Enabled 。

14. 為影片提示應用程式新增功能

在此 Codelab 的最後一步中，您在本地運行了視訊提示應用，但它沒有太多功能，並且尚未使用已安裝的擴充功能。在 Codelab 的這一步驟中，您將新增此功能並使用 Web 應用程式觸發擴充功能。

部署安全性規則

此 Codelab 的範例應用程式包含 Firestore 和 Cloud Storage for Firebase 的安全規則集。將這些安全規則部署到 Firebase 專案後，可以更好地保護資料庫和儲存桶中的資料免受濫用。

您可以在firestore.rules和storage.rules檔案中查看這些規則。

1. 若要部署這些安全規則，請在終端機中執行下列命令：

   firebase deploy --only firestore:rules,storage
   

2. 如果系統詢問您： "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" ，選擇是。

更新程式碼以合併功能

1. 在程式碼編輯器中，展開functions資料夾。
   該資料夾包含多個函數，它們組合起來形成一個擴展管道。下表列出並描述了每個功能：

   功能	描述
   functions/01-handle-video-upload.js	延伸管道的第一步。它處理用戶上傳的視訊檔案。
   functions/02-handle-video-labels.js	延伸管道的第二步。它處理由storage-label-videos擴展生成的視訊標籤檔案。
   functions/03-handle-audio-file.js	延伸管道的第三步。它處理轉錄的音檔。

   但是，您仍然需要新增一個將這些函數組合在一起的檔案。
2. 在functions/index.js檔案中，加入以下程式碼：

   import { initializeApp } from "firebase-admin/app";
   
   export * from "./01-handle-video-upload.js";
   export * from "./02-handle-video-labels.js";
   export * from "./03-handle-audio-file.js";
   
   initializeApp();
   

此程式碼使用 JavaScript模組從index.js檔案匯入和匯出函數，以便所有函數都有一個集中位置。

更新程式碼以處理影片上傳

1. 在程式碼編輯器中，開啟lib/firebase/storage.js檔。
2. 找到uploadVideo函數。
   此函數接收userId 、 filePath和file參數。此數據足以將檔案上傳到 Cloud Storage。
3. 在uploadVideo函數的主體中，加入以下程式碼：

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

部署您的功能

若要使用 Firebase CLI 部署您的函數，請依照下列步驟操作：

1. 在終端機中，當仍在video-hint-start資料夾中時，按Control+C停止目前進程。
2. 部署您的函數：

   firebase deploy --only functions
   

   如果系統詢問您是否刪除任何先前的 Cloud Functions，請選取No 。
3. 如果您Permission denied while using the Eventarc Service Agent的訊息，請等待幾分鐘，然後重試該指令。
4. 命令完成後，再次在本地運行應用程式：

   firebase emulators:start --only hosting
   

再次運行並查看視訊提示Web 應用程式（現在具有功能）

要運行並查看現在可用的 Web 應用程序，請按照以下步驟操作：

1. 在瀏覽器中，找到導覽至 http://localhost:5000 的標籤。
2. 如有必要，請按一下「使用 Google 登入」並選擇您的 Google 帳戶。
3. 點擊上傳範例影片 #1 ，然後等待幾分鐘即可查看影片摘要的結果。
4. 如果您在上傳影片後沒有看到任何結果，請參閱本 Codelab 附錄中的使用 Cloud Functions 排查錯誤。

15. 結論

恭喜！您在此 Codelab 中取得了很多成就！

安裝並配置 Firebase 擴充

您使用 Firebase 控制台配置和安裝各種AI 擴充功能。使用擴充功能很方便，因為您不需要編寫大量的樣板程式碼來處理 Google Cloud 服務的身份驗證、從 Firestore 讀取和寫入以及與 Google Cloud 服務交互，以及這些任務涉及的各種細微差別。

使用 Firebase 控制台處理擴充功能

您無需直接跳入程式碼，而是根據透過控制台向 Firestore 或 Cloud Storage 提供的輸入，花時間了解 AI 擴充功能的工作原理。如果您需要調試擴展輸出，這種類型的互動尤其有用。

建構了三個使用 Firebase Extensions 的 AI 支援的 Web 應用

回顧一下

在Reviewly Web 應用程式中，您使用PaLM API 擴充功能的語言任務來總結使用者對 T 卹產品留下的長評論。您還請求語言模型提供對您的查詢的 JSON 回應，其中 JSON 提供了星級評定以及對原始長篇評論的摘要評論。

可選練習：T 卹公司對總結的評論感到滿意，但他們要求提供有關缺陷性質的附加總結。您能否調整提示以返回缺陷摘要，然後將該摘要包含在 Web 應用程式的使用者介面中？

聊天機器人

在Chatbot Web 應用程式中，您使用帶有 PaLM API 擴充功能的 Chatbot為使用者提供互動式聊天介面，其中包含對話中的歷史上下文 - 其中每個訊息都儲存在限定於特定使用者的 Firestore 文件中。

可選練習：學生對聊天機器人感到滿意，但工作人員希望進行一些改進。在給出答案後，應該向學生提出發人深省的問題。例如：

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

提示：您可以使用可設定的上下文選項來實現此目的。

影片提示

在視訊提示Web 應用程式中，您使用將文字轉換為語音、 PaLM API 的語言任務以及帶有雲端視訊擴充功能的標籤視訊來形成一個擴展管道，從而產生視訊的文字和音訊描述。

可選練習：政府部門發現原型很有趣，他們現在還希望用戶能夠點擊基於文字的標籤以跳到影片中偵測到標籤的點。

16. 附錄：使用 Cloud Functions 排查錯誤

如果您的網頁應用程式未按預期運行，並且您認為這可能是由於功能原因造成的，請按照此故障排除頁面中的步驟操作。

允許公共未經身份驗證的訪問

如果您在 Chrome DevTools 的控制檯面板中收到任何與權限相關的錯誤，請依照下列步驟操作：

1. 閱讀身份驗證概述 |雲端運行頁面
2. 點擊連結以查看並完成允許公眾未經身份驗證存取該功能所需的任務。

3. 導航回Reviewly應用程式。例如：http://localhost:8080。
4. 點擊添加一些模擬評論並等待幾秒鐘。
   • 如果出現評論：您無需繼續執行這些故障排除步驟，可以直接跳至此 Codelab 中的「設定 Chatbot Web 應用程式」部分。
   • 如果未出現評論：繼續執行此故障排除部分。

處理權限不足錯誤

1. 在 Firebase 控制台中，導覽至Functions 。
2. 將滑鼠懸停在addMockReviews函數上，然後按一下 > 查看日誌。

3. 捲動瀏覽日誌，直到找到類似下列內容之一的錯誤：

   Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
   

   0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
   

4. 在 Google Cloud Console 中，導覽至IAM 權限頁面，然後選擇您的專案。
5. 在表中，找到「名稱」列。
   在IAM 和管理頁面中，有一個使用者和角色表。表中的名稱列描述了使用者或主體的用途。您可能有一個名為預設計算服務帳戶 的主體。

如果您看到預設計算服務帳戶，請依照下列步驟操作：

1. 點選編輯校長.

2. 繼續此 Codelab 中的將角色新增至預設計算服務帳戶部分。

如果您沒有看到預設計算服務帳戶，請依照下列步驟操作：

1. 點選授予存取權限。
2. 在新主體文字方塊中，輸入compute 。
3. 在出現的自動建議選單中，選擇預設計算服務帳戶。

將角色新增至預設計算服務帳戶

在預設計算服務帳戶的分配角色部分：

1. 展開選擇角色選單。
2. 在篩選器文字方塊中，輸入Cloud Datastore User 。
3. 在顯示的自動建議選單中，選擇Cloud Datastore user 。
4. 點選新增另一個角色。
   1. 展開選擇角色選單。
   2. 在「過濾器」文字方塊中，輸入Cloud Storage for Firebase Admin 。
   3. 在出現的自動建議選單中，選擇Cloud Storage for Firebase Admin 。
5. 點選新增另一個角色。
   1. 展開選擇角色選單。
   2. 在「過濾器」文字方塊中，輸入Cloud Storage for Firebase Service Agent 。
   3. 在顯示的自動建議選單中，選擇Cloud Storage for Firebase Service Agent 。
6. 按一下「儲存」 。