I trained a custom object detection model using Google Cloud AutoML and exported the model as a TensorflowJS package. However, when I try running the model using the HTML deployment example they have here https://cloud.google.com/vision/automl/object-detection/docs/tensorflow-js-tutorial?hl=en_US, it does not seem to work.
My tensorflowjs package from the export (model.json, dict.txt, group1-shard1of3,group1-shard2of3, group1-shard3of3) are in the same directory as the index.html. I also have an index2.html. In index.html I use the same imports for tfjs and tfjs-automl as the example here. In the index2.html I use CDN sources for tfjs and tfjs-automl.
The create web app example I followed is : https://github.com/tensorflow/tfjs/blob/master/tfjs-automl/code_snippets/object_detection.html
My repo with my custom object detection model is: https://github.com/mmmwembe/automl-tensorflowjs.git including the tensorflowjs model package and the test-images.
My Index.html file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards AutoML Model - TensorflowJS</title>
</head>
<body>
<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>
<img id="test-image" src="test-images/test-image-01.jpg">
<script>
async function run() {
const model = await tf.automl.loadObjectDetection('model.json');
const img = document.getElementById('test-image');
const options = {score: 0.5, iou: 0.5, topk: 20};
const predictions = await model.detect(img, options);
// [END load_and_run_model]
console.log(predictions);
// Show the resulting object on the page.
const pre = document.createElement('pre');
pre.textContent = JSON.stringify(predictions, null, 2);
document.body.append(pre);
}
run();
</script>
</body>
</html>
What am I missing here?...I've run this with Chrome browser using Live Server in vscode editor as well as with nodejs using http-server -p 8000
