Learn to make a simple machine learning website which adapts text colour 🖌 according to changeable background contrast. This might be a little bit for people who are very new to Machine Learning. If you’re , I’d suggest you to go through my this post here: turbulent new to Machine Learning How to Understand Machine Learning with simple Code Examples Are you enthusiastic about ? Are you trying to implement a simple ? machine learning machine learning webpage from scratch Do you want to make something cool with ? HTML/CSS and JavaScript If yes, then you’re at the . perfect place Here we will be making a simple webpage that changes the text colour according to the background color, using a simple machine learning library . brain.js Let’s kick off our with the result itself. excitement Here is the link to the webpage. Go to the above link and try changing the , you’d notice the auto with respect to the . RGB values of the slider changing text colour background contrast This is what we would be . building here What? You that link? You might miss something cool to see, but anyways here are the for you. didn’t open screenshots Green background, black text Violet-ish background, white text Didn’t quite get the feel from ? Here is a GIF: screenshots Colour-Learning GIF Here is the full source code that you may want to see. Let’s get into some code. First off, we would , where we would structure our webpage. We would also be needing simple sliders for . make a simple html file R, G, B values So the code for would look something like this: **index.html** <!DOCTYPE html><head><meta charset="UTF-8"><script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/brain/0.6.3/brain.js"></script><link rel="stylesheet" type="text/css" href="style.css"><title>Colour Learning</title></head> <body><div class="container" id="container"><div class="rgbValues">rgb(<input id="red" type="number" min="0" max="255" maxlength="3" onKeyPress="if(this.value.length == 3) return false" value=0 /><input id="green" type="number" min="0" max="255" maxlength="3" onKeyPress="if(this.value.length == 3) return false" value=0 /><input id="blue" type="number" min="0" max="255" maxlength="3" onKeyPress="if(this.value.length == 3) return false" value=0 />)</div><div class="colorPicker"><label for="redSlider">R</label><input type="range" min="0" max="255" step="1" id="redSlider" value="0"/><label>G</label><input type="range" min="0" max="255" step="1" id="greenSlider" value="0"><label>B</label><input type="range" min="0" max="255" step="1" id="blueSlider"value="0"></div></div> <script type="text/javascript" src="app.js"></script> </body></html> Here we’re also using the script which is a machine learning JavaScript library. **brain.js** Now let’s design our webpage, that lets it change colour on movement of the slider. Yes, to your project. welcome CSS The code for would look something like this: **style.css** @import url('https://fonts.googleapis.com/css?family=Montserrat'); body {margin: 0;} label {color: white;font-size: 20px;font-weight: bold;-webkit-transition: .3s;transition: color .3s} .rgbValues input {background: transparent;border-color: white;border-style: solid;border-top: none;border-left: none;border-right: none;outline: none;font-family: 'Montserrat', sans-serif;width: 10%;font-size: 80%;color: white;text-align: center;-webkit-transition: .3s;transition: border-color .3stransition: color .3s} .container {width: 100vw;height: 100vh;background-color: rgb(0,0,0);transition: background-color 500ms;} .rgbValues {font-size: 5vw;font-family: 'Montserrat', sans-serif;color: white;text-align: center;position: absolute;top: 35%;left: 50%;transform: translate(-50%, -50%);width: 90%;-webkit-transition: .3s;transition: color .3s} .colorPicker {position: absolute;top: 68%;left: 50%;transform: translate(-50%, -50%);text-align: center;font-family: 'Montserrat', sans-serif;} .colorPicker input {-webkit-appearance: none; /* Override default CSS styles */appearance: none;display: block;border: none;width: 40vw;height: 4px;background: white;outline: none;-webkit-transition: .2s;transition: background .2s;margin: 25px;} .colorPicker input::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 25px;height: 25px;border: 1px solid black;border-radius: 20px;background: white;cursor: pointer;} /* For Firefox remove arrow menu input field*/input[type='number'] {-moz-appearance:textfield;} /* Webkit browsers like Safari and Chrome remove arrow menu input field */input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;} Yes, we’ve done it. Now and see how the slider changes the colours. go to your webpage What? The text colour is and neither is the background? not changing Well, don’t worry, it’s because we have code that would train our neural network and make it understand which colour to change the text to. not yet added the machine learning I have tried to comment on the blocks of the code, so it would be more easier to understand. Also we’re yet to . So let’s first get done with that. The code will look something like this: add the code to change the background colour // Change background colourfunction changeBackgroundColor(r,g,b){container.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;} So let’s get into some . machine learning code with JavaScript // creations of object for neural networkfunction createNetworkObject(r,g,b){var networkObject = {r:null, g:null, b:null};networkObject.r = r/255;networkObject.g = g/255;networkObject.b = b/255; return networkObject; }// Machine learning probability labelfunction networkLabel(result){ if(result.light > result.dark) result = 'light'; else result = 'dark'; return result; } This above code and also put the light or dark label that would be our labels, to change the text colour. creates objects for our neural network Now let’s get into , and of course code. The code would look something like this: training our neural network with data // create new neural network objectconst network = new brain.NeuralNetwork(); // training datanetwork.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.42, b: 0.52}, output: { dark: 1 } },{ input: {r: 0, g: 0, b: 1}, output: { dark: 1 } },{ input: {r: 0.8, g: 0.44, b: 1}, output: { dark: 1 } },{ input: {r: 0, g: 0.44, b: 1}, output: { dark: 1 } },{ input: {r: 0.3 , g: 0.6, b: 1}, output: { dark: 1 } },{ input: {r: 0.1, g: 0.6, b: 0}, output: { dark: 1 } }]); // grab inputs in .rgbValues divvar input = document.querySelectorAll(".rgbValues input");// grab inputs in .colorPicker divvar sliderInput = document.querySelectorAll('.colorPicker input'); // rgb sliderfor(var i = 0; i < sliderInput.length; i++){sliderInput[i].addEventListener("input", function(){var redSlider = document.getElementById("redSlider").value;var greenSlider = document.getElementById("greenSlider").value;var blueSlider = document.getElementById("blueSlider").value; document.getElementById("red").value = redSlider; document.getElementById("green").value = greenSlider; document.getElementById("blue").value = blueSlider; changeBackgroundColor(redSlider,greenSlider,blueSlider); var networkObject = createNetworkObject(redSlider,greenSlider,blueSlider); var MLresult = network.run(networkObject); MLresult = networkLabel(MLresult); console.log(MLresult); changeElementsColor(MLresult, input, sliderInput); }); } // rgb value input (the non slider one)for(var i = 0; i < input.length; i++){input[i].addEventListener("keyup", function(e){// right arrow key to next tabif(e.keyCode == 39){$(this).next('input, select').focus();}// left arrow key to previous tabif(e.keyCode == 37){$(this).prev('input, select').focus();}// max value input 255if(e.target.value > 255){e.target.value = 255;} var container = document.getElementById("container"); var red = document.getElementById("red").value; var green = document.getElementById("green").value; var blue = document.getElementById("blue").value; // change slider values to correspong to rgb value input(s) document.getElementById('redSlider').value = red; document.getElementById('greenSlider').value = green; document.getElementById('blueSlider').value = blue; changeBackgroundColor(red, green, blue); // machine learning var networkObject = createNetworkObject(red,green,blue); var MLresult = network.run(networkObject); MLresult = networkLabel(MLresult); console.log(MLresult); changeElementsColor(MLresult, input, sliderInput); }); // when input changes from up down arrows keys to change value input\[i\].addEventListener("change", function(){ var container = document.getElementById("container"); var red = document.getElementById("red").value; var green = document.getElementById("green").value; var blue = document.getElementById("blue").value; changeBackgroundColor(red, green, blue); // machine learning var networkObject = createNetworkObject(red,green,blue); var MLresult = network.run(networkObject); MLresult = networkLabel(MLresult); console.log(MLresult); var MLresult = network.run(networkObject); // black text for 'light' colours changeElementsColor(MLresult, input, sliderInput); }); } Please I have provided, it would help you understand this big but straight forward piece of code, better. refer to the comments And now we should add the code that would work the wonders in our machine learning code. This piece of code helps to according to need and the training. change the text colour // change colors on page relative to backgroundfunction changeElementsColor(result, input, sliderInput){if (result == 'light'){for(var i = 0; i < input.length; i++){input[i].parentElement.style.color = "black";input[i].style.color = "black";input[i].style.borderColor = "black";}for(var i = 0; i < sliderInput.length; i++){sliderInput[i].style.backgroundColor = 'black';}// grab label elementvar label = document.getElementsByTagName('LABEL');for(var i = 0; i < label.length; i++){label[i].style.color = 'black';}}else if (result == 'dark'){for(var i = 0; i < input.length; i++){input[i].parentElement.style.color = "white";input[i].style.color = "white";input[i].style.borderColor = "white";}for(var i = 0; i < sliderInput.length; i++){sliderInput[i].style.backgroundColor = 'white';} var label = document.getElementsByTagName('LABEL'); for(var i = 0; i < label.length; i++){ label\[i\].style.color = 'white'; } } } And yes, that’s it. Take a look at your according to the contrast, using webpage and auto changing text colour machine learning. If you’ve some difficulties in the code above, please take a look at the source code here. You’ve successfully built yourself a using simple machine learning website JavaScript, HTML and CSS. What are you waiting for? Go and Show Off!! In case we’re meeting for the first time here, and I mostly write about and sometimes about . I am Pradyuman Dixit Machine learning, Android Development Web Development You can read my other posts here: Machine Learning How to Understand Machine Learning with simple Code Examples How to make a Machine Learning Android Game as a beginner
