xsl
b163a3f34a
- head_mask.py: BASELINE_IDX 改为 [162,71,68,104,69,108,151,337,299,333,298,301,389]， 左端点 21→162、右端点 251→389，新增 71/301 两点；同步更新注释 - static/test_simple.html: 极简测试页，仅需选图片+发型，原图与结果左右并排对比 - .gitignore: 忽略 report_hairline_v2.zip
124 lines
5.8 KiB
HTML
124 lines
5.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>发际线生发</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f5f5; color: #333; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
|
|
.wrap { max-width: 720px; width: 100%; }
|
|
h1 { font-size: 20px; margin-bottom: 16px; text-align: center; }
|
|
.card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: 20px; }
|
|
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
|
|
.field { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; }
|
|
label { font-size: 13px; font-weight: 600; color: #555; }
|
|
input[type=file] { padding: 8px; border: 2px dashed #ddd; border-radius: 8px; font-size: 14px; cursor: pointer; }
|
|
select { padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: #fff; }
|
|
.btn { padding: 10px 28px; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; font-weight: 600; background: #2563eb; color: #fff; white-space: nowrap; }
|
|
.btn:disabled { background: #93c5fd; cursor: not-allowed; }
|
|
.status { padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; display: none; }
|
|
.status.info { background: #dbeafe; color: #1e40af; display: block; }
|
|
.status.error { background: #fee2e2; color: #991b1b; display: block; }
|
|
.status.success { background: #d1fae5; color: #065f46; display: block; }
|
|
.result { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
.result .col { text-align: center; }
|
|
.result .col .cap { font-size: 13px; color: #888; margin-bottom: 8px; font-weight: 600; }
|
|
.result img { width: 100%; border-radius: 8px; box-shadow: 0 1px 6px rgba(0,0,0,.12); cursor: zoom-in; display: block; }
|
|
.result .empty { color: #bbb; padding: 60px 0; font-size: 14px; grid-column: 1 / -1; text-align: center; }
|
|
.hint { font-size: 12px; color: #999; margin-top: 8px; text-align: center; }
|
|
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; z-index: 50; cursor: zoom-out; padding: 24px; }
|
|
.lightbox img { max-width: 100%; max-height: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<h1>发际线生发</h1>
|
|
<div class="card">
|
|
<div class="row">
|
|
<div class="field">
|
|
<label>选择图片</label>
|
|
<input type="file" id="imageFile" accept="image/*">
|
|
</div>
|
|
<div class="field">
|
|
<label>发型</label>
|
|
<select id="hairlineId">
|
|
<option value="chang_zhixian">直线</option>
|
|
<option value="chang_tuoyuan">椭圆</option>
|
|
<option value="chang_bolang">波浪</option>
|
|
<option value="chang_xinxing">心形</option>
|
|
<option value="chang_huaban">花瓣</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn" id="submitBtn" onclick="submit()">生成</button>
|
|
</div>
|
|
<div class="hint">其余参数走默认值（pushed 遮罩 + multiband 融合）</div>
|
|
</div>
|
|
|
|
<div class="status hidden" id="statusBar"></div>
|
|
|
|
<div class="card">
|
|
<div class="result" id="resultArea">
|
|
<div class="empty">上传图片、选发型、点生成</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lightbox" id="lightbox" onclick="this.style.display='none'"><img id="lightboxImg"></div>
|
|
|
|
<script>
|
|
const API = window.location.origin + '/api/v1/hairline/grow_v2';
|
|
const TOKEN = 'dev-shared-secret-2026';
|
|
|
|
function $(id) { return document.getElementById(id); }
|
|
function setStatus(text, type) { const b = $('statusBar'); b.textContent = text; b.className = 'status ' + type; }
|
|
function zoom(src) { $('lightboxImg').src = src; $('lightbox').style.display = 'flex'; }
|
|
|
|
async function submit() {
|
|
const file = $('imageFile').files[0];
|
|
if (!file) { setStatus('请先选择图片', 'error'); return; }
|
|
const btn = $('submitBtn');
|
|
btn.disabled = true; btn.textContent = '生成中...';
|
|
setStatus('正在生成（约 5~15 秒）...', 'info');
|
|
// 先读原图用于对比
|
|
const origSrc = await new Promise(r => { const fr = new FileReader(); fr.onload = () => r(fr.result); fr.readAsDataURL(file); });
|
|
$('resultArea').innerHTML =
|
|
'<div class="col"><div class="cap">原图</div><img src="' + origSrc + '"></div>'
|
|
+ '<div class="col"><div class="cap">⏳ 生成中...</div><div class="empty" style="padding:40px 0">处理中</div></div>';
|
|
|
|
const form = new FormData();
|
|
form.append('image_file', file);
|
|
form.append('hairline_id', $('hairlineId').value);
|
|
|
|
try {
|
|
const resp = await fetch(API, {
|
|
method: 'POST',
|
|
headers: { 'X-Internal-Token': TOKEN },
|
|
body: form,
|
|
});
|
|
const json = await resp.json();
|
|
if (json.code === 0 && json.data && json.data.final_base64) {
|
|
const src = json.data.final_base64;
|
|
setStatus('✅ 生成成功', 'success');
|
|
$('resultArea').innerHTML =
|
|
'<div class="col"><div class="cap">原图</div><img src="' + origSrc + '" onclick="zoom(this.src)"></div>'
|
|
+ '<div class="col"><div class="cap">生成结果</div><img src="' + src + '" onclick="zoom(this.src)"></div>';
|
|
} else {
|
|
setStatus('❌ 失败：' + (json.message || '未知错误'), 'error');
|
|
$('resultArea').innerHTML = '<div class="empty">生成失败：' + (json.message||'') + '</div>';
|
|
}
|
|
} catch (err) {
|
|
setStatus('❌ 网络错误：' + err.message, 'error');
|
|
$('resultArea').innerHTML = '<div class="empty">请求失败</div>';
|
|
} finally {
|
|
btn.disabled = false; btn.textContent = '生成';
|
|
}
|
|
}
|
|
|
|
$('imageFile').addEventListener('change', function() {
|
|
if (this.files.length) setStatus('已选择：' + this.files[0].name, 'info');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|