processing.js

var model;
async function loadModel() {
    
    model = await tf.loadGraphModel('TFJS/model.json')
    
  }
function predictImage() {
    let image = cv.imread(canvas);
    //Input and output both are image- we are basically updating it
    cv.cvtColor(image, image, cv.COLOR_RGB2GRAY, 0);
    cv.threshold(image, image, 175, 255, cv.THRESH_BINARY);
      
    let contours = new cv.MatVector();
    let hierarchy = new cv.Mat();
    
    cv.findContours(image, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE);
    let cnt = contours.get(0);
    let rect = cv.boundingRect(cnt);
    image = image.roi(rect);

    //Scaling it up
    var height = image.rows;
    var width = image.cols;

    if (height>width){
        height = 20
        const scaleFactor = image.rows/height;
        width = Math.round(image.cols/scaleFactor);

    }
    else{
        width = 20
        const scaleFactor = image.cols/width;
        height = Math.round(image.rows/scaleFactor);
    }

    let newSize = new cv.Size(width, height);
    cv.resize(image, image, newSize, 0, 0, cv.INTER_AREA);

    const LEFT = Math.ceil(4 + (20 - width) / 2);
    const RIGHT = Math.floor(4 + (20 - width) / 2);
    const TOP = Math.ceil(4 + (20 - height) / 2);
    const BOTTOM = Math.floor(4 + (20 - height) / 2);

    
    const BLACK = new cv.Scalar(0, 0, 0, 0);
    
    cv.copyMakeBorder(image, image, TOP, BOTTOM, LEFT, RIGHT, cv.BORDER_CONSTANT, BLACK);

    // Centre of mass
    cv.findContours(image, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE);
    cnt = contours.get(0);
    const Moments = cv.moments(cnt, false);


    // 00 is mass of moments overall and 10 is mass in x direction
    const cx = Moments.m10 / Moments.m00;
    const cy = Moments.m01 / Moments.m00;
    //console.log(`M00: ${Moments.m00}, cx: ${cx}, cy: ${cy}`);


    // Shifting image- to get COM
    const X_SHIFT = Math.round(image.cols / 2.0 - cx);
    const Y_SHIFT = Math.round(image.rows / 2.0 - cy);

    // Lets reuse the newsize variable that we had
    newSize = new cv.Size(image.cols, image.rows);
    const M = cv.matFromArray(2, 3, cv.CV_64FC1, [1, 0, X_SHIFT, 0, 1, Y_SHIFT]);
    cv.warpAffine(image, image, M, newSize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, BLACK);

    // Changing the pixel values to fit between 0 and 1 rather than 0 and 255

    let pixelValues = image.data;
    // console.log(`pixel values: ${pixelValues}`);

    //This is where javascript differs from python
    // Float 32 array is for us to get decimal values, rather than just integers
    pixelValues = Float32Array.from(pixelValues);

    //map method to divide values
    pixelValues = pixelValues.map(function (item) {
        return item / 255.0;
    });

    //console.log(`scaled array: ${pixelValues}`);

    const X = tf.tensor([pixelValues]);

    // console.log(`Shape of Tensor: ${X.shape}`);
    // console.log(`dtype of Tensor: ${X.dtype}`);

    const result = model.predict(X);
    result.print();
    const output = result.dataSync()[0];

    //console.log(tf.memory());

    // // Testing code
    // var X = document.createElement('CANVAS');
    // cv.imshow(X, image);
    // document.body.appendChild(X);

    // Cleanup- to free up memory
    image.delete();
    contours.delete();
    cnt.delete();
    hierarchy.delete();
    M.delete();
    X.dispose();
    result.dispose();

    return output;
      
}