223 lines
9.9 KiB
HTML
223 lines
9.9 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>图片生成器</title>
|
||
<link rel="stylesheet" href="style.css" />
|
||
</head>
|
||
<body>
|
||
|
||
<div id="app">
|
||
|
||
<!-- Header -->
|
||
<header>
|
||
<div class="logo">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||
<circle cx="8.5" cy="8.5" r="1.5"/>
|
||
<polyline points="21,15 16,10 5,21"/>
|
||
</svg>
|
||
<span>图片生成器</span>
|
||
</div>
|
||
<button class="icon-btn" id="openSettings" title="设置">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="3"/>
|
||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||
</svg>
|
||
</button>
|
||
</header>
|
||
|
||
<!-- API Key Alert -->
|
||
<div class="alert-banner" id="apiKeyAlert" style="display:none">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||
<span>未配置 API Key，请先在 <button class="link-btn" id="alertSettingsBtn">设置</button> 中填写。</span>
|
||
</div>
|
||
|
||
<main>
|
||
|
||
|
||
|
||
<form id="generateForm">
|
||
|
||
<!-- Quick prompts -->
|
||
<div class="prompt-tags" id="promptTags">
|
||
<span class="tags-label">快捷描述</span>
|
||
<div class="tags-list">
|
||
<button type="button" class="tag-pill" data-tag="雪景，柔和光线，细腻质感">雪景</button>
|
||
<button type="button" class="tag-pill" data-tag="日落，金色时刻，暖色调">日落</button>
|
||
<button type="button" class="tag-pill" data-tag="森林，薄雾，空气感，8K">森林</button>
|
||
<button type="button" class="tag-pill" data-tag="赛博朋克，霓虹灯，夜晚，雨中">赛博朋克</button>
|
||
<button type="button" class="tag-pill" data-tag="动漫风格，插画，精致细节">动漫风格</button>
|
||
<button type="button" class="tag-pill" data-tag="人像摄影，单反背景虚化，专业打光">人像</button>
|
||
<button type="button" class="tag-pill" data-tag="城市夜景，长曝光，车轨">城市夜景</button>
|
||
<button type="button" class="tag-pill" data-tag="水下摄影，蓝色调，光影">水下</button>
|
||
<button type="button" class="tag-pill" data-tag="治愈系插画，柔和配色，温暖">治愈系</button>
|
||
<button type="button" class="tag-pill" data-tag="科幻概念设计，高达，细节丰富">科幻</button>
|
||
<button type="button" class="tag-pill" data-tag="油画质感，古典，厚重笔触">油画</button>
|
||
<button type="button" class="tag-pill" data-tag="极简主义，留白，清新">极简</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Prompt -->
|
||
<div class="prompt-row">
|
||
<textarea
|
||
id="promptInput"
|
||
placeholder="描述你想要生成的图片..."
|
||
rows="4"
|
||
maxlength="1500"
|
||
autofocus
|
||
></textarea>
|
||
<div class="prompt-footer">
|
||
<span class="char-count" id="charCount">0 / 1500</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Options -->
|
||
<div class="options-grid">
|
||
|
||
<!-- Left column -->
|
||
<div class="options-col">
|
||
|
||
<!-- Aspect ratio -->
|
||
<div class="opt-group">
|
||
<label class="opt-label">比例</label>
|
||
<select id="aspectRatio">
|
||
<option value="1:1">1:1 — 正方形</option>
|
||
<option value="16:9" selected>16:9 — 宽屏</option>
|
||
<option value="4:3">4:3 — 标准</option>
|
||
<option value="3:2">3:2 — 照片</option>
|
||
<option value="2:3">2:3 — 竖图</option>
|
||
<option value="3:4">3:4 — 竖图</option>
|
||
<option value="9:16">9:16 — 竖屏</option>
|
||
<option value="21:9">21:9 — 超宽（仅 image-01）</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Response format -->
|
||
<div class="opt-group">
|
||
<label class="opt-label">输出格式</label>
|
||
<select id="responseFormat">
|
||
<option value="url">URL（24小时有效）</option>
|
||
<option value="base64">Base64（直接保存）</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Count -->
|
||
<div class="opt-group">
|
||
<label class="opt-label">生成数量 <span class="opt-hint">（1-9张）</span></label>
|
||
<div class="stepper">
|
||
<button type="button" class="stepper-btn" id="nMinus">−</button>
|
||
<input type="number" id="nInput" value="1" min="1" max="9" readonly />
|
||
<button type="button" class="stepper-btn" id="nPlus">+</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Seed -->
|
||
<div class="opt-group">
|
||
<label class="opt-label">随机种子 <span class="opt-hint">（留空则随机）</span></label>
|
||
<input type="number" id="seedInput" placeholder="输入整数用于复现" min="0" step="1" />
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Right column -->
|
||
|
||
<div class="options-col">
|
||
|
||
<!-- image-01: custom dimensions -->
|
||
<div class="opt-group dimension-group" id="dimensionGroup">
|
||
<label class="opt-label">自定义分辨率 <span class="opt-hint">（512-2048，必须是8的倍数）</span></label>
|
||
<div class="dim-row">
|
||
<input type="number" id="widthInput" placeholder="宽度" min="512" max="2048" step="8" />
|
||
<span class="dim-x">×</span>
|
||
<input type="number" id="heightInput" placeholder="高度" min="512" max="2048" step="8" />
|
||
</div>
|
||
<p class="opt-note">同时设置宽高时优先于比例</p>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- Toggles -->
|
||
<div class="toggle-group">
|
||
<label class="toggle-row">
|
||
<input type="checkbox" id="promptOptimizer" />
|
||
<span class="toggle-track"><span class="toggle-thumb"></span></span>
|
||
<span class="toggle-label">自动优化 Prompt</span>
|
||
</label>
|
||
<label class="toggle-row">
|
||
<input type="checkbox" id="watermark" />
|
||
<span class="toggle-track"><span class="toggle-thumb"></span></span>
|
||
<span class="toggle-label">添加 AI 水印</span>
|
||
</label>
|
||
</div>
|
||
|
||
</div>
|
||
</div><!-- /options-grid -->
|
||
|
||
<!-- Generate -->
|
||
<button type="submit" class="generate-btn" id="generateBtn">
|
||
<svg class="btn-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polygon points="13,2 3,14 12,14 11,22 21,10 12,10 13,2"/>
|
||
</svg>
|
||
<span class="btn-text">生成图片</span>
|
||
<svg class="spinner" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10" stroke-dasharray="60" stroke-dashoffset="20"/>
|
||
</svg>
|
||
</button>
|
||
|
||
</form>
|
||
|
||
<!-- Error -->
|
||
<div class="error-msg" id="errorMsg" style="display:none"></div>
|
||
|
||
<!-- Results -->
|
||
<div id="resultArea" style="display:none">
|
||
<div class="result-meta" id="resultMeta"></div>
|
||
<div class="image-grid" id="imageGrid"></div>
|
||
</div>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Settings Modal -->
|
||
<div class="modal-overlay" id="settingsModal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h2>设置</h2>
|
||
<button class="icon-btn" id="closeSettings">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="field">
|
||
<label for="apiKeyInput">MiniMax API Key</label>
|
||
<div class="input-row">
|
||
<input type="password" id="apiKeyInput" placeholder="eyJhbGciOiJIUzI1NiIsInR..." />
|
||
<button class="icon-btn" id="toggleKey" type="button" title="显示/隐藏">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<p class="field-hint">请从 <a href="https://platform.minimaxi.com/user-center/payment/token-plan" target="_blank" rel="noopener">platform.minimaxi.com</a> 获取</p>
|
||
</div>
|
||
<div class="field">
|
||
<label for="baseUrlInput">API 地址</label>
|
||
<input type="text" id="baseUrlInput" placeholder="https://api.minimaxi.com" />
|
||
<p class="field-hint">默认使用中国区 API，仅在需要代理时修改。</p>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn-secondary" id="cancelSettings">取消</button>
|
||
<button class="btn-primary" id="saveSettingsBtn">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="ui.js" defer></script>
|
||
</body>
|
||
</html>
|