digitDrawer.js

const canvas = document.createElement('canvas');
canvas.width = 280;
canvas.height = 280;
canvas.style.border = '1px solid black';
document.getElementById('canvasContainer').appendChild(canvas);
const ctx = canvas.getContext('2d');
let isDrawing = false;
let lastPredictionTime = 0;

function setDrawingStyle() {
    ctx.lineWidth = 20;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#000';
}

// Call this at the beginning of your script, after creating the canvas
setDrawingStyle();

function initializeGrid() {
    // First, fill the entire canvas with white
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Then draw the grid lines
    ctx.strokeStyle = 'white';
    for (let i = 0; i <= 28; i++) {
        ctx.beginPath();
        ctx.moveTo(i * 10, 0);
        ctx.lineTo(i * 10, 280);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(0, i * 10);
        ctx.lineTo(280, i * 10);
        ctx.stroke();
    }
}

function startDrawing(e) {
    isDrawing = true;
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    ctx.beginPath();
    ctx.lineWidth = 20;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#000';
    
    // Draw a single point
    ctx.moveTo(x, y);
    ctx.lineTo(x, y);
    ctx.stroke();
    
    // Start a new path for potential dragging
    ctx.beginPath();
    ctx.moveTo(x, y);
    
    // Trigger prediction immediately on click
    predictDrawing();
}

function stopDrawing() {
    isDrawing = false;
    ctx.beginPath();
}

function draw(e) {
    if (!isDrawing) return;
    
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x, y);
    
    // Check if it's time for a new prediction
    const currentTime = Date.now();
    if (currentTime - lastPredictionTime > 1000) { // 1000ms = 1 second
        predictDrawing();
        lastPredictionTime = currentTime;
    }
}

function predictDrawing() {
    const imageData = canvas.toDataURL('image/png').split(',')[1];
    fetch('https://vishalbakshi-isitadigit-inference.hf.space/predict', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({image: imageData})
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('probability').textContent = `Probability: ${data.probability}`;
    });
}

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

document.getElementById('clearButton').addEventListener('click', () => {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    initializeGrid();
    document.getElementById('probability').textContent = 'Probability: --';
});

initializeGrid();