我想要一个地方，输入一句话就能拿回一张图。然后我又想让这张图动起来。
这就是 AI Media Studio 的全部起源。它是一个网页应用，接收一段纯文本提示词，返回一张图片或一段短视频，背后用的是 Google 的 Gemini 图像模型和 Veo 视频模型。没有节点图，没有十二个滑块的控制面板。一个提示框，几个合理的开关，一个画廊。
这篇是关于它做什么、怎么搭建的实战笔记。
它能做什么
核心循环刻意做得很无聊：写提示词，选模型，选比例，点生成。
图片跑在三个 Gemini 图像模型上，我给它们起了”Nano Banana”系列的昵称：
- Nano Banana（
gemini-3.1-flash-lite-image）：快且轻。适合在还不知道自己想要什么的时候打草稿。 - Nano Banana 2（
gemini-3.1-flash-image）：均衡的默认选项。细节更多，速度依然快。 - Nano Banana Pro（
gemini-3-pro-image）：慢但高保真，专门处理那些轻量模型会糊掉的复杂概念。
视频跑在 Veo（veo-3.1-lite-generate-preview）上。视频生成不是即时的，所以应用会轮询任务状态，告诉你进度到哪了，而不是让你盯着一个不知死活的加载圈。
两条路径共用同一套控制项：
- 画面比例：正方形 1:1、宽屏 16:9、手机竖屏 9:16，以及 4:3 和 3:4。
- 开关：提示词增强、安全过滤、分辨率。
没什么花哨的。重点是，这几个选项几乎覆盖了我真正想做的所有东西。
让它像个产品的那部分
一个空白的提示框，其吓人程度常常被低估。所以应用内置了一个按风格分类的精选提示词库：写实摄影、数字艺术、赛博朋克、建筑、电影感。还有一个随机按钮，点一下就往框里丢一条提示词。
这两个功能在技术上都不有趣。但它们决定了用户是”打开就关掉”，还是”打开后做了六张图”。
另一块是画廊。生成的图片和视频会落到一个分标签的网格里。点任何一个，灯箱会打开全分辨率的结果，可以缩放，还能看到之后真正有用的元数据：提示词、模型、画面比例、生成时间。从这里可以一键下载 PNG、JPEG 或 MP4，也可以复制提示词接着改。
这些元数据后来成了我用得最多的功能。生成式媒体的工作，一半是记住那次成功时你到底输了什么。
怎么搭的
这里没有任何聪明的东西，我喜欢这样。
- Next.js 15，App Router，跑在 React 19 上。
- Tailwind CSS 负责样式，菜单、对话框和开关底下是 Radix UI 的无头组件。
@google/genai负责模型调用。这些调用放在服务端 API 路由里：一个生成图片，一个轮询视频状态，一个把下载流回浏览器，这样模型 API 密钥永远不会碰到客户端。- Framer Motion 负责路由过渡和那些让媒体应用不像表单的小动效。
- Lucide 负责图标。
深色和浅色主题都是一等公民。页头固定在顶部，滚动长画廊时模型和比例控制随手可及。
学到的东西
模型选择应该是一个下拉框，而不是一次决策。 早期我试过在界面里解释三个图像模型的区别。没人读。现在名字本身带着提示（lite、默认、pro），大家用同一条提示词在两个模型上各生成一次，自己就明白了。
轮询是一个用户体验功能。 对视频来说，“生成中……”和”生成中，第 3/5 步，约 40 秒”之间的区别，就是信任和关掉标签页之间的区别。
密钥留在服务端。 显而易见，但值得说。每一次对 Gemini 或 Veo 的调用都经过 API 路由。浏览器永远看不到凭据，我也可以在一个地方做限流和日志。
元数据就是产品。 那个显示提示词、模型、比例和时间戳的灯箱花了一个下午，却比其他任何东西用得都多。
试试
它已经上线：image-video-factory.ai.studio。输入点荒谬的东西，选 16:9，看看 Nano Banana 2 觉得”黎明时分的赛博朋克面摊，湿漉漉的沥青路，霓虹倒影”长什么样。然后让 Veo 把它动起来。
如果做出了好东西，把提示词复制下来。未来的你会需要它。