xsl/hair
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save code

Browse Source
This commit is contained in:
Ubuntu
2026-06-15 10:33:15 +08:00
parent bf76923591
commit 795de68985
2 changed files with 39 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
image/man2.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 253 KiB

static/test_interface3.html
+34 -62
View File
@@ -16,7 +16,6 @@
.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; }
@@ -42,25 +41,22 @@
.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 .thumb img { max-width: 100%; max-height: 350px; object-fit: contain; }
.preview-row .caption { font-size: 11px; color: #9ca3af; margin-top: 6px; }
.na { color: #d1d5db; font-size: 12px; padding: 40px 20px; background: #f9fafb; border-radius: 6px; }
.result-field { margin-bottom: 14px; }
.result-field .name { font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; background: #dbeafe; color: #1e40af; }
.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; }
.tag-new { background: #059669; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
@media (max-width: 800px) { .results-layout, .preview-row { flex-direction: column; } }
</style>
@@ -68,61 +64,47 @@
<body>
<div class="container">
<h1>🏥 接口3 — B端生发 测试</h1>
<p class="subtitle">POST /api/v1/hair/grow-b &nbsp;|&nbsp; 医生划线图 + 原图 → 最佳发际线 + 生发效果</p>
<p class="subtitle">POST /api/v1/hair/grow-b &nbsp;|&nbsp; 上传马克笔划线图 → 生发效果图</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 &nbsp;|&nbsp; 划线图 = 医生在原图上标了目标发际线的图片</div>
<div class="hint">JPG/PNG ≤1MB &nbsp;|&nbsp; 用马克笔在用户照片额头画发际线后拍照上传 &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">
<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 class="card-header"><span>📸 划线图预览</span></div>
<div class="card-body" style="text-align:center">
<div class="thumb" id="markedThumb"><span style="color:#9ca3af;padding:40px">—</span></div>
</div>
</div>
<!-- 结果 -->
<div class="card">
<div class="card-header"><span>🎯 返回结果</span></div>
<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 class="result-field">
<div class="name">发际线类型</div>
<span class="badge" id="hairlineType">—</span>
</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="result-field">
<div class="name">生发效果图（hair_growth_image）<span class="tag-new">ComfyUI</span></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>
@@ -134,33 +116,23 @@
<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];
const mf = $('markedFile').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; }
if (mf.size > 1_000_000) { setStatus('文件超过 1 MB', 'error'); return; }
showThumb('markedThumb', mf); showThumb('origThumb', of);
// 预览划线图
$('markedThumb').innerHTML = '<img src="'+URL.createObjectURL(mf)+'" alt="划线图">';
$('submitBtn').disabled = true; $('submitBtn').textContent = '⏳ ...';
setStatus('请求中...', 'info'); $('resultsArea').classList.add('hidden');
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 });
@@ -170,16 +142,18 @@ async function submitTest() {
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">';
}
$('hairlineType').textContent = d.hairline_type || '—';
if (d.hair_growth_image_url) {
$('growthImg').innerHTML = '<img src="'+d.hair_growth_image_url+'" alt="hair growth">';
$('growthImg').innerHTML = '<img src="'+d.hair_growth_image_url+'" alt="生发效果">';
} else {
$('growthImg').innerHTML = '<div class="na">⚠ 生发图未返回<br><span style="font-size:10px;color:#9ca3af">ComfyUI 未就绪或生成失败</span></div>';
}
setStatus('✅ 成功 &nbsp;|&nbsp; 发际线类型: ' + (TYPE_LABELS[d.hairline_type] || d.hairline_type), 'success');
setStatus('✅ 成功 &nbsp;|&nbsp; 发际线类型: ' + (d.hairline_type || '—'), 'success');
} else {
setStatus('❌ code=' + json.code + ' ' + json.message, 'error');
$('growthImg').innerHTML = '<div class="na">—</div>';
}
} catch(e) { setStatus('❌ ' + e.message, 'error'); $('resultsArea').classList.remove('hidden'); }
finally { $('submitBtn').disabled = false; $('submitBtn').textContent = '🚀 提交'; }
@@ -187,10 +161,8 @@ async function submitTest() {
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>';
$('markedFile').value=''; $('jsonContent').textContent='';
$('markedThumb').innerHTML='<span style="color:#9ca3af;padding:40px">—</span>';
$('growthImg').innerHTML='<span style="color:#9ca3af;padding:40px">—</span>';
$('hairlineType').textContent='—';
}