從 AI Studio 部署至 Cloud Run

1. 總覽

現在要如何開始使用 AI 建構內容？對大多數人來說，這一切都始於一個簡單的問題：我能否快速為我一直在思考的問題設計解決方案原型？這時，Google AI Studio 就能派上用場。這個平台可供您快速設計原型。在本程式碼研究室中，您將使用直覺式程式開發建構簡單的網頁應用程式，並部署至 Cloud Run。

必要條件

  • 對網頁應用程式的基本概念。

課程內容

在本程式碼研究室中，您將瞭解如何：

  1. 在 Google AI Studio 中，使用直覺式程式開發功能建構簡單的網頁應用程式。
  2. 測試應用程式是否正常運作。
  3. 將應用程式部署至 Cloud Run。

需求條件

2. 事前準備

  1. 如果沒有 Google 帳戶，請先建立帳戶。
    • 請改用個人帳戶，而非公司或學校帳戶。公司和學校帳戶可能設有限制，導致您無法啟用本實驗室所需的 API。
  2. 前往 Google AI Studio，並詳閱服務條款。
  3. 請注意，如果您使用 Google Cloud Starter Tier，則可在單一 Cloud Run 區域中部署最多 2 個全端應用程式，不必設定完整的 Google Cloud 環境或帳單帳戶。

歡迎使用 AI Studio

3. 原型

在 Google AI Studio 中，花點時間查看右上角的「設定」面板。您可以在這裡選取模型和預設框架，並提供系統指示：

查看設定面板

確認設定正確無誤後，請說明要建立的應用程式，然後按一下「建構」：

Create a formal looking frontend application that has two buttons: "Snowflakes" and "Balloons".  
If the user clicks on the "Snowflakes" button, snowflakes of medium size should start falling on the screen from top to bottom for 5 seconds.  
If the user clicks on the "Balloons" button, balloons of medium size should start floating from the bottom of the screen and float to the top for 5 seconds.

輸入提示

AI Studio 會根據這段說明建構網頁應用程式。生成過程需要 2 到 3 分鐘，期間系統可能會提示你選取設計選項：

設計決策

如果應用程式發生問題，可以輸入其他提示詞來調整其行為 (例如 Increase the size of the snowflakes to twice their current size)。

下圖顯示產生的應用程式快照：

完成的應用程式快照

4. 部署至 Cloud Run

應用程式已準備就緒，現在請將其部署至 Cloud Run：

  1. 按一下頁面右上角的「發布」。

畫面右上角的「發布」按鈕

  1. 「Deploy app on Google Cloud」(在 Google Cloud 上部署應用程式) 對話方塊隨即開啟。

啟動 Google Cloud 部署應用程式精靈

  1. 按一下「Select a Cloud Project」下拉式選單選取專案，或繼續使用「Default Gemini Project」。
  2. 從下拉式選單中選取專案。如果找不到專案，請按一下「匯入專案」，然後從「匯入專案」窗格選取專案。
  3. 如果系統提示，請選取「個人」做為機構類型，然後輸入街道地址：

帳單帳戶詳情

  1. 按一下「發布應用程式」，等待應用程式部署至 Cloud Run。請注意，AI Studio 會自動產生 Cloud Run 服務名稱。

應用程式發布步驟

  1. 部署作業需要幾分鐘才能完成。完成後，按一下「應用程式網址」即可開啟已部署的網頁應用程式。

應用程式發布步驟

5. 清理

如要避免系統向您的 Google Cloud 帳戶收取本程式碼研究室所用資源的相關費用，請按一下「取消發布應用程式」：

取消發布應用程式的步驟

6. 恭喜

恭喜！您已在 Google AI Studio 成功以直覺式程式開發方式建構網頁應用程式，並部署至 Cloud Run！

AI Studio 與 Cloud Run 整合後，就能輕鬆將應用程式直接部署至 Google Cloud。使用 Cloud Run 可享有無伺服器環境的所有優點，並省去複雜的基礎架構管理作業。

後續步驟

恭喜您完成本實驗室！應用程式架構準備就緒後，請參閱下列官方指南，擴充專案功能：

  • 提示設計策略：瞭解提示結構的核心原則、如何使用系統指令、實作少量樣本，以及控管輸出格式。
  • 透過 Gemini API 呼叫函式：將部署作業連結至外部工具和 API，讓 Gemini 模型輸出結構化資料，並觸發實際應用程式邏輯。
  • 語音合成：瞭解如何使用 Gemini API 生成語音音訊、控制語音風格，以及使用 Google AI Studio 中的語音庫測試語音。