Introduction

Running YOLOv5 in TensorFlow.js lets you perform object detection directly in the browser, which is useful for demos, privacy-sensitive apps, and low-latency client-side inference. The main challenge is that YOLOv5 is trained in PyTorch, while TensorFlow.js expects a TensorFlow model format, so you need a conversion pipeline that preserves both the network and the surrounding preprocessing assumptions.

Convert the Model Through a TensorFlow Format

The safest path is usually:

1. export the YOLOv5 weights to a TensorFlow SavedModel
2. convert the SavedModel into a TensorFlow.js graph model

If you are using the YOLOv5 repository, the export script can produce TensorFlow artifacts directly.

1git clone https://github.com/ultralytics/yolov5.git
2cd yolov5
3python -m venv .venv
4source .venv/bin/activate
5pip install -r requirements.txt
6
7python export.py --weights yolov5s.pt --include saved_model

That creates a SavedModel directory. From there, use the TensorFlow.js converter:

1pip install tensorflowjs
2
3tensorflowjs_converter \
4  --input_format=tf_saved_model \
5  --output_format=tfjs_graph_model \
6  yolov5s_saved_model \
7  web_model

The output folder contains model.json plus binary shard files. Those are the files your web app will load.

Load the Converted Model in the Browser

TensorFlow.js loads converted detection models with loadGraphModel.

1<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
2<script>
3  async function main() {
4    const model = await tf.loadGraphModel("/web_model/model.json");
5    console.log(model.inputs);
6    console.log(model.outputs);
7  }
8
9  main();
10</script>

At this point, the model is loaded, but detection still depends on correct input preprocessing and output decoding.

Match YOLOv5 Preprocessing and Postprocessing

Conversion succeeds only if inference code matches what the model expects. YOLOv5 typically expects image resizing, normalization, and a channel order consistent with the exported graph.

Here is a minimal TensorFlow.js preprocessing example:

1async function preprocess(imageElement) {
2  return tf.tidy(() => {
3    const image = tf.browser.fromPixels(imageElement).toFloat();
4    const resized = tf.image.resizeBilinear(image, [640, 640]);
5    const normalized = resized.div(255.0);
6    const batched = normalized.expandDims(0);
7    return batched;
8  });
9}
10
11async function runDetection(model, imageElement) {
12  const input = await preprocess(imageElement);
13  const output = await model.executeAsync(input);
14  console.log(output);
15  tf.dispose([input, output]);
16}

You will still need postprocessing to turn raw predictions into boxes, classes, and scores. In browser deployments, that often means confidence filtering plus non-maximum suppression. If the exported graph does not include postprocessing, do it in JavaScript.

Keep an Eye on Model Size and Browser Limits

YOLOv5 models can be large, and browser inference is sensitive to device memory, WebGL support, and startup time. Smaller checkpoints such as yolov5n or yolov5s are often much better suited for web deployment than larger variants.

You should also test:

• first-load latency over real network conditions
• inference speed on low-end mobile hardware
• whether the converter emitted unsupported ops
• whether your exported output shape matches the decoding code

If the browser version becomes too heavy, an alternative is to keep detection on the server and use the browser only for visualization.

Common Pitfalls

• Assuming conversion alone is enough. Wrong preprocessing or missing postprocessing can make a valid model look broken.
• Using a YOLOv5 export path that your repository version does not support. Check the export options in the exact version you are using.
• Choosing a model that is too large for browser execution. A successful conversion does not guarantee usable runtime performance.
• Forgetting to dispose tensors in TensorFlow.js. Long-running pages can leak memory quickly during repeated inference.

Summary

• Convert YOLOv5 to a TensorFlow format first, then to a TensorFlow.js graph model.
• Load the result with tf.loadGraphModel in the browser.
• Match the original preprocessing and implement postprocessing if the graph does not include it.
• Prefer smaller YOLOv5 variants for client-side deployment.
• Validate both conversion correctness and real-world browser performance.