Give Your Lightning Web Components a Brain(.js) — Component Level Machine Learning
We explore using machine learning in Salesforce Lightning Web Components by solving a common UI problem with Brain.js.
Background
Lightning Web Components (LWC) are custom HTML elements built using HTML and modern JavaScript. They have quickly become one of the most important aspects of Salesforce development because of their versatility, simplicity, and adherence to modern web development standards. If you have written a LWC, you might be surprised to know that using machine learning in them can be extremely easy! Why would we want to use machine learning in LWCs? Because we can!! All joking aside, machine learning is a field of computer science that can be used to greatly enhance the capabilities of your Lightning Web Components.
Brain.js
Brain.js is one of my favorite open-source Node.js libraries that makes machine learning simple. It allows you to create GPU accelerated neural networks in JavaScript. Other than providing training data and a bit of optional configuration, Brain.js handles everything for you. You just need a basic knowledge of how machine learning works to get started. If you aren’t familiar with Brain.js, I highly encourage you to read through the website below and try out an example.
Color Background and Text Contrasting — A Simple Example
For a human, picking what text color should go on a background is easy. Dark text tends to look best on light backgrounds and bright text tends to look best on dark backgrounds. A computer doesn’t immediately know if a color is dark or bright. You could check RGB ranges, but that would get overly tedious if you want to handle every scenario. My preferred way to solve this problem is with a neural network. By training the neural network on a list of inputs consisting of rgb codes and outputs of black or white, it will learn which background colors need light text and which background colors need dark text. Training is the process of using example data to find weights of a neural network that map inputs to outputs. Depending on the amount of training data and the quality of the training data, the neural network should be able to determine if light or dark text goes best with a given background color. We will implement this example on a Lightning Web Component.
To get started, you will need to add Brain-browser.min.js to your Salesforce Org’s static resources. Make sure to name the new static resource “brainJs.” Once you have added the static resource, create a new Lightning Web Component named colorContrastExample. You can also download the completed component from Github.
Update colorContrastExample.js with the code above. You can see that Brain.js is loaded and a neural network is created in the connected callback. For the sake of saving time, I already trained the neural network on my local machine. You do not want to train your neural network within a LWC unless you want the user’s browser to completely lock up! Neural network training can be extremely computationally intensive and take a long time. Thankfully, Brain.js allows you to train a model locally, export the trained model as a JSON file, and load the same model anywhere. If you want to try training the same model yourself, you can follow the color contrast example on the Brain.js website.
Next you need to create a new file in the colorContrastExample component named trainedModel.js. This is the exported neural network configuration mentioned above.
After you have added the trained model to your component, create a colorContrastExample.css file. Then you can update the html, css, and meta.xml files with the finished contents.
Once you have all of the code put together, deploy the colorContrastExample to your org and place it on a lightning page. You should see something like below.
Play around with the component by changing the color and pressing “Update Colors.” You should see that as you change the background color, the text color automatically updates to black or white depending on the brightness of the background. You may find that the neural network chooses an inappropriate text color given a background color. This means that the neural network probably needs more training data. You can try training the same neural network locally with your own training data to make its predictions more robust!
Discussion
Although this example is simple, it demonstrates that a neural network can be easily applied to Lightning Web Components. Using Brain.js in Lightning Web Components gives the ability to make powerful predictions in real time for users. For instance, you could build a model that can predict whether an Opportunity on Salesforce is likely to result in a successful sale. You could also analyze a user’s text input for sentiment and topic. All sorts of machine learning options are available to you with Brain.js. I encourage you to keep exploring what you can do with machine learning. I hope that you learned something new today!
