diff options
Diffstat (limited to 'cnn_v3/training/adjust.html')
| -rw-r--r-- | cnn_v3/training/adjust.html | 239 |
1 files changed, 0 insertions, 239 deletions
diff --git a/cnn_v3/training/adjust.html b/cnn_v3/training/adjust.html deleted file mode 100644 index 219145c..0000000 --- a/cnn_v3/training/adjust.html +++ /dev/null @@ -1,239 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset="UTF-8"> -<title>Align & Optimize</title> -<style> -body{font-family:sans-serif;text-align:center;background:#f5f5f5} -canvas{border:1px solid #ccc;margin-top:10px;cursor:grab} -</style> -</head> -<body> - -<h3>Align & Optimize (Arrows=move, Shift+Arrows=scale)</h3> - -<input type="file" id="f1" accept="image/*"> -<input type="file" id="f2" accept="image/*"><br><br> - -Alpha <input type="range" id="alpha" min="0.2" max="1" step="0.01" value="0.5"> -<br><br> - -<button id="crop">Crop</button> -<button id="opt">Optimize</button> -<button id="dl" disabled>Download</button> - -<div>MSE: <span id="score">-</span></div> - -<canvas id="c"></canvas> - -<script> -const c=document.getElementById('c'),x=c.getContext('2d'); -let i1=new Image(),i2=new Image(),l1=0,l2=0; - -let ox=0,oy=0,sx=1,sy=1; -let drag=0,lx,ly,mx=0,my=0,a=document.getElementById('alpha'); - -let out1,out2; - -// finer than before -const PAN_STEP=0.3; -const SCALE_STEP=0.002; // 🔬 very fine zoom -const DRAG_SPEED=0.4; - -// MSE buffers (reused) -let buf1=document.createElement('canvas'); -let buf2=document.createElement('canvas'); -let b1=buf1.getContext('2d'); -let b2=buf2.getContext('2d'); -const SAMPLE=128; - -// load images -f1.onchange=e=>{ - i1=new Image(); - i1.onload=()=>{ - l1=1;c.width=i1.width;c.height=i1.height; - ox=oy=0;sx=sy=1;draw(); - }; - i1.src=URL.createObjectURL(e.target.files[0]); -}; - -f2.onchange=e=>{ - i2=new Image(); - i2.onload=()=>{ - l2=1; - ox=(c.width-i2.width)/2; - oy=(c.height-i2.height)/2; - sx=sy=1;draw(); - }; - i2.src=URL.createObjectURL(e.target.files[0]); -}; - -function draw(){ - if(!l1)return; - x.clearRect(0,0,c.width,c.height); - x.drawImage(i1,0,0); - if(l2){ - x.save(); - x.globalAlpha=a.value; - x.translate(ox,oy); - x.scale(sx,sy); - x.drawImage(i2,0,0); - x.restore(); - } - updateScore(); -} - -// --- FAST MSE --- -function computeMSE(){ - let x2=ox,y2=oy,w2=i2.width*sx,h2=i2.height*sy; - let x0=Math.max(0,x2),y0=Math.max(0,y2); - let x1=Math.min(c.width,x2+w2),y1=Math.min(c.height,y2+h2); - let w=Math.floor(x1-x0),h=Math.floor(y1-y0); - if(w<=0||h<=0)return Infinity; - - let scale=Math.min(1,SAMPLE/Math.max(w,h)); - let sw=Math.max(1,Math.floor(w*scale)); - let sh=Math.max(1,Math.floor(h*scale)); - - buf1.width=buf2.width=sw; - buf1.height=buf2.height=sh; - - b1.drawImage(i1,x0,y0,w,h,0,0,sw,sh); - b2.drawImage(i2,(x0-ox)/sx,(y0-oy)/sy,w/sx,h/sy,0,0,sw,sh); - - let d1=b1.getImageData(0,0,sw,sh).data; - let d2=b2.getImageData(0,0,sw,sh).data; - - let mse=0,n=sw*sh; - - for(let i=0;i<d1.length;i+=4){ - let g1=0.299*d1[i]+0.587*d1[i+1]+0.114*d1[i+2]; - let g2=0.299*d2[i]+0.587*d2[i+1]+0.114*d2[i+2]; - let d=g1-g2; - mse+=d*d; - } - - return mse/n; -} - -function updateScore(){ - if(l1&&l2){ - let s=computeMSE(); - score.textContent=isFinite(s)?s.toFixed(2):"-"; - } -} - -// mouse -c.onmousemove=e=>{ - mx=e.offsetX;my=e.offsetY; - if(!drag)return; - ox+=(e.offsetX-lx)*DRAG_SPEED; - oy+=(e.offsetY-ly)*DRAG_SPEED; - lx=e.offsetX;ly=e.offsetY; - draw(); -}; - -c.onmousedown=e=>{drag=1;lx=e.offsetX;ly=e.offsetY;c.style.cursor="grabbing";} -c.onmouseup=c.onmouseleave=()=>{drag=0;c.style.cursor="grab";}; - -a.oninput=draw; - -// keyboard -document.onkeydown=e=>{ - if(!l2)return; - if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key)) e.preventDefault(); - - if(e.shiftKey){ - // scale around mouse - let ix=(mx-ox)/sx,iy=(my-oy)/sy; - - if(e.key==="ArrowRight") sx+=SCALE_STEP; - if(e.key==="ArrowLeft") sx-=SCALE_STEP; - if(e.key==="ArrowUp") sy+=SCALE_STEP; - if(e.key==="ArrowDown") sy-=SCALE_STEP; - - ox=mx-ix*sx; - oy=my-iy*sy; - - } else { - // move - if(e.key==="ArrowRight") ox+=PAN_STEP; - if(e.key==="ArrowLeft") ox-=PAN_STEP; - if(e.key==="ArrowUp") oy-=PAN_STEP; - if(e.key==="ArrowDown") oy+=PAN_STEP; - } - - draw(); -}; - -// --- OPTIMIZER (safe + fast) --- -opt.onclick=async ()=>{ - if(!l1||!l2)return; - - let best={ox,oy,sx,sy,score:computeMSE()}; - - for(let iter=0;iter<10;iter++){ - - let stepO=0.5/(iter+1); - let stepS=0.005/(iter+1); - - let valuesO=[-stepO,-stepO/2,0,stepO/2,stepO]; - let valuesS=[-stepS,-stepS/2,0,stepS/2,stepS]; - - for(let dx of valuesO) - for(let dy of valuesO) - for(let dsx of valuesS) - for(let dsy of valuesS){ - - let tox=best.ox+dx; - let toy=best.oy+dy; - let tsx=best.sx+dsx; - let tsy=best.sy+dsy; - - ox=tox;oy=toy;sx=tsx;sy=tsy; - - let s=computeMSE(); - if(s<best.score){ - best={ox:tox,oy:toy,sx:tsx,sy:tsy,score:s}; - } - } - - ox=best.ox;oy=best.oy;sx=best.sx;sy=best.sy; - draw(); - - await new Promise(r=>setTimeout(r,0)); // keep UI responsive - } -}; - -// crop + download -crop.onclick=()=>{ - let x2=ox,y2=oy,w2=i2.width*sx,h2=i2.height*sy; - let x0=Math.max(0,x2),y0=Math.max(0,y2); - let x1=Math.min(c.width,x2+w2),y1=Math.min(c.height,y2+h2); - let w=x1-x0,h=y1-y0; - if(w<=0||h<=0)return alert("no overlap"); - - out1=document.createElement('canvas'); - out2=document.createElement('canvas'); - out1.width=out2.width=w; - out1.height=out2.height=h; - - out1.getContext('2d').drawImage(i1,x0,y0,w,h,0,0,w,h); - out2.getContext('2d').drawImage(i2,(x0-ox)/sx,(y0-oy)/sy,w/sx,h/sy,0,0,w,h); - - dl.disabled=0; -}; - -dl.onclick=()=>{ - let d=(cv,n)=>{ - let a=document.createElement('a'); - a.download=n+'.clipped.png'; - a.href=cv.toDataURL(); - a.click(); - }; - d(out1,'image1');d(out2,'image2'); -}; -</script> - -</body> -</html>
\ No newline at end of file |