调整 baseline 关键点 + 新增极简测试页

- 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
2026-07-12 22:27:02 +08:00
parent 5d9d91bc82
commit b163a3f34a
3 changed files with 138 additions and 13 deletions
@@ -0,0 +1,123 @@
+<!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>