Spaces:
Sleeping
Sleeping
File size: 2,690 Bytes
bbea32b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
let canvas;
let ctx;
document.addEventListener("DOMContentLoaded", () => {
canvas = document.getElementById("drawingCanvas");
ctx = canvas.getContext("2d");
let isDrawing = false;
canvas.addEventListener("mousedown", () => isDrawing = true);
canvas.addEventListener("mouseup", () => isDrawing = false);
canvas.addEventListener("mousemove", draw);
function draw(event) {
if (!isDrawing) return;
ctx.fillStyle = "black";
ctx.fillRect(event.offsetX, event.offsetY, 20, 20);
}
});
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById("result").innerText = "";
}
// Inverting the images as the training images had a black background with white text,
// opposite of what we get from the canvas
function invertCanvasColors(inputCanvas) {
const tempCanvas = document.createElement("canvas");
const tempCtx = tempCanvas.getContext("2d");
// Set the size of the temporary canvas to match the original canvas
tempCanvas.width = inputCanvas.width;
tempCanvas.height = inputCanvas.height;
// Draw the original canvas onto the temporary canvas
tempCtx.drawImage(inputCanvas, 0, 0);
// Get the pixel data of the image
const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
const data = imageData.data;
// Invert each pixel's RGB values
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // Red channel
data[i + 1] = 255 - data[i + 1]; // Green channel
data[i + 2] = 255 - data[i + 2]; // Blue channel
}
tempCtx.putImageData(imageData, 0, 0);
return tempCanvas;
}
function sendToServer() {
const invertedCanvas = invertCanvasColors(canvas);
let image = invertedCanvas.toDataURL("image/png");
let blob = dataURItoBlob(image);
let formData = new FormData();
formData.append("image", blob, "drawing.png");
fetch("https://ramachandrankulothungan-digit-doodle-recognition.hf.space/predict", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => document.getElementById("result").innerText = "Prediction: " + data.prediction)
.catch(error => console.error("Error:", error));
}
function dataURItoBlob(dataURI) {
let byteString = atob(dataURI.split(",")[1]);
let arrayBuffer = new ArrayBuffer(byteString.length);
let uint8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < byteString.length; i++) {
uint8Array[i] = byteString.charCodeAt(i);
}
return new Blob([uint8Array], { type: "image/png" });
}
|