Machine Learning for JavaScript Developers: TensorFlow Step-by-Step Guide to Getting Started

A few words about machine learning

Machine learning is a subsection of artificial intelligence that is based on methods and algorithms that allow a system to improve its ability to solve future problems based on examples of past experiments (training data). Instead of focusing on solving a specific problem directly using classical algorithms machine learning consists of processing large amounts of data, analyzing general patterns, and finding hidden relationships from which the algorithm is trained.

The fundamental principle of machine learning is that when a computer system is presented with similar input data (parameters) and anticipated results (target variables) for a variety of problem-solving scenarios, it gradually becomes self-sufficient in identifying patterns and correlations between parameters and results. As a result of this learning process, the system can predict the outcome of new, unknown cases, demonstrating its capacity to adapt and generalize to new situations.

Various programming languages are used in machine learning, the most popular are Python, R, Java, C++, JavaScript, and Julia. The choice of programming language depends largely on the developer's preferences and experience, as well as on the specific requirements of the project and task.
While every programming language has its advantages and disadvantages, JavaScript stands out for its ability to integrate machine learning into web applications and dynamic user scenarios. This makes it a great tool for creating intuitive and adaptive machine learning-based solutions available in the browser.

Why TensorFlow JS?

TensorFlow.js is an open-source software library for machine learning in JavaScript. It allows you to develop machine learning models in JavaScript and use them directly in the browser or in Node.js.

Tensors are multidimensional arrays with a single type.

In TensorFlow.js, you can create tensors. Once tensors are created, they can be used to perform various mathematical operations such as addition, multiplication, transpose, and convolution, as well as to build machine learning models.

In short, tensors are key data structures for representing and processing information in TensorFlow they play an important role in the machine learning process.

Here are some advantages of TensorFlow.js:
Browser-based ML: TensorFlow.js allows you to run machine learning models directly in the browser, without the need for a server or cloud infrastructure. This enables you to build interactive ML applications that run entirely on the client side.

Easy Integration: TensorFlow.js can be easily integrated into existing JavaScript projects. You can use it with popular frontend frameworks like React, Angular, or Vue.js, and leverage the vast ecosystem of JavaScript libraries and tools.

Transfer Learning: TensorFlow.js supports transfer learning, which allows you to take pre-trained models from TensorFlow or other frameworks and retrain them on your own data. This can save you time and computational resources when building new models.

Privacy and Security: With TensorFlow.js, you can perform machine learning tasks on sensitive data without sending it to a remote server. This can be particularly useful for applications that deal with user data and require privacy and security.

Community and Resources: TensorFlow.js has an active community of developers and researchers who contribute to its development and provide support. There are also plenty of learning resources, tutorials, and examples available to help you get started.

Examples of where TensorFlow.js can be used to improve applications include:
• Image Recognition: TensorFlow.js can be used to build applications that can identify objects within images, categorize images, or even detect faces and expressions. This can be used to enhance user interfaces, create interactive games, or build accessibility tools.
• Natural Language Processing (NLP): With TensorFlow.js, you can analyze and understand text input from users. This can be used to build smart chatbots, perform sentiment analysis, or create tools for language translation.
• Predictive Analytics: You can use TensorFlow.js to analyze historical data and make predictions about future trends. This is useful in a wide range of fields, from finance to healthcare.

Among various models available, some popular ones include MobileNet for image classification, PoseNet for pose estimation detection, and BERT for natural language processing. To effectively employ these models, developers can either build custom models from scratch or import pre-trained models using TensorFlow.js' dedicated tools and APIs. While it simplifies the machine learning implementation process, some limitations should be considered, such as performance and memory constraints related to client-side web usage.

How get start

Here are a few steps that can help you get started with TensorFlow.js:

1. Install TensorFlow.js and import it into your project.
2. Create a machine learning model.
3. Train the model on the data.
4. Use the model to predict the results.

Example #1: Using the function "Y=2X−1" to calculate Y for a given X"

The <script> element in the head loads the TensorFlow.js library, and the  script.js  element at the end of the body loads the machine learning script.

After Running the example and checking out the results
You should see a page title and beneath that a number like ‘38.31612014770508’. The exact number will vary, but it should be close to ‘39’.

What just happened?
When index.js is loaded, it trains a tf.sequential model using X and Y values that satisfy the equation Y=2X−1.

Example 2. Image recognition

In the current example, we use a ready-made pre-trained model MobileNet
It is a computer vision model open-sourced by Google and designed for training classifiers. It uses depthwise convolutions to significantly reduce the number of parameters compared to other networks, resulting in a lightweight deep neural network.

As a result, you will see the name of the recognized object.

TensorFlow Hub
But what if you need to use a ready-made model? We can use TensorFlow Hub. It is a platform to publish, discover, and reuse parts of machine learning modules in TensorFlow. TensorFlow Hub is an open repository and library for reusable machine learning. It is designed to make it easy to publish, discover, and consume reusable parts of machine learning models. With TensorFlow Hub, you can build machine-learning solutions with real-world impact
The tfhub.dev repository provides many pre-trained models: text embeddings, image classification models, TF.js/TFLite models, and much more. The repository is open to community contributors.

Example 3: Using a TensorFlow Hub Model for Image Classification

in the next example, we use a ready-made pre-trained model MobileNet and connect it from tfhub.dev repository

https://tfhub.dev/google/tfjs-model/imagenet/mobilenet_v3_small_100_224/classification/5/default/1

Preview is available in this model. Upload your image and get the recognition result like this:

To use a model in your project, select the. JS option and copy the URL or download the model

With Node.js the working code will look like this:

const tf = require("@tensorflow/tfjs-node");
const sharp = require("sharp");
const fs = require("fs");
const classes = require("./imagenet_classes").IMAGENET_CLASSES;

const MOBILENET_MODEL_PATH =
  "https://tfhub.dev/google/tfjs-model/imagenet/mobilenet_v3_small_100_224/classification/5/default/1";

async function classifyImage(imagePath) {
  // Load the model
  const model = await tf.loadGraphModel(MOBILENET_MODEL_PATH, {
    fromTFHub: true,
  });

  // Load the image
  const imageBuffer = fs.readFileSync(imagePath);
  const image = sharp(imageBuffer);
  const imageData = await image.resize(224, 224).toBuffer();

  // Convert the image data to a tensor
  let input = tf.node.decodeImage(imageData, 3);
  input = input.toFloat().div(tf.scalar(127)).sub(tf.scalar(1));
  const batchedInput = input.expandDims(0);

  // Make a prediction
  const prediction = model.predict(batchedInput);

  // Print the prediction (Tensor)
  console.log(prediction);

  // Get the class index with the highest probability
  const classIndex = prediction.argMax(-1).dataSync()[0] - 1;

  // Get the class name
  const className = classes[classIndex];

  // Print the className
  console.log(className);

  return className;
}

module.exports = classifyImage;

You can find the full example of the code on the following CodeSandbox link.

Note that we are using imagenet_classes.js. It is typically used to provide a mapping between the numerical class labels predicted by a model trained on the ImageNet dataset and the actual human-readable class names.

For example, a model might predict that an image belongs to class ‘3’, but that doesn’t provide much information to a human user. However, if we have a mapping like imagenet_classes.js, we can see that class ‘3’ corresponds to ‘tiger shark, Galeocerdo cuvieri’, which is much more informative.

So, in short, imagenet_classes.js is used to translate the numerical predictions of the model into something humans can understand.

Conclusion
In conclusion, TensorFlow.js is a robust tool that brings the power of machine learning to front-end development. It operates directly in the browser, providing real-time processing and preserving user privacy by keeping all computations client-side.

The potential applications are vast. From image recognition capabilities that can enhance user interfaces, to natural language processing for smart chatbots or language translation tools, TensorFlow.js opens up a world of possibilities. Predictive analytics can also be implemented, providing valuable insights into future trends based on historical data.

By incorporating TensorFlow.js into frontend development workflows, developers can create more intelligent and interactive web applications. The ability to add features like image recognition or predictive analytics can significantly enhance the user experience. TensorFlow.js is not just a library, but a pathway to creating smarter applications for the web.

Useful links

https://www.tensorflow.org/js - Develop ML models in JavaScript, and use ML directly in the browser or in Node.js.

https://js.tensorflow.org/api/latest/ - js.tensorflow API
https://www.tensorflow.org/js/demos See examples and live demos built with TensorFlow.js.

https://github.com/tensorflow/tfjs-models This repository hosts a set of pre-trained models that have been ported to TensorFlow.js.

https://codepen.io/topic/tensorflow/templates a few using examples

https://www.youtube.com/watch?v=f5liqUk0ZTw What's a Tensor? short video Dan Fleisch briefly explains some vector and tensor concepts in this video