Welcome to the first episode of the CodingTheSmartWay.com TensorFlow.js Crash Course for absolute beginners. In this first part of the series you’ll learn: What TensorFlow.js is How TensorFlow.js is added to your web application How TensorFlow.js...

Welcome to the first episode of the CodingTheSmartWay.com TensorFlow.js Crash Course for absolute beginners. In this first part of the series you’ll learn: What TensorFlow.js is How TensorFlow.js is added to your web application How TensorFlow.js can be used to add machine learning capabilities to your web application

What is TensorFlow.js TensorFlow.js is a JavaScript library which makes it possible to add machine learning capabilities to any web application. With TensorFlow.js you can develop machine learning scenarios from scratch. You can use the APIs to build and train models right in the browser or in your Node.js server application. Furthermore you can use TensorFlow.js to run existing models in your JavaScript environment. If you like CodingTheSmartWay, then consider supporting us via Patreon. With your help we’re able to release developer tutorial more often. Thanks a lot! Become A Patron! You can even use TensorFlow.js to retrain pre-existing machine learning models with data which is available client-side in the browser. E.g. you can use image data from your web cam. The project’s website can be found at https://js.tensorflow.org/:

TensorFlow.js Fundamentals Before getting started with practical example let’s take a look at the main building blocks in TensorFlow.

Tensors Tensors are the central unit of data in TensorFlow. A tensor contains a set of numeric values and can be of any shape: one or more dimensional. When you’re creating a new Tensor you need to define the shape as well. You can do that by using the tensor function and defining the shape by passing in a second argument like you can see in the following: const t1 = tf.tensor([1,2,3,4,2,4,6,8]), [2,4]); This is defining a tensor of a shape with two rows and four columns. The resulting tensor looks like the following: [[1,2,3,4], [2,4,6,8]] It’s also possible to let TensorFlow infer the shape of the tensor: const t2 = tf.tensor([[1,2,3,4],[2,4,6,8]]); The result would be the same as before. Furthermore you can use the following functions to enhance code readability: tf.scalar: Tensor with just one value tf.tensor1d: Tensor with one dimensions tf.tensor2d: Tensor with two dimensions tf.tensor3d: Tensor with three dimensions tf.tensor4d: Tensor with four dimensions If you would like to create a tensor with all values set to 0 you can use the tf.zeros function, as you can see in the following: const t_zeros = tf.zeros([2,3]); This line of code is creating the following tensor: [[0,0,0], [0,0,0]] In TensorFlow.js all tensors are immutable. That means that a tensor once created, cannot be changed afterwards. If you perform an operation which is changing values of a tensor, always a new tensor with the resulting value is created and returned. Operations By using TensorFlow operations you can manipulate data of a tensor. Because of the immutability of tensor operations are always returning a new tensor with the resulting values. TensorFlow.js offers many useful operations like square, add, sub and mul. Applying an operation is straight forward as you can see in the following: const t3 = tf.tensor2d([1,2], [3, 4]); const t3_squared = t3.square(); After having executed this code the new tensor contains the following values: [[1, 4 ], [9, 16]] Models And Layers Models and Layers are the two most important building blocks when it comes to deep learning. Each model is build up of one or more layers. TensorFlow is supporting different types of layers. For different machine learning tasks you need to use and combine different types of layers. For the moment it’s sufficient to understand that layers are used to build up neural networks (models) which can be trained with data and then used to predict further values based on the trained information. Setting Up The Project Let’s start by taking a look at a real world example. In the first step we need to set up the project. Create a new empty directory: $ mkdir tfjs01 Change into that newly created project folder: $ cd tfjs01 Inside the folder we’re now ready to create a package.json file, so that we’re able to manage dependencies by using the Node.js Package Manager: $ npm init -y Because we’ll be installing the dependencies (e.g. the Tensorflow.js library) locally in our project folder we need to use a module bundler for our web application. To keep things as easy as possible we’re going to use the Parcel web application bundler because Parcel is working with zero configuration. Let’s install the Parcel bundler by executing the following command in the project directory: $ npm install -g parcel-bundler Next, let’s create two new empty files for our implementation: $ touch index.html index.js Finally let’s add the Bootstrap library as a dependency because we will be using some Bootstrap CSS classes for our user interface elements: $ npm install bootstrap In index.html let’s insert the following code of a basic HTML page:

Adding TensorFlow.js To add Tensorflow.js to our project we again make use of NPM and execute the following command in the project directory: $ npm install @tensorflow/tfjs This is downloading the library and installing it into the node_modules folder. Having executed this command successfully we’re now ready to import the Tensorflow.js libraray in index.js by adding the following import statement on top of the file: import * as tf from '@tensorflow/tfjs'; As we’re importing TensorFlow.js as tf we now have access to the TensorFlow.js API by using the tf object within our code. Defining The Model Now that TensorFlow.js is available let’s start with a first simple machine learning exercise. The machine learning szenario the following sample application should cover is based on the formula Y=2X-1, a linear regression. This function is returning the value Y for a given X. If you plot the points (X,Y) you will get a straight line like you can see in the following:

The machine learning exercise we’d like to implement in the following will use input data (X,Y) from this function and train a model with these value pairs. The model will not know the function itself and we’ll use the trained model to predict Y values based on X value inputs. The expectation is that the Y-results which are returned from the model are close to the exact values which would be returned by the function. Let’s create a very simple neural network to perform the interference. This model needs to deal with just one input value and one output value: // Define a machine learning model for linear regression const model = tf.sequential(); model.add(tf.layers.dense({units: 1, inputShape: [1]})); First we’re creating a new model instance by calling tf.sequential method. We’re getting returned a new sequential model. A sequential model is any model where the outputs of one layer are the inputs to the next layer, i.e. the model topology is a simple ‘stack’ of layers, with no branching or skipping. Having created that model we’re ready to add a first layer by calling model.add. A new layer is passed into the add method by calling tf.layers.dense. This is creating a dense layer. In a dense layer, every node in the layer is connected to every node in the preceding layer. For our simple example it’s sufficient to only add one dense layer with an input and output shape of one to the neural network. In the next step we need to specify the loss and the optimizer function for the model. // Specify loss and optimizer for model model.compile({loss: 'meanSquaredError', optimizer: 'sgd'}); This is done by passing a configuration object to the call of the compile method of the model instance. The configuration object contains two properties: loss: Here we’re using the meanSquaredError loss function. In general a loss function is used to map values of one or more variables onto a real number that represents some “costs” associated with the value. If the model is trained it tries to minimize the result of the loss function. The mean squared error of an estimator measures the average of the squares of the errors — that is, the average squared difference between the estimated values and what is estimated. optimizer: The optimizer function to use. For our linear regression machine learning task we’re using the sgd function. Sgd stands for Stochastic Gradient Descent and it an optimizer function which is suitable for linear regression tasks like in our case. Now that model is configured and the next task to perform is the training of the model with values. Training The Model To train the model with value pairs from the function Y=2X-1 we’re defining two tensors with shape 6,1. The first tensor xs is containing the x values and the second tensor ys is containing the corresponding y values: // Prepare training data const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]); const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]); Now let’s train the model by passing the two tensors to the call of the model.fit method. // Train the model model.fit(xs, ys, {epochs: 500}).then(() => { }); As the third parameter we’re passing over an object which contains a property named epochs which is set to the value 500. The number which is assigned here is specifying how many times TensorFlow.js is going through your training set. The result of the fit method is a promise so that we’re able to register a callback function which is activated when the training is concluded. Prediction Now let’s perform the final step inside this callback function and predict a y value based on a given x value: // Train the model model.fit(xs, ys, {epochs: 500}).then(() => { // Use model to predict values model.predict(tf.tensor2d([5], [1,1])).print(); }); The prediction is done using the model.predict method. This method is expecting to receive the input value as a parameter in the form of a tensor. In this specific case we’re creating a tensor with just one value (5) inside and pass it over to predict. By calling the print function we’re making sure that the resulting value is printed to the console as you can see in the following:

The output shows that the predicted value is 8.9962864 and that is very close to 9 which would be the Y value of function Y=2X-1 if x is set to 5. Optimizing The User Interface The example which has been implemented is using a fixed input value for prediction (5) and outputting the result to the browser console. Let’s introduce a more sophisticated user interface which gives the user the possibility to enter the value which should be used for prediction. In index.html add the following code:

The user is now able to input the value (x) for which is the Y value should be predicted. The prediction is done when the Predict button is clicked:

The result is then showed directly on the website.

What’s Next In this first episode of this series you’ve learned the basics of Tensorflow.js and by using that library we’ve implemented a first simple machine learning example based on linear regression. Now you should have a basic understanding of the main Tensorflow.js building blocks. In the next part we’ll again focus on a practical machine learning example and dive deeper into JavaScript-based machine learning with TensorFlow.js. This post has been published first on CodingTheSmartWay.com. Top TensorFlow Online Courses Learn how to use Google’s Deep Learning Framework — TensorFlow — with the best online courses available. Become a Deep Learning Guru today! Go To Courses …

We are a Machine Learning Services provider offering custom AI solutions, Machine Learning as a service & deep learning solutions. Hire Machine Learning experts & build AI Chatbots, Neural networks, etc. 16+ yrs & 2500+ clients.

TensorFlow.js Crash Course — Machine Learning For The Web — Handwriting Recognition. This post has been published first on CodingTheSmartWay.com -TensorFlow.js is a library for building and executing machine learning ... and deploy machine learning models and enabled new classes of on-device ....

TensorFlow.js Crash Course – Machine Learning For The Web - Welcome to the first episode of the TensorFlow.js Crash Course for absolute beginners...

AI, Machine learning, as its title defines, is involved as a process to make the machine operate a task automatically to know more join CETPA

Check out the 5 latest technologies of machine learning trends to boost business growth in 2021 by considering the best version of digital development tools. It is the right time to accelerate user experience by bringing advancement in their lifestyle.