如何在网络上运行我的 model.json 文件来测试预测？答案

【问题标题】：How do I run my model.json file on the web to test predictions?如何在网络上运行我的 model.json 文件来测试预测？
【发布时间】：2020-11-20 14:18:52
【问题描述】：

我有我的 Tensorflow.js 文件 model.json 和文件夹中的 bin 文件，并创建了一个 html 文件，在 html 文件中我想测试我的预测并获得反馈，但是当我在服务器上运行它时它是不工作，有什么想法吗？

<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>

在 devtools 中是这样写的：

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

它还说不正确的配置格式：

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

【问题讨论】：

标签： json tensorflow machine-learning web-applications tensorflow.js

【解决方案1】：

我可以通过以下步骤避免模型出现错误：

以.h5 格式保存张量流模型：
```
model.save('sampleModel.h5')
```

将.h5 文件转换为tfjs_graph_model 以在tensorflow.js 中使用：

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

使用loadGraphModel() 而不是loadLayerModel() 来加载模型：

<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>

更多信息，请查看here

为避免导入 tensorflow.js 库时出错，请使用此链接："https://cdn.jsdelivr.net/npm/@tensorflow/tfjs" 而不是此链接："https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"。

【讨论】：