mirror of
https://ghproxy.net/https://github.com/skylarGW/ai-image-generator.git
synced 2025-08-17 19:21:11 +08:00
143 lines
6.8 KiB
HTML
143 lines
6.8 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>生成结果 - AI图片生成器</title>
|
||
<meta name="description" content="查看您的AI生成图片结果">
|
||
<meta name="robots" content="noindex, nofollow">
|
||
<link rel="stylesheet" href="styles.css">
|
||
<link rel="stylesheet" href="results.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>🎨 生成结果</h1>
|
||
<p>您的AI图片已生成完成</p>
|
||
<button onclick="goBack()" class="back-btn">← 返回表单</button>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- 生成进度区域 -->
|
||
<div id="generation-progress" class="progress-container" style="display: none;">
|
||
<div class="progress-content">
|
||
<div class="loading-spinner"></div>
|
||
<h3>正在生成您的AI图片...</h3>
|
||
<p id="progress-text">正在处理您的需求</p>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progress-fill"></div>
|
||
</div>
|
||
<small>预计需要30-60秒</small>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 结果展示区域 -->
|
||
<div id="results-container" class="results-container" style="display: none;">
|
||
<div class="results-header">
|
||
<h2>🖼️ 生成的图片</h2>
|
||
<div class="results-actions">
|
||
<button onclick="downloadAll()" class="action-btn download-btn">📥 下载全部</button>
|
||
<button onclick="regenerateImages()" class="action-btn regenerate-btn">🔄 重新生成</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="images-grid" class="images-grid">
|
||
<!-- 生成的图片将在这里显示 -->
|
||
</div>
|
||
|
||
<!-- 图片详情面板 -->
|
||
<div id="image-details" class="image-details" style="display: none;">
|
||
<div class="details-content">
|
||
<button onclick="closeDetails()" class="close-btn">×</button>
|
||
<div class="details-grid">
|
||
<div class="details-image">
|
||
<img id="detail-image" src="" alt="生成的图片">
|
||
<div class="image-actions">
|
||
<button onclick="downloadImage()" class="action-btn">📥 下载</button>
|
||
<button onclick="shareImage()" class="action-btn">📤 分享</button>
|
||
<button onclick="editImage()" class="action-btn">✏️ 编辑</button>
|
||
</div>
|
||
</div>
|
||
<div class="details-info">
|
||
<h3>图片信息</h3>
|
||
<div class="info-item">
|
||
<label>尺寸:</label>
|
||
<span id="detail-dimensions">-</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>生成时间:</label>
|
||
<span id="detail-time">-</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>使用提示词:</label>
|
||
<p id="detail-prompt">-</p>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>生成服务:</label>
|
||
<span id="detail-service">-</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>种子值:</label>
|
||
<span id="detail-seed">-</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 错误提示区域 -->
|
||
<div id="error-container" class="error-container" style="display: none;">
|
||
<div class="error-content">
|
||
<h3>❌ 生成失败</h3>
|
||
<p id="error-message">发生了未知错误</p>
|
||
<div class="error-actions">
|
||
<button onclick="retryGeneration()" class="action-btn retry-btn">🔄 重试</button>
|
||
<button onclick="goBack()" class="action-btn">← 返回表单</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API密钥设置面板 -->
|
||
<div id="api-setup" class="api-setup" style="display: none;">
|
||
<div class="setup-content">
|
||
<h3>🔑 API密钥设置</h3>
|
||
<p>为了使用真实的AI图片生成服务，请设置您的API密钥：</p>
|
||
|
||
<div class="service-options">
|
||
<label class="service-option">
|
||
<input type="radio" name="service" value="stability" checked>
|
||
<div class="service-info">
|
||
<strong>Stability AI</strong>
|
||
<small>性价比高，$0.01/图片</small>
|
||
</div>
|
||
</label>
|
||
<label class="service-option">
|
||
<input type="radio" name="service" value="openai">
|
||
<div class="service-info">
|
||
<strong>OpenAI DALL-E</strong>
|
||
<small>质量优秀，$0.02/图片</small>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="api-input">
|
||
<label for="api-key">API密钥:</label>
|
||
<input type="password" id="api-key" placeholder="请输入您的API密钥">
|
||
<small>您的API密钥将安全存储在本地浏览器中</small>
|
||
</div>
|
||
|
||
<div class="setup-actions">
|
||
<button onclick="saveApiKey()" class="action-btn primary">保存并继续</button>
|
||
<button onclick="useDemo()" class="action-btn secondary">使用演示模式</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="config.js"></script>
|
||
<script src="ai-service.js"></script>
|
||
<script src="results.js"></script>
|
||
</body>
|
||
</html>
|
