Tsjs-tflite wasm does not work on codepen

Special Interest Groups TF.js
, ,
#1

I am trying to get a tfjs-tflite demo from here

to get it to work on codepen here

The goal is to cartoonise the image on the top row and generate its corresponding cartoon via GAN on the second row.

For some reason, it does not seem to produce a result :frowning: However when I do yarn it works fine.

Any clue as to why this is would be greatly appreciated (I am a JS newbie).

#3

I guess @Jason might be able to help here

#4

So first of all you are using:

      .resizeBilinear(tf.browser.fromPixels(document.querySelector("img4")[0]), [
        224,
        224
      ], true)

Here you are using document.querySelector when you should be using document.getElementById as img4 is an id. Currently you are not sending any pixels to tf.browser.fromPixels.

Secondly, once you fix that, the images you are using are not hosted correctly for CORS Access. You will then see you will get a canvas tainted issue which you need to fix by using CORS on the server/CDN that hosts the images to allow access from other domains. Glitch.com offers a CDN for free that actually sets the headers correctly and then on your tag you just need to set the crossorigin attribute to force it to use that.

See my glitch demo here for object detection for the index.html page that uses an image:

Then it should have a chance to work!

PS for more information on CORS see my reply here:
https://tensorflow-prod.ospodiscourse.com/t/use-custom-model-with-tfjs-tflite-cors-issue/4985

1 Like