PJ029: "Teachable Machine" Export and Use Model with Tensorflow.js

To be added

START A BIT > Projects Library > This page

This is a draft page with quick working instructions for the learning in class, will be refined later

Teachable Machine

Export and use the model

Export model to cloud

Test 1: Local html with Javascript

Test 2: web app editor with p5.js, with a fix for ml5.js version compatability

Teachable Machine

https://teachablemachine.withgoogle.com/

Export and use the model

Export model to cloud

After upaloding the model, you will get a link, for example:

https://teachablemachine.withgoogle.com/models/PP8Vu0cYP/

Inspect what the ”model” is, Just open that link, you will see:

Clicking the file name, you can even download them to have a look

Conclusion:

The so-called “model” is actually just 3 data files! It marks how the neural network is like to classify your classes, it’s mathematical data.

The “cloud” serves as a file server for those files, so you access them easily, it’s no difference than downloading them to your local laptop.

Test 1: Local html with Javascript

Directly copy the example code from the export page for Javascript

Create a file in your laptop, name it anything like test.html, then paste the code to it, using a plain text editor or code editor, like Notepad++, VS Code.

Open this test.html in web browser, allow using camera, then the model is tested directly.

We can reveal that the Javascript code is running behind the web page

Test 2: web app editor with p5.js, with a fix for ml5.js version compatability

What is p5.js and ml5.js?

p5.js is a JavaScript library for creative coding.
It makes it easy to draw graphics, use sound, handle video, and interact with the webcam or mouse — all directly in your web browser.
ml5.js is a machine learning library built on top of TensorFlow.js,

Then you get a web app development environment directly, with 2 source files:

index.html
sketch.js

Those files together makes no much difference from what we tested in Test 1 with JavaScript in test.html.

Now, update line 15 for the model link, and click “play sketch” to test, we should expect it working, but it’s not…

Use AI tool to troubleshoot, here is a tested prompt in chatGPT:

Need help to use Teachable Machine in p5.js I directly get the link in Teachable Machine after exporting the model to cloud, then follow the link in Teachable Machine export page, to open the code snippet in p5.js web editor https://editor.p5js.org/ml5/sketches/ImageModel_TM I have replaced the url of trained model, and play the p5.js, I notice that the web editor is by default p5.js 0.9.0. I click play, but it doesn't work, it shows

TypeError: ml5.flipImage is not a function

at setup (/sketch.js:35:22)

at h.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js:3:231107)

at _runIfPreloadsAreDone (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js:3:230339)

at h._decrementPreload (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js:3:230510)

at function (webpack://ml5/src/utils/p5Utils.js:171:12)

Root cause:

The version of ml5.js being used in the p5.js web editor is too old or version incompatible.

And here is the tested fix:

Find out this line in index.html

Change it to be a specific stable working version

Test “play sketch” again, now it works!

Page updated

Google Sites

Report abuse