Spaces:

AwesomeUserWOW
/

autoscaleImageReconstructer

Running

File size: 17,973 Bytes

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Auto-Scaling Video Reconstructor — Full</title>
<style>
  :root{--bg:#080808;--fg:#e8e8e8;--muted:#9aa0a6}
  html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,Segoe UI,Roboto,Arial}
  .ui{display:flex;flex-wrap:wrap;gap:8px;padding:10px;align-items:center}
  label{font-size:13px;color:var(--muted)}
  input,select,button{padding:6px 10px;font-size:13px}
  canvas{display:block;margin:8px auto;border:1px solid #222;image-rendering:pixelated;max-width:calc(100% - 20px)}
  .right{margin-left:auto;color:var(--muted);font-size:13px}
  .small{padding:5px 8px;font-size:12px}
</style>
</head>
<body>
  <div class="ui">
    <label>Target <input id="upload" type="file" accept="image/*"></label>
    <label>Feed <select id="feedMode"><option value="display">Screen/Tab</option><option value="camera">Camera</option></select></label>
    <button id="start">Start Feed</button>

    <label>Auto-scale <input id="autoScale" type="checkbox" checked></label>
    <label>Max W <input id="maxW" type="number" value="900" style="width:80px"></label>
    <label>Max H <input id="maxH" type="number" value="600" style="width:80px"></label>

    <label>Block
      <select id="blockSize"><option>32</option><option>16</option><option selected>8</option><option>4</option><option>2</option></select>
    </label>

    <label>Speed <input id="speed" type="range" min="10" max="2000" value="300"></label>
    <label>Candidates <input id="candidates" type="range" min="1" max="12" value="5"></label>

    <label>Repass every <input id="repassFrames" type="number" value="60" style="width:72px"> frames</label>

    <label><input id="heat" type="checkbox"> Heatmap</label>
    <button id="debugBtn" class="small">Open Debug</button>
    <button id="export" class="small">Export PNG</button>
    <button id="reset" class="small">Reset</button>

    <div class="right">
      Avg: <span id="avgscore">0</span>% &nbsp;|&nbsp; Blocks: <span id="nblocks">0</span>
    </div>
  </div>

  <canvas id="canvas"></canvas>

<script>
/* --- Reconstructor Full — Single File --- */
/* Features: auto-scale, tournament, repass, buckets, early bail, adaptive blocks, debug window */

const upload = document.getElementById('upload');
const startBtn = document.getElementById('start');
const feedMode = document.getElementById('feedMode');
const autoScaleBox = document.getElementById('autoScale');
const maxWInput = document.getElementById('maxW');
const maxHInput = document.getElementById('maxH');
const blockSelect = document.getElementById('blockSize');
const speedSlider = document.getElementById('speed');
const candSlider = document.getElementById('candidates');
const heatToggle = document.getElementById('heat');
const debugBtn = document.getElementById('debugBtn');
const exportBtn = document.getElementById('export');
const resetBtn = document.getElementById('reset');
const repassFramesInput = document.getElementById('repassFrames');
const avgScoreEl = document.getElementById('avgscore');
const nblocksEl = document.getElementById('nblocks');

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d', { willReadFrequently: true });

// offscreen temp canvas for video frames and resizing
const tmp = document.createElement('canvas');
const tctx = tmp.getContext('2d', { willReadFrequently: true });

// state
let targetImageData = null;
let outputData = null;
let blocks = []; // array of {x,y,index}
let BLOCK = Number(blockSelect.value);
let scoreMap = null;    // Float32Array per-block
let bestPos = null;     // Int32Array per-block [sx,sy]
let video = null;
let feedStream = null;
let running = false;
let frameCounter = 0;
let pixelMode = false;
let tmpFrame = null;
let debugWin = null;

// perceptual-ish color weighting & luminance
const luminance = (r,g,b) => 0.2126*r + 0.7152*g + 0.0722*b;
const colorDistanceWeighted = (r1,g1,b1, r2,g2,b2) => {
  const dr = r1-r2, dg = g1-g2, db = b1-b2;
  return 2*dr*dr + 4*dg*dg + 3*db*db; // tuned weights
};

// AUTO-SCALE when loading image
function computeScaledSize(w,h) {
  if(!autoScaleBox.checked) return {w,h};
  const maxW = Math.max(100, Number(maxWInput.value) || 900);
  const maxH = Math.max(80, Number(maxHInput.value) || 600);
  const scale = Math.min(maxW / w, maxH / h, 1);
  return { w: Math.max(1, Math.round(w*scale)), h: Math.max(1, Math.round(h*scale)) };
}

// Build block grid and arrays
function buildBlocks(blockSize) {
  BLOCK = blockSize;
  blocks = [];
  let idx = 0;
  for(let y=0; y < canvas.height; y += BLOCK){
    for(let x=0; x < canvas.width; x += BLOCK){
      blocks.push({x,y,index:idx++});
    }
  }
  scoreMap = new Float32Array(blocks.length).fill(0);
  bestPos = new Int32Array(blocks.length * 2).fill(-1);
  nblocksEl.textContent = blocks.length;
  if(!outputData) outputData = ctx.createImageData(canvas.width, canvas.height);
}

// load target image
upload.addEventListener('change', e => {
  const f = e.target.files && e.target.files[0];
  if(!f) return;
  const img = new Image();
  img.onload = () => {
    const scaled = computeScaledSize(img.width, img.height);
    canvas.width = tmp.width = scaled.w;
    canvas.height = tmp.height = scaled.h;
    tctx.clearRect(0,0,tmp.width,tmp.height);
    tctx.drawImage(img,0,0,tmp.width,tmp.height);
    targetImageData = tctx.getImageData(0,0,tmp.width,tmp.height);
    outputData = ctx.createImageData(tmp.width, tmp.height);
    // initialize output to neutral (black)
    for(let i=0;i<outputData.data.length;i+=4){
      outputData.data[i]=0; outputData.data[i+1]=0; outputData.data[i+2]=0; outputData.data[i+3]=255;
    }
    buildBlocks(Number(blockSelect.value));
    avgScoreEl.textContent = '0';
    pixelMode = false;
    drawOutput();
  };
  img.src = URL.createObjectURL(f);
});

// start feed
startBtn.addEventListener('click', async () => {
  if(!targetImageData){ alert('Upload a target image first.'); return; }
  if(feedStream){
    feedStream.getTracks().forEach(t=>t.stop());
    feedStream = null;
  }
  try {
    if(feedMode.value === 'camera'){
      feedStream = await navigator.mediaDevices.getUserMedia({video:true});
    } else {
      feedStream = await navigator.mediaDevices.getDisplayMedia({video:true});
    }
  } catch(err){
    alert('Could not start feed: ' + (err.message||err));
    return;
  }
  video = document.createElement('video');
  video.srcObject = feedStream;
  video.muted = true; video.playsInline = true;
  await video.play();
  running = true;
  frameCounter = 0;
  requestAnimationFrame(mainLoop);
});

// reset
resetBtn.addEventListener('click', () => {
  if(!targetImageData) return;
  buildBlocks(Number(blockSelect.value));
  for(let i=0;i<outputData.data.length;i+=4){
    outputData.data[i]=0; outputData.data[i+1]=0; outputData.data[i+2]=0; outputData.data[i+3]=255;
  }
  drawOutput();
});

// export
exportBtn.addEventListener('click', () => {
  if(!outputData) return;
  ctx.putImageData(outputData,0,0);
  const a=document.createElement('a');
  a.href=canvas.toDataURL('image/png');
  a.download='reconstruction.png';
  a.click();
});

// change block size
blockSelect.addEventListener('change', () => {
  if(!targetImageData) return;
  buildBlocks(Number(blockSelect.value));
});

// Debug window open
debugBtn.addEventListener('click', () => {
  if(debugWin && !debugWin.closed){ debugWin.focus(); return; }
  debugWin = window.open('', '', 'width=600,height=600');
  if(!debugWin) { alert('Popup blocked. Allow popups for debug window.'); return; }
  debugWin.document.title = 'Reconstructor Debug';
  debugWin.document.body.style.background = '#111';
  debugWin.document.body.style.color = '#ddd';
  debugWin.document.body.style.fontFamily = 'system-ui,monospace';
  debugWin.document.body.innerHTML = `
    <h3 style="margin:6px">Debug — Scoreboard & Heatmap</h3>
    <div id="dbgStats" style="font-size:13px;margin:6px"></div>
    <canvas id="dbgCanvas" width="320" height="200" style="border:1px solid #333;display:block;margin:6px"></canvas>
    <div id="dbgList" style="max-height:250px;overflow:auto;font-size:12px;margin:6px"></div>
  `;
});

// some helpers for random biased picks
function pickBlockBiased(){
  // skewed random towards low scores: pick r in [0,1] then map to threshold
  // using power to bias: lower power strengthens bias; tune = 2.2
  const power = 2.2;
  const r = Math.pow(Math.random(), 1/power) * 100;
  // linear scan to find a block with score < r (fast enough). If none, fallback random.
  for(let i=0;i<blocks.length;i++){
    if(scoreMap[i] < r) return blocks[i];
  }
  return blocks[Math.random()*blocks.length|0];
}

// evaluate one candidate sample for block with early bail (returns score 0..100 or -Infinity for early bail)
function evaluateCandidateBlock(block, sx, sy, currentBestScore, tmpFrameData){
  const pixels = BLOCK * BLOCK;
  // use precomputed constants
  const maxColorPerPixel = 195075; // 255^2 * 3 approximate for rgb distances
  const maxLumDiffPerPixel = 255;
  const maxTotal = pixels * (maxColorPerPixel + maxLumDiffPerPixel * 6); // same scale as scoring
  const cutoff = maxTotal * (1 - currentBestScore / 100);

  let diff = 0;
  // iterate block pixels
  for(let dy=0; dy < BLOCK; dy++){
    const ty = block.y + dy;
    const syi = sy + dy;
    for(let dx=0; dx < BLOCK; dx++){
      const tx = block.x + dx;
      const sxi = sx + dx;
      const ti = (ty * canvas.width + tx) * 4;
      const vi = (syi * tmp.width + sxi) * 4;
      const tr = targetImageData.data[ti], tg = targetImageData.data[ti+1], tb = targetImageData.data[ti+2];
      const vr = tmpFrameData[vi], vg = tmpFrameData[vi+1], vb = tmpFrameData[vi+2];
      diff += colorDistanceWeighted(tr,tg,tb, vr,vg,vb);
      diff += Math.abs(luminance(tr,tg,tb) - luminance(vr,vg,vb)) * 6;
      if(diff > cutoff) return -Infinity; // can't beat current best
    }
  }
  const score = 100 * (1 - diff / maxTotal);
  return Math.max(0, Math.min(100, score));
}

// evaluate multiple candidates and return best {score,x,y} or null
function evaluateCandidatesForBlock(block, numCandidates, currentBestScore, buckets, tmpFrameData){
  let localBestScore = -Infinity;
  let localBestXY = null;
  const bi = block.index;

  // try temporal memory first
  const rx = bestPos[bi*2], ry = bestPos[bi*2+1];
  if(rx >= 0 && ry >= 0){
    const s = evaluateCandidateBlock(block, rx, ry, currentBestScore, tmpFrameData);
    if(s !== -Infinity){ localBestScore = s; localBestXY = {x:rx,y:ry}; }
  }

  // pick candidates from chosen bucket based on target luminance
  const cx = block.x + (BLOCK>>1), cy = block.y + (BLOCK>>1);
  const tidx = (cy * tmp.width + cx) * 4;
  const tR = targetImageData.data[tidx], tG = targetImageData.data[tidx+1], tB = targetImageData.data[tidx+2];
  const tLum = luminance(tR,tG,tB);
  let bucket = buckets.mid;
  if(tLum < 85 && buckets.dark.length) bucket = buckets.dark;
  else if(tLum > 170 && buckets.light.length) bucket = buckets.light;
  else if(buckets.mid.length === 0) bucket = buckets.dark.length ? buckets.dark : buckets.light;

  if(!bucket || bucket.length === 0) return localBestXY ? {bestScore: localBestScore, bestX: localBestXY.x, bestY: localBestXY.y} : null;

  for(let c=0;c<numCandidates;c++){
    const pick = bucket[Math.random()*bucket.length|0];
    if(!pick) continue;
    const sx = pick[0], sy = pick[1];
    const s = evaluateCandidateBlock(block, sx, sy, Math.max(currentBestScore, localBestScore), tmpFrameData);
    if(s === -Infinity) continue;
    if(s > localBestScore){
      localBestScore = s;
      localBestXY = {x:sx,y:sy};
    }
  }

  return localBestXY ? {bestScore: localBestScore, bestX: localBestXY.x, bestY: localBestXY.y} : null;
}

// copy block from tmpFrame into outputData
function copySampleToOutput(block, sx, sy, tmpFrameData){
  for(let dy=0; dy < BLOCK; dy++){
    const ty = block.y + dy;
    const syi = sy + dy;
    for(let dx=0; dx < BLOCK; dx++){
      const tx = block.x + dx;
      const sxi = sx + dx;
      const oi = (ty * canvas.width + tx) * 4;
      const vi = (syi * tmp.width + sxi) * 4;
      outputData.data[oi]   = tmpFrameData[vi];
      outputData.data[oi+1] = tmpFrameData[vi+1];
      outputData.data[oi+2] = tmpFrameData[vi+2];
      outputData.data[oi+3] = 255;
    }
  }
}

// draw the current output to screen
function drawOutput(){
  ctx.putImageData(outputData, 0, 0);
}

// Debug window updater
function updateDebugWindow(){
  if(!debugWin || debugWin.closed) return;
  try {
    const doc = debugWin.document;
    const stats = doc.getElementById('dbgStats');
    const dbgCanvas = doc.getElementById('dbgCanvas');
    const dbgList = doc.getElementById('dbgList');
    if(!stats || !dbgCanvas || !dbgList) return;
    // summary
    let avg = 0;
    for(let i=0;i<scoreMap.length;i++) avg += scoreMap[i];
    avg = scoreMap.length ? avg/scoreMap.length : 0;
    stats.innerHTML = `Avg score: ${avg.toFixed(1)}%<br>Blocks: ${blocks.length}<br>Block size: ${BLOCK}px<br>Frame: ${frameCounter}`;
    // draw heatmap scaled to dbgCanvas
    const dctx = dbgCanvas.getContext('2d');
    const W = dbgCanvas.width, H = dbgCanvas.height;
    dctx.clearRect(0,0,W,H);
    // one rectangle per block (approx)
    const cols = Math.ceil(Math.sqrt(blocks.length));
    const cellW = Math.max(1, Math.floor(W / cols));
    let i = 0;
    for(const b of blocks){
      const s = Math.max(0, Math.min(100, scoreMap[b.index]));
      const h = Math.round(120 * (s/100)); // 0..120 greenish
      dctx.fillStyle = `hsl(${h},80%,50%)`;
      const cx = (i % cols) * cellW;
      const cy = Math.floor(i/cols) * cellW;
      dctx.fillRect(cx, cy, cellW, cellW);
      i++;
    }
    // top 20 lowest-scoring blocks list
    const arr = blocks.map(b=>({i:b.index, x:b.x, y:b.y, s:scoreMap[b.index]}));
    arr.sort((a,b)=>a.s - b.s);
    dbgList.innerHTML = '<b>Lowest scoring blocks</b><br>' + arr.slice(0,40).map(a=>`#${a.i} (${a.x},${a.y}) : ${a.s.toFixed(1)}%`).join('<br>');
  } catch(e){
    // ignore cross-window errors
  }
}

// MAIN LOOP with repass system and adaptive block size
function mainLoop(){
  if(!running) return;
  requestAnimationFrame(mainLoop);
  if(!video || !targetImageData || video.readyState < 2) return;

  // draw video to tmp sized to canvas
  tctx.drawImage(video, 0, 0, tmp.width, tmp.height);
  tmpFrame = tctx.getImageData(0,0,tmp.width,tmp.height);
  const tmpData = tmpFrame.data;

  // build buckets: top-left coords where a BLOCK fits (stepped by BLOCK for performance)
  const buckets = {dark:[], mid:[], light:[]};
  for(let y=0; y <= tmp.height - BLOCK; y += BLOCK){
    for(let x=0; x <= tmp.width - BLOCK; x += BLOCK){
      const cx = x + (BLOCK>>1), cy = y + (BLOCK>>1);
      const idx = (cy * tmp.width + cx) * 4;
      const L = luminance(tmpData[idx], tmpData[idx+1], tmpData[idx+2]);
      if(L < 85) buckets.dark.push([x,y]);
      else if(L > 170) buckets.light.push([x,y]);
      else buckets.mid.push([x,y]);
    }
  }

  const attempts = Number(speedSlider.value);
  const candidatesPerBlock = Number(candSlider.value);

  // main improvement attempts biased toward low-score
  for(let a=0; a<attempts; a++){
    const block = pickBlockBiased();
    if(!block) continue;
    const bi = block.index;
    const currentBest = scoreMap[bi];
    const result = evaluateCandidatesForBlock(block, candidatesPerBlock, currentBest, buckets, tmpData);
    if(result && result.bestScore > currentBest){
      scoreMap[bi] = result.bestScore;
      bestPos[bi*2] = result.bestX;
      bestPos[bi*2+1] = result.bestY;
      copySampleToOutput(block, result.bestX, result.bestY, tmpData);
    }
  }

  // repass: every N frames perform a re-evaluation of some or all blocks to see if better matches have appeared
  frameCounter++;
  const repassEvery = Math.max(1, Number(repassFramesInput.value) || 60);
  if(frameCounter % repassEvery === 0){
    // do a lighter global repass: iterate all blocks but with fewer candidates
    const repassCandidates = Math.max(1, Math.floor(candidatesPerBlock/2));
    for(let i=0;i<blocks.length;i++){
      const block = blocks[i];
      const cur = scoreMap[i];
      const res = evaluateCandidatesForBlock(block, repassCandidates, cur, buckets, tmpData);
      if(res && res.bestScore > cur){
        scoreMap[i] = res.bestScore;
        bestPos[i*2] = res.bestX; bestPos[i*2+1] = res.bestY;
        copySampleToOutput(block, res.bestX, res.bestY, tmpData);
      }
    }
  }

  // adaptive block-size refinement (coarse -> fine)
  let avg = 0;
  for(let i=0;i<scoreMap.length;i++) avg += scoreMap[i];
  avg = scoreMap.length ? (avg / scoreMap.length) : 0;
  avgScoreEl.textContent = Math.round(avg);

  // thresholds tunable
  if(!pixelMode){
    if(avg > 80 && BLOCK > 4){
      buildBlocks(Math.max(1, BLOCK >> 1));
    } else if(avg > 94 && BLOCK > 1){
      buildBlocks(1); // final pixel mode
      pixelMode = true;
    }
  }

  // draw output and optional heatmap
  drawOutput();
  if(heatToggle.checked){
    ctx.save();
    for(const b of blocks){
      const s = Math.max(0, Math.min(100, scoreMap[b.index]));
      const hue = Math.round(120 * (s/100));
      ctx.fillStyle = `hsla(${hue},80%,50%,0.13)`;
      ctx.fillRect(b.x, b.y, BLOCK, BLOCK);
    }
    ctx.restore();
  }

  // update debug window periodically
  if(debugWin && !debugWin.closed && (frameCounter % 10 === 0)) updateDebugWindow();
}

// initial minimal canvas
(function init(){
  canvas.width = 640; canvas.height = 360;
  tmp.width = 640; tmp.height = 360;
  outputData = ctx.createImageData(canvas.width, canvas.height);
  for(let i=0;i<outputData.data.length;i+=4){ outputData.data[i]=0; outputData.data[i+1]=0; outputData.data[i+2]=0; outputData.data[i+3]=255; }
  ctx.putImageData(outputData,0,0);
  buildBlocks(Number(blockSelect.value));
})();

</script>
</body>
</html>