NB Nano Banana - 全能香蕉图创平台

🚀 基于 Gemini 3 Pro 的新一代 AI 图像生成工具，纯前端架构，开箱即用

📖 项目简介

NB Nano Banana 是一款现代化的纯前端 AI 图像生成平台，专为 Google Gemini 3 Pro 模型打造。无需后端服务器，所有功能在浏览器中直接运行。提供直观的聊天式交互界面、强大的 Pipeline 工作流编排系统，以及丰富的图像管理功能。

核心理念：让 AI 图像生成变得简单、高效、有趣。

应用地址： https://nbnb.kuai.host/

https://github.com/aigem/nbnb/

📚 完整使用教程

请点个小星星！！！

✨ 主要功能

1️⃣ 多模态交互

文本对话 + 图像生成：支持纯文本或图文混合输入
多图上传：一次最多支持 14 张参考图片
便捷输入：
- 点击上传、拖拽上传、粘贴上传
- 📱 移动端拍照：手机端（< 640px）自动显示拍照按钮，直接调用摄像头，无需保存相册，普通输入框和批量编排均支持

2️⃣ Pipeline 工作流编排 🔥

强大的批量处理引擎，支持三种执行模式：

模式	说明	适用场景
串行模式	步骤顺序执行，逐步转换	风格迁移、渐进优化
并行模式	同时生成多个变体	多风格探索、快速试错
组合模式	n张图 × m个提示词 = n×m张输出	批量数据集生成

高级特性：

✅ 每步独立选择模型（Gemini 3 Pro / 2.5 Flash 等）
✅ 5 个内置预设模板，一键应用复杂工作流
✅ 自定义 JSON 模板：在 public/templates/ 创建 .json 文件，定义 name、mode、steps 字段，添加路径到 pipelineTemplateService.ts，刷新页面即可使用
✅ 实时进度跟踪与错误处理

3️⃣ 智能图像管理

历史记录：自动保存所有生成图片（最多 100 张）
一键下载：悬停显示下载按钮，支持批量下载
再次编辑：点击历史图片直接用作新生成的参考图
持久化存储：使用 IndexedDB 存储，刷新不丢失

4️⃣ API 余额管理 💰

实时显示 API Key 的总额度、已用额度、剩余额度
支持手动刷新，自动查询（首次打开设置时）
兼容 OpenAI 格式的 API Endpoint

5️⃣ 等待街机模式 🎮

AI 思考时不再无聊：

自动激活小游戏（贪吃蛇、恐龙跑酷、2048、生命游戏）
游戏自适应当前主题和设备类型
生成完成后自动关闭

6️⃣ 现代化体验

流式响应：实时打字机效果
主题切换：明亮 / 暗黑 / 跟随系统
响应式设计：完美适配桌面和移动端
PWA 支持：可安装为独立应用

🎯 核心卖点

为什么选择 NB Nano Banana？

💎 卖点	🔍 说明
纯前端架构	无需服务器，0 部署成本，EdgeOne Pages / GitHub Pages / Vercel 一键托管
Pipeline 编排	业界首创的串行/并行/组合三合一工作流系统，支持复杂批量处理
JSON 模板系统	5 个内置预设 + 可自定义 JSON 模板，热更新工作流配置，无需重新编译
移动端拍照	手机端直接调用相机上传，快速捕捉灵感，支持双端（输入框+批量编排）
开箱即用	无需配置后端，输入 API Key 即可立即使用
数据安全	API Key 和历史记录仅存储在本地浏览器，不上传任何服务器
性能优化	基于 React 19 + Vite 6 + Bun，极速构建和运行
完全开源	AGPL-3.0 协议，代码透明可审计

适用人群：

🎨 设计师：快速生成多风格图像原型
🤖 AI 工程师：批量生成训练数据集（AI-toolkit / LoRA 炼丹）
📱 产品经理：探索多种视觉方案
🔬 研究者：自动化图像处理流程

🚀 快速部署

方式一：本地运行（推荐开发测试）

前置要求：

Node.js 18+
Bun 1.2.1+ （项目强制使用 Bun）

步骤：

# 1. 克隆仓库
git clone https://github.com/aigem/nbnb.git
cd nbnb

# 2. 安装依赖
bun install

# 3. 启动开发服务器
bun dev

# 访问 http://localhost:3000

方式二：Vercel 部署（推荐生产环境）

点击上方按钮，一键导入项目到 Vercel
等待自动构建完成（约 1-2 分钟）
访问分配的域名即可使用

方式三：GitHub Pages 部署

# 1. 构建生产版本
bun build

# 2. 将 dist/ 目录推送到 gh-pages 分支
# 或使用 GitHub Actions 自动化部署

方式四：Docker 部署

# 1. 构建镜像
docker build -t nb-nano-banana .

# 2. 运行容器
docker run -p 3000:3000 nb-nano-banana

🔑 获取 API Key

推荐渠道：Kuai API（国内友好）

NB Nano Banana 默认使用 Kuai API 作为 Gemini 模型的接入点，提供更稳定的国内访问体验。

注册链接：https://api.kuai.host/register?aff=z2C8

优势：

✅ 国内直连，无需科学上网
✅ 支持 Gemini 3 Pro / 2.5 Flash 等最新模型
✅ OpenAI 兼容格式，支持余额查询
✅ 按量计费，首次注册有免费额度

注册流程：

访问注册链接并创建账号
完成实名认证（可选）
进入控制台 → API Keys 页面
点击"创建 API Key"并复制

官方渠道：Google AI Studio

注册链接：https://aistudio.google.com/app/apikey

注意事项：

⚠️ 需要科学上网访问
⚠️ 部分地区不可用（中国大陆 / 香港等）
⚠️ 官方 API 不支持余额查询功能

⚙️ 首次使用配置

1. 输入 API Key

启动应用后，点击右上角的 钥匙图标（🔑），输入你的 API Key。

💡 API Key 会安全保存在浏览器本地存储中，下次访问自动加载。

2. 通过 URL 参数预配置（可选）

支持通过 URL 参数快速设置，方便分享或特定场景：

https://your-domain.com/?apikey=YOUR_KEY&endpoint=https://api.kuai.host&model=gemini-3-pro-image-preview

参数说明：

apikey：预填 API Key
endpoint：自定义 API 端点
model：自定义模型名称

3. 调整高级设置

点击右上角 设置图标（⚙️），可调整：

图像分辨率（1K / 2K / 4K）
长宽比（1:1 / 16:9 / 9:16 等）
Google Search Grounding（联网搜索）
思维链显示开关
主题外观

📚 快速上手示例

示例 1：单张图片生成

在输入框输入提示词："一只赛博朋克风格的猫"
点击发送按钮
等待生成，查看结果

示例 2：参考图风格迁移

上传一张照片（拖拽到输入框）
输入："转换为水彩画风格"
发送查看效果

示例 3：Pipeline 批量生成

点击"批量编排"按钮
选择"并行模式"
上传 1 张照片
点击"多风格探索"模板（自动填充 4 个风格提示词）
点击"开始执行"
一次性生成 4 种不同风格的图像

示例 4：数据集生成（AI 炼丹）

点击"批量编排"→"组合模式"
上传 3 张不同角度的照片
添加 5 条风格提示词（如"正面"、"侧面"、"特写"等）
自动计算：3×5 = 15 张输出
开始执行，批量下载所有图片用于训练

🛡️ 隐私与安全

本地存储：API Key 和历史记录仅存储在您的浏览器中
无数据上传：不向任何第三方服务器发送数据
开源透明：所有代码公开可审计
一键清除：随时在设置中清除 API Key 和历史记录

📞 支持与反馈

问题报告：GitHub Issues
功能建议：GitHub Discussions
技术文档：查看仓库中的 CLAUDE.md

📄 开源协议

本项目采用 AGPL-3.0 协议开源。

✅ 允许商业使用
✅ 允许修改和分发
⚠️ 修改后的代码必须开源
⚠️ 网络服务部署必须开源

🙏 致谢

参考项目：faithleysath/UndyDraw
API 服务赞助：Kuai API
技术栈：React、Vite、Tailwind CSS、Zustand、Google GenAI SDK

🎉 开始你的 AI 图像创作之旅吧！

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
nb-app		nb-app
.env		.env
.gitignore		.gitignore
README.md		README.md
cc_start.sh		cc_start.sh

aigem/nbnb

Folders and files

Latest commit

History

Repository files navigation