Introduction

When you export an image model from Custom Vision to TensorFlow.js, the hard part is usually not loading model.json. It is preprocessing the image exactly the way the exported model expects. If input size, normalization, or tensor shape is wrong, the model loads fine but predictions look meaningless.

What the Export Gives You

A TensorFlow.js export typically includes:

• 'model.json'
• one or more .bin weight shard files

Those files are enough to load the model in a browser or Node.js environment. In the browser, a normal setup looks like this:

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<img id="inputImage" src="cat.jpg" crossorigin="anonymous" />

And then:

const model = await tf.loadLayersModel("/model/model.json");

At that point the model is loaded, but you still need to feed it the correct input tensor.

Convert the Image into a Tensor

In browser code, tf.browser.fromPixels is the usual entry point.

1async function prepareImage(imgElement) {
2  return tf.tidy(() => {
3    let tensor = tf.browser.fromPixels(imgElement);
4    tensor = tf.image.resizeBilinear(tensor, [224, 224]);
5    tensor = tensor.toFloat().div(255.0);
6    tensor = tensor.expandDims(0);
7    return tensor;
8  });
9}

This produces a 4D tensor with shape similar to:

[1, 224, 224, 3]

That is the shape many exported image-classification models expect.

Match the Expected Input Exactly

The exact preprocessing depends on the exported model:

• input height and width
• channel count
• pixel normalization convention
• channel order

If the model was trained on 224 x 224 RGB images normalized to [0, 1], then the code above is appropriate. If it expects a different size or scaling rule, change the preprocessing to match the training/export pipeline exactly.

That is the most important debugging rule for TensorFlow.js image inference.

Run Prediction and Read the Output

Once the image tensor is ready, run prediction:

1const img = document.getElementById("inputImage");
2const input = await prepareImage(img);
3const output = model.predict(input);
4
5output.print();

If the model is a classifier, the output is usually a vector of scores or probabilities. You can turn it into regular JavaScript values like this:

1const scores = await output.data();
2console.log(Array.from(scores));
3
4input.dispose();
5output.dispose();

Then map those scores to class names using the label order that matches the exported model.

Be Careful with Labels

Many incorrect demos fail not because prediction is wrong, but because the labels are mapped in the wrong order. If the first output score corresponds to "cat" during training, your UI must preserve that same index mapping.

A simple example:

const labels = ["cat", "dog", "bird"];
const bestIndex = scores.indexOf(Math.max(...scores));
console.log(labels[bestIndex], scores[bestIndex]);

If the label order is wrong, the model appears broken even though the tensor math is fine.

Dispose Tensors in the Browser

TensorFlow.js runs in a memory-managed JavaScript environment, but tensors themselves are not automatically cleaned up immediately. If you repeatedly classify images, dispose intermediate tensors or use tf.tidy.

That matters in long-running browser sessions because memory leaks can accumulate surprisingly fast when every prediction allocates new tensors.

Common Pitfalls

• Loading the model successfully but resizing the image to the wrong input shape.
• Forgetting normalization or using the wrong normalization rule.
• Feeding a 3D image tensor when the model expects a 4D batched tensor.
• Mapping output scores to labels in the wrong order.
• Forgetting to dispose tensors during repeated predictions in the browser.

Summary

• A Custom Vision TensorFlow.js export is usually loaded with tf.loadLayersModel.
• The crucial step is turning the image into the exact tensor shape and scale the model expects.
• 'fromPixels, resize, normalize, and expandDims are the standard browser preprocessing steps.'
• Prediction output is only meaningful if label order matches the model's training/export order.
• Use tf.tidy or explicit disposal to avoid leaking browser-side tensor memory.