211 lines
13 KiB
HTML
211 lines
13 KiB
HTML
<!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="accordion mb-4" id="settingsAccordion">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSettings" aria-expanded="false" aria-controls="collapseSettings">
|
|
<i class="fas fa-cog me-2"></i>API设置
|
|
</button>
|
|
</h2>
|
|
<div id="collapseSettings" class="accordion-collapse collapse" data-bs-parent="#settingsAccordion">
|
|
<div class="accordion-body">
|
|
<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>
|
|
</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>
|
|
</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-image me-2"></i>图像生成</h5>
|
|
<div class="input-group mb-3">
|
|
<textarea class="form-control" id="messageInput" rows="3" placeholder="输入您的图像生成请求..."></textarea>
|
|
</div>
|
|
<div class="d-flex flex-column gap-3">
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text">生成数量</span>
|
|
<input type="number" class="form-control" id="batchCount" min="1" max="20" value="6" placeholder="输入生成数量">
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-primary flex-fill" onclick="sendMessage()">
|
|
<i class="fas fa-paper-plane me-2"></i>生成一张
|
|
</button>
|
|
<button class="btn btn-success flex-fill" onclick="sendBatchMessage()">
|
|
<i class="fas fa-magic me-2"></i>批量生成
|
|
</button>
|
|
</div>
|
|
<small class="text-muted">支持1-20张图像同时生成</small>
|
|
</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="accordion mb-4" id="chatAccordion">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseChat" aria-expanded="false" aria-controls="collapseChat">
|
|
<i class="fas fa-history me-2"></i>对话历史
|
|
</button>
|
|
</h2>
|
|
<div id="collapseChat" class="accordion-collapse collapse" data-bs-parent="#chatAccordion">
|
|
<div class="accordion-body">
|
|
<div id="chatHistory" style="max-height: 400px; overflow-y: auto;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 生成的图像画廊 -->
|
|
<div class="mb-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="mb-0"><i class="fas fa-images me-2"></i>生成的图像</h5>
|
|
<button class="btn btn-success" id="downloadAllImagesBtn" style="display: none;">
|
|
<i class="fas fa-download me-2"></i>全部下载
|
|
</button>
|
|
</div>
|
|
<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-fullscreen">
|
|
<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 position-relative">
|
|
<!-- 左翻页按钮 -->
|
|
<button type="button" class="btn btn-light position-absolute top-50 start-0 translate-middle-y" id="prevImageBtn">
|
|
<i class="fas fa-chevron-left"></i>
|
|
</button>
|
|
|
|
<!-- 图像显示区域 -->
|
|
<img id="viewerModalImage" src="" alt="查看图像" class="img-fluid">
|
|
|
|
<!-- 右翻页按钮 -->
|
|
<button type="button" class="btn btn-light position-absolute top-50 end-0 translate-middle-y" id="nextImageBtn">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" id="viewerDeleteImage">
|
|
<i class="fas fa-trash me-2"></i>删除图像
|
|
</button>
|
|
<button type="button" class="btn btn-primary" id="viewerDownloadImage">
|
|
<i class="fas fa-download me-2"></i>下载图像
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</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> |