Nano Banana Editor Vibe 项目

项目简介

Nano Banana Editor 是一个基于 React + TypeScript 构建的 AI 图像生成与编辑应用，被誉为"最先进的 Nano Banana 图像生成器"。它把 Google Gemini 系列图像模型集中在同一个编辑器里，让你写一句提示词、拖入参考照片、涂抹遮罩区域，就能从 512px 草图一路渲染到 4K 成品。项目由开发者 markfulton 打造，目前在 GitHub 上已收获 711 颗星，是 Vibe Coding 社区近期的热门作品。

整个应用的核心思路是"一个编辑器搞定所有 Nano Banana 模型"。无论是轻量的 Nano Banana 2 Lite、通用的 Nano Banana 2，还是最强的 Nano Banana Pro，都统一在同一个界面里调用，用户不必在多个工具之间来回切换。

核心功能

• 多模型统一调用：支持 Nano Banana 2 Lite（gemini-3.1-flash-lite-image）、Nano Banana 2（gemini-3.1-flash-image）、Nano Banana Pro（gemini-3-pro-image）三档模型，按需选择速度与画质。
• 参考图生成：文本生成图像时可同时投放最多 14 张参考图，让生成结果更贴近预期风格。
• 遮罩局部编辑：用画笔圈出要修改的区域，配合橡皮擦精细控制，确保改动只发生在局部。
• 搜索接地（Search Grounding）：提示词可以接入实时搜索结果，适合需要真实世界事实的场景（天气、比分、商品等）。
• 思考模式切换：Flash 系列模型支持 Fast / Deep 两档思考深度，简单提示用 Fast，复杂排版和文字用 Deep。
• 版本历史与分支：每次渲染都会落入本地历史（基于 IndexedDB），可带参数、模型备注、接地来源，刷新页面也不丢失，并可从任意节点分叉继续。
• 多规格输出与对比：支持 1:1、3:2、16:9、21:9 乃至 4:1、8:1 等超宽比例，内置前后对比滑块，一键用 Pro 模型重渲染 4K。

技术实现

Nano Banana Editor 前端采用 React + TypeScript，后端使用边缘函数（Edge Function）处理计费与模型调用。项目把模型能力与价格集中定义在 src/lib/models.ts 这一个目录的"模型目录"里，边缘函数保留一份完全一致的副本，这样客户端永远无法谎报价格，计费逻辑透明可信。

在计费方面，新账户注册时由数据库触发器赠送 5 个免费积分；使用搜索接地会额外消耗 1 个积分。积分在模型运行前由服务端预留，如果渲染失败或返回空结果会自动退还。对于希望自担成本的用户，项目支持"自带密钥"（Bring Your Own Key）模式：在设置里粘贴 AI Studio 的 Gemini API Key，请求直接计入用户自己的 Google 账户，密钥只保存在浏览器本地并通过 HTTPS 逐次发送，不经过第三方服务器。项目同时提供自托管指南（self-hosting）和架构文档（architecture），方便开发者自行部署。

快速上手

1. 访问官网：打开 nanobananaeditor.dev，注册后自动获得 5 个免费积分。
2. 选择模型：在顶部按需切换 Nano Banana 2 Lite / 2 / Pro，设置输出尺寸与宽高比。
3. 输入提示词：在编辑区写提示词，可拖入 1~14 张参考图，必要时开启搜索接地。
4. 涂抹遮罩（可选）：用画笔和橡皮擦圈定修改区域，实现局部重绘。
5. 生成与迭代：按 ⌘/Ctrl + Enter 生成，用对比滑块查看前后差异，从历史任意节点分叉继续编辑。
6. 导出：一键下载 PNG / JPG / WebP，或直接复制到剪贴板。

适用人群

• Vibe Coding 爱好者：想用 AI 快速产出视觉素材、无需专业设计软件的用户。
• 内容创作者：需要批量生成配图、封面、产品概念图的内容运营者。
• 独立开发者：希望把图像生成能力集成进自己项目、或自托管部署的工程师。
• 设计工作者：需要频繁做局部修改、对比版本、追求 4K 输出的设计师。

官方链接

• 官网体验：https://nanobananaeditor.dev
• 开源仓库：https://github.com/markfulton/NanoBananaEditor
• 自托管指南：https://github.com/markfulton/NanoBananaEditor/blob/main/docs/self-hosting.md