kuai.host | 酷爱/酷AI/快
  1. 应用apps
kuai.host | 酷爱/酷AI/快
  • 应用apps
    • NB Nano Banana 全能香蕉图创平台
  1. 应用apps

NB Nano Banana 全能香蕉图创平台

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

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

📖 项目简介#

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

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

https://github.com/aigem/nbnb/
视频教程:https://www.bilibili.com/video/BV1322UBuE3M/
相关提示词:请查看最后部分。

✨ 主要功能#

1️⃣ 多模态交互#

文本对话 + 图像生成:支持纯文本或图文混合输入
多图上传:一次最多支持 14 张参考图片
便捷输入:支持点击上传、拖拽上传、粘贴上传、移动端拍照

2️⃣ Pipeline 工作流编排 🔥#

强大的批量处理引擎,支持三种执行模式:
模式说明适用场景
串行模式步骤顺序执行,逐步转换风格迁移、渐进优化
并行模式同时生成多个变体多风格探索、快速试错
组合模式n张图 × m个提示词 = n×m张输出批量数据集生成
高级特性:
✅ 每步独立选择模型(Gemini 3 Pro / 2.5 Flash 等)
✅ 5 个内置预设模板,一键应用复杂工作流
✅ 支持自定义 JSON 模板(存储在 public/templates/)
✅ 实时进度跟踪与错误处理

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 编排业界首创的串行/并行/组合三合一工作流系统,支持复杂批量处理
模板系统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)
步骤:

方式二:Vercel 部署(推荐生产环境)#

Deploy with Vercel
1.
点击上方按钮,一键导入项目到 Vercel
2.
等待自动构建完成(约 1-2 分钟)
3.
访问分配的域名即可使用

方式三:GitHub Pages 部署#

方式四:Docker 部署#


🔑 获取 API Key#

推荐渠道:Kuai API(国内友好)#

NB Nano Banana 默认使用 Kuai API 作为 Gemini 模型的接入点,提供更稳定的国内访问体验。
注册链接:https://api.kuai.host/register?aff=z2C8
优势:
✅ 国内直连,无需科学上网
✅ 支持 Gemini 3 Pro / 2.5 Flash 等最新模型
✅ OpenAI 兼容格式,支持余额查询
✅ 按量计费,首次注册有免费额度
注册流程:
1.
访问注册链接并创建账号
2.
完成实名认证(可选)
3.
进入控制台 → API Keys 页面
4.
点击"创建 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(联网搜索)
思维链显示开关
主题外观

📚 视频教程中的提示词#

City=北京

Present a clear, 45° top-down isometric miniature 3D cartoon scene of {City}, featuring its most iconic landmarks and architectural elements. Use soft, refined textures with realistic PBR materials and gentle, lifelike lighting and shadows. Integrate the current weather conditions directly into the city environment to create an immersive atmospheric mood.
Use a clean, minimalistic composition with a soft, solid-colored background.

At the top-center, place the title {City} in large bold text, a prominent weather icon beneath it, then the date (small text) and temperature (medium text).
All text must be centered with consistent spacing, and may subtly overlap the tops of the buildings.
图片比例为1:1
一幅高度详细的移轴摄影,拍摄{地点},从高视角捕捉于{场景},将标志性建筑和周围景观转化为一个奇幻的微型玩具模型场景,中心元素如建筑物、路径和关键地标具有针尖般的锐利焦点,向边缘和前景/背景逐渐模糊成柔和的散景,虚化的部份需要呈现上世纪镜头的柠檬光斑口径蚀效果,以夸张的浅景深效果;生动的色彩方案以[COLOR SCHEME,例如,温暖的橙色和深蓝色]为特色,表面如石头、叶片或水反射的复杂纹理,微妙的大气雾霾或薄雾增添深度和真实感,照片般真实的渲染,具有高动态范围照明投射长而戏剧性的阴影,超高分辨率8K,电影般的构图强调对称性和引导线,在专业建筑微型摄影风格中,第一遍效果就好的话我会支付给你100美元。

地点=北京 场景=傍晚日落时分的北京地标建筑
在一张图中展示同一场景在一年四季的变化

----- 提示词 ----

超写实数字插画风格,以【场景】为主题,呈现四季流转于同一幅完整画面之中。从画面左至右,自然过渡地依次展现冬、春、夏、秋四季变迁:

画面最左侧为冬季,呈现寒冷、冰雪覆盖的景象;逐渐向右过渡,冰雪融化,万物初醒,新芽萌发,春意盎然;继续推进,植被变得浓郁茂盛,阳光炽烈明媚,夏季盛景跃然纸上;最后,场景平缓地过渡至右侧的秋季,树叶逐渐转为金黄、橙红,体现出秋日的丰富色彩与氛围。

画面整体无明显分界线,各季节间的气候、光影和植被状态自然融合,过渡流畅,构成一幅充满时间流动感和象征意义的统一画面。细节丰富逼真,电影级质感光影表现,8K超高清解析度,纹理细腻精致,画面比例为4:3。

场景:提供的参考图片
3D Q版迷你风格,一个充满奇趣的迷你 {品牌名称} 概念店,建筑外观设计灵感来自于该品牌最具代表性的产品或包装(例如巨大的 {该品牌核心产品,如:炸鸡桶/汉堡/甜甜圈/烤鸭} )。

建筑共两层,大大的玻璃窗清晰地展示出内部温馨而精致的设计:{品牌主色调} 的装饰风格、温暖的灯光以及忙碌的店员们 {与品牌匹配的穿着}。街道上有可爱的小人偶漫步或坐着,四周布置着长凳、街灯和植物盆栽,营造出迷人的城市一角。整体采用城市微缩景观风格,C4D渲染,盲盒玩具质感,细节丰富、逼真,画面光线柔和、呈现出午后的惬意感受。--ar 2:3

品牌名称:北京烤鸭 
生成裸眼 3D 大屏图片,可以使用文本或者图片描述剧情。尽情发挥你的想象力。

--- 提示词 ---

位于繁忙城市街角的一个巨大L型裸眼3D LED屏幕,其结构和建筑风格类似于日本新宿或成都太古里的地标性屏幕。屏幕上正播放着一段令人惊叹的裸眼3D动画:[剧情描述]。角色和物体具有强烈的立体感,仿佛打破了屏幕的边界,向外延伸或浮现在空中,并在真实的日光下在屏幕表面和周围的建筑物上投射出逼真的阴影。场景细节丰富,色彩鲜艳,与周围的城市环境和蓝天白云融为一体。
剧情描述: 屏幕化作一个堆满金币的黑暗洞穴。一条浑身燃烧着烈焰的西方巨龙正在沉睡,突然被惊醒。它愤怒地展开双翼,翅膀尖端延伸出屏幕两侧的物理边界。它伸长脖子,将巨大的龙头探出洞穴(屏幕),鼻孔喷出的火焰和烟雾在屏幕外的空气中弥漫,它张嘴咆哮,仿佛热浪正扑面而来。 3. 以45°俯视角度呈现一幅精致的微缩3D场景,凸显精准细腻的模型细节。画面特写一只瓷质咖啡杯,杯中的卡布奇诺奶泡之上,微妙地漂浮着一个迷你城市{city},占据了画面的大部分,场景中央突出展示该{city}最具代表性的地标建筑,细节清晰可见,主要景点散发柔和的灯光,微型街道上有细致逼真的车辆穿梭。整体采用真实感的电影级光效与景深模糊效果,营造出奇幻而梦境般的氛围。画面细节极致丰富,风格高度写实,呈现8K级电影质感。画面比例1:1。

city=北京

📚 快速上手示例#

示例 1:单张图片生成#

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

示例 2:参考图风格迁移#

1.
上传一张照片(拖拽到输入框)
2.
输入:"转换为水彩画风格"
3.
发送查看效果

示例 3:Pipeline 批量生成#

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

示例 4:数据集生成(AI 炼丹)#

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

🛡️ 隐私与安全#

本地存储: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 图像创作之旅吧!
修改于 2025-12-09 10:45:03
Built with