Update index.html

index.html

@@ -20,7 +20,7 @@
 
 <h2 id="result">Prediction: </h2>
 
-<script>
+<!-- <script>
 // =====================================================
 // CANVAS SETUP (desktop + mobile)
 // =====================================================
@@ -98,6 +98,93 @@ async function predict() {
     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>