OpenRouter Image Generator Web应用

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

功能特性

核心功能

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

技术特性

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

快速开始

1. 获取OpenRouter API密钥

1. 访问 OpenRouter官网
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调用

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密钥的安全性。