Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Digit Classifier</title> | |
| <style> | |
| body { text-align: center; font-family: Arial; } | |
| canvas { border: 2px solid black; margin-top: 20px; } | |
| button { margin-top: 20px; padding: 10px 20px; font-size: 18px; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Draw a Digit</h1> | |
| <canvas id="canvas" width="300" height="300"></canvas><br> | |
| <button onclick="predict()">Predict</button> | |
| <button onclick="clearCanvas()">Clear</button> | |
| <h2 id="result">Prediction: </h2> | |
| <!-- <script> | |
| // ===================================================== | |
| // CANVAS SETUP (desktop + mobile) | |
| // ===================================================== | |
| let canvas = document.getElementById("canvas"); | |
| let ctx = canvas.getContext("2d"); | |
| let drawing = false; | |
| // -------------------------- | |
| // Desktop events | |
| // -------------------------- | |
| canvas.addEventListener("mousedown", () => { drawing = true; }); | |
| canvas.addEventListener("mouseup", () => { drawing = false; }); | |
| canvas.addEventListener("mousemove", draw); | |
| // -------------------------- | |
| // Mobile events | |
| // -------------------------- | |
| canvas.addEventListener("touchstart", (e) => { | |
| e.preventDefault(); | |
| drawing = true; | |
| }); | |
| canvas.addEventListener("touchend", () => { drawing = false; }); | |
| canvas.addEventListener("touchmove", drawTouch); | |
| // -------------------------- | |
| // Draw functions | |
| // -------------------------- | |
| function draw(e) { | |
| if (!drawing) return; | |
| ctx.fillStyle = "black"; | |
| ctx.beginPath(); | |
| ctx.arc(e.offsetX, e.offsetY, 12, 0, Math.PI * 2); | |
| ctx.fill(); | |
| } | |
| function drawTouch(e) { | |
| e.preventDefault(); | |
| if (!drawing) return; | |
| let rect = canvas.getBoundingClientRect(); | |
| let touch = e.touches[0]; | |
| let x = touch.clientX - rect.left; | |
| let y = touch.clientY - rect.top; | |
| ctx.fillStyle = "black"; | |
| ctx.beginPath(); | |
| ctx.arc(x, y, 12, 0, Math.PI * 2); | |
| ctx.fill(); | |
| } | |
| // ===================================================== | |
| // CANVAS CONTROL FUNCTIONS | |
| // ===================================================== | |
| function clearCanvas() { | |
| ctx.fillStyle = "white"; | |
| ctx.fillRect(0, 0, 300, 300); | |
| document.getElementById("result").innerText = "Prediction: "; | |
| } | |
| // initialize canvas as white | |
| clearCanvas(); | |
| // ===================================================== | |
| // PREDICT FUNCTION — works on HuggingFace | |
| // ===================================================== | |
| async function predict() { | |
| let dataURL = canvas.toDataURL("image/png"); | |
| let response = await fetch("/predict", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ image: dataURL }) | |
| }); | |
| let result = await response.json(); | |
| document.getElementById("result").innerText = "Prediction: " + result.prediction; | |
| } | |
| </script> | |
| --> | |
| <script> | |
| // ===================================================== | |
| // CANVAS SETUP (desktop + mobile) | |
| // ===================================================== | |
| let canvas = document.getElementById("canvas"); | |
| let ctx = canvas.getContext("2d"); | |
| let drawing = false; | |
| let brushSize = 12; // <--- NEW | |
| // -------------------------- | |
| // Desktop events | |
| // -------------------------- | |
| canvas.addEventListener("mousedown", () => { drawing = true; }); | |
| canvas.addEventListener("mouseup", () => { drawing = false; }); | |
| canvas.addEventListener("mousemove", draw); | |
| // -------------------------- | |
| // Mobile events | |
| // -------------------------- | |
| canvas.addEventListener("touchstart", (e) => { | |
| e.preventDefault(); | |
| drawing = true; | |
| }); | |
| canvas.addEventListener("touchend", () => { drawing = false; }); | |
| canvas.addEventListener("touchmove", drawTouch); | |
| // -------------------------- | |
| // Update brush size | |
| // -------------------------- | |
| function updateBrushSize() { | |
| brushSize = document.getElementById("brushSize").value; | |
| document.getElementById("brushValue").innerText = brushSize; | |
| } | |
| // -------------------------- | |
| // Draw functions | |
| // -------------------------- | |
| function draw(e) { | |
| if (!drawing) return; | |
| ctx.fillStyle = "black"; | |
| ctx.beginPath(); | |
| ctx.arc(e.offsetX, e.offsetY, brushSize, 0, Math.PI * 2); | |
| ctx.fill(); | |
| } | |
| function drawTouch(e) { | |
| e.preventDefault(); | |
| if (!drawing) return; | |
| let rect = canvas.getBoundingClientRect(); | |
| let touch = e.touches[0]; | |
| let x = touch.clientX - rect.left; | |
| let y = touch.clientY - rect.top; | |
| ctx.fillStyle = "black"; | |
| ctx.beginPath(); | |
| ctx.arc(x, y, brushSize, 0, Math.PI * 2); | |
| ctx.fill(); | |
| } | |
| // ===================================================== | |
| // CANVAS CONTROL FUNCTIONS | |
| // ===================================================== | |
| function clearCanvas() { | |
| ctx.fillStyle = "white"; | |
| ctx.fillRect(0, 0, 300, 300); | |
| document.getElementById("result").innerText = "Prediction: "; | |
| } | |
| clearCanvas(); | |
| // ===================================================== | |
| // PREDICT FUNCTION | |
| // ===================================================== | |
| async function predict() { | |
| let dataURL = canvas.toDataURL("image/png"); | |
| let response = await fetch("/predict", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ image: dataURL }) | |
| }); | |
| let result = await response.json(); | |
| document.getElementById("result").innerText = "Prediction: " + result.prediction; | |
| } | |
| </script> | |
| </body> | |
| </html> | |