# π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

#### π 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

3. π Compile the model

5. π₯ Use the model to predict

// create sequential
const model = tf.sequential();

// 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);

}
}
});
}