feat(接口2/7): hair_style改为多选复选框，新增接口7测试页，网关注册v2路由

- 接口2/7测试页：发型从单选下拉框改为多选复选框+全选/全不选，提交时逗号分隔
- 新建static/test_interface7.html（基于接口2测试页，紫色主题，调用/api/v1/hair/grow-v2）
- gateway/app.py：注册/api/v1/hair/grow-v2代理路由 + 首页索引
- integration.html：新增接口7完整文档卡片（入参/出参/测试页链接）

Co-Authored-By: Claude <noreply@anthropic.com>

gateway/app.py

@@ -196,6 +196,7 @@ async def index():
             "if3_hair_grow_b": "/static/test_interface3.html",
             "if4_features": "/static/test_interface4.html",
             "if5_hairline": "/static/test_interface5.html",
+            "if7_hair_grow_v2": "/static/test_interface7.html",
         },
     }
 
@@ -320,3 +321,9 @@ async def face_features(
 async def hairline_generate(request: Request):
     """接口5：发际线PNG生成"""
     return await _proxy(request, "/api/v1/hairline/generate")
+
+
+@app.post("/api/v1/hair/grow-v2", tags=["生发"])
+async def hair_grow_v2(request: Request):
+    """接口7：C端生发 v2（add_hair2 工作流）"""
+    return await _proxy(request, "/api/v1/hair/grow-v2")

static/integration.html

@@ -56,6 +56,7 @@
     <a href="#if3">接口3</a>
     <a href="#if4">接口4</a>
     <a href="#if5">接口5</a>
+    <a href="#if7">接口7</a>
     <a href="#errors">错误码</a>
     <a href="#test">在线测试</a>
   </div>
@@ -129,13 +130,14 @@ const { code, data } = await res.json();
   <div class="card" id="if2">
     <h2>2. C端生发 &nbsp;<span class="badge post">POST</span> &nbsp;<code>/api/v1/hair/grow</code></h2>
     <div class="card-body">
-      <p class="desc">上传正面照 + 性别 → 多组发际线方案。每组含发际线叠加预览图 + ComfyUI 生发效果图。</p>
+      <p class="desc">上传正面照 + 性别 + 发型序号 → 返回指定发际线类型的预览图与生发图。</p>
 
       <p><strong>入参</strong></p>
       <table>
         <tr><th>参数</th><th>类型</th><th>必填</th><th>说明</th></tr>
         <tr><td>image_file / image_url / image_base64</td><td>—</td><td>三选一</td><td>用户正面照</td></tr>
         <tr><td>gender</td><td>string</td><td>✅ 必填</td><td><code>"male"</code> / <code>"female"</code></td></tr>
+        <tr><td>hair_style</td><td>int</td><td>✅ 必填</td><td>发型序号。female: 1~5，male: 1~4（见下方映射）</td></tr>
       </table>
 
       <p style="margin-top:12px"><strong>data.results[] 元素</strong></p>
@@ -233,6 +235,37 @@ console.log(features['四季色彩季型']); // "冷夏型"（中文字段也保
     </div>
   </div>
 
+  <!-- ======== 接口7 ======== -->
+  <div class="card" id="if7">
+    <h2>7. C端生发 v2 &nbsp;<span class="badge post">POST</span> &nbsp;<code>/api/v1/hair/grow-v2</code> &nbsp;<span class="badge warn">v2</span></h2>
+    <div class="card-body">
+      <p class="desc">功能与<a href="#if2">接口2</a>完全一致，仅 ComfyUI 工作流不同——使用 <code>add_hair2.json</code> 替代 <code>add_hair.json</code>（Flux-2 Klein 9b）。</p>
+
+      <p><strong>入参</strong></p>
+      <table>
+        <tr><th>参数</th><th>类型</th><th>必填</th><th>说明</th></tr>
+        <tr><td>image_file / image_url / image_base64</td><td>—</td><td>三选一</td><td>用户正面照</td></tr>
+        <tr><td>gender</td><td>string</td><td>✅ 必填</td><td><code>"male"</code> / <code>"female"</code></td></tr>
+        <tr><td>hair_style</td><td>int</td><td>✅ 必填</td><td>发型序号。female: 1~5，male: 1~4</td></tr>
+      </table>
+
+      <p style="margin-top:12px"><strong>data.results[] 元素</strong>（同接口2）</p>
+      <table>
+        <tr><th>字段</th><th>类型</th><th>说明</th></tr>
+        <tr><td><code>image_url</code></td><td>string</td><td>发际线叠加预览图</td></tr>
+        <tr><td><code>grown_image_url</code></td><td>string</td><td>生发后效果图 ⚠ 可空</td></tr>
+        <tr><td><code>hairline_type</code></td><td>string</td><td>发际线类型 key</td></tr>
+        <tr><td><code>order</code></td><td>int</td><td>排序</td></tr>
+      </table>
+
+      <p style="margin-top:8px;font-size:12px;color:#64748b">
+        Female 5 种：ellipse/flower/heart/straight/wave &nbsp;|&nbsp;
+        Male 4 种：ellipse/m/straight/inverse_arc<br>
+        ⚠ 工作流: add_hair2.json（Flux-2 Klein 9b），输入节点 26，输出节点 75。
+      </p>
+    </div>
+  </div>
+
   <!-- ======== 错误码 ======== -->
   <div class="card" id="errors">
     <h2>⚠ 错误码</h2>
@@ -262,6 +295,7 @@ console.log(features['四季色彩季型']); // "冷夏型"（中文字段也保
         <tr><td>3. B端生发</td><td><a href="/static/test_interface3.html" class="link">/static/test_interface3.html</a></td><td>划线图上传 → 生发效果图</td></tr>
         <tr><td>4. 用户特征</td><td><a href="/static/test_interface4.html" class="link">/static/test_interface4.html</a></td><td>上传照片 → 42项面部特征表格 + 原始JSON</td></tr>
         <tr><td>5. 发际线PNG</td><td><a href="/static/test_interface5.html" class="link">/static/test_interface5.html</a></td><td>上传+性别 → 发际线方案+中心点坐标</td></tr>
+        <tr><td>7. C端生发 v2</td><td><a href="/static/test_interface7.html" class="link">/static/test_interface7.html</a></td><td>同接口2，使用 add_hair2.json 工作流（Flux-2 Klein 9b）</td></tr>
       </table>
       <p style="font-size:12px;color:#94a3b8;margin-top:12px">
         完整 API 文档：<a href="/docs" class="link">/docs</a>（Swagger UI）

static/test_interface2.html

@@ -21,6 +21,12 @@
   .form-group { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
   .form-group label { font-size: 13px; font-weight: 600; color: #374151; }
   .form-group select { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
+  .hair-checkboxes { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
+  .hair-checkboxes label { font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
+  .hair-checkboxes label input[type=checkbox] { cursor: pointer; }
+  .checkbox-actions { display: flex; gap: 6px; margin-left: 4px; }
+  .checkbox-actions button { font-size: 11px; padding: 2px 8px; border-radius: 4px; border: 1px solid #d1d5db; background: #f9fafb; cursor: pointer; }
+  .checkbox-actions button:hover { background: #e5e7eb; }
   .btn { padding: 10px 28px; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; font-weight: 600; transition: .2s; }
   .btn-primary { background: #2563eb; color: #fff; }
   .btn-primary:hover { background: #1d4ed8; }
@@ -63,7 +69,7 @@
 <body>
 <div class="container">
   <h1>💇 接口2 — C端生发 测试</h1>
-  <p class="subtitle">POST /api/v1/hair/grow &nbsp;|&nbsp; 正面照 + 性别 → 每个方案展示：原图 / 发际线叠加 / 生发效果</p>
+  <p class="subtitle">POST /api/v1/hair/grow &nbsp;|&nbsp; 正面照 + 性别 + 发型多选 → 所选发型的预览图与生发图</p>
 
   <div class="card">
     <div class="card-body">
@@ -71,7 +77,17 @@
         <div class="file-input"><input type="file" id="imageFile" accept="image/jpeg,image/png,.jpg,.jpeg,.png"></div>
         <div class="form-group">
           <label>性别</label>
-          <select id="gender"><option value="female" selected>👩 Female</option><option value="male">👨 Male</option></select>
+          <select id="gender" onchange="onGenderChange()"><option value="female" selected>👩 Female</option><option value="male">👨 Male</option></select>
+        </div>
+        <div class="form-group" style="align-items:flex-start">
+          <label style="padding-top:3px">发型</label>
+          <div>
+            <div class="hair-checkboxes" id="hairStyleGroup"></div>
+            <div class="checkbox-actions" style="margin-top:4px">
+              <button type="button" onclick="selectAllHair(true)">全选</button>
+              <button type="button" onclick="selectAllHair(false)">全不选</button>
+            </div>
+          </div>
         </div>
         <div class="form-group">
           <label>inpaint 遮罩</label>
@@ -95,7 +111,7 @@
   <div class="results-layout hidden" id="resultsArea">
     <div class="col-main">
       <div class="card">
-        <div class="card-header"><span>🗂️ 全部方案 — 一覧</span></div>
+        <div class="card-header"><span>🗂️ 生发结果</span></div>
         <div class="card-body" id="schemesContainer"></div>
       </div>
     </div>
@@ -128,7 +144,10 @@ async function submitTest() {
   $('submitBtn').disabled = true; $('submitBtn').textContent = '⏳ 请求中...';
   setStatus('⏳ 请求中（生发图生成较慢，请耐心）...', 'info'); $('resultsArea').classList.add('hidden');
 
+  const checked = [...document.querySelectorAll('#hairStyleGroup input:checked')].map(cb => cb.value);
+  if (checked.length === 0) { setStatus('请至少勾选一个发型', 'error'); $('submitBtn').disabled = false; $('submitBtn').textContent = '🚀 提交'; return; }
   const fd = new FormData(); fd.append('image_file', f); fd.append('gender', $('gender').value);
+  fd.append('hair_style', checked.join(','));
   fd.append('use_mask', $('useMask').value);
   fd.append('prompt', $('promptInput').value);
   try {
@@ -196,7 +215,42 @@ function copyJson() {
   });
 }
 
+const HAIR_STYLES = {
+  female: [
+    { value:'1', label:'ellipse 椭圆形' },
+    { value:'2', label:'flower 花瓣形' },
+    { value:'3', label:'heart 心形' },
+    { value:'4', label:'straight 直线形' },
+    { value:'5', label:'wave 波浪形' },
+  ],
+  male: [
+    { value:'1', label:'ellipse 椭圆形' },
+    { value:'2', label:'inverse_arc 倒弧形' },
+    { value:'3', label:'m M形' },
+    { value:'4', label:'straight 直线形' },
+  ]
+};
+
+function onGenderChange() {
+  const g = $('gender').value;
+  const div = $('hairStyleGroup');
+  div.innerHTML = '';
+  HAIR_STYLES[g].forEach(s => {
+    const cb = document.createElement('input');
+    cb.type = 'checkbox'; cb.value = s.value; cb.id = 'hs_' + s.value;
+    const lb = document.createElement('label');
+    lb.htmlFor = cb.id; lb.appendChild(cb);
+    lb.appendChild(document.createTextNode(' ' + s.label));
+    div.appendChild(lb);
+  });
+}
+
+function selectAllHair(select) {
+  document.querySelectorAll('#hairStyleGroup input[type=checkbox]').forEach(cb => { cb.checked = select; });
+}
+
 document.addEventListener('DOMContentLoaded', () => {
+  onGenderChange();  // 初始填充发型列表
   const dz = $('imageFile');
   dz.addEventListener('dragover', e => { e.preventDefault(); dz.style.borderColor='#2563eb'; });
   dz.addEventListener('dragleave', () => dz.style.borderColor='#ddd');

static/test_interface7.html

@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>接口7 — C端生发 v2 测试页</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f5f5; color: #333; }
+  .container { max-width: 1400px; margin: 0 auto; padding: 24px; }
+  h1 { font-size: 22px; margin-bottom: 6px; }
+  .subtitle { color: #888; font-size: 13px; margin-bottom: 24px; }
+
+  .card { background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: 20px; }
+  .card-header { font-weight: 700; font-size: 14px; padding: 14px 18px; border-bottom: 1px solid #f0f0f0; background: #fafafa; display: flex; justify-content: space-between; align-items: center; }
+  .card-body { padding: 18px; }
+
+  .upload-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
+  .file-input { flex: 1; min-width: 200px; }
+  .file-input input[type=file] { width: 100%; padding: 8px; border: 2px dashed #ddd; border-radius: 8px; cursor: pointer; }
+  .form-group { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
+  .form-group label { font-size: 13px; font-weight: 600; color: #374151; }
+  .form-group select { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
+  .hair-checkboxes { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
+  .hair-checkboxes label { font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
+  .hair-checkboxes label input[type=checkbox] { cursor: pointer; }
+  .checkbox-actions { display: flex; gap: 6px; margin-left: 4px; }
+  .checkbox-actions button { font-size: 11px; padding: 2px 8px; border-radius: 4px; border: 1px solid #d1d5db; background: #f9fafb; cursor: pointer; }
+  .checkbox-actions button:hover { background: #e5e7eb; }
+  .btn { padding: 10px 28px; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; font-weight: 600; transition: .2s; }
+  .btn-primary { background: #7c3aed; color: #fff; }
+  .btn-primary:hover { background: #6d28d9; }
+  .btn-primary:disabled { background: #c4b5fd; cursor: not-allowed; }
+  .btn-sm { padding: 6px 14px; font-size: 13px; }
+  .btn-outline { background: #fff; border: 1px solid #d1d5db; color: #374151; }
+  .btn-outline:hover { background: #f9fafb; }
+  .hint { font-size: 12px; color: #9ca3af; margin-top: 8px; }
+
+  .status { padding: 10px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; display: none; }
+  .status.info { background: #ede9fe; color: #5b21b6; display: block; }
+  .status.error { background: #fee2e2; color: #991b1b; display: block; }
+  .status.success { background: #d1fae5; color: #065f46; display: block; }
+
+  .results-layout { display: flex; gap: 24px; }
+  .col-main { flex: 1.8; min-width: 0; }
+  .col-side { flex: 1; min-width: 0; }
+
+  .scheme-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: 14px; overflow: hidden; }
+  .scheme-header { padding: 10px 16px; background: #fafafa; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
+  .scheme-header .badge { background: #7c3aed; color: #fff; padding: 2px 10px; border-radius: 10px; font-size: 11px; }
+  .scheme-header .tag { font-size: 11px; color: #6b7280; }
+  .scheme-imgs { display: flex; gap: 12px; padding: 12px 16px; }
+  .scheme-imgs .img-slot { flex: 1; min-width: 0; text-align: center; }
+  .scheme-imgs .img-slot .label { font-size: 11px; font-weight: 600; color: #6b7280; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }
+  .scheme-imgs .img-slot .label .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
+  .scheme-imgs .img-slot .label .dot.preview { background: #f59e0b; }
+  .scheme-imgs .img-slot .label .dot.grown { background: #059669; }
+  .scheme-imgs .img-slot .thumb { background: #222; border-radius: 6px; overflow: hidden; line-height: 0; }
+  .scheme-imgs .img-slot .thumb img { width: 100%; max-height: 220px; object-fit: contain; display: block; }
+  .scheme-imgs .img-slot .na { color: #d1d5db; font-size: 12px; padding: 30px 0; background: #f9fafb; border-radius: 6px; }
+
+  .json-panel { max-height: 550px; overflow: auto; }
+  .json-content { padding: 14px 16px; font-family: "SF Mono", "Fira Code", monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
+
+  .hidden { display: none !important; }
+
+  .badge-v2 { background: #7c3aed; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
+</style>
+</head>
+<body>
+<div class="container">
+  <h1>💇 接口7 — C端生发 v2 测试 <span class="badge-v2">add_hair2 工作流</span></h1>
+  <p class="subtitle">POST /api/v1/hair/grow-v2 &nbsp;|&nbsp; 正面照 + 性别 + 发型多选 → 所选发型的预览图与生发图（add_hair2 工作流）</p>
+
+  <div class="card">
+    <div class="card-body">
+      <div class="upload-row">
+        <div class="file-input"><input type="file" id="imageFile" accept="image/jpeg,image/png,.jpg,.jpeg,.png"></div>
+        <div class="form-group">
+          <label>性别</label>
+          <select id="gender" onchange="onGenderChange()"><option value="female" selected>👩 Female</option><option value="male">👨 Male</option></select>
+        </div>
+        <div class="form-group" style="align-items:flex-start">
+          <label style="padding-top:3px">发型</label>
+          <div>
+            <div class="hair-checkboxes" id="hairStyleGroup"></div>
+            <div class="checkbox-actions" style="margin-top:4px">
+              <button type="button" onclick="selectAllHair(true)">全选</button>
+              <button type="button" onclick="selectAllHair(false)">全不选</button>
+            </div>
+          </div>
+        </div>
+        <div class="form-group">
+          <label>inpaint 遮罩</label>
+          <select id="useMask">
+            <option value="true" selected>✅ 启用（默认）</option>
+            <option value="false">⬜ 关闭 — 空遮罩，不烧模板线</option>
+          </select>
+        </div>
+        <button class="btn btn-primary" id="submitBtn" onclick="submitTest()">🚀 提交</button>
+        <button class="btn btn-outline btn-sm" onclick="clearResults()">清除</button>
+      </div>
+      <div class="hint">JPG/PNG ≤1MB &nbsp;|&nbsp; 生发图生成较慢（数十秒~数分钟），请耐心等待 &nbsp;|&nbsp; 工作流: add_hair2.json</div>
+      <div style="margin-top:10px;display:flex;align-items:center;gap:8px">
+        <label style="font-size:13px;font-weight:600;color:#374151;white-space:nowrap">💬 提示词</label>
+        <input type="text" id="promptInput" value="补充遮罩区域的头发" style="flex:1;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;max-width:500px">
+      </div>
+      <div id="statusBar" class="status hidden"></div>
+    </div>
+  </div>
+
+  <div class="results-layout hidden" id="resultsArea">
+    <div class="col-main">
+      <div class="card">
+        <div class="card-header"><span>🗂️ 生发结果</span></div>
+        <div class="card-body" id="schemesContainer"></div>
+      </div>
+    </div>
+    <div class="col-side">
+      <div class="card">
+        <div class="card-header"><span>📋 JSON</span><button class="btn btn-outline btn-sm" onclick="copyJson()">📋 复制</button></div>
+        <div class="json-panel"><pre class="json-content" id="jsonContent"></pre></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+const API_BASE = window.location.origin;
+let _origUrl = '';
+
+const TYPE_LABELS = {
+  ellipse:'椭圆形', flower:'花瓣形', heart:'心形', straight:'直线形', wave:'波浪形', m:'M形', inverse_arc:'倒弧形'
+};
+
+function $(id) { return document.getElementById(id); }
+function setStatus(t, type) { const b=$('statusBar'); b.textContent=t; b.className='status '+type; }
+
+async function submitTest() {
+  const f = $('imageFile').files[0];
+  if (!f) { setStatus('请选择图片', 'error'); return; }
+  if (f.size > 1_000_000) { setStatus('文件超过 1 MB', 'error'); return; }
+
+  _origUrl = URL.createObjectURL(f);
+  $('submitBtn').disabled = true; $('submitBtn').textContent = '⏳ 请求中...';
+  setStatus('⏳ 请求中（生发图生成较慢，请耐心）...', 'info'); $('resultsArea').classList.add('hidden');
+
+  const checked = [...document.querySelectorAll('#hairStyleGroup input:checked')].map(cb => cb.value);
+  if (checked.length === 0) { setStatus('请至少勾选一个发型', 'error'); $('submitBtn').disabled = false; $('submitBtn').textContent = '🚀 提交'; return; }
+  const fd = new FormData(); fd.append('image_file', f); fd.append('gender', $('gender').value);
+  fd.append('hair_style', checked.join(','));
+  fd.append('use_mask', $('useMask').value);
+  fd.append('prompt', $('promptInput').value);
+  try {
+    const r = await fetch(API_BASE + '/api/v1/hair/grow-v2', { method:'POST', body:fd });
+    const json = await r.json();
+    $('jsonContent').textContent = JSON.stringify(json, null, 2);
+    $('resultsArea').classList.remove('hidden');
+    if (json.code === 0) {
+      const results = json.data.results || [];
+      setStatus('✅ ' + results.length + ' 个结果', 'success');
+      renderSchemes(results);
+    } else {
+      setStatus('❌ code=' + json.code + ' ' + json.message, 'error');
+      $('schemesContainer').innerHTML = '<div style="color:#9ca3af">无结果</div>';
+    }
+  } catch(e) { setStatus('❌ ' + e.message, 'error'); $('resultsArea').classList.remove('hidden'); }
+  finally { $('submitBtn').disabled = false; $('submitBtn').textContent = '🚀 提交'; }
+}
+
+function renderSchemes(results) {
+  let html = '';
+  results.forEach((r, i) => {
+    const lb = TYPE_LABELS[r.hairline_type] || r.hairline_type;
+
+    // 原图
+    const origSlot = '<div class="img-slot">'+
+      '<div class="label">📷 原图</div>'+
+      '<div class="thumb"><img src="'+_origUrl+'" alt="原图"></div></div>';
+
+    // 发际线叠加
+    const overlaySlot = '<div class="img-slot">'+
+      '<div class="label"><span class="dot preview"></span>发际线叠加</div>'+
+      '<div class="thumb"><img src="'+r.image_url+'" alt="叠加"></div></div>';
+
+    // 生发效果
+    let grownSlot;
+    if (r.grown_image_url) {
+      grownSlot = '<div class="img-slot">'+
+        '<div class="label"><span class="dot grown"></span>生发效果</div>'+
+        '<div class="thumb"><img src="'+r.grown_image_url+'" alt="生发"></div></div>';
+    } else {
+      grownSlot = '<div class="img-slot">'+
+        '<div class="label"><span class="dot grown"></span>生发效果</div>'+
+        '<div class="na">⚠ 未返回<br><span style="font-size:10px;color:#9ca3af">ComfyUI 未就绪或生成失败</span></div></div>';
+    }
+
+    html += '<div class="scheme-card">'+
+      '<div class="scheme-header"><span class="badge">#'+r.order+'</span> '+lb+
+      '<span class="tag">hairline_type: '+r.hairline_type+'</span></div>'+
+      '<div class="scheme-imgs">'+origSlot+overlaySlot+grownSlot+'</div>'+
+      '</div>';
+  });
+  $('schemesContainer').innerHTML = html;
+}
+
+function clearResults() {
+  _origUrl='';
+  $('resultsArea').classList.add('hidden'); $('statusBar').className='status hidden';
+  $('imageFile').value=''; $('jsonContent').textContent=''; $('schemesContainer').innerHTML='';
+}
+
+function copyJson() {
+  navigator.clipboard.writeText($('jsonContent').textContent).then(() => {
+    const b = event.target, o = b.textContent; b.textContent = '✅ 已复制'; setTimeout(() => b.textContent = o, 1500);
+  });
+}
+
+const HAIR_STYLES = {
+  female: [
+    { value:'1', label:'ellipse 椭圆形' },
+    { value:'2', label:'flower 花瓣形' },
+    { value:'3', label:'heart 心形' },
+    { value:'4', label:'straight 直线形' },
+    { value:'5', label:'wave 波浪形' },
+  ],
+  male: [
+    { value:'1', label:'ellipse 椭圆形' },
+    { value:'2', label:'inverse_arc 倒弧形' },
+    { value:'3', label:'m M形' },
+    { value:'4', label:'straight 直线形' },
+  ]
+};
+
+function onGenderChange() {
+  const g = $('gender').value;
+  const div = $('hairStyleGroup');
+  div.innerHTML = '';
+  HAIR_STYLES[g].forEach(s => {
+    const cb = document.createElement('input');
+    cb.type = 'checkbox'; cb.value = s.value; cb.id = 'hs_' + s.value;
+    const lb = document.createElement('label');
+    lb.htmlFor = cb.id; lb.appendChild(cb);
+    lb.appendChild(document.createTextNode(' ' + s.label));
+    div.appendChild(lb);
+  });
+}
+
+function selectAllHair(select) {
+  document.querySelectorAll('#hairStyleGroup input[type=checkbox]').forEach(cb => { cb.checked = select; });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  onGenderChange();  // 初始填充发型列表
+  const dz = $('imageFile');
+  dz.addEventListener('dragover', e => { e.preventDefault(); dz.style.borderColor='#7c3aed'; });
+  dz.addEventListener('dragleave', () => dz.style.borderColor='#ddd');
+  dz.addEventListener('drop', e => { e.preventDefault(); dz.style.borderColor='#ddd'; if(e.dataTransfer.files.length){ dz.files=e.dataTransfer.files; setStatus('已选择: '+e.dataTransfer.files[0].name, 'info'); } });
+  dz.addEventListener('change', () => { if(dz.files.length) setStatus('已选择: '+dz.files[0].name, 'info'); });
+});
+</script>
+</body>
+</html>