84 lines
3.8 KiB
HTML
84 lines
3.8 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>接口 61 — 四庭七眼测量 v2 鉴权测试</title>
|
|
<link rel="stylesheet" href="/static/face_measure_auth_test.css">
|
|
<script src="/static/client_auth.js" defer></script>
|
|
<script src="/static/img_downscale.js" defer></script>
|
|
<script src="/static/face_measure_auth_test.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>接口 61 — 四庭七眼测量 v2 鉴权测试</h1>
|
|
<p class="subtitle">POST /api/v1/face/measure-61 | 去顶庭 · 竖线发际线→下巴 · 无头部端线</p>
|
|
<ul class="diff-list">
|
|
<li><strong>去顶庭</strong>：不画头顶横线，不返回顶庭数据；<code>face_total_height_cm</code> = 上+中+下庭</li>
|
|
<li><strong>竖线范围</strong>：发际线→下巴尖（接口1 为头顶→下巴尖）</li>
|
|
<li><strong>不画头部端线</strong>：仅七眼 6 点 5 段标尺（接口1 为 8 点 7 段）</li>
|
|
</ul>
|
|
|
|
<form id="client-auth" class="upload-card" method="post" action="/api/v1/auth/login" aria-label="账号登录">
|
|
<div class="auth-fields">
|
|
<label>用户名 <input name="username" autocomplete="username" required></label>
|
|
<label>密码 <input name="password" type="password" autocomplete="current-password" required></label>
|
|
<button class="btn btn-primary btn-sm" type="submit">登录</button>
|
|
<button class="btn btn-outline btn-sm" id="client-auth-check" type="button">测试鉴权</button>
|
|
<button class="btn btn-outline btn-sm" id="client-auth-refresh" type="button" disabled>刷新令牌</button>
|
|
</div>
|
|
<p id="client-auth-status" class="upload-hint" role="status">请使用对接账号登录后提交图片。</p>
|
|
</form>
|
|
|
|
<!-- 上传区 -->
|
|
<form class="upload-card" id="measure-test" data-endpoint="/api/v1/face/measure-61"
|
|
data-total-height-label="面部总高（三庭）">
|
|
<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" type="submit">🚀 提交测试</button>
|
|
<button class="btn btn-outline btn-sm" id="clearBtn" type="button">清除结果</button>
|
|
</div>
|
|
<div class="upload-hint">
|
|
支持 JPG / PNG 正面照 | 也可拖拽图片到文件选择框
|
|
</div>
|
|
<div id="statusBar" class="status" role="status"></div>
|
|
</form>
|
|
|
|
<!-- 指标速览 -->
|
|
<div id="metricsBar" class="metrics hidden"></div>
|
|
|
|
<!-- 结果双栏 -->
|
|
<div class="results hidden" id="resultsArea">
|
|
<!-- 左：图片叠加 -->
|
|
<div>
|
|
<div class="panel-header">
|
|
<span>🖼️ 原图 + 标注叠加</span>
|
|
<div class="anno-controls">
|
|
<label><input type="checkbox" id="showBase" checked> 底图</label>
|
|
<label><input type="checkbox" id="showAnno" checked> 标注层</label>
|
|
<label>透明度 <input type="range" id="annoOpacity" min="0" max="100" value="100"></label>
|
|
</div>
|
|
</div>
|
|
<div class="img-panel" id="imgPanel">
|
|
<span id="imagePlaceholder" class="placeholder">提交后显示叠加效果</span>
|
|
<div class="img-stack" id="imageStack" hidden>
|
|
<img class="layer-base" id="baseImage" alt="原图">
|
|
<img class="layer-anno" id="annotationImage" alt="标注层">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右：JSON -->
|
|
<div>
|
|
<div class="panel-header">
|
|
<span>📋 JSON 响应</span>
|
|
<button class="btn btn-outline btn-sm" id="copyBtn" type="button">📋 复制</button>
|
|
</div>
|
|
<div class="json-panel"><pre class="json-content" id="jsonContent"></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|