總覽

在本實驗室中，您將整合 AI 代理和 Flutter 應用程式。具體做法是將 Flutter 做為用戶端應用程式框架，Vertex AI Search 做為向量資料庫，並運用 Reasoning Engine，在 Vertex AI 透過 LangChain 建構及部署代理。這個代理會運用 Gemini 模型，對文字和圖片提示生成 AI 回覆。Gemini 是一個模型系列，提供多種功能強大的大型語言模型 (LLM)。

本實驗室已預先佈建使用 code-server 的 VSCode IDE，以及執行 Flutter 應用程式所需的 Flutter 和 Dart 擴充功能。此外，實驗室提供 fwr 工具，可以將 Flutter 應用程式做為網頁應用程式執行，並透過瀏覽器存取。

本實驗室適合任何經驗程度的開發人員，尤其是參與應用程式開發，但可能不熟悉雲端應用程式開發的人。如果擁有 Python 使用經驗並熟悉 Flutter 框架，將能更快上手。即使不瞭解 Flutter，也能完成本實驗室的工作。不過，您還是會查看一些 Flutter 應用程式程式碼，並測試應用程式功能。

目標

在本實驗室中，您會執行下列工作：

• 在 Google Cloud 控制台，使用 AI Applications 建立搜尋資料儲存庫和搜尋應用程式。

• 使用 Vertex AI Workbench 部署 Reasoning Engine 代理。

• 使用整合 Vertex AI Search 和 Reasoning Engine 代理的 Python 應用程式。

• 將應用程式部署至 Cloud Run，做為 Flutter 應用程式的後端。

• 設定 Firebase 專案並連結至 Flutter 應用程式。

  本實驗使用的各種元件如下：

  

設定

在每個研究室中，您都能在固定時間內免付費建立新的 Google Cloud 專案，並使用一組資源。

1. 請透過無痕式視窗登入 Qwiklabs。

2. 請記下研究室的存取時間 (例如 1:15:00)，並確保自己能在時間限制內完成作業。
   研究室不提供暫停功能。如有需要，您可以重新開始，但原先的進度恕無法保留。

3. 準備就緒後，請按一下「Start lab」。

4. 請記下研究室憑證 (使用者名稱和密碼)，這組資訊將用於登入 Google Cloud 控制台。

5. 按一下「Open Google Console」。

6. 按一下「Use another account」，然後複製這個研究室的憑證，並貼入提示訊息。
   如果使用其他憑證，系統會顯示錯誤或向您收取費用。

7. 接受條款，然後略過資源復原頁面。

工作 1：建立搜尋資料儲存庫和搜尋應用程式

在這項工作中，您將在 Google Cloud 控制台，使用 AI applications 建立搜尋資料儲存庫和搜尋應用程式，為 Flutter 應用程式導入搜尋功能。

建立搜尋資料儲存庫

1. 在 Cloud 控制台，點選「查看所有產品」。接著在「所有產品」頁面，捲動至「人工智慧」部分，然後點選「AI Applications」。

2. 點選「Continue and activate the API」。

3. 點選左側窗格中的「資料儲存庫」，前往「資料儲存庫」頁面，並點選「建立資料儲存庫」。

   在這個頁面，您將設定搜尋結果的資料來源。本實驗室預先佈建的 Cloud Storage bucket 中有一個 .csv 檔案，其中收錄了 Google 商品商店的品項資料。

4. 接著我們要選取 Cloud Storage 做為資料來源。請點選「Cloud Storage」下方的「選取」。

5. 對於要匯入的資料類型，請選取「適用於對話應用程式的結構化常見問題資料 (CSV)」。

6. 請點選「檔案」來選取要匯入的資料夾或檔案。

7. 按一下「瀏覽」，並提供 CSV 檔案的 Cloud Storage 網址。

8. 再來我們要查看 Cloud Storage bucket 的內容，請點選 。

9. 選取 goog_merch.csv 檔案，然後點選「選取」。

   系統會填入資料夾的 gs:// URI。

   

10. 按一下「繼續」。

11. 資料儲存庫名稱請輸入 goog-merch-ds。

12. 點選「建立」。

    系統會隨即建立資料儲存庫，並開始擷取 CSV 檔案中的資料。

13. 在「資料儲存庫」頁面找出剛建立的資料儲存庫，然後點選儲存庫的名稱。

14. 「文件」分頁會顯示已匯入文件的清單。按一下「查看文件」來查看文件相關資料。

點選「Check my progress」，確認目標已達成。 建立 Vertex AI Search 資料儲存庫。

建立搜尋應用程式

將搜尋資料儲存庫與 Vertex AI Agent Builder 中的搜尋應用程式連結，開始使用該儲存庫。

1. 在 Cloud 控制台，依序點選「AI Applications」和「應用程式」。

2. 點選「建立應用程式」。

3. 在「建立應用程式」頁面，點選「網站搜尋功能」下方的「建立」。

4. 在「搜尋應用程式設定」頁面，為「網站」搜尋應用程式指定以下設定，其餘設定請保持預設狀態：

   屬性	值 (輸入或選取)
   Enterprise 版功能	停用
   應用程式名稱	gms-search-app
   貴公司或組織的外部名稱	gms-company
   應用程式位置	global (全球)

5. 按一下「繼續」。

6. 系統會列出現有的資料儲存庫，請選取上一項子工作建立的 goog_merch_ds 資料儲存庫。

7. 按一下「建立」，即可建立搜尋應用程式。

   搜尋應用程式已建立完畢，並連結資料儲存庫。

8. 現在要測試搜尋應用程式。請在 AI Applications 導覽選單中點選「預覽」。

9. 在「搜尋」欄位輸入 dino。

   系統會列出相關搜尋結果，這些結果來自資料儲存庫中匯入的文件。

   

   注意：如果看到「搜尋結果預覽畫面尚未準備就緒」的錯誤訊息，請稍候片刻再重試。不想等待的話，也可以繼續進行實驗室的下一項工作。

點選「Check my progress」，確認目標已達成。 建立 Vertex AI Search 應用程式。

工作 2：建構及部署後端

Flutter 應用程式的後端會在 Google Cloud 以 Cloud Run 服務的形式執行。這個後端服務會與您在上一步建立的搜尋應用程式整合，根據商品商店資料生成搜尋回覆。後端也會與 Reasoning Engine 代理整合，以便透過 Gemini 利用 AI 生成內容，回覆來自 Flutter 應用程式的查詢。

在這項工作中，您將建構後端 Python 應用程式並部署至 Cloud Run。

設定及檢查後端應用程式

1. 本實驗室已預先佈建以 VSCode 為基礎的 IDE。現在我們要存取 IDE。請從實驗室的 Qwiklabs 憑證面板複製 IDE 服務網址，然後貼入新的瀏覽器無痕視窗。

   

   注意：IDE 服務網址是本實驗室預先佈建的 Cloud Run 服務端點，會透過 Proxy 傳送要求到 code-server VM。這個 IDE 是以 Code Server 建構而成，包含 Flutter、Dart 和 Vim 擴充功能。

   

2. 在 IDE 中開啟終端機。按一下 IDE 導覽選單圖示 ()，依序點選「Terminal」>「New Terminal」。

   注意：請在 IDE 終端機視窗中執行下列步驟中的指令。

3. 本實驗室已預先佈建後端應用程式的初始版本和相關檔案，請從 Cloud Storage 複製後端應用程式資料夾及內容：

   gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/ag-web ~ 注意：如果出現提示訊息，請點選「Allow」貼上剪貼簿中的文字和圖片，然後按下 Enter 鍵。

4. 請在 IDE 終端機視窗中執行以下指令，列出資料夾內容：

   ls ~/ag-web/app

   ag-web/app 資料夾包含後端應用程式的原始碼及其他檔案，建構應用程式並部署到 Cloud Run 時，需要使用這些項目。

5. 指定應用程式的 PROJECT_ID、LOCATION 和 STAGING_BUCKET 設定。

   sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCS_BUCKET/{{{project_0.startup_script.lab_bucket_name|set at lab start}}}/' ~/ag-web/app/app.py

6. 設定後端應用程式，指示應用程式使用先前建立的搜尋資料儲存庫。

   下方指令中的 {YOUR_SEARCH_DATA_STORE_ID} 字串，需要換成搜尋資料儲存庫 ID 的數值。

   記得移除 sed 指令中的大括號「{ }」。

   注意：如需搜尋資料儲存庫 ID 的數值，請在 Cloud 控制台中依序前往「AI Applications」>「資料儲存庫」，點選先前建立的搜尋資料儲存庫名稱，然後複製資料儲存庫 ID (與搜尋引擎 ID 相同)。 sed -i 's/SEARCH_ENGINE_ID/{YOUR_SEARCH_DATA_STORE_ID}/' ~/ag-web/app/app.py

   

7. 接下來我們要在 IDE 中查看程式碼。請點選 IDE 導覽選單中的 ，然後按一下「Open Folder」。

8. 從清單中選取 IDE-DEV/ag-web/ 資料夾，然後按一下「Ok」。

9. 點選「Yes, I trust the authors」來表示您信任程式碼的作者。

10. 在「Explorer」窗格中展開 app 資料夾，然後點選 app.py，在編輯器中開啟檔案。

    後端應用程式的程式碼會執行下列作業：

    • 使用您的實驗室 Google Cloud 專案 ID、區域和 Cloud Storage bucket 初始化 Vertex AI。
    • search_gms() 函式使用 discoveryengine.googleapis.com API 資料儲存庫端點發起搜尋要求，並在網址中使用您先前建立的資料儲存庫 ID。
    • 該函式會用使用者提供的搜尋查詢，搜尋資料儲存庫中的內容，並將結果轉換成 JSON 格式的回覆。
    • 應用程式會使用 flask 將呼叫轉送至個別函式。/ 端點是預設網頁，用於驗證應用程式是否載入成功；/ask_gms 端點則會叫用使用 Vertex AI Search 的 search_gms() 函式。

建構應用程式並部署至 Cloud Run

您可以運用部署指令碼來建構後端應用程式，並部署至 Cloud Run。

1. 在 IDE 中開啟終端機視窗，並切換至後端應用程式資料夾：

   cd ~/ag-web/app

2. 透過 gcloud CLI 進行 Google Cloud 驗證：

   gcloud auth login

3. 輸入 Y 以便繼續操作。

4. 啟動登入流程：按下 Control 鍵 (Windows 和 Linux) 或 Command 鍵 (macOS)，並點按終端機中的連結。

5. 如果系統向您確認是否要開啟外部網站，請點選「Open」。

6. 按一下實驗室學員的電子郵件地址。

7. 系統提示您繼續操作時，請點選「繼續」。

8. 如要讓 Google Cloud SDK 存取您的 Google 帳戶，請詳閱並同意相關條款，然後點按「允許」。

   瀏覽器分頁會顯示您的驗證碼。

9. 按一下「複製」。

10. 返回 IDE 終端機視窗，在顯示「Enter authorization code」的位置貼上驗證碼，然後按下 Enter 鍵。

    您已登入 Google Cloud。

11. 將 deploy.sh 指令碼設為可執行，然後執行該指令碼，在指定的 Cloud Run 區域部署應用程式：

    chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

    應用程式建立完畢並順利部署至 Cloud Run 後，您可以在指令碼輸出內容的結尾看到應用程式的端點網址。這個網址是由指令碼中執行的 gcloud run deploy 指令產生。

    注意：這個指令需要時間執行，請等完成後再繼續下一項工作。

測試後端應用程式

您可以存取應用程式的 Cloud Run 端點，測試功能是否正常。

1. 複製上一步產生的應用程式端點網址，並在新瀏覽器分頁中開啟該網址。

2. 應用程式載入後，首頁會顯示「Welcome to the ag-web backend app」。

3. 在瀏覽器網址列中，將以下路徑附加至網址末端：

   /ask_gms?query=dino

4. 檢查應用程式是否利用先前建立的搜尋資料儲存庫傳回結果。

點選「Check my progress」，確認目標已達成。 建立後端應用程式。

工作 3：設定 Firebase

前端 Flutter 應用程式會使用 Vertex AI for Firebase Dart SDK 來叫用 Gemini API。firebase_vertexai 套件提供這個 SDK，前往 Dart 和 Flutter 應用程式的官方套件存放區 pub.dev 即可取得。

Firebase 是 Google 的後端應用程式開發平台，支援 Android、iOS 等多種平台。

在這項工作中，您將設定 Firebase 並登入 Firebase CLI。在實驗室的後續步驟中，您會將 Flutter 應用程式連結至 Firebase。

設定 Firebase

為了使用 SDK，您需要先設定 Firebase 專案。

1. 在無痕視窗分頁中前往 Firebase 控制台 (https://console.firebase.google.com)。

2. 按一下「建立專案」。

3. 請在頁面底部點選「將 Firebase 新增到 Google Cloud 專案」，將 Firebase 加入實驗室現有的 Google Cloud 專案。

4. 點選「選取 Google Cloud 專案」，然後從清單中選取實驗室專案。

5. 接受條款，然後按一下「繼續」。

6. 為了使用預設計費方案，請按一下「確認方案」。

7. 按一下「繼續」。

8. 停用這個專案的 Google Analytics，然後按一下「新增 Firebase」。

9. 等 Firebase 專案準備就緒，按一下「繼續」。

   您現在能在實驗室 Google Cloud 專案使用 Firebase。

登入 Firebase

1. 在 IDE 終端機視窗中登入 Firebase CLI：

   firebase login --no-localhost

2. 接著要允許 Firebase 收集 CLI 和模擬器回報資訊，請輸入 Y 再按下 Enter 鍵。

3. 記住您的工作階段 ID，然後按照步驟啟動登入流程。按下 Control 鍵 (Windows 和 Linux) 或 Command 鍵 (macOS)，然後點按終端機中的網址。

4. 系統提示您開啟外部網站時，按一下「Open」。

5. 按一下實驗室學員電子郵件 ID。

6. 按一下「繼續」。

7. 請按一下「允許」，授予 Firebase CLI 相關權限。

8. 按一下「Yes, I just ran this command」。

9. 確認工作階段 ID 正確無誤，然後按一下「Yes, this is my session ID」。

10. 按一下「Copy」複製授權碼。

11. 將授權碼貼至 IDE 終端機視窗中提示的位置，然後按下 Enter 鍵。

    現在您已登入 Firebase CLI。

工作 4：建立 Reasoning Engine AI 代理

AI 代理是一種應用程式，會運用大型語言模型 (LLM) 的推論和自動調度管理能力，協調外部工具來達成目標。Vertex AI Agent Builder 是 Google 提供的一套產品和工具，可以在您建立 AI 代理時，協助將 AI 代理連結至您信任的資料來源。

Vertex AI Reasoning Engine (也稱為 LangChain on Vertex AI) 可協助您使用 Vertex AI Agent Builder 建構並部署推論代理。LangChain 是一種熱門的 OSS 工具，常用於建構聊天機器人和 RAG 系統。

Reasoning Engine 為開發人員提供函式呼叫功能，可將大型語言模型 (Gemini) 的輸出內容對應至 Python 函式。Reasoning Engine 與 Vertex AI 的 Gemini 模型 Python SDK 緊密整合，而且與 LangChain 和其他 Python 框架相容。

在這項工作中，您將使用 Vertex AI Workbench 和 Jupyter 筆記本，部署具有 Python 函式的 Reasoning Engine 代理。我們將在實驗室的下一項工作，將這個代理運用於生成式 AI 後端應用程式。

建立 Vertex AI Workbench 執行個體

Vertex AI Workbench 是以 Jupyter 筆記本為基礎的開發環境，支援完整的數據資料學和機器學習工作流程。您可以透過 Vertex AI Workbench 執行個體的 Jupyter 筆記本，與 Vertex AI 和其他 Google Cloud 服務互動。舉例來說，只要使用　Vertex AI Workbench，您就能利用 BigQuery 和 Cloud Storage 整合功能，在 Jupyter 筆記本內存取及探索資料。

Vertex AI Workbench 執行個體已預先安裝一套深度學習套件，支援 TensorFlow 和 PyTorch 框架。

Vertex AI Workbench 筆記本具有彈性且易於擴充，方便您在 Google Cloud 上開發和部署機器學習模型。

1. 首先我們要建立 Workbench 執行個體。請在 Cloud 控制台按一下「導覽選單」圖示 ()，然後依序點選「Vertex AI」和「Workbench」。

2. 如果 Cloud 控制台出現提示，請點選啟用「Notebooks API」。

3. 確認已在「執行個體」分頁選取「執行個體」，然後按一下「建立新項目」。

   

4. 在「新增執行個體」頁面的「名稱」欄位中輸入 my-instance。

5. 其餘設定請保留預設狀態，並按一下「建立」。

   系統會啟動這個新執行個體，並顯示在「執行個體」部分，請等待建立程序完成，再繼續下一步。

   注意：執行個體就緒時，旁邊會顯示綠色勾號。

6. 執行個體就緒後，按一下「Open Jupyterlab」。

   

7. 請點選「Python 3」筆記本，啟動 Python 3 Jupyter 筆記本。

   

複製筆記本檔案

本實驗室已預先佈建用來建構及部署 Reasoning Engine 代理的筆記本。

1. 請將以下程式碼複製到新筆記本的第一個儲存格，把筆記本複製到 JupyterLab 執行個體：

   !gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .

   

2. 選取該儲存格，按一下儲存格選單中的「執行」圖示以執行指令：

   

   這個指令會將 Cloud Storage 中的筆記本複製到 JupyterLab 執行個體。指令執行完畢後，筆記本檔案會列在頂層的根資料夾底下。

   

3. 按兩下資料夾列表中的筆記本檔案，開啟筆記本。系統會在新分頁顯示筆記本內容。

建構及部署 Reasoning Engine 代理

1. 從頭開始依序執行筆記本中所有的程式碼儲存格。執行儲存格的方式是點選其中任一處，再從儲存格選單或頂端的筆記本選單中點選「執行」圖示。

   注意：請等待當前儲存格的指令執行完畢，再執行下一個儲存格。指令執行完畢時，儲存格編號欄位中的星號 (*) 會變成儲存格的編號。 注意：執行儲存格前，請從下方附註確認是否有相關說明或需遵循的步驟。這些說明前面會標示 CELL INSTR。

   a. [CELL INSTR] 重新啟動目前執行階段

   如果出現提示，請在「Kernel Restarting」對話方塊中按一下「確定」。

   b. [CELL INSTR] 設定 Google Cloud 專案資訊並初始化 Vertex AI SDK：

   執行這個儲存格可初始化 Vertex AI SDK。執行前，請先更新實驗室的 project_id、位置和暫存 bucket 設定值：

   PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"

   更新後的儲存格，其中使用範例設定：

   

   c. [CELL INSTR] 定義 Vertex AI Search 的工具函式：

   執行這個儲存格前，請將 GOOGLE_SHOP_VERTEXAI_SEARCH_URL 的值替換成後端應用程式的 Cloud Run 端點網址。

   如需端點網址，請在 Cloud 控制台中前往「Cloud Run」，然後按一下後端應用程式的名稱「ag-web」。複製端點網址的值，替換儲存格中的值。

   

   更新後的儲存格如下，其中顯示後端應用程式的 Cloud Run 範例端點網址：

   

   注意：點選筆記本選單列中的「執行」圖示也能執行儲存格。

2. 執行「Deploy the Agent to the Reasoning Engine runtime」儲存格後，請等待指令執行完畢並建立 Reasoning Engine 代理，再複製 Reasoning Engine ID：

   

   在下一項工作中，您將使用這個 ID 來設定及重新部署後端應用程式。

   注意：這個儲存格最多需要 10 分鐘才能執行完畢，請等待最終輸出內容顯示 ReasoningEngine 已建立，再繼續下一步。

3. 請執行後續兩個儲存格並觀察輸出內容，測試 Reasoning Engine 代理是否正常運作。

   Reasoning Engine 代理已根據查詢輸入內容和 Gemini 模型的輸出內容，成功叫用維基百科或 Vertex AI Search 資料儲存庫。

點選「Check my progress」，確認目標已達成。 部署 Reasoning Engine 代理。

工作 5：強化後端應用程式

接著我們來強化後端應用程式，使應用程式叫用您在上一項工作部署的 Reasoning Engine 代理。

初版後端應用程式只會直接從 Vertex AI Search 擷取結果。新版應用程式則會叫用 Reasoning Engine 代理。這個代理將使用自己的工具和 Gemini 的輸出內容，根據輸入提示從 Vertex AI Search 或維基百科生成回覆。

在這項工作中，您將更新後端應用程式的程式碼，新增額外的進入點。這個進入點將接收查詢要求，並叫用 Reasoning Engine 代理，然後傳回代理的回覆。

更新後端應用程式

1. 在 IDE 終端機視窗執行以下指令，將新進入點的程式碼加到 app.py 檔案中：

   cat << EOF >> ~/ag-web/app/app.py # # Reasoning Engine # NB_R_ENGINE_ID = "REASONING_ENGINE_ID" from vertexai.preview import reasoning_engines remote_agent = reasoning_engines.ReasoningEngine( f"projects/{PROJECT_ID}/locations/{LOCATION}/reasoningEngines/{NB_R_ENGINE_ID}" ) # Endpoint for the Flask app to call the Agent @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF

2. 設定後端應用程式，使應用程式使用先前建立的 Reasoning Engine 代理。

   替換下方指令中的 {YOUR_REASONING_ENGINE_ID} 字串，改成您在前一項工作中，從筆記本儲存格複製的 Reasoning Engine ID，然後在 IDE 終端機視窗執行以下指令。

   記得移除 sed 指令中的大括號「{ }」。

   sed -i 's/REASONING_ENGINE_ID/{YOUR_REASONING_ENGINE_ID}/' ~/ag-web/app/app.py

3. 現在我們要在 IDE 查看程式碼。請按一下 IDE 導覽選單中的 ，然後選取 IDE-DEV/ag-web/app/app.py 檔案。

   強化版後端應用程式：

   • 會使用前一項工作中建立的代理的 REASONING_ENGINE_ID，從 Reasoning Engine 執行階段擷取 remote_agent 的控制代碼。
   • 定義了一個新的 /ask_gemini 端點，並在這個端點中定義 ask_gemini() 函式。
   • 該函式會將使用者在要求中提供的 query 參數傳遞至 Reasoning Engine (remote_agent)，並傳回代理的回覆。

建構後端應用程式並重新部署至 Cloud Run

1. 切換至後端應用程式資料夾：

   cd ~/ag-web/app

2. 執行以下指令碼，在指定的 Cloud Run 區域重新部署應用程式：

   ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

測試後端應用程式

您可以存取應用程式的 Cloud Run 端點，測試功能是否正常。

1. 複製上一步產生的應用程式端點網址，並在新瀏覽器分頁中開啟該網址。

2. 應用程式載入後，首頁會顯示「Welcome to the ag-web backend app」。

3. 在瀏覽器網址列中，將以下路徑附加至網址末端：

   /ask_gemini?query=where can I buy the dino pin

   代理會從您先前建立的 Vertex AI Search 資料儲存庫擷取結果，應用程式再使用這些結果回覆您。

   Chrome Dino 琺瑯別針是 Google Merch Shop 販售的產品，價格 $7.00 美元。您可以在 Google Merch Shop 網站購買這項產品：https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/。

4. 在瀏覽器網址列中，將路徑改成：

   /ask_gemini?query=what is fallingwater

   代理會從您在筆記本設定的 Wikipedia API 擷取回覆，應用程式再使用回覆中的結果回答查詢。

   Fallingwater (落水山莊) 由建築師 Frank Lloyd Wright 於 1935 年設計，位於賓夕法尼亞州西南部，距離匹茲堡東南部約 70 英里。這座房子有一部分建立在瀑布上方，因此聞名。

工作 6：試用 Gemini 2.0 Flash

現在後端應用程式、Vertex AI Search 元件和 Reasoning Engine 代理都已開發並部署完畢，接著就能開始設計及建構 Flutter 前端。

透過這款 Flutter 應用程式，使用者將能上傳相片，並進一步瞭解上傳的相片。應用程式整合了 Gemini，能生成與相片相關的回覆，並由 AI 代理透過對話介面提供回覆。

開發前端應用程式前，您需要定義 Gemini 2.0 Flash 模型傳回的回覆結構。您稍早在實驗室部署的 AI 代理，就是使用這個模型。

在這項工作中，您將傳送提示給 Gemini 2.0 Flash 模型，並查看 JSON 格式的模型回覆。

1. 前往 Cloud 控制台的 Vertex AI Studio，即可找到 Gemini 2.0 Flash。點選「導覽選單」圖示 ，然後依序選取「Vertex AI」>「建立提示」(在「Vertex AI Studio」下方)，即可存取 Vertex AI Studio。

2. 為啟用 Vertex AI Studio 所需的 API，請點選「同意並繼續」。

   注意：Vertex AI Studio 是 Google Cloud 控制台的一項工具，可協助使用者快速測試生成式 AI 模型並建立原型，以便在應用程式使用模型功能。

3. 在「提示」部分，點選「插入媒體」，然後選取「從 Cloud Storage 匯入」。

   

4. 按一下實驗室 bucket 名稱 旁邊的 >。

5. 選取「fallingwater.jpg」圖片檔，按一下「選取」。

   該圖片會上傳至提示輸入框。

6. 現在要傳送提示給模型。請在提示輸入框的圖片下方輸入「這是什麼？」，然後點選「傳送」圖示 ()。

   模型會提供簡短回覆，正確描述圖中物體。

7. 請將文字提示改成以下內容，從模型擷取更多 JSON 格式的資訊：

   這是什麼？請提供這個物體的名稱和說明，越詳細越好。另外，我想透過提問進一步瞭解這個物體，請列出 3 個後續問題。回覆必須是 JSON 格式，包含「name」、「description」和「suggestedQuestions」鍵。

8. 點選「傳送」圖示 。

9. 查看模型生成的 JSON 回覆。

   { "name": "Fallingwater", "description": "This is Fallingwater, a house designed by renowned architect Frank Lloyd Wright. 這棟建築物座落在賓夕法尼亞州西南部鄉間，蓋在熊奔溪瀑布上方，是公認的有機建築傑作，與周圍自然環境完美融合。」 "suggestedQuestions": [ "是誰委託 Frank Lloyd Wright 設計 Fallingwater？", "Fallingwater 的主要建築特色是什麼？", "Fallingwater 是否對外開放？如何參觀？" ] }

   取得 JSON 格式的提示和模型回覆後，即可用這些資料建構 Flutter 應用程式。

   注意：您收到的模型回覆可能與以上內容不同。

工作 7：部署 Flutter 前端應用程式

掌握模型傳回的資料結構，就可以開始建構前端應用程式。

Flutter 是開放原始碼的跨平台應用程式開發框架。使用這套框架編寫的程式碼集，能在 Android、iOS、網頁、macOS、Windows 和 Linux 平台上運作。Flutter 應用程式是使用 Dart 語言開發。

在本實驗室中，您會將「網頁」當成目標平台，因此部署的 Flutter 應用程式，將是能透過瀏覽器存取的網頁應用程式。

在這項工作，您會查看 Flutter 應用程式的程式碼，然後建構應用程式，並以網頁應用程式形式加以執行。

查看 Flutter 應用程式的程式碼集

這款應用程式可讓使用者上傳旅遊景點相片，再利用 Gemini 查詢相關資訊。在本實驗室中，我們將使用已開發完成、透過 Cloud Storage 提供的 Flutter 應用程式。

1. 在 IDE 終端機執行以下指令，下載 Flutter 應用程式的程式碼：

   gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/app ~

2. 請在 IDE 終端機視窗執行以下指令，擷取應用程式專案的依附元件：

   cd ~/app; flutter pub get

3. 現在我們要在 IDE 查看程式碼，請按一下「導覽選單」圖示 ()，然後依序點選「File」和「Open Folder」。

4. 從清單中選取 /home/ide-dev/app/，然後按一下「Ok」。

5. 點選「Yes, I trust the authors」來表示您信任資料夾內檔案的作者。

   以下是 app 資料夾的大致內容：

   資料夾/檔案	說明
   app	專案的根資料夾，內含構成 Flutter 應用程式的子資料夾和檔案。
   android/ios/linux/macos/web/windows	存放各受支援平台執行 Flutter 應用程式所需的檔案，每個平台有各自適用的檔案。
   lib	含有核心應用程式 Dart 檔案，包括功能、路由、資料模型和使用者介面。
   test	含有用於測試應用程式小工具的 Dart 測試程式碼。
   pubspec.yaml	含有應用程式依附元件、Flutter 版本和其他設定
   analysis_options.yaml	含有應用程式靜態分析的設定。

   接著來看這些資料夾中的一些檔案。

6. 在「Explorer」選單中，按一下 /app/lib/models 資料夾，然後點開 metadata.dart 檔案。

   metadata.dart 檔案包含 Flutter 應用程式使用的資料模型。

   class Metadata { String name = ''; String description = ''; List suggestedQuestions = []; // more code follows ... }

   中繼資料物件屬性與 Gemini API 回覆傳回的 JSON 屬性相對應。叫用 fromJson 方法會初始化物件屬性。

7. 在「Explorer」選單，點開 /app/lib/main.dart 檔案。

   這是 Flutter 應用程式的進入點。完成初始化工作後，這個檔案中的程式碼會使用 Material 元件建構應用程式的 UI，並設定應用程式的名稱、主題和路由。

   注意：Material 應用程式的建構是從 MaterialApp 小工具開始，這個小工具會在應用程式的根層級建立多個實用小工具，包括用於管理應用程式各畫面路由的 Navigator。

8. 我們現在要查看應用程式的路由設定。請在「Explorer」選單點開 /app/lib/functionality/routing.dart 檔案。

   該檔案中的程式碼定義了應用程式的 /、/chat 和 /settings 路由。

   Flutter 運用了「小工具」的概念，小工具是用於建構應用程式的宣告式類別。在 Flutter 中，您可以將不同小工具組合成更複雜的小工具，形成小工具樹狀結構，以此建立版面配置。如要進一步瞭解如何在 Flutter 中建構 UI，請參閱這份說明文件。

9. 接著來看構成應用程式 UI 畫面和功能的程式碼。在「Explorer」選單中，點開 /app/lib/ui/screens/quick_id.dart 檔案。

   這個檔案包含用於建構應用程式小工具的類別，比如建構應用程式主頁面的 GenerateMetadataScreen 類別。這個類別是從 routing.dart 檔案中定義的 / 路徑叫用。透過此 UI，使用者可以上傳電腦或行動裝置中的圖片，或使用裝置相機拍照。

   

   這個應用程式中還有設定和對話頁面的 UI 畫面，兩者分別是在 app/lib/ui/screens/ 資料夾下的 settings.dart 和 chat.dart 檔案中實作。

   在初始化期間，應用程式會透過 Vertex AI for Firebase Dart SDK 擷取 Gemini 生成式 AI 模型的執行個體，以供後續使用。這項機制是在 _GenerateMetadataScreenState 類別中實作。

   void initState() { super.initState(); model = FirebaseVertexAI.instance.generativeModel( model: geminiModel, generationConfig: GenerationConfig( temperature: 0, responseMimeType: 'application/json', ), ); }

   使用者選取圖片後，應用程式會使用該圖片和文字提示叫用 Vertex AI Gemini API。這段文字提示與您先前測試 Gemini 2.0 Flash 模型時使用的提示相同。

   _sendVertexMessage() 方法包含傳送提示的程式碼，以下是部分程式碼：

   Future _sendVertexMessage() async { ... final messageContents = Content.multi( [ TextPart( '這張相片的主體是什麼？請提供相片主體的名稱，盡可能詳細說明，並列出 3 個有助深入瞭解此主體的建議問題。使用 JSON 格式回答，並使用「name」、「description」和「suggestedQuestions」鍵。'), DataPart('image/jpeg', _image!), ], ); var response = await model.generateContent([messageContents]); var text = response.text; if (text == null) { _showError('No response from API.'); return; } else { var jsonMap = json.decode(text); if (mounted) { context.read().updateMetadata(Metadata.fromJson(jsonMap)); } } ... }

   應用程式隨後會將模型生成的 JSON 回覆解碼，擷取 name、description 和 suggestedQuestions，並將這些資訊儲存於本機及顯示在 UI 中。

將 Flutter 應用程式連結至 Firebase

1. 切換至 app 根專案資料夾，並啟用 flutterfire_cli 套件：

   dart pub global activate flutterfire_cli

2. 請執行以下指令，向 Firebase 註冊 Flutter 應用程式：

   flutterfire configure --project={{{project_0.project_id|set at lab start}}}

   執行指令後，firebase_options.dart 設定檔會新增至 Flutter 專案的 lib 資料夾中。

3. 再來我們要設定應用程式支援的平台，請按下空白鍵，取消選取「網頁」以外的所有平台。您可以使用方向鍵捲動瀏覽平台，然後按下 Enter 鍵。

   您的 Flutter 網頁應用程式已完成註冊，可與 Firebase 搭配使用。

設定 Flutter 應用程式的對話功能

這款 Flutter 應用程式提供對話功能，使用者可進一步瞭解自己上傳到應用程式的圖片，或是請應用程式從其他外部資料來源提供資訊，這類資訊可能會比較新。為了實現這項功能，我們需要將 Gemini 模型連結至這些資料來源，這個動作又稱為建立基準。

為此，Flutter 應用程式需要整合您在先前步驟部署的 Reasoning Engine 代理。整合方式是將 Flutter 應用程式連結至您建構並部署至 Cloud Run 的後端應用程式端點。

1. 首先，請擷取後端應用程式的 Cloud Run 端點主機名稱，並將名稱儲存在環境變數中。在 IDE 終端機視窗執行以下指令：

   BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST

2. 以 Flutter 應用程式來說，後端應用程式的端點是在 ~/app/lib/config.dart 檔案中設定。更新檔案中的設定項目：

   sed -i "s/cloudRunHost = .*/cloudRunHost = '$BACKEND_APP_HOST';/" ~/app/lib/config.dart

3. 接下來我們要確認變更內容。請在 IDE 的「Explorer」選單中點開 IDE-DEV/app/lib/config.dart 檔案。確認 cloudRunHost 設定項目值已依下列範例更新。

   

   注意：這個值應與先前設定的 BACKEND_APP_HOST 環境變數值一致。

查看對話功能程式碼

接著來看在 Flutter 應用程式中實作對話功能的程式碼。

1. 在 IDE 的「Explorer」選單，點開 /app/lib/ui/screens/chat.dart 檔案。

   ChatPage 類別會在 UI 上建構對話頁面的 Flutter 小工具。按下「Tell me more」按鈕時，UI 會顯示這個頁面。

   

   這款應用程式運用了 flutter_chat_ui_package 來建構對話 UI。這個套件會實作大部分的對話樣板程式碼，您也可自訂這些程式碼。build() 方法使用 Chat 類別來建構小工具。

   Widget build(BuildContext context) { ... Chat( typingIndicatorOptions: TypingIndicatorOptions( typingUsers: typingUsers, ), listBottomWidget: suggestionsWidget, messages: _messages, onSendPressed: _handleSendPressed, showUserAvatars: true, showUserNames: true, user: _user, theme: DefaultChatTheme( receivedMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSurface, ), sentMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSecondary, ), userAvatarNameColors: [ Theme.of(context).colorScheme.primary, ], backgroundColor: Theme.of(context).colorScheme.surfaceContainerHigh, primaryColor: Theme.of(context).colorScheme.primary, secondaryColor: Theme.of(context).colorScheme.surface, ), ), ... }

   listBottomWidget 用於顯示上一個 Gemini 呼叫回覆中傳回的建議問題清單，讓使用者能選擇問題做為對話訊息。

   使用者在對話視窗按下「傳送」時，系統會叫用 _handleSendPressed() 回呼方法。這個方法會建立一則新訊息，並將訊息加入訊息清單，然後透過 askAgent() 方法將訊息傳送至後端。

2. 捲動程式碼，找到 askAgent() 方法。

   askAgent() 方法會向後端應用程式的 Cloud Run 端點 (/ask_gemini 網址) 傳送要求，使用 Reasoning Engine 代理叫用 Gemini。要求查詢參數包含先前呼叫 Gemini 時傳回的圖片 name 和 description，以及使用者的訊息。

   Future askAgent( String name, String description, String question) async { var query = 'The photo is $name. $description. $question.'; var endpoint = Uri.https(cloudRunHost, '/ask_gemini', {'query': query}); var response = await http.get(endpoint); if (response.statusCode == 200) { var responseText = convert.utf8.decode(response.bodyBytes); return responseText.replaceAll(RegExp(r'\*'), ''); } return '抱歉，我沒辦法回答這個問題。'; }

   接著，發出叫用的函式 _sendMessageToAgent() 會把後端的回覆加入對話視窗的訊息清單。

部署 Flutter 應用程式

Flutter 應用程式設定完成後，您就可以著手建構並部署應用程式。在本實驗室中，為了讓應用程式以網頁應用程式的形式運作，我們將使用 Flutter 的網頁應用程式開發伺服器 Fwr。

1. 確認已進入 Flutter 應用程式資料夾。在 IDE 終端機視窗執行以下指令：

   cd ~/app

2. 請執行以下指令，擷取應用程式專案依附元件：

   flutter pub get

3. 請執行以下指令來建構專案並啟動網路伺服器：

   fwr

   等待伺服器啟動並提供 Flutter 應用程式。啟動後，指令輸出內容大致如下：

   

點選「Check my progress」，確認目標已達成。 設定 Firebase 專案和 Flutter 應用程式

工作 8：測試 Flutter 應用程式

接著來測試 Flutter 應用程式的功能。

下載測試用圖片

1. 為了測試應用程式，您需要先將一張圖片下載並儲存到電腦上。請複製網址，然後在另一個瀏覽器分頁中開啟圖片：

   Fallingwater 圖片

2. 在圖片上按一下滑鼠右鍵，然後存到電腦。

3. 重複上述步驟，從下列網址下載 Google Chrome 恐龍別針的圖片：

   Google Chrome Dino 別針圖片

測試應用程式

1. 我們現在要存取 Flutter 應用程式。請從 Qwiklabs 憑證面板複製「Live Server」網址，然後在新的瀏覽器分頁中貼上。

2. 等待應用程式載入完畢，接著點選「Choose from Library」，並上傳 Fallingwater 的圖片。

   上傳圖片後，應用程式會叫用 Vertex AI Gemini API，生成包含圖片名稱和說明的回覆，並顯示在應用程式 UI 中。

   

   Gemini 模型回覆的內容，可能需要幾秒鐘才會填入到應用程式 UI 的名稱和說明欄位。

   注意：如果收到權限遭拒的錯誤訊息，請忽略訊息並點選「Ok」按鈕繼續。按一下「Remove image」，然後重新上傳圖片。

3. 按一下「Tell me more」。

   對話頁面會載入並顯示先前呼叫 Gemini API 時，回覆中傳回的建議問題。

   

   注意：如果建議問題未出現，請重新整理頁面，然後重複前兩個步驟來上傳圖片及取得建議問題。

4. 點選其中一個建議問題，查看對話代理的回覆。

   對話代理會向後端應用程式的 Cloud Run 端點發出 HTTPS 呼叫，接著端點會叫用 Reasoning Engine 代理，代理便會使用 Gemini，以維基百科的資訊回覆。

使用商品資料測試應用程式

1. 在對話 UI 中，按一下「Remove image」。

2. 按一下「Choose from Library」，上傳稍早儲存的 Google Chrome Dino 別針圖片。

   上傳圖片後，應用程式會叫用 Vertex AI Gemini API，生成包含圖片名稱和說明的回覆，並顯示在應用程式 UI 中。

3. 按一下「Tell me more」。

4. 在對話訊息方塊中輸入以下內容：

   哪裡買得到這款別針？

   對話代理會向後端應用程式的 Cloud Run 端點發出 HTTPS 呼叫，接著端點會叫用 Reasoning Engine 代理，代理便會使用 Gemini，以 Vertex AI Search 資料儲存庫的資訊回覆。

   

5. (非必要) 如要查看 Flutter 應用程式切換為行動裝置版面配置的效果，請將瀏覽器視窗調整至接近行動裝置的大小：

   

   這表示 Flutter 應用程式能根據螢幕或視窗大小的變化做出調整。您可以運用 Flutter 提供的小工具和套件，讓應用程式能因應裝置設定變更，滿足不同顯示需求。

關閉研究室

如果您已完成研究室，請按一下「End Lab」(關閉研究室)。Qwiklabs 會移除您已用的資源，並清除使用帳戶。

您可以為研究室的使用體驗評分。請選取合適的星級評等並提供意見，然後按一下「Submit」(提交)。

星級評等代表您的滿意程度：

• 1 星 = 非常不滿意
• 2 星 = 不滿意
• 3 星 = 普通
• 4 星 = 滿意
• 5 星 = 非常滿意

如果不想提供意見回饋，您可以直接關閉對話方塊。

如有任何想法、建議或指教，請透過「Support」(支援) 分頁提交。

恭喜！

您在本實驗室中完成了以下工作：

• 在 Google Cloud 控制台，使用 Vertex AI Agent Builder 建立搜尋資料儲存庫和搜尋應用程式。
• 使用 Vertex AI Workbench 部署 Reasoning Engine 代理。
• 建構整合 Vertex AI Search 與 Reasoning Engine 代理的 Python 應用程式。
• 將應用程式部署至 Cloud Run，做為 Flutter 應用程式的後端。
• 設定 Firebase 專案並連結至 Flutter 應用程式。
• 查看 Flutter 應用程式的程式碼，瞭解其中部分功能。
• 執行並測試 Flutter 應用程式。

後續行動/瞭解詳情

• Gemini for Google Cloud 總覽
• Vertex AI Workbench
• Vertex AI Studio
• Firebase

Copyright 2024 Google LLC 保留所有權利。Google 和 Google 標誌是 Google LLC 的商標，其他公司和產品名稱則有可能是其關聯公司的商標。