# OpenRouter Image Generator

基于OpenRouter API的智能图像生成Web应用，提供完整的图像生成、管理和批量处理功能。

## ✨ 核心功能

### 🎨 图像生成
- **单张生成**: 快速生成单个图像
- **批量生成**: 一次性生成1-20张图像（可配置数量）
- **参考图像**: 支持上传参考图像进行图像到图像的生成
- **重试机制**: 内置API请求重试机制，提高成功率

### 🖼️ 图像管理
- **图像画廊**: 网格布局展示所有生成的图像
- **全屏查看**: 点击图像进入全屏查看模式
- **图像导航**: 在查看器中左右翻页浏览图像
- **批量下载**: 一键下载所有生成的图像
- **单独下载**: 下载指定图像文件
- **图像删除**: 删除不需要的图像
- **URL复制**: 复制图像链接到剪贴板

### 💬 对话功能
- **聊天历史**: 完整的对话记录管理
- **消息复制**: 复制用户或AI的消息内容
- **消息编辑**: 编辑已发送的消息内容
- **折叠界面**: 手风琴式UI，节省空间

### ⚙️ 配置管理
- **API设置**: 完整的OpenRouter API配置
- **连接测试**: 实时测试API连接状态
- **本地存储**: 使用IndexedDB持久化保存数据
- **存储清理**: 一键清除所有本地数据

## 🚀 快速开始

### 1. 获取API密钥
1. 访问 [OpenRouter官网](https://openrouter.ai/)
2. 注册并创建API密钥

### 2. 配置应用
1. 打开应用，展开"API设置"面板
2. 输入您的API Key
3. 点击"测试连接"验证配置

### 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调用与重试
```javascript
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));
        }
    }
}
```

#### 批量生成管理
```javascript
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);
}
```

## 🎯 使用示例

### 基本图像生成
```
生成一张美丽的日落海滩风景图
```

### 基于参考图像
1. 上传参考图像
2. 输入: `基于上传的图像风格，生成一座现代建筑`

### 批量生成
1. 设置生成数量为10
2. 输入: `科幻城市建筑，未来主义风格`
3. 点击"批量生成"

### 复杂场景描述
```
生成一张赛博朋克风格的未来城市夜景，包含霓虹灯、飞行汽车和摩天大楼，色调以蓝紫色为主，具有强烈的科技感和未来感
```

## 📱 浏览器支持

| 浏览器 | 版本要求 | 支持状态 |
|--------|----------|----------|
| 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余额充足
- 检查提示词是否合适
- 尝试更换模型

**图像无法显示**
- 检查网络连接
- 清除浏览器缓存
- 尝试刷新页面

**存储空间不足**
- 使用"清除存储数据"功能
- 删除不需要的图像
- 检查浏览器存储限制

### 调试方法
1. 打开浏览器开发者工具 (F12)
2. 查看Console标签的错误信息
3. 检查Network标签的请求状态
4. 验证API响应内容

## 📊 性能优化

### 存储优化
- 自动清理过期聊天记录 (最多50条)
- 限制生成图像数量 (最多20张)
- 使用IndexedDB替代LocalStorage

### 网络优化
- 请求重试机制
- 并发控制
- 超时处理

### 用户体验优化
- 加载状态指示
- 批量操作进度显示
- 错误信息友好提示

## 🔒 安全注意事项

1. **API密钥安全**: 密钥仅存储在本地浏览器，不会上传到服务器
2. **隐私保护**: 所有数据本地存储，不收集用户信息
3. **文件安全**: 上传文件仅用于图像生成，不会被保存或传输
4. **网络安全**: 仅与OpenRouter官方API通信

## 📄 许可证

本项目基于 MIT 许可证开源。详见 [LICENSE](LICENSE) 文件。

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建功能分支
3. 提交更改
4. 发起 Pull Request

## 📞 支持与反馈

如有问题或建议，请：
- 提交 GitHub Issue
- 查看项目Wiki
- 参与社区讨论

---

**提示**: 本应用为前端静态应用，可直接在浏览器中运行，无需服务器部署。建议在HTTPS环境下使用以确保最佳安全性。