Pose Detection in the Browser: PoseNet Model Using TensorFlow.js
Vrijraj Singh
![Vrijraj Singh]()
Vrijraj Singh
CTO | SaaS Developer | Google Developers Expert for Firebase & ML (GenAI)
TensorFlow.js, an open-source library you can use to define, train, and run machine learning models entirely in the browser, using Javascript and a high-level layers API. If you're a Javascript developer who's new to ML, TensorFlow.js is a great way to begin learning.
PoseNet can be used to estimate either a single pose or multiple poses, meaning there is a version of the algorithm that can detect only one person in an image/video and one version that can detect multiple persons in an image/video.
Here are the Docs for PoseNet; https://github.com/tensorflow/tfjs-models/tree/master/posenet
Installation
You can use CDN for TensorFlow.js and PoseNet.js:
<!-- Load TensorFlow.js -->
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf.min.js"></script>
<!-- Load Posenet -->
<script src="https://unpkg.com/@tensorflow-models/[email protected]/dist/posenet.min.js"></script>
Simple Code for Demo
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://unpkg.com/@tensorflow-models/posenet"></script>
</head>
<body>
<img id='cat' src='dog.jpg '/>
</body>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
var imageScaleFactor = 0.5;
var outputStride = 16;
var flipHorizontal = false;
var imageElement = document.getElementById('cat');
posenet.load().then(function(net){
return net.estimateSinglePose(imageElement, imageScaleFactor, flipHorizontal, outputStride)
}).then(function(pose){
console.log(pose);
})
</script>
</html>