Spaces:

kimhyunwoo
/

esl-test

Running

App Files Files Community

kimhyunwoo commited on Aug 18, 2025

Commit

070efe0

verified ·

1 Parent(s): fd40f5c

Update index.html

Browse files

Files changed (1) hide show

index.html +487 -17

index.html CHANGED Viewed

@@ -1,19 +1,489 @@
 <!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="ko">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>ESL Painter (128×296 / 296×128) — Pure HTML+JS</title>
+<style>
+  :root{
+    --bg:#0b0c0f; --panel:#14161a; --muted:#8a8f98; --text:#e9eef5; --accent:#4da3ff; --accent2:#ff4d6d;
+    --btn:#1b1e24; --btn2:#21262e; --grid:#2a2f37;
+  }
+  html,body{height:100%; background:var(--bg); color:var(--text); font-family:system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,Malgun Gothic,sans-serif;}
+  .wrap{max-width:1100px; margin:24px auto; padding:0 16px;}
+  h1{font-size:20px; margin:0 0 12px;}
+  .panel{background:var(--panel); border-radius:14px; padding:14px; box-shadow:0 0 0 1px #000 inset;}
+  .row{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap;}
+  .col{flex:1 1 360px; min-width:320px;}
+  .tools .group{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
+  .tools label{font-size:12px; color:var(--muted);}
+  .btn{background:var(--btn); border:1px solid #000; color:var(--text); border-radius:10px; padding:8px 10px; cursor:pointer}
+  .btn:hover{background:var(--btn2);}
+  .btn.red{border-color:#000; color:#fff;}
+  .btn.block{display:block; width:100%; text-align:center;}
+  .btn.small{padding:6px 8px; font-size:12px;}
+  input[type="color"], input[type="number"], input[type="text"]{
+    background:#0e1014; color:var(--text); border:1px solid #000; border-radius:8px; padding:6px 8px; outline:none;
+  }
+  input[type="file"]{color:var(--muted);}
+  .radio{display:inline-flex; gap:4px; align-items:center; padding:4px 8px; border-radius:8px; background:#0e1014; border:1px solid #000;}
+  .radio input{margin:0;}
+  .canvasWrap{ position:relative; display:inline-block; background:#fff; }
+  canvas{image-rendering:pixelated; display:block; background:#fff; border-radius:10px; box-shadow:0 0 0 1px #000;}
+  .grid{position:absolute; inset:0; pointer-events:none;}
+  .muted{color:var(--muted); font-size:12px;}
+  .line{height:1px; background:#000; margin:10px 0;}
+  .tag{font-size:11px; color:#c6d3e1; background:#112; border:1px solid #000; border-radius:6px; padding:3px 6px; display:inline-block;}
+</style>
+</head>
+<body>
+<div class="wrap">
+  <h1>ESL Painter — 128×296 &nbsp;<span class="tag">B/W/Red</span></h1>
+  <div class="row">
+    <div class="col panel tools">
+      <div class="group">
+        <button class="btn small" id="swapWH">↔ 해상도 전환 (128×296 ↔ 296×128)</button>
+        <span class="muted">현재: <b id="curSize">128×296</b></span>
+      </div>
+      <div class="group">
+        <label>브러시</label>
+        <span class="radio"><input type="radio" name="tool" value="brush" checked><b>그리기</b></span>
+        <span class="radio"><input type="radio" name="tool" value="eraser"><b>지우개</b></span>
+        <span class="radio"><input type="radio" name="tool" value="text"><b>텍스트</b></span>
+      </div>
+      <div class="group" id="brushBlock">
+        <label>색 / 두께</label>
+        <span class="radio"><input type="radio" name="color" value="black" checked>검정</span>
+        <span class="radio"><input type="radio" name="color" value="red">빨강</span>
+        <span class="radio"><input type="radio" name="color" value="white">하양</span>
+        <input type="range" id="brushSize" min="1" max="20" value="3" />
+      </div>
+      <div class="group" id="textBlock" style="display:none">
+        <label>텍스트</label>
+        <input type="text" id="textStr" placeholder="텍스트 입력" value="KETI" />
+        <select id="textColor">
+          <option value="black">검정</option>
+          <option value="red">빨강</option>
+          <option value="white">하양</option>
+        </select>
+        <input type="number" id="textSize" min="6" max="72" value="20" />
+        <input type="number" id="textAngle" min="-180" max="180" value="0" />
+        <span class="muted">크기/각도</span>
+        <button class="btn small" id="textPlace">👉 캔버스 클릭으로 배치</button>
+      </div>
+      <div class="group">
+        <label>이미지 불러오기</label>
+        <input type="file" id="imgIn" accept="image/*" />
+        <span class="radio"><input type="checkbox" id="dither">디더링</span>
+        <button class="btn small" id="fitImg">이미지 맞추기(채움)</button>
+        <button class="btn small" id="fitContain">맞추기(전체 보이기)</button>
+      </div>
+      <div class="group">
+        <button class="btn small" id="rot90">캔버스 90° 회전</button>
+        <button class="btn small" id="mirrorH">좌우 반전</button>
+        <button class="btn small" id="mirrorV">상하 반전</button>
+        <span class="radio"><input type="checkbox" id="grid">격자</span>
+      </div>
+      <div class="group">
+        <button class="btn small" id="undo">↶ 되돌리기</button>
+        <button class="btn small" id="redo">↷ 다시하기</button>
+        <button class="btn small" id="clear">지우기</button>
+        <button class="btn small" id="export">Export PNG</button>
+      </div>
+      <div class="line"></div>
+      <p class="muted">
+        출력은 ESL의 3색 팔레트(B/W/Red)에 맞춰 캔버스 색을 제한합니다.
+        완성 PNG를 <b>shelflabels.andrewgraham.dev</b>에서 같은 해상도/회전으로 업로드하세요.
+      </p>
+    </div>
+    <div class="col panel">
+      <div class="canvasWrap" id="canvasWrap">
+        <canvas id="cv" width="128" height="296"></canvas>
+        <canvas id="gridLayer" class="grid" width="128" height="296"></canvas>
+      </div>
+      <div style="display:flex; gap:8px; margin-top:10px;">
+        <span class="muted">좌표: <b id="pos">-,-</b></span>
+        <span class="muted">도구: <b id="stateLabel">그리기(검, 3px)</b></span>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+(()=>{
+  // =========================
+  // State & helpers
+  // =========================
+  const cv = document.getElementById('cv');
+  const ctx = cv.getContext('2d', { willReadFrequently: true });
+  const gridCv = document.getElementById('gridLayer');
+  const gridCtx = gridCv.getContext('2d');
+  const posEl = document.getElementById('pos');
+  const stateEl = document.getElementById('stateLabel');
+  const curSizeEl = document.getElementById('curSize');
+  // Default: portrait 128x296 (as in your current setup)
+  let W = 128, H = 296;
+  let drawing = false;
+  let tool = 'brush'; // 'brush' | 'eraser' | 'text'
+  let color = 'black'; // 'black' | 'red' | 'white'
+  let brush = 3;
+  let ditherOn = false;
+  let textModeWaitingClick = false;
+  let textSpec = { str:'KETI', color:'black', size:20, angle:0 };
+  const undoStack = [];
+  const redoStack = [];
+  const MAX_STACK = 50;
+  function pushUndo(){
+    if(undoStack.length >= MAX_STACK) undoStack.shift();
+    undoStack.push(ctx.getImageData(0,0,cv.width,cv.height));
+    redoStack.length = 0;
+  }
+  function applyImageData(img){
+    ctx.putImageData(img, 0, 0);
+  }
+  function setSize(w,h){
+    W=w; H=h;
+    cv.width=W; cv.height=H;
+    gridCv.width=W; gridCv.height=H;
+    ctx.fillStyle = '#fff'; ctx.fillRect(0,0,W,H); // clear to white
+    drawGrid();
+    curSizeEl.textContent = `${W}×${H}`;
+  }
+  // Init white background
+  setSize(128,296);
+  function updateStateLabel(){
+    const toolLabel = tool==='brush'?'그리기':tool==='eraser'?'지우개':'텍스트';
+    const colLabel = color==='black'?'검':color==='red'?'빨':'하양';
+    stateEl.textContent = tool==='text'
+      ? `텍스트(${textSpec.color}, ${textSpec.size}px, ${textSpec.angle}°)`
+      : `${toolLabel}(${colLabel}, ${brush}px)`;
+  }
+  function clamp(v,a,b){ return Math.max(a, Math.min(b,v)); }
+  // =========================
+  // Tools UI
+  // =========================
+  document.querySelectorAll('input[name="tool"]').forEach(r=>{
+    r.addEventListener('change', e=>{
+      tool = e.target.value;
+      document.getElementById('brushBlock').style.display = (tool==='brush'||tool==='eraser')?'':'none';
+      document.getElementById('textBlock').style.display = (tool==='text')?'':'none';
+      updateStateLabel();
+    });
+  });
+  document.querySelectorAll('input[name="color"]').forEach(r=>{
+    r.addEventListener('change', e=>{ color = e.target.value; updateStateLabel(); });
+  });
+  document.getElementById('brushSize').addEventListener('input', e=>{
+    brush = +e.target.value; updateStateLabel();
+  });
+  // Text controls
+  document.getElementById('textStr').addEventListener('input', e=> textSpec.str = e.target.value);
+  document.getElementById('textColor').addEventListener('change', e=> { textSpec.color = e.target.value; updateStateLabel(); });
+  document.getElementById('textSize').addEventListener('input', e=> { textSpec.size = +e.target.value; updateStateLabel(); });
+  document.getElementById('textAngle').addEventListener('input', e=> { textSpec.angle = +e.target.value; updateStateLabel(); });
+  document.getElementById('textPlace').addEventListener('click', ()=>{
+    tool='text'; textModeWaitingClick=true;
+    document.querySelector('input[name="tool"][value="text"]').checked=true;
+    document.getElementById('brushBlock').style.display='none';
+    document.getElementById('textBlock').style.display='';
+    updateStateLabel();
+  });
+  // =========================
+  // Mouse / Touch drawing
+  // =========================
+  function getXY(evt){
+    const rect = cv.getBoundingClientRect();
+    const isTouch = evt.touches && evt.touches.length;
+    const x = ((isTouch?evt.touches[0].clientX:evt.clientX) - rect.left) * (cv.width / rect.width);
+    const y = ((isTouch?evt.touches[0].clientY:evt.clientY) - rect.top) * (cv.height / rect.height);
+    return { x: Math.round(x), y: Math.round(y) };
+  }
+  let last = null;
+  function drawPoint(p){
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, brush/2, 0, Math.PI*2);
+    ctx.fill();
+  }
+  function drawLine(a,b){
+    ctx.beginPath();
+    ctx.moveTo(a.x, a.y);
+    ctx.lineTo(b.x, b.y);
+    ctx.lineWidth = brush;
+    ctx.lineCap = 'round';
+    ctx.stroke();
+  }
+  function setColorForCanvas(col, isEraser=false){
+    if(isEraser || col==='white') { ctx.globalCompositeOperation='destination-out'; ctx.strokeStyle='#000'; ctx.fillStyle='#000'; }
+    else { ctx.globalCompositeOperation='source-over'; ctx.strokeStyle = col==='red' ? '#ff0000' : '#000000'; ctx.fillStyle = ctx.strokeStyle; }
+  }
+  function onDown(e){
+    const p = getXY(e); last = p;
+    if(tool==='text' && textModeWaitingClick){
+      pushUndo();
+      drawTextAt(p.x, p.y);
+      textModeWaitingClick = false;
+      return;
+    }
+    if(tool==='brush' || tool==='eraser'){
+      pushUndo();
+      drawing = true;
+      setColorForCanvas(color, tool==='eraser');
+      drawPoint(p);
+    }
+  }
+  function onMove(e){
+    const p = getXY(e);
+    posEl.textContent = `${p.x}, ${p.y}`;
+    if(!drawing || !last) return;
+    drawLine(last,p);
+    last = p;
+  }
+  function onUp(e){
+    drawing=false; last=null;
+  }
+  cv.addEventListener('mousedown', onDown);
+  cv.addEventListener('mousemove', onMove);
+  window.addEventListener('mouseup', onUp);
+  cv.addEventListener('touchstart', e=>{ e.preventDefault(); onDown(e); }, {passive:false});
+  cv.addEventListener('touchmove',  e=>{ e.preventDefault(); onMove(e); }, {passive:false});
+  cv.addEventListener('touchend',   e=>{ e.preventDefault(); onUp(e); },  {passive:false});
+  function drawTextAt(x,y){
+    const s = textSpec;
+    // snap to ESL palette by drawing directly as #000 / #f00 / erase -> white
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate((s.angle || 0) * Math.PI/180);
+    const col = s.color==='red' ? '#f00' : s.color==='black' ? '#000' : '#fff';
+    if(col==='#fff'){
+      // "white text" = erase text shape
+      ctx.globalCompositeOperation='destination-out';
+      ctx.fillStyle='#000';
+    } else {
+      ctx.globalCompositeOperation='source-over';
+      ctx.fillStyle=col;
+    }
+    ctx.font = `bold ${s.size || 20}px sans-serif`;
+    ctx.textBaseline='middle';
+    ctx.textAlign='center';
+    ctx.fillText(s.str || '', 0, 0);
+    ctx.restore();
+  }
+  // =========================
+  // Undo / Redo / Clear
+  // =========================
+  document.getElementById('undo').addEventListener('click', ()=>{
+    if(!undoStack.length) return;
+    const cur = ctx.getImageData(0,0,W,H);
+    redoStack.push(cur);
+    const prev = undoStack.pop();
+    applyImageData(prev);
+  });
+  document.getElementById('redo').addEventListener('click', ()=>{
+    if(!redoStack.length) return;
+    const cur = ctx.getImageData(0,0,W,H);
+    undoStack.push(cur);
+    const next = redoStack.pop();
+    applyImageData(next);
+  });
+  document.getElementById('clear').addEventListener('click', ()=>{
+    pushUndo();
+    ctx.clearRect(0,0,W,H);
+    // white background 유지
+    ctx.fillStyle='#fff'; ctx.fillRect(0,0,W,H);
+  });
+  // =========================
+  // Rotate / Mirror / Grid
+  // =========================
+  function rotate90(){
+    pushUndo();
+    const tmp = document.createElement('canvas');
+    tmp.width=W; tmp.height=H;
+    tmp.getContext('2d').drawImage(cv,0,0);
+    setSize(H,W); // swap
+    ctx.save();
+    ctx.translate(W/2, H/2);
+    ctx.rotate(90*Math.PI/180);
+    ctx.drawImage(tmp, -tmp.width/2, -tmp.height/2);
+    ctx.restore();
+  }
+  document.getElementById('rot90').addEventListener('click', rotate90);
+  function mirror(horizontal=true){
+    pushUndo();
+    const tmp = document.createElement('canvas');
+    tmp.width=W; tmp.height=H;
+    tmp.getContext('2d').drawImage(cv,0,0);
+    ctx.save();
+    ctx.setTransform(horizontal?-1:1,0,0,horizontal?1:-1, horizontal?W:0, horizontal?0:H);
+    ctx.drawImage(tmp,0,0);
+    ctx.restore();
+  }
+  document.getElementById('mirrorH').addEventListener('click', ()=>mirror(true));
+  document.getElementById('mirrorV').addEventListener('click', ()=>mirror(false));
+  function drawGrid(){
+    gridCtx.clearRect(0,0,W,H);
+    if(!document.getElementById('grid').checked) return;
+    gridCtx.strokeStyle = '#2b2f37';
+    gridCtx.lineWidth = 1;
+    gridCtx.globalAlpha = .6;
+    const step = 8;
+    gridCtx.beginPath();
+    for(let x=step; x<W; x+=step){ gridCtx.moveTo(x,.5); gridCtx.lineTo(x, H+.5); }
+    for(let y=step; y<H; y+=step){ gridCtx.moveTo(.5,y); gridCtx.lineTo(W+.5, y); }
+    gridCtx.stroke();
+    gridCtx.globalAlpha = 1;
+  }
+  document.getElementById('grid').addEventListener('change', drawGrid);
+  // =========================
+  // Swap resolution
+  // =========================
+  document.getElementById('swapWH').addEventListener('click', ()=>{
+    const newW = H, newH = W; // swap
+    // 이미지 보존하며 리사이즈
+    const snapshot = document.createElement('canvas');
+    snapshot.width=W; snapshot.height=H;
+    snapshot.getContext('2d').drawImage(cv,0,0);
+    setSize(newW,newH);
+    // 중앙 회전 없이 "캔버스 크기만 변경"을 원하면 적절히 scale
+    // 여기서는 비율 유지하여 맞춤
+    const scale = Math.min(W/snapshot.width, H/snapshot.height);
+    const dw = snapshot.width*scale, dh=snapshot.height*scale;
+    ctx.drawImage(snapshot, (W-dw)/2, (H-dh)/2, dw, dh);
+  });
+  // =========================
+  // Image import + optional dithering (to B/W/Red palette)
+  // =========================
+  function quantizeToBWR(imgData){
+    // 팔레트: white(255,255,255), black(0,0,0), red(255,0,0)
+    const d = imgData.data;
+    const pal = [
+      {r:255,g:255,b:255, tag:'white'},
+      {r:0,g:0,b:0, tag:'black'},
+      {r:255,g:0,b:0, tag:'red'}
+    ];
+    function nearest(r,g,b){
+      let best=0, bestDist=1e9;
+      for(let i=0;i<pal.length;i++){
+        const dr=r-pal[i].r, dg=g-pal[i].g, db=b-pal[i].b;
+        const dist=dr*dr+dg*dg+db*db;
+        if(dist<bestDist){bestDist=dist; best=i;}
+      }
+      return pal[best];
+    }
+    if(!ditherOn){
+      for(let i=0;i<d.length;i+=4){
+        const q=nearest(d[i],d[i+1],d[i+2]);
+        d[i]=q.r; d[i+1]=q.g; d[i+2]=q.b;
+      }
+      return imgData;
+    }
+    // Floyd–Steinberg dithering
+    const w = imgData.width, h=imgData.height;
+    for(let y=0;y<h;y++){
+      for(let x=0;x<w;x++){
+        const i=(y*w+x)*4;
+        const old={r:d[i],g:d[i+1],b:d[i+2]};
+        const q = nearest(old.r, old.g, old.b);
+        d[i]=q.r; d[i+1]=q.g; d[i+2]=q.b;
+        const err={r:old.r-q.r, g:old.g-q.g, b:old.b-q.b};
+        function add(xo,yo, factor){
+          const xx=x+xo, yy=y+yo; if(xx<0||xx>=w||yy<0||yy>=h) return;
+          const idx=(yy*w+xx)*4;
+          d[idx  ]=clamp(d[idx  ]+err.r*factor,0,255);
+          d[idx+1]=clamp(d[idx+1]+err.g*factor,0,255);
+          d[idx+2]=clamp(d[idx+2]+err.b*factor,0,255);
+        }
+        add(1,0,7/16); add(-1,1,3/16); add(0,1,5/16); add(1,1,1/16);
+      }
+    }
+    return imgData;
+  }
+  const imgInput = document.getElementById('imgIn');
+  document.getElementById('dither').addEventListener('change', e=> ditherOn = e.target.checked);
+  function drawImageFit(img, mode='cover'){
+    pushUndo();
+    const r = Math.min(W/img.width, H/img.height);
+    const R = Math.max(W/img.width, H/img.height);
+    const scale = (mode==='contain')? r : R;
+    const dw = img.width*scale, dh = img.height*scale;
+    const dx = (W-dw)/2, dy=(H-dh)/2;
+    // Draw to temp, then quantize to BWR on main
+    const tmp = document.createElement('canvas');
+    tmp.width=W; tmp.height=H;
+    const tctx = tmp.getContext('2d');
+    tctx.fillStyle='#fff'; tctx.fillRect(0,0,W,H);
+    tctx.drawImage(img, dx, dy, dw, dh);
+    const q = quantizeToBWR(tctx.getImageData(0,0,W,H));
+    ctx.putImageData(q, 0, 0);
+  }
+  imgInput.addEventListener('change', e=>{
+    const f = e.target.files && e.target.files[0]; if(!f) return;
+    const url = URL.createObjectURL(f);
+    const img = new Image();
+    img.onload = ()=>{ drawImageFit(img, 'cover'); URL.revokeObjectURL(url); };
+    img.src = url;
+  });
+  document.getElementById('fitImg').addEventListener('click', ()=>{
+    // re-use last chosen image if possible — user can choose again as needed
+    imgInput.click();
+  });
+  document.getElementById('fitContain').addEventListener('click', ()=>{
+    imgInput.click();
+    // contain 모드는 파일 선택 후 onload에서 'contain'으로 바꿔 적용하길 원하면
+    // 필요 시 추가 구현 가능
+  });
+  // =========================
+  // Grid toggle redraw on resize
+  // =========================
+  const gridChk = document.getElementById('grid');
+  gridChk.addEventListener('change', drawGrid);
+  drawGrid();
+  // =========================
+  // Export PNG
+  // =========================
+  document.getElementById('export').addEventListener('click', ()=>{
+    // 팔레트 강제(혹시 사용 중 컬러가 섞였을 수도 있으므로 한번 더 스냅)
+    const snap = ctx.getImageData(0,0,W,H);
+    const q = quantizeToBWR(snap);
+    ctx.putImageData(q,0,0);
+    const a = document.createElement('a');
+    a.href = cv.toDataURL('image/png');
+    a.download = `esl_${W}x${H}.png`;
+    a.click();
+  });
+})();
+</script>
+</body>
 </html>