Note that in the Summer of 2024, there were some updates and enhancements to the ML5 library. The steps within https://docs.ml5js.org/#/reference/image-classifier-tm describe the most up-to-date code to work with the most up-to-date ml5 Teachable Machines functionality, there is a chance that the Code! 2 Module Documentation in Brightspace may not be entirely up-to-date with the library. The following review, is using the most up-to-date ml5 library correctly.

Code2Fall2024-week6.mp4

Step 1 - Go to Google’s Teachable Machines and Create a Model

https://teachablemachine.withgoogle.com/train

Create an “Image Project”

Within your project, it starts with two classifications. You need to either upload images for each classification or sample many frames of video for each classification.

Once you have uploaded videos, you can train your model by selecting “Train Model”. When the Model is trained, the Preview Window will start the video and you can place things in front of the video for classification.

When you see it working, save your project to Google Drive:

Once the Project has been saved, you can upload the Model to Google Drive and copy the URL from the Model. This URL can be used in your P5 sketch:

Step 2 - Create P5 Sketch that uses the Model from Google’s Teachable Machines

// Add the following to your index.html file
<script src="<https://unpkg.com/ml5@1/dist/ml5.js>"></script>