How to Convert Yolov5 model to tensorflow.js

Yolov5 is a convolutional neural network that was developed by Google. It is the latest generation of the YOLO family of object detection algorithms.

Tensorflow.js is an open-source library for machine intelligence that allows developers to run machine learning models in the browser and on Node.js, or in a JavaScript engine like V8 or ChakraCore.

This article will help you convert the YOLOV5 model to tensorflow.js and use it with your web application.

How to Convert Yolov5 model to tensorflow.js

Solution 1:

Make a TensorFlow model first in google Colab or another environment, train it, and then convert to tensorflow.js model.

!pip install tensorflowjs

import tensorflowjs as tfjs

async function loadModel() {
model = undefined;
model = await tf.loadLayerModel("https://raw.githubusercontent.com/<user name>/<repository>/<branch_name>/model.json"); //you can use your model.json path here
console.log("model loaded");
}
loadModel();

Then import tensorflowjs as tfjs

tfjs.converters.save_keras_model(model, 'models')

After training, convert your model using tensorflowjs converter. Which gives you these two files below.

Load your model in index.html with a script or in an external js file.

Then make an input tensor like the below template(you have to customize your input tensor as your need)

Then predict your result using the model.predict(input_tensor)

function make_prediction() { 
var a, b, output; 
a = Number(document.getElementById("first").value); 
b = Number(document.getElementById("second").value);
input_xs = tf.tensor2d([[a, b] ]);
output = model.predict(input_xs);
const outputData = output.dataSync();
 document.getElementById("answer").value = Number(outputData[0] > 0.5);
}

Solution 2:

You can check - https://github.com/zldrobit/tfjs-yolov5-example

Inside the YoloV5 repo, run the export.py command.

python export.py --weights yolov5s.pt --include tfjs

Then cd into the above linked repo and copy the weights folder to the public:

cp ./yolov5s_web_model public/web_model

Don't forget, you'll have to change the names array in src/index.js to match your custom model.

But unfortunately, it seems painfully slow at about 1-2 seconds. I don't think I was able to get WebGL working.

Solution 3:

With few interim steps, but most of the times it works:

1. Export PyTorch to ONNX
2. Convert ONNX to TF Saved Model
3. Convert TF Saved Model to TFJS Graph Model

When converting from ONNX to TF, you might need to adjust target version if you run into unsupported ops.

Also, make sure to set input resolutions to a fixed values, any dynamic inputs get messed up in this multi-step conversion.

Thank you for reading the article. If you face any problem please comment below.