56 lines
5.4 KiB
HTML
56 lines
5.4 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>WhaleTown 角色工坊</title>
|
||
<link rel="icon" href="data:,">
|
||
<link rel="stylesheet" href="styles.css?v=20260829-refactor-3">
|
||
</head>
|
||
<body>
|
||
<style>.pose-generate{width:100%;height:30px;border:0;background:#147b78;color:#fff;font-size:11px;cursor:pointer}.pose-generate:disabled{background:#aeb8b5}.prompt-cell small{display:block;color:#b44736;font-size:9px;margin-top:4px}.identity-result{background:#fff;border:1px solid #dce1df;padding:12px;margin-bottom:14px}.identity-result>span{display:block;font-size:12px;font-weight:700;margin-bottom:8px}.identity-result img{display:block;width:min(520px,100%);max-height:420px;object-fit:contain;margin:auto;background:#ff00ff}</style>
|
||
<header>
|
||
<div class="brand"><span class="mark">W</span><div><strong>WhaleTown</strong><span>角色工坊</span></div></div>
|
||
<div id="health" class="health"><i></i><span>检查产线</span></div>
|
||
</header>
|
||
<main>
|
||
<aside>
|
||
<section class="creator">
|
||
<div class="section-title"><span>新建角色</span><small>8 × 4 动画皮肤</small></div>
|
||
<label id="dropzone" class="dropzone">
|
||
<input id="file" type="file" accept="image/png,image/jpeg,image/webp">
|
||
<img id="sourcePreview" alt="角色参考图预览">
|
||
<div id="dropHint"><b>＋</b><strong>放入角色参考图</strong><span>PNG / JPG / WebP，最大 8MB</span></div>
|
||
</label>
|
||
<label class="field"><span>角色名称</span><input id="name" maxlength="40" placeholder="例如：蓝鲸研究员"></label>
|
||
<fieldset><legend>生成质量</legend><div class="segments">
|
||
<label><input type="radio" name="quality" value="low"><span>草稿</span></label>
|
||
<label><input type="radio" name="quality" value="medium" checked><span>标准</span></label>
|
||
<label><input type="radio" name="quality" value="high"><span>精细</span></label>
|
||
</div></fieldset>
|
||
<button id="generate" class="primary" disabled><span>开始生成</span><b>→</b></button>
|
||
<p id="formError" class="error"></p>
|
||
</section>
|
||
<section class="history"><div class="section-title"><span>制作记录</span><button id="refresh" title="刷新">↻</button></div><div id="jobList"></div></section>
|
||
</aside>
|
||
<section class="workspace">
|
||
<div id="empty" class="empty"><div class="grid-icon"><i></i><i></i><i></i><i></i></div><h1>任务 1 · 生成身份母版</h1><p>用户图 + 海风少年单格风格参考，只生成一个正面身份角色。</p><div class="identity-inputs"><img src="/references/whaleboy_identity_single.png?v=2" alt="海风少年官方身份参考图"><div><b>本任务真实提示词</b><pre id="identityPrompt">正在加载脚本提示词…</pre></div></div></div>
|
||
<div id="jobView" class="job-view hidden">
|
||
<div class="job-head"><div><span id="jobStatus" class="status"></span><h1 id="jobName"></h1><p id="jobMessage"></p></div><button id="continueJob" class="primary hidden">确认身份母版，生成动作 →</button><span id="jobTime"></span></div>
|
||
<div class="progress"><i id="progressBar"></i></div>
|
||
<div id="identityResult" class="identity-result hidden"><span>任务 1 · 身份母版结果</span><img id="identityImage" alt="生成的身份母版"></div>
|
||
<div id="actionPreview" class="preview-panel hidden">
|
||
<div class="preview-top"><div class="tabs" id="directionTabs"><button data-row="0" class="active">正面</button><button data-row="1">背面</button><button data-row="2">右侧</button><button data-row="3">左侧</button></div><span id="frameLabel">第 1 / 8 帧</span></div>
|
||
<div class="stage"><canvas id="canvas" width="320" height="320"></canvas><img id="poseCanvasPreview" class="pose-canvas-preview hidden" alt="当前动作格生成预览"></div>
|
||
<div id="frames" class="frames"></div>
|
||
</div>
|
||
<div id="actionTask" class="prompt-box hidden"><div class="task-heading"><span>任务 2 · 四方向逐格动作</span><span id="poseSummary" class="pose-summary"></span><button id="copyPrompt" title="复制提示词">复制当前格</button></div><div class="preview-note">生成完成后立即显示候选图；QA 不通过时也保留最后一次候选，确认无误后再重试。</div><div id="jobPromptGrid" class="prompt-grid"></div></div>
|
||
<div id="downloads" class="downloads hidden"><a data-file="spritesheet_path" download>下载皮肤表</a><a data-file="review_path" download>下载验收图</a><a data-file="feet_zoom_path" download>下载足部检查图</a></div>
|
||
<details><summary>运行日志</summary><pre id="logs"></pre></details>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<style>.prompt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;background:#f7f9f8}.prompt-cell{background:#fff;border:1px solid #dce1df;padding:6px;min-width:0}.prompt-cell.active{border:2px solid #147b78}.prompt-cell img{width:100%;height:62px;object-fit:contain;background:#eef1ef}.prompt-cell b{display:block;font-size:10px;margin:4px 0}.prompt-cell p{font-size:9px;line-height:1.35;color:#6b7478;height:58px;overflow:auto;margin:0;white-space:pre-wrap}@media(max-width:760px){.prompt-grid{grid-template-columns:repeat(2,1fr)}}</style><script src="app.js?v=20260829-refactor-3"></script>
|
||
</body>
|
||
</html>
|