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：
- 選擇「對話式代理程式」，然後按一下「建立」
注意：
- 按一下「CREATE」(建立) 後，系統會開啟 Dialogflow Conversational Agents 的新分頁。
- 如果系統要求選擇 Google Cloud 專案，請選取與正確 Gmail 帳戶相關聯的 Google Cloud 專案。
- 如果您是在新帳戶中進行本實驗室，系統會要求您啟用 Dialogflow API，請按一下「啟用 API」啟用。
- 如果點選按鈕無法啟用，請直接前往 API 頁面 手動啟用。
- 在開啟的 Diaglogflow 頁面中，按一下「Create Agent」。
- 現在，系統會提供建立代理程式的選項，請選擇「打造專屬 AI 代理」。
步驟 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. 將資料存放區附加至代理程式
試著詢問如何前往瓦干達 (例如「前往瓦干達的最佳方式是什麼？」)，你會收到類似這樣的答覆：
雖然這項資訊正確無誤，但與其直接說「我無法提供資訊」並結束對話，不如建議類似地點，對使用者更有幫助。這種做法可能會促使使用者透過代理商預訂行程。
如要讓專員推薦類似地點，你可以透過 Datastore 提供更多資訊。如果代理程式無法根據內建知識回答使用者問題，就會參考這個額外的知識庫。
注意：如要關閉模擬工具，請再次點選切換模擬工具圖示
建立資料儲存庫非常簡單，只要點選「Agent Basics」(代理程式基本資料) 頁面底部的「+ 資料儲存庫」按鈕即可。
填寫下列資訊：
- 工具名稱：替代位置
- 類型：資料儲存庫
- 說明：如果使用者要求的位置不存在，請使用這項工具
完成時請按一下 [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)，然後按一下「建立」。
最後一個步驟是選取剛建立的資料來源，然後按一下「建立」。按一下資料儲存庫**，**即可查看資料儲存庫匯入進度。
注意：匯入活動需要一段時間才能順利完成，因此在活動進行期間，您可以按這裡，進一步瞭解 Vertex AI 代理程式可用的資料儲存庫選項。
如果一切順利，請返回 Dialogflow 分頁並點選「重新整理」，您應該會在「可用的資料儲存庫」頁面下方看到已建立的資料儲存庫。
為避免 Agent 產生幻覺，請在資料儲存庫的基礎設定中，將設定設為「Very Low」(極低)，對 Agent 編造內容施加更嚴格的限制。目前請保留預設設定，但您可以隨時探索不同的設定。
現在選取新增的資料儲存庫，按一下「確認」，然後按一下「儲存」。
現在請返回「Agent Basics」(代理程式基本資料) 頁面，在劇本設定底部，您會看到新建立的資料儲存庫 (例如「Alternative Location」)，勾選資料儲存庫 (例如「Alternative Location」)，然後按一下頁面頂端的「Save」(儲存) 按鈕。
就快完成了！最後一個步驟是在代理的指令中加入「Alternative Location」工具。在代理程式的指令中新增一行「- Use ${TOOL: Alternative Location} if the user's request contains a location that does not exist」，然後按一下「儲存」。
一切就緒。請再次開啟切換開關模擬器，並提出相同問題 (即「前往瓦坎達的最佳方式是什麼？」)。
恭喜！現在，智慧助理會根據文字檔提供的資訊推薦地點。
這樣就完成自訂 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 帳戶收取本程式碼研究室所用資源的費用，請按照下列步驟操作：