Slide 10.11: Tensorflow optimizers

TensorFlow.js Models (Cont.)

TensorFlow Optimizers

Adadelta: Implements the Adadelta algorithm.
Adagrad: Implements the Adagrad algorithm.
Adam: Implements the Adam algorithm.
Adamax: Implements the Adamax algorithm.
Ftrl: Implements the FTRL algorithm.
Nadam: Implements the NAdam algorithm.
Optimizer: Base class for Keras optimizers.
RMSprop: Implements the RMSprop algorithm.
SGD: Stochastic Gradient Descent Optimizer.

Training the Model
Train the model (using xs and ys) with 500 repeats (epochs) by using the fit() function:

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

Using the Model
After the model is trained, you can use it for many different purposes. This example predicts 10 y values, given 10 x values by using the function predict(), and calls a function to plot the predictions in a graph by using the function newPlot():

// 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";
}

An Example of Tensorflow Projects

<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>