Fix imageClassifier webgpu bug + add teachable machine image example

[ziyuan-linn]

This PR changes dataSync to data in the classifyInternal method in order to support webgpu backend. setBackend("webgl") is no longer needed. The end user API is not affected by this change.

This PR also adds a teachable machine image example as requested by @QuinnHe in ml5js/ml5-website-v02-docsify/issues/96. The only things I changed are removing setBackend("webgl") line and changing the color of the text for better visibility. This example should be live on the web editor once we merge this PR and run the p5 upload script.

[shiffman]

This looks great! Picking up from #128, since Teachable Machine flips the webcam image during training let's include the flipped property in the example. Would you like to add this in before merging @ziyuan-linn? @sharellb you can use this as a model for the other examples if you want to work on those!

[QuinnHe]

Thanks Peter! This is awesome!

[ziyuan-linn]

@shiffman @sharellb I included the flipped property for this example. For this example, only the p5 video had to be flipped. ImageClassifer doesn't deal with landmark points, so it does not need a flipped property. For a landmark model like handPose, just also add the flipped: true to its options object, and the landmark points should be flipped.

[shiffman]

@shiffman @sharellb I included the flipped property for this example. For this example, only the p5 video had to be flipped. ImageClassifer doesn't deal with landmark points, so it does not need a flipped property. For a landmark model like handPose, just also add the flipped: true to its options object, and the landmark points should be flipped.

Ah, I see! If the p5.js flipped property is enabled, is the mirrored image actually passed to the model? Or would adding the flipped property additionally in ml5 enable that? While it will likely work regardless it would be good to be consistent in terms of what is visually displayed and what the model sees. The TM model will likely have been trained with flipped images so it may also be a bit more accurate by passing in flipped images.

[MOQN]

If the p5.js flipped property is enabled, is the mirrored image actually passed to the model?

The original image is passed to the model.

[ziyuan-linn]

@shiffman I did some quick testing and I think teachable machine actually trains on the original unmirrored webcam footage as well.

I trained a model with mirror camera enabled on teachable machine.

The same model loaded in to ml5 correctly classifies the underlying unmirrored video.

We probably don't have to change anything.

[shiffman]

Oh, fantastic, thank you the thorough testing! Merging!