Technology

Machine Learning: A Simple Example

Default
Are we on the brink of the next technological revolution with machine learning/artificial intelligence? I don’t know, but there have surely been some amazing advancements lately. Why not get in on the fun?

In this simple example we’ll train a neural network to pick light text or dark text against a user-chosen background color using the brain.js JavaScript library found here. Brain.js is a library of Neural Networks written in JavaScript, and it’s super simple to use. This example can be applied to real-world situations where you have a color-picker for the end-user and don’t want to hard code if the overlaying text should be dark or light, given the numerous possibilities a user could select.

First our HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">

        #example {
          padding: 100px;
          font-size: 36px;
          background: #ff0000;
          color: white;
        }

    </style>
</head>
<body>

<input type="color" value="#ff0000"/>
<div id="example">Example Text</div>

</body>

<a href="http://brain.js">http://brain.js</a>
<a href="http://app.js">http://app.js</a>
</html>

We have just one input color-picker and one div. The embedded css gives us a default background color of red (#ff0000) and text color of white. We are also importing our brain.js and app.js files.

The use-case we are trying to solve for here is to change the text to black or white depending on what background color the user picks. If the background is light, we want dark text and vice versa. The below is not ideal:
Light Background Light Text

We could try hard-coding this or try to create some algorithm but why not let the machine do the heavy lifting?

First, let’s select our DOM elements in app.js:

const input = document.querySelector("input")
const example = document.querySelector("#example")

Then we’ll want to put an event listener on the color-picker:

const input = document.querySelector("input")
const example = document.querySelector("#example")

input.addEventListener("change", (e) => {

})

To start using the neural network, we’ll need to do three things on a change event: 1) create the neural network, 2) train it, and 3) use it to get a result. Something like this:

const input = document.querySelector("input")
const example = document.querySelector("#example")

input.addEventListener("change", (e) => {
  const network = new brain.NeuralNetwork()
  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 } },
  ])

  const result = brain.likely({r: 1, g: 0.99, b: 0}, network)
  console.log(result);
})

Here we are initializing the neural network to the constant network, training using some inputs while telling it what the outputs should be, and then testing it with one input written to the constant result.

In order to wire this up, we need to convert the hex color output from the color-picker to RGB, as so:

const input = document.querySelector("input")
const example = document.querySelector("#example")

input.addEventListener("change", (e) => {
  const rgb = getRgb(e.target.value);
  const network = new brain.NeuralNetwork();

  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 } },
  ])

  const result = brain.likely(rgb, network)
  console.log(result);
})

function getRgb(hex) {
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
      return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
      r: Math.round(parseInt(result[1], 16) / 2.55) / 100,
      g: Math.round(parseInt(result[2], 16) / 2.55) / 100,
      b: Math.round(parseInt(result[3], 16) / 2.55) / 100,
  } : null;
}

Then just two more lines of code to change the text color based on the selected background color:

const input = document.querySelector("input")
const example = document.querySelector("#example")

input.addEventListener("change", (e) => {
  const rgb = getRgb(e.target.value);
  const network = new brain.NeuralNetwork();

  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 } },
  ])

  const result = brain.likely(rgb, network)
  console.log(result);
  example.style.background = e.target.value
  example.style.color = result === "dark" ? "white" : "black"
})

function getRgb(hex) {
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
      return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
      r: Math.round(parseInt(result[1], 16) / 2.55) / 100,
      g: Math.round(parseInt(result[2], 16) / 2.55) / 100,
      b: Math.round(parseInt(result[3], 16) / 2.55) / 100,
  } : null;
}

If you find your neural network is not giving you the results you want, just give it some more training inputs:

const input = document.querySelector("input")
const example = document.querySelector("#example")

input.addEventListener("change", (e) => {
  const rgb = getRgb(e.target.value);
  const network = new brain.NeuralNetwork();

  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 } },
  ])

  const result = brain.likely(rgb, network)
  console.log(result);
  example.style.background = e.target.value
  example.style.color = result === "dark" ? "white" : "black"
})

function getRgb(hex) {
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
      return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
      r: Math.round(parseInt(result[1], 16) / 2.55) / 100,
      g: Math.round(parseInt(result[2], 16) / 2.55) / 100,
      b: Math.round(parseInt(result[3], 16) / 2.55) / 100,
  } : null;
}

And that’s it! You now are harnessing the power of machine learning.

Credit/source: https://www.youtube.com/watch?v=9Hz3P1VgLz4&t

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s