總覽

生成式 AI 技術可用來生成文字、影片、圖片和程式碼等內容。Google Cloud 提供多種大型語言模型 (LLM) 和工具，可助您開始使用 Gemini 和 Vertex AI 等生成式 AI。您可以運用 LLM 輔助工具，為網站建立及強化內容、新增對話式搜尋功能、提高網頁搜尋效率，以及提升網站瀏覽體驗。

目標

在本實驗室中，您將運用網站翻新解決方案，達成下列目標：

• 運用生成式 AI 簡化生成內容的流程，提升網站內容的品質和產出效率。
• 生成搭配網站文字內容的圖片。
• 輕鬆將內容翻譯成所需的語言。
• 將 Vertex AI Search 整合至網站，提高資訊搜尋效率。

設定

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

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

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

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

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

5. 按一下「Open Google Console」。

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

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

啟用 Cloud Shell

Cloud Shell 是含有多項開發工具的虛擬機器，提供永久的 5 GB 主目錄，並在 Google Cloud 中運作。Cloud Shell 可讓您透過指令列存取 Google Cloud 資源。gcloud 是 Google Cloud 的指令列工具，已預先安裝於 Cloud Shell，並支援 Tab 鍵完成功能。

1. 在控制台的右上方，點按「啟用 Cloud Shell」按鈕 。

2. 點按「繼續」。
   請稍候片刻，等待系統完成佈建作業並連線至環境。連線建立後，即代表您已通過驗證，且專案已設為「PROJECT_ID」。

指令範例

• 列出目前使用的帳戶名稱：

gcloud auth list

輸出內容

Credentialed accounts: - <myaccount>@<mydomain>.com (active)

輸出內容範例

Credentialed accounts: - google1623327_student@qwiklabs.net

• 列出專案 ID：

gcloud config list project

輸出內容

[core] project = <project_ID>

輸出內容範例

[core] project = qwiklabs-gcp-44776a13dea667a6 注意：如需 gcloud 的完整說明，請參閱 gcloud CLI 總覽指南。

工作 1：啟用 Vertex AI API

您必須先啟用 Vertex AI API，才能使用 Vertex AI。

1. 如要啟用 API，請在 Cloud Shell 執行下列指令：

   gcloud services enable aiplatform.googleapis.com

2. 如果出現提示訊息，請點選「授權」。

   注意：請稍候片刻，等 API 啟用完成後再查看進度。

點選「Check my progress」，確認目標已達成。 Vertex AI API 已啟用。

工作 2：下載網站程式碼

這個實驗室會使用預先建構的網站應用程式，當中後端 API 是以 FastAPI 建構而成，前端則是以 HTML、CSS 和 JavaScript 建構而成。在這項工作中，您將下載網站程式碼，並查看程式碼和檔案結構。

下載及查看網站程式碼

1. 在 Cloud Shell，從 Cloud Storage 下載網站程式碼的封存檔：

   gcloud storage cp gs://cloud-training/OCBL451/genai-website-mod-app.tar.gz .

2. 將封存檔解壓縮：

   tar -zxvf genai-website-mod-app.tar.gz

3. 如要查看網站程式碼和檔案結構，請點選 Cloud Shell 選單列中的「開啟編輯器」。

4. 在 Cloud Shell 編輯器的導覽列，展開 genai-website-mod-app 資料夾。

   這個資料夾包含建構及部署網站應用程式所需的所有檔案，以下概略說明各個檔案及其用途：

   檔案/資料夾	說明
   Dockerfile	用於透過 Cloud Run 建構網站應用程式容器
   config.toml	包含變數的應用程式設定檔
   main.py	網站應用程式的主要 FastAPI 進入點
   models/	這個資料夾包含網站應用程式使用的資料模型
   routers/	不同應用程式功能適用的 FastAPI API 路由器
   static/	包含 CSS、圖片和 JS 檔案等靜態網站資產
   templates/	網站應用程式頁面的 Jinja 範本
   utils/	網站應用程式的公用程式模組
   views/	實作網站應用程式介面的程式碼

   注意：如果實驗室後續步驟中沒有特別說明，您不需要查看或編輯檔案內容。

工作 3：實作 Vertex AI Search

在這項工作中，您將在 Vertex AI 建立搜尋應用程式，為網站實作搜尋功能，以便搜尋網誌文章等非結構化資料。

建立搜尋應用程式

1. 前往 Google Cloud 控制台，點選「導覽選單」圖示 ，然後選取「Agent Builder」。

   注意：如果導覽選單中沒有「Agent Builder」，請點選「查看所有產品」。在「所有產品」頁面，捲動至「人工智慧」部分，然後點選「Agent Builder」。

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

3. 如果自動重新導向至「建立應用程式」頁面，請直接進行下一步，否則請點選「New App」。

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

5. 在「設定」頁面，根據下列資訊來設定一般搜尋應用程式，其餘設定則保持預設狀態：

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

6. 點選「繼續」。

為搜尋應用程式建立資料儲存庫

1. 在「資料儲存庫」頁面，點選「建立資料儲存庫」。

   在這個頁面，您將設定搜尋應用程式，指定自己的資料來源並用於網站搜尋結果。

2. 選取「Cloud Storage」。

   注意：為方便您在本實驗室中順利操作，我們預先佈建了幾個代表網誌文章的 HTML 文件，位於專案的 Cloud Storage bucket 中。

3. 系統預設會選取「資料夾」，請點選「瀏覽」。

4. 如要查看 Cloud Storage bucket 的內容，請點選 。

5. 選取「blog_posts」資料夾，然後點選「選取」。

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

   

6. 匯入的資料 kind 請保留預設的「Unstructured documents」選項，然後點選「繼續」。

7. 「資料儲存庫名稱」請輸入 my-data-store。

8. 點選「建立」。

9. 在「資料儲存庫」頁面，選取剛建立的資料儲存庫，然後點選「建立」來建立搜尋應用程式。

   

   Agent Builder 現在會從 Cloud Storage bucket 中，開始擷取搜尋應用程式所需的網誌文章 HTML 資料。

10. 如要查看資料擷取狀態，請在 my-data-store 的「資料」頁面，點選「活動」分頁標籤。

    「狀態」欄會顯示目前的狀態。匯入完成後，該欄會顯示「匯入完成」。

    

    注意：匯入程序需要幾分鐘的時間。請先等待資料匯入完成，再進行下一步。

11. 如要確認文件是否成功匯入，請點選「文件」分頁標籤。

測試搜尋應用程式

您可以在 Agent Builder 預先測試搜尋應用程式能否正常運作。

1. 在「Agent Builder」導覽選單，點選「預覽」。

2. 在搜尋框輸入 What is dollar cost averaging and how can it help me? (什麼是平均成本法？對我有什麼幫助？)，然後按下 Enter 鍵。

   應用程式會生成回覆，說明何謂 dollar cost averaging，並列出摘要文字和您從 Cloud Storage 匯入的相關檔案連結。

   注意：搜尋應用程式預設會採用「Gemini 1.5 Pro」模型生成搜尋回覆。如要查看或修改搜尋應用程式設定，請前往 Google Cloud 控制台 >「Agent Builder」>「設定」頁面。

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

工作 4：整合網站應用程式和搜尋功能

搜尋應用程式建立完成後，可以整合至網站或應用程式。本實驗室會透過搜尋 API 發出呼叫並接收回應，然後顯示在網站上。您也可以在網站中嵌入搜尋小工具，自動顯示搜尋列和可展開式搜尋介面。如要進一步瞭解這個選項，請點選實驗室結尾的連結，查看說明文件。

在這項工作中，您將設定網站程式碼，整合前一個工作中建立的搜尋應用程式，接著將網站應用程式部署至 Cloud Run 來進行測試。

設定網站應用程式

這個網站應用程式是以 FastAPI 建構而成。FastAPI 是一種採用 Python 來建構 API 的網路架構。genai-website-mod-app/routers 資料夾包含 search (搜尋) 等各種網站功能的路由器 API 實作項目。

1. 在 Cloud Shell 編輯器，前往 genai-website-mod-app/routers 資料夾，然後開啟 vertex_search.py 檔案。

   這個檔案中的程式碼，能讓您透過 Python 適用的 Cloud 用戶端 SDK 中的 discoveryengine 模組，實作搜尋 API 呼叫。這段程式碼也會用到 tomllib，這個 Python 模組會剖析設定檔。

2. 查看 trigger_first_search() 函式中的程式碼。

   這個函式會使用包含路徑參數的路徑 projects/{project_id}/locations/{datastore_location}/collections/default_collection/dataStores/{datastore_id}，設定對 Discovery Engine API 的呼叫。

3. 如要為路徑參數提供值，請編輯 genai-website-mod-app 資料夾中的 config.toml 檔案。

4. 找出 [global] 區段，並根據下列資訊來替換設定屬性的值：

   區段	屬性	值
   global	project_id
   global	location
   global	datastore_id	查看後續步驟

5. 將設定檔中的 datastore_id 屬性值，換成搜尋應用程式的資料儲存庫 ID 值：

   a. 如要取得 datastore_id 的值，請前往 Google Cloud 控制台 >「Agent Builder」，然後選取「資料」。

   b. 複製 my-data-store 的資料儲存庫 ID 值，並貼到 config.toml 檔案。

6. 根據下列資訊，在相關設定區段中替換其他設定屬性：

   區段	屬性	值
   imagen	bucket_name
   blog	image_bucket
   blog	blog_bucket

7. 儲存檔案變更。

工作 5：在 Cloud Run 建構、部署及測試網站

Cloud Run 是代管運算平台，能讓您在 Google 可擴充的基礎架構上執行應用程式容器。

在這項工作中，您將建構網站應用程式，並部署至 Cloud Run，此外也會測試已整合至網站的搜尋功能。

設定環境

1. 確認您位於 website application 目錄：

   cd ~/genai-website-mod-app

2. 為專案 ID、區域和網站應用程式服務設定環境變數：

   PROJECT_ID=$(gcloud config get-value project) REGION={{{project_0.default_region|set at lab start}}} SERVICE_NAME='webmod-svc' # Name of your Cloud Run service. echo "PROJECT_ID=${PROJECT_ID}" echo "REGION=${REGION}" echo "SERVICE_NAME=${SERVICE_NAME}"

透過 Cloud Run 建構及部署應用程式

1. 執行下列指令，建構應用程式並部署至 Cloud Run：

   gcloud run deploy "$SERVICE_NAME" \ --port 8080 \ --source . \ --allow-unauthenticated \ --region $REGION \ --project $PROJECT_ID

2. 如要建立 Artifact Registry Docker 存放區，請輸入 Y

   服務部署完成後，指令輸出內容會列出服務網址。

測試網站的搜尋功能

1. 如要透過 Cloud Run 測試應用程式，請在不同的瀏覽器分頁或視窗中，前往網站應用程式的 Cloud Run 服務網址。

2. 在搜尋框輸入 What is dollar cost averaging and how can it help me? (什麼是平均成本法？對我有什麼幫助？)，然後按下 Enter 鍵。

3. 確認網站會傳回並顯示搜尋結果。

   注意：搜尋結果中的 AI 回覆是依據 HTML 檔案內容生成而得，這類檔案位於您從 Cloud Storage 為搜尋應用程式佈建的資料儲存庫中。搜尋結果連結會連至相關的網誌文章，但不一定會顯示摘要文字。注意：網站所用的網誌文章檔案會以 JSON 檔案的形式，單獨儲存在 Cloud Storage bucket 的「production」資料夾中。網站應用程式會使用 EditorJS 將這類檔案轉譯為 HTML 在網站上顯示。

4. 在搜尋框輸入 Can you use dollar cost averaging with ETFs? (可以用平均成本法投資指數股票型基金嗎？)，然後按下 Enter 鍵繼續提問。

5. 確認搜尋結果列出後續問題的答案，以及相關的網誌文章連結。

點選「Check my progress」，確認目標已達成。 網站應用程式已部署至 Cloud Run。

工作 6：運用生成式 AI 編輯網站內容

Google 的生成式 AI 工具能用來建立及編輯網站文案或內容。在這項工作中，您將以網站內容編輯者的身分使用這類工具，更新本實驗室所用網站的文字和圖片內容。

查看圖片生成程式碼

網站應用程式會使用 Vertex AI 的 Imagen API 來生成及更新圖片。

1. 在 Cloud Shell 編輯器開啟 config.toml 設定檔。

2. 查看 [imagen] 區段的設定屬性。這個區段定義了用於生成圖片和說明的模型屬性，以及一些其他屬性。

3. 在 Cloud Shell 編輯器開啟 routers/vertex_imagen.py 檔案。

   這個檔案定義了不同的圖片說明和修改功能，以及相關的 API 路徑。

4. 這些函式已寫在 utils/imagen.py 檔案中，請在 Cloud Shell 編輯器開啟檔案。

5. 查看 generate_image() 函式：

   這個函式會用到 Python SDK 中 vertexai 套件的 vertexai.preview.vision_models.ImageGenerationModel 類別。

   這個函式會先載入圖片生成模型，然後對模型叫用 generate_images() 函式，傳入文字提示和其他參數來生成圖片。

更新圖片內容

接著，我們要更新網站上某篇網誌文章的圖片。

1. 在 Cymbal Investments 網站的右上角，點選「All Blogs」。

   網站會顯示一個列出六篇網誌文章的頁面。

   注意：如果系統預設已選取初始網誌文章，請在頁面上點選任意位置來取消選取。

2. 點選連結即可查看第一篇網誌文章：Unleashing the Techie Within: A Journey to FIRE (發揮科技人的潛力：FIRE 之旅)。

   網誌文章頁面包含標題、圖片和幾段文字。

3. 如要編輯頁面內容，請點選右下方的「Edit」圖示 。

4. 將滑鼠游標懸停在圖片上，然後點選圖片左側的「Click the tune」圖示 。

5. 在「Click to tune」選單中，選取「Generate」。

   

6. 在圖片說明文字下方的「Prompt」部分，輸入 An image of a retired man and woman sitting on a beach enjoying the sunset (圖片中有一對退休夫妻坐在沙灘上欣賞日落)。點選「Generate」。

7. 捲動至頁面頂端，等待圖片生成。

   新的圖片生成後，就會上傳至 Cloud Storage 的圖片 bucket。網誌文章頁面已更新完畢，並加入這張新圖片。

翻譯內容

您可以使用文字生成模型翻譯整個網頁，或只翻譯部分內嵌文字。在這個子工作中，您將翻譯網站網誌頁面中的內嵌文字。

1. 在 Cloud Shell 編輯器開啟 routers/vertex_llm.py 檔案。

   這個檔案定義了不同的網頁編輯和翻譯功能，以及相關的 API 路徑。

2. 捲動至來源檔案的底部，查看 ai_translate_inline() 函式的程式碼。

   這個函式會依據 ai_translate_inline_prompt 設定屬性、使用者選取的文字及使用者指定的目標語言來建立提示，接著叫用 llm_generate_gemini() 函式，由模型生成回覆。

   以下是 config.toml 檔案中 ai_translate_inline_prompt 設定屬性的值：

   You are an award winning writer. INSTRUCTIONS: 1. You are given a piece of text as INPUT_TEXT 2. You are also given a target language as TARGET_LANGUAGE. 3. You should translate the INPUT_TEXT into the TARGET_LANGUAGE. 4. Strictly output only the translated text. Do not add any other explanation. Do not output the answer in \"\" (double or single quotes) INPUT_TEXT:

3. 如要查看 llm_generate_gemini() 函式，請開啟 utils/vertex_llm_utils.py 檔案。

   這個函式會用到 Python SDK 中 vertexai 套件的 vertexai.generative_models.GenerativeModel 類別。

   這個函式會先載入 gemini-1.5-pro 模型，然後對模型叫用 generate_content() 函式，傳入文字提示和其他參數來生成回覆。

4. 確認您已進入網站中的網誌頁面編輯模式。如果沒有，請點選右下方的「Edit」圖示 。

5. 選取任意一段文字，然後點選「Translate tool」：

   

6. 在語言的提示欄位中輸入 French(法文)，然後點選「Send」。

   幾秒過後，這段文字就會翻譯成您指定的語言，並取代頁面中的內嵌文字。

更新網站文案 (文字內容)

您也可以運用生成式模型來潤飾網站的文字內容。

1. 查看 routers/vertex_llm.py 檔案中的 ai_refine_text() 函式。

   這個函式會依據 ai_refine_prompt 設定屬性、使用者從網站內容中選取的文字，以及使用者輸入的指令來建立提示。

   以下是 config.toml 檔案中的 ai_refine_prompt 設定屬性值：

   You are an award winning writer. INSTRUCTIONS: 1. You are given a piece of text as INPUT_TEXT 2. You are also given a style or tone or instructions as REFINE_PROMPT. 3. You should modify or refine INPUT_TEXT in the tone or style of REFINE_PROMPT. 4. Strictly output only the refined text. Do not add any other explanation. Do not output the answer in \"\" (double or single quotes) INPUT TEXT:

2. 確認您已進入網站中的網誌頁面編輯模式。如果沒有，請點選右下方的「Edit」圖示 。

3. 選取任意一段文字，然後點選「Refine Text Tool」：

   

4. 如要調整所選文字的行文語氣，改為更正式且有影響力，請在樣式方塊中輸入 formal impactful (正式、有影響力)。系統會先以 REFINE_PROMPT 字串的形式將這個值附加至提示，然後才會叫用模型。

5. 點選「Send」。

   幾秒過後，模型就會生成回覆，並顯示在頁面原始文字下方的封閉方塊中。

6. 查看更新過的段落文字，然後點選「Replace」。

7. 如要儲存網誌頁面的變更，請點選頁面頂端的「Save」。

8. 如要查看最終狀態的提示值，請點選 Google Cloud 控制台的「導覽選單」圖示 ，然後依序選取「Logging」>「Logs Explorer」。

   注意：如果導覽選單中沒有「Logging」，請點選「查看所有產品」。在「所有產品」頁面，捲動至「觀測能力」部分，然後點選「Logging」。

9. 如要醒目顯示相關的記錄項目，請在結果選單列中依序點選「動作」>「在結果中醒目顯示項目」。

10. 「在結果中醒目顯示的項目」請輸入 REFINE_PROMPT

    

點選「Check my progress」，確認目標已達成。 您已成功修改網站內容。

關閉研究室

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

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

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

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

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

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

恭喜！

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

• 建立並測試 Vertex AI 一般搜尋應用程式。
• 將 Vertex AI Search 應用程式整合至網站。
• 使用 Imagen API 在網站上生成並更新圖片。
• 運用 Vertex AI TextGenerationModel 翻譯及潤飾網頁上文字。
• 在 Cloud Run 部署及測試網站應用程式。

只要運用這些功能，您就能建立流程來更新網站內容，並將變更儲存至 Cloud Storage 等外部儲存空間，以便查看及發布。

後續步驟/瞭解詳情

• Vertex AI
• Gemini
• 在網頁中新增搜尋小工具
• Artifact Registry
• Cloud Run

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