xsl
28255ef7c2
接口5（/api/v1/hairline/generate）在发际线结果基础上新增 data.face_measure， 复用接口1的四庭七眼测量数值（四庭/七眼 eye1~eye7/landmarks/姿态）， 不含标注图；独立流程容错，测量失败时为 null 不影响发际线主结果。 重构：提取 _run_face_measure_data() 共用函数，接口1/6 改调它再补标注图， 行为不变（43 测试全过，错误码 1001/1003/1008 回归正常）。 接口1/5 七眼新增 eye1~eye7 从左到右 7 段宽度（cm），eye1/eye7 耳朵不可见 时为 null（保留键）。 测试页 test_interface5.html：移除点击切换卡片网格改为所有发型平铺， 新增四庭七眼测量卡片。前端接入页 integration.html / 接口文档同步更新。
343 lines
18 KiB
HTML
343 lines
18 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>接口5 — 发际线PNG生成 测试页</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: 1200px; 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: #2563eb; color: #fff; }
|
||
.btn-primary:hover { background: #1d4ed8; }
|
||
.btn-primary:disabled { background: #93c5fd; 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: #dbeafe; color: #1e40af; 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.5; min-width: 0; }
|
||
.col-side { flex: 1; min-width: 0; }
|
||
|
||
/* 每个发型区块 */
|
||
.hair-block { padding: 16px 0; border-bottom: 1px solid #f0f0f0; }
|
||
.hair-block:first-child { padding-top: 4px; }
|
||
.hair-block:last-child { border-bottom: none; padding-bottom: 4px; }
|
||
.hair-block-title { font-size: 15px; font-weight: 700; color: #111827; margin-bottom: 10px; }
|
||
|
||
/* 三档 + 生发图 横向排列 */
|
||
.level-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
|
||
.level-cell { background: #222; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
|
||
.level-cell .level-label { font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,.55); padding: 4px 8px; }
|
||
.level-cell img { width: 100%; max-height: 380px; object-fit: contain; display: block; }
|
||
.level-cell .level-none { color: #9ca3af; font-size: 13px; padding: 28px 0; text-align: center; }
|
||
@media (max-width: 700px) { .level-row { grid-template-columns: repeat(2, 1fr); } }
|
||
|
||
/* 坐标高亮 */
|
||
.coord-box { background: #f9fafb; border-radius: 8px; padding: 12px 16px; margin-top: 10px; font-size: 14px; }
|
||
.coord-box .label { font-size: 11px; color: #9ca3af; margin-bottom: 4px; }
|
||
.coord-box .value { font-weight: 700; font-size: 18px; color: #111827; }
|
||
|
||
/* 四庭七眼测量（face_measure） */
|
||
.fm-section { margin-bottom: 18px; }
|
||
.fm-section:last-child { margin-bottom: 0; }
|
||
.fm-title { font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 8px; }
|
||
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
|
||
.fm-cell { background: #f9fafb; border-radius: 6px; padding: 8px 10px; border: 1px solid #f0f0f0; }
|
||
.fm-cell .k { font-size: 11px; color: #9ca3af; margin-bottom: 2px; }
|
||
.fm-cell .v { font-size: 15px; font-weight: 700; color: #111827; }
|
||
.fm-cell .v .sub { font-size: 11px; font-weight: 500; color: #6b7280; margin-left: 4px; }
|
||
.fm-cell.muted .v { color: #9ca3af; font-weight: 600; }
|
||
.fm-tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 6px; font-weight: 600; }
|
||
.fm-tag.ok { background: #d1fae5; color: #065f46; }
|
||
.fm-tag.warn { background: #fef3c7; color: #92400e; }
|
||
|
||
.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; }
|
||
@media (max-width: 800px) { .results-layout { flex-direction: column; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>💈 接口5 — 发际线 PNG 生成 测试</h1>
|
||
<p class="subtitle">POST /api/v1/hairline/generate | 上传正面照 + 性别 + 多选发型 → 每个发型 middle/high/low 三档发际线叠图 + 生发图 + 最佳中心点坐标</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（5种）</option><option value="male">👨 Male（4种）</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>
|
||
<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 正面照 | Female: 椭圆/花瓣/心形/直线/波浪 | Male: 椭圆/倒弧/M形/直线 | 每个发型返回 middle/high/low 三档 + 生发图</div>
|
||
<div id="statusBar" class="status hidden"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="results-layout hidden" id="resultsArea">
|
||
<div class="col-main">
|
||
<!-- 四庭七眼测量（face_measure，复用接口1数值） -->
|
||
<div class="card">
|
||
<div class="card-header"><span>📐 四庭七眼测量（face_measure）</span><span style="font-weight:400;font-size:12px;color:#9ca3af">复用接口1测量数值</span></div>
|
||
<div class="card-body"><div id="faceMeasureArea"><span style="color:#9ca3af">—</span></div></div>
|
||
</div>
|
||
<!-- 所有发型平铺 -->
|
||
<div class="card">
|
||
<div class="card-header"><span>🎯 所有发型结果（三档 + 生发图）</span><span style="font-weight:400;font-size:12px;color:#9ca3af" id="resultCount">共 0 个发型</span></div>
|
||
<div class="card-body">
|
||
<div class="coord-box" style="margin-top:0;margin-bottom:16px">
|
||
<div class="label">📍 最佳发际线中心点（best_hairline_center_point，首个发型 middle 档）— 原图像素坐标</div>
|
||
<div class="value" id="centerPoint">—</div>
|
||
</div>
|
||
<div id="resultsGrid"></div>
|
||
</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 _images = [], _origUrl = '', _center = null;
|
||
|
||
function $(id) { return document.getElementById(id); }
|
||
function setStatus(t, type) { const b=$('statusBar'); b.textContent=t; b.className='status '+type; }
|
||
|
||
// 发型列表（同接口2）
|
||
const HAIR_STYLES = {
|
||
female: [
|
||
{ value:'1', label:'1. ellipse 椭圆' },
|
||
{ value:'2', label:'2. flower 花瓣' },
|
||
{ value:'3', label:'3. heart 心形' },
|
||
{ value:'4', label:'4. straight 直线' },
|
||
{ value:'5', label:'5. wave 波浪' },
|
||
],
|
||
male: [
|
||
{ value:'1', label:'1. ellipse 椭圆' },
|
||
{ value:'2', label:'2. inverse_arc 倒弧' },
|
||
{ value:'3', label:'3. m M形' },
|
||
{ value:'4', label:'4. 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; });
|
||
}
|
||
|
||
async function submitTest() {
|
||
const f = $('imageFile').files[0];
|
||
if (!f) { setStatus('请选择图片', 'error'); return; }
|
||
const checked = [...document.querySelectorAll('#hairStyleGroup input:checked')].map(cb => cb.value);
|
||
if (!checked.length) { setStatus('请至少选择一个发型', 'error'); return; }
|
||
|
||
_origUrl = URL.createObjectURL(f);
|
||
$('submitBtn').disabled = true; $('submitBtn').textContent = '⏳ ...';
|
||
setStatus('请求中...', 'info'); $('resultsArea').classList.add('hidden');
|
||
|
||
const fd = new FormData(); fd.append('image_file', f); fd.append('gender', $('gender').value); fd.append('hair_style', checked.join(','));
|
||
const _reqStart = performance.now();
|
||
try {
|
||
const r = await fetch(API_BASE + '/api/v1/hairline/generate', { method:'POST', body:fd });
|
||
const json = await r.json();
|
||
const _elapsed = ((performance.now() - _reqStart) / 1000).toFixed(2);
|
||
$('jsonContent').textContent = JSON.stringify(json, null, 2);
|
||
$('resultsArea').classList.remove('hidden');
|
||
if (json.code === 0) {
|
||
_images = json.data.hairline_images || [];
|
||
_center = json.data.best_hairline_center_point;
|
||
$('centerPoint').textContent = _center ? '(' + _center.x + ', ' + _center.y + ')' : '—';
|
||
$('resultCount').textContent = '共 ' + _images.length + ' 个发型';
|
||
setStatus('✅ ' + _images.length + ' 个发型 × 三档 (' + _elapsed + 's)', 'success');
|
||
renderGrid();
|
||
renderFaceMeasure(json.data.face_measure);
|
||
} else {
|
||
setStatus('❌ (' + _elapsed + 's) code=' + json.code + ' ' + json.message, 'error');
|
||
}
|
||
} catch(e) {
|
||
const _elapsed = ((performance.now() - _reqStart) / 1000).toFixed(2);
|
||
setStatus('❌ (' + _elapsed + 's) ' + e.message, 'error'); $('resultsArea').classList.remove('hidden'); }
|
||
finally { $('submitBtn').disabled = false; $('submitBtn').textContent = '🚀 提交'; }
|
||
}
|
||
|
||
function renderGrid() {
|
||
if (!_images.length) { $('resultsGrid').innerHTML = '<span style="color:#9ca3af">无数据</span>'; return; }
|
||
let h = '';
|
||
const cell = (label, url) => url
|
||
? '<div class="level-cell"><div class="level-label">'+label+'</div><img src="'+url+'" alt="'+label+'"></div>'
|
||
: '<div class="level-cell"><div class="level-label">'+label+'</div><div class="level-none">无</div></div>';
|
||
_images.forEach(function(it) {
|
||
h += '<div class="hair-block">' +
|
||
'<div class="hair-block-title">#' + (it.order||'—') + ' ' + (it.hairline_type||'') +
|
||
(it.grown_image_url ? ' <span style="font-size:11px;color:#7c3aed">含生发图</span>' : '') + '</div>' +
|
||
'<div class="level-row">' +
|
||
cell('middle', it.image_middle_url) +
|
||
cell('high', it.image_high_url) +
|
||
cell('low', it.image_low_url) +
|
||
cell('生发图', it.grown_image_url) +
|
||
'</div>' +
|
||
'</div>';
|
||
});
|
||
$('resultsGrid').innerHTML = h;
|
||
}
|
||
|
||
function clearResults() {
|
||
_images=[]; _origUrl=''; _center=null;
|
||
$('resultsArea').classList.add('hidden'); $('statusBar').className='status hidden';
|
||
$('imageFile').value=''; $('jsonContent').textContent=''; $('resultsGrid').innerHTML='';
|
||
$('centerPoint').textContent='—';
|
||
$('resultCount').textContent = '共 0 个发型';
|
||
$('faceMeasureArea').innerHTML = '<span style="color:#9ca3af">—</span>';
|
||
}
|
||
|
||
// 四庭七眼测量渲染（face_measure，接口1数值）
|
||
const _PCT = r => (r == null ? '' : '（' + (r * 100).toFixed(1) + '%）');
|
||
const _FMT = v => (v == null ? '—' : Number(v).toFixed(2));
|
||
function renderFaceMeasure(fm) {
|
||
const box = $('faceMeasureArea');
|
||
if (!fm) {
|
||
box.innerHTML = '<div style="padding:24px;text-align:center;color:#9ca3af;font-size:14px">⚠️ face_measure = null（测量失败或未启用）</div>';
|
||
return;
|
||
}
|
||
// 发际线来源 + 头部姿态
|
||
const src = fm.hairline_source;
|
||
const srcTag = src === 'segmentation'
|
||
? '<span class="fm-tag ok">segmentation 真实分割</span>'
|
||
: (src === 'estimated' ? '<span class="fm-tag warn">estimated 比例估算</span>' : '');
|
||
let poseHtml = '—';
|
||
if (fm.head_pose) {
|
||
const p = fm.head_pose;
|
||
poseHtml = 'yaw ' + _FMT(p.yaw) + '° pitch ' + _FMT(p.pitch) + '° roll ' + _FMT(p.roll) + '°';
|
||
}
|
||
let h = '<div class="coord-box" style="margin-top:0;margin-bottom:16px;display:flex;gap:32px;flex-wrap:wrap;align-items:center">'
|
||
+ '<div><div class="label">脸总高</div><div class="value">' + _FMT(fm.face_total_height_cm) + ' cm</div></div>'
|
||
+ '<div><div class="label">发际线来源</div><div class="value" style="font-size:15px">' + (src || '—') + srcTag + '</div></div>'
|
||
+ '<div><div class="label">头部姿态</div><div class="value" style="font-size:14px">' + poseHtml + '</div></div>'
|
||
+ '</div>';
|
||
|
||
// 四庭
|
||
const fc = fm.four_courts || {};
|
||
const fr = (fc.ratios || {});
|
||
const courts = [
|
||
['顶庭', fc.top_court_cm, fr.top_court],
|
||
['上庭', fc.upper_court_cm, fr.upper_court],
|
||
['中庭', fc.middle_court_cm, fr.middle_court],
|
||
['下庭', fc.lower_court_cm, fr.lower_court],
|
||
];
|
||
h += '<div class="fm-section"><div class="fm-title">📏 四庭（纵向，自上而下）</div><div class="fm-grid">';
|
||
courts.forEach(c => {
|
||
h += '<div class="fm-cell"><div class="k">' + c[0] + '</div><div class="v">' + _FMT(c[1]) + ' cm<span class="sub">' + _PCT(c[2]).replace(/[（）]/g, '') + '</span></div></div>';
|
||
});
|
||
h += '</div></div>';
|
||
|
||
// 七眼
|
||
const se = fm.seven_eyes || {};
|
||
const ser = (se.ratios || {});
|
||
h += '<div class="fm-section"><div class="fm-title">👁 七眼（横向汇总）</div><div class="fm-grid">';
|
||
[['单眼宽', se.eye_width_cm, ser.eye_width], ['脸宽', se.face_width_cm, null], ['两眼间距', se.inter_eye_distance_cm, ser.inter_eye_distance]].forEach(e => {
|
||
h += '<div class="fm-cell"><div class="k">' + e[0] + '</div><div class="v">' + _FMT(e[1]) + ' cm' + (e[2] != null ? '<span class="sub">' + (e[2] * 100).toFixed(1) + '%</span>' : '') + '</div></div>';
|
||
});
|
||
h += '</div></div>';
|
||
|
||
// 七眼 7 段（从左到右）
|
||
const segLabels = ['eye1 左耳外段', 'eye2 左脸颊段', 'eye3 左眼', 'eye4 两眼间距', 'eye5 右眼', 'eye6 右脸颊段', 'eye7 右耳外段'];
|
||
h += '<div class="fm-section"><div class="fm-title">↔️ 七眼 7 段宽度（从左到右，cm）</div><div class="fm-grid" style="grid-template-columns:repeat(7,1fr)">';
|
||
segLabels.forEach((lab, i) => {
|
||
const v = se['eye' + (i + 1)];
|
||
const muted = v == null ? ' muted' : '';
|
||
h += '<div class="fm-cell' + muted + '"><div class="k">' + lab + '</div><div class="v">' + (v == null ? '—' : _FMT(v)) + '</div></div>';
|
||
});
|
||
h += '</div></div>';
|
||
|
||
// 关键点坐标
|
||
const lm = fm.landmarks || {};
|
||
const lmLabels = { hair_top: '头顶', hairline: '发际线', brow_center: '眉心', nose_bottom: '鼻翼下缘', chin_tip: '下巴尖' };
|
||
h += '<div class="fm-section"><div class="fm-title">📍 关键分界点（原图像素坐标）</div><div class="fm-grid">';
|
||
Object.keys(lmLabels).forEach(k => {
|
||
const p = lm[k];
|
||
h += '<div class="fm-cell"><div class="k">' + lmLabels[k] + '</div><div class="v" style="font-size:14px">' + (p ? '(' + p.x + ', ' + p.y + ')' : '—') + '</div></div>';
|
||
});
|
||
h += '</div></div>';
|
||
|
||
box.innerHTML = h;
|
||
}
|
||
|
||
function copyJson() {
|
||
navigator.clipboard.writeText($('jsonContent').textContent).then(() => {
|
||
const b = event.target, o = b.textContent; b.textContent = '✅ 已复制'; setTimeout(() => b.textContent = o, 1500);
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
onGenderChange(); // 初始填充发型列表
|
||
const dz = $('imageFile');
|
||
dz.addEventListener('dragover', e => { e.preventDefault(); dz.style.borderColor='#2563eb'; });
|
||
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>
|