1. 事前準備
本程式碼實驗室提供自學課程，引導您使用 Google Cloud 的 Vertex AI Agent Builder 建構 AI 代理。每個步驟都會著重說明 Agent Builder 的特定功能，並解釋其用途。
必要條件
- 對 Google Cloud 中的生成式 AI 有基本瞭解
- 對 AI 代理程式概念有基本瞭解
- 對 Gemini CodeAssist 有基本瞭解 (選用)
課程內容
- 如何使用 Vertex AI Agent Builder 建立簡單的 AI 代理
- 如何透過附加資料存放區，為建立的代理提供基礎
- 如何將 AI 代理程式整合至網站(選用)
軟硬體需求
- 好奇心
- 可正常運作的電腦和穩定的 Wi-Fi 連線
- 已連結帳單的 Google Cloud 專案。
注意：如果您尚未建立任何 Google Cloud 專案，可以按照操作說明建立專案。您也可以查看 Google Cloud 免費方案服務。
2. 設計第一個 AI 代理
現在可以建立自己的 AI 代理程式了。不過，在投入開發前，請務必先為服務專員確立明確願景。請思考下列關鍵問題：
- 要解決的問題。是否能自動執行工作、提供資訊、娛樂或協助發揮創意？
- 主要功能是什麼？會執行工作還是委派工作？是生成文字，還是生成不同媒體的組合？
- 有什麼限制？是否能完全自主完成所有工作？
- 應具備哪些個性或特質？是正式、非正式、幽默、實用還是提供資訊？
- 要根據哪些指標衡量成效？您要如何評估服務專員的成效？
為加快程序，以下是您今天將建立的旅遊代理程式的這些問題答案：
- 也就是要解決的問題。
- 規劃行程可能既耗時又令人不知所措。這個旅行社將協助使用者探索目的地、規劃行程，以及預訂航班和住宿。
- 主要功能是什麼？
- 代理程式應具備下列能力：
- 回答目的地相關問題，例如簽證規定
- 規劃符合使用者行程和目標的行程
- 預訂機票和住宿
- 有什麼限制？
- 根據預設，服務專員可能無法回答複雜的查詢
- 代理程式無法生成圖像
- 代理程式的知識會受限於基礎模型
- 應具備哪些個性或特質？
- 這位專員應具備旅遊知識、樂於助人，並對旅遊充滿熱忱。並能清楚簡潔地傳達資訊。
- 要根據哪些指標衡量成效？
- 這類代理程式的成功與否，可根據使用者對建議 (探索、規劃、預訂) 的滿意度來評估
3. 使用 Vertex AI Agent Builder 建構 AI 代理
使用 Vertex AI Agent Builder，只需幾個步驟即可建立 AI 代理。
步驟 1：
- 前往 Vertex AI Agent Builder。
- 您應該會看到歡迎頁面。
- 點選「CONTINUE AND ACTIVATE THE API」按鈕。
步驟 2：
- 系統會將您重新導向至「建立應用程式」頁面。
- 按一下「建立新應用程式」按鈕。
步驟 3：
- 選擇「對話式代理程式」，然後點選「建立」
注意：
- 按一下「建立」後，系統會開啟 Dialogflow 對話式代理的新分頁。
- 如果系統要求選擇 Google Cloud 專案，請選取與正確 Gmail 帳戶相關聯的 Google Cloud 專案。
- 如果您是在新帳戶中進行這項實驗室，系統會要求您啟用 Dialogflow API，請按一下「啟用 API」啟用。
- 如果點選按鈕無法啟用，請直接前往 API 頁面 手動啟用。
- 在新開啟的 Dialogflow 頁面中，按一下「建立代理程式」。
- 現在，系統會提供建立代理程式的選項，請選擇「自行建構」。
步驟 4：
- 選擇「顯示名稱」，例如「旅遊好幫手」
- 在「位置」部分，選取「global (Global serving, data-at-rest in US)」做為「區域」
- 保留其他設定，預設
- 按一下「建立」按鈕
步驟 5：
- 選擇應對手冊名稱 (例如「資訊代理」)
- 新增「目標」 (例如：協助顧客解答旅遊相關查詢)
- 定義指令 (例如：跟使用者打招呼，然後詢問需要哪方面的協助)
- 確認所有設定後，按下「儲存」
步驟 6：
- 按一下「切換模擬工具」圖示
- 選取剛建立的代理程式 (例如「Info Agent」)。
- 為代理選擇基礎生成式 AI 模型 (例如 gemini-1.5-flash)
- 與代理程式對話來測試代理程式 (也就是在「Enter User Input」文字方塊中輸入內容)
恭喜！您已使用 Vertex AI Agent Builder 成功建立 AI 代理。
4. 將資料存放區附加至代理程式
試著詢問如何前往瓦干達 (例如「前往瓦干達的最佳方式是什麼？」)，你會收到類似以下的回覆：
雖然這項資訊正確無誤，但與其直接說「我無法提供資訊」並結束對話，如果代理程式建議類似地點，對使用者會更有幫助。這種做法可能會促使使用者透過代理預訂行程。
如要讓代理程式推薦類似地點，可以透過資料存放區提供更多資訊。如果代理程式無法根據內建知識回答使用者問題，就能參考這個額外的知識庫。
注意：如要關閉模擬工具，請再次點按切換模擬工具圖示
建立資料儲存庫非常簡單，只要點選「Agent Basics」(代理程式基本資料) 頁面底部的「+ Data store」(+ 資料儲存庫) 按鈕即可。
填寫下列資訊：
- 工具名稱：Alternative Location
- 類型：資料儲存庫
- 說明：如果使用者要求的位置不存在，請使用這項工具
完成時請按一下 [Save] (儲存)。
這會建立資料儲存庫工具，供代理與資料儲存庫通訊，但您仍須建立實際的資料儲存庫，其中包含資訊。如要這麼做，請點選「新增資料儲存庫」和「建立資料儲存庫」。
按一下「建立新的資料儲存庫」後，系統會將您重新導向至 Vertex AI Agent Builder 頁面，如下所示
選擇「在 Cloud Storage 中」選項
完成這個步驟後，
- 按一下「檔案」 (這非常重要，否則匯入作業會失敗)
- 輸入 ai-workshops/agents/data/wakanda.txt
- 按一下「繼續」
如果您有興趣，以下是所提供文字檔的內容：
Places that are similar to Wakanda
- Oribi Gorge in South Africa: The rock formations here are reminiscent of the Warrior Falls in Wakanda.
- Iguazu Falls: Located on the border of Argentina and Brazil, these massive waterfalls were a major inspiration for the Warrior Falls.
- Immerse yourself in Wakandan culture: Read the Black Panther comics, watch the movies, and explore online resources to learn more about Wakandan culture, language, and technology.
- Visit a Disney theme park: While there isn't a dedicated Wakanda land yet, you might be able to meet Black Panther at Disneyland or on a Marvel Day at Sea Disney cruise.
在下一個頁面中，為資料儲存庫命名 (例如 Wakanda Alternative)，然後按一下「CREATE」(建立)。
最後一個步驟是選取剛建立的資料來源，然後按一下「建立」。按一下資料儲存庫**，**即可查看資料儲存庫匯入進度。
注意：匯入活動需要一段時間才能順利完成，因此在活動進行期間，您可以按這裡進一步瞭解 Vertex AI 代理程式可用的資料儲存庫選項。
如果一切順利，請返回 Dialogflow 分頁並點選「重新整理」，您應該會在「可用的資料儲存庫」頁面看到已建立的資料儲存庫。
為避免 Agent 出現幻覺，請在資料儲存庫的基礎設定中，將設定設為「非常低」，對 Agent 編造內容施加更嚴格的限制。目前請保留預設設定，但您可以隨時探索不同設定。
現在選取新增的資料儲存庫，按一下「確認」，然後按一下「儲存」。
現在請返回「Agent Basics」(代理程式基本資料) 頁面，在劇本設定底部，您會看到新建立的資料儲存庫 (例如「Alternative Location」)，勾選資料儲存庫 (例如「Alternative Location」)，然後按一下頁面頂端的「Save」(儲存) 按鈕。
即將完成！最後一個步驟是在代理的指令中加入「Alternative Location」工具。在代理程式的指令中新增一行，如果使用者的要求包含不存在的位置，請使用 ${TOOL: Alternative Location}，然後按一下「儲存」。
一切就緒。請再次開啟切換開關模擬器，並提出相同問題 (即「前往瓦坎達的最佳方式是什麼？」)。
恭喜！現在，代理程式會根據文字檔提供的資訊推薦地點。
這樣就完成了！我們已建構自己的代理程式建構工具 AI 代理程式。如要進一步瞭解如何自訂代理程式，提升使用體驗，請查看下方的「其他活動」。
5. 其他活動 - 讓 AI 代理人上線
在先前的步驟中，您已開發 AI 代理程式，並以相關參考資料為基礎。在下一節中，您將解決如何將這個代理嵌入網站的關鍵問題，讓訪客能夠即時互動。
公開代理程式的方法有很多種。您可以匯出或直接發布。如要瞭解可用的選項，請參閱說明文件。
在 Dialogflow 分頁的右上角，按一下「溢位選單」，然後點選「發布代理程式」。
將所有設定保留為「預設」，然後按一下「啟用未經驗證的 API」。
注意：啟用未經驗證的 API 僅供示範之用，不建議將這項設定用於實際工作負載。如要瞭解如何安全地發布，請參閱這份文件。
點選後，您應該會看到一小段 CSS 程式碼片段：
只要複製程式碼片段即可。稍後您會將這個程式碼片段整合到網站中。
您將使用 Cloud Editor 環境建立網站。開啟 Cloud Editor 的步驟如下：
- 在另一個分頁中開啟 Google Cloud 控制台。
- 按一下右上角的「啟用 Cloud Shell」按鈕
- 按一下「開啟編輯器」按鈕。
如果系統提示您授權 Cloud Shell，請按一下「授權」繼續操作。
在下一節中，您將使用 Gemini Code Assist 建立 Python Flask 網頁應用程式範例，並與 Agent 片段整合。
開啟 Cloud Shell 編輯器後，按一下「Gemini Code Assist」並登入 Google Cloud 專案。如果系統要求啟用 API，請按一下「啟用」。
完成後，請要求 Gemini Code Assist 建立 Flask 應用程式，並將 AI 代理程式碼片段整合至該應用程式。
以下是可用的範例提示
Here is my Travel buddy Vertex AI agent builder agent publish code snippet,
<REPLACE IT WITH YOUR AI AGENT PUBLISH CODE SNIPPET>
can you create a sample flask app to use it
注意：我們在這裡要求的是 Python Flask 應用程式。如果您偏好其他程式設計語言或架構，請隨意使用。Gemini Code Assist 可生成不同程式設計語言的程式碼。詳情請參閱「支援的語言、IDE 和介面」。
您會發現提供的程式碼片段已與 AI 代理程式整合。如要測試提供的程式碼是否有效且運作正常，請按照 Gemini Code Assist 的指示，執行輸出回覆中的這段程式碼。
輸出回應代碼程式碼片段範例 -
from flask import Flask, render_template_string
app = Flask(__name__)
# HTML template string with the provided Dialogflow Messenger code
html_template = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Buddy Chatbot</title>
<link rel="stylesheet" href="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/themes/df-messenger-default.css">
<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
<style>
df-messenger {
z-index: 999;
position: fixed;
--df-messenger-font-color: #000;
--df-messenger-font-family: Google Sans;
--df-messenger-chat-background: #f3f6fc;
--df-messenger-message-user-background: #d3e3fd;
--df-messenger-message-bot-background: #fff;
bottom: 16px;
right: 16px;
}
body {
font-family: sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h1>Welcome to Travel Buddy!</h1>
<p>Start chatting with our AI Travel buddy, in the bottom right corner.</p>
<df-messenger
project-id="<SAMPLE>"
agent-id="<SAMPLE>"
language-code="en"
max-query-length="-1">
<df-messenger-chat-bubble
chat-title="Travel Buddy">
</df-messenger-chat-bubble>
</df-messenger>
</body>
</html>
"""
@app.route("/")
def index():
"""Renders the HTML template with the Dialogflow Messenger."""
return render_template_string(html_template)
if __name__ == "__main__":
app.run(debug=True)
按照指示操作
- 複製提供的 Flask 應用程式程式碼片段，
- 建立名為 app.py 的新檔案，然後儲存檔案。
下一步會要求安裝 Flask 來執行這個程式碼片段，但 Cloud Shell 預設已安裝所有常用公用程式，因此目前不需要這麼做。
儲存檔案 (Ctrl + S 或 CMD + S)，然後按一下「Open Terminal」(開啟終端機)，執行提供的程式碼。
在終端機執行下列指令
python app.py
注意：請確認您位於正確的資料夾，其中包含 app.py 檔案
Python Flask 應用程式會在通訊埠 5000 上執行。如要預覽這個網頁應用程式，請按一下 Cloud Shell 中的「網頁預覽」圖示。然後按一下「變更通訊埠」，輸入 5000，再按一下「變更並預覽」即可儲存。
系統會顯示範例網站，並提供可用的 AI 代理程式。只要點選 AI 代理程式，即可開始與其對話。
歡迎使用不同提示進行測試。您也可以要求 Gemini Code Assist 美化網站，或為 AI 代理新增更多基礎資料，讓代理更具資源。
準備就緒後，您可以嘗試在 Google Cloud 上代管這個 AI 代理程式，讓任何人都能隨時隨地存取。在本程式碼實驗室的其餘部分，您會以容器形式在 Cloud Run 中部署這個 Flask 範例應用程式。
注意：這項功能不只適用於 Cloud Run (如果您不知道 Cloud Run 是什麼，也可以詢問)，您還可以請 Gemini Code Assist 協助您在 Google Cloud 或任何地方部署這項功能，並提供最佳做法。
返回 Cloud Shell 終端機，按下 Ctrl + C 鍵終止程序。再次點選「開啟編輯器」，要求 Gemini Code Assist 協助將應用程式容器化，並部署到 Cloud Run。
Can you help me deploy this sample flask app to cloud run service
這項服務提供一些操作說明和指令，可供您按照指示在 Cloud Run 服務中代管應用程式。
以下是輸出內容範例
部署至 Cloud Run 的步驟
- 需求條件：
- Google Cloud 帳戶：您需要啟用計費功能的 Google Cloud 帳戶。
- gcloud CLI：在本機上安裝並初始化 Google Cloud SDK (gcloud CLI)。您將使用此工具，透過終端機與 Google Cloud 互動。
- Docker：在本機電腦上安裝 Docker。Cloud Run 會使用 Docker 將應用程式容器化。
- 專案設定：確認您已在 gcloud CLI 中選取 Google Cloud 專案。你可以使用
gcloud config list project檢查，並使用gcloud config set project YOUR_PROJECT_ID設定
注意：由於我們是在 Cloud Shell 中執行這項活動，因此不需要設定專案
- 建立 **
requirements.txt：**
- 這個檔案會列出應用程式所需的所有 Python 套件。在專案目錄 (
main.py所在位置) 中，建立名為requirements.txt的檔案，並新增下列程式碼：
- 建立 **
Dockerfile：**
Dockerfile定義如何為應用程式建構 Docker 映像檔。在專案目錄中建立名為Dockerfile的檔案 (不含副檔名)，並加入下列內容：
# Use an official Python runtime as a parent imageFROM python:3.9-slim-buster
# Set the working directory to /appWORKDIR /app
# Copy the current directory contents into the container at /app
COPY . /app
# Install any needed packages specified in requirements.txt
RUN pip install --no-cache-dir -r requirements.txt
# Make port 5000 available to the world outside this container
EXPOSE 5000
# Define environment variable
ENV NAME World
# Run app.py when the container launches
CMD ["python", ".py"]
- 建構 Docker 映像檔：
- 開啟終端機，前往專案目錄，然後執行：
gcloud builds submit –tag gcr.io/bgr-workshop-23rd/travel-buddy
- 部署至 Cloud Run：
- 建構並上傳映像檔後，請執行下列指令，將映像檔部署至 Cloud Run：
gcloud run deploy travel-buddy --image gcr.io/bgr-workshop-23rd/travel-buddy --region us-central1
完成這些步驟後，整合 AI 代理程式的應用程式就會上線，供使用者使用。
恭喜，祝您學習愉快！
6. 清除
如要避免系統向您的 Google Cloud 帳戶收取本程式碼研究室所用資源的費用，請按照下列步驟操作：