Spaces:

AwesomeUserWOW
/

autoscaleImageReconstructer

Running

App Files Files Community

autoscaleImageReconstructer / index.html

AwesomeUserWOW

Update index.html

fd941c3 verified 3 months ago

raw

history blame contribute delete

18 kB

	<!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>%  \|  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.2126r + 0.7152g + 0.0722*b;
	const colorDistanceWeighted = (r1,g1,b1, r2,g2,b2) => {
	const dr = r1-r2, dg = g1-g2, db = b1-b2;
	return 2drdr + 4dgdg + 3dbdb; // 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(wscale)), h: Math.max(1, Math.round(hscale)) };
	}

	// 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[bi2], ry = bestPos[bi2+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[i2] = res.bestX; bestPos[i2+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>