code2-2024-teachablemachine.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@latest/dist/ml5.min.js>"></script>

The following is the template of your sketch.js file:

// Video
let video;

// PART 1: Load the model here:

function setup() {
  createCanvas(640, 520);
  video=createCapture(VIDEO);
  video.hide();
  
  // PART 2: Start classifying
}

// PART 3 classify!

// PART 4: Get the classification!

function draw() {
  background(0);
  
  // Draw the video
  image(video, 0, 0);
  
  // PART 5: Draw the label
}