DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Data Engineering
  3. AI/ML
  4. Getting Started With TensorFlow.js

Getting Started With TensorFlow.js

In this super-simple tutorial, I'll show you a basic ''Hello World'' example that will teach you the scaffolding to get you up and running.

Laurence Moroney user avatar by
Laurence Moroney
·
Aug. 24, 18 · Tutorial
Like (3)
Save
Tweet
Share
4.24K Views

Join the DZone community and get the full member experience.

Join For Free

With TensorFlow.js, you can not only run machine-learned models in the browser to perform inference, but you can also train them. In this super-simple tutorial, I'll show you a basic "Hello World" example that will teach you the scaffolding to get you up and running.

Let's start with the simplest Web Page imaginable:

<html>
<head></head>
<body></body>
</html>

Once you have that, the first thing you'll need to do is add a reference to TensorFlow.js so that you can use the TensorFlow APIs. The JS file is available on a CDN for your convenience:

Right now, I'm using version 0.11.2, but be sure to check GitHub for the most recent version.

Now that TensorFlow.js is loaded, let's do something interesting with it.

Consider a straight line with the formula Y=2X-1. This will give you a set of points like (-1, -3), (0, -1), (1, 1), (2, 3), (3, 5) and (4, 7). While we know that the formula gives us the Y value for a given X, it's a nice exercise in training a model for a computer that is not explicitly programmed with this formula, to see if it can infer values of Y for given values of X when trained on this data.

So how would this work?

Well, first of all, we can create a super-simple neural network to do the inference. As there's only 1 input value and 1 output value, it can be a single node. In JavaScript, I can then create a tf.sequential, and add my layer definition to it. It can't get any more basic than this:

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

To finish defining my model, I compile it, specifying my loss type and optimizer. I'll pick the most basic loss type — the meanSquaredError, and my optimizer will be a standard stochastic gradient descent (aka 'sgd'):

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

To train the model, I'll need a tensor with my input (i.e. 'X') values, and another with my output (i.e. 'Y') values. With TensorFlow, I also need to define the shape of that given tensor:

const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);

So, my Xs are the values -1,0,1,2,3 and 4, defined as a 6×1 tensor. My Ys are -3, -1, 1, 3, 5, 7 in the same shape. Note that the nth Y entry is the value for the nth X entry when we say that Y=2X-1.

To train the model, we use the fit method. To this, we pass the set of X and Y values along with a number of epochs (loops through the data) in which we will train it. Note that this is asynchronous, so we should await the return value before proceeding, so all this code needs to be in an async function (more on that later):

await model.fit(xs, ys, {epochs: 500});

Once that's done, the model is trained, so we can predict a value for a new X. So, for example, if we wanted to figure out the Y for X=10 and write it on the page in a <div>, the code would look like this:

document.getElementById('output_field').innerText =
   model.predict(tf.tensor2d([10], [1, 1]));

Note that the input is a tensor, where we specify that it's a 1×1 tensor containing the value 10.

The result is written on the page in the div, and should look something like this:

Wait, you might ask, "Why isn't it 19?" It's pretty close, but it's not 19! That's because the algorithm has never been given the formula — it simply learns based on the data it was given. With more relevant data, any ML model will give greater accuracy, but this one isn't bad considering it only had 6 pieces of data to learn from!

For your convenience, here's the entire code for the page, including the declaration of all this code as an async function called "learnLinear":

<html>
 <head>
 <!-- Load TensorFlow.js -->
 <!-- Get latest version athttps://github.com/tensorflow/tfjs --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.2"> </script> </head> <body> <div id="output_field"></div> </body> <script> async function learnLinear(){ const model = tf.sequential(); model.add(tf.layers.dense({units: 1, inputShape: [1]})); model.compile({ loss: 'meanSquaredError', optimizer: 'sgd' }); const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]); const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]); await model.fit(xs, ys, {epochs: 500}); document.getElementById('output_field').innerText = model.predict(tf.tensor2d([10], [1, 1])); } learnLinear(); </script> <html>

And that's all it takes to create a very simple Machine Learned model with TensorFlow.js that executes in your browser. From here, you have the foundation to go forward with more advanced concepts.

Have fun with it!

neural network Data (computing) Stochastic gradient descent IT Gradient descent Machine learning TensorFlow Concept (generic programming) GitHub

Published at DZone with permission of Laurence Moroney, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • AWS Cloud Migration: Best Practices and Pitfalls to Avoid
  • Real-Time Stream Processing With Hazelcast and StreamNative
  • Key Considerations When Implementing Virtual Kubernetes Clusters
  • 5 Factors When Selecting a Database

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: