# OpenRouter Image Generator Web应用

这是一个基于OpenRouter API的图像生成Web应用，实现了与原始Python代码相同的功能，但提供了用户友好的Web界面。

## 功能特性

### 核心功能
- 🎨 **图像生成**: 通过OpenRouter API生成高质量图像
- 📤 **图像上传**: 支持拖拽上传参考图像
- 💬 **对话界面**: 直观的聊天式交互界面
- 🖼️ **图像画廊**: 展示和管理生成的图像
- ⚙️ **API配置**: 灵活的API设置和连接测试

### 技术特性
- 🌐 **响应式设计**: 适配各种设备屏幕
- 🎯 **实时预览**: 即时显示上传的图像
- 💾 **本地存储**: 自动保存用户设置
- 🔗 **连接状态**: 实时显示API连接状态
- 📱 **移动友好**: 支持触摸操作

## 快速开始

### 1. 获取OpenRouter API密钥

1. 访问 [OpenRouter官网](https://openrouter.ai/)
2. 注册账户并登录
3. 在控制台中生成API密钥

### 2. 配置应用

1. 打开 `index.html` 文件
2. 在"API设置"面板中输入您的API密钥
3. 点击"测试连接"按钮验证配置

### 3. 使用应用

#### 上传参考图像（可选）
- 拖拽图像文件到上传区域
- 或点击"选择图像"按钮
- 支持多种图像格式（JPG、PNG、GIF等）

#### 生成图像
1. 在对话输入框中输入您的图像生成请求
2. 点击"发送"按钮或按Enter键
3. 等待API处理并生成结果

#### 管理生成的图像
- 在图像画廊中查看所有生成的图像
- 悬停在图像上显示操作按钮
- 下载图像或复制图像URL

## 配置选项

### API设置
- **API Key**: 您的OpenRouter API密钥
- **Base URL**: OpenRouter API的基础URL（默认：https://openrouter.ai/api/v1）
- **模型**: 选择使用的AI模型
  - Google Gemini 2.5 Flash Image Preview (Free)
  - OpenAI GPT-4 Vision Preview
  - Anthropic Claude 3 Sonnet
- **超时时间**: 请求超时时间（秒）
- **代理**: 可选的代理服务器设置

### 支持的模型
- `google/gemini-2.5-flash-image-preview:free` - 免费的Google Gemini模型
- `openai/gpt-4-vision-preview` - OpenAI的GPT-4视觉预览版
- `anthropic/claude-3-sonnet-20240229` - Anthropic的Claude 3 Sonnet模型

## 使用示例

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

### 基于参考图像的生成
1. 上传一张参考图像
2. 输入提示：`请根据上传的图像风格，生成一张类似的现代建筑图像`

### 复杂场景生成
```
请生成一张未来城市的图像，包含飞行汽车、玻璃建筑和绿色植物，风格要写实且具有科技感
```

## 技术实现

### 前端技术栈
- **HTML5**: 语义化标记和现代Web API
- **CSS3**: 响应式设计和动画效果
- **JavaScript**: 原生JS实现所有交互功能
- **Bootstrap 5**: UI组件和响应式布局
- **Font Awesome**: 图标库

### 核心功能实现

#### API调用
```javascript
async function generateImage(message) {
    const payload = {
        model: model,
        messages: messages,
        stream: false
    };
    
    const response = await fetch(`${baseUrl}/chat/completions`, {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${apiKey}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
    });
    
    return await response.json();
}
```

#### 图像处理
- 支持Base64编码的图像数据
- 文件拖拽上传功能
- 图像预览和管理
- 图像下载和URL复制

#### 状态管理
- 本地存储用户设置
- 实时连接状态显示
- 加载状态指示器
- 错误处理和用户反馈

## 浏览器兼容性

- ✅ Chrome 80+
- ✅ Firefox 75+
- ✅ Safari 13+
- ✅ Edge 80+

## 注意事项

1. **API限制**: 请注意OpenRouter API的使用限制和费用
2. **图像大小**: 上传的图像文件大小建议不超过10MB
3. **网络要求**: 需要稳定的网络连接以访问OpenRouter API
4. **隐私安全**: API密钥存储在浏览器本地，请勿在公共设备上使用

## 故障排除

### 常见问题

**Q: 连接测试失败**
- 检查API密钥是否正确
- 确认网络连接正常
- 验证Base URL设置

**Q: 图像生成失败**
- 检查输入的提示词是否合适
- 确认选择的模型支持图像生成
- 查看浏览器控制台错误信息

**Q: 图像上传失败**
- 检查图像格式是否支持
- 确认图像文件大小是否合理
- 尝试使用不同的浏览器

### 调试技巧
1. 打开浏览器开发者工具（F12）
2. 查看Console标签的错误信息
3. 检查Network标签的API请求状态
4. 验证API响应数据格式

## 许可证

本项目基于MIT许可证开源，详见LICENSE文件。

## 贡献

欢迎提交Issue和Pull Request来改进这个项目！

## 联系方式

如有问题或建议，请通过以下方式联系：
- GitHub Issues
- Email: [您的邮箱]

---

**注意**: 这是一个前端演示应用，生产环境使用时请注意API密钥的安全性。