-
-
发际线类型
-
—
+
+
![原图(划线图)]()
+
![生发效果图]()
+
—
-
-
生发效果图(hair_growth_image)ComfyUI
-
—
+
+ 原图
+
+ 生发图
+ 0.50
@@ -125,14 +139,20 @@ async function submitTest() {
if (!mf) { setStatus('请选择划线图', 'error'); return; }
if (mf.size > 1_000_000) { setStatus('文件超过 1 MB', 'error'); return; }
- // 预览划线图
- $('markedThumb').innerHTML = '
+')
';
+ const markedUrl = URL.createObjectURL(mf);
+ // 先显示原图
+ $('blendPlaceholder').style.display = 'none';
+ $('blendBottom').src = markedUrl;
+ $('blendBottom').style.display = 'block';
+ $('blendTop').style.display = 'none';
+ $('blendControls').classList.add('hidden');
$('submitBtn').disabled = true; $('submitBtn').textContent = '⏳ ...';
- setStatus('请求中(生发需要数十秒)...', 'info'); $('resultsArea').classList.add('hidden');
+ setStatus('请求中(生发需要数十秒)...', 'info'); $('resultsArea').classList.remove('hidden');
const fd = new FormData();
fd.append('marked_image_file', mf);
+ fd.append('use_mask', $('useMask').value);
try {
const r = await fetch(API_BASE + '/api/v1/hair/grow-b', { method:'POST', body:fd });
@@ -142,18 +162,29 @@ async function submitTest() {
if (json.code === 0) {
const d = json.data;
- $('hairlineType').textContent = d.hairline_type || '—';
+ if (d.hairline_type) {
+ $('hairlineType').textContent = '发际线: ' + d.hairline_type;
+ $('hairlineType').style.display = 'inline-block';
+ }
- if (d.hair_growth_image_url) {
- $('growthImg').innerHTML = '

';
+ const grownSrc = d.hair_growth_image_url || d.hair_growth_image_base64;
+ if (grownSrc) {
+ $('blendTop').src = grownSrc;
+ $('blendTop').style.display = 'block';
+ $('blendTop').style.opacity = $('blendSlider').value;
+ $('blendControls').classList.remove('hidden');
+ $('blendValue').textContent = parseFloat($('blendSlider').value).toFixed(2);
} else {
- $('growthImg').innerHTML = '
⚠ 生发图未返回
ComfyUI 未就绪或生成失败
';
+ $('blendTop').style.display = 'none';
+ $('blendControls').classList.add('hidden');
+ setStatus('⚠ 生发图未返回 — ComfyUI 未就绪或生成失败', 'info');
+ return;
}
setStatus('✅ 成功 | 发际线类型: ' + (d.hairline_type || '—'), 'success');
} else {
setStatus('❌ code=' + json.code + ' ' + json.message, 'error');
- $('growthImg').innerHTML = '
—
';
+ $('blendTop').style.display = 'none';
}
} catch(e) { setStatus('❌ ' + e.message, 'error'); $('resultsArea').classList.remove('hidden'); }
finally { $('submitBtn').disabled = false; $('submitBtn').textContent = '🚀 提交'; }
@@ -162,11 +193,19 @@ async function submitTest() {
function clearResults() {
$('resultsArea').classList.add('hidden'); $('statusBar').className='status hidden';
$('markedFile').value=''; $('jsonContent').textContent='';
- $('markedThumb').innerHTML='
—';
- $('growthImg').innerHTML='
—';
- $('hairlineType').textContent='—';
+ $('blendBottom').src = ''; $('blendBottom').style.display = 'none';
+ $('blendTop').src = ''; $('blendTop').style.display = 'none';
+ $('blendPlaceholder').style.display = 'block';
+ $('blendControls').classList.add('hidden');
+ $('blendSlider').value = 0.5; $('blendValue').textContent = '0.50';
+ $('hairlineType').textContent = ''; $('hairlineType').style.display = 'none';
}
+$('blendSlider').addEventListener('input', function() {
+ $('blendTop').style.opacity = this.value;
+ $('blendValue').textContent = parseFloat(this.value).toFixed(2);
+});
+
function copyJson() {
navigator.clipboard.writeText($('jsonContent').textContent).then(() => {
const b = event.target, o = b.textContent; b.textContent = '✅ 已复制'; setTimeout(() => b.textContent = o, 1500);