Introduction to Machine Learning With JavaScript Using Brain.Js
Machine learning has been an exponentially growing field in modern software and technology development. Python or other high-level languages have traditionally been used in developing machine learning solutions but in this article, we will explore how it can be done with basic JavaScript and explore a practical implementation.
Beginners curious to explore the possibilities and basic methodology of machine learning can use Brain.js as a starting point as it is a simple library that allows us to implement neural networks without the requirement of complicated mathematics. Before we dive into a practical example let’s cover some basics of Machine Learning that will be relevant to understand the inner workings of the library and neural networks.
Forward and Backward propagation
Forward and backward propagation is how a neural network learns. During the training phase of the data set, this process occurs constantly. Imagine a cricketer that must score a boundary. They will estimate the distance to the boundary and the force needed. This is the concept of forward propagation. Backwards propagation is measuring the distance from the boundary (propagation) to the cricketer (source). This estimation happens repeatedly until an accurate estimation can be made. Thus, each layer takes in data from the input layer, processes it in accordance with the activation function and passes it on to the successive layers.
Hidden Layers
Hidden layers are the layers that lie between the input and output layer of a neural network. The hidden layers run the activation functions and transforms the input to a value that the output layer can use. The more hidden layers in our network the better the result.
Setting up Brain.js is extremely simple and you can follow the well-documented guide at the GitHub repository. We will move to understand the basic syntax and implementing a solution that will be useful in a JavaScript context.
After importing Brain.js we must instantiate our network as follows:
const network = new brain.NeuralNetwork()We will use the machine learning capabilities of Brain.js to dynamically decide if the font colour of some text should be black or white based on a changing background colour. First, we must train our network by providing a dataset. Here I have provided a set of RGB colour values and what the font colour must be for each one. The train method utilizes the forward and backward propagation methods discussed above.
network.train([
{ input: { r: 0.62, g: 0.72, b: 0.88 }, output: { light: 1 } },
{ input: { r: 0.1, g: 0.84, b: 0.72 }, output: { light: 1 } },
{ input: { r: 0.33, g: 0.24, b: 0.29 }, output: { dark: 1 } },
{ input: { r: 0.74, g: 0.78, b: 0.86 }, output: { light: 1 } },
{ input: { r: 0.31, g: 0.35, b: 0.41 }, output: { dark: 1 } },
{ input: {r: 1, g: 0.99, b: 0}, output: { light: 1 } },
{ input: {r: 1, g: 0.42, b: 0.52}, output: { dark: 1 } },
])Finally, we will provide a test value and pass it on to the neural network and it will output either “light” or “dark”:
const result = brain.likely(rgb, network)
console.log(result);
example.style.background = e.target.value
example.style.color = result === “dark” ? “white” : “black”Based on the above implementation we can implement a dynamic solution to change the font colour on the fly based on a changing background (demo).
As demonstrated above we can implement several machine learning based concepts using Brain.js without being limited by the JavaScript language and can be quite handy if implemented in a smart way.
