feat: 新增42号人脸特征与72号B端关键点接口

This commit is contained in:
xsl
2026-11-07 20:35:55 +08:00
parent ccb9c142c4
commit c9a47a76c9
16 changed files with 983 additions and 25 deletions
+20
View File
@@ -0,0 +1,20 @@
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>颞颧比与颧颞比测试</title>
<style>body{font:15px system-ui;background:#f4f6fa;color:#203047;margin:0}main{max-width:1200px;margin:auto;padding:28px}h1{font-size:25px}section,article{background:white;padding:20px;border-radius:12px;margin:16px 0}button,input{font:inherit;padding:9px}button{cursor:pointer} .grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:20px}canvas{max-width:100%;height:auto;touch-action:none}pre{overflow:auto;max-height:300px;font-size:12px}.muted{color:#66758a;line-height:1.7}.value{font-size:28px;font-weight:700}#status{white-space:pre-wrap} @media(max-width:750px){.grid{display:block}}</style>
<main><p><a href="/cases/">查看批量案例与筛选结果</a></p><h1>颞颧比与颧颞比测试</h1><p class="muted">Ft:HL right right → HL left left(两端取平均高度,水平测量) · Zy:234 → 454<br>先按接口52统一参数扶正裁切,均按处理后图片二维直线距离计算。Ft ÷ Zy 小于 0.8 时,同时判定为颧弓外扩和太阳穴凹陷。</p>
<section><input aria-label="选择人像" type="file" id="file" accept="image/jpeg,image/png"><button id="run">开始检测</button> <button id="reset" disabled>恢复自动点位</button><p id="status" role="status">请选择单人正面照。</p></section>
<div class="grid"><section><canvas id="canvas"></canvas><p class="muted">粉色:Ft 蓝色:Zy。检测后可拖动端点校正,结果实时更新。</p></section><div><article><h2>颧弓外扩</h2><p>颞颧比 Ft ÷ Zy < 0.8</p><div class="value" id="r1">—</div><p id="s1">等待检测</p></article><article><h2>太阳穴凹陷</h2><p>判定条件 Ft ÷ Zy < 0.8(下方 Zy ÷ Ft 为参考值)</p><div class="value" id="r2">—</div><p id="s2">等待检测</p></article><p id="lengths"></p></div></div><section><h2>测量数据</h2><pre id="json">暂无数据</pre></section></main>
<script>
const $=id=>document.getElementById(id),keys=['hair_line_right_right','hair_line_left_left','face_edge_234','face_edge_454'],labels=['HL right right','HL left left','234','454'];
let img=null,points={},original={},drag=null,manual=false,busy=false;
function dist(a,b){return a&&b&&[a.x,a.y,b.x,b.y].every(Number.isFinite)?Math.hypot(a.x-b.x,a.y-b.y):null}
function update(){const left=points[keys[0]],right=points[keys[1]];if(left&&right){const y=(left.y+right.y)/2;left.y=right.y=y}const ft=dist(points[keys[0]],points[keys[1]]),zy=dist(points[keys[2]],points[keys[3]]),valid=ft>0&&zy>0;const a=valid?ft/zy:null,b=valid?zy/ft:null;
const matched = valid ? a < 0.8 : null;
$('r1').textContent=valid?a.toFixed(4):'—';$('r2').textContent=valid?b.toFixed(4):'—';$('s1').textContent=valid?(matched?'命中':'未命中'):'无法计算:点位缺失或距离为零';$('s2').textContent=valid?(matched?'命中':'未命中'):'无法计算:点位缺失或距离为零';$('lengths').textContent=`Ft:${ft?.toFixed(2)??'缺失'} px Zy:${zy?.toFixed(2)??'缺失'} px`;
$('json').textContent=JSON.stringify({source:manual?'manual':'automatic',points,ft_px:ft,zy_px:zy,temporal_zygomatic_ratio:a,zygomatic_temporal_ratio:b,zygoma_expansion:matched,temple_hollowing:matched},null,2);draw()}
function draw(){const c=$('canvas'),ctx=c.getContext('2d');ctx.clearRect(0,0,c.width,c.height);if(!img)return;ctx.drawImage(img,0,0,c.width,c.height);const scale=c.width/img.naturalWidth;for(let i=0;i<4;i++){const p=points[keys[i]],q=points[keys[i^1]],color=i<2?'#ed397a':'#1685ff';if(!p)continue;ctx.strokeStyle=color;ctx.fillStyle=color;ctx.lineWidth=3;if(i%2===0&&q){ctx.beginPath();ctx.moveTo(p.x*scale,p.y*scale);ctx.lineTo(q.x*scale,q.y*scale);ctx.stroke()}ctx.beginPath();ctx.arc(p.x*scale,p.y*scale,7,0,Math.PI*2);ctx.fill();ctx.font='bold 14px sans-serif';const t=labels[i],x=Math.max(2,Math.min(c.width-ctx.measureText(t).width-4,p.x*scale+10)),y=Math.max(17,p.y*scale-12);ctx.strokeStyle='#172033';ctx.lineWidth=4;ctx.strokeText(t,x,y);ctx.fillStyle='white';ctx.fillText(t,x,y)}}
function position(e){const r=$('canvas').getBoundingClientRect();return{x:(e.clientX-r.left)/r.width*img.naturalWidth,y:(e.clientY-r.top)/r.height*img.naturalHeight}}
$('canvas').onpointerdown=e=>{if(!img||busy)return;const p=position(e),radius=18*img.naturalWidth/$('canvas').getBoundingClientRect().width;drag=keys.find(k=>points[k]&&dist(points[k],p)<radius);if(drag)$('canvas').setPointerCapture(e.pointerId)};
$('canvas').onpointermove=e=>{if(!drag)return;const p=position(e);points[drag]={x:Math.max(0,Math.min(img.naturalWidth-1,p.x)),y:Math.max(0,Math.min(img.naturalHeight-1,p.y))};manual=true;update()};$('canvas').onpointerup=$('canvas').onpointercancel=()=>drag=null;
$('reset').onclick=()=>{points=structuredClone(original);manual=false;update()};
$('run').onclick=async()=>{const file=$('file').files[0];if(!file)return;busy=true;$('run').disabled=true;$('reset').disabled=true;points={};original={};manual=false;img=null;update();$('status').textContent='正在检测人脸与发际线…';let url;try{url=URL.createObjectURL(file);const next=new Image();next.src=url;await next.decode();img=next;$('canvas').width=Math.min(1000,img.naturalWidth);$('canvas').height=Math.round($('canvas').width*img.naturalHeight/img.naturalWidth);draw();const form=new FormData();form.append('image_file',file);const response=await fetch('/detect',{method:'POST',body:form});const data=await response.json();if(!response.ok)throw Error(data.detail||'检测失败');const processed=new Image();processed.src=data.input_image_base64;await processed.decode();img=processed;$('canvas').width=Math.min(1000,img.naturalWidth);$('canvas').height=Math.round($('canvas').width*img.naturalHeight/img.naturalWidth);points=Object.fromEntries(keys.map(k=>[k,data.points[k]??null]));original=structuredClone(points);update();$('reset').disabled=false;$('status').textContent='检测完成。可拖动点位验证公式;发际线点受刘海和头发遮挡影响。'}catch(e){$('status').textContent='检测失败:'+e.message}finally{if(url)URL.revokeObjectURL(url);busy=false;$('run').disabled=false}};
</script></html>
+211
View File
@@ -0,0 +1,211 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>接口42 — 用户特征分析与两项判定 测试页</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; }
.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; }
/* 特征表格 */
.feat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.feat-table th, .feat-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; }
.feat-table th { background: #f8fafc; font-weight: 700; color: #475569; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.feat-table td:first-child { font-weight: 600; color: #1e293b; width: 200px; }
.feat-table tr:hover td { background: #f8fafc; }
.feat-table .highlight td { background: #eff6ff; }
/* 图片预览 */
.img-preview { text-align: center; }
.img-preview .thumb { background: #222; border-radius: 8px; overflow: hidden; display: inline-block; line-height: 0; }
.img-preview .thumb img { max-width: 100%; max-height: 280px; object-fit: contain; }
.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; }
.count-badge { background: #dbeafe; color: #1e40af; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; }
@media (max-width: 800px) { .results-layout { flex-direction: column; } }
</style>
</head>
<body>
<div class="container">
<h1>🔬 接口42 — 用户特征分析与两项判定 测试</h1>
<p class="subtitle">POST /api/v1/face/features-42 &nbsp;|&nbsp; 质检 → 扶正裁切 → 面部特征与两项判定 &nbsp;|&nbsp; data.features 为 JSON 字符串</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>
<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 正面照 &nbsp;|&nbsp; 检测人脸完整性和俯拍角度,通过后扶正裁切</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 img-preview">
<div class="thumb" id="imgPreview"><span style="color:#9ca3af;padding:40px">—</span></div>
</div>
</div>
<!-- 英文优先字段 -->
<div class="card">
<div class="card-header"><span>⭐ 英文优先字段</span><span id="countBadge" class="count-badge hidden"></span></div>
<div class="card-body" style="padding:0">
<table class="feat-table" id="enTable"></table>
</div>
</div>
<!-- 全部字段 -->
<div class="card">
<div class="card-header"><span>📋 全部特征字段</span></div>
<div class="card-body" style="padding:0;max-height:500px;overflow:auto">
<table class="feat-table" id="allTable"></table>
</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;
const EN_KEYS = ['face_shape','eyebrow_shape','facial_age','dynamic_static_type','gender','gene_style','zygoma_expansion','temple_hollowing'];
const EN_LABELS = {
face_shape:'脸型', eyebrow_shape:'眉形', facial_age:'面部年龄',
dynamic_static_type:'动静类型', gender:'性别', gene_style:'基因风格',
zygoma_expansion:'颧弓外扩', temple_hollowing:'太阳穴凹陷'
};
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; }
$('imgPreview').innerHTML = '<img src="'+URL.createObjectURL(f)+'" alt="preview">';
$('submitBtn').disabled = true; $('submitBtn').textContent = '⏳ 分析中...';
setStatus('正在质检、扶正裁切并分析特征…', 'info'); $('resultsArea').classList.add('hidden');
$('enTable').textContent = '';
$('allTable').textContent = '';
$('countBadge').classList.add('hidden');
const fd = new FormData(); fd.append('image_file', f);
const _reqStart = performance.now();
try {
const r = await fetch(API_BASE + '/api/v1/face/features-42', { 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) {
const feats = JSON.parse(json.data.features);
setStatus('✅ 分析完成 (' + _elapsed + 's) — ' + Object.keys(feats).length + ' 项特征', 'success');
renderFeatures(feats);
} 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 displayValue(value, key) {
const label = value === true ? (EN_LABELS[key] ?? String(value)) : value === false ? ''
: value === null ? '无法测量' : String(value);
const element = document.createElement('span');
element.textContent = label;
return element.innerHTML;
}
function renderFeatures(feats) {
// 英文优先字段
let enHtml = '';
EN_KEYS.forEach(k => {
if (feats[k] !== undefined) {
enHtml += '<tr class="highlight"><td>'+displayValue(k)+'</td><td>'+EN_LABELS[k]+'</td><td>'+displayValue(feats[k], k)+'</td></tr>';
}
});
$('enTable').innerHTML = enHtml;
// 全部字段
const allKeys = Object.keys(feats);
let allHtml = '';
allKeys.forEach(k => {
const isEn = EN_KEYS.includes(k);
allHtml += '<tr'+(isEn?' class="highlight"':'')+'><td>'+displayValue(k)+'</td><td>'+(isEn?EN_LABELS[k]||'':'')+'</td><td>'+displayValue(feats[k], k)+'</td></tr>';
});
$('allTable').innerHTML = allHtml;
$('countBadge').textContent = allKeys.length + ' 项';
$('countBadge').classList.remove('hidden');
}
function clearResults() {
$('resultsArea').classList.add('hidden'); $('statusBar').className='status hidden';
$('imageFile').value=''; $('jsonContent').textContent='';
$('imgPreview').innerHTML='<span style="color:#9ca3af;padding:40px">—</span>';
$('enTable').innerHTML=''; $('allTable').innerHTML='';
$('countBadge').classList.add('hidden');
}
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', () => {
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>
+128
View File
@@ -0,0 +1,128 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>72 号接口 · B 端五个关键点</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; background: #eef2f5; color: #192d3d; font: 16px/1.55 system-ui, sans-serif; }
main { width: min(1040px, 100%); margin: auto; padding: 26px 18px; }
h1 { margin: 0; font-size: clamp(24px, 4vw, 35px); }
h2 { margin: 0 0 10px; font-size: 19px; }
p { margin: 8px 0; }
.note { color: #4f6577; }
.controls, .panel { background: white; border-radius: 12px; padding: 18px; margin-top: 16px; }
form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
button { background: #156a72; color: white; border: 0; border-radius: 7px; padding: 9px 15px; font: inherit; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
input { max-width: 100%; }
#status[data-error="true"] { color: #a22629; }
.results { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
[hidden] { display: none; }
.photo { display: grid; border-radius: 8px; overflow: hidden; background: #1b2c37; }
.photo img { grid-area: 1 / 1; width: 100%; display: block; }
.panel a { color: #156a72; }
table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; border-bottom: 1px solid #e6edf2; padding: 5px 7px; }
@media(max-width: 680px) { .results { grid-template-columns: 1fr; gap: 0; } }
</style>
</head>
<body>
<main>
<h1>72 号接口 · B 端五个关键点</h1>
<p class="note">上传正面照,查看扶正裁切后的六个白点、四条虚线和厘米标注。</p>
<section class="controls">
<form id="form">
<label for="file">人脸照片</label>
<input id="file" type="file" accept="image/jpeg,image/png" required>
<button id="submit" type="submit">生成标注</button>
<button id="sample" type="button">测试样例</button>
</form>
<p id="status" role="status">请选择 JPG 或 PNG 图片。</p>
</section>
<div id="results" class="results" hidden>
<section class="panel">
<h2>标注预览</h2>
<div class="photo">
<img id="base" alt="扶正裁切后的底图">
<img id="overlay" alt="白点、虚线及距离标注">
</div>
<p><a id="download" download="interface72-overlay.png">下载透明标注层</a></p>
</section>
<section class="panel">
<h2>测量结果</h2>
<table><thead><tr><th>点位</th><th>距离</th></tr></thead><tbody id="distances"></tbody></table>
<h2>坐标(像素)</h2>
<table><thead><tr><th>点号</th><th>X</th><th>Y</th></tr></thead><tbody id="points"></tbody></table>
<p class="note">点 6(MediaPipe 446)是射线锚点。六个白点的直径相同。</p>
</section>
</div>
</main>
<script>
const byId = (id) => document.getElementById(id);
const status = byId("status");
const results = byId("results");
const submit = byId("submit");
const sample = byId("sample");
function setRows(id, rows) {
const body = byId(id);
body.replaceChildren();
for (const values of rows) {
const row = body.insertRow();
for (const value of values) row.insertCell().textContent = value;
}
}
function imageSource(data, field, mime) {
return data[field + "_url"] || ("data:" + mime + ";base64," + data[field + "_base64"]);
}
async function runAnnotation(loadFile) {
submit.disabled = sample.disabled = true;
results.hidden = true;
status.dataset.error = "false";
status.textContent = "正在扶正裁切并生成标注…";
try {
const file = await loadFile();
const form = new FormData();
form.append("image_file", file, file.name || "sample.jpg");
const response = await fetch("/api/v1/face/b-end-points", { method: "POST", body: form });
const { code, message, data } = await response.json();
if (!response.ok || code !== 0) throw new Error(message || "请求失败");
byId("base").src = imageSource(data, "input_image", "image/jpeg");
const overlay = imageSource(data, "annotated_image", "image/png");
byId("overlay").src = overlay;
byId("download").href = overlay;
setRows("distances", Object.entries(data.measurements_cm).map(([key, value]) => [
key, value.toFixed(1) + " cm"
]));
setRows("points", Object.entries(data.points).map(([key, point]) => [
key, point.x.toFixed(1), point.y.toFixed(1)
]));
results.hidden = false;
status.textContent = "标注完成。";
} catch (error) {
status.dataset.error = "true";
status.textContent = error.message;
} finally {
submit.disabled = sample.disabled = false;
}
}
byId("form").addEventListener("submit", (event) => {
event.preventDefault();
const file = byId("file").files[0];
if (file) runAnnotation(() => file);
});
sample.addEventListener("click", () => runAnnotation(async () => {
const response = await fetch("/static/sample.jpg");
if (!response.ok) throw new Error("无法读取样例图片");
return response.blob();
}));
</script>
</body>
</html>