mnistnode-model.js

//Updating model status
tstatus = document.getElementById('status')
predval = document.getElementById('predval')


//Load the CNN Model on page load
document.addEventListener('DOMContentLoaded', async () => {
    await loadModel();
}, false);


async function loadModel() {
    tstatus.innerText = 'Loading Model...'
    model = await tf.loadLayersModel("http://localhost:3000/assets/model/model.json");
    tstatus.innerText = 'Model Loaded Successfully. Start Drawing!'
    // model.summary()
}


/**
 * Preprocess the Image drawn on canvas and reshape it to [1,28,28,1]
 */
function getImageFromCanvas(image) {

    let tensor = tf.browser.fromPixels(image)
        .resizeNearestNeighbor([28, 28])
        .mean(2)
        .expandDims(2)
        .expandDims()
        .toFloat()
    return tensor.div(255.0)


}


async function predict() {
    let tensor = getImageFromCanvas(canvas);
    let pred = await model.predict(tensor).argMax([-1])
    predval.innerText = `This is a ${pred.arraySync()}`
}