Using TensorFlow.js

Using TensorFlow.js

The TensorFlow is an end-to-end open source platform for machine learning (ML). It has a comprehensive, flexible ecosystem of tools, libraries and community resources that lets researchers push the state-of-the-art in ML and developers easily build and deploy ML powered applications. The following example is to implement the XOR function:

<html>
 <head>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script>
  <title>XOR TensorFlow.js</title>
 </head>
 <body>
  <form>
   <input size="2" id="x" value="0"> XOR
   <input size="2" id="y" value="1"> =
   <input size="2" id="r" value="">
   <input type="button" onClick="run( )" value="Train and test" />
   <input type="reset" />
  </form>

  <script>
   // Running the XOR function
   function run( ) {
    // Solving the XOR problem
    const LEARNING_RATE = 0.1;
    const EPOCHS = 200;     // # of training iterations

    // Defining the training data
    const xs = [ [0,0], [0,1], [1,0], [1,1] ];
    const ys = [   0,     1,     1,     0   ];

    // Instantiating the training tensors
    let xTrain = tf.tensor2d( xs, [4,2] );       // a 4×2 tensor
    let yTrain = tf.oneHot( tf.tensor1d( ys ).toInt( ), 2 );

    // Defining the model
    const model = tf.sequential( );

    // Setting up the network layers
    model.add( tf.layers.dense( {units: 5, activation: 'sigmoid', inputShape: [2]} ) );
    model.add( tf.layers.dense( {units: 2, activation: 'softmax', outputShape: [2]} ) );

    // Defining the optimizer
    const optimizer = tf.train.adam( LEARNING_RATE );

    // Initiating the model
    model.compile( {
     optimizer: optimizer,
     loss: 'categoricalCrossentropy',
     metrics: ['accuracy'],
    } );

    // Training the model
    const history = model.fit( xTrain, yTrain, {
     epochs: EPOCHS,
     validationData: [ xTrain, yTrain ],
     } ).then( ( ) => {
       // Trying the model on a value
       const xy = [ ];
       x = document.getElementById( "x" ).value;
       xy[0] = parseInt(x);
       y = document.getElementById( "y" ).value;
       xy[1] = parseInt(y);
       const input = tf.tensor2d( xy, [1,2] );       // a 1×2 tensor
       const predictOut = model.predict( input );
       const logits = Array.from( predictOut.dataSync( ) );
       document.getElementById( "r" ).value = Math.round( logits[1] );
      } );
   }     // End of function run( )
  </script>
 </body>
</html>

A tensor is a mathematical object similar to, but more general than, a vector and often represented by an array of components that describe functions relevant to coordinates of a space. Put simply, a tensor is an array of numbers that transform according to certain rules under a change of coordinates. Tensors are the core data structure of TensorFlow.

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>: This command points to TensorFlow.js, which is an open-source hardware-accelerated JavaScript library for training and deploying machine learning models.

README.md
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script>: This command points to tfjs-vis, which are utilities for in browser visualization with TensorFlow.js.
const xs = [ [0,0], [0,1], [1,0], [1,1] ]; const ys = [ 0, 1, 1, 0 ];: The training data is expressed as two arrays, one for inputs (xs) and one for outputs (ys). The arrays are then converted to tensors for use in the neural network.
let xTrain = tf.tensor2d( xs, [4,2] );: They are a generalization of vectors and matrices to potentially higher dimensions. We have utility functions for common cases like Scalar, 1D, 2D, 3D and 4D tensors, as well a number of functions to initialize tensors in ways useful for machine learning. Think of the tensor as a wrapper object for the array. It provides a ton of utility functions to manipulate arrays but at its core there’s just an array of data. xs is an array of 4 values, each an array of 2 values. Therefore, the shape of xs is expressed as [4,2]. Because this example passes a two dimensional array, TensorFlow can infer its shape. However, it’s good practice to explicitly define the shape.
let yTrain = tf.oneHot( tf.tensor1d( ys ).toInt( ), 2 );: The output data is instantiated as a “one-hot” tensor. This means that each output neuron represents a unique value, in this case the two possible values are TRUE or FALSE. Therefore, the tensor has a declared depth of 2 where the first is represented by 0 and the second is represented by 1 in the array. With the inputs and outputs defined, it’s time to set up the neural network model. A sequential model, meaning it consists of layers of neurons which progress in the order they’re defined, is used in this example. Here the input, consisting of 2 values is passed to a layer of 5 neurons. Then passed to a layer of 2 neurons, which is output as a percent certainty (a value between 0 and 1) of the two possible outputs (TRUE or FALSE).
const model = tf.sequential( );: When you want to create a model which does not have multiple input and output and it will be developed layer by layer then we will go for a sequential model of deep learning. Basically there two types of models functional and sequential model. The tf.sequential() function creates a model in which one output of one layer is the input of the next layer. in simple words, we can say it is a linear stack of layers with no branching and skipping.
model.add( tf.layers.dense( {units: 5, activation: 'sigmoid', inputShape: [2]} ) );: Tensorflow dense is the type of layer and function available in neural networks while implementing AI and deep learning. Deep connections exist between the neurons in the neural network in dense layers. The pattern followed by them is such that each and every individual neuron gets the input of data from all of the previous layer’s neurons, forming the complex pattern. While on the other end, dense is also a function used in the neural networks of TensorFlow, which produces the output by applying activation of the dot of Kernel and input and adding the bias effect to it.
model.add( tf.layers.dense( {units: 5, activation: 'softmax', outputShape: [2]} ) );: Sigmoid activation function is sigmoid(x) = 1 / (1 + exp(-x)), while softmax converts a vector of values to a probability distribution. The most common 2D tensor input is with shape (batch_size, ..., input_dim), while the output would have shape (batch_size, units).
const optimizer = tf.train.adam( LEARNING_RATE );: Adam optimizer (or Adaptive Moment Estimation) is a stochastic gradient descent method that is based on adaptive estimation of first-order and second-order moments. The optimization technique is highly efficient in when working with a large sets of data and parameters. In Tensorflow.js, tf.train.adam() function is used which creates tf.AdamOptimizer that uses the adam algorithm.
model.compile( { optimizer: optimizer, loss: 'categoricalCrossentropy', metrics: ['accuracy'],: It is to configure the model for training. The model is trained with the Adam optimiser and a loss function of categoricalCrossentropy. Categorical Crossentropy allows the model to train by associating input values with output categories. In other words, you train it to recognise that the input [0,0] is associated with the output FALSE, input [1,0] is associated with output TRUE and so on.
const history = model.fit( xTrain, yTrain, { epochs: EPOCHS, validationData: [ xTrain, yTrain ], } ).then( ( ) => {: The training is performed by the fit() method of the model object. This method receives the x and y training data and an optional config object. The configuration can specify the number of epochs (how many times it iterates through the training data) as well as some validation data. In this example, the training data set is so limited in possibilities that its simply passed back in for validation. In a more practical implementation a portion of the training data would be set aside before training to be used for validation of the model. It returns a promise function that is called when the model is trained. In this example, the promise function is used to test the trained model. An input tensor is instantiated with 2 input values.
xy[0] = parseInt(x);: The JavaScript parseInt() method parses a value as a string and returns the first integer.
const predictOut = model.predict( input );: The tensor is passed to the model’s predict() method which generates the model output object.
const logits = Array.from( predictOut.dataSync( ) );: The output data is retrieved by calling the dataSync() method, which is used to synchronously download the values from the tensor, and is passed into a array representing the percent certainty of [FALSE, TRUE]. In this example, for the input of [0,1], the predicted output would look something like [0.001049950486049056, 0.9989500641822815] which represents a 0.0% certainty of FALSE and a 99.9% certainty of TRUE.
document.getElementById( "r" ).value = Math.round( logits[1] );: The round() method rounds a number to the nearest integer.

^†The page is based on Create a neural network with TensorFlow.js.