How to implement h5 model into a web application

I have trained a .h5 model from python , i found the ways to implement it to android , you literally put the model into the resource folder and import some library to call it .

But I can’t find anyway to implement .h5 model into web application . It seems that all tutorials are teaching how to train it in javascript and use it on javascript . But none of them tells people how to implement .h5 into web application .

Do you mean on the server side/backend?

you can use the tensorflowjs_converter especially for that task.

Tipp: Try ServiceWorkers for your WebApp (PWA), they give the opportunity to preload models in the background and use them offline too …

Answer on any possible ways would be appreciated . But server side/backend implementation would be a plus since I expect it can use the server calculation power instead of the client frontend calculation power .

Thanks for the advice about the converter . It works very well for me . I converted the h5 model and got myself those Json files too .

But now I have have no clue how to implement it , like how to call and use the method on the web … what will be the function name . It would be awesome if you can give me further knowledge or examples on this objective .

I have google myself for the answer , and I find most of the examples revolves around using python to print the web .

This sounds very strange to me , I only have the experience on NodeJS (haven’t touch it for a year already though ) and on hands AJAX for web , building web with python is frontier for me , at best I wish I can use the tools I already learnt , it would be grateful if there are examples on implementing model into AJAX that I haven’t know yet .

Looking forwards for your reply , many thanks .

Simply upload all converted files (.json and .bin) in the same directory on your webserver.


In Step 2: Load the model and make a test prediction (clientside)

const modelUrl = 'path/to/model/model.json';
const model = await tf.loadGraphModel(modelUrl); 
const zeros = tf.zeros([1, 224, 224, 3]);         //change to your original model input data dim

API Doc,
Step2: Loading and running in Webbrowser

1 Like

For the server side you can use:

Or you can try to explore:

1 Like