Saturday, March 6, 2021
  • Setup menu at Appearance » Menus and assign menu to Top Bar Navigation
Advertisement
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
No Result
View All Result
Home Neural Networks

Using Machine Learning In UI/UX With BrainJS

October 2, 2019
in Neural Networks
Using Machine Learning In UI/UX With BrainJS
586
SHARES
3.3k
VIEWS
Share on FacebookShare on Twitter

Sometimes it’s fun to play with code just to see what you can make it do. So I started a small project a few months ago to find a way to mix together machine learning and UI/UX. The project I came up with was simple: update a user’s color preferences based on the colors they focus on more as they browse a page. Is this useful? I’m not sure, but it was interesting and I’ve been able to speak about it at three different conferences!

This is a guide on how I went through this project and some of the things I learned as I got through it. Here’s a link to the source code if you’re interested: https://github.com/flippedcoder/machine-learning-ui-ux-demos

You might also like

5 Tech Trends Redefining the Home Buying Experience in 2021 | by Iflexion | Mar, 2021

Labeling Case Study — Agriculture— Pigs’ Productivity, Behavior, and Welfare Image Labeling | by ByteBridge | Feb, 2021

8 concepts you must know in the field of Artificial Intelligence | by Diana Diaz Castro | Feb, 2021

If you don’t know anything else about machine learning, you should know a little about neural networks. Neural networks are our loose attempt at replicating a human mind. They’re built on algorithms that recognize patterns based on the information we give them. That information could be things like housing prices, stock market values, and user data.

There are a few uses you’ll see a lot in web applications like, classification, prediction, and clustering. An example of prediction would be using stock market data you have to pick a range of future values. An example of classification would be deciding if a user’s reported message was fraudulent or not. You would take some data and train an algorithm to look at the values you give it and classify the message as legit or not. Lastly, an example of clustering would be checking for troll comments. Normal comments fall within a range of sentiments and statements, but trolls are usually outliers.

Now that you have an idea of what neural networks are, let’s talk about how they are built. A neural network is made up of nodes. A node is just like a function. It’s a place where a value is calculated. Nodes are modeled after neurons in the brain so they take a set of inputs and give you an output. This is usually the value you are looking for when you decide to use a neural network.

This is about all you need to know to get started with BrainJS. It makes training a neural network incredibly simple. There are a few little things that might be explained as we go along and I’ll try to touch on them.

Now let’s get into the JavaScript library, BrainJS https://github.com/BrainJS/brain.js#node. This is one of the machine learning libraries out there you can use other than TensorFlowJS. It’s easy to use if you know a bit about neural networks and Node and it comes with a lot of great tutorials and documentation. The method I decided to use is the regular neural network training model. Using a recurring neural network is an option, but for this little project a simple neural network was enough.

BrainJS makes it easy to train a model because you can focus more on your dataset and the inputs you want to use instead of trying to learn a new syntax. TensorFlowJS is cool and I’ve made this same project with it, but I just like BrainJS a little better. Once you go through some of the tutorials, you can just dive in. The most important thing is to actually have something in mind that machine learning would be useful for.

For this project, I was curious if you could train a model to pick out the color on a page that a user prefers and change the elements on the page to a different shade or complement that specific color. The interesting thing is that every time a user refreshes the page, that custom coloring will get reset. That could be a good thing depending on what your application is used for. Making changes like this to the UI might help close a sale or it could encourage someone to fill out a form correctly.

The way I decided to make this project came from a long back and forth between me and a UI designer. I just wanted there to be a way for the user to tell us what they want to see instead of us trying to guess which hues represent the “right message”. The data I focused on collecting from the user were the colors of the elements they spent the most time hovering over. Whether or not this was the right approach, I don’t know. I just wanted to know what would happen using this metric.

Based on the coordinates of their mouse on the page, I was able to get the RGB values for the element they were over in its current state. My guess was that we subconsciously gravitate towards colors we like so making that subtle change could influence people to move through your application like you want them to. By looking at where they spend the most time on your page, you can take a guess that they are attracted to the colors at some level.

Then you can take that information and adjust the contrast between elements or the overall tone of the website to match that specific user. You can even do it in the browser so you don’t have to deal with server-side code. I’m not sure how that works yet, but I read that you can do it in the docs! Now that the features have been defined, the RGB values that users seem to prefer, it’s time to start writing some code and training the neural network model.

Just a quick heads up, you won’t find all of the code for this project here, but you can check it out in my GitHub repo: https://github.com/flippedcoder/machine-learning-ui-ux-demos There are a few things you need to know before we jump into code. I made this app using create-react-app, I don’t have any real data so I just made up the numbers we use, and this was a personal project I thought would be cool to share so the code is… meh. Alright! Let’s take a look that the server.js file we’ll need.

This is how we create the training data we’ll use for our neural network.

const trainingInputData = [{ green: 0.2, blue: 0.4 },{ green: 0.4, blue: 0.6 },{ red: 0.2, green: 0.8, blue: 0.8 },{ green: 1, blue: 1 },{ red: 0.8, green: 1, blue: 1 },{ red: 1, green: 1, blue: 1 },{ red: 1, green: 0.8, blue: 0.8 },{ red: 1, green: 0.6, blue: 0.6 },{ red: 1, green: 0.4, blue: 0.4 },{ red: 1, green: 0.31, blue: 0.31 },{ red: 0.8 },{ red: 0.6, green: 0.2, blue: 0.2 }];const trainingOutputData = [{ dark: 0.8 },{ neutral: 0.8 },{ light: 0.7 },{ light: 0.8 },{ light: 0.9 },{ light: 1 },{ light: 0.8 },{ neutral: 0.7, light: 0.5 },{ dark: 0.5, neutral: 0.5 },{ dark: 0.6, neutral: 0.3 },{ dark: 0.85 },{ dark: 0.9 }];const trainingData = [];for (let i = 0; i < trainingInputData.length; i++) {    trainingData.push({        input: trainingInputData[i],        output: trainingOutputData[i]    });}

The trainingInputData is a sample of values we can expect from the user. So we’re looking at the background color of the elements they hover over the most and getting those RGB vales. The trainingOutputData is what we are trying to predict. Everyone has a preference of brightness level and we say that certain RGB values correspond to specific levels of dark, light, and neutral brightness. Based on our input data, we can subtlety adjust the brightness of our page for a user.

Now we can make a new model and use this data to train it as well as get some statistics on how well the model was trained.

const net = new brain.NeuralNetwork({ hiddenLayers: [3] });const stats = net.train(trainingData);console.log(stats);

First we made a new neural network with three hidden layers and called it “net”. Adding a few hidden layers gives you more accurate results because you are taking advantage of deep learning. Deep learning just means you are using more than one hidden layer to analyze your input. Next we train the neutral network by passing it our training data and we assign it to a variable called “stats”. Lastly we’ll print all of the statistics like training error and number of iterations in the console.

At this point, the model is ready to run with any inputs you give it. That means it’s time to setup some code to get input from the user to feed into the model. The way we’ll do this is by getting the input data directly from the user request and create a new training data array for the input. Then we’ll run our model with the new training input data to get the values for the new training output data.

Next, we’ll update the model with the new training data and run the model on the last input that we get from the user. I chose to do it like that because of the way I’m sending data to the server, which you’ll see in more detail the next section. Basically, I’m sending an array of RGB values back to the server in the same shape as the input data. After running the model on the last input, we’ll pass that predicted value back to the user and make adjustments to the UI.

app.post(‘/getUserMouseCoordinates’, (req, res) => {    let newTrainingInputData = req.body.userData;    let newTrainingOutputData = [];    let newTrainingData = [];    newTrainingInputData.forEach(input => {        newTrainingOutputData.push(             net.run(                 {                     red: input.input.red,                     green: input.input.green,                     blue: input.input.blue                 }             )        );    });    for (let i = 0; i < newTrainingInputData.length; i++) {        newTrainingData.push({            input: newTrainingInputData[i],            output: newTrainingOutputData[i]        });    }    net.train(newTrainingData);    let newPredictedValue =     net.run(newTrainingInputData[newTrainingInputData.length — 1]);    res.send(JSON.stringify({ predictedValue: newPredictedValue }));});

The user doesn’t really care that any of this stuff is happening in the background as long as it doesn’t slow them down. So let me show you how I handled getting their input to the server. I wait until there is a decent sized set of user data (100 points) in my input array. Until there are 100 data points, the values get added to the array and we don’t send anything to the server. There’s no technical reason behind me choosing 100 data points. It’s just the number I picked. 🤷‍♀️

For neural networks, the input and output values fall between 0–1. That means if you’re working with values larger than that, they need to be scaled to fit within that range. That’s the reason I divided each RGB value by 1000. Those values range between 0–255 so I wanted to make sure they would all fit within that 0–1 range of the neural network. There are tons of better ways to scale values like min-max normalization or the z-score normalization and you should definitely use something like those when you work on a real machine learning project.

Aside from scaling values in the array, when we have 100 data points in the input array we finally get to pass it back to the server. When the input array is passed back and processed, we’ll get a response with the predicted values for the light, dark, and neutral composition of the colors the user spent time hovering over. Then we’ll update our state variables and call a changeAlpha function which will update the UI for the user.

getUserMouseCoordinates = async (event) => {    if (this.input.length >= 100) {        let userData = { userData: this.input };        let prediction = await fetch(‘/getUserMouseCoordinates’, {            method: ‘POST’,            headers: {                ‘Accept’: ‘application/json’,                ‘Content-Type’: ‘application/json’            },            body: JSON.stringify(userData)        });        const predict = await prediction.json();        this.setState({            light: predict.predictedValue.light,            dark: predict.predictedValue.dark,            neutral: predict.predictedValue.neutral        });        this.changeAlpha();     }     else {         this.input.push(             { ‘input’: {                 red: event.target.style.backgroundColor.split(‘,’)[0].substr(4) / 1000,                 green: event.target.style.backgroundColor.split(‘,’)[1].trim() / 1000,                 blue: event.target.style.backgroundColor.split(‘,’)[2].trim().split(‘)’)[0] / 1000                  }              }        );    }}

This is an example of one of my personal projects I had a lot of fun with. I’ve even gotten to present this project at different tech conferences! The code’s not beautiful, the best machine learning practices aren’t all in place, and that fine. Project code doesn’t have to be perfect when you’re trying to figure out if something will work. One day I’ll spend the time refactoring and experimenting, but for now, I have other projects I want to finish!

What did you think about this? Is it useful to post and talk about personal projects like this? Would you have liked more detail into the code or more insight on how to come up with random projects like this? I haven’t written about my projects like this before so I’m open to feedback!

Credit: BecomingHuman By: Milecia McG

Previous Post

The Next Big Customer Experience Opportunity

Next Post

Invoca’s Signal Discovery uses machine learning to conduct conversational analysis on inbound calls

Related Posts

5 Tech Trends Redefining the Home Buying Experience in 2021 | by Iflexion | Mar, 2021
Neural Networks

5 Tech Trends Redefining the Home Buying Experience in 2021 | by Iflexion | Mar, 2021

March 6, 2021
Labeling Case Study — Agriculture— Pigs’ Productivity, Behavior, and Welfare Image Labeling | by ByteBridge | Feb, 2021
Neural Networks

Labeling Case Study — Agriculture— Pigs’ Productivity, Behavior, and Welfare Image Labeling | by ByteBridge | Feb, 2021

March 5, 2021
8 concepts you must know in the field of Artificial Intelligence | by Diana Diaz Castro | Feb, 2021
Neural Networks

8 concepts you must know in the field of Artificial Intelligence | by Diana Diaz Castro | Feb, 2021

March 5, 2021
The Examples and Benefits of AI in Healthcare: From accurate diagnosis to remote patient monitoring | by ITRex Group | Mar, 2021
Neural Networks

The Examples and Benefits of AI in Healthcare: From accurate diagnosis to remote patient monitoring | by ITRex Group | Mar, 2021

March 4, 2021
3 Types of Image Segmentation. If you are getting started with Machine… | by Doga Ozgon | Feb, 2021
Neural Networks

3 Types of Image Segmentation. If you are getting started with Machine… | by Doga Ozgon | Feb, 2021

March 4, 2021
Next Post
Invoca’s Signal Discovery uses machine learning to conduct conversational analysis on inbound calls

Invoca’s Signal Discovery uses machine learning to conduct conversational analysis on inbound calls

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

January 6, 2019
Microsoft, Google Use Artificial Intelligence to Fight Hackers

Microsoft, Google Use Artificial Intelligence to Fight Hackers

January 6, 2019

Categories

  • Artificial Intelligence
  • Big Data
  • Blockchain
  • Crypto News
  • Data Science
  • Digital Marketing
  • Internet Privacy
  • Internet Security
  • Learn to Code
  • Machine Learning
  • Marketing Technology
  • Neural Networks
  • Technology Companies

Don't miss it

Microsoft: We’ve found three more pieces of malware used by the SolarWinds attackers
Internet Security

Microsoft: We’ve found three more pieces of malware used by the SolarWinds attackers

March 6, 2021
Bug in Apple’s Find My Feature Could’ve Exposed Users’ Location Histories
Internet Privacy

Bug in Apple’s Find My Feature Could’ve Exposed Users’ Location Histories

March 6, 2021
Machine learning the news for better macroeconomic forecasting
Machine Learning

Reducing Blind Spots in Cybersecurity: 3 Ways Machine Learning Can Help

March 6, 2021
5 Tech Trends Redefining the Home Buying Experience in 2021 | by Iflexion | Mar, 2021
Neural Networks

5 Tech Trends Redefining the Home Buying Experience in 2021 | by Iflexion | Mar, 2021

March 6, 2021
Zigbee inside the Mars Perseverance Mission and your smart home
Internet Security

Zigbee inside the Mars Perseverance Mission and your smart home

March 6, 2021
Mazafaka — Elite Hacking and Cybercrime Forum — Got Hacked!
Internet Privacy

Mazafaka — Elite Hacking and Cybercrime Forum — Got Hacked!

March 6, 2021
NikolaNews

NikolaNews.com is an online News Portal which aims to share news about blockchain, AI, Big Data, and Data Privacy and more!

What’s New Here?

  • Microsoft: We’ve found three more pieces of malware used by the SolarWinds attackers March 6, 2021
  • Bug in Apple’s Find My Feature Could’ve Exposed Users’ Location Histories March 6, 2021
  • Reducing Blind Spots in Cybersecurity: 3 Ways Machine Learning Can Help March 6, 2021
  • 5 Tech Trends Redefining the Home Buying Experience in 2021 | by Iflexion | Mar, 2021 March 6, 2021

Subscribe to get more!

© 2019 NikolaNews.com - Global Tech Updates

No Result
View All Result
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News

© 2019 NikolaNews.com - Global Tech Updates