OpenRouter Image Generator
基于OpenRouter API的智能图像生成Web应用，提供完整的图像生成、管理和批量处理功能。
✨ 核心功能
🎨 图像生成
- 单张生成: 快速生成单个图像
- 批量生成: 一次性生成1-20张图像（可配置数量）
- 参考图像: 支持上传参考图像进行图像到图像的生成
- 重试机制: 内置API请求重试机制，提高成功率
🖼️ 图像管理
- 图像画廊: 网格布局展示所有生成的图像
- 全屏查看: 点击图像进入全屏查看模式
- 图像导航: 在查看器中左右翻页浏览图像
- 批量下载: 一键下载所有生成的图像
- 单独下载: 下载指定图像文件
- 图像删除: 删除不需要的图像
- URL复制: 复制图像链接到剪贴板
💬 对话功能
- 聊天历史: 完整的对话记录管理
- 消息复制: 复制用户或AI的消息内容
- 消息编辑: 编辑已发送的消息内容
- 折叠界面: 手风琴式UI，节省空间
⚙️ 配置管理
- API设置: 完整的OpenRouter API配置
- 连接测试: 实时测试API连接状态
- 本地存储: 使用IndexedDB持久化保存数据
- 存储清理: 一键清除所有本地数据
🚀 快速开始
1. 获取API密钥
- 访问 OpenRouter官网
- 注册并创建API密钥
2. 配置应用
- 打开应用，展开"API设置"面板
- 输入您的API Key
- 点击"测试连接"验证配置
3. 开始使用
- 单张生成: 输入描述，点击"生成一张"
- 批量生成: 设置生成数量，点击"批量生成"
- 参考图像: 拖拽或选择图像上传
📋 支持的AI模型
| 模型 | 描述 | 费用 |
|---|---|---|
google/gemini-2.5-flash-image-preview:free |
Google Gemini 2.5 Flash 图像预览版 | 免费 |
⚡ 主要特性
技术特性
- 响应式设计: 适配桌面和移动设备
- 拖拽上传: 直观的文件拖拽界面
- 实时预览: 即时显示上传的图像
- 加载指示: 清晰的加载状态显示
- 错误处理: 完善的错误捕获和用户提示
- 存储管理: 智能的本地存储空间管理
UI/UX特性
- 手风琴界面: 可折叠的设置和历史面板
- 全屏查看器: 沉浸式图像查看体验
- 批量操作: 支持批量生成和批量下载
- 状态指示器: 实时显示连接和操作状态
- 快捷操作: 键盘快捷键支持（Enter发送）
🛠️ 技术实现
前端技术栈
- HTML5: 语义化标记
- CSS3: 响应式设计和动画
- JavaScript (ES6+): 原生JS实现
- Bootstrap 5: UI框架
- Font Awesome: 图标库
数据存储
- IndexedDB: 主要数据持久化存储
- LocalStorage: 配置数据备份
- 内存管理: 自动清理过期数据
核心功能实现
API调用与重试
async generateImageWithRetry(message, images, settings, imageIndex, totalImages) {
const maxRetries = 3;
for (let attempt = 1; attempt <= maxRetries; attempt++) {
try {
return await this.generateImage(message, images, settings);
} catch (error) {
if (attempt === maxRetries) throw error;
await new Promise(resolve => setTimeout(resolve, 1000 * attempt));
}
}
}
批量生成管理
async sendBatchMessage() {
const batchCount = parseInt(document.getElementById('batchCount').value) || 6;
const promises = [];
for (let i = 0; i < batchCount; i++) {
promises.push(this.generateImageWithRetry(message, images, settings, i, batchCount));
}
await Promise.allSettled(promises);
}
🎯 使用示例
基本图像生成
生成一张美丽的日落海滩风景图
基于参考图像
- 上传参考图像
- 输入:
基于上传的图像风格，生成一座现代建筑
批量生成
- 设置生成数量为10
- 输入:
科幻城市建筑，未来主义风格 - 点击"批量生成"
复杂场景描述
生成一张赛博朋克风格的未来城市夜景，包含霓虹灯、飞行汽车和摩天大楼，色调以蓝紫色为主，具有强烈的科技感和未来感
📱 浏览器支持
| 浏览器 | 版本要求 | 支持状态 |
|---|---|---|
| Chrome | 80+ | ✅ 完全支持 |
| Firefox | 75+ | ✅ 完全支持 |
| Safari | 13+ | ✅ 完全支持 |
| Edge | 80+ | ✅ 完全支持 |
📐 配置选项
API设置
- API Key: OpenRouter API密钥
- Base URL: API端点 (默认:
https://openrouter.ai/api/v1) - 模型选择: 支持的AI模型列表
- 超时时间: 请求超时限制 (默认: 600秒)
- 代理设置: 可选的代理服务器配置
生成设置
- 生成数量: 1-20张图像 (批量生成)
- 图像格式: 支持 JPG, PNG, GIF, WebP
- 文件大小限制: 最大10MB
🔧 故障排除
常见问题
连接测试失败
- 检查API密钥是否正确输入
- 确认网络连接稳定
- 验证Base URL设置正确
图像生成失败
- 确认API余额充足
- 检查提示词是否合适
- 尝试更换模型
图像无法显示
- 检查网络连接
- 清除浏览器缓存
- 尝试刷新页面
存储空间不足
- 使用"清除存储数据"功能
- 删除不需要的图像
- 检查浏览器存储限制
调试方法
- 打开浏览器开发者工具 (F12)
- 查看Console标签的错误信息
- 检查Network标签的请求状态
- 验证API响应内容
📊 性能优化
存储优化
- 自动清理过期聊天记录 (最多50条)
- 限制生成图像数量 (最多20张)
- 使用IndexedDB替代LocalStorage
网络优化
- 请求重试机制
- 并发控制
- 超时处理
用户体验优化
- 加载状态指示
- 批量操作进度显示
- 错误信息友好提示
🔒 安全注意事项
- API密钥安全: 密钥仅存储在本地浏览器，不会上传到服务器
- 隐私保护: 所有数据本地存储，不收集用户信息
- 文件安全: 上传文件仅用于图像生成，不会被保存或传输
- 网络安全: 仅与OpenRouter官方API通信
📄 许可证
本项目基于 MIT 许可证开源。详见 LICENSE 文件。
🤝 贡献指南
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建功能分支
- 提交更改
- 发起 Pull Request
📞 支持与反馈
如有问题或建议，请：
- 提交 GitHub Issue
- 查看项目Wiki
- 参与社区讨论
提示: 本应用为前端静态应用，可直接在浏览器中运行，无需服务器部署。建议在HTTPS环境下使用以确保最佳安全性。