0

I'm interested in using brain.js: https://github.com/harthur/brain

There is a provided demo that shows how to train the neural network to recognise colour contrast, but how can I set it up so that it can learn, from input, which colour text ( white or black ) looks better on different background images?

Here is that demo: http://harthur.github.io/brain/

I have a set of background images that I want to train against. And then I want to save that training data and be able to add it to a site that uses those background images and that way be able to determine which colour text to use on top of them.

James A Mohler
  • 11,060
  • 15
  • 46
  • 72
MrGuru
  • 325
  • 5
  • 15
  • The training demo shows the actual code they use. Just use that. Or better, use the (much simpler) YIQ algorithm they compare against. I don't think this is a problem you really need a neural net for. – Jason May 29 '14 at 17:24
  • @Jason YIQ algorithm? I'm trying to learn from background images not background colours. How do I input the background image as an array, like the rgb colour is an array. – MrGuru May 30 '14 at 15:53
  • Are you saying that you need to train on a set of non-solid-color images, and then have your system be able to work with similar but not identical non-solid-color images? – Jason May 30 '14 at 19:51

2 Answers2

2

It appears as though it is as simple as this:

net.train([{input: { r: 0.03, g: 0.7, b: 0.5 }, output: { black: 1 }},
           {input: { r: 0.16, g: 0.09, b: 0.2 }, output: { white: 1 }},
           {input: { r: 0.5, g: 0.5, b: 1.0 }, output: { white: 1 }}]);

So, to do this from an input, just change the values like:

var input = {};
input.r = hexToRgb($('#rgbTextField').r;
input.g = hexToRgb($('#rgbTextField').g;
input.b = hexToRgb($('#rgbTextField').b;

var output = {};
output.black = 1;

// finally...
net.train([ input, output ]);

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

Or something to the effect. I have not tested this code.

Ref. RGB to Hex and Hex to RGB

Community
  • 1
  • 1
user1477388
  • 20,790
  • 32
  • 144
  • 264
  • this learns from input fields. How can I get it to learn from background images? Not a background colour. Sorry if that wasn't clear. And then how can I save and preload the training data? – MrGuru May 30 '14 at 15:49
  • what I would think is showing the image twice once with black text over it and once with white text over it. And then on click of the element, it learns white with this image or black with this image. – MrGuru May 30 '14 at 15:50
  • so my main question is how give it input that this image was chosen as an array. like the input for a colour is the rgb values. – MrGuru May 30 '14 at 15:54
  • Firstly, you're question was "how can I set it up so that it can learn, from input." I don't know what you mean by "get it to learn from background images." To save and load the training data, it looks like it's just JSON objects, so you could save the JSON to a text file or database and then load it via AJAX as an object which you could then return to your function. – user1477388 May 30 '14 at 16:50
  • What I meant by that was on input in the form of on click of an element, it learns that that element's background image property corresponds to the element's color property. I don't know how to pass the image as input to the .train function. – MrGuru May 30 '14 at 16:58
  • You probably can't pass an image as input. You would have to pass it to a server to parse it out and get what you want. – user1477388 May 30 '14 at 17:43
1

Given the clarification in your comments, you have a couple of options:

  1. Assign (or otherwise identify) the dominant color of the image, and then use that color instead of the whole image to essentially reduce your problem down to exactly the same as your linked example.
  2. Feed in your image colors pixel by pixel to the neural network and train against those values. Essentially this boils down to letting the NN determine the dominant color instead of using some other algorithm, but it could, under some circumstances, be more accurate for your purposes.

What's important to remember is that the Neural Network has no idea what a color is, it has no idea what a pixel is, all it knows is input and output. So just feed in your (arbitrarily complex) input and see how it handles it. I have no idea of the capabilities of your linked NN, but in general it's reasonable to think it would serve for your needs. I don't know about performance... you'd have to make sure it actually performs quick enough for you in a live scenario.

But I'd think long and hard about whether what you're trying to accomplish is really so core to your goal that it's worth the effort, both in terms of set up and ongoing resources.

Community
  • 1
  • 1
Jason
  • 13,606
  • 2
  • 29
  • 40
  • Is there a way to find the dominant colour in an image in js? – MrGuru Jun 02 '14 at 14:12
  • Check the links. I haven't done it personally, but the general algorithms should be pretty much the same. Doing it in the browser would require some HTML5 features. [See here](http://stackoverflow.com/questions/1041399/how-to-use-javascript-or-jquery-to-read-a-pixel-of-an-image) – Jason Jun 02 '14 at 15:03