Spaces:

AwesomeUserWOW
/

autoscaleImageReconstructer

Running

App Files Files Community

AwesomeUserWOW commited on Feb 11

Commit

fd941c3

verified ·

1 Parent(s): 268362e

Update index.html

Browse files

Files changed (1) hide show

index.html +467 -17

index.html CHANGED Viewed

@@ -1,19 +1,469 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!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>