Algorithmic Intelligence Tutorial

In this section titles Algorithmic Intelligence, we explores some of the features of Machine Learning (ML) and Artificial Intelligence (AI). Both AI and ML have strong connotations which have varied definitions and usages. All the talk of AI, ML and Data Science is rooted in algorithms, hence the name Algorithmic Intelligence. This tutorial gets you started on a journey to discover what exactly AI and ML are, what is happening behind the scenes. It is done, hopefully, in a fun, entertaining and visual way to help you understand the mechanisms involved so that you can develop your own journey.

Table of Contents

Module A: building a model

Module A is where we start our journey, work through each unit and I recommend that you don’t skip a unit. The coding snippets have been kept as brief as possible so that when you are working through the AI units you have some understanding of p5.js while attempting to grasp the concepts of AI. This module uses ml5.js and explores some simple examples that will demonstrate key features.

Module A Unit #1 introduction to AI

This quick read through gives you some background information on Algorithmic Intelligence, Machine Learning and in particular to Neural Networks and what they are.

Module A Unit #2 introduction to p5.js

To access this tutorial you will need a basic understanding what p5.js is and also how the web based editor and all its buttons and settings work and benefit you.

Video #1: web editor

How to start using the editor

Video #2: buttons

some of the buttons used in the editor

Video #3: the default

looking at the editor in a little more detail

Video #4: files

creating a new file.

Module A Unit #3 introducing ml5.js

Although p5.js is the main coding environment it the ml5.js library that does all the heaving lifting when it comes to the Algorithmic Intelligence and Machine Learning units.

Module A Unit #4 code snippets part 1 (p5.js)

To create your AI models you do need to code, this is a quick introduction to the key concepts that you will need, it is ideal for those who have never coded before and a good introduction to p5.js for those who have.

A template

To help you get started I have included a basic template, click on the button and you will have access to a template that includes the ml5.js library, duplicate this and then use it, it saves typing out the line of code for the library in the index.html file.

Module A Unit #5 linear regression

In this first unit we plot points for a straight line with some variance (randomness). The neural network (ml5.js) will be trained on these data points and will approximate to the line. This is a regression task where you will train it on some synthetic data and then predict the outcome.

Module A Unit #6 sine wave regression

This is similar to unit #1 but a bit more challenging for the neural network to learn, here we will introduce some more hyperparameters to help in the learning process, hopefully with improved accuracy.

Module A Unit #7 mouse gesture

This is a classification task. We will give the neural network a small amount of synthetic data on the movement of the mouse, it will try to predict whether the mouse is moving up, down, left or right.

Module A Unit #8 code snippets part 2 (p5.js)

An introduction to some key concepts used in the next section, such as using video and exploring pixels.

Module A Unit #9 cluster classification

This is a supervised learning model. We are going to click on the canvas in four areas. In each quadrant we will create a set of ten circles then we will predict the colour in the space between the circles

Module A Unit #10 cluster regression

Here we will click on the canvas to create a cluster of white circles and a cluster of black circles. We will train it on those data points and then predict what shade of grey the canvas is between those data points.

Module A Unit #11 colour predictor

Train the neural network to predict three colour groups using synthetic data and testing with sliders.

Module A Unit #12 pixel predictor

In this unit we take the pixels from an image (webcam) and train the neural network to move a circle with your head

Module A Unit #13 how to save and load

This unit covers saving/loading data, and saving/loading models once trained

Module B: pre-trained models

Module B looks at some pretrained models which means that they have done all the hard work of collecting the data and training the models. The reason for this module is that you can use these pretrained models to develop other applications and creative endeavours. It is also quite fun.

Module B Unit #1 code snippets part 3 (p5.js)

A short unit as background coding snippets useful for the remainder of this section.

Module B Unit #2 pretrained faceMesh

This pretrained model can identify over 400 points on your face, we will use some of those points to draw a box around your mouth and locate your eyes.

Module B Unit #3 pretrained handPose

This pretrained model can identify key parts of your hand (both hands at once). In this example you will control a circle on the canvas with your fingers.

Module B Unit #4 pretrained bodyPose

This pretrained model can identify the main parts of the body, such as hands, arms, legs, eyes and so on. We can also draw a skeleton between these points.

Module B Unit #5 pretrained speech classification

This pretrained model has been trained on 18 key words, so that when you say one of those words it would recognise it. As an exercise you will move a circle round the canvas with your voice.

Module B Unit #6 pretrained body segmentation

This pretrained model can detect key body parts and follow their motion

Module C: transformers

Module C the world thinks that AI is just Large Language Models (LLM‘s) such as ChatGPT, Gemini or Claude. Although many would claim (including myself) that it is not Artificial Intelligence but more like a stochastic parrot, guessing the next word in a sequence based on probability. However, it can still be very useful and is very powerful in its own right. These models are proprietary, they cost a lot of money because they are enormous.  The alternative is to use what are called Small Language Models (SML‘s). These are smaller, free (open source)  and work in your browser. They are still powerful and useful. The ones we will look at use the Transformers.js library which works brilliantly with p5.js.

Module C Unit #1 introduction to transformers

This introduces you to transformer.js, a library that works with p5.js in your browser.

Module C Unit #2 image classification (transformers)

Now that we have introduced transformers we will try a model that can classify an object in an image.

Module C Unit #3 depth analysis (transformers)

Using the same image we will look at a model that estimates the depth of the objects in an image.

Module C Unit #4 object detection (transformers)

This puts a bounding box round an object(s) and label it (them).