Enhance Your Web Application with AI Capabilities Using These 4 JavaScript Libraries

Until now, adding AI Capabilities to your application, meant a Python app on the back-end that did the work, the browser using JavaScript, can request machine learning models to serve predictions and obtain answers for the user by calling endpoints API.

But things are changing now, with the increasing power of JavaScript engines, front-end developers can dial with these AI functions directly from the browser without the need for the back-end.

To start your JavaScript front-end application journey, we have picked a selection of GitHub repositories that provide pre-trained machine learning models and libraries, enabling you to integrate AI capabilities directly into your browser-based applications without requiring a back-end:

HuggingFace.js (88K stars)

HuggingFace has a huge open source machine learning model (150,000) that you can download and use freely from their website.

Some use cases of HuggingFace:

• Image classifications (2 690 models)

• Detection of objects in images (326 models)

• Question answering (4 086 models)

• Summarization of text(922 models)

• Text classification (14 727 models)

• Translation of languages (1 962 models)

• Analysis of sentiment

Surprisingly a lot of leaders of the tech industry are using models trained with HuggingFace : Google, Meta, Microsoft, Grammarly …

You can start using HaggingFace by first choosing the model, then call it using Hosted Inference APIs, which are simple API calls to the HaggingFace website, and guess what? It’s free (for developers).

Face-API.js (14.8k stars)

Face-API.js is a JavaScript API for face detection and face recognition in the browser, it’s implemented on top of the tensorflow.js core API.

Some use cases of Face-api:

• Face Detection ( SSD Mobilenet V1, Tiny Face Detector, MTCNN)

• Face Recognition (FaceNet, MobileNetV1)

• Facial Landmark Detection (FaceLandmark68Net, FaceLandmark68TinyNet, FaceLandmark68TinyNet)

Between “()” are trained models' names.

Exadel CompreFace (2.8k stars)

Exadel CompreFace is a free and open source application that you can run in a docker-compose image, locally or in the cloud.

It can run on the CPU or GPU, and has a built-in role management system to control the access to the service.

You can integrate it with any system without prior machine learning skills, by using Rest API calls.

You have API for:

• Face recognition

• Face verification

• Face detection

• Landmark detection

• Mask detection

• Head pose detection

• Age and gender recognition

Tracking.js (9.3k stars)

The tracking.js library brings computer vision algorithms and functionality into the browser, By using modern HTML5 specifications. All that by using a very small weight (~7 KB).

These algorithms can be used for features like:

• Facial detection

• Face recognition

• color tracking

Tracking.js uses “Viola-Jones algorithm” under the hood, and guess what? It's the same algorithm used by OpenCV to track different types of objects just by changing the training data that is used as an input.

jeelizWeboji (1k stars)

With jeelizWeboji, You can build your own animated emoticon embedded directly in your web application, using your GPU.

If your GPU is powerful, many emotions/seconds will be processed and the result will be smooth and accurate.

For better emotions detection:

• The face should be well enlighted: the nose, the eyes should be distinguishable,

• Avoid backlighting: The background should be a wall, not a window,

• The face should not be too far, neither too close to the camera: the face should ideally cover 1/3 of the camera height. It should be fully visible,

• The camera should be placed in front of the user. A side view is not recommended,

• Beards and moustaches can make mouth movement detection harder, and glasses can disturb eyes detection.

jeelizGlassesVTOWidget (221 stars)

Using jeelizGlassesVTOWidget and a few lines of code, you can revolutionise your eyewear shopping experience, in your e-commerce website or your mobile application.

Just by sitting at home, in front of the camera (of the mobile or the laptop), the consumer can try (virtually) your collection of eyewear, and if he/she is satisfied, he/she can go with the purchase process.

Live website:

jeelizFaceFilter(2.4k stars)

jeelizFaceFilter library detects and tracks the face in real time from the camera video. Then it is possible to overlay 3D content for augmented reality applications.

This library is lightweight and it does not include any 3D engine or third party library.

Here are the main features of the jeelizFaceFilter library:

• face detection,

• face tracking,

• face rotation detection,

• mouth opening detection,

• multiple faces detection and tracking

• very robust for all lighting conditions

• video acquisition with HD video ability

• mobile friendly

• interfaced with 3D engines like THREE.JS, BABYLON.JS, A-FRAME,

• interfaced with more accessible APIs like CANVAS, CSS3D.

Conclusion

As we witness the emergence of various libraries and the widespread adoption of JavaScript’s specific versions, I am thrilled about the future of web applications.

With just a few lines of code, you can create complex face detection and augmented reality applications, limited only by your imagination.

The possibilities are endless, and I can’t wait to see what the future holds.

Thanks for reading my article, I appreciate your time.