在 AI 時代建構應用程式

1. 總覽

在本實驗室中,您將使用 Google 的生成式 AI 產品,在 Gemini Cloud Assist 的協助下,在 Google Cloud 中建構基礎架構,使用 Data Canvas 的自然語言 SQL 功能查詢 BigQuery 資料,並在 Colab Enterprise Jupyter 筆記本和 Eclipse Theia (Visual Studio Code) 中,透過 Gemini Code Assist 編寫程式碼,以及在 Vertex AI Agent Builder 中,整合以 Cloud Storage 和 BigQuery 基礎來源建構的 AI 搜尋和聊天功能。

我們的目標是建立名為 AI Recipe Haven 的食譜和烹飪網站。這個網站將使用 Python 和 Streamlit 建構,並包含兩個主要網頁。我們將使用 Gemini 和 Vertex AI Agent Builder 建立 Cooking Advice 聊天機器人,並將相關內容連結至一組食譜,提供烹飪建議和回答烹飪相關問題。食譜搜尋功能將成為由 Gemini 提供內容的搜尋引擎,這次的搜尋內容會以 BigQuery 食譜資料庫為基礎。

如果您在本練習的任何程式碼中卡住,所有程式碼檔案的解決方案都位於練習 GitHub 存放區的 solution 分支中。

目標

本實驗室將說明如何執行下列工作:

  • 啟用及使用 Gemini Cloud Assist
  • 在 Vertex AI Agent Builder 中為烹飪建議聊天機器人建立搜尋應用程式
  • 在 Colab Enterprise 筆記本中載入及清理資料,並透過 Gemini Code Assist 提供的協助
  • 在 Vertex AI Agent Builder 中為食譜產生器建立搜尋應用程式
  • 在 Gemini 的協助下,勾勒出核心 Python 和 Streamlit 網頁應用程式
  • 將網頁應用程式部署至 Cloud Run
  • 將「烹飪建議」頁面連結至我們的食譜搜尋 Agent Builder 應用程式
  • (選用) 將食譜搜尋頁面連結至食譜搜尋 Agent Builder 應用程式
  • (選用) 探索最終應用程式

2. 先決條件

  1. 如果您還沒有 Google 帳戶,請務必建立 Google 帳戶
    • 請改用個人帳戶,而非公司或學校帳戶。工作和學校帳戶可能有限制,導致您無法啟用本實驗室所需的 API。

3. 專案設定

  1. 登入 Google Cloud 控制台
  2. 在 Cloud 控制台中啟用帳單
    • 完成本研究室所需的 Cloud 資源費用應低於 $1 美元。
    • 您可以按照本實驗室課程結尾的步驟刪除資源,避免產生其他費用。
    • 新使用者可享有價值 $300 美元的免費試用期
    • 您是否要參加虛擬實作研究室活動?你可能會獲得 $5 美元的抵免額
  3. 建立新專案或選擇重複使用現有專案。
  4. 在 Cloud Billing 的「我的專案」
      中確認已啟用計費功能。
    • 如果新專案的 Billing account 欄顯示 Billing is disabled,請按照下列步驟操作:
      1. 按一下 Actions 欄中的三點圖示
      2. 按一下「變更帳單」
      3. 選取要使用的帳單帳戶
    • 如果您參加的是實體活動,帳戶名稱可能會是「Google Cloud Platform 試用帳單帳戶」

4. 啟用並使用 Gemini Cloud Assist

在這項工作中,我們將啟用並使用 Gemini Cloud Assist。在 Google Cloud 主控台中作業時,Gemini Cloud Assist 可提供建議,協助您建構、設定及監控 Google Cloud 基礎架構,甚至還能建議 gcloud 指令和編寫 Terraform 指令碼。

  1. 如要啟用 Cloud Assist,請點選 Cloud 控制台 UI 頂端的搜尋方塊,然後選取「Ask Gemini」或「Ask Gemini for Cloud 控制台」
  2. 捲動至頁面中的「Required API」(必要 API) 部分,然後啟用 Gemini for Google Cloud API。
  3. 如果沒有立即看到即時通訊介面,請按一下「開始對話」。請先請 Gemini 說明使用 Cloud Shell 編輯器的好處。請花幾分鐘時間查看系統產生的回覆。
  4. 接著,請詢問 Agent Builder 的優點,以及如何協助生成回覆。
  5. 最後,我們來看看比較結果。在 Google Cloud 控制台的 Gemini 即時通訊視窗中,提出下列問題:
    What are the major steps to creating a search app grounded in a GCS data source using Vertex AI Agent builder?
    

5. 在 Vertex AI Agent Builder 中為烹飪建議聊天機器人建立搜尋應用程式

我們正在建構的網站將設有烹飪建議頁面,其中包含聊天機器人,可協助使用者找到烹飪相關問題的解答。這項服務將由 Gemini 提供支援,並以包含 70 本公版食譜的來源為基礎。這些食譜會做為 Gemini 回答問題時的資料來源。

  1. 使用 Cloud 控制台搜尋方塊前往「Vertex AI」。在資訊主頁中,按一下「啟用所有建議的 API」。請稍候片刻。如果您看到彈出式視窗,指出需要啟用 Vertex AI API,請一併啟用該 API。啟用 API 後,您可以繼續進行下一個步驟。
  2. 使用搜尋功能前往「Agent Builder」,然後點選「Continue and Activate the API」
  3. 如同 Gemini 先前在建議中提到的,在 Agent Builder 中建立搜尋應用程式時,請先建立權威資料來源。使用者搜尋時,Gemini 會瞭解問題,並知道如何撰寫智慧回覆,但會從基準來源尋找回覆中使用的資訊,而不是從自身知識庫擷取。請從左側選單前往「資料儲存庫」和「建立資料儲存庫」
  4. 我們用於提供烹飪建議的公共領域食譜目前位於外部專案的 Cloud Storage 值區中。選取 Cloud Storage 來源類型。
  5. 請查看與我們要匯入的資訊類型相關的預設選項,但請勿變更。請將匯入類型設為「資料夾」,並使用以下資料夾路徑:labs.roitraining.com/labs/old-cookbooks,然後點選「繼續」
  6. 為資料儲存庫命名:old-cookbooks。按一下「編輯」,然後將 ID 變更為 old-cookbooks-id,並建立資料儲存庫。

Vertex AI Agent Builder 支援多種應用程式類型,而資料儲存庫則是每個應用程式的真實來源。搜尋應用程式適合用於一般用途和搜尋。Chat 應用程式適用於 Dataflow 驅動的聊天機器人/語音機器人應用程式中的生成式流程。推薦應用程式有助於建立更完善的推薦引擎。代理程式應用程式則可用來建立由生成式 AI 驅動的代理程式。最終,Agent 可能會根據我們想要執行的操作提供最佳服務,但由於產品目前處於預覽階段,我們會繼續使用搜尋應用程式類型。

  1. 使用左側選單前往「應用程式」,然後按一下「建立新應用程式」
  2. 在「搜尋網站」資訊卡上,按一下「建立」。將應用程式命名為 cookbook-search。按一下「編輯」,然後將應用程式 ID 設為 cookbook-search-id。將公司設為 Google,然後按一下「繼續」
  3. 檢查幾個步驟前建立的 old-cookbooks 資料儲存庫,然後建立搜尋應用程式。

檢查「活動」分頁時,你可能會發現食譜仍在匯入及建立索引。代理程式建構工具需要 5 分鐘以上,才能為我們提供的 70 本食譜中的數千個網頁建立索引。在運作期間,我們來為食譜產生器載入及清理一些食譜資料庫資料。

6. 在 Colab Enterprise 筆記本中載入及清理資料,並透過 Gemini Code Assist 提供的協助

Google Cloud 提供幾種主要方式,讓您使用 Jupyter Notebook。我們將使用 Google 最新推出的 Colab Enterprise。有些人可能熟悉 Google 的 Colab 產品,這項產品通常由希望在免費環境中嘗試 Jupyter 筆記本的個人和機構使用。Colab Enterprise 是 Google Cloud 的商業產品,可與其他 Google 雲端產品完全整合,充分發揮 GCP 環境的安全性和法規遵循功能。

Colab Enterprise 提供的其中一項功能,就是與 Google 的 Gemini Code Assist 整合。您可以在多個不同的程式碼編輯器中使用 Code Assist,這項功能可在您編寫程式碼時提供建議,並提供無縫的內嵌建議。我們會在處理食譜資料時,運用這項生成式助理。

  1. 使用搜尋功能前往 Colab Enterprise,然後點選「建立筆記本」。如果您收到實驗新版 Colab 功能的提案,請略過。如要啟動 Notebook 的運算能力,請按一下新 Notebook 右上角的「連線」連線
  2. 依序點選「File」 >「Rename」,將筆記本重新命名為 Data Wrangling三點重新命名
  3. 按一下「+ 文字」建立新的文字方塊,然後使用向上箭頭將文字方塊移至頁面的第一個儲存格。+ 文字和向上箭頭
  4. 編輯文字方塊並輸入:
    # Data Wrangling
    
    Import the Pandas library
    
  5. 在您剛建立的文字區塊下方的程式碼區塊中,開始輸入 imp,Gemini Code Assist 應會以灰色顯示建議的其餘匯入項目。按下 Tab 鍵即可接受建議。
    import pandas as pd
    
  6. 在匯入程式碼方塊下方,建立另一個文字方塊,然後輸入:
    Create a Pandas DataFrame from: gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv. View the first few records.
    
  7. 建立及編輯另一個程式碼區塊。再次開始輸入 df =,並查看 Gemini Code Assistant 產生的程式碼。如果您在產生的建議上方看到 Python 關鍵字的自動完成下拉式清單,請按下 Escape 鍵,查看淺灰色的建議程式碼。再次按下 Tab 鍵即可接受建議。如果建議內容未包含 head() 函式呼叫,請新增該呼叫。
    df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
    df.head()
    
  8. 點選第一個程式碼儲存格 (您在其中匯入 Pandas),然後使用「指令」選單或鍵盤執行所選儲存格。在鍵盤上,按下 Shift + Enter 鍵可執行儲存格,並將焦點轉移至下一個儲存格,並視需要建立儲存格。等待單元執行完畢後再繼續。注意:如果單元尚未執行,左側會顯示 [ ]。在執行單元格時,您會看到旋轉的動畫。儲存格完成後,畫面上會顯示數字,例如 [13]。
  9. 執行載入 CSV 至 DataFrame 的儲存格。請等待檔案載入,然後檢查前五列資料。這是我們要載入至 BigQuery 的食譜資料,最終會用於建立食譜產生器。
  10. 建立新的程式碼區塊,並輸入以下註解。輸入註解後,請移至下一行程式碼,您應該會收到建議 df.columns。接受後執行儲存格。
    # List the current DataFrame column names
    
    我們剛剛示範了在 Jupyter 筆記本中,您可以透過 Gemini Code Assist 取得協助的兩種方式:程式碼儲存格上方的文字儲存格,或程式碼儲存格內的註解。程式碼單元格中的註解在 Jupyter 筆記本中運作良好,但這個方法也適用於任何支援 Google Gemini Code Assist 的 IDE。
  11. 我們來清理一下資料欄。將資料欄 Unnamed: 0 重新命名為 id,並將 link 重新命名為 uri。使用所選提示 > 程式碼技巧建立程式碼,然後在滿意後執行儲存格。
    # Rename the column 'Unnamed: 0' to 'id' and 'link' to 'uri'
    df.rename(columns={'Unnamed: 0': 'id', 'link': 'uri'}, inplace=True)
    
  12. 移除 sourceNER 欄,並使用 head() 查看前幾列。請再次請 Gemini 提供協助。執行最後兩行程式碼,並查看結果。
    # Remove the source and NER columns
    df.drop(columns=['source', 'NER'], inplace=True)
    df.head()
    
  13. 我們來看看資料集中有多少筆記錄。再次強調,請先選擇要使用的提示技巧,看看 Gemini 是否能協助您產生程式碼。
    # Count the records in the DataFrame
    df.shape # count() will also work
    
  14. 223 萬筆記錄可能比我們有時間處理的食譜還多。在今天的練習中,Agent Builder 的索引處理程序可能會耗費太多時間。我們可以採取折衷做法,抽樣 150,000 個食譜,並以此做為基礎。使用提示 > 程式碼方法擷取樣本,並儲存在名為 dfs 的新 DataFrame 中 (s 代表小)。
    # Sample out 150,000 records into a DataFrame named dfs
    dfs = df.sample(n=150000)
    
  15. 食譜來源資料現已可載入 BigQuery。在載入資料前,請前往 BigQuery,並準備資料集來儲存資料表。在 Google Cloud 控制台中,使用搜尋框前往「BigQuery」BigQuery。您可以按一下 BigQuery 的滑鼠右鍵,然後在新瀏覽器分頁中開啟。
  16. 如果尚未顯示,請使用 Cloud 控制台右上方的 Gemini 標誌開啟 Gemini AI 對話面板。如果系統再次要求您啟用 API,請按下啟用或重新整理頁面。執行提示:What is a dataset used for in BigQuery?探索回應問題後,How can I create a dataset named recipe_data using the Cloud Console?請將結果與下列幾個步驟進行比較。開啟 Gemini Cloud Assist
  17. 在 BigQuery「Explorer」窗格中,按一下專案 ID 旁邊的三點「查看動作」選單。接著選取「建立資料集」探索 View 動作
  18. 提供 recipe_data 的資料集和 ID。將位置類型保留為「US」,然後點選「Create Dataset」。如果您收到資料集已存在的錯誤訊息,請直接繼續。在 BigQuery 中建立資料集後,請切換回 Notebook 並執行插入作業。
  19. 切換回 Colab Enterprise 中的資料處理筆記本。在新的程式碼儲存格中,建立名為 project_id 的變數,並用於儲存目前的專案 ID。請在這些操作說明的左上方 (「End Lab」按鈕下方) 查看目前的專案 ID。您也可以在 Cloud 控制台首頁上找到這項資訊。將值指派給 project_id 變數,然後執行儲存格。
    # Create a variable to hold the current project_id
    project_id='YOUR_PROJECT_ID'
    
  20. 使用提示 > 程式碼方法建立程式碼區塊,將 DataFrame dfs 插入剛才建立的資料集 recipe_data 中名為 recipes 的資料表。執行儲存格。
    dfs.to_gbq(destination_table='recipe_data.recipes', project_id=project_id, if_exists='replace')
    

7. 在 Vertex AI Agent Builder 中為食譜產生器建立搜尋應用程式

很好,現在我們已建立食譜資料表,接下來讓我們使用該資料表,為食譜產生器建立可靠的資料來源。我們會採用類似於烹飪聊天機器人的方法。我們將使用 Vertex AI Agent Builder 建立資料儲存庫,然後將其用作搜尋應用程式的真實來源。

如有需要,您可以透過 Google Cloud 控制台向 Gemini 詢問,以便在建立 Agent Builder 搜尋應用程式時提醒您相關步驟,或是按照下列步驟操作。

  1. 使用搜尋功能前往「Agent Builder」。開啟「資料儲存庫」並點選「建立資料儲存庫」。這次請選取 BigQuery Data Store 類型。
  2. 在表格選取儲存格中,按下「Browse」並搜尋 recipes。選取表格旁的圓形按鈕。如果您看到其他 qwiklabs-gcp-... 專案的食譜,請務必選取屬於您專案的食譜。注意:如果您點選 recipes 而非旁邊的單選按鈕,系統會在瀏覽器中開啟新分頁,並帶您前往 BigQuery 的資料表總覽頁面。只要關閉瀏覽器分頁,然後在 Agent Builder 中選取圓形按鈕即可。
  3. 查看其餘的預設選項 (但請勿變更),然後按一下「繼續」
  4. 在結構定義檢查頁面中,請查看初始預設設定,但不要變更任何設定。繼續
  5. 命名資料儲存庫 recipe-data。編輯資料儲存庫 ID,並將其設為 recipe-data-id建立資料儲存庫。
  6. 使用左側導覽選單前往「應用程式」,然後點選「建立新應用程式」
  7. 在「搜尋網站」資訊卡上,按一下「建立」。將應用程式命名為 recipe-search,然後點選「編輯」,將 ID 設為 recipe-search-id。將公司名稱設為 Google,然後按一下「繼續」
  8. 這次請檢查「recipe-data」資料來源。建立應用程式。

資料庫表格需要一段時間才能建立索引。在等待期間,我們來試試 BigQuery 的新資料畫布,看看能否找到一或兩個有趣的食譜。

  1. 使用搜尋方塊前往「BigQuery」BigQuery。在 BigQuery Studio 的頂端,按一下最右邊分頁旁的向下箭頭,然後選取「資料畫布」。將地區設為 us-central1開啟資料畫布
  2. 按一下「搜尋資料」。在資料資訊圖搜尋框中搜尋 recipes,按下 Enter/Return 進行搜尋,然後點選資料表名稱旁的「Add to canvas」按鈕。
  3. 系統會將食譜資料表的視覺化呈現方式載入 BigQuery 資料畫布。您可以探索資料表的結構定義、預覽資料表中的資料,以及查看其他詳細資料。在表格表示法下方,按一下「查詢」
  4. 畫布會載入大致相同的 BigQuery 查詢對話方塊,但有一個額外的功能:查詢視窗上方有一個文字方塊,可用來提示 Gemini 提供協助。我們來看看是否能在範例中找到一些蛋糕食譜。執行下列提示 (輸入文字並按下 Enter/Return 觸發 SQL 產生作業):
    Please select the title and ingredients for all the recipes with a title that contains the word cake.
    
  5. 查看系統產生的 SQL。確認無誤後,請執行查詢。
  6. 還不錯!歡迎在繼續之前,嘗試使用其他提示和查詢。進行實驗時,請嘗試使用較籠統的提示,瞭解哪些做法有效,哪些做法無效。舉例來說,以下提示:
    Do I have any chili recipes?
    
    (別忘了執行新的查詢) 會傳回辣椒食譜清單,但不包含食材,直到我將其修改為:
    Do I have any chili recipes?  Please include their title and ingredients.
    
    (是的,我會在提示時說「請」。媽媽一定會很驕傲)。我發現其中一個辣椒醬食譜含有蘑菇,但誰會想在辣椒醬中加入蘑菇呢?我請 Gemini 協助我排除這些食譜。
    Do I have any chili recipes?  Please include their title and ingredients, and ignore any recipes with mushrooms as an ingredient.
    

8. 開啟 Cloud Shell 編輯器

  1. 前往 Cloud Shell 編輯器
  2. 如果終端機未顯示在畫面底部,請按照下列步驟開啟:
    • 按一下漢堡選單 漢堡選單圖示
    • 按一下「Terminal」
    • 按一下「New Terminal」在 Cloud Shell 編輯器中開啟新的終端機
  3. 在終端機中,使用以下指令設定專案:
    • 格式:
      gcloud config set project [PROJECT_ID]
      
    • 範例:
      gcloud config set project lab-project-id-example
      
    • 如果忘記專案 ID,請按照下列步驟操作:
      • 您可以使用下列指令列出所有專案 ID:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
        
      在 Cloud Shell 編輯器終端機中設定專案 ID
  4. 如果出現授權提示訊息,請點選「授權」繼續操作。點選即可授權 Cloud Shell
  5. 您應該會看到下列訊息:
    Updated property [core/project].
    
    如果您看到 WARNING 並收到 Do you want to continue (Y/N)? 要求,表示您可能輸入的專案 ID 有誤。按下 NEnter 鍵,然後再次嘗試執行 gcloud config set project 指令。

9. 啟用 API

在終端機中啟用 API:

gcloud services enable \
  compute.googleapis.com \
  sqladmin.googleapis.com \
  run.googleapis.com \
  artifactregistry.googleapis.com \
  cloudbuild.googleapis.com \
  networkconnectivity.googleapis.com \
  servicenetworking.googleapis.com \
  cloudaicompanion.googleapis.com

如果出現授權提示訊息,請點選「授權」繼續操作。點選即可授權 Cloud Shell

這個指令可能需要幾分鐘才能完成,但最終應該會顯示類似以下的成功訊息:

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

10. 在 Gemini 的協助下,勾勒出核心 Python 和 Streamlit 網頁應用程式

Vertex AI Agent Builder 資料儲存庫已完成索引,搜尋應用程式也即將上線,接下來我們就來建構網頁應用程式吧!

我們會在工作時使用 Gemini Code Assist。如要進一步瞭解如何在 Visual Studio Code 中使用 Gemini Code Assist,請參閱這份說明文件

  1. 在 Cloud Shell 編輯器終端機中,執行下列指令,複製食譜應用程式存放區。
    git clone https://github.com/haggman/recipe-app
    
  2. 執行這項指令,即可在 Cloud Shell 編輯器中開啟應用程式資料夾。
    cloudshell open-workspace recipe-app/
    
  3. 在我們探索複製的資料夾並開始處理網頁應用程式之前,必須先讓編輯器的 Cloud Code 外掛程式登入 Google Cloud,並啟用 Gemini。我們現在就來瞭解。在編輯器左下方,點選「Cloud Code - Sign in」。如果沒有看到連結,請稍候片刻,然後再檢查一次。Cloud Code - 登入
  4. 終端機視窗會顯示一組長網址。在瀏覽器中開啟網址,然後按照步驟操作,授予 Cloud Code 存取 Google Cloud 環境的權限。在最後一個對話方塊中,請複製驗證碼,然後貼回 Cloud Shell 編輯器瀏覽器分頁中等候的終端機視窗。
  5. 過幾秒後,編輯器左下方的 Cloud Code 連結會變更為「Cloud Code - No Project」。按一下新的連結,選取專案。指令面板應會在編輯器頂端開啟。按一下「選取 Google Cloud 專案」,然後選取專案。幾分鐘後,編輯器左下方的連結會更新,顯示專案 ID。這表示 Cloud Code 已成功連結至您的工作專案。
  6. 將 Cloud Code 連結至專案後,您現在就可以啟用 Gemini Code Assist。在編輯器介面的右下方,按一下 Gemini 標誌旁的叉號。Gemini Chat 窗格會在編輯器左側開啟。按一下「選取 Google Cloud 專案」。指令區塊面板開啟後,請選取專案。如果您已正確完成步驟 (且 Google 未變更任何內容),現在應該會看到啟用的 Gemini 對話視窗。已停用 Gemini
  7. 很好,終端機、Gemini 即時通訊和 Cloud Code 設定都已完成,請開啟「Explorer」分頁,花幾分鐘時間探索目前專案中的檔案。Explorer
  8. 在檔案總管中開啟 requirements.txt 檔案進行編輯。切換至 Gemini 對話方塊,然後詢問:
    From the dependencies specified in the requirements.txt file, what type of application are we building?
    
  9. 我們會使用 Python 和 Streamlit 建構互動式網頁應用程式,與 Vertex AI 和 Discovery Engine 互動,真是太棒了。我們先來瞭解網頁應用程式元件。如 Gemini 所述,Streamlit 是一個架構,可用於以 Python 建構資料導向的網頁應用程式。請問:
    Does the current project's folder structure seem appropriate for a Streamlit app?
    
    這就是 Gemini 容易發生問題的地方。Gemini 可以存取您目前在編輯器中開啟的檔案,但實際上無法查看整個專案。你可以試著提出以下指令:
    Given the below, does the current project's file and folder structure seem appropriate for a Streamlit app?
    - build.sh
    - Home.py
    - requirements.txt
    - pages
    -- Cooking_Advice.py
    -- Recipe_Search.py
    
    取得更精確的答案?
  10. 讓我們進一步瞭解 Streamlit:
    What can you tell me about Streamlit?
    
    很好,我們可以看到 Gemini 提供的概略說明,包括優點和缺點。
  11. 如要探討缺點,可以問:
    What are the major downsides or shortcomings?
    
    請注意,我們不需要說「of Streamlit」,因為 Gemini Chat 是對話式 (多輪對話)。Gemini 會知道我們在即時通訊中討論的內容,如要清除 Gemini 即時通訊記錄,請使用 Gemini 程式碼即時通訊視窗頂端的垃圾桶圖示。

11. 將網頁應用程式部署至 Cloud Run

很好,我們已完成核心應用程式結構,但一切是否正常運作?更重要的是,我們應該在 Google Cloud 中將其放在哪裡?

  1. 在 Gemini 對話視窗中輸入以下提示:
    If I containerize this application, what compute technologies in Google Cloud would be best for hosting it?
    
  2. 請注意,如果您尚未在 IDE 中執行作業,也可以使用 Google Cloud Assist。開啟 Google Cloud Console,然後開啟 Gemini Cloud Assist,並詢問:
    If I have a containerized web application, where would be the best place to run it in Google Cloud?
    
    兩組建議是否相同?您是否同意/不同意其中任何建議?請注意,Gemini 是生成式 AI 助理,就像真人助理一樣,你不一定會同意它說的一切。不過,在 Google Cloud 和程式碼編輯器中使用協助工具,有助於提升工作效率。
  3. 如果是無狀態的短暫容器化網頁應用程式,Cloud Run 會是理想的選擇。在程式碼編輯器的 Gemini 對話視窗中,試試下列提示:
    What steps would be required to run this application in Cloud Run?
    
  4. 我們首先要做的,就是建立 Dockerfile。使用編輯器,在專案資料夾的根目錄中建立名為 Dockerfile 的檔案。請確認你不會不小心將檔案放入 pages 資料夾。開啟檔案進行編輯。
  5. 我們將使用 Gemini 側邊聊天面板建立 Dockerfile。請使用類似下方的提示。當結果顯示在即時通訊中時,請使用建議 Dockerfile 上方複製圖示旁的 + 號,將建議程式碼插入 Dockerfile。
    Create a Dockerfile for the application in the current folder. The dependencies are defined in requirements.txt and I want you to use the Python 3 slim bookworm base image.
    
    Gemini 不一定會對相同提示傳回相同回應。我第一次向 Gemini 索取 Dockerfile 時,就收到我建議你使用的檔案。我剛剛收到以下建議:
    # Base image
    FROM python:3-bookworm-slim
    
    # Set working directory
    WORKDIR /app
    
    # Install dependencies
    RUN apt-get update && apt-get install -y \
        build-essential \
        libpq-dev \
        gcc \
        python3-dev \
        && rm -rf /var/lib/apt/lists/*
    
    # Install pip and virtualenv
    RUN pip install --upgrade pip virtualenv
    
    # Create virtual environment
    RUN python3 -m venv venv
    
    # Activate virtual environment
    WORKDIR /app/venv/bin
    RUN . activate
    
    # Install Streamlit and libraries from requirements.txt
    RUN pip install -r requirements.txt
    
    # Copy application files
    COPY . /app
    
    # Expose port 8501 for Streamlit
    EXPOSE 8501
    
    # Start Streamlit app
    CMD ["streamlit", "run", "main.py"]
    
    這就是 Dockerfile 的內容。我會簡化一下。我們不需要 apt-get 區段,因為 Python 所需的所有內容都已包含在基礎映像檔中。此外,在 Python 容器中使用虛擬環境會浪費空間,因此我會移除該環境。您不一定要使用 expose 指令,但可以使用。此外,它會嘗試啟動 main.py,但我沒有這個檔案。
  6. recipe-app 資料夾中建立名為 Dockerfile 的檔案,然後貼上以下內容:
    FROM python:3.11-slim-bookworm
    
    WORKDIR /app
    
    COPY requirements.txt .
    RUN pip install --no-cache-dir --upgrade pip && \
        pip install --no-cache-dir -r requirements.txt
    
    COPY . .
    
    CMD ["streamlit", "run", "Home.py"]
    
  7. Gemini 可以透過聊天視窗運作,但也可以直接在程式碼檔案中使用註解運作,就像我們在資料整理 Notebook 中所做的那樣,也可以在 Windows 上使用 Control + i 鍵或在 Mac 上使用 Command + i 鍵來叫用 Gemini。請在 Dockerfile 中按一下滑鼠,然後使用適當的 Command + i / Control + i 指令啟用 Gemini。
  8. 在提示中輸入以下內容:查看並接受變更。
    Please comment the current file.
    
    這真是太棒了!您有多少次需要使用他人的程式碼,但在開始進行變更前,您必須浪費時間,先對他們沒有註解的工作進行基本瞭解。Gemini 來救援!
  9. 請 Gemini 說明如何使用 Cloud Run,從目前資料夾中的 Dockerfile 建構及部署名為 recipe-web-app 的新映像檔。
    How could I use gcloud to build a new Cloud Run service named recipe-web-app from the current directory?
    
  10. 接下來,我們將建構及部署應用程式。在終端機視窗中執行 gcloud run deploy 指令
    gcloud run deploy recipe-web-app \
        --allow-unauthenticated \
        --source=. \
        --region=us-central1 \
        --port=8501
    
    如果系統提示您建立 Artifact Registry 存放區,請按下 enter/return
    Deploying from source requires an Artifact Registry Docker repository to store built containers. A repository
    named cloud-run-source-deploy in region us-central1 will be created.
    
    Do you want to continue (Y/n)?
    
  11. 如果您查看建構程序,會發現系統會先建構 Artifact Registry Docker 存放區。接著,使用 Cloud Build 從本機資料夾中的 Dockerfile 建立容器映像檔。最後,Docker 映像檔會部署至新的 Cloud Run 服務。在指令碼結尾,您會取得可用的 Cloud Run 測試網址。

在瀏覽器的新分頁中開啟返回的連結。請花點時間瀏覽應用程式的結構和頁面。很好,現在我們需要鉤住生成式 AI 功能。

12. 將 Cooking Advice 頁面連結至我們的食譜搜尋 Agent Builder 應用程式

我們已建立網頁應用程式的執行架構,但需要將兩個工作頁面連結至兩個 Vertex AI Agent Builder 搜尋應用程式。我們先從 Cooking Advice 開始。

  1. 請保持 Cloud Shell 編輯器分頁開啟。在 Google Cloud 控制台中,使用搜尋功能前往 Vertex AI 中的「Chat」
  2. 在右側的設定頁面窗格中,將模型設為 gemini-1.5-flash-002。將輸出符號限制滑桿滑動至最大值,以便模型在必要時傳回較長的答案。開啟「安全性篩選器設定」。將「仇恨言論」、「煽情露骨內容」和「騷擾內容」設為「部分封鎖」。將「危險內容」設為「只封鎖少數內容」,然後點選「儲存」。我們將「危險內容」的門檻調低一些,因為談論刀具和切割行為可能會讓 Gemini 誤認為是暴力內容。
  3. 滑動切換鈕啟用「接地」,然後按一下「自訂」。將基準來源設為 Vertex AI 搜尋,並使用以下資料儲存庫路徑。將 YOUR_PROJECT_ID 變更為這些操作說明中「End Lab」按鈕附近的專案 ID,然後儲存接地設定
    projects/YOUR_PROJECT_ID/locations/global/collections/default_collection/dataStores/old-cookbooks-id
    
    注意:如果您收到錯誤訊息,表示您可能沒有將專案 ID 變更為實際專案 ID,或是可能遺漏了變更舊版食譜代理程式建構工具資料儲存庫 ID 的步驟。請前往 Agent Builder > Data Stores > old-cookbooks,查看實際的資料儲存庫 ID。
  4. 測試幾則即時通訊訊息。或許可以從以下內容開始。如有需要,請試試其他幾個。
    How can I tell if a tomato is ripe?
    
  5. 模型運作正常,現在讓我們試驗程式碼。按一下「清除對話」,避免對話內容成為程式碼的一部分,然後點選「取得程式碼」清除對話並取得代碼
  6. 在程式碼視窗頂端按下「Open Notebook」,我們就能在 Colab Enterprise 中試驗並完善程式碼,再將其整合至應用程式。
  7. 請花幾分鐘時間熟悉程式碼。讓我們進行幾項變更,讓它符合我們的期望。開始之前,請執行第一個程式碼儲存格,連線至運算單元並安裝 AI 平台 SDK。區塊執行完畢後,系統會提示您重新啟動工作階段。請按照指示操作
  8. 切換至我們從 Vertex AI Studio 提取的程式碼。將方法 multiturn_generate_content 的名稱變更為 start_chat_session
  9. 捲動至 model = GenerativeModel( 方法呼叫。現有的程式碼定義了 generation_configsafety_settings,但實際上並未使用這兩個變數。修改 GenerativeModel 的建立方式,使其類似以下內容:
    model = GenerativeModel(
        "gemini-1.5-flash-002",
        tools=tools,
        generation_config=generation_config,
        safety_settings=safety_settings,
    )
    
  10. 最後,請在 chat = model.start_chat() 下方為方法新增最後一行,讓函式傳回 chat 物件。完成的函式應如下所示。注意:請勿將這段程式碼複製到筆記本中。這只是健全性檢查。
    def start_chat_session():
        vertexai.init(project="qwiklabs-gcp-02-9a7298ceaaec", location="us-central1")
        tools = [
            Tool.from_retrieval(
                retrieval=grounding.Retrieval(
                    source=grounding.VertexAISearch(datastore="projects/qwiklabs-gcp-02-9a7298ceaaec/locations/global/collections/default_collection/dataStores/old-cookbooks-id"),
                )
            ),
        ]
        model = GenerativeModel(
            "gemini-1.5-flash-002",
            tools=tools,
            generation_config=generation_config,
            safety_settings=safety_settings,
        )
        chat = model.start_chat()
        return chat
    
  11. 捲動至程式碼儲存格底部,然後變更呼叫舊函式的最後一行,讓該行呼叫新的函式名稱,並將傳回的物件儲存在變數 chat 中。確認變更無誤後,請執行儲存格。
    chat = start_chat_session()
    
  12. 建立新的程式碼儲存格,並新增註解 # Use chat to invoke Gemini and print out the response。移至下一行並輸入 resp,Gemini 就會自動完成區塊。將提示更新為 How can I tell if a tomato is ripe?。執行儲存格
    response = chat.send_message("How can I tell if a tomato is ripe?")
    print(response)
    
  13. 這就是回應內容,但我們真正需要的是巢狀 text 欄位。修改區塊程式碼,只輸出該部分,例如:
    response = chat.send_message("How can I tell if a tomato is ripe?")
    print(response.candidates[0].content.parts[0].text)
    
  14. 很好,現在我們有可用的即時通訊程式碼,接下來請將其整合至網頁應用程式。複製建立 start_chat_session 函式的程式碼儲存格中的所有內容 (我們不需要測試儲存格)。如果你點選單元格,可以按一下右上角的三點選單,然後從該處複製複製儲存格
  15. 切換至 Cloud Shell 編輯器分頁,然後開啟 pages\Cooking_Advice.py 進行編輯。
  16. 找出留言:
    #
    # Add the code you copied from your notebook below this message
    #
    
  17. 將複製的程式碼貼到「Add the code」註解下方。太好了,現在我們有一個區段,可透過 Gemini 的基礎呼叫驅動聊天機器。接下來,我們要將這項功能整合至 Streamlit。
  18. 找出註解下方的註解程式碼:
    #
    # Here's the code to setup your session variables
    # Uncomment this block when instructed
    #
    
  19. 取消註解這段程式碼 (直到下一個 Setup done, let's build the page UI 部分),並加以探索。它會建立或擷取即時通訊和記錄工作階段變數。
  20. 接下來,我們需要將記錄和聊天功能整合至 UI。捲動程式碼,直到找到下方註解為止。
    #
    # Here's the code to create the chat interface
    # Uncomment the below code when instructed
    #
    
  21. 取消註解註解下方的其餘程式碼,並花點時間瞭解這些程式碼。如有需要,請反白選取該功能,讓 Gemini 說明其功能。
  22. 很好,現在讓我們建構並部署應用程式。網址恢復正常後,請啟動應用程式,並試用 Cooking Advisor 頁面。你可以問問機器人關於熟番茄的問題,或是請它提供製作球芽甘藍的訣竅。
    gcloud run deploy recipe-web-app \
        --allow-unauthenticated \
        --source=. \
        --region=us-central1 \
        --port=8501
    

這真是太棒了!專屬 AI 烹飪顧問 :-)

13. (選用) 將食譜搜尋頁面連結至食譜搜尋 Agent Builder 應用程式

當我們將 Cooking Advice 頁面連結至其根源時,是直接使用 Gemini API 進行連結。針對食譜搜尋,我們直接連結至 Vertex AI Agent Builder 搜尋應用程式。

  1. 在 Cloud Shell 編輯器中開啟 pages/Recipe_Search.py 頁面進行編輯。調查網頁結構。
  2. 在檔案頂端設定專案 ID。
  3. 檢查 search_sample 函式。這段程式碼幾乎直接取自這裡的 Discovery Engine 說明文件。您可以在這個 Notebook 中找到可用的副本這裡。我唯一做的變更是傳回 response.results,而非只傳回結果。如果沒有這個屬性,傳回類型就是用於分頁顯示結果的物件,而這不是基本應用程式所需的屬性。
  4. 捲動至檔案的結尾,並取消註解 Here are the first 5 recipes I found 下方的整個部分。
  5. 請醒目顯示您剛取消註解的整個部分,然後開啟 Gemini Code 即時通訊。請問,Explain the highlighted code。如未選取任何項目,Gemini 可以解釋整個檔案。如果你標示某個部分,並要求 Gemini 解釋、評論或改善該部分,Gemini 就會執行這項操作。請花點時間閱讀說明。在將 Gemini API 整合至應用程式前,使用 Colab Enterprise 筆記本是探索這些 API 的絕佳方式。這項功能特別適合用於探索某些較新的 API,因為這些 API 的說明可能不夠完整。
  6. 在編輯器終端機視窗中,執行 build.sh 來部署最終應用程式。請等待新版本部署完成,再繼續進行下一個步驟。

14. (選用) 探索最終應用程式

請花幾分鐘的時間探索最終應用程式。

  1. 在 Google Cloud 控制台中,使用搜尋功能前往 Cloud Run,然後點選 recipe-web-app
  2. 找出應用程式測試網址 (位於頂端),並在新瀏覽器分頁中開啟該網址。
  3. 應用程式首頁應會隨即顯示。請注意 Streamlit 提供的基本版面配置和導覽功能,其中 pages 資料夾中的 Python 檔案會顯示為導覽選項,而 Home.py 會載入為首頁。前往「烹飪建議」頁面。
  4. 幾秒後,即時通訊介面就會顯示。再次提醒您,Streamlit 提供的核心版面配置很不錯。
  5. 試著詢問幾個烹飪相關問題,看看機器人如何運作。例如:
    Do you have any advice for preparing broccoli?
    
    How about a classic chicken soup recipe?
    
    Tell me about meringue.
    
  6. 接下來,我們來找幾道食譜。前往「食譜搜尋」頁面,嘗試進行幾次搜尋。例如:
    Chili con carne
    
    Chili, corn, rice
    
    Lemon Meringue Pie
    
    A dessert containing strawberries
    

15. 恭喜!

您已使用 Vertex AI Agent Builder 應用程式建立應用程式。您已瞭解 Gemini Cloud Assist、Gemini Code Assist 和 BigQuery 資料畫布的自然語言至 SQL 功能。太棒了!

清除所用資源

Cloud SQL 沒有免費方案,如果您繼續使用,我們會向您收費。您可以刪除 Cloud 專案,避免產生額外費用。

不使用服務時,Cloud Run 不會收費,但您可能仍須針對已儲存於 Artifact Registry 中的容器映像檔,支付儲存費用。刪除 Cloud 專案後,系統就會停止對專案使用的所有資源收取費用。

如有需要,請刪除專案:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

您也可以從雲端磁碟中刪除不必要的資源。您可以:

  1. 刪除 Codelab 專案目錄:
    rm -rf ~/task-app
    
  2. 警告!這項操作無法復原!如要刪除 Cloud Shell 中的所有內容來釋出空間,您可以刪除整個主目錄。請務必將要保留的所有內容儲存在其他位置。
    sudo rm -rf $HOME