Anyone got 'wasm' tensorflow backend working?

[danbri]

Per https://blog.tensorflow.org/2020/03/introducing-webassembly-backend-for-tensorflow-js.html and https://blog.tensorflow.org/2020/09/supercharging-tensorflowjs-webassembly.html it sounds like merely switching the tensorflow backend to 'wasm' could result in a nice speedup.

I've tried updating to a more recent TF.js but didn't figure out the invocations to run from WASM yet. Will share if I get it running.

[danbri]

My attempts were variations on this them:

Load these in the .html:
1.)

   <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.8.6/dist/tf.js"></script>
    <!-- Adds the WASM backend to the global backend registry -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm/dist/tf-backend-wasm.js"></script>

2.) remove the tf.setBackend('cpu') line, https://github.com/CodingTrain/NeuroEvolution-Vehicles/blob/master/sketch.js#L79

3.) make a mess in sketch.js trying to use async/await/promises to hang out until WASM is fetched and tf is ready.

So something like,

function preload() {
  console.log("doing wasm.");
  goWASM();
  console.log("done wasm.");
}

async function goWASM() { 
  console.log("about to await tf.setBackend to WASM.");
  await tf.ready();
  await tf.setBackend('wasm').then(() => main_after_wasm());//
  console.log("Done waiting and callbacking for backend WASM.");      
}
function main_after_wasm() {
  console.log("main_after_wasm called after tf.js WASM backend set. Backend in TF is: ", tf.getBackend() );
}

function setup() {
  console.log("Setup time."); 
  createCanvas(1200, 800);

//  tf.setBackend('cpu');
  buildTrack();
//...etc

This complains into console ("Uncaught Error: Backend 'wasm' has not yet been initialized. Make sure to await tf.ready() or await tf.setBackend() before calling other methods"), but tf.getBackend() seems to show "wasm", even if we don't get past the errors to run the P5 sketch.

[gruselhaus]

@danbri which version of p5 do you use?

[danbri]

Literally what's in this repo, so

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>

A friend just suggested the answer is:

async function setup() {
await tf.ready();
...

and

async function draw() {
await tf.ready();

... taking a look at that now

[gruselhaus]

Yeah, that could work!

[danbri]

Yup, that did it - though also needs the setBackend() call:

async function setup() {

  await tf.ready();
  await tf.setBackend('wasm').then(() => main_after_wasm());//

What would a sensible way to benchmark/compare these be?