6 Amazing TensorFlow.js Projects to Kickstart Machine Learning on Web | by Anupam Chugh | Towards Data Science

As machine learning continues to accelerate, more and more languages are joining the bandwagon. JavaScript which has been the leader of the web ecosystem for a while now has slowly gained pace in machine learning as well.
An encouraging number of JavaScript libraries, specifically for machine learning have released over the past year. This would certainly boost AI-powered web browsers. Additionally, JavaScript for machine learning has the advantage of quick and easy deployment of models in mobile applications by leveraging web views.
At the heart of TensorFlow, we have a Web GL accelerated TensorFlow.js library that lets you train and run models directly in the browser or with Node.js. The best thing is, you don’t need to be a machine learning expert in order to deploy basic models as the library already provides a bunch of pre-trained models for classification, segmentation, and more.
Let’s look at a few awesome libraries build on top of TensorFlow.js to inspire your next machine learning project.
Face detection has been one of the classic use cases in Open-CV and naturally, it became the common use case in machine learning as well.
face-api.js is a JavaScript face recognition library implemented on top of TensorFlow.js. It lets you detect and recognize faces and landmarks while also determining emotions and gender in images.
The library completely abstracts away the underlying implementation to provide you with an easy to use high-level API. All you need to do is invoke the methods for the relevant neural net model with an option to also call the ready-drawing functions for overlaying the feature points on the canvas.
Here’s the basic code for setting up face detection with landmark and expression detection:
const detection = await faceapi.detectAllFaces(image)                                     .withFaceLandmarks()                                    .withFaceExpressions();
Style transfer today, is the most popular deep learning tasks. From photo editing apps to customizing themes in your apps, its possibilities are endless.
At a very high level, neural style transfer involves imparting the style from one image into another. Generally, you can use famous paintings or abstract arts to bring a new look to your input image.
Arbitrary style transfer is built on top of TensorFlow.js to work fully in your browser.
You can combine more than one style into an image and also set the style strength density to control the level of texture that’s visible in the final output.
nsfw.js is another cool library that lets you screen and classify images or gifs in your browser. This is handy if you need to censor content that isn’t for kids.
Running the model returns 5 classes with probabilities based on which you can choose to apply a blur or pixelate filter on the input image.
Here’s the code that shows how easy it is to load the model and run inferences:
const model = await nsfwjs.load()const predictions = await model.classify(img)
nsfw-filter is a great extension of the above library that blocks NSFW images from displaying in your browsers.
Image Segmentation helps us highlight and crop out certain features in an image. Changing the background of an image is the most straightforward use case.
But what if you need to do just the opposite? Gladly, there’s a cool open source project that lets you remove humans from an image.
This TensorFlow.js project works like a charm in real-time image processing and is handy when you’re using a video-call feature in your web apps.
Hand tracking is another interesting machine learning task. By tracking the position of hands in real-time you can build touchless gesture-based browsers and do motion capture for clicking selfies.
From writing and drawing doodles with your fingers to scrolling your screens without a mouse or swipe, the use cases of hand tracking are truly limitless.
Handtrack.js is just the library you’d need in such times. Besides providing bounding box points it also lets you set custom parameters when running the model.
Panda, a powerful Python package is one of the most sought after libraries in machine learning to perform data manipulation, cleaning, visualization and a lot of other tasks.
JavaScript despite making good strides in machine learning always lacked a panda like library for pre-processing tasks. But not anymore.
Danfo.js is a new open-source JavaScript library built on top of TensorFlow.js. It provides easy to use data structures to easily convert Arrays, JSON, Objects, Tensors, and differently-indexed data structures into DataFrame objects.
This will make handling datasets and performing tasks like merging or splitting them a whole lot easier.
TensorFlow.js aims at letting developers train, and run machine learning models entirely in their browsers. It’s a great way for JavaScript developers to find inroads into the world of machine learning.
The best thing is unlike CoreML which runs within Apple’s ecosystem, TensorFlow.js can run on iOS, macOS, Linux, Android, and any platform that supports a browser.
I hope the above libraries and projects inspire you to start building amazing AI-powered web applications.
That’s it for this one. Thanks for reading.