Three lines of code to implement a computer vision application using Tensorflow.js

Let’s see an easy way to implement a computer vision application using tensorflow.js!!!

Introduction

What is TensorFlow.js?

What is the Tensorflow.js model?

Blazeface Model Demo

Demo

Demonstration

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>

TensorFlow.js Core, flexible low-level API for neural networks and numerical computation.

TensorFlow.js Converter, tools to import a TensorFlow SavedModel to TensorFlow.js.

The blazeface package finds facial boundaries and landmarks within an image.

<video width=640 height=480 autoplay muted id=”camera”></video>
<canvas width=640 height=480 id=”augmented_canvas”></canvas>
<video autoplay loop id=”movie” style=”visibility: hidden”>
<source src=”TensorFlowjs.mp4" type=”video/mp4"></source>
</video>
//load camera stream
const frame = document.getElementById("camera");
//load movie stream
const movie = document.getElementById("movie");
movie.play();
//prepare canvas
const canvas = document.getElementById("augmented_canvas");
const draw = canvas.getContext("2d");
const result = await model.estimateFaces(frame, false);
//copy camera stream to canvas
draw.drawImage(frame, 0, 0, 640, 480);
//check if face is detected
if(result.length > 0)
{
for (let i = 0; i < result.length; i++) {
const start = result[i].topLeft;
const end = result[i].bottomRight;
const size = [end[0] — start[0], end[1] — start[1]];
//Render a rectangle over each detected face.
draw.drawImage(movie, start[0], start[1], size[0], size[1]);
}

}

Conclusion

(Source: https://miro.medium.com/max/1400/1*F-1fq9TNjDnAYPAXnZP4Ww.png)

Happy Learning to all!! if you need any help or assistance please connect with me LinkedIn and Twitter.

I have a passion for understanding technology at a fundamental level and Sharing ideas and code. * Aspire to Inspire before I expire* https://balavenkatesh.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store