feat(gateway): 接入42和72并为42/52/72启用可刷新令牌
This commit is contained in:
@@ -0,0 +1,64 @@
|
||||
(() => {
|
||||
const form = document.getElementById("client-auth");
|
||||
const message = document.getElementById("client-auth-status");
|
||||
const button = form.querySelector("button");
|
||||
let accessToken;
|
||||
let refreshToken;
|
||||
let accessExpiry = 0;
|
||||
|
||||
async function requestToken(operation, data) {
|
||||
const response = await fetch("/api/v1/auth/" + operation, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
const result = await response.json();
|
||||
if (!response.ok || result.code !== 0) throw new Error(result.message || "鉴权失败");
|
||||
accessToken = result.data.access_token;
|
||||
accessExpiry = Date.now() + result.data.expires_in * 1000;
|
||||
return result.data;
|
||||
}
|
||||
|
||||
form.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
button.disabled = true;
|
||||
const data = new FormData(form);
|
||||
try {
|
||||
const result = await requestToken("login", {
|
||||
username: data.get("username"),
|
||||
password: data.get("password"),
|
||||
});
|
||||
refreshToken = result.refresh_token;
|
||||
message.textContent = "已登录。访问令牌过期时会自动刷新。";
|
||||
} catch (error) {
|
||||
message.textContent = error.message;
|
||||
} finally {
|
||||
form.elements.namedItem("password").value = "";
|
||||
button.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
async function refresh() {
|
||||
if (!refreshToken) throw new Error("请先登录,再提交图片。");
|
||||
try {
|
||||
await requestToken("refresh", { refresh_token: refreshToken });
|
||||
} catch (error) {
|
||||
accessToken = refreshToken = undefined;
|
||||
message.textContent = "请重新登录。";
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
window.hairClientFetch = async (path, options) => {
|
||||
if (Date.now() >= accessExpiry || !accessToken) await refresh();
|
||||
const send = () => {
|
||||
const headers = new Headers(options.headers);
|
||||
headers.set("Authorization", "Bearer " + accessToken);
|
||||
return fetch(path, { ...options, headers });
|
||||
};
|
||||
const response = await send();
|
||||
if (response.status !== 401) return response;
|
||||
await refresh();
|
||||
return send();
|
||||
};
|
||||
})();
|
||||
@@ -270,7 +270,8 @@ console.log(features.gene_style); // "自然型"</pre>
|
||||
<div class="card" id="if52">
|
||||
<h2>52. 发际线新规则与裁切 <span class="badge post">POST</span> <code>/api/v1/hairline/generate-52</code></h2>
|
||||
<div class="card-body">
|
||||
<p>客户端请求头必填 <code>X-API-Token: yonghe1999</code>。缺少或不匹配返回HTTP401、code=1009。可在网关配置<code>interface52_token</code>覆盖默认值;内部Token由网关添加。</p>
|
||||
<p>42、52、72 统一使用 <code>Authorization: Bearer <access_token></code>。通过 <code>POST /api/v1/auth/login</code> 登录,访问令牌有效 15 分钟,可通过 <code>POST /api/v1/auth/refresh</code> 刷新。缺少或无效时返回 HTTP 401、code 1009。</p>
|
||||
<p><a href="/static/test_interface42.html" class="link">42 号特征测试</a> · <a href="/static/test_interface72.html" class="link">72 号关键点测试</a></p>
|
||||
<p class="desc">网关透传至GPU worker执行。中下庭均值定位 middle,支持9→152扶正、人像裁切和矩形发际线预览。接口5保留原有三档实现;新功能使用此独立接口。</p>
|
||||
<p>基础图片参数、<code>gender</code>、<code>hair_style</code>、<code>use_mask</code>、<code>prompt</code>、<code>generate_grow_image</code>沿用接口5。新增可选<code>normalize_image</code>,默认false,传true开启扶正与裁切;测试页显式开启。</p>
|
||||
<p style="margin-top:12px">非空图片返回<code>*_url</code>,空图片沿用<code>*_base64: null</code>。另有<code>height_rule</code>、<code>framing</code>、<code>guide_landmarks</code>、原图及处理后底图。middle和坐标使用当前底图,high/low字段为null。标准裁切高约3.3333L、宽2.5L;长图在保留人脸的前提下裁为3:4。</p>
|
||||
|
||||
@@ -0,0 +1,218 @@
|
||||
<!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 | 质检 → 扶正裁切 → 面部特征与两项判定 | data.features 为 JSON 字符串</p>
|
||||
|
||||
<form id="client-auth" style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0">
|
||||
<label>用户名 <input name="username" autocomplete="username" required></label>
|
||||
<label>密码 <input name="password" type="password" autocomplete="current-password" required></label>
|
||||
<button type="submit">登录</button>
|
||||
<span id="client-auth-status" role="status">登录后可调用接口。</span>
|
||||
</form>
|
||||
<script src="/static/client_auth.js" defer></script>
|
||||
<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 正面照 | 检测人脸完整性和俯拍角度,通过后扶正裁切</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 window.hairClientFetch(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>
|
||||
@@ -103,10 +103,16 @@
|
||||
<p class="subtitle">上传正面照,选择性别与发型,查看按中下庭均值定位的设计曲线和生发效果。</p>
|
||||
<div class="rule-banner"><strong>目标上庭高度 =(中庭高度 + 下庭高度)÷ 2</strong><br>上传图先扶正9→152,再裁切为高约 3.3333×L、宽 2.5×L,人物比原3L规则缩小约10%;L 是9号点到152号点的像素距离,眉心位置沿用参考图比例。长图会在保留人脸的前提下裁为3:4,其余空间不足时仅扶正。从眉心向上定位,各发型中点对齐同一目标。high、low 已停用,旧字段返回 null。</div>
|
||||
|
||||
<form id="client-auth" style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0">
|
||||
<label>用户名 <input name="username" autocomplete="username" required></label>
|
||||
<label>密码 <input name="password" type="password" autocomplete="current-password" required></label>
|
||||
<button type="submit">登录</button>
|
||||
<span id="client-auth-status" role="status">登录后可调用接口。</span>
|
||||
</form>
|
||||
<script src="/static/client_auth.js" defer></script>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="upload-row">
|
||||
<div class="form-group"><label for="apiToken">客户端 Token</label><input id="apiToken" type="password" value="yonghe1999" autocomplete="off"></div>
|
||||
<div class="file-input"><input type="file" id="imageFile" accept="image/jpeg,image/png,.jpg,.jpeg,.png"></div>
|
||||
<div class="form-group">
|
||||
<label>性别</label>
|
||||
@@ -231,7 +237,7 @@ async function submitTest() {
|
||||
const fd = new FormData(); fd.append('image_file', f); fd.append('gender', $('gender').value); fd.append('hair_style', checked.join(',')); fd.append('generate_grow_image', $('genGrowImg').checked ? 'true' : 'false'); fd.append('normalize_image', 'true');
|
||||
const _reqStart = performance.now();
|
||||
try {
|
||||
const r = await fetch(API_BASE + '/api/v1/hairline/generate-52', { method:'POST', headers: { 'X-API-Token': $('apiToken').value }, body:fd });
|
||||
const r = await window.hairClientFetch(API_BASE + '/api/v1/hairline/generate-52', { method:'POST', body:fd });
|
||||
const json = await r.json();
|
||||
const _elapsed = ((performance.now() - _reqStart) / 1000).toFixed(2);
|
||||
$('jsonContent').textContent = JSON.stringify(json, null, 2);
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
<!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>
|
||||
<form id="client-auth" style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0">
|
||||
<label>用户名 <input name="username" autocomplete="username" required></label>
|
||||
<label>密码 <input name="password" type="password" autocomplete="current-password" required></label>
|
||||
<button type="submit">登录</button>
|
||||
<span id="client-auth-status" role="status">登录后可调用接口。</span>
|
||||
</form>
|
||||
<script src="/static/client_auth.js" defer></script>
|
||||
<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 window.hairClientFetch("/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>
|
||||
Reference in New Issue
Block a user