185 lines
5.0 KiB
Markdown
185 lines
5.0 KiB
Markdown
# 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密钥的安全性。 |