完成接口1 和接口2，测试页面也完成
This commit is contained in:
Ubuntu
@@ -16,7 +16,7 @@
|
|||||||
"dispatch": {
|
"dispatch": {
|
||||||
"per_worker_concurrency": 1,
|
"per_worker_concurrency": 1,
|
||||||
"queue_wait_seconds": 30,
|
"queue_wait_seconds": 30,
|
||||||
"request_timeout_seconds": 60,
|
"request_timeout_seconds": 600,
|
||||||
"retry_on_failure": true,
|
"retry_on_failure": true,
|
||||||
"max_retries": 1
|
"max_retries": 1
|
||||||
},
|
},
|
||||||
|
|||||||
+1
-1
@@ -25,7 +25,7 @@ DEFAULTS = {
|
|||||||
"dispatch": {
|
"dispatch": {
|
||||||
"per_worker_concurrency": 1,
|
"per_worker_concurrency": 1,
|
||||||
"queue_wait_seconds": 30,
|
"queue_wait_seconds": 30,
|
||||||
"request_timeout_seconds": 60,
|
"request_timeout_seconds": 600,
|
||||||
"retry_on_failure": True,
|
"retry_on_failure": True,
|
||||||
"max_retries": 1,
|
"max_retries": 1,
|
||||||
},
|
},
|
||||||
|
|||||||
+2
-2
@@ -11,7 +11,7 @@ server {
|
|||||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
proxy_set_header X-Forwarded-Proto $scheme;
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
|
||||||
proxy_read_timeout 90s;
|
proxy_read_timeout 600s;
|
||||||
proxy_send_timeout 90s;
|
proxy_send_timeout 600s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,195 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>接口2 — C端生发 测试页</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: 1400px; 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; }
|
||||||
|
.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.8; min-width: 0; }
|
||||||
|
.col-side { flex: 1; min-width: 0; }
|
||||||
|
|
||||||
|
/* 方案列表 — 每个方案一个横向卡片 */
|
||||||
|
.scheme-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: 14px; overflow: hidden; }
|
||||||
|
.scheme-header { padding: 10px 16px; background: #fafafa; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
|
||||||
|
.scheme-header .badge { background: #2563eb; color: #fff; padding: 2px 10px; border-radius: 10px; font-size: 11px; }
|
||||||
|
.scheme-header .tag { font-size: 11px; color: #6b7280; }
|
||||||
|
.scheme-imgs { display: flex; gap: 12px; padding: 12px 16px; }
|
||||||
|
.scheme-imgs .img-slot { flex: 1; min-width: 0; text-align: center; }
|
||||||
|
.scheme-imgs .img-slot .label { font-size: 11px; font-weight: 600; color: #6b7280; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }
|
||||||
|
.scheme-imgs .img-slot .label .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
|
||||||
|
.scheme-imgs .img-slot .label .dot.preview { background: #f59e0b; }
|
||||||
|
.scheme-imgs .img-slot .label .dot.grown { background: #059669; }
|
||||||
|
.scheme-imgs .img-slot .thumb { background: #222; border-radius: 6px; overflow: hidden; line-height: 0; }
|
||||||
|
.scheme-imgs .img-slot .thumb img { width: 100%; max-height: 220px; object-fit: contain; display: block; }
|
||||||
|
.scheme-imgs .img-slot .na { color: #d1d5db; font-size: 12px; padding: 30px 0; background: #f9fafb; border-radius: 6px; }
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>💇 接口2 — C端生发 测试</h1>
|
||||||
|
<p class="subtitle">POST /api/v1/hair/grow | 正面照 + 性别 → 每个方案展示：原图 / 发际线叠加 / 生发效果</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"><option value="female" selected>👩 Female</option><option value="male">👨 Male</option></select>
|
||||||
|
</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" id="schemesContainer"></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 _origUrl = '';
|
||||||
|
|
||||||
|
const TYPE_LABELS = {
|
||||||
|
ellipse:'椭圆形', flower:'花瓣形', heart:'心形', straight:'直线形', wave:'波浪形', m:'M形', inverse_arc:'倒弧形'
|
||||||
|
};
|
||||||
|
|
||||||
|
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; }
|
||||||
|
|
||||||
|
_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);
|
||||||
|
try {
|
||||||
|
const r = await fetch(API_BASE + '/api/v1/hair/grow', { 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 results = json.data.results || [];
|
||||||
|
setStatus('✅ ' + results.length + ' 个方案', 'success');
|
||||||
|
renderSchemes(results);
|
||||||
|
} else {
|
||||||
|
setStatus('❌ code=' + json.code + ' ' + json.message, 'error');
|
||||||
|
$('schemesContainer').innerHTML = '<div style="color:#9ca3af">无结果</div>';
|
||||||
|
}
|
||||||
|
} catch(e) { setStatus('❌ ' + e.message, 'error'); $('resultsArea').classList.remove('hidden'); }
|
||||||
|
finally { $('submitBtn').disabled = false; $('submitBtn').textContent = '🚀 提交'; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderSchemes(results) {
|
||||||
|
let html = '';
|
||||||
|
results.forEach((r, i) => {
|
||||||
|
const lb = TYPE_LABELS[r.hairline_type] || r.hairline_type;
|
||||||
|
|
||||||
|
// 原图
|
||||||
|
const origSlot = '<div class="img-slot">'+
|
||||||
|
'<div class="label">📷 原图</div>'+
|
||||||
|
'<div class="thumb"><img src="'+_origUrl+'" alt="原图"></div></div>';
|
||||||
|
|
||||||
|
// 发际线叠加
|
||||||
|
const overlaySlot = '<div class="img-slot">'+
|
||||||
|
'<div class="label"><span class="dot preview"></span>发际线叠加</div>'+
|
||||||
|
'<div class="thumb"><img src="'+r.image_url+'" alt="叠加"></div></div>';
|
||||||
|
|
||||||
|
// 生发效果
|
||||||
|
let grownSlot;
|
||||||
|
if (r.grown_image_url) {
|
||||||
|
grownSlot = '<div class="img-slot">'+
|
||||||
|
'<div class="label"><span class="dot grown"></span>生发效果</div>'+
|
||||||
|
'<div class="thumb"><img src="'+r.grown_image_url+'" alt="生发"></div></div>';
|
||||||
|
} else {
|
||||||
|
grownSlot = '<div class="img-slot">'+
|
||||||
|
'<div class="label"><span class="dot grown"></span>生发效果</div>'+
|
||||||
|
'<div class="na">⚠ 未返回<br><span style="font-size:10px;color:#9ca3af">ComfyUI 未就绪或生成失败</span></div></div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '<div class="scheme-card">'+
|
||||||
|
'<div class="scheme-header"><span class="badge">#'+r.order+'</span> '+lb+
|
||||||
|
'<span class="tag">hairline_type: '+r.hairline_type+'</span></div>'+
|
||||||
|
'<div class="scheme-imgs">'+origSlot+overlaySlot+grownSlot+'</div>'+
|
||||||
|
'</div>';
|
||||||
|
});
|
||||||
|
$('schemesContainer').innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearResults() {
|
||||||
|
_origUrl='';
|
||||||
|
$('resultsArea').classList.add('hidden'); $('statusBar').className='status hidden';
|
||||||
|
$('imageFile').value=''; $('jsonContent').textContent=''; $('schemesContainer').innerHTML='';
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
@@ -0,0 +1,205 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>接口3 — B端生发 测试页</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-group { margin-bottom: 14px; }
|
||||||
|
.upload-group:last-child { margin-bottom: 0; }
|
||||||
|
.upload-group .label { font-weight: 700; font-size: 13px; color: #374151; margin-bottom: 6px; }
|
||||||
|
.upload-group .label .tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 6px; }
|
||||||
|
.upload-group .label .tag.required { background: #fee2e2; color: #991b1b; }
|
||||||
|
.upload-group input[type=file] { width: 100%; padding: 8px; border: 2px dashed #ddd; border-radius: 8px; cursor: pointer; }
|
||||||
|
.upload-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
|
||||||
|
.upload-row .upload-group { flex: 1; min-width: 250px; }
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
/* 结果卡片 */
|
||||||
|
.outcome { margin-top: 14px; }
|
||||||
|
.outcome .field { margin-bottom: 10px; }
|
||||||
|
.outcome .field .name { font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
|
||||||
|
.outcome img { max-width: 100%; max-height: 350px; border-radius: 8px; display: block; }
|
||||||
|
|
||||||
|
/* 标记图 + 原图预览 */
|
||||||
|
.preview-row { display: flex; gap: 16px; }
|
||||||
|
.preview-row > div { flex: 1; text-align: center; }
|
||||||
|
.preview-row .thumb { background: #222; border-radius: 8px; overflow: hidden; display: inline-block; line-height: 0; }
|
||||||
|
.preview-row .thumb img { max-width: 100%; max-height: 300px; object-fit: contain; }
|
||||||
|
.preview-row .caption { font-size: 11px; color: #9ca3af; margin-top: 6px; }
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #dbeafe; color: #1e40af; }
|
||||||
|
.mt-8 { margin-top: 8px; }
|
||||||
|
|
||||||
|
@media (max-width: 800px) { .results-layout, .preview-row { flex-direction: column; } }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>🏥 接口3 — B端生发 测试</h1>
|
||||||
|
<p class="subtitle">POST /api/v1/hair/grow-b | 医生划线图 + 原图 → 最佳发际线 + 生发效果</p>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="upload-row">
|
||||||
|
<div class="upload-group">
|
||||||
|
<div class="label">✏️ 划线图（marked_image）<span class="tag required">必填</span></div>
|
||||||
|
<input type="file" id="markedFile" accept="image/jpeg,image/png,.jpg,.jpeg,.png">
|
||||||
|
</div>
|
||||||
|
<div class="upload-group">
|
||||||
|
<div class="label">📷 原始照片（original_image）<span class="tag required">必填</span></div>
|
||||||
|
<input type="file" id="origFile" accept="image/jpeg,image/png,.jpg,.jpeg,.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top:14px;display:flex;gap:12px;align-items:center">
|
||||||
|
<button class="btn btn-primary" id="submitBtn" onclick="submitTest()">🚀 提交</button>
|
||||||
|
<button class="btn btn-outline btn-sm" onclick="clearResults()">清除</button>
|
||||||
|
</div>
|
||||||
|
<div class="hint">两张图都必填，各 ≤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">
|
||||||
|
<div class="preview-row">
|
||||||
|
<div><div class="thumb" id="markedThumb"><span style="color:#9ca3af;padding:40px">划线图</span></div><div class="caption">marked_image（划线图）</div></div>
|
||||||
|
<div><div class="thumb" id="origThumb"><span style="color:#9ca3af;padding:40px">原始照片</span></div><div class="caption">original_image（原图）</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 结果 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header"><span>🎯 返回结果</span></div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="outcome">
|
||||||
|
<div class="field">
|
||||||
|
<div class="name">发际线类型 <span class="badge" id="hairlineType">—</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="name">最合适发际线图（best_hairline_image）</div>
|
||||||
|
<div class="thumb" id="bestHairlineImg"><span style="color:#9ca3af;padding:40px">—</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="name">生发效果图（hair_growth_image）</div>
|
||||||
|
<div class="thumb" id="growthImg"><span style="color:#9ca3af;padding:40px">—</span></div>
|
||||||
|
</div>
|
||||||
|
</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;
|
||||||
|
const TYPE_LABELS = {
|
||||||
|
ellipse:'椭圆形', flower:'花瓣形', heart:'心形', straight:'直线形', wave:'波浪形', m:'M形', inverse_arc:'倒弧形'
|
||||||
|
};
|
||||||
|
|
||||||
|
function $(id) { return document.getElementById(id); }
|
||||||
|
function setStatus(t, type) { const b=$('statusBar'); b.textContent=t; b.className='status '+type; }
|
||||||
|
|
||||||
|
function showThumb(id, file) {
|
||||||
|
if (!file) return;
|
||||||
|
const url = URL.createObjectURL(file);
|
||||||
|
$(id).innerHTML = '<img src="'+url+'" alt="preview">';
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submitTest() {
|
||||||
|
const mf = $('markedFile').files[0], of = $('origFile').files[0];
|
||||||
|
if (!mf) { setStatus('请选择划线图', 'error'); return; }
|
||||||
|
if (!of) { setStatus('请选择原始照片', 'error'); return; }
|
||||||
|
if (mf.size > 1_000_000 || of.size > 1_000_000) { setStatus('文件超过 1 MB', 'error'); return; }
|
||||||
|
|
||||||
|
showThumb('markedThumb', mf); showThumb('origThumb', of);
|
||||||
|
|
||||||
|
$('submitBtn').disabled = true; $('submitBtn').textContent = '⏳ ...';
|
||||||
|
setStatus('请求中...', 'info'); $('resultsArea').classList.add('hidden');
|
||||||
|
|
||||||
|
const fd = new FormData();
|
||||||
|
fd.append('marked_image_file', mf);
|
||||||
|
fd.append('original_image_file', of);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const r = await fetch(API_BASE + '/api/v1/hair/grow-b', { 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 d = json.data;
|
||||||
|
$('hairlineType').textContent = TYPE_LABELS[d.hairline_type] || d.hairline_type || '—';
|
||||||
|
if (d.best_hairline_image_url) {
|
||||||
|
$('bestHairlineImg').innerHTML = '<img src="'+d.best_hairline_image_url+'" alt="best hairline">';
|
||||||
|
}
|
||||||
|
if (d.hair_growth_image_url) {
|
||||||
|
$('growthImg').innerHTML = '<img src="'+d.hair_growth_image_url+'" alt="hair growth">';
|
||||||
|
}
|
||||||
|
setStatus('✅ 成功 | 发际线类型: ' + (TYPE_LABELS[d.hairline_type] || d.hairline_type), 'success');
|
||||||
|
} 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 clearResults() {
|
||||||
|
$('resultsArea').classList.add('hidden'); $('statusBar').className='status hidden';
|
||||||
|
$('markedFile').value=''; $('origFile').value=''; $('jsonContent').textContent='';
|
||||||
|
$('markedThumb').innerHTML='<span style="color:#9ca3af;padding:40px">划线图</span>';
|
||||||
|
$('origThumb').innerHTML='<span style="color:#9ca3af;padding:40px">原始照片</span>';
|
||||||
|
$('bestHairlineImg').innerHTML='<span style="color:#9ca3af;padding:40px">—</span>';
|
||||||
|
$('growthImg').innerHTML='<span style="color:#9ca3af;padding:40px">—</span>';
|
||||||
|
$('hairlineType').textContent='—';
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyJson() {
|
||||||
|
navigator.clipboard.writeText($('jsonContent').textContent).then(() => {
|
||||||
|
const b = event.target, o = b.textContent; b.textContent = '✅ 已复制'; setTimeout(() => b.textContent = o, 1500);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,214 @@
|
|||||||
|
<!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; }
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
/* 方案网格 */
|
||||||
|
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 12px; }
|
||||||
|
.result-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06); overflow: hidden; cursor: pointer; transition: .15s; border: 3px solid transparent; }
|
||||||
|
.result-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.12); }
|
||||||
|
.result-card.selected { border-color: #2563eb; }
|
||||||
|
.result-card .img-wrap { background: #222; min-height: 150px; max-height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||||||
|
.result-card .img-wrap img { max-width: 100%; max-height: 200px; object-fit: contain; }
|
||||||
|
.result-card .info { padding: 10px 12px; font-size: 12px; display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
.result-card .info .badge { background: #2563eb; color: #fff; padding: 1px 8px; border-radius: 10px; font-size: 11px; }
|
||||||
|
|
||||||
|
/* 预览叠加 */
|
||||||
|
.preview-stack { position: relative; display: inline-block; line-height: 0; background: #222; border-radius: 8px; overflow: hidden; }
|
||||||
|
.preview-stack img { display: block; max-width: 100%; max-height: 450px; }
|
||||||
|
.preview-stack .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
|
||||||
|
|
||||||
|
.preview-controls { display: flex; gap: 14px; align-items: center; font-size: 12px; color: #9ca3af; }
|
||||||
|
.preview-controls label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
|
||||||
|
|
||||||
|
/* 坐标高亮 */
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.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 | 上传正面照 + 性别 → N 张发际线叠加图 + 最佳中心点坐标</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"><option value="female" selected>👩 Female（5种）</option><option value="male">👨 Male（4种）</option></select>
|
||||||
|
</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 | Female: 椭圆/花瓣/心形/直线/波浪 | Male: 椭圆/M形/直线/倒弧 | 返回中心点坐标（原图像素）</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 class="preview-controls">
|
||||||
|
<label><input type="checkbox" id="showBase" checked onchange="syncOverlay()"> 底图</label>
|
||||||
|
<label><input type="checkbox" id="showOver" checked onchange="syncOverlay()"> 发际线</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="text-align:center">
|
||||||
|
<div id="previewArea"><span style="color:#9ca3af">← 点击下方方案卡片</span></div>
|
||||||
|
<div class="coord-box">
|
||||||
|
<div class="label">📍 最佳发际线中心点（best_hairline_center_point）— 原图像素坐标</div>
|
||||||
|
<div class="value" id="centerPoint">—</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 方案列表 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header"><span>🎯 发际线方案</span><span style="font-weight:400;font-size:12px;color:#9ca3af">点击切换预览 | order=1 最佳</span></div>
|
||||||
|
<div class="card-body"><div class="results-grid" 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; }
|
||||||
|
|
||||||
|
async function submitTest() {
|
||||||
|
const f = $('imageFile').files[0];
|
||||||
|
if (!f) { setStatus('请选择图片', 'error'); return; }
|
||||||
|
if (f.size > 1_000_000) { setStatus('文件超过 1 MB', '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);
|
||||||
|
try {
|
||||||
|
const r = await fetch(API_BASE + '/api/v1/hairline/generate', { method:'POST', body:fd });
|
||||||
|
const json = await r.json();
|
||||||
|
$('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 + ')' : '—';
|
||||||
|
setStatus('✅ ' + _images.length + ' 个方案', 'success');
|
||||||
|
renderGrid();
|
||||||
|
if (_images.length) selectCard(0);
|
||||||
|
} 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 renderGrid() {
|
||||||
|
let h = '';
|
||||||
|
_images.forEach((img, i) => {
|
||||||
|
h += '<div class="result-card'+(i===0?' selected':'')+'" onclick="selectCard('+i+',this)">'+
|
||||||
|
'<div class="img-wrap"><img src="'+img.image_url+'" alt="#'+img.order+'" loading="lazy"></div>'+
|
||||||
|
'<div class="info"><span class="badge">#'+(img.order||'—')+'</span>'+(i===0?'<span style="font-size:11px;color:#059669">⭐ 最佳</span>':'')+'</div></div>';
|
||||||
|
});
|
||||||
|
$('resultsGrid').innerHTML = h;
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectCard(idx, el) {
|
||||||
|
document.querySelectorAll('.result-card').forEach(c => c.classList.remove('selected'));
|
||||||
|
if (el) el.classList.add('selected');
|
||||||
|
$('previewArea').innerHTML =
|
||||||
|
'<div class="preview-stack">'+
|
||||||
|
'<img class="layer-base5" src="'+_origUrl+'" alt="原图">'+
|
||||||
|
'<img class="layer-over5" src="'+_images[idx].image_url+'" alt="#'+_images[idx].order+'">'+
|
||||||
|
'</div>';
|
||||||
|
syncOverlay();
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncOverlay() {
|
||||||
|
const base = document.querySelector('.layer-base5');
|
||||||
|
const over = document.querySelector('.layer-over5');
|
||||||
|
if (base) base.style.display = $('showBase').checked ? '' : 'none';
|
||||||
|
if (over) over.style.display = $('showOver').checked ? '' : 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearResults() {
|
||||||
|
_images=[]; _origUrl=''; _center=null;
|
||||||
|
$('resultsArea').classList.add('hidden'); $('statusBar').className='status hidden';
|
||||||
|
$('imageFile').value=''; $('jsonContent').textContent=''; $('resultsGrid').innerHTML='';
|
||||||
|
$('previewArea').innerHTML='<span style="color:#9ca3af">← 点击下方方案卡片</span>';
|
||||||
|
$('centerPoint').textContent='—';
|
||||||
|
}
|
||||||
|
|
||||||
|
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