透過 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 帳戶

注意：本程式碼研究室使用需要 Cloud Billing 帳戶的 Firebase 和 Google 服務。如果您剛開始使用 Firebase 和 Google Cloud，請確認是否符合 $300 美元抵免額和免費試用 Cloud Billing 帳戶的資格，以便試用我們的服務。否則，您必須提供付款方式 (例如信用卡) 才能設定 Cloud Billing 帳戶 (如要進一步瞭解付款方式，請參閱 Cloud Billing 說明文件)。

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

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

網頁應用程式

在本程式碼研究室中，您將使用名為 Compass 的度假規劃應用程式程式碼庫，讓使用者選擇目的地、查看目的地的活動，並建立行程。

在本程式碼研究室中，您將實作兩項新功能，旨在提升使用者對應用程式首頁的參與度。這兩項功能皆採用生成式 AI 技術：

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

注意：這是一個包含許多步驟的大型程式碼研究室。如要充分運用本程式碼研究室：

• 適時休息，調整自己的節奏。
• 使用程式碼時，請花時間瞭解程式碼的內容和運作方式，不要隨意複製和貼上程式碼。
• 如果卡住了，請回到上次運作正常的狀態，並確認您已正確完成每個步驟。
• 如果您發現程式碼研究室或其程式碼有錯誤，請在 GitHub 上提出問題。

使用的服務

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

Service	使用原因
Firebase Genkit	您可以使用 Genkit 將生成式 AI 導入 Node.js / Next.js 應用程式。
Cloud Firestore	您將資料儲存在 Cloud Firestore 中，然後用於向量相似度搜尋。
Google Cloud 的 Vertex AI	您可以使用 Vertex AI 的基礎模型 (例如 Gemini) 為 AI 功能提供動力。
Firebase App Hosting	您可以選擇使用全新的 Firebase App Hosting 服務，為動態 Next.js 網頁應用程式 (已連結至 GitHub 存放區) 提供服務。

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 檔案。

查看資料夾結構

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

資料夾	說明
load-firestore-data	輔助指令列工具，可快速預先填入 Firestore 集合
*everything else	Next.js 網頁應用程式程式碼

根資料夾包含 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 控制台的升級流程，才能完成升級。

注意：完成這個程式碼研究室後，您可以將專案降級至免付費 (Spark) 定價方案。

設定 Cloud Firestore

1. 在 Firebase 主控台的左側面板中展開「Build」，然後選取「Firestore database」。
2. 按一下 [Create database] (建立資料庫)。
3. 將「資料庫 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. 在左側面板中，按一下「Project Overview」旁的齒輪圖示，然後選取「Project settings」。
   3. 在「您的應用程式」資訊卡中，選取網頁應用程式。
   4. 在「SDK 設定和設定」部分下方，選取「Config」選項。
   5. 複製程式碼片段。開頭為 const firebaseConfig ...。
2. 將 Firebase 設定新增至網頁應用程式的程式碼集：
   1. 在程式碼編輯器中開啟 src/lib/genkit/genkit.config.ts 檔案。
   2. 將相關部分替換為您複製的程式碼。
   3. 儲存檔案。

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

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

   npm install
   npm run dev:next
   

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 專案

我們已在前一個步驟中編輯 src/lib/genkit/genkit.config.ts，將 Genkit 連結至您的專案。

啟動 Genkit 開發人員 UI

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

在終端機中執行以下指令：

npm run dev:genkit

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

與 Gemini 互動

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

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

管理提示

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

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

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

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

除了生成純文字之外，Genkit 還可讓您設定輸出內容的結構，以便在應用程式 UI 中呈現及整合內容。定義架構後，您就能指示 LLM 產生符合所需格式的結構化資料。

探索輸出結構定義

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

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

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

   3. 按一下「執行」。

瞭解結構定義驅動的輸出內容

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

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

輸出結構定義的主要優點

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

善用輸出結構定義可提升 Genkit 體驗，讓您建立量身打造的結構化資料，提供更豐富、更具動態性的使用者體驗。

使用多模態輸入

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

1. 在程式碼編輯器中檢查提示檔案：
   1. 開啟 prompts/imgDescription.prompt 檔案。
   2. 請注意 {{media url=this}} 的加入，這是 Handlebars 語法元素，可協助將圖片納入提示中。
2. 與 UI 互動：
   1. 在 Genkit 開發人員 UI 中，開啟 prompts/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 firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config field-path=embedding,vector-config='{"dimension":"768","flat": "{}"}'
   

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

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

測試擷取器

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

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

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

   {
       "limit": 4
   }
   

4. 按一下「執行」。

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

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

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

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

1. 在程式碼編輯器中檢查行程提示：
   1. 開啟 prompts/itineraryGen.prompt 檔案。
   2. 請注意，提示已擴充，可接受額外輸入內容，特別是來自擷取器的「活動」資料。
2. 在 Genkit 開發人員 UI 中，查看 src/lib/genkit/itineraryFlow.ts 檔案中的 Genkit 流程。
   提示：為簡化偵錯作業，建議將冗長的流程拆解為較短、可控的步驟。
3. 整合「圖片說明」步驟，提升流程效能：
   1. 找出 TODO: 2 註解 (大約在第 81 行)。這會標示流程強化的位置。
   2. 將空白的 imgDescription 預留位置替換為 imgDescription 提示呼叫產生的輸出內容。
4. 測試流程：
   1. 前往 flows/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. 查看 Next.js 整合範例的原始碼 (src/app/gemini/page.tsx)。

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. 按一下「完成並部署」。

監控部署狀態

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

將權限授予服務帳戶

為了讓 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 流程。