158 lines
5.1 KiB
HTML
158 lines
5.1 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>Image Prompt Studio</title>
|
||
<link rel="stylesheet" href="./styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="app-shell">
|
||
<aside class="sidebar panel">
|
||
<div class="brand-lockup">
|
||
<div class="brand-mark"></div>
|
||
<div>
|
||
<p class="eyebrow">Image Prompt Studio</p>
|
||
<h1>简洁版图片生成</h1>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-section">
|
||
<span class="sidebar-label">服务状态</span>
|
||
<strong id="healthLabel">检查中</strong>
|
||
<p class="sidebar-copy">
|
||
服务端代理 OpenAI，浏览器不直接暴露 API Key。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="sidebar-section">
|
||
<span class="sidebar-label">默认输出</span>
|
||
<ul class="sidebar-list">
|
||
<li id="modelLabel">gpt-image-2</li>
|
||
<li>1024 × 1024</li>
|
||
<li>PNG</li>
|
||
<li>High quality</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="sidebar-section">
|
||
<span class="sidebar-label">快捷方式</span>
|
||
<p class="sidebar-copy">
|
||
按 <kbd>Ctrl</kbd> + <kbd>Enter</kbd> 可直接开始生成。
|
||
</p>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="workspace">
|
||
<section class="hero panel">
|
||
<div>
|
||
<p class="eyebrow">Simple Flow</p>
|
||
<h2>输入一句 Prompt，剩下的交给生成流程。</h2>
|
||
<p class="hero-copy">
|
||
参考你给的设计图，这一版收敛成苹果风格的轻量工作台：浅色背景、大圆角、弱边框和清晰分区。
|
||
</p>
|
||
</div>
|
||
<div class="hero-orbital">
|
||
<div class="orb orb-blue"></div>
|
||
<div class="orb orb-pink"></div>
|
||
<div class="orb orb-silver"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="composer panel">
|
||
<div class="section-heading">
|
||
<div>
|
||
<p class="section-kicker">Prompt</p>
|
||
<h3>Describe your image</h3>
|
||
</div>
|
||
<button
|
||
id="clearPromptButton"
|
||
class="secondary-button"
|
||
type="button"
|
||
>
|
||
清空
|
||
</button>
|
||
</div>
|
||
|
||
<label class="prompt-label" for="promptInput"
|
||
>输入你想生成的画面描述</label
|
||
>
|
||
<textarea
|
||
id="promptInput"
|
||
rows="8"
|
||
placeholder="例如：一台银白色笔记本电脑放在浅灰色桌面上，清晨自然光从左侧落下，极简静物摄影，细节干净，像苹果官网产品页。"
|
||
></textarea>
|
||
|
||
<div class="composer-meta">
|
||
<span id="promptStats">等待输入</span>
|
||
<span class="muted">系统将使用稳定默认参数生成 1 张图片</span>
|
||
</div>
|
||
|
||
<div class="example-strip">
|
||
<span class="example-label">示例 Prompt</span>
|
||
<div id="examplePromptList" class="example-list"></div>
|
||
</div>
|
||
|
||
<div class="composer-footer">
|
||
<div class="meta-pills">
|
||
<span>Single prompt</span>
|
||
<span>Server proxy</span>
|
||
<span>Download ready</span>
|
||
</div>
|
||
<button id="generateButton" class="primary-button" type="button">
|
||
生成图片
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="dashboard-grid">
|
||
<article class="panel processing-panel">
|
||
<div class="section-heading">
|
||
<div>
|
||
<p class="section-kicker">Processing</p>
|
||
<h3>等待过程</h3>
|
||
</div>
|
||
<span id="processingBadge" class="status-badge">待命</span>
|
||
</div>
|
||
|
||
<p id="processingLead" class="processing-lead">
|
||
准备就绪，输入 Prompt 后即可开始生成。
|
||
</p>
|
||
|
||
<div class="progress-track" aria-hidden="true">
|
||
<div id="progressFill" class="progress-fill"></div>
|
||
</div>
|
||
|
||
<ol id="processingSteps" class="processing-steps"></ol>
|
||
</article>
|
||
|
||
<article class="panel result-panel">
|
||
<div class="section-heading">
|
||
<div>
|
||
<p class="section-kicker">Result</p>
|
||
<h3>生成结果</h3>
|
||
</div>
|
||
<button
|
||
id="downloadButton"
|
||
class="secondary-button"
|
||
type="button"
|
||
disabled
|
||
>
|
||
下载图片
|
||
</button>
|
||
</div>
|
||
|
||
<div id="errorBanner" class="error-banner" hidden></div>
|
||
<p id="requestMeta" class="request-meta">
|
||
生成完成后会在这里显示耗时和输出信息。
|
||
</p>
|
||
<div id="resultStage" class="result-stage"></div>
|
||
</article>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<script type="module" src="./app.js"></script>
|
||
</body>
|
||
</html>
|