Google AI Studio 入门小应用

此仓库包含 Google AI Studio 的 入门应用 源代码——这是一组小型应用，展示了如何利用 Gemini 构建交互式体验。这些应用专为在 AI Studio 内运行而设计，但此处提供的版本也可通过 Gemini API 独立运行。

空间理解

空间理解 (在线演示) 是一个简单的示例，用于展示 Gemini 的 2D 和 3D 空间理解和推理能力。它使用 React 构建。

此示例可以帮助你了解如何开始使用 Gemini 进行空间分析。请查看 Prompt.tsx，以了解边界框解析的具体实现方式。若想深入探索 Gemini 的空间推理能力，可参阅此 Colab 笔记本。

如需本地开发，请将你的 Gemini API 密钥插入 .env 文件中。

视频分析器

视频分析器 (在线演示) 是一款简单应用，允许你借助 Gemini 探索视频中的事件。它使用 React 构建。

此示例展示了如何通过函数调用开始进行视频分析。请查看 functions.js，以了解该小应用的函数定义！

如需本地开发，请将你的 Gemini API 密钥插入 .env 文件中。

地图浏览器

地图浏览器 (在线演示) 是一款简单应用，允许你使用 Gemini 和 Google 地图 API 浏览地图。它采用 Lit 框架构建，并结合了 Maps Embed API。

此示例将帮助你了解如何开始使用函数调用。请查看 function-declarations.js，以进一步了解此处如何通过函数调用来调用 Maps Embed API！

如需本地开发，请在 script.js 文件中将 your_key_here 替换为你自己的 Gemini API 密钥。

贡献者

• @bencobley
• @dmotz
• @grantcuster
• @hapticdata

Google AI Studio Starter Applets 快速上手指南

本指南帮助中国开发者快速本地运行 Google AI Studio 的示例应用集（starter-applets），涵盖空间理解、视频分析和地图探索三个演示项目。

环境准备

• 系统要求：Node.js (建议 v18 或更高版本)，Git。
• 前置依赖：
  • 有效的 Gemini API Key（需通过 Google AI Studio 获取）。
  • 可选：若运行 Map Explorer，需确保网络可访问 Google Maps 服务。
• 国内网络提示：由于涉及 Google 服务，请确保您的开发环境已配置好网络代理，或在 .env/代码中配置相应的代理设置以连接 Gemini API。

安装步骤

1. 克隆仓库

   git clone https://github.com/google-gemini/starter-applets.git
   cd starter-applets
   

2. 安装依赖 根据您想运行的具体应用进入对应目录并安装依赖（以 Spatial Understanding 为例）：

   cd spatial
   npm install
   

   (注：Video Analyzer 和 Map Explorer 同样使用 npm install 安装依赖)

3. 配置 API Key 在项目根目录或对应子目录下创建 .env 文件（部分项目如 Map Explorer 可能直接在 JS 文件中配置，请参考下方“基本使用”中的具体说明），填入您的密钥：

   GEMINI_API_KEY=your_actual_api_key_here
   

基本使用

启动开发服务器即可在本地浏览器体验。不同应用的配置细节略有差异：

1. Spatial Understanding (空间理解)

演示 Gemini 对 2D/3D 空间的理解与推理能力。

• 启动命令：

  npm run dev
  

• 配置检查：确保 .env 文件中已填入 GEMINI_API_KEY。
• 核心代码参考：查看 src/Prompt.tsx 了解边界框（bounding box）解析的实现逻辑。

2. Video Analyzer (视频分析)

演示利用函数调用（Function Calling）分析视频事件。

• 启动命令：

  cd ../video
  npm install
  npm run dev
  

• 配置检查：确保 .env 文件中已填入 GEMINI_API_KEY。
• 核心代码参考：查看 src/functions.js 了解函数定义的实现。

3. Map Explorer (地图探索)

演示结合 Gemini 与 Google Maps API 进行地图交互。

• 启动命令：

  cd ../maps
  npm install
  npm run dev
  

• 配置检查：此项目配置方式略有不同。请打开 script.js 文件，找到 your_key_here 占位符并替换为您的 API Key：

  // script.js 示例
  const API_KEY = "your_actual_api_key_here"; 
  

• 核心代码参考：查看 function-declarations.js 了解如何调用 Maps Embed API。

启动成功后，终端通常会显示本地访问地址（如 http://localhost:5173），在浏览器打开即可体验。