初始提交
This commit is contained in:
史悦
126
.gitignore
vendored
Normal file
126
.gitignore
vendored
Normal file
@@ -0,0 +1,126 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Production build
|
||||
dist/
|
||||
build/
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage/
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Dependency directories
|
||||
jspm_packages/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
public
|
||||
|
||||
# Storybook build outputs
|
||||
.out
|
||||
.storybook-out
|
||||
|
||||
# Temporary folders
|
||||
tmp/
|
||||
temp/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# OS generated files
|
||||
.DS_Store
|
||||
.DS_Store?
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
|
||||
# Project specific
|
||||
*.local
|
||||
*.secret
|
||||
*.key
|
||||
*.pem
|
||||
*.p12
|
||||
*.pfx
|
||||
|
||||
# Cache
|
||||
.cache/
|
||||
*.cache
|
||||
|
||||
# Test files
|
||||
test/
|
||||
tests/
|
||||
*.test.*
|
||||
*.spec.*
|
||||
|
||||
# Documentation
|
||||
docs/
|
||||
*.md
|
||||
!README.md
|
||||
|
||||
# Backup files
|
||||
*.bak
|
||||
*.backup
|
||||
*.swp
|
||||
*.swo
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2024 OVINC CN
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
185
README.md
Normal file
185
README.md
Normal file
@@ -0,0 +1,185 @@
|
||||
# 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密钥的安全性。
|
||||
75
config.json
Normal file
75
config.json
Normal file
@@ -0,0 +1,75 @@
|
||||
{
|
||||
"app": {
|
||||
"name": "OpenRouter Image Generator",
|
||||
"version": "1.0.0",
|
||||
"description": "基于OpenRouter API的图像生成Web应用",
|
||||
"author": "OVINC CN",
|
||||
"license": "MIT"
|
||||
},
|
||||
"api": {
|
||||
"default_base_url": "https://openrouter.ai/api/v1",
|
||||
"default_timeout": 600,
|
||||
"default_model": "google/gemini-2.5-flash-image-preview:free",
|
||||
"supported_models": [
|
||||
{
|
||||
"id": "google/gemini-2.5-flash-image-preview:free",
|
||||
"name": "Google Gemini 2.5 Flash Image Preview",
|
||||
"description": "免费的Google Gemini模型，支持图像生成和视觉理解",
|
||||
"pricing": "free"
|
||||
},
|
||||
{
|
||||
"id": "openai/gpt-4-vision-preview",
|
||||
"name": "OpenAI GPT-4 Vision Preview",
|
||||
"description": "OpenAI的GPT-4视觉预览版，强大的图像理解和生成能力",
|
||||
"pricing": "paid"
|
||||
},
|
||||
{
|
||||
"id": "anthropic/claude-3-sonnet-20240229",
|
||||
"name": "Anthropic Claude 3 Sonnet",
|
||||
"description": "Anthropic的Claude 3 Sonnet模型，优秀的图像分析能力",
|
||||
"pricing": "paid"
|
||||
}
|
||||
]
|
||||
},
|
||||
"ui": {
|
||||
"theme": {
|
||||
"primary_color": "#667eea",
|
||||
"secondary_color": "#764ba2",
|
||||
"background_gradient": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
|
||||
},
|
||||
"features": {
|
||||
"drag_drop": true,
|
||||
"image_preview": true,
|
||||
"chat_history": true,
|
||||
"image_gallery": true,
|
||||
"settings_panel": true,
|
||||
"connection_status": true
|
||||
},
|
||||
"limits": {
|
||||
"max_file_size": 10485760,
|
||||
"max_files_per_upload": 5,
|
||||
"supported_image_formats": ["image/jpeg", "image/png", "image/gif", "image/webp"],
|
||||
"max_chat_history": 100,
|
||||
"max_generated_images": 50
|
||||
}
|
||||
},
|
||||
"storage": {
|
||||
"settings_key": "openRouterSettings",
|
||||
"chat_history_key": "openRouterChatHistory",
|
||||
"generated_images_key": "openRouterGeneratedImages"
|
||||
},
|
||||
"endpoints": {
|
||||
"models": "/models",
|
||||
"chat_completions": "/chat/completions",
|
||||
"image_generation": "/images/generations"
|
||||
},
|
||||
"error_messages": {
|
||||
"no_api_key": "请先输入API Key",
|
||||
"connection_failed": "连接失败，请检查网络和API设置",
|
||||
"invalid_response": "API响应格式错误",
|
||||
"image_generation_failed": "图像生成失败",
|
||||
"file_too_large": "文件大小超过限制",
|
||||
"unsupported_format": "不支持的文件格式",
|
||||
"upload_failed": "文件上传失败"
|
||||
}
|
||||
}
|
||||
162
index.html
Normal file
162
index.html
Normal file
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenRouter Image Generator</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<link href="styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h1 class="mb-0">
|
||||
<i class="fas fa-image me-2"></i>
|
||||
OpenRouter Image Generator
|
||||
</h1>
|
||||
<p class="mb-0 mt-2">基于OpenRouter API的智能图像生成工具</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- 设置面板 -->
|
||||
<div class="settings-panel">
|
||||
<h5><i class="fas fa-cog me-2"></i>API设置</h5>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="apiKey" class="form-label">API Key</label>
|
||||
<input type="password" class="form-control" id="apiKey" placeholder="输入您的OpenRouter API Key">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="baseUrl" class="form-label">Base URL</label>
|
||||
<input type="url" class="form-control" id="baseUrl" value="https://openrouter.ai/api/v1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="model" class="form-label">模型</label>
|
||||
<select class="form-select" id="model">
|
||||
<option value="google/gemini-2.5-flash-image-preview:free">Google Gemini 2.5 Flash Image Preview (Free)</option>
|
||||
<option value="openai/gpt-4-vision-preview">OpenAI GPT-4 Vision Preview</option>
|
||||
<option value="anthropic/claude-3-sonnet-20240229">Anthropic Claude 3 Sonnet</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="timeout" class="form-label">超时时间 (秒)</label>
|
||||
<input type="number" class="form-control" id="timeout" value="600">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="proxy" class="form-label">代理 (可选)</label>
|
||||
<input type="url" class="form-control" id="proxy" placeholder="http://proxy:port">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="status-indicator status-disconnected" id="connectionStatus"></span>
|
||||
<span id="connectionText">未连接</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-outline-primary me-2" onclick="testConnection()">
|
||||
<i class="fas fa-plug me-2"></i>测试连接
|
||||
</button>
|
||||
<button class="btn btn-outline-warning" onclick="app.clearStorage()">
|
||||
<i class="fas fa-broom me-2"></i>清除存储数据
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图像上传区域 -->
|
||||
<div class="mb-4">
|
||||
<h5><i class="fas fa-upload me-2"></i>上传参考图像</h5>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="border-2 border-dashed rounded p-4 text-center h-100 d-flex flex-column justify-content-center" id="dropZone">
|
||||
<i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
|
||||
<p class="text-muted">拖拽图像到此处或点击选择文件</p>
|
||||
<input type="file" class="d-none" id="imageInput" accept="image/*">
|
||||
<button class="btn btn-outline-primary" onclick="document.getElementById('imageInput').click()">
|
||||
选择图像
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div id="imagePreview" class="h-100 d-flex align-items-center justify-content-center">
|
||||
<p class="text-muted">未选择图像</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 聊天输入区域 -->
|
||||
<div class="mb-4">
|
||||
<h5><i class="fas fa-comments me-2"></i>对话输入</h5>
|
||||
<div class="input-group">
|
||||
<textarea class="form-control" id="messageInput" rows="3" placeholder="输入您的图像生成请求..."></textarea>
|
||||
<button class="btn btn-primary" onclick="sendMessage()">
|
||||
<i class="fas fa-paper-plane me-2"></i>发送
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载指示器 -->
|
||||
<div class="loading-spinner" id="loadingSpinner">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">加载中...</span>
|
||||
</div>
|
||||
<p class="mt-2">正在生成图像，请稍候...</p>
|
||||
</div>
|
||||
|
||||
<!-- 聊天历史 -->
|
||||
<div class="mb-4">
|
||||
<h5><i class="fas fa-history me-2"></i>对话历史</h5>
|
||||
<div id="chatHistory" style="max-height: 400px; overflow-y: auto;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 生成的图像画廊 -->
|
||||
<div class="mb-4">
|
||||
<h5><i class="fas fa-images me-2"></i>生成的图像</h5>
|
||||
<div class="image-gallery" id="imageGallery"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 新的图像查看模态框 -->
|
||||
<div class="modal fade" id="imageViewerModal" tabindex="-1" aria-labelledby="imageViewerModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="imageViewerModalLabel">图像查看</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<img id="viewerModalImage" src="" alt="查看图像" class="img-fluid">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" id="viewerDownloadImage">
|
||||
<i class="fas fa-download me-2"></i>下载图像
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
462
styles.css
Normal file
462
styles.css
Normal file
@@ -0,0 +1,462 @@
|
||||
/* OpenRouter Image Generator - 自定义样式 */
|
||||
|
||||
/* 全局样式 */
|
||||
:root {
|
||||
--primary-color: #667eea;
|
||||
--secondary-color: #764ba2;
|
||||
--success-color: #28a745;
|
||||
--danger-color: #dc3545;
|
||||
--warning-color: #ffc107;
|
||||
--info-color: #17a2b8;
|
||||
--light-color: #f8f9fa;
|
||||
--dark-color: #343a40;
|
||||
--border-radius: 15px;
|
||||
--box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
--transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 基础样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
/* 主容器 */
|
||||
.main-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
color: white;
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
|
||||
padding: 20px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 表单控件样式 */
|
||||
.form-control, .form-select {
|
||||
border-radius: 10px;
|
||||
border: 2px solid #e9ecef;
|
||||
padding: 12px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.form-control:focus, .form-select:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
border-radius: 10px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
transition: var(--transition);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||
background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
border: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
border: 2px solid var(--danger-color);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.btn-outline-danger:hover {
|
||||
background: var(--danger-color);
|
||||
border-color: var(--danger-color);
|
||||
}
|
||||
|
||||
/* 图像预览样式 */
|
||||
.image-preview {
|
||||
max-width: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.image-preview:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 图像预览区域 */
|
||||
#imagePreview {
|
||||
max-height: 20rem;
|
||||
}
|
||||
|
||||
/* 拖拽区域样式 */
|
||||
#dropZone {
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 10px;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#dropZone:hover {
|
||||
border-color: var(--primary-color);
|
||||
background: rgba(102, 126, 234, 0.05);
|
||||
}
|
||||
|
||||
#dropZone.dragover {
|
||||
border-color: var(--primary-color);
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
/* 聊天消息样式 */
|
||||
.chat-message {
|
||||
background: var(--light-color);
|
||||
border-radius: 15px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.chat-message:hover {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.chat-message.user {
|
||||
background: #e3f2fd;
|
||||
border-left-color: #2196f3;
|
||||
}
|
||||
|
||||
.chat-message.assistant {
|
||||
background: #f3e5f5;
|
||||
border-left-color: #9c27b0;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.loading-spinner {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.spinner-border {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-width: 0.3rem;
|
||||
}
|
||||
|
||||
/* 设置面板样式 */
|
||||
.settings-panel {
|
||||
background: var(--light-color);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
/* 图像画廊样式 */
|
||||
.image-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.image-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.image-item img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.image-item:hover .image-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 状态指示器 */
|
||||
.status-indicator {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.status-connected {
|
||||
background-color: var(--success-color);
|
||||
}
|
||||
|
||||
.status-disconnected {
|
||||
background-color: var(--danger-color);
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-in;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.main-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.image-gallery {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.image-gallery {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 工具提示样式 */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 200px;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
/* 特殊效果 */
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* 加载骨架屏 */
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图像查看模态框样式 */
|
||||
#viewerModalImage {
|
||||
max-height: 80vh;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
#viewerModalImage:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* 图像查看模态框特定样式 */
|
||||
#imageViewerModal .modal-content {
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#imageViewerModal .modal-header {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#imageViewerModal .modal-footer {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 按钮网格布局 - 2排2列 */
|
||||
.btn-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.btn-grid-row {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.btn-grid-row .btn {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 错误状态 */
|
||||
.error-state {
|
||||
border-color: var(--danger-color) !important;
|
||||
background-color: rgba(220, 53, 69, 0.1) !important;
|
||||
}
|
||||
|
||||
/* 成功状态 */
|
||||
.success-state {
|
||||
border-color: var(--success-color) !important;
|
||||
background-color: rgba(40, 167, 69, 0.1) !important;
|
||||
}
|
||||
138
test.html
Normal file
138
test.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenRouter Image Generator - 测试页面</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<link href="styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="text-center">OpenRouter Image Generator - 测试页面</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-info">
|
||||
<i class="fas fa-info-circle me-2"></i>
|
||||
这是测试页面，用于验证应用是否正常工作。请检查浏览器控制台是否有错误信息。
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<h5>功能测试清单：</h5>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<i class="fas fa-check-circle text-success me-2"></i>
|
||||
页面加载正常
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<i class="fas fa-check-circle text-success me-2"></i>
|
||||
JavaScript文件加载成功
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<i class="fas fa-check-circle text-success me-2"></i>
|
||||
事件监听器初始化完成
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<i class="fas fa-check-circle text-success me-2"></i>
|
||||
UI控制器正常工作
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<i class="fas fa-check-circle text-success me-2"></i>
|
||||
文件处理功能正常
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<a href="index.html" class="btn btn-primary">
|
||||
<i class="fas fa-home me-2"></i>
|
||||
返回主应用
|
||||
</a>
|
||||
<button class="btn btn-secondary" onclick="testFunctions()">
|
||||
<i class="fas fa-flask me-2"></i>
|
||||
测试核心功能
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="testResults" class="mt-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
function testFunctions() {
|
||||
const results = document.getElementById('testResults');
|
||||
results.innerHTML = '<div class="alert alert-info">正在测试功能...</div>';
|
||||
|
||||
setTimeout(() => {
|
||||
let testResults = '<div class="alert alert-success"><h5>测试结果：</h5><ul>';
|
||||
|
||||
// 测试1: 检查app对象是否存在
|
||||
if (typeof app !== 'undefined') {
|
||||
testResults += '<li class="text-success">✓ app对象存在</li>';
|
||||
} else {
|
||||
testResults += '<li class="text-danger">✗ app对象不存在</li>';
|
||||
}
|
||||
|
||||
// 测试2: 检查uiController是否存在
|
||||
if (typeof uiController !== 'undefined') {
|
||||
testResults += '<li class="text-success">✓ uiController存在</li>';
|
||||
} else {
|
||||
testResults += '<li class="text-danger">✗ uiController不存在</li>';
|
||||
}
|
||||
|
||||
// 测试3: 检查apiService是否存在
|
||||
if (typeof apiService !== 'undefined') {
|
||||
testResults += '<li class="text-success">✓ apiService存在</li>';
|
||||
} else {
|
||||
testResults += '<li class="text-danger">✗ apiService不存在</li>';
|
||||
}
|
||||
|
||||
// 测试4: 检查utils是否存在
|
||||
if (typeof utils !== 'undefined') {
|
||||
testResults += '<li class="text-success">✓ utils存在</li>';
|
||||
} else {
|
||||
testResults += '<li class="text-danger">✗ utils不存在</li>';
|
||||
}
|
||||
|
||||
// 测试5: 检查fileHandler是否存在
|
||||
if (typeof fileHandler !== 'undefined') {
|
||||
testResults += '<li class="text-success">✓ fileHandler存在</li>';
|
||||
} else {
|
||||
testResults += '<li class="text-danger">✗ fileHandler不存在</li>';
|
||||
}
|
||||
|
||||
// 测试6: 检查CONFIG是否存在
|
||||
if (typeof CONFIG !== 'undefined') {
|
||||
testResults += '<li class="text-success">✓ CONFIG存在</li>';
|
||||
} else {
|
||||
testResults += '<li class="text-danger">✗ CONFIG不存在</li>';
|
||||
}
|
||||
|
||||
testResults += '</ul></div>';
|
||||
results.innerHTML = testResults;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 页面加载完成后自动测试
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('测试页面加载完成');
|
||||
console.log('检查全局对象：');
|
||||
console.log('app:', typeof app);
|
||||
console.log('uiController:', typeof uiController);
|
||||
console.log('apiService:', typeof apiService);
|
||||
console.log('utils:', typeof utils);
|
||||
console.log('fileHandler:', typeof fileHandler);
|
||||
console.log('CONFIG:', typeof CONFIG);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user