Image Recognition(Webworker).imjoy.html

<docs lang="markdown">
This plugin allows to perform image processing with a pretrained MobileNet image classifier built with Tensorflow.js.

This plugin is ported from: [mobilenet example for Tensorflow.js](https://github.com/tensorflow/tfjs-models/tree/master/mobilenet).
</docs>

<config lang="json">
{
  "name": "Image Recognition(Webworker)",
  "type": "web-worker",
  "tags": [],
  "ui": "A pretrained MobileNet image classifier built with Tensorflow.js",
  "version": "0.1.6",
  "api_version": "0.1.5",
  "description": "A pretrained MobileNet image classifier built with Tensorflow.js",
  "icon": "extension",
  "inputs": null,
  "outputs": null,
  "env": "",
  "requirements": [
    "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs",
    "https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"

  ],
  "dependencies": []
}
</config>

<script lang="javascript">
class ImJoyPlugin {
  async setup() {
    this.model = await mobilenet.load();
    console.log(this.model)
    console.log('Using tensorflow backend: ', tf.getBackend())
  }

  async run(my) {
    const blob = await fetch('https://static.imjoy.io/img/cat.jpg').then(r => r.blob());
    const img = await createImageBitmap(blob);
    var offscreen = new OffscreenCanvas(img.height, img.width);
    var ctx = offscreen.getContext('2d'); 
    ctx.drawImage(img,0,0);
    // Classify the image.
    console.time('model')
    const predictions = await this.model.classify(offscreen)
    console.timeEnd('model')

    // Output result in console
    console.log('Predictions', predictions);

    // Output results as ImJoy alert
    const result_string =  `Predictions: Top-1 ${predictions[0].className} (${Math.round(predictions[0].probability*100)}%); Top-2 ${predictions[1].className} (${Math.round(predictions[1].probability*100)}%);`;
    api.alert(result_string)
  }
}

api.export(new ImJoyPlugin())
</script>