Search code examples
jsontensorflowmachine-learningweb-applicationstensorflow.js

How do I run my model.json file on the web to test predictions?

I have my Tensorflow.js file model.json with the bin files in the folder and have created a html file, inside the html file I want to test my prediction and get feedback but when I run it on the server it isn't working, any ideas?

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
<script>
    async function run(){
        const MODEL_URL = 'http://127.0.0.1:8887/model.json';
        const model = await tf.loadLayersModel(MODEL_URL);
        console.log(model.summary());
        const result = model.predict(input);
        alert(result);
    }
    run();
</script>
<body>
</body>
</head>

In devtools here is what it says:

DevTools failed to load SourceMap: Could not load content for https://cdn.jsdelivr.net/npm/@tensorflow/tf.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

It also says improper config format:

tfjs@latest:17 Uncaught (in promise) Error: layer: Improper config format: {"node":[{"name":"eedde323-f0a1-4978-8c57-3ae553bfb873/tf_op_layer_3ff186c1-fe28-4442-abe1-44f7ed005781/19c66cd4-e1d6-49f4-80ab-3aa348c5b264/ff9b2ff4-4799-495e-8e91-a6fed91e9315/GatherV2/3ff186c1-fe28-4442-abe1-44f7ed005781/19c66cd4-e1d6-49f4-80ab-3aa348c5b264/ff9b2ff4-4799-495e-8e91-a6fed91e9315/GatherV2/params","op":"Const","attr":{"value":{"tensor":{"dtype":"DTSTRING","tensorShape":{"dim":[{"size":"2"}]}}},"dtype":{"type":"DTSTRING"}}},{"name":"conv5_block1_0_conv/kernel","op":"Const","attr":{"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"1"},{"size":"1"},{"size":"1024"},{"size":"2048"}]}}},"dtype":{"type":"DTFLOAT"}}},{"name":"conv5_block1_0_conv/bias","op":"Const","attr":{"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"2048"}]}}},"dtype":{"type":"DTFLOAT"}}},{"name":"conv4_block1_0_conv/kernel","op":"Const","attr":{"dtype":{"type":"DTFLOAT"},"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"1"},{"size":"1"},{"size":"512"},{"size":"1024"}]}}}}},{"name":"conv4_block1_0_conv/bias","op":"Const","attr":{"dtype":{"type":"DTFLOAT"},"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"1024"}]}}}}},{"name":"conv3_block1_0_conv/kernel","op":"Const","attr":{"dtype":{"type":"DTFLOAT"},"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"1"},{"size":"1"},{"size":"256"},{"size":"512"}]}}}}},{"name":"conv3_block1_0_conv/bias","op":"Const","attr":{"dtype":{"type":"DTFLOAT"},"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"512"}]}}}}},{"name":"conv2_block1_0_conv/kernel","op":"Const","attr":{"dtype":{"type":"DTFLOAT"},"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"1"},{"size":"1"},{"size":"64"},{"size":"256"}]}}}}},{"name":"conv2_block1_0_conv/bias","op":"Const","attr":{"dtype":{"type":"DTFLOAT"},"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"256"}]}}}}},{"name":"Image","op":"Placeholder","attr":{"dtype":{"type":"DTFLOAT"},"shape":{"shape":{"dim":[{"size":"-1"},{"size":"224"},{"size":"224"},{"size":"3"}]}}}},{"name":"saved_resnet_50_model/tf_op_layer_Mul/Mul/y","op":"Const","attr":{"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{}}},"dtype":{"type":"DTFLOAT"}}},{"name":"saved_resnet_50_model/tf_op_layer_Sub/Sub/y","op":"Const","attr":{"dtype":{"type":"DTFLOAT"},"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{}}}}},{"name":"saved_resnet_50_model/resnet50v2/conv1_pad/Pad/paddings","op":"Const","attr":{"value":{"tensor":{"dtype":"DTINT32","tensorShape":{"dim":[{"size":"4"},{"size":"2"}]}}},"dtype":{"type":"DTINT32"}}},{"name":"conv1_conv/kernel","op":"Const","attr":{"dtype":{"type":"DTFLOAT"},"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"7"},{"size":"7"},{"size":"3"},{"size":"64"}]}}}}},{"name":"conv1_conv/bias","op":"Const","attr":{"dtype":{"type":"DTFLOAT"},"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"64"}]}}}}},{"name":"saved_resnet_50_model/resnet50v2/pool1_pad/Pad/paddings","op":"Const","attr":{"value":{"tensor":{"dtype":"DTINT32","tensorShape":{"dim":[{"size":"4"},{"size":"2"}]}}},"dtype":{"type":"DTINT32"}}},{"name":"saved_resnet_50_model/resnet50v2/conv2_block1_2_pad/Pad/paddings","op":"Const","attr":{"dtype":{"type":"DTINT32"},"value":{"tensor":{"dtype":"DTINT32","tensorShape":{"dim":[{"size":"4"},{"size":"2"}]}}}}},{"name":"conv2_block1_3_conv/kernel","op":"Const","attr":{"dtype":{"type":"DTFLOAT"},"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"1"},{"size":"1"},{"size":"64"},{"size":"256"}]}}}}},{"name":"conv2_block1_3_conv/bias","op":"Const","attr":{"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"256"}]}}},"dtype":{"type":"DTFLOAT"}}},{"name":"saved_resnet_50_model/resnet50v2/conv2_block2_2_pad/Pad/paddings","op":"Const","attr":{"dtype":{"type":"DTINT32"},"value":{"tensor":{"dtype":"DTINT32","tensorShape":{"dim":[{"size":"4"},{"size":"2"}]}}}}},{"name":"conv2_block2_3_conv/kernel","op":"Const","attr":{"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"1"},{"size":"1"},{"size":"64"},{"size":"256"}]}}},"dtype":{"type":"DTFLOAT"}}},{"name":"conv2_block2_3_conv/bias","op":"Const","attr":{"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"256"}]}}},"dtype":{"type":"DTFLOAT"}}},{"name":"saved_resnet_50_model/resnet50v2/conv2_block3_2_pad/Pad/paddings","op":"Const","attr":{"value":{"tensor":{"dtype":"DTINT32","tensorShape":{"dim":[{"size":"4"},{"size":"2"}]}}},"dtype":{"type":"DTINT32"}}},{"name":"conv2_block3_3_conv/kernel","op":"Const","attr":{"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"1"},{"size":"1"},{"size":"64"},{"size":"256"}]}}},"dtype":{"type":"DTFLOAT"}}},{"name":"conv2_block3_3_conv/bias","op":"Const","attr":{"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{"dim":[{"size":"256"}]}}},"dtype":{"type":"DTFLOAT"}}},{"name":"saved_resnet_50_model/resnet50v2/conv3_block1_2_patfjs@latest:17)
    at tA (tfjs@latest:17)
    at tfjs@latest:17
    at u (tfjs@latest:17)
    at Generator._invoke (tfjs@latest:17)
    at Generator.forEach.e.<computed> [as next] (tfjs@latest:17)
    at Um (tfjs@latest:17)
    at o (tfjs@latest:17)
Jm @ tfjs@latest:17
r @ tfjs@latest:17
t @ tfjs@latest:17
eE @ tfjs@latest:17
tA @ tfjs@latest:17
(anonymous) @ tfjs@latest:17
u @ tfjs@latest:17
(anonymous) @ tfjs@latest:17
forEach.e.<computed> @ tfjs@latest:17
Um @ tfjs@latest:17
o @ tfjs@latest:17
Solution

  • I could avoid the error with the model by following these steps:

    1. saving the tensorflow model with .h5 format:

      model.save('sampleModel.h5')

    2. converting the .h5 file for use in tensorflow.js as tfjs_graph_model:

      tensorflowjs_converter --input_format keras --output_format tfjs_graph_model sampleModel.h5 sampleModel

    3. using loadGraphModel() instead of loadLayerModel() for loading the model:

      <html>
<head><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.1.0/dist/tf.min.js"></script></head>
<body><script>tf.loadGraphModel('sampleModel/model.json')</script></body>
</html>

    For more information, look at here

    To avoid the error with importing tensorflow.js library, use this link: "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs" instead of this one: "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest".