Files

修复 重复上传参考图的问题；
重新编写了README文档；

2025-09-16 22:51:50 +08:00

8.3 KiB

Raw Permalink Blame History

🍌 Nano Banana AI 图像编辑器

发布版本: v1.0

⏬ 获取一键安装副本!

加入 Vibe Coding is Life Skool 社区获取此应用的 一键 ⚡Bolt.new 安装克隆，以及现场构建会话、独家项目下载、AI 提示、大师课程和网络上最好的氛围编码社区的访问权限！

专业的 AI 图像生成和对话式编辑平台

一个生产就绪的 React + TypeScript 应用程序，用于愉快的图像生成和使用 Google Gemini 2.5 Flash Image 模型进行对话式、区域感知的修改。采用现代网络技术构建，专为创作者和开发者设计。

✨ 主要功能

🎨 AI 驱动的创作

文本到图像生成 - 从描述性提示创建令人惊叹的图像
实时质量提示 - 实时反馈以改进您的提示
参考图像支持 - 使用最多 2 张参考图像指导生成
高级控制 - 微调创意水平并使用自定义种子

✏️ 智能编辑

对话式编辑 - 使用自然语言指令修改图像
区域感知选择 - 绘制遮罩以针对特定区域进行编辑
样式参考图像 - 上传参考图像以指导编辑样式
非破坏性工作流 - 所有编辑都保留原始图像

🖼️ 专业画布

交互式画布 - 平滑缩放、平移和导航大图像
画笔工具 - 可变画笔尺寸以实现精确的遮罩绘制
移动设备优化 - 响应式设计，在所有设备上都能完美运行
键盘快捷键 - 使用热键提高工作效率

📚 项目管理

生成历史 - 跟踪所有创作和编辑
变体比较 - 生成并并排比较多个版本
完整撤销/重做 - 具有分支历史的完整生成树
资产管理 - 有序存储所有生成的内容

🔒 企业功能

图像上传和分享 - 上传生成的图像以轻松分享
离线缓存 - IndexedDB 存储以实现离线资产访问
类型安全 - 完整的 TypeScript 实现和严格类型检查
性能优化 - React Query 实现高效状态管理

🚀 快速开始

先决条件

Node.js 18+
一个 Google AI Studio API 密钥
可选：访问令牌用于图像上传功能

安装

克隆并安装依赖:

git clone <repository-url>
cd nano-banana-image-editor
npm install

配置环境:

cp .env.example .env
# 将您的 Gemini API 密钥添加到 VITE_GEMINI_API_KEY
# 可选：添加访问令牌到 VITE_ACCESS_TOKEN 以启用图像上传

启动开发服务器:
```
npm run dev
```
在浏览器中打开: 导航到 http://localhost:5173

🎯 使用指南

创建图像

选择生成模式
编写详细提示描述您想要的图像
可选上传参考图像（最多 2 张）
如需要调整创意设置
点击生成或按 Cmd/Ctrl + Enter

编辑图像

切换到编辑模式
上传图像或使用先前生成的图像
可选绘制遮罩以针对特定区域
用自然语言描述您想要的更改
点击 应用编辑 查看结果

高级工作流

使用选择模式绘制精确遮罩以进行目标编辑
在历史面板中比较变体
下载高质量 PNG 输出
使用键盘快捷键进行高效导航

⌨️ 键盘快捷键

快捷键	操作
`Cmd/Ctrl + Enter`	生成/应用编辑
`Enter`	生成/应用编辑（在任何地方按下）
`Shift + R`	重新生成变体
`E`	切换到编辑模式
`G`	切换到生成模式
`M`	切换到选择模式
`H`	切换历史面板
`P`	切换提示面板
`Esc`	中断生成

🏗️ 架构

技术栈

前端: React 18, TypeScript, Tailwind CSS
状态管理: Zustand 用于应用状态, React Query 用于服务器状态
画布: Konva.js 用于交互式图像显示和遮罩叠加
AI 集成: Google Generative AI SDK (Gemini 2.5 Flash Image)
存储: IndexedDB 用于离线资产缓存
构建工具: Vite 用于快速开发和优化构建

项目结构

src/
├── components/          # React 组件
│   ├── ui/             # 可重用的 UI 组件 (Button, Input, 等)
│   ├── PromptComposer.tsx  # 提示输入和工具选择
│   ├── ImageCanvas.tsx     # 使用 Konva 的交互式画布
│   ├── HistoryPanel.tsx    # 生成历史和变体
│   ├── Header.tsx          # 应用头部和导航
│   └── InfoModal.tsx       # 关于模态框和链接
├── services/           # 外部服务集成
│   ├── geminiService.ts    # Gemini API 客户端
│   ├── uploadService.ts    # 图像上传服务
│   ├── cacheService.ts     # IndexedDB 缓存层
│   └── imageProcessing.ts  # 图像处理工具
├── store/              # Zustand 状态管理
│   └── useAppStore.ts      # 全局应用状态
├── hooks/              # 自定义 React 钩子
│   ├── useImageGeneration.ts  # 生成和编辑逻辑
│   └── useKeyboardShortcuts.ts # 键盘导航
├── utils/              # 工具函数
│   ├── cn.ts              # 类名工具
│   └── imageUtils.ts      # 图像处理助手
└── types/              # TypeScript 类型定义
    └── index.ts           # 核心类型定义

🔧 配置

环境变量

VITE_GEMINI_API_KEY=your_gemini_api_key_here
VITE_ACCESS_TOKEN=your_access_token_here  # 可选，用于图像上传
VITE_UPLOAD_ASSET_URL=your_asset_url      # 可选，用于图像上传的资产URL前缀

模型配置

模型: gemini-2.5-flash-image-preview
输出格式: 1024×1024 PNG
输入格式: PNG, JPEG, WebP
温度范围: 0-1 (0 = 确定性, 1 = 创意)

🚀 部署

开发

npm run dev      # 启动开发服务器
npm run build    # 构建生产版本
npm run preview  # 预览生产构建
npm run lint     # 运行 ESLint

生产考虑

API 安全: 在生产环境中为 API 调用实现后端代理
速率限制: 添加适当的速率限制和使用配额
身份验证: 考虑为多用户部署添加用户身份验证
存储: 设置云存储以存储生成的资产
监控: 添加错误跟踪和分析

📄 许可证和版权

该项目根据 GNU Affero 通用公共许可证 v3.0 (AGPL-3.0) 授权。

这意味着：

✅ 免费使用 于个人和商业项目
✅ 修改和分发 需要适当署名
⚠️ 分享修改 - 任何更改必须在相同许可证下共享
⚠️ 网络使用 - 如果您将其作为网络服务运行，必须提供源代码

有关完整详情，请参见 LICENSE 文件。

🤝 贡献

我们欢迎贡献！请：

遵循既定模式 - 保持组件在 200 行以内
维护类型安全 - 严格使用 TypeScript 和正确定义
彻底测试 - 确保键盘导航和可访问性
记录更改 - 更新 README 并添加内联注释
遵守许可证 - 所有贡献都将遵循 AGPL-3.0

🔗 链接和资源

创建者: Mark Fulton
AI 培训计划: Reinventing.AI
社区: Vibe Coding is Life Skool
Google AI Studio: 获取您的 API 密钥
Gemini API 文档: 官方文档

🐛 已知问题和限制

客户端 API 调用 - 目前使用直接 API 调用（在生产环境中实现后端代理）
浏览器兼容性 - 需要支持 Canvas 和 WebGL 的现代浏览器
速率限制 - 受 Google AI Studio 速率限制约束
图像尺寸 - 针对 1024×1024 输出进行了优化（Gemini 模型输出尺寸可能有所不同）

🎯 建议更新

后端 API 代理实现
用户身份验证和项目共享
高级画笔工具和选择方法
自定义过滤器的插件系统
与云存储提供商集成

由 Mark Fulton 构建 | 由 Gemini 2.5 Flash Image 提供支持 | 使用 Bolt.new 制作

8.3 KiB Raw Permalink Blame History Unescape Escape