${item.name}
No images queued
';
syncQ();
updateResizePreview();
}
function setQS(id, cls, txt) { const e = document.getElementById('qs-'+id); if (e) { e.className='qs '+cls; e.textContent=txt; } }
function setPB(id, show, pct) {
const pb = document.getElementById('qpb-'+id), pbr = document.getElementById('qpbr-'+id);
if (pb) pb.classList.toggle('on', show); if (pbr) pbr.style.width = pct+'%';
}
function log(msg, cls='') {
const w = document.getElementById('logWrap');
w.classList.add('on');
const d = document.createElement('div');
d.className='log-line '+cls; d.textContent='» '+msg;
w.appendChild(d); w.scrollTop = w.scrollHeight;
}
// ═══════════════════════════════════════════════════════════════════
// PIPELINE RUNNER ← Now calls the server API
// ═══════════════════════════════════════════════════════════════════
async function runPipeline() {
if (!queue.length) return;
results = [];
document.getElementById('resGrid').innerHTML = '';
document.getElementById('resultsSection').style.display = 'none';
document.getElementById('logWrap').innerHTML = '';
document.getElementById('logWrap').classList.remove('on');
document.getElementById('runBtn').disabled = true;
// ── Collect settings from the UI ──
const resizeMode = document.getElementById('resizeMode')?.value || 'smart-crop-extend';
const cfg = {
flow: flow,
upscale_factor: parseFloat(document.getElementById('upscaleFactor').value),
upscale_method: document.getElementById('upscaleMethod').value,
shopify_size: parseInt(document.getElementById('shopifySize').value),
webp_quality: parseInt(document.getElementById('webpQ').value),
max_kb: parseInt(document.getElementById('maxKB').value),
rename_pattern: document.getElementById('renamePattern').value.trim(),
bg_model: document.getElementById('bgModel')?.value || 'isnet',
alpha_threshold: parseInt(document.getElementById('bgSens')?.value) || 80,
feather: parseInt(document.getElementById('bgFeather')?.value) || 1,
output_format: document.getElementById('bgOutputFormat')?.value || 'webp',
resize_w: parseInt(document.getElementById('resizeW')?.value) || 1200,
resize_h: parseInt(document.getElementById('resizeH')?.value) || 1200,
resize_mode: resizeMode,
resize_focus: document.getElementById('resizeFocus')?.value || 'smart',
resize_align: document.getElementById('resizeAlign')?.value || 'center',
resize_blend: parseInt(document.getElementById('resizeBlend')?.value) || 40,
resize_fill: document.getElementById('resizeFill')?.value || 'extend',
fill_color: document.getElementById('fillColor')?.value || '#ffffff',
};
// ── Process each image ──
for (const item of queue) {
setQS(item.id, 'sp', 'PROCESSING');
setPB(item.id, true, 5);
resetTrack();
log(`Processing: ${item.name}`);
try {
const flowIcons = { 1:'🔎', 2:'🧠', 3:'⚡' };
const flowNames = { 1:`Upscaling ×${cfg.upscale_factor}`, 2:'ISNet BG Removal', 3:'Smart Resize' };
showInlineProgress(flowNames[flow] || 'Processing…', flowIcons[flow] || '⚙️');
updateInlineProgress(10, 'Uploading to server…', item.name);
// ── Build FormData ──
const fd = new FormData();
fd.append('file', item.file);
Object.entries(cfg).forEach(([k, v]) => fd.append(k, v));
// Animate a fake progress bar while waiting
let fakeP = 10;
const fakeTick = setInterval(() => {
fakeP = Math.min(fakeP + (85 - fakeP) * 0.06, 84);
updateInlineProgress(fakeP, 'Server processing…', item.name);
setPB(item.id, true, Math.round(fakeP));
}, 400);
// ── Send to API ──
const response = await fetch('/api/process', { method: 'POST', body: fd });
clearInterval(fakeTick);
updateInlineProgress(95, 'Receiving result…', '');
if (!response.ok) {
let errMsg = `Server error ${response.status}`;
try { const j = await response.json(); errMsg = j.detail || errMsg; } catch {}
throw new Error(errMsg);
}
const blob = await response.blob();
// ── Parse response headers ──
const outName = response.headers.get('X-IMGFLOW-Name') || `output_${item.name}`;
const dims = response.headers.get('X-IMGFLOW-Dims') || '—';
const srvLog = response.headers.get('X-IMGFLOW-Log') || '';
const srvTime = response.headers.get('X-IMGFLOW-Time') || '';
updateInlineProgress(100, `Done ✓ (${srvTime})`, '');
hideInlineProgress();
// Read as dataURL for preview
const dataURL = await _blobToDataURL(blob);
const out = {
id: item.id,
name: outName,
blob,
dataURL,
orig: item.size,
size: blob.size,
dims,
};
results.push(out);
addResult(out);
setQS(item.id, 'sd', 'DONE');
setPB(item.id, true, 100);
if (srvLog) srvLog.split(' | ').forEach(l => log(` ✓ ${l}`, 'ok'));
log(` ✓ ${outName} — ${(blob.size/1024).toFixed(0)} KB ${srvTime}`, 'ok');
// Mark all pipe steps done
const stepCount = flow === 2 ? 4 : 3;
for (let i = 0; i < stepCount; i++) pipeStep(i, 'done');
} catch (err) {
hideInlineProgress();
setQS(item.id, 'se', 'ERROR');
log(` ✗ ${err.message}`, 'err');
console.error(err);
}
setPB(item.id, false, 0);
resetTrack();
}
document.getElementById('statsCount').textContent = results.length;
document.getElementById('resultsSection').style.display = 'block';
document.getElementById('resCount').textContent = results.length + ' file' + (results.length !== 1 ? 's' : '');
document.getElementById('runBtn').disabled = false;
log(`Done. ${results.length} file(s) ready.`, 'ok');
}
// Blob → data URL
function _blobToDataURL(blob) {
return new Promise((res, rej) => {
const r = new FileReader();
r.onload = () => res(r.result);
r.onerror = () => rej(new Error('FileReader failed'));
r.readAsDataURL(blob);
});
}
// ═══════════════════════════════════════
// RESULT CARDS
// ═══════════════════════════════════════
function addResult(r) {
const s = Math.round((1 - r.size / r.orig) * 100);
const card = document.createElement('div');
card.className = 'rc';
card.innerHTML = `
${r.name}
${(r.size/1024).toFixed(0)} KB
${s>0?'↓':'↑'}${Math.abs(s)}%
${r.dims}