透過 Firebase Genkit 以資料為基礎建構生成式 AI 功能

1. 事前準備

在這個程式碼研究室中，您將瞭解如何使用 Firebase Genkit 將生成式 AI 整合至應用程式。Firebase Genkit 是一種開放原始碼架構，可協助您建構、部署及監控可用於正式環境的 AI 技術輔助應用程式。

Genkit 專為應用程式開發人員設計，可協助你以熟悉的模式和模式，輕鬆將強大的 AI 功能整合至應用程式。此應用程式是由 Firebase 團隊打造，運用豐富的經驗，為全球數百萬名開發人員打造好用的工具。

事前準備

• 熟悉 Firestore、Node.js 和 TypeScript。

課程內容

• 如何運用 Firestore 的進階向量相似度搜尋功能，打造更聰明的應用程式。
• 如何使用 Firebase Genkit 在應用程式中實際導入生成式 AI。
• 準備好要部署及整合的解決方案。

事前準備

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

2. 查看所使用的網路應用程式和雲端服務

在本節中，您將複習本程式碼研究室將建構的網頁應用程式，並瞭解要使用的雲端服務。

網頁應用程式

在本程式碼研究室中，您將使用名為 Compass 的應用程式的程式碼集，也就是度假規劃應用程式。使用者可以挑選目的地、查看目的地的活動，並為行程建立行程。

在本程式碼研究室中，您將實作兩項新功能，改善使用者與應用程式首頁的互動。這兩項功能皆採用生成式 AI 技術：

• 應用程式目前會顯示目的地靜態清單。您將會將其變更為動態！
• 您會導入自動填入的行程，希望能提高使用者黏著度。

使用的服務

在這個程式碼研究室中，您將使用許多 Firebase 和 Cloud 服務和功能，我們會提供大部分的範例程式碼。下表列出您將使用的服務，以及使用這些服務的原因。

3. 設定開發環境

驗證 Node.js 版本

1. 在終端機中，確認您已安裝 Node.js 20.0.0 以上版本：

   node -v
   

2. 如果您沒有 Node.js 20.0.0 以上版本，請下載並安裝最新的 LTS 版本。

取得程式碼研究室的原始碼

如果您有 GitHub 帳戶：

1. 使用 github.com/FirebaseExtended/codelab-ai-genkit-rag 範本建立新的存放區
2. 為您剛建立的程式碼教室 GitHub 存放區建立本機複本：

   git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
   

如果您尚未安裝 Git，或不想建立新的存放區：

將 GitHub 存放區下載為 ZIP 檔案。

查看資料夾結構

在本機電腦上找出複製的存放區，並查看資料夾結構：

根資料夾包含 README.md 檔案，可透過簡化指示快速開始執行網頁應用程式。不過，如果您是初學者，請完成本程式碼研究室 (而非快速入門)，因為本程式碼研究室包含最完整的操作說明。

如果您不確定是否已按照本程式碼研究室中的操作說明正確套用程式碼，可以在 end Git 分支版本中找到解決方案程式碼。

安裝 Firebase CLI

1. 確認您已安裝 Firebase CLI，且版本為 13.6 以上：

   firebase --version
   

2. 如果您已安裝 Firebase CLI，但尚未安裝 13.6 以上版本，請進行更新：

   npm update -g firebase-tools
   

3. 如果您尚未安裝 Firebase CLI，請按照下列步驟操作：

   npm install -g firebase-tools
   

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

登入 Firebase

1. 在終端機中登入 Firebase：

   firebase login
   

   如果終端機顯示您已登入 Firebase，可以跳至本程式碼研究室的「設定 Firebase 專案」部分。
2. 視您是否要讓 Firebase 收集資料而定，在終端機中輸入 Y 或 N。(任一選項都適用於本程式碼研究室)
3. 在瀏覽器中選取 Google 帳戶，然後按一下「允許」。

安裝 Google Cloud 的 gcloud CLI

1. 安裝 gcloud CLI。
2. 在終端機中登入 Google Cloud：

   gcloud auth login
   

4. 設定 Firebase 專案

在本節中，您將設定 Firebase 專案，並在其中註冊 Firebase 網頁應用程式。本程式碼研究室稍後也會啟用範例網頁應用程式使用的部分服務。

本節所有步驟都會在 Firebase 控制台中執行。

建立 Firebase 專案

1. 使用上一個步驟中使用的 Google 帳戶登入 Firebase 控制台。
2. 按一下「建立專案」，然後輸入專案名稱 (例如 Compass Codelab)。
   記下系統自動為 Firebase 專案指派的專案 ID (或按一下「編輯」圖示設定偏好的專案 ID)。稍後會用到這組 ID，以便在 Firebase CLI 中識別您的 Firebase 專案。如果您忘記 ID，日後隨時可以前往專案設定頁面查看。
3. 按一下「繼續」。
4. 如果出現提示訊息，請詳閱並接受 Firebase 條款，然後按一下「繼續」。
5. 在本程式碼研究室中，您並「不需要」使用 Google Analytics，因此請停用 Google Analytics 選項。
6. 按一下「建立專案」，等待專案佈建完成，然後點選「繼續」。

在 Firebase 專案中新增網頁應用程式

1. 前往 Firebase 專案中的「專案總覽」畫面，然後按一下 「網頁」。
2. 在「App nickname」文字方塊中輸入容易記住的應用程式暱稱，例如 My Compass Codelab App。您可以保留設定 Firebase 代管的核取方塊，因為您可以在本程式碼研究室的最後一個步驟中選擇設定代管服務。
   
3. 依序點選「註冊應用程式」>「繼續前往主控台」。

太好了！現在，您已在新的 Firebase 專案中註冊網頁應用程式。

升級 Firebase 定價方案

如要使用 Firebase Genkit 和 Vertex AI (以及其底層雲端服務)，您的 Firebase 專案必須採用即付即用 (Blaze) 定價方案，也就是說必須連結至 Cloud Billing 帳戶。

• Cloud Billing 帳戶需要付款方式，例如信用卡。
• 如果您是 Firebase 和 Google Cloud 的新手，請確認您是否符合 $300 美元的抵免額和免費試用 Cloud Billing 帳戶的資格。
• 如果您在活動中納入本程式碼研究室，請詢問發起人是否有任何可用的 Cloud 抵免額。

進一步瞭解 Vertex AI 的定價。

如要將專案升級至 Blaze 方案，請按照下列步驟操作：

1. 在 Firebase 控制台中，選取升級方案。
2. 選取 Blaze 方案。請按照畫面上的指示將 Cloud Billing 帳戶連結至專案。
   如果您需要在此次升級中建立 Cloud Billing 帳戶，可能需要返回 Firebase 控制台的升級流程，才能完成升級。

設定 Cloud Firestore

1. 在 Firebase 控制台的左側面板中，展開「Build」，然後選取 「Firestore database」。
2. 按一下 [Create database] (建立資料庫)。
3. 保留「Database ID」為 (default)。
4. 選取資料庫的位置，然後按一下「Next」。
   如果是實際應用程式，請選擇距離使用者較近的位置。
5. 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
   請勿在未新增資料庫安全性規則的情況下，公開發行或發布應用程式。
6. 按一下「建立」。

啟用 Vertex AI

使用 gcloud CLI 設定 Vertex AI。對於本頁中的所有指令，請務必將 YOUR_PROJECT_ID 替換為您的 Firebase 專案 ID。

1. 在終端機中，為 Google Cloud SDK 設定預設專案：

   gcloud config set project YOUR_PROJECT_ID
   

2. 如果系統顯示「警告：您的現行專案與本機應用程式預設憑證檔案中的配額專案不符」訊息，這可能會導致未預期的配額問題。」，然後執行下列指令來設定配額專案：

   gcloud auth application-default set-quota-project YOUR_PROJECT_ID
   

3. 在專案中啟用 Vertex AI 服務：

   gcloud services enable aiplatform.googleapis.com
   

5. 設定網頁應用程式

如要執行網頁應用程式，您必須在終端機中執行指令，並在程式碼編輯器中加入程式碼。對於本頁中的所有指令，請務必將 YOUR_PROJECT_ID 替換為您的 Firebase 專案 ID。

設定 Firebase CLI 以指定專案

1. 在終端機中，前往程式碼研究室專案的根目錄。
2. 如要讓 Firebase CLI 對 Firebase 專案執行所有指令，請執行下列指令：

   firebase use YOUR_PROJECT_ID
   

將範例資料匯入 Firestore

為了讓您快速上手，本程式碼研究室會提供預先產生的 Firestore 範例資料。

1. 如要讓本機程式碼集執行通常會使用服務帳戶的程式碼，請在終端機中執行下列指令：

   gcloud auth application-default login
   

   系統會在瀏覽器中開啟新分頁。使用先前步驟中使用的 Google 帳戶登入。
2. 如要匯入範例 Firestore 資料，請執行下列指令：

   cd load-firestore-data
   npm ci
   node index.js YOUR_PROJECT_ID
   cd ..
   

3. 前往 Firebase 控制台中，前往 Firebase 專案的「Firestore」部分，確認資料是否已成功新增至資料庫。你應該會看到匯入的資料結構定義及其內容。

將網頁應用程式連結至 Firebase 專案

網頁應用程式的程式碼集必須與正確的 Firebase 專案建立關聯，才能使用資料庫等服務。為此，您必須將 Firebase 設定加進應用程式的程式碼集。這項設定包含必要值，例如專案 ID、應用程式 API 金鑰和應用程式 ID，以及可讓應用程式與 Firebase 互動的其他值。

1. 取得應用程式的 Firebase 設定：
   1. 在 Firebase 主控台中，前往您的 Firebase 專案。
   2. 在左側面板中，按一下「專案總覽」旁邊的齒輪圖示，然後選取「專案設定」。
   3. 在「您的應用程式」資訊卡中，選取網頁應用程式。
   4. 在「SDK 設定和設定」部分下方，選取「設定」選項。
   5. 複製程式碼片段。開頭為 const firebaseConfig ...。
2. 將 Firebase 設定新增至網頁應用程式的程式碼集：
   1. 在程式碼編輯器中開啟 src/lib/genkit/genkit.config.ts 檔案。
   2. 將相關部分替換為您複製的程式碼。
   3. 儲存檔案。

在瀏覽器中預覽網頁應用程式

1. 在終端機中安裝依附元件，然後執行網頁應用程式：

   npm install
   npm run dev
   

2. 在瀏覽器中，前往本機代管的代管網址，查看網頁應用程式。例如在大多數情況下，網址為 http://localhost:3000/ 或類似的網址。

Compass 是使用 React 伺服器元件的 Next.js 應用程式，以下是首頁。

按一下「尋找夢幻旅遊行程」。您會發現該介面目前針對某些固定目的地顯示一些硬式編碼資料：

歡迎探索。準備好繼續時，請按一下右上角的 主畫面按鈕。

6. 使用 Genkit 深入瞭解生成式 AI

您現在已可在應用程式中運用生成式 AI 的強大功能！本程式碼研究室的這一節將引導您實作功能，根據使用者提供的靈感建議目的地。您將使用 Firebase Genkit 和 Google Cloud Vertex AI 做為生成式模型 (使用 Gemini)。

Genkit 可儲存追蹤和流程狀態 (可讓您檢查執行 Genkit 流程的結果)。在本程式碼研究室中，您將使用 Firestore 儲存這些追蹤記錄。

這個程式碼研究室的最後一個步驟是將 Genkit 應用程式部署至 Firebase App Hosting。

將 Genkit 應用程式連結至 Firebase 專案

程式碼集必須先連結正確的 Firebase 專案，才能使用 Genkit，例如資料庫。如要完成這項操作，您必須將 Firebase 設定新增至 Genkit 應用程式的程式碼集。這項設定包含專案 ID、應用程式 API 金鑰和應用程式 ID 等必要值，以及可讓應用程式與 Firebase 互動的其他值。

1. 取得應用程式的 Firebase 設定：
   1. 在 Firebase 主控台中，前往您的 Firebase 專案。
   2. 在左側面板中，按一下「專案總覽」旁邊的齒輪圖示，然後選取「專案設定」。
   3. 在「您的應用程式」資訊卡中，選取網頁應用程式。
   4. 在「SDK 設定和設定」部分下方，選取「設定」選項。
   5. 複製程式碼片段。開頭為 const firebaseConfig ...。
2. 將應用程式的 Firebase 設定新增至 Genkit 應用程式的程式碼集：
   1. 在程式碼編輯器中開啟 genkit-functions/src/lib/genkit.config.ts 檔案。
   2. 將相關部分換成您複製的程式碼。
   3. 儲存檔案。

啟動 Genkit 開發人員 UI

Genkit 提供網路 UI，可讓您與大型語言模型、Genkit 流程、擷取器和其他 AI 元件互動。

1. 啟動 Genkit 開發人員 UI：
   1. 開啟新的終端機視窗。
   2. 前往 genkit-functions 目錄的根目錄。
   3. 執行下列指令，啟動 Genkit 開發人員 UI：

      cd genkit-functions
      npx genkit start
      

2. 透過瀏覽器前往本機代管的 Genkit 網址。在大多數情況下，這個值為 http://localhost:4000/。

與 Gemini 互動

您現在可以使用 Genkit 的開發人員 UI，與系統支援的模型或其他任何 AI 元件互動，例如提示、擷取器和 Genkit 流程。

舉例來說，你可以請 Gemini 推薦假期度假勝地。注意如何根據系統指示，根據特定需求引導模型的行為。這項功能也適用於不支援系統指令的原生模型。

管理提示

Firebase Genkit 推出 Dotprompt，這是一種外掛程式和文字格式，可簡化生成式 AI 提示的建立和管理作業。Dotprompt 的核心概念是將提示視為程式碼，讓您可以與應用程式程式碼一併編寫、維護及進行版本控制。

如要使用 Dotprompt，請先從「hello-world」開始：

1. 在程式碼編輯器中開啟 genkit-functions/prompts/1-hello-world.prompt 檔案。
2. 在 Genkit 開發人員 UI 中，開啟 dotprompt/1-hello-world。
3. 使用您熟悉的任何語言名稱或代碼，或將其留空。
4. 按一下「執行」。
5. 試試幾種不同的值。大型語言模型擅長解讀簡短查詢中縮寫、拼錯或不完整的提示，例如這類查詢。

使用結構化資料豐富輸出內容

除了產生純文字外，Genkit 還能幫忙建構輸出內容，提升應用程式使用者介面的呈現效果和整合度。定義結構定義之後，您就能指示 LLM 產生符合所需格式的結構化資料。

探索輸出結構定義

您也可以指定 LLM 呼叫的輸出結構定義。

1. 在程式碼編輯器中檢查提示檔案：
   1. 開啟 dotprompt/2-simple-itinerary 檔案。
   2. 檢查已定義的輸入和輸出結構定義。
2. 與 UI 互動：
   1. 在 Genkit 開發人員 UI 中，前往 dotprompt/2-simple-itinerary 部分。
   2. 將範例資料填入 place 和 interests 欄位，提供輸入內容：

      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
      

   3. 按一下「執行」。

瞭解結構定義導向的輸出內容

請注意產生的輸出內容如何符合定義的結構定義。指定所需結構後，LLM 會產生要輕鬆剖析及整合至應用程式的資料。Genkit 會根據結構定義自動驗證輸出內容，確保資料完整性。

此外，如果輸出內容不符合結構定義，您可以設定 Genkit 重試或嘗試修復輸出內容。

輸出結構定義的主要優點

• 簡化整合程序：輕鬆將結構化資料納入應用程式的 UI 元素。
• 資料驗證：確保生成內容的準確性和一致性。
• 錯誤處理：實作機制以解決結構定義不相符的問題。

運用輸出結構定義可改善 Genkit 體驗，以便你建立量身訂製的結構化資料，打造更豐富多元的動態使用者體驗。

使用多模態輸入

假設您的應用程式會根據使用者覺得有趣的圖片，建議個人化的度假地點。Genkit 結合多模態的生成式模型，能實現這個願景。

1. 在程式碼編輯器中檢查提示檔案：
   1. 開啟 genkit-functions/prompts/imgDescription.prompt 檔案。
   2. 請注意 {{media url=this}} 的加入，這是 Handlebars 語法元素，可協助將圖片納入提示中。
2. 與 UI 互動：
   1. 在 Genkit 開發人員 UI 中，開啟 dotprompt/imgDescription 提示。
   2. 在 imageUrls 欄位中輸入圖片網址，舉例來說，你可以使用維基百科的縮圖來展示艾菲爾鐵塔：

      {
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      

   3. 按一下「執行」。

7. 使用向量相似度搜尋功能實作擷取

雖然使用 AI 模型生成創意內容是很令人讚嘆的，但在實際應用時，通常需要根據特定情境將輸出內容做為基礎。

在本程式碼研究室中，您有一個目的地資料庫 (地點和活動)，目的是確保 Gemini 模型產生的建議僅參照這個資料庫中的項目。

為了彌補非結構化查詢與相關內容之間的差距，您將利用向量相似度搜尋功能，充分發揮產生的嵌入項目效能。

瞭解嵌入和向量相似度

• 向量：向量是資料點的數值表示法，通常用於模擬文字或圖片等複雜資訊。向量中的每個維度都對應至資料的特定特徵。
• 嵌入模型：這些專門的 AI 模型會將文字等輸入資料轉換為高維度向量。最引人入勝的是，相似的輸入內容會對應至這個高維度空間中彼此接近的向量。
• 向量相似度搜尋：這項技巧會運用嵌入向量的鄰近程度，識別相關的資料點。在輸入查詢後，系統會在資料庫中尋找具有相似嵌入向量的項目，以表示語意相關性。

瞭解擷取程序的運作方式

1. 嵌入查詢：使用者的輸入內容 (例如「巴黎的浪漫晚餐」) 會透過嵌入模型傳遞，進而產生查詢向量。
2. 資料庫嵌入：理想情況下，您已預先處理目的地資料庫，為每個項目建立嵌入向量。
3. 計算相似度：使用相似度指標 (例如餘弦相似度) 將查詢向量與資料庫中的每個嵌入向量進行比較。
4. 擷取：系統會根據資料庫與查詢向量的距離，擷取資料庫中最相似的項目做為相關建議。

將這項擷取機制整合至應用程式後，您就能利用 Gemini 模型產生建議，不僅創意十足，也能確實反映您的特定資料集。這種做法可確保產生的輸出內容與內容相關，並與資料庫中的資訊一致。

在 Firestore 中啟用向量相似度搜尋功能

在本程式碼研究室的先前步驟中，您已在 Firestore 資料庫中填入範例地點和活動。每個地點項目都包含一個 knownFor 文字欄位，用於說明其重要屬性，以及對應的 embedding 欄位，用於說明這個說明的向量表示法。

如要運用強大的向量相似度搜尋功能處理這些嵌入，您必須建立 Firestore 索引。這個索引可根據其嵌入向量與特定查詢的相似度，有效擷取地點。

1. 在終端機中執行下列指令，安裝最新的 alpha 元件。您需要使用 2024.05.03 以上版本：

   gcloud components install alpha
   

2. 建立索引，並確保將 YOUR_PROJECT_ID 替換為您的專案 ID。

   gcloud alpha firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding
   

3. 在 Genkit 開發人員 UI 中開啟 placesRetriever。
4. 按一下「執行」。觀察帶有預留位置文字的結構化物件，指出您要實作擷取器邏輯的位置。
5. 在程式碼編輯器中開啟 genkit-functions/src/lib/placesRetriever.ts 檔案。
6. 捲動到最下方，然後將預留位置 placesRetriever 替換為以下內容：

   export const placesRetriever = defineFirestoreRetriever({
     name: 'placesRetriever',
     firestore,
     collection: 'places',
     contentField: 'knownFor',
     vectorField: 'embedding',
     embedder: textEmbeddingGecko,
     distanceMeasure: 'COSINE',
   });
   

測試擷取器

1. 在 Genkit 開發人員 UI 中開啟 placesRetriever 擷取器。
2. 提供下列 查詢：

   {
       "content": [
           {
               "text": "UNESCO"
           }
       ]
   }
   

3. 您也可以提供選項。舉例來說，以下是如何指定擷取器應傳回的文件數量：

   {
       "limit": 4
   }
   

4. 按一下「執行」。

您可以為選項新增 where 子句，針對相似度以外的資料進行額外篩選。

8. 使用 Genkit 檢索增強生成 (RAG)

在前幾節中，您已建立可處理文字、JSON 和圖片的個別提示，為使用者產生度假景點和其他引人入勝的內容。您也實作了提示，從 Firestore 資料庫擷取相關目的地。現在，您可以開始將這些元件配置成一個連貫的檢索增強生成 (RAG) 流程。

本節介紹名為「流程」的重要 Genkit 概念。流是強型別的流式函式，可在本機和遠端呼叫，並提供完整的可觀察性。您可以透過 Genkit 的 CLI 和 Genkit 開發人員 UI 管理及叫用流程。

1. 在程式碼編輯器中查看行程提示：
   1. 開啟 genkit-functions/prompts/itineraryGen.prompt 檔案。
   2. 請注意，提示已擴充，可接受額外輸入內容，特別是來自擷取器的 活動資料。
2. 在 Genkit 開發人員 UI 中，查看 genkit-functions/src/lib/itineraryFlow.ts 檔案中的 Genkit 流程。
   提示：為簡化偵錯作業，建議您將冗長的流程拆分為較小、可控的步驟。
3. 整合「圖片說明」步驟，提升流程效能：
   1. 找出 TODO: 2 註解 (位於第 70 行左右)。這可以標示出您要改善流量的情況。
   2. 將空白的 imgDescription 預留位置替換為 imgDescription 提示呼叫產生的輸出內容。
4. 測試流程：
   1. 前往 itineraryFlow。
   2. 請使用下列輸入內容，透過新加入的步驟測試是否能成功執行 itineraryFlow：

      {
          "request": "Sightseeing in Paris",
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      

   3. 按一下「執行」。
   4. 查看生成的輸出內容，其中應將圖片說明納入行程建議中。
5. 如果遇到任何錯誤或非預期行為，請查看「檢查」分頁，瞭解詳細資訊。您也可以在這個分頁中查看「Trace Store」執行的執行記錄。

網頁應用程式的 RAG

1. 請透過瀏覽器前往 http://localhost:3000/，確認網路應用程式仍在執行。
2. 如果網頁應用程式不再執行，請在終端機中執行下列指令：

   npm install
   npm run dev
   

3. 查看 Dream Your Vacation 網路應用程式頁面 (http://localhost:3000/gemini)。
4. 查看原始碼 (src/app/gemini/page.tsx)，以取得 Next.js 整合範例。

9. 使用 Firebase App Hosting 部署應用程式

此歷程的最後一個步驟是部署您的網頁應用程式。您將運用 Firebase App Hosting，這是一個具備架構感知的託管解決方案，可簡化將 Next.js 和 Angular 應用程式部署至無伺服器後端的過程。

1. 在本機 Git 存放區中修訂變更，然後推送至 GitHub。
2. 在 Firebase 主控台中，前往 Firebase 專案中的「應用程式代管」頁面。
3. 依序按一下「立即開始」>「連結至 GitHub」。
4. 選取「GitHub 帳戶」和「存放區」。按一下 [Next] (下一步)。
5. 在「部署設定」>「根目錄」中，保留預設值。
6. 如要設定「Live 分支版本」，請選取 GitHub 存放區的「main」分支版本。按一下 [Next] (下一步)。
7. 為後端輸入 ID (例如 compass)。
8. 當系統詢問是否要建立或連結 Firebase 網頁應用程式時，請選擇「選取現有的 Firebase 網頁應用程式」，然後選擇在本程式碼研究室中先前步驟建立的應用程式。
9. 按一下「Finish and Deploy」。

監控部署作業狀態

部署程序需要幾分鐘的時間才能完成。您可以在 Firebase 控制台的「App Hosting」專區追蹤進度。

將權限授予服務帳戶

如要讓 Node.js 後端存取 Vertex AI 資源，您必須將 aiplatform.user 角色指派給應用程式的服務帳戶：

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"

完成後，使用者就能存取您的網頁應用程式。

自動重新部署

Firebase App Hosting 可簡化日後的更新作業。只要您將變更內容推送至 GitHub 存放區的主分支，Firebase App Hosting 就會自動重新建構及重新部署應用程式，確保使用者能隨時體驗最新版本。

10. 結語

恭喜您完成這個完整的程式碼研究室！

您成功運用 Firebase Genkit、Firestore 和 Vertex AI 建立精細的「流程」，可根據使用者的偏好和靈感產生個人化的度假建議，同時依據應用程式資料提供建議。

在這趟旅程中，您已獲得實際軟體工程模式的實作經驗，瞭解如何建構強大的生成式 AI 應用程式。這些模式包括：

• 提示管理：將提示整理並以程式碼形式維護，以利協作和版本控管。
• 多模態內容：整合圖片和文字等多種資料類型，提升 AI 互動效果。
• 輸入/輸出結構定義：建立資料結構，在應用程式中無縫整合及進行驗證。
• 向量儲存庫：運用向量嵌入項目有效進行相似度搜尋並擷取相關資訊。
• 資料擷取：實作機制，擷取資料庫中的資料並納入 AI 產生的內容。
• 檢索增強生成 (RAG)：結合擷取技術與生成式 AI，取得符合情境且準確的輸出內容。
• 流程檢測：建構及自動化調度管理複雜的 AI 工作流程，以流暢且可觀測的執行作業。

只要掌握這些概念並在 Firebase 生態系統中加以應用，您就能輕鬆展開自己的 genAI 冒險之旅。發掘各種可能性、打造創新應用程式，並持續突破生成式 AI 的優勢。

瞭解其他部署選項

Genkit 提供多種部署選項，能滿足貴機構的特定需求，包括：

• Cloud Functions for Firebase
• Cloud Run
• Next.js
• 任何 Node.js 環境
• Genkit 也支援 Go

只要在 (package.json) 節點資料夾中執行下列指令，即可選擇最適合的部署方式：

npx genkit init

後續步驟

• 在 Google AI Studio 或 Vertex AI Studio 中測試提示，並充分運用大型背景脈絡視窗。
• 進一步瞭解 AI 檢索增強生成 (RAG) 搜尋。
• 請參閱 Firebase Genkit 的官方說明文件。
• 進一步瞭解 Firestore 的相似度搜尋功能和 PostgreSQL 適用的 Cloud SQL。
• 透過函式呼叫深入瞭解 genAI 流程。