bulk_image_processor_v3.html

<style>
.drop-zone{border:1.5px dashed var(--color-border-secondary);border-radius:var(--border-radius-lg);padding:2.5rem 2rem;text-align:center;cursor:pointer;background:var(--color-background-secondary);transition:background 0.15s;}
.drop-zone:hover,.drop-zone.drag-over{background:var(--color-background-tertiary);}
.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:1rem 0;}
.stat-card{background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:10px 12px;}
.stat-label{font-size:11px;color:var(--color-text-secondary);margin-bottom:3px;}
.stat-val{font-size:20px;font-weight:500;color:var(--color-text-primary);}
.progress-wrap{background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:12px 14px;margin-bottom:1rem;}
.progress-track{height:4px;background:var(--color-background-tertiary);border-radius:2px;overflow:hidden;margin:8px 0 4px;}
.progress-fill{height:100%;background:var(--color-text-info);border-radius:2px;width:0%;transition:width 0.1s;}
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:5px;margin-top:1rem;max-height:440px;overflow-y:auto;}
.thumb-wrap{aspect-ratio:1;border-radius:6px;overflow:hidden;border:0.5px solid var(--color-border-tertiary);background:var(--color-background-secondary);}
.thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--color-text-tertiary);}
</style>

<h2 class="sr-only">Bulk image processor supporting 400 plus images</h2>

<div style="padding:1rem 0;">
  <div class="drop-zone" id="dz">
    <div style="font-size:13px;color:var(--color-text-secondary);margin-bottom:8px;">Drop 400+ images here, or</div>
    <button onclick="document.getElementById('fi').click()">Choose images</button>
    <input type="file" id="fi" accept="image/*" multiple style="display:none">
    <div style="font-size:11px;color:var(--color-text-tertiary);margin-top:8px;">6 concurrent · non-blocking · thumbnails appear as they finish</div>
  </div>

  <div class="stats-row" id="statsRow" style="display:none">
    <div class="stat-card"><div class="stat-label">Total</div><div class="stat-val" id="sTotal">0</div></div>
    <div class="stat-card"><div class="stat-label">Done</div><div class="stat-val" id="sDone" style="color:var(--color-text-success)">0</div></div>
    <div class="stat-card"><div class="stat-label">Remaining</div><div class="stat-val" id="sRem">0</div></div>
    <div class="stat-card"><div class="stat-label">Speed</div><div class="stat-val" id="sSpd">—</div></div>
  </div>

  <div class="progress-wrap" id="pw" style="display:none">
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <span style="font-size:12px;font-weight:500;color:var(--color-text-primary);" id="pLabel">Processing...</span>
      <span style="font-size:11px;color:var(--color-text-secondary);" id="pEta"></span>
    </div>
    <div class="progress-track"><div class="progress-fill" id="pFill"></div></div>
    <div style="display:flex;justify-content:space-between;font-size:11px;color:var(--color-text-secondary);">
      <span id="pCount"></span><span id="pPct">0%</span>
    </div>
  </div>

  <div id="ctrlRow" style="display:none;gap:8px;margin-top:8px;">
    <button onclick="clearAll()">Clear all</button>
  </div>

  <div class="thumb-grid" id="grid"></div>
</div>

<script>
const THUMB = 120, LARGE = 1200, CONCURRENCY = 6;
let queue = [], running = 0, done = 0, total = 0, t0 = null;

function readFileAsBlob(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = e => {
      const arr = new Uint8Array(e.target.result);
      resolve(new Blob([arr], { type: file.type }));
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
}

function resizeViaCanvas(bitmap, maxDim, quality) {
  const scale = Math.min(maxDim / bitmap.width, maxDim / bitmap.height, 1);
  const w = Math.round(bitmap.width * scale);
  const h = Math.round(bitmap.height * scale);
  const c = document.createElement('canvas');
  c.width = w; c.height = h;
  c.getContext('2d').drawImage(bitmap, 0, 0, w, h);
  return c.toDataURL('image/webp', quality);
}

function scheduleNext() {
  while (running < CONCURRENCY && queue.length > 0) {
    running++;
    const item = queue.shift();
    processOne(item);
  }
}

async function processOne(item) {
  const wrap = document.getElementById('tw-' + item.id);
  if (wrap) wrap.innerHTML = '<div class="thumb-inner" style="color:var(--color-text-info)">...</div>';

  try {
    const blob = await readFileAsBlob(item.file);
    const bitmap = await createImageBitmap(blob);
    const thumb = resizeViaCanvas(bitmap, THUMB, 0.82);
    bitmap.close();

    if (wrap) {
      wrap.innerHTML = '';
      const img = document.createElement('img');
      img.src = thumb;
      img.loading = 'lazy';
      img.decoding = 'async';
      img.title = item.file.name;
      wrap.appendChild(img);
    }
  } catch(err) {
    if (wrap) {
      wrap.innerHTML = '<div class="thumb-inner" style="color:var(--color-text-danger)">!</div>';
    }
  }

  done++;
  running--;
  updateStats();
  scheduleNext();
}

function updateStats() {
  if (!total) return;
  const pct = Math.round(done / total * 100);
  document.getElementById('pFill').style.width = pct + '%';
  document.getElementById('pPct').textContent = pct + '%';
  document.getElementById('pCount').textContent = done + ' / ' + total;
  document.getElementById('sDone').textContent = done;
  document.getElementById('sRem').textContent = Math.max(0, total - done);

  if (t0 && done > 0) {
    const elapsed = (Date.now() - t0) / 1000;
    const rate = done / elapsed;
    document.getElementById('sSpd').textContent = rate >= 1 ? Math.round(rate) + '/s' : (rate * 60).toFixed(1) + '/m';
    if (done < total) {
      const eta = Math.ceil((total - done) / rate);
      document.getElementById('pEta').textContent = 'ETA ~' + (eta > 60 ? Math.ceil(eta / 60) + 'm' : eta + 's');
    } else {
      document.getElementById('pEta').textContent = 'Done in ' + elapsed.toFixed(1) + 's';
      document.getElementById('pLabel').textContent = 'All done';
    }
  }
}

function handleFiles(files) {
  const arr = Array.from(files).filter(f => f.type.startsWith('image/'));
  if (!arr.length) return;

  if (!t0) t0 = Date.now();
  total += arr.length;

  document.getElementById('statsRow').style.display = 'grid';
  document.getElementById('pw').style.display = 'block';
  document.getElementById('ctrlRow').style.display = 'flex';
  document.getElementById('sTotal').textContent = total;

  const frag = document.createDocumentFragment();
  arr.forEach(file => {
    const id = Math.random().toString(36).slice(2) + Date.now();
    const wrap = document.createElement('div');
    wrap.className = 'thumb-wrap';
    wrap.id = 'tw-' + id;
    wrap.innerHTML = '<div class="thumb-inner">wait</div>';
    frag.appendChild(wrap);
    queue.push({ id, file });
  });

  document.getElementById('grid').appendChild(frag);
  scheduleNext();
}

function clearAll() {
  queue = []; running = 0; done = 0; total = 0; t0 = null;
  document.getElementById('grid').innerHTML = '';
  document.getElementById('statsRow').style.display = 'none';
  document.getElementById('pw').style.display = 'none';
  document.getElementById('ctrlRow').style.display = 'none';
  document.getElementById('pFill').style.width = '0%';
  document.getElementById('pLabel').textContent = 'Processing...';
  document.getElementById('pEta').textContent = '';
}

document.getElementById('fi').addEventListener('change', e => handleFiles(e.target.files));
const dz = document.getElementById('dz');
dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('drag-over'); });
dz.addEventListener('dragleave', () => dz.classList.remove('drag-over'));
dz.addEventListener('drop', e => { e.preventDefault(); dz.classList.remove('drag-over'); handleFiles(e.dataTransfer.files); });
</script>