🌐 CNNs In Browser

Notes on Implementing CNNs In The Browser

To implement our CNN based works in the Browser we need to use Tensorflow.JS πŸš€

πŸ‘·β€β™€οΈ Workflow

  1. πŸš™ Import Tensorflow.js​

  2. πŸ‘·β€β™€οΈ Create models

  3. πŸ‘©β€πŸ« Train

  4. πŸ‘©β€βš–οΈ Do inference

πŸš™ Importing Tensorflow.js

We can import Tensorflow.js in the way below

<script
src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest">
</script>

πŸ‘·β€β™€οΈ Creating The Model

😎 Same as we did in Python:

  1. 🐣 Decalre a Sequential object

  2. πŸ‘©β€πŸ”§ Add layers

  3. πŸš€ Compile the model

  4. πŸ‘©β€πŸŽ“ Train (fit)

  5. πŸ₯ Use the model to predict

// create sequential
const model = tf.sequential();
​
// add layer(s)
model.add(tf.layers.dense({units: 1, inputShape: [1]}));
​
// set compiling parameters and compile the model
model.compile({loss:'meanSquaredError',
optimizer:'sgd'});
​
// get summary of the mdoel
model.summary();
​
// create sample data set
const xs = tf.tensor2d([-1.0, 0.0, 1.0, 2.0, 3.0, 4.0], [6, 1]);
const ys = tf.tensor2d([-3.0, -1.0, 2.0, 3.0, 5.0, 7.0], [6, 1]);
​
// train
doTraining(model).then(() => {
// after training
predict = model.predict(tf.tensor2d([10], [1,1]));
predict.print();
});

([-1.0, 0.0, 1.0, 2.0, 3.0, 4.0], [6, 1])

[-1.0, 0.0, 1.0, 2.0, 3.0, 4.0]: Data set values

[6, 1]: Shape of input

πŸ‘β€πŸ—¨ Attention

  • 🐒 Training is a long process so that we have to do it in an asynchronous function

    async function doTraining(model){
    const history =
    await model.fit(xs, ys,
    { epochs: 500,
    callbacks:{
    onEpochEnd: async(epoch, logs) =>{
    console.log("Epoch:"
    + epoch
    + " Loss:"
    + logs.loss);
    ​
    }
    }
    });
    }

πŸ‘©β€πŸ’» Full Code