从 AI Studio 部署到 Cloud Run

1. 概览

如今,使用 AI 构建应用从何处着手?对于我们大多数人来说,一切都始于一个简单的问题:我能否快速为我一直在考虑的问题设计解决方案原型?这时,Google AI Studio 就派上用场了。它是一个用于快速原型设计的平台。在此 Codelab 中,您将使用氛围编程 (vibe coding) 构建一个简单的 Web 应用,并将其部署到 Cloud Run。

前提条件

  • 对 Web 应用有基本的了解。

学习内容

在此 Codelab 中,您将学习如何:

  1. 使用氛围编程在 Google AI Studio 中构建简单的 Web 应用。
  2. 测试应用是否按预期运行。
  3. 将应用部署到 Cloud Run。

要求

2. 准备工作

  1. 如果您还没有 Google 账号,则必须先创建一个 Google 账号。
    • 请改用个人账号,而非工作账号或学校账号。工作账号和学校账号可能存在限制,导致您无法启用本实验所需的 API。
  2. 前往 Google AI Studio,然后查看服务条款。
  3. 请注意,如果您使用的是 Google Cloud 新手体验层级,则无需设置完整的 Google Cloud 环境或结算账号,即可在单个 Cloud Run 区域中部署最多两个全栈应用。

欢迎使用 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 会根据此说明构建一个 Web 应用。生成过程需要 2-3 分钟,在此过程中,系统可能会提示您选择设计选项:

设计决策

如果您在使用该应用时遇到问题,可以输入更多提示来优化其行为(例如 Increase the size of the snowflakes to twice their current size)。

下图显示了生成的应用的快照:

完成后的应用的快照

4. 部署到 Cloud Run

现在,应用已准备就绪,请将其部署到 Cloud Run:

  1. 点击页面右上角的发布。

屏幕右上角的“发布”按钮

  1. 系统随即会打开在 Google Cloud 上部署应用对话框。

“在 Google Cloud 上部署应用”向导的起始界面

  1. 点击选择 Cloud 项目下拉菜单以选择您的项目,或继续使用默认 Gemini 项目。
  2. 从下拉菜单中选择项目。如果您找不到自己的项目,请点击导入项目,然后从导入项目窗格中选择项目。
  3. 如果系统提示您输入组织类型,请选择个人,然后输入您的街道地址:

结算账户明细

  1. 点击发布应用,然后等待应用部署到 Cloud Run。请注意,AI Studio 会自动生成 Cloud Run 服务名称。

应用发布步骤

  1. 部署需要几分钟时间。完成后,点击应用网址以打开已部署的 Web 应用。

应用发布步骤

5. 清理

为避免因本 Codelab 中使用的资源导致您的 Google Cloud 账号产生费用,请点击取消发布应用:

应用取消发布步骤

6. 恭喜

恭喜!您已成功在 Google AI Studio 中对 Web 应用进行氛围编程,并将其部署到 Cloud Run!

AI Studio 与 Cloud Run 的集成让您可以轻松地将应用直接部署到 Google Cloud。通过使用 Cloud Run,您可以享受无服务器环境的所有优势,而无需考虑复杂的基础设施管理问题。

后续步骤

祝贺您完成本实验!现在,您的应用框架已准备就绪,您可以探索以下官方指南来扩展项目的功能:

  • 提示设计策略:了解结构化提示、使用系统指令、实现少样本示例和控制输出格式的核心原则。
  • 使用 Gemini API 进行函数调用:将部署连接到外部工具和 API,使 Gemini 模型能够输出结构化数据并触发实际应用逻辑。
  • Text-to-Speech 生成:了解如何使用 Gemini API 生成语音音频、控制语音风格,以及如何使用 Google AI Studio 中的语音库测试语音。