I had a UNet model which I trained using Python. I saved the complete model as Model.h5 file.
According to tensorflow JS documentations - How to import a keras model I converted the model using the tensorflowjs_converter tool. Now I have a Model.json and bunch of shard files.
My question is, How do I use this model in a Javascript File to perform segmentation on Image?
I managed to load the model and print the model summary in the console, here's the code I used for that:
async function app() {
model = await tf.loadLayersModel(MODEL_JSON_PATH);
model.summary();
}
This is the model summary from browser console:
Layer (type) Output shape Param # Receives inputs
==================================================================================================
input_1 (InputLayer) [null,1024,1024,3] 0
conv1_pad (ZeroPadding2D) [null,1026,1026,3] 0 input_1[0][0]
conv1 (Conv2D) [null,512,512,32] 864 conv1_pad[0][0]
.... <Many more layers here> ....
Total params: 6315522
Trainable params: 6298882
Non-trainable params: 16640
So the model seems to be loaded perfectly.
Now say I have an Image on my webpage in an img tag. How do I pass that Image to my model, and receive the output? I've seen tf.browser.fromPixels but not sure how to proceed.
Any help / pointers to such examples will be helpful.
HTH:
const img = document.getElementById(elementID);
const tensor = tf.browser.fromPixels(img); // creates tensor from image element
const model = await tf.loadLayersModel(MODEL_JSON_PATH); // load your model
const res = model.predict(tensor); // or model.execute(tensor) // run model
tf.dispose(tensor); // dispose input tensor
const data = await res.arraySync(); // download results from tensor into standard array
tf.dispose(res); // dispose results tensor
console.log(data);
UPDATED
Error when checking : expected input_1 to have shape [null,1024,1024,3] but got array with shape [512,512,3]
const resized = tf.resizeBilinear(tensor, [1024, 1024]);
const expanded = tf.expandDims(resized, 0);
...