sushreen/AlphabetDoodleRecognition

1let canvas;2let ctx;3let isDrawing = false;4let lastX = 0;5let lastY = 0;6 7document.addEventListener("DOMContentLoaded", () => {8    canvas = document.getElementById("drawingCanvas");9    ctx = canvas.getContext("2d");10 11    // Set canvas background to black12    ctx.fillStyle = "black";13    ctx.fillRect(0, 0, canvas.width, canvas.height);14 15    // Drawing logic16    canvas.addEventListener("mousedown", (e) => {17        isDrawing = true;18        [lastX, lastY] = [e.offsetX, e.offsetY];19    });20 21    canvas.addEventListener("mouseup", () => isDrawing = false);22    canvas.addEventListener("mouseleave", () => isDrawing = false);23 24    canvas.addEventListener("mousemove", (e) => {25        if (!isDrawing) return;26        ctx.strokeStyle = "white";         // white strokes27        ctx.lineWidth = 15;28        ctx.lineCap = "round";29        ctx.lineJoin = "round";30        ctx.beginPath();31        ctx.moveTo(lastX, lastY);32        ctx.lineTo(e.offsetX, e.offsetY);33        ctx.stroke();34        [lastX, lastY] = [e.offsetX, e.offsetY];35    });36});37 38// Clear the canvas39function clearCanvas() {40    ctx.fillStyle = "black";  // reset background to black41    ctx.fillRect(0, 0, canvas.width, canvas.height);42    document.getElementById("result").innerText = "";43}44 45// Convert data URI to Blob46function dataURItoBlob(dataURI) {47    let byteString = atob(dataURI.split(",")[1]);48    let arrayBuffer = new ArrayBuffer(byteString.length);49    let uint8Array = new Uint8Array(arrayBuffer);50    for (let i = 0; i < byteString.length; i++) {51        uint8Array[i] = byteString.charCodeAt(i);52    }53    return new Blob([uint8Array], { type: "image/png" });54}55 56// Send image to backend for prediction57function sendToServer() {58    const image = canvas.toDataURL("image/png");  // send raw (already white-on-black)59    const blob = dataURItoBlob(image);60    const formData = new FormData();61    formData.append("image", blob, "drawing.png");62 63    fetch("/predict", {64        method: "POST",65        body: formData66    })67    .then(response => response.json())68    .then(data => {69        document.getElementById("result").innerText = "Prediction: " + data.prediction;70    })71    .catch(error => {72        console.error("Error:", error);73        document.getElementById("result").innerText = "Error occurred. Try again.";74    });75}76