1. 事前準備
本程式碼研究室可讓您自行掌握進度，透過 Google Cloud 的 Vertex AI Agent Builder 建構 AI 虛擬服務專員。每個步驟都會強調特定的 Agent Builder 功能，並說明其用途。
必要條件
- Google Cloud 的生成式 AI 基本概念
- 對AI 代理程式概念有基本瞭解
- 對 Gemini CodeAssist 有基本瞭解 (選用)
課程內容
- 如何使用 Vertex AI Agent Builder 建立簡單的 AI 虛擬服務專員
- 如何透過附加資料儲存庫來讓已建立的服務專員就位
- 如何將 AI Agent 整合到網站(選用)
軟硬體需求
- 好奇心
- 可正常運作的電腦和穩定的 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，請按一下「Enable API」來啟用。
- 如果點選按鈕無法啟用，請直接前往 API 頁面 手動啟用。
- 在新開啟的 Dialogflow 頁面中，按一下「Create Agent」
- 系統會提供一些建立代理程式的選項，請選擇「自行建構」。
步驟 4：
- 選擇「顯示名稱」 (例如「Travel Buddy」)
- 在「Location」(位置) 中，選取「global (Global serving, data-at-rest in US)」(全球 (全球服務，美國靜態資料)做為「Region」(區域)
- 保留其他設定，預設
- 按一下「CREATE」按鈕
步驟 5：
- 選擇應對手冊名稱 (例如「資訊專員」)
- 新增目標 (例如協助消費者回答旅遊相關問題)
- 定義指示 (例如：向使用者打招呼，然後詢問需要哪方面的協助)
- 完成所有設定後，按下「儲存」
步驟 6：
- 按一下「切換模擬工具」圖示
- 選取剛建立的代理程式 (例如「Info Agent」)
- 為虛擬服務專員選擇基礎生成式 AI 模型 (例如 gemini-1.5-flash)
- 與服務專員對話，測試服務專員 (例如在「輸入使用者輸入內容」文字方塊中輸入內容)
恭喜！您剛剛成功使用 Vertex AI Agent Builder 建立 AI 虛擬服務專員。
4. 將資料儲存庫附加至代理程式
試著詢問服務專員如何前往瓦干達 (例如「前往瓦干達的最佳路線為何？」)，你會收到類似以下的回覆：
雖然這在事實上是正確的做法，但如果客服專員只是簡單地表示「我無法提供資訊」並結束對話，不如建議使用者前往類似地點，這樣對使用者來說會更有幫助。這種做法可能會導致使用者實際透過代理商預訂行程。
為了讓服務專員推薦類似地點，您可以透過 Datastores 向服務專員提供更多資訊。當代理程式無法根據內建知識回答使用者問題時，這個知識庫可做為額外參考資料。
注意：如要關閉模擬器，請再次點選切換模擬器圖示
建立資料儲存庫很簡單，只要按一下「Agent Basics」頁面底部的「+ Data store」按鈕即可。
填寫下列資訊：
- 工具名稱：Alternative Location
- 類型：資料儲存庫
- 說明：如果使用者的請求包含不存在的位置，請使用這項工具
完成時請按一下 [Save] (儲存)。
這會建立資料儲存庫工具，讓代理程式與資料儲存庫通訊，但您仍需要建立實際的資料儲存庫，才能儲存資訊。如要這麼做，請按一下「新增資料儲存庫」和「建立資料儲存庫」。
點選「Create new data store」(建立新的資料儲存庫)後，系統會將您重新導向至 Vertex AI 代理程式建構工具頁面，如下所示
選擇「在 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 分頁，然後按一下「refresh」，您應該會在「Available data stores」頁面下方看到已建立的資料儲存庫。
為避免 Agent 產生幻覺，請在資料儲存庫的基礎設定中將設定設為「非常低」，這樣 Agent 就會受到更嚴格的限制，無法自行編造內容。目前請維持預設設定，但您隨時可以嘗試其他設定。
接著選取新增的資料儲存庫，按一下「確認」，然後點選「儲存」。
接著，返回「Agent Basics」頁面，在 Playbook 設定的底部，您會看到新建的資料儲存庫 (例如「Alternative Location」) 可供使用，請勾選資料儲存庫 (例如「Alternative Location」)，然後按一下頁面頂端的「Save」(儲存) 按鈕。
就快完成了！最後一個步驟是在服務專員的操作說明中加入「替代位置」工具。在服務專員的操作說明中加入一行「- 如果使用者要求包含不存在的位置，請使用 ${TOOL: 替代位置}」，然後按一下「儲存」。
一切都準備就緒。讓我們再次開啟切換器模擬器，並詢問相同的問題 (例如：前往 Wakanda 的最佳方式是什麼？)
恭喜！你的服務機器人現在會根據文字檔案提供的資訊，推薦適合的地點。
就這樣，我們已完成建構自己的對話方塊 AI 服務。如要進一步瞭解如何自訂對話方塊以提升使用體驗，請參閱下方的其他活動。
5. 其他活動 - 讓 AI 服務專員上線
在先前的步驟中，您已開發 AI 代理程式，並使用相關參考資料進行驗證。在下一個章節中，您將解決一個關鍵問題，也就是如何在網站中嵌入這個服務，以便與訪客進行即時互動。
您可以透過多種方式公開您的服務機器人。您可以匯出或直接發布。您可以參閱說明文件，瞭解可能的選項。
在 Dialogflow 分頁的右上角，依序點選「溢出選單」和「發布服務」。
將所有設定保留為「預設」，然後點選「啟用未驗證的 API」。
注意：啟用未經驗證的 API 僅供示範，不建議用於實際工作負載。如果您想瞭解如何安全發布內容，請參閱這份說明文件。
點選後，你應該會看到一個小 CSS 程式碼片段：
只要複製程式碼片段即可。您稍後會將這個程式碼片段整合到網站中。
如要建立網站，您將使用 Cloud 編輯器環境。以下是開啟 Cloud 編輯器的步驟：
- 在另一個分頁中開啟 Google Cloud 控制台。
- 按一下右上角的「啟用 Cloud Shell」按鈕
- 按一下「Open Editor」按鈕。
如果系統提示您授權 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 中的「網頁預覽」圖示。接著，您可以點選「Change Port」，輸入 5000，然後點選「Change and Preview」儲存。
系統會顯示範例網站，並提供 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 鍵終止程序。再次按一下「Open Editor」，請 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進行設定
注意：由於我們是在雲端殼層中執行整個活動，因此不需要設定專案
- 建立 **
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 帳戶收取本程式碼研究室所用資源的費用，請按照下列步驟操作：
- 在 Google Cloud 控制台中前往「管理資源」頁面。
- 在專案清單中選取要刪除的專案，然後點按「刪除」。
- 在對話方塊中輸入專案 ID，然後按一下「Shut down」(關閉) 即可刪除專案。
- 或者，您也可以前往控制台的 Cloud Run，選取剛部署的服務並刪除。