Upload script.js with huggingface_hub

script.js

@@ -0,0 +1,480 @@
+// ═══════════════════════════════════════
+// STATE
+// ═══════════════════════════════════════
+let flow = 1, queue = [], results = [];
+let _previewSrc = { w: 0, h: 0 };
+
+// ═══════════════════════════════════════
+// INLINE SERVER-PROGRESS OVERLAY
+// Replaces the old model-download overlay —
+// now shows server processing status
+// ═══════════════════════════════════════
+let _inlineOverlay = null;
+
+function showInlineProgress(title, icon = '⚙️') {
+  if (_inlineOverlay) return;
+  _inlineOverlay = document.createElement('div');
+  _inlineOverlay.id = 'inlineOverlay';
+  _inlineOverlay.innerHTML = `
+    <div class="mo-card">
+      <div class="mo-icon-wrap">
+        <svg class="mo-spinner" width="48" height="48" viewBox="0 0 48 48" fill="none">
+          <circle cx="24" cy="24" r="20" stroke="rgba(198,241,53,0.12)" stroke-width="3"/>
+          <path d="M24 4 A20 20 0 0 1 44 24" stroke="var(--a)" stroke-width="3" stroke-linecap="round"/>
+        </svg>
+        <span class="mo-icon-inner" id="ipoIcon">${icon}</span>
+      </div>
+      <div class="mo-title" id="ipoTitle">${title}</div>
+      <div class="mo-sub" id="ipoSub">Sending to server…</div>
+      <div class="mo-track">
+        <div class="mo-bar-wrap">
+          <div class="mo-bar" id="ipoBar" style="background:linear-gradient(90deg,var(--a2),var(--a))"></div>
+          <div class="mo-bar-glow" id="ipoBarGlow" style="background:radial-gradient(ellipse,rgba(198,241,53,.55),transparent 70%)"></div>
+        </div>
+        <div class="mo-pct" id="ipoPct" style="color:var(--a)">—</div>
+      </div>
+      <div class="mo-files" id="ipoDetail"></div>
+      <div class="mo-note">Processing on server · no downloads required</div>
+    </div>`;
+  document.body.appendChild(_inlineOverlay);
+  requestAnimationFrame(() => _inlineOverlay.classList.add('visible'));
+}
+
+function updateInlineProgress(pct, sub, detail) {
+  const bar    = document.getElementById('ipoBar');
+  const glow   = document.getElementById('ipoBarGlow');
+  const pctEl  = document.getElementById('ipoPct');
+  const subEl  = document.getElementById('ipoSub');
+  const detEl  = document.getElementById('ipoDetail');
+  if (bar)   { bar.style.width = pct + '%'; }
+  if (glow)  { glow.style.left = pct + '%'; }
+  if (pctEl) pctEl.textContent = typeof pct === 'number' ? Math.round(pct) + '%' : pct;
+  if (subEl  && sub    != null) subEl.textContent  = sub;
+  if (detEl  && detail != null) detEl.textContent  = detail;
+}
+
+function hideInlineProgress() {
+  if (!_inlineOverlay) return;
+  _inlineOverlay.classList.add('hiding');
+  setTimeout(() => { _inlineOverlay?.remove(); _inlineOverlay = null; }, 500);
+}
+
+// ═══════════════════════════════════════
+// FLOW UI  (unchanged from original)
+// ═══════════════════════════════════════
+function selectFlow(n) {
+  flow = n;
+  document.querySelectorAll('.ftab').forEach((b, i) => b.classList.toggle('active', i === n - 1));
+
+  document.getElementById('bgModelGroup').classList.toggle('sg-hidden',    n !== 2);
+  document.getElementById('bgSensGroup').classList.toggle('sg-hidden',     n !== 2);
+  document.getElementById('bgFeatherGroup').classList.toggle('sg-hidden',  n !== 2);
+  document.getElementById('bgOutputGroup').classList.toggle('sg-hidden',   n !== 2);
+  document.getElementById('bgInfo').classList.toggle('sg-hidden',          n !== 2);
+
+  document.querySelectorAll('.resize-setting').forEach(el => el.classList.toggle('sg-hidden', n !== 3));
+  document.getElementById('resizeInfo').classList.toggle('sg-hidden',    n !== 3);
+  document.getElementById('resizePreview').classList.toggle('sg-hidden', n !== 3);
+
+  toggleFillColor();
+  onResizeModeChange();
+  renderTrack();
+  if (n === 3) updateResizePreview();
+}
+
+function onResizeModeChange() {
+  if (flow !== 3) return;
+  const mode = document.getElementById('resizeMode')?.value;
+  const blendGroup = document.getElementById('resizeBlendGroup');
+  if (blendGroup) blendGroup.classList.toggle('sg-hidden', mode !== 'smart-crop-extend');
+  const focusGroup = document.getElementById('resizeFocusGroup');
+  if (focusGroup) focusGroup.classList.toggle('sg-hidden', mode !== 'smart-crop-extend');
+  const fillEl = document.getElementById('resizeFill');
+  if (!fillEl) return;
+  const prevVal = fillEl.value;
+  const hasBluryOption = [...fillEl.options].some(o => o.value === 'blur');
+  const hasAIOption    = [...fillEl.options].some(o => o.value === 'ai-extend');
+  if (mode === 'proportional') {
+    if (hasAIOption) [...fillEl.options].find(o => o.value === 'ai-extend')?.remove();
+    if (!hasBluryOption) {
+      const opt = document.createElement('option');
+      opt.value = 'blur'; opt.textContent = 'Blurred Source (cinematic)';
+      fillEl.insertBefore(opt, fillEl.options[1]);
+    }
+    if (fillEl.value === 'ai-extend' || !fillEl.value) fillEl.value = 'extend';
+  } else {
+    if (hasBluryOption) [...fillEl.options].find(o => o.value === 'blur')?.remove();
+    if (!hasAIOption) {
+      const opt = document.createElement('option');
+      opt.value = 'ai-extend'; opt.textContent = '🤖 AI Environment Fill (smart)';
+      const extOpt = [...fillEl.options].find(o => o.value === 'extend');
+      if (extOpt) fillEl.insertBefore(opt, extOpt.nextSibling);
+      else fillEl.appendChild(opt);
+    }
+    if (prevVal === 'blur' || !prevVal) fillEl.value = 'ai-extend';
+  }
+  toggleFillColor();
+  updateResizePreview();
+}
+
+function renderTrack() {
+  let steps;
+  if (flow === 1) steps = [['🔎','Lanczos\nUpscale'],['📐','Shopify\nResize'],['🌐','WebP\nEncode']];
+  else if (flow === 2) steps = [['🧠','ISNet AI\nBG Remove'],['✨','Refine\nEdges'],['🔎','Lanczos\nUpscale'],['🌐','WebP\nEncode']];
+  else steps = [['🔍','Detect\nSubject'],['🔎','Upscale'],['⚡','Smart\nResize'],['🌐','Encode']];
+
+  document.getElementById('pipeTrack').innerHTML = steps.map((s, i) => `
+    <div class="pt-step">
+      <div class="pt-icon" id="ptd-${i}">${s[0]}</div>
+      <div class="pt-label" id="ptl-${i}">${s[1].replace('\n','<br>')}</div>
+    </div>
+    ${i < steps.length - 1 ? `<div class="pt-line" id="ptln-${i}"></div>` : ''}
+  `).join('');
+}
+
+function pipeStep(i, state) {
+  const d = document.getElementById('ptd-' + i);
+  const l = document.getElementById('ptln-' + i);
+  if (d) { d.classList.remove('running','done'); if (state) d.classList.add(state); }
+  if (state === 'done' && l) l.classList.add('done');
+}
+
+function resetTrack() {
+  document.querySelectorAll('.pt-icon').forEach(d => d.classList.remove('running','done'));
+  document.querySelectorAll('.pt-line').forEach(l => l.classList.remove('done'));
+}
+
+function toggleFillColor() {
+  const mode = document.getElementById('resizeFill')?.value;
+  const cg   = document.getElementById('fillColorGroup');
+  if (!cg) return;
+  cg.classList.toggle('sg-hidden', mode !== 'color' || flow !== 3);
+}
+
+// ─── Live resize preview (browser-only, purely cosmetic)  ────────────────
+function updateResizePreview() {
+  if (flow !== 3) return;
+  const tw = parseInt(document.getElementById('resizeW')?.value) || 0;
+  const th = parseInt(document.getElementById('resizeH')?.value) || 0;
+  const mode = document.getElementById('resizeMode')?.value || 'smart-crop-extend';
+
+  const rpSrc    = document.getElementById('rpSrc');
+  const rpTarget = document.getElementById('rpTarget');
+  const rpW      = document.getElementById('rpW');
+  const rpH      = document.getElementById('rpH');
+
+  if (rpTarget) rpTarget.textContent = tw && th ? `${tw} × ${th}` : '—';
+
+  if (!_previewSrc.w || !tw || !th) {
+    if (rpSrc) rpSrc.textContent = _previewSrc.w ? `${_previewSrc.w} × ${_previewSrc.h}` : '(drop image)';
+    if (rpW) { rpW.textContent = 'W: —'; rpW.className = 'rp-axis'; }
+    if (rpH) { rpH.textContent = 'H: —'; rpH.className = 'rp-axis'; }
+    return;
+  }
+  if (rpSrc) rpSrc.textContent = `${_previewSrc.w} × ${_previewSrc.h}`;
+
+  if (mode === 'proportional') {
+    const ratio = Math.min(tw / _previewSrc.w, th / _previewSrc.h);
+    const fw = Math.round(_previewSrc.w * ratio), fh = Math.round(_previewSrc.h * ratio);
+    const padW = tw - fw, padH = th - fh;
+    if (rpW) { rpW.textContent = `W: scale → ${fw}px (${padW>0?'+'+padW+' pad':'no pad'})`; rpW.className='rp-axis fit'; }
+    if (rpH) { rpH.textContent = `H: scale → ${fh}px (${padH>0?'+'+padH+' pad':'no pad'})`; rpH.className='rp-axis fit'; }
+  } else {
+    const sW=_previewSrc.w, sH=_previewSrc.h, sAR=sW/sH, tAR=tw/th;
+    let wLabel,hLabel,wCls,hCls;
+    if (sW<tw&&sH<th) {
+      wLabel=`W: ${sW}px → extend → ${tw}px`; wCls='extend';
+      hLabel=`H: ${sH}px → extend → ${th}px`; hCls='extend';
+    } else if (sW>=tw&&sH>=th) {
+      if (Math.abs(sAR-tAR)<0.005) { wLabel=`W: scale → ${tw}px`; wCls='match'; hLabel=`H: scale → ${th}px`; hCls='match'; }
+      else if (sAR>tAR) { wLabel=`W: crop → ${tw}px (subject-centred)`; wCls='crop'; hLabel=`H: fit ✓`; hCls='match'; }
+      else { wLabel=`W: fit ✓`; wCls='match'; hLabel=`H: crop → ${th}px (subject-centred)`; hCls='crop'; }
+    } else if (sW<tw) { wLabel=`W: extend → ${tw}px`; wCls='extend'; hLabel=`H: crop → ${th}px`; hCls='crop'; }
+    else { wLabel=`W: crop → ${tw}px`; wCls='crop'; hLabel=`H: extend → ${th}px`; hCls='extend'; }
+    if (rpW) { rpW.textContent=wLabel; rpW.className='rp-axis '+wCls; }
+    if (rpH) { rpH.textContent=hLabel; rpH.className='rp-axis '+hCls; }
+  }
+}
+
+// ═══════════════════════════════════════
+// FILE INPUT
+// ═══���═══════════════════════════════════
+const dz = document.getElementById('dropZone');
+const fi = document.getElementById('fileInput');
+dz.addEventListener('dragover',  e => { e.preventDefault(); dz.classList.add('drag'); });
+dz.addEventListener('dragleave', () => dz.classList.remove('drag'));
+dz.addEventListener('drop', e => { e.preventDefault(); dz.classList.remove('drag'); addFiles([...e.dataTransfer.files]); });
+fi.addEventListener('change', () => { addFiles([...fi.files]); fi.value = ''; });
+
+function addFiles(files) {
+  files.filter(f => f.type.startsWith('image/')).forEach(f => {
+    if (queue.find(q => q.name === f.name && q.size === f.size)) return;
+    const item = { id: Date.now() + Math.random(), file: f, name: f.name, size: f.size };
+    queue.push(item);
+    renderQI(item);
+  });
+  syncQ();
+}
+
+function renderQI(item) {
+  document.getElementById('emptyMsg')?.remove();
+  const div = document.createElement('div');
+  div.className = 'qi'; div.id = 'qi-' + item.id;
+  div.innerHTML = `
+    <img class="qi-thumb" id="qt-${item.id}" src="">
+    <div>
+      <div class="qi-name">${item.name}</div>
+      <div class="qi-meta"><span>${(item.size/1024).toFixed(0)} KB</span><span id="qdm-${item.id}">—</span></div>
+      <div class="qpb" id="qpb-${item.id}"><div class="qpbr" id="qpbr-${item.id}"></div></div>
+    </div>
+    <span class="qs sw" id="qs-${item.id}">WAITING</span>`;
+  document.getElementById('queueList').appendChild(div);
+
+  const r = new FileReader();
+  r.onload = e => { const el = document.getElementById('qt-' + item.id); if (el) el.src = e.target.result; };
+  r.readAsDataURL(item.file);
+
+  const img = new Image();
+  img.onload = () => {
+    const d = document.getElementById('qdm-' + item.id);
+    if (d) d.textContent = img.width + '×' + img.height;
+    _previewSrc = { w: img.width, h: img.height };
+    updateResizePreview();
+    URL.revokeObjectURL(img.src);
+  };
+  img.src = URL.createObjectURL(item.file);
+}
+
+function syncQ() {
+  document.getElementById('qCount').textContent = queue.length + (queue.length === 1 ? ' file' : ' files');
+  document.getElementById('runBtn').disabled = queue.length === 0;
+}
+
+function clearQueue() {
+  queue = [];
+  _previewSrc = { w: 0, h: 0 };
+  document.getElementById('queueList').innerHTML = '<div class="empty" id="emptyMsg">No images queued</div>';
+  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 = `
+    <img class="rc-img" src="${r.dataURL}" alt="${r.name}">
+    <div class="rc-body">
+      <div class="rc-name">${r.name}</div>
+      <div class="rc-stats">
+        <span class="pill py">${(r.size/1024).toFixed(0)} KB</span>
+        <span class="pill ${s>0?'pg':'pr'}">${s>0?'↓':'↑'}${Math.abs(s)}%</span>
+        <span class="pill pg">${r.dims}</span>
+      </div>
+      <button class="dl-btn" onclick="dlOne('${r.id}')">⬇ DOWNLOAD</button>
+    </div>`;
+  document.getElementById('resGrid').appendChild(card);
+  document.getElementById('resultsSection').style.display = 'block';
+}
+
+function dlOne(id) {
+  const r = results.find(x => String(x.id) === String(id));
+  if (!r) return;
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(r.blob);
+  a.download = r.name;
+  a.click();
+}
+
+async function downloadAll() {
+  if (!results.length) return;
+  const zip = new JSZip();
+  results.forEach(r => zip.file(r.name, r.blob));
+  const blob = await zip.generateAsync({ type: 'blob' });
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = 'imgflow_pipeline.zip';
+  a.click();
+}
+
+// ═══════════════════════════════════════
+// PRESETS
+// ═══════════════════════════════════════
+function applyPreset(p) {
+  document.querySelectorAll('.preset-btn').forEach(b => b.classList.toggle('active', b.dataset.preset === p));
+  if (p === 'quick') {
+    document.getElementById('upscaleMethod').value = 'bicubic';
+    document.getElementById('upscaleFactor').value = '2';
+    document.getElementById('webpQ').value = 75; document.getElementById('qv').textContent = 75;
+    document.getElementById('maxKB').value = 300;
+  } else if (p === 'balanced') {
+    document.getElementById('upscaleMethod').value = 'lanczos';
+    document.getElementById('upscaleFactor').value = '2';
+    document.getElementById('webpQ').value = 85; document.getElementById('qv').textContent = 85;
+    document.getElementById('maxKB').value = 500;
+  } else {
+    document.getElementById('upscaleMethod').value = 'lanczos';
+    document.getElementById('upscaleFactor').value = '3';
+    document.getElementById('webpQ').value = 95; document.getElementById('qv').textContent = 95;
+    document.getElementById('maxKB').value = 2000;
+  }
+}
+
+// ═══════════════════════════════════════
+// INIT
+// ═══════════════════════════════════════
+renderTrack();