Slide 10.9: TensorFlow.js models

TensorFlow.js Models

Models and layers are important building blocks in machine learning. For different machine learning tasks you must combine different types of layers into a model that can be trained with data to predict future values.

TensorFlow.js is supporting different types of models and different types of layers. A TensorFlow model is a neural network with one or more layers.

TensorFlow.js

A JavaScript Library for Training and Deploying
Machine Learning Models
in the Browser

A Tensorflow Project
A Tensorflow project has this typical workflow:

Collecting data,
Creating a model,
Adding layers to the model,

Compiling the model,
Training the model, and
Using the model.

An Example of Tensorflow Projects
Suppose you knew a function that defined a strait line:

   Y = 1.2X + 5

Then you could calculate any y value with the JavaScript formula:

y = 1.2 * x + 5;

To demonstrate Tensorflow.js, we could train a Tensorflow.js model to predict Y values based on X inputs. The TensorFlow model does not know the function.

<html>
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 <body>
  <h3>TensorFlow.js</h3>
  <p id="message">Model is training!</p>
  <div id="myPlot" style="width:100%;max-width:700px"></div>
  <script>
   // Creating training data
   const xs = tf.tensor( [0, 1, 2, 3, 4] );
   const ys = xs.mul( 1.2 ).add( 5 );

// Defining a linear regression model
   const model = tf.sequential( );
   model.add( tf.layers.dense( { units:1, inputShape:[1] } ) );

// Specifying loss and optimizer
   model.compile( { loss:'meanSquaredError', optimizer:'sgd' } );

// Training the model
   model.fit( xs, ys, { epochs:500 } ).then( ( ) => { myFunction( ) } );

// Using the model
   function myFunction( ) {
    const xMax = 10;
    const xArr = [ ];
    const yArr = [ ];
    for ( let x = 0; x <= xMax; x++ ) { 
     let result = model.predict( tf.tensor( [ Number(x) ] ) );
     result.data( ).then( y => {
       xArr.push( x );
       yArr.push( Number( y ) );
       if ( x == xMax ) { plot( xArr, yArr ) };
     } );
    }
    document.getElementById( 'message' ).style.display = "none";
   }   // End of myFunction

function plot( xArr, yArr ) {
    // Defining data
    const data = [ { x:xArr, y:yArr, mode:"markers", type:"scatter" } ];

// Defining layout
    const layout = {
     xaxis: { range: [0, 10] },
     yaxis: { range: [0, 20] },  
    };

// Displaying plot
    Plotly.newPlot( "myPlot", data, layout );
   }
  </script>
 </body>
</html>