feat: 补接口4测试页，更新索引和接入说明
- static/test_interface4.html: 上传照片 → 英文优先字段 + 全部42项特征表格 + 原始JSON - gateway/app.py: 首页索引增加 if4_features 测试页 - static/integration.html: 接入说明补充接口4测试页链接
This commit is contained in:
Ubuntu
@@ -194,6 +194,7 @@ async def index():
|
|||||||
"if1_measure": "/static/test_interface1.html",
|
"if1_measure": "/static/test_interface1.html",
|
||||||
"if2_hair_grow": "/static/test_interface2.html",
|
"if2_hair_grow": "/static/test_interface2.html",
|
||||||
"if3_hair_grow_b": "/static/test_interface3.html",
|
"if3_hair_grow_b": "/static/test_interface3.html",
|
||||||
|
"if4_features": "/static/test_interface4.html",
|
||||||
"if5_hairline": "/static/test_interface5.html",
|
"if5_hairline": "/static/test_interface5.html",
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -260,10 +260,10 @@ console.log(features['四季色彩季型']); // "冷夏型"（中文字段也保
|
|||||||
<tr><td>1. 四庭七眼</td><td><a href="/static/test_interface1.html" class="link">/static/test_interface1.html</a></td><td>上传照片 → 原图+标注叠加，底图/标注开关，指标卡片</td></tr>
|
<tr><td>1. 四庭七眼</td><td><a href="/static/test_interface1.html" class="link">/static/test_interface1.html</a></td><td>上传照片 → 原图+标注叠加，底图/标注开关，指标卡片</td></tr>
|
||||||
<tr><td>2. C端生发</td><td><a href="/static/test_interface2.html" class="link">/static/test_interface2.html</a></td><td>上传+性别 → 方案一覧（原图/叠加/生发），双图对比</td></tr>
|
<tr><td>2. C端生发</td><td><a href="/static/test_interface2.html" class="link">/static/test_interface2.html</a></td><td>上传+性别 → 方案一覧（原图/叠加/生发），双图对比</td></tr>
|
||||||
<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>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>5. 发际线PNG</td><td><a href="/static/test_interface5.html" class="link">/static/test_interface5.html</a></td><td>上传+性别 → 发际线方案+中心点坐标</td></tr>
|
||||||
</table>
|
</table>
|
||||||
<p style="font-size:12px;color:#94a3b8;margin-top:12px">
|
<p style="font-size:12px;color:#94a3b8;margin-top:12px">
|
||||||
接口4 无测试页（纯 JSON 返回特征字段，浏览器直接调即可查看）。
|
|
||||||
完整 API 文档：<a href="/docs" class="link">/docs</a>（Swagger UI）
|
完整 API 文档：<a href="/docs" class="link">/docs</a>（Swagger UI）
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,196 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>接口4 — 用户特征分析 测试页</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>🔬 接口4 — 用户特征分析 测试</h1>
|
||||||
|
<p class="subtitle">POST /api/v1/face/features | 上传照片 → 火山方舟豆包视觉模型 → 42项面部特征 | 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 ≤1MB 正面照 | 调用火山方舟豆包视觉模型，耗时约数秒</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'];
|
||||||
|
const EN_LABELS = {
|
||||||
|
face_shape:'脸型', eyebrow_shape:'眉形', facial_age:'面部年龄',
|
||||||
|
dynamic_static_type:'动静类型', gender:'性别', gene_style:'基因风格'
|
||||||
|
};
|
||||||
|
|
||||||
|
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; }
|
||||||
|
|
||||||
|
$('imgPreview').innerHTML = '<img src="'+URL.createObjectURL(f)+'" alt="preview">';
|
||||||
|
$('submitBtn').disabled = true; $('submitBtn').textContent = '⏳ 分析中...';
|
||||||
|
setStatus('⏳ 调用豆包视觉模型...', 'info'); $('resultsArea').classList.add('hidden');
|
||||||
|
|
||||||
|
const fd = new FormData(); fd.append('image_file', f);
|
||||||
|
try {
|
||||||
|
const r = await fetch(API_BASE + '/api/v1/face/features', { 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 feats = JSON.parse(json.data.features);
|
||||||
|
setStatus('✅ 分析完成 — ' + Object.keys(feats).length + ' 项特征', 'success');
|
||||||
|
renderFeatures(feats);
|
||||||
|
} else {
|
||||||
|
setStatus('❌ code=' + json.code + ' ' + json.message, 'error');
|
||||||
|
}
|
||||||
|
} catch(e) { setStatus('❌ ' + e.message, 'error'); $('resultsArea').classList.remove('hidden'); }
|
||||||
|
finally { $('submitBtn').disabled = false; $('submitBtn').textContent = '🚀 分析特征'; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderFeatures(feats) {
|
||||||
|
// 英文优先字段
|
||||||
|
let enHtml = '';
|
||||||
|
EN_KEYS.forEach(k => {
|
||||||
|
if (feats[k] !== undefined) {
|
||||||
|
enHtml += '<tr class="highlight"><td>'+k+'</td><td>'+EN_LABELS[k]+'</td><td>'+feats[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>'+k+'</td><td>'+(isEn?EN_LABELS[k]||'':'')+'</td><td>'+feats[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>
|
||||||
Reference in New Issue
Block a user