Slide 9.10: Collecting data

Slide 9.9: TensorFlow.js models
Slide 9.11: Tensorflow optimizers
Home Print version

TensorFlow.js Models (Cont.)

Collecting Data
Create a tensor (xs) with 5 x values:

const xs = tf.tensor( [0, 1, 2, 3, 4] );

Create a tensor (ys) with 5 correct y answers (multiply xs with 1.2 and add 5):

const ys = xs.mul( 1.2 ).add( 5 );

Creating a Model
Create a sequential model, where the output from one layer is the input to the next layer:

const model = tf.sequential( );

Adding a Layer
Add one dense layer to the model. In a dense layer, every node is connected to every node in the preceding layer. The layer is only one unit (tensor) and the shape is 1 (one dimentional):

model.add( tf.layers.dense( { units:1, inputShape:[1] } ) );

Compiling the Model
Compile the model using meanSquaredError as loss function and sgd (stochastic gradient descent) as optimizer function:

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

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>

◀
Previous

Slide 9.9: TensorFlow.js models
Slide 9.11: Tensorflow optimizers
Home Print version

▶
Next

Knowledge is knowing a tomato is a fruit.
Wisdom is not putting it in a fruit salad.