Teachable Machine Image only works with `webgl` back end (1.2.1)

[shiffman]

Issue Type

Broken API/Method

ml5.js Version

1.2.1

Development Environment

p5.js web editor

Browser & Operating System

Chrome

Issue Description

The Teachable Machine examples no longer work. This was introduced in 1.2.1. They work, however, if you force ml5.setBackend('webgl'). Something seems to be wrong with using webpgu and the teachable machine models? I discovered this in office hours and haven't had the time to investigate deeply.

I've manually made the fix in this example. https://editor.p5js.org/ml5/sketches/VvGXajA36

cc @ziyuan-linn

Minimal Reproducible Example

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[shiffman]

While investigating something else I discovered that the issue is not incompatibility but rather that tensorflow.js requires waiting for the backend to be ready (via tf.ready()) for starting the sketch. This can be achieved with an async call in setup(), e.g.:

async function setup() {
  await ml5.tf.ready();
  console.log("TensorFlow.js backend:", ml5.tf.getBackend());
  // rest of the code....

@pearmini @gohai maybe this is something we want to address behind the scenes and possibly relates to the p5.js 2.0 integration? I believe this also applies to #117, I tested my neural network example as well.

• TM: https://editor.p5js.org/codingtrain/sketches/yYLocYdwL
• ml5.neuralNetwork(): https://editor.p5js.org/codingtrain/sketches/97nF3q1tA

[shiffman]

Addendum! I forgot about this PR from @ziyuan-linn #138 which addresses the issue but we didn't merge due to to incompatibility with some sync calls from my neuroevoluation examples. I believe the fix should work for the image classifier without any problem though. . this is not super high priority, we can discuss!