本頁面由 Cloud Translation API 翻譯而成。

使用 Genkit 建構以資料為基礎的生成式 AI 功能

1. 事前準備

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

Genkit 專為應用程式開發人員設計，可協助您運用熟悉的模式和範例，輕鬆將強大的 AI 功能整合至應用程式。這項服務由 Firebase 團隊打造，運用了我們為全球數百萬名開發人員建構工具的經驗。

事前準備

熟悉 Firestore、Node.js 和 TypeScript。

課程內容

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

事前準備

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

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

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

網頁應用程式

在本程式碼研究室中，您將使用名為「Compass」的應用程式程式碼集，這是一個度假規劃應用程式。使用者可以選擇目的地、瀏覽目的地活動，以及建立行程。

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

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

使用的服務

在本程式碼研究室中，您會使用許多 Firebase 和 Cloud 服務與功能，而且大部分的範例程式碼都已提供。下表列出您會使用的服務，以及使用原因。

服務	使用原因
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 版本

在終端機中，確認您已安裝 Node.js 20.0.0 以上版本：
```
node -v
```
如果沒有 20.0.0 以上版本的 Node.js，請下載並安裝最新 LTS 版本。

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

如果您有 GitHub 帳戶：

使用 github.com/FirebaseExtended/codelab-ai-genkit-rag 的範本建立新的存放區。

建立您剛建立的程式碼研究室 GitHub 存放區本機複本：

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

如果沒有安裝 Git，或不想建立新的存放區：

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

查看資料夾結構

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

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

根資料夾包含 README.md 檔案，提供簡化指令，讓您快速啟動網頁應用程式。不過，如果您是初學者，建議完成本程式碼研究室 (而非快速入門)，因為程式碼研究室包含最詳盡的操作說明。

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

安裝 Firebase CLI

確認您已安裝 Firebase CLI，且版本為 13.6 以上：
```
firebase --version
```
如果已安裝 Firebase CLI，但版本不是 13.6 以上，請更新：
```
npm update -g firebase-tools
```
如果尚未安裝 Firebase CLI，請安裝：
```
npm install -g firebase-tools
```

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

登入 Firebase

在終端機中登入 Firebase：
```
firebase login
```
如果終端機顯示您已登入 Firebase，請跳至本程式碼研究室的「設定 Firebase 專案」一節。
在終端機中，視您是否要讓 Firebase 收集資料，輸入 Y 或 N。(這兩個選項都適用於本程式碼研究室)
在瀏覽器中選取 Google 帳戶，然後按一下「允許」。

安裝 Google Cloud 的 gcloud CLI

安裝 gcloud CLI。
在終端機中登入 Google Cloud：
```
gcloud auth login
```

4. 設定 Firebase 專案

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

本節的所有步驟都是在 Firebase 主控台中完成。

建立 Firebase 專案

使用上一個步驟中使用的 Google 帳戶登入 Firebase 控制台。
按一下按鈕建立新專案，然後輸入專案名稱 (例如 Compass Codelab)。
這個專案名稱會做為 Firebase 介面中的顯示名稱，而 Firebase 會根據這個專案名稱自動建立專屬的專案 ID。請注意，您現在可以選擇按一下「編輯」圖示，設定偏好的專案 ID，但專案建立後就無法變更這個 ID。

記住專案 ID，後續步驟將會用到，以便在 Firebase CLI 中識別 Firebase 專案。如果忘記 ID，之後隨時可以在「專案設定」中找到。
按一下「繼續」。
如果系統提示，請詳閱並接受 Firebase 條款，然後按一下「繼續」。
(選用) 在 Firebase 控制台中啟用 AI 輔助功能 (稱為「Gemini in Firebase」)。
本程式碼研究室不需要 Google Analytics，因此請關閉 Google Analytics 選項。
按一下「建立專案」，等待專案佈建完成，然後按一下「繼續」。

將網頁應用程式新增至 Firebase 專案

前往 Firebase 專案的「專案總覽」畫面，然後點選「Web」。
在「App nickname」(應用程式暱稱) 文字方塊中，輸入容易記住的應用程式暱稱，例如 My Compass Codelab App。您可以取消勾選設定 Firebase Hosting 的核取方塊，因為您會在程式碼研究室的最後一個步驟中，選擇性地設定代管服務。
依序點選「註冊應用程式」>「繼續前往控制台」。

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

升級 Firebase 定價方案

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

Cloud Billing 帳戶需要付款方式，例如信用卡。
如果您剛開始使用 Firebase 和 Google Cloud，請確認是否符合 $300 美元抵免額和免費試用 Cloud Billing 帳戶的資格。
如果您是在活動中進行這項程式碼研究室，請詢問主辦單位是否有可用的 Cloud 抵免額。

進一步瞭解 Vertex AI 的定價。

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

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

設定 Cloud Firestore

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

啟用 Vertex AI

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

在終端機中，設定 Google Cloud SDK 的預設專案：
```
gcloud config set project YOUR_PROJECT_ID
```
如果看到「警告：您目前使用的專案與本機應用程式預設憑證檔案中的配額專案不符。這可能會導致無法預期的配額問題。"，然後執行下列指令來設定配額專案：
```
gcloud auth application-default set-quota-project YOUR_PROJECT_ID
```

在專案中啟用 Vertex AI 服務：

gcloud services enable aiplatform.googleapis.com

5. 設定網頁應用程式

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

設定 Firebase CLI 以指定專案

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

將範例資料匯入 Firestore

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

如要允許本機程式碼集執行通常會使用服務帳戶的程式碼，請在終端機中執行下列指令：
```
gcloud auth application-default login
```
瀏覽器會開啟新的分頁，使用與先前步驟相同的 Google 帳戶登入。

如要匯入範例 Firestore 資料，請執行下列指令：

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

前往 Firebase 主控台的 Firebase 專案，然後點選「Firestore」部分，確認資料已成功新增至資料庫。您應該會看到匯入的資料結構和內容。

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

如要使用資料庫等服務，網頁應用程式的程式碼集必須與正確的 Firebase 專案建立關聯。如要完成這項操作，請將 Firebase 設定新增至應用程式的程式碼集。這項設定包含專案 ID、應用程式的 API 金鑰和應用程式 ID 等重要值，以及其他可讓應用程式與 Firebase 互動的值。

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

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

在終端機中安裝依附元件，然後執行網頁應用程式：
```
npm install
npm run dev:next
```
在瀏覽器中前往本機代管的代管網址，即可查看網頁應用程式。舉例來說，在大多數情況下，網址為 http://localhost:3000/ 或類似網址。

「指南針」應用程式主畫面

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

按一下「尋找我的夢幻行程」。您可以看到，系統會針對某些固定目的地顯示一些經過硬式編碼的資料：

找到「夢幻之旅」畫面

歡迎自行探索。準備好繼續時，請按一下右上角的「首頁」按鈕。

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

現在您已準備好在應用程式中運用生成式 AI 的強大功能！本程式碼研究室的這一節將引導您實作一項功能，根據使用者提供的靈感建議目的地。您將使用 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 建議假期行程。請注意，您可以根據具體需求，使用系統指令來引導模型行為。即使模型本身不支援系統指令，也能使用這項功能。

在 Genkit 開發人員 UI 中與 Gemini 模型互動

管理提示

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

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

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

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

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

探索輸出結構定義

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

在程式碼編輯器中檢查提示檔案：
1. 開啟 prompts/2-simple-itinerary.prompt 檔案。
2. 檢查已定義的輸入和輸出架構。
與 UI 互動：
1. 在 Genkit 開發人員 UI 中，前往 prompts/2-simple-itinerary 部分。
2. 填入 place 和 interests 欄位，提供範例資料做為輸入內容：
```
{
    "interests": [
        "Museums"
    ],
    "place": "Paris"
}
```
3. 按一下「執行」。

使用 Dotprompt 指定輸出架構

瞭解結構定義導向的輸出

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

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

輸出結構定義的主要優點

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

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

使用多模態輸入內容

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

在程式碼編輯器中檢查提示檔案：
1. 開啟 prompts/imgDescription.prompt 檔案。
2. 請注意，其中包含 {{media url=this}}，這是 Handlebars 語法元素，可協助您將圖片併入提示。

與 UI 互動：

在 Genkit 開發人員 UI 中，開啟 prompts/imgDescription 提示。

在 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"
    ]
}

按一下「執行」。

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

雖然使用 AI 模型生成創意內容令人驚豔，但實際應用時，通常需要根據特定脈絡生成輸出內容。

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

如要縮小非結構化查詢與相關內容之間的差距，您將運用生成嵌入項目的向量相似度搜尋功能。

瞭解嵌入和向量相似度

向量：向量是資料點的數值表示，通常用於模擬文字或圖片等複雜資訊。向量中的每個維度都對應到資料的特定特徵。
嵌入模型：這些專用 AI 模型會將文字等輸入資料轉換為高維度向量。有趣的是，相似的輸入內容會對應到這個高維度空間中彼此靠近的向量。
向量相似度搜尋：這項技術會利用嵌入向量的鄰近程度，找出相關資料點。只要提供輸入查詢，這項功能就會在資料庫中找出嵌入向量相似的項目，表示語意相關。

瞭解擷取程序的運作方式

嵌入查詢：將使用者輸入的內容 (例如「巴黎的浪漫晚餐」) 傳遞至嵌入模型，產生查詢向量。
資料庫嵌入：理想情況下，您已預先處理目的地資料庫，為每個項目建立嵌入向量。
相似度計算：使用相似度指標 (例如餘弦相似度) 比較查詢向量與資料庫中的每個嵌入向量。
擷取：根據與查詢向量的接近程度，從資料庫擷取最相似的項目做為相關建議。

將這項擷取機制納入應用程式後，您就能運用 Gemini 模型生成建議，不僅創意十足，而且完全根據特定資料集。這種做法可確保生成的輸出內容與情境相關，並與資料庫中的資訊一致。

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

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

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

建立索引，並務必將 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": "{}"}'

在 Genkit 開發人員 UI 中，開啟 retrievers/placesRetriever。
按一下「執行」。觀察含有預留位置文字的架構物件，指出您要實作擷取器邏輯的位置。
在程式碼編輯器中開啟 src/lib/genkit/placesRetriever.ts 檔案。

捲動到最下方，然後將預留位置 placesRetriever 換成下列內容：

export const placesRetriever = defineFirestoreRetriever(ai, {
  name: 'placesRetriever',
  firestore,
  collection: 'places',
  contentField: 'knownFor',
  vectorField: 'embedding',
  embedder: vertexAI.embedder('text-embedding-005', {outputDimensionality: 768}),
  distanceMeasure: 'COSINE',
});

測試擷取器

在 Genkit 開發人員使用者介面中，開啟 retrievers/placesRetriever 擷取器。

請提供下列查詢：

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

你也可以提供選項。舉例來說，以下說明如何指定檢索器應傳回的文件數量：
```
{
    "limit": 4
}
```
按一下「執行」。

除了相似度之外，您還可以在「選項」中加入 where 子句，對資料進行額外篩選。

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

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

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

在程式碼編輯器中檢查行程提示：
1. 開啟 prompts/itineraryGen.prompt 檔案。
2. 請注意，提示已擴充，可接受額外輸入內容，特別是從擷取器取得的 activities 資料。
在 Genkit 開發人員 UI 中，查看 src/lib/genkit/itineraryFlow.ts 檔案中的 Genkit flow。
提示：為簡化偵錯程序，建議將冗長的 flow 分解為較小的步驟。
整合「圖片說明」步驟，強化流程：
1. 找到 TODO: 2 註解 (約在第 81 行)。這會標示出要強化流程的位置。
2. 將空白的 imgDescription 預留位置，替換為 imgDescription 提示呼叫產生的輸出內容。

測試流程：

前往flows/itineraryFlow。

使用下列輸入內容，測試是否已成功執行 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"
    ]
}

按一下「執行」。
觀察生成的輸出內容，其中應包含圖片說明，並納入行程建議。

如果遇到任何錯誤或非預期行為，請查看「檢查」分頁標籤瞭解詳細資料。您也可以使用這個分頁，查看 Trace Store 的執行記錄。

網頁應用程式的 RAG

在瀏覽器中前往 http://localhost:3000/，確認網路應用程式仍在執行。
如果網頁應用程式已停止執行，請在終端機中執行下列指令：
```
npm install
npm run dev
```
查看「Dream Your Vacation」網頁應用程式頁面 (http://localhost:3000/gemini)。
如需 Next.js 整合範例，請查看其原始碼 (src/app/gemini/page.tsx)。

9. 透過 Firebase App Hosting 部署應用程式

這趟旅程的最後一個步驟是部署網頁應用程式。您將運用 Firebase App Hosting，這項解決方案可感知架構，專為簡化 Next.js 和 Angular 應用程式的部署作業而設計，方便您將應用程式部署至無伺服器後端。

將變更提交至本機 Git 存放區，然後推送到 GitHub。
在 Firebase 主控台中，前往 Firebase 專案中的「App Hosting」。
依序點選「開始使用」 >「連結至 GitHub」。
選取 GitHub 帳戶和存放區。按一下 [Next] (下一步)。
在「部署設定」>「根目錄」中，保留預設值。
在「Live branch」中，選取 GitHub 存放區的「main」分支版本。按一下 [Next] (下一步)。
輸入後端 ID (例如 compass)。
系統詢問是否要建立或連結 Firebase 網頁應用程式時，請選擇「選取現有的 Firebase 網頁應用程式」，然後挑選您在本程式碼研究室先前步驟中建立的應用程式。
按一下「完成並部署」。

監控部署狀態

部署程序需要幾分鐘才能完成。您可以在 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. 結論

恭喜您完成這個內容豐富的程式碼研究室！

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

在整個學習過程中，您已實際操作軟體工程基本模式，這些模式對於建構強大的生成式 AI 應用程式至關重要。這些模式包括：

提示詞管理：以程式碼形式整理及維護提示詞，提升協作效率並控管版本。
多模態內容：整合圖像和文字等多種資料類型，提升 AI 互動體驗。
輸入/輸出結構定義：在應用程式中建構資料，以便順暢整合及驗證。
向量儲存庫：運用向量嵌入項目，有效率地搜尋相似內容並擷取相關資訊。
資料檢索：實作機制，從資料庫擷取資料並納入 AI 生成內容。
檢索增強生成 (RAG)：結合檢索技術與生成式 AI，生成與脈絡相關且準確的輸出內容。
流程儀表化：建構及自動化調度管理複雜的 AI 工作流程，確保執行過程順暢且可觀察。

掌握這些概念並在 Firebase 生態系統中運用，您就能輕鬆踏上自己的生成式 AI 冒險之旅。探索無限可能、打造創新應用程式，並持續拓展生成式 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) 搜尋。
請參閱 Genkit 的官方說明文件。
進一步瞭解 Firestore 和 PostgreSQL 適用的 Cloud SQL 中的相似度搜尋功能。
使用函式呼叫深入瞭解 GenAI 流程。

使用 Genkit 建構以資料為基礎的生成式 AI 功能 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

1. 事前準備

事前準備

課程內容

事前準備

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

網頁應用程式

使用的服務

3. 設定開發環境

確認 Node.js 版本

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

查看資料夾結構

安裝 Firebase CLI

登入 Firebase

安裝 Google Cloud 的 gcloud CLI

4. 設定 Firebase 專案

建立 Firebase 專案

將網頁應用程式新增至 Firebase 專案

升級 Firebase 定價方案

設定 Cloud Firestore

啟用 Vertex AI

5. 設定網頁應用程式

設定 Firebase CLI 以指定專案

將範例資料匯入 Firestore

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

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

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

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

啟動 Genkit 開發人員 UI

與 Gemini 互動

管理提示

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

探索輸出結構定義

瞭解結構定義導向的輸出

輸出結構定義的主要優點

使用多模態輸入內容

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

瞭解嵌入和向量相似度

瞭解擷取程序的運作方式

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

測試擷取器

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

網頁應用程式的 RAG

9. 透過 Firebase App Hosting 部署應用程式

監控部署狀態

將權限授予服務帳戶

自動重新部署

10. 結論

探索其他部署選項

後續步驟

使用 Genkit 建構以資料為基礎的生成式 AI 功能