核心功能：文生图 改图 重新生图 生成不同比例图片 满足第三方的openai的格式生成，兼容newapi

🎨 AI 图片生成器（纯前端版）

在浏览器里就能跑的全功能 AI 文生图 / 图生图工作台
无需后端，IndexedDB 本地存档，支持深色/浅色/跟随系统，移动端友好

---

✨ 核心能力

功能	说明
🖼️ 文生图 / 图生图	输入提示词，可一次性上传多张参考图，自动压缩
🗨️ 对话式管理	每次生成 = 1 条对话，支持新建、切换、重命名、删除
📚 本地历史库	IndexedDB 存储对话与图片，离线也能翻记录
🔄 流式生成	实时解析 SSE 流，base64 图片边生成边显示
🎯 一键继续编辑	把生成图直接当参考图，循环优化
🎨 空白图起点	内置 4 种比例空白画布，可指定背景色
🌓 三态主题	浅色 / 深色 / 跟随系统，一键切换
📱 PWA 就绪	响应式 + 离线缓存，可“安装”到桌面
🛠️ 配置即服务	改一行 API 地址，就能对接任意兼容后端

---

📸 界面速览

Light	Dark	Mobile

---

🚀 1 分钟跑起来

① 克隆

git clone https://github.com/yourname/ai-image-generator.git
cd ai-image-generator

② 打开

# 任意静态服务器均可（选做）
npx serve          # npm i -g serve
# 或双击 index.html

③ 填 key

右上角 ⚙️ → 粘贴你的 API 地址 + Key → 保存
（默认已填公开代理，可直接试用）

④ 开画

输入提示词 → 发送 → 等图 → 下载 / 继续编辑

---

🔌 后端对接

字段	示例值
API 地址	https://api请求网站/v1/chat/completions
模型名	gemini-2.5-flash-image
返回格式	流式 SSE，含 data: {"choices":[{"delta":{"content":"data:image/png;base64,..."}}]}

只要后端能把 base64 图片 写进流里，就能直接用，零改造。

---

🧩 二次开发

场景	入口文件	关键函数
换模型	index.html → modelSelect 下拉框	增 <option> 即可
新增比例	blankImageModal → ratioMap	加字段即可
自定义主题色	:root CSS 变量	搜 --accent-primary
接入提示词优化	sendMessage() 前插入调用	改 prompt 变量
批量生成	循环调用 sendMessage()	记得加间隔防限流

---

📁 项目结构

.
├── index.html          # 单文件即完整应用
├── docs/               # 截图与演示
└── README.md           # 本文档

真正的“零依赖”——无 npm 包、无构建、无框架，打开就能读源码。

---

🗃️ 数据存在哪？

内容	位置	说明
对话 & 图片	IndexedDB	浏览器本地，永不外泄
API 配置	localStorage	仅 key + url，不含图片
主题偏好	localStorage	appTheme 字段

清理浏览器数据会一并清空，重要图片请及时下载。

---

🧪 浏览器支持

内核	版本	备注
Chromium	≥ 88	全功能
Firefox	≥ 90	全功能
Safari	≥ 14	全功能
移动端	iOS 14+ / Android 10+	可安装 PWA

---

📄 开源协议

MIT © 2025 YourName
随意商用、修改、再分发，保留 LICENSE 即可。

---

🤝 贡献 & 反馈

• 🐛 提 Issue
• 💡 发 Discussion
• 🌟 点个 Star，让更多人发现！

---

🙏 致谢

• SVG 图标：Font Awesome
• 灵感来源：Midjourney、DALL·E、Stable Diffusion WebUI

---

Enjoy Painting! 🎨✨