This workshop will give students the opportunity to train their own AI image recognition system and create a simple interactive web app using Google Teachable Machine and P5.js. To take part you will need a laptop (either Mac or PC) with a webcam and WiFi internet access. Both Teachable Machine and P5.js run in an ordinary web browser, so you won’t need to install any special software, however it is recommended that you install the latest version of Google Chrome. All the code you need will be provided, so you don’t need to have any previous coding experience to take part.

Using your laptop’s webcam, we will use Teachable Machine to train an AI model to identify four different objects, so please bring some props to help train your model! Your props can be anything you like, so long as you can easily hold them up to the webcam, but it works best if you choose objects in a variety of different colours and shapes. Once we’ve trained our model, we’ll use it to build a simple web app in P5.js that will display a different picture for each object you hold up to the webcam.

 

Workshop Links

Google Teachable Machine: https://teachablemachine.withgoogle.com/

Note: You don’t need to be signed into Google to use Teachable Machine, but it is a good idea, because if you are signed in you can save your project to your Google Drive and come back and work on it later.

 

P5.js Code for Web App: https://editor.p5js.org/cat_mw_gsa/sketches/x1KQ–jP5

Note: To save changes you make to this code in the P5.js Editor you will need to sign-up for a free P5.js account. If you prefer, you can also sign in using a Google or GitHub account.