AutoMl Edge Model Showing Only Image

Question

So I am new to ml and working on automl, it is showing prediction online a lot better but the problem is that I need an offline solution, so I am deploying the model on edge Tensorflow once I trained the model and download it offline. I got a label txt file, 3 bin files and 1 model file which is JSON file format.

I did read this Google Edge Vision but I still can't seem to get my model working, as this link show we have to make an index.html file I did copy-paste the same code and made an Html file but I don't want to load image from google storage, so I gave the path of an image in the same folder as the index.html file and remove the cross-origin but still, it is just showing the image not the probability of detecting the image or anything like that, and yes I did open Http.server 8080 with python so no problem with that

<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>
<img id="detect" src="1.png">

<script>

async function run() {
const model = await tf.automl.loadImageClassification('model.json');
  const image = document.getElementById('detect');
  const predictions = await model.classify(image);
  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>

Can anyone help me out what should I do I have already searched many internet forums but can't find the answers

Victor Cid · Answer 1 · 2020-02-05T08:53:15.357

I could check the predictions locally following the official documentation. There might be some miss-configurations on the JS code or the on files. I think I modified some files but I don't remember which one so I will list all the relevant code I end up with on my working version so you can compare it. Browser and Javascript console would be worth checking also (View > Developer > JavaScript console in Chrome). My working quickstart Tensorflow.js working predictions are running on Chrome.

dict.txt

sunflowers
tulips
dandelion
roses
daisy

image.jpeg
binaryfile.bin
index.html

<head>
</head>
<body>
    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
    <script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>
    <img id="daisy" crossorigin="anonymous" src="./download.jpeg">
    <script>
    async function run() {
        const model = await tf.automl.loadImageClassification('model.json');
        const image = document.getElementById('daisy');
        const predictions = await model.classify(image);
        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>

Note that I am placing the script tags in the body since you want the predictions to show up in page content like in the tutorial.

model.json

AutoMl Edge Model Showing Only Image

1 Answers1