neataptic
Version:
Architecture-free neural network library with genetic algorithm implementations
296 lines (182 loc) • 10.4 kB
HTML
<html>
<head>
<title>Neataptic.js - Classify colors</title>
<!-- Meta data -->
<meta charset="UTF-8">
<meta name="description" content="Classify different colors through genetic algorithms">
<meta name="keywords" content="color classification, genetic-algorithm, NEAT, Neataptic">
<meta name="author" content="Thomas Wagenaar">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../../custom.css">
<!-- Favicon -->
<link rel="shortcut icon" href="http://i.imgur.com/rPZtAOc.png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<!-- Google Analytics -->
<script async>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-51480408-2', 'auto');
ga('send', 'pageview');
</script>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../.."><p class="brand">Neataptic</p></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="current active"><a href="../..">Home</a></li>
<li class="current"><a href="../../docs/">Docs</a></li>
<li class="current"><a href="../">Articles</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com/wagenaartje/neataptic" target="blank"><i class="fa fa-github fa-1x"></i><b> GITHUB</b></a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="margin-top: 60px">
<div class="row">
<!-- Sidebar -->
<div class="col-sm-2 col-md-2 col-lg-2">
<ul id="sidebar" class="nav">
<li class="">
<a href="../neuroevolution/">Neuroevolution</a>
</li>
<li class="">
<a href="../targetseeking/">Target-seeking AI</a>
</li>
<li class="">
<a href="../agario/">Agar.io AI</a>
</li>
<li class="active">
<a href="./">Classify colors</a>
</li>
<li class="">
<a href="../playground/">Playground</a>
</li>
</ul>
</div>
<!-- Content -->
<div class="col-sm-10 col-md-10 col-lg-10 content">
<h1 style="margin-bottom: 0px;">Classify colors</h1>
<p><a style="text-decoration: none" href="https://github.com/wagenaartje/neataptic/edit/master/mkdocs/templates/articles\classifycolors.md"><i class="fa fa-github fa-1x"></i> Edit on Github</a></p>
<hr>
<p>Classifying is something a neural network can do quite well. In this article
I will demonstrate how you can set up the evolution process of a neural network
that learns to classify colors with Neataptic.</p>
<p>Colors:
<label class="checkbox-inline"><input class="colors" type="checkbox" value="red" checked="true">Red</label>
<label class="checkbox-inline"><input class="colors" type="checkbox" value="orange">Orange</label>
<label class="checkbox-inline"><input class="colors" type="checkbox" value="yellow">Yellow</label>
<label class="checkbox-inline"><input class="colors" type="checkbox" value="green" checked="true">Green</label>
<label class="checkbox-inline"><input class="colors" type="checkbox" value="blue" checked="true">Blue</label>
<label class="checkbox-inline"><input class="colors" type="checkbox" value="purple">Purple</label>
<label class="checkbox-inline"><input class="colors" type="checkbox" value="pink">Pink</label>
<label class="checkbox-inline"><input class="colors" type="checkbox" value="monochrome">Monochrome</label></p>
<p><a href="#" class="start" style="text-decoration: none"><span class="glyphicon glyphicon-play"></span> Start evolution</a></p>
<pre class="stats">Iteration: <span class="iteration">0</span> Best-fitness: <span class="bestfitness">0</span></pre>
<div class="row" style="margin-top: -15px;">
<div class="col-md-6">
<center><h2 class="blocktext">Set sorted by color</h3></center>
<div class="row set" style="padding: 30px; margin-top: -40px; padding-right: 40px;">
</div>
</div>
<div class="col-md-6">
<center><h2 class="blocktext">Set sorted by NN</h3></center>
<div class="row fittestset" style="padding-left: 40px;">
</div>
</div>
</div>
<hr>
<h3 id="how-it-works">How it works</h3>
<p>The algorithm to this classification is actually <em>pretty</em> easy. One of my biggest
problem was generating the colors, however I stumbled upon <a href="https://github.com/davidmerfield/randomColor">this</a>
Javascript library that allows you to generate colors randomly by name - exactly
what I needed (but it also created a problem, read below). So I used it to create
a training set:</p>
<pre><code class="javascript">function createSet(){
var set = [];
for(index in COLORS){
var color = COLORS[index];
var randomColors = randomColor({ hue : color, count: PER_COLOR, format: 'rgb'});
for(var random in randomColors){
var rgb = randomColors[random];
random = rgb.substring(4, rgb.length-1).replace(/ /g, '').split(',');
for(var y in random) random[y] = random[y]/255;
var output = Array.apply(null, Array(COLORS.length)).map(Number.prototype.valueOf, 0);
output[index] = 1;
set.push({ input: random, output: output, color: color, rgb: rgb});
}
}
return set;
}
</code></pre>
<p><em>COLORS</em> is an array storing all color names in strings. The possible colors are
listed above. Next, we convert this rgb string to an array and normalize the
values between 0 and 1. Last of all, we normalize the colors using
<a href="https://www.quora.com/What-is-one-hot-encoding-and-when-is-it-used-in-data-science">one-hot encoding</a>.
Please note that the <code>color</code>and <code>rgb</code> object attributes are irrelevant for the algorithm.</p>
<pre><code class="javascript">network.evolve(set, {
iterations: 1,
mutationRate: 0.6,
elisitm: 5,
popSize: 100,
mutation: methods.mutation.FFW,
cost: methods.cost.MSE
});
</code></pre>
<p>Now we create the built-in genetic algorithm in neataptic.js. We define
that we want to use all possible mutation methods and set the mutation rate
higher than normal. Sprinkle in some elitism and double the default population
size. Experiment with the parameters yourself, maybe you'll find even better parameters!</p>
<p>The fitness function is the most vital part of the algorithm. It basically
calculates the <a href="https://en.wikipedia.org/wiki/Mean_squared_error">Mean Squared Error</a>
of the entire set. Neataptic saves the programming of this fitness calculation.
At the same time the default <code>growth</code> parameter is used, so the networks will
get penalized for being too large.</p>
<p>And putting together all this code will create a color classifier.</p>
</div>
</div>
</div>
<!-- Javascript (only for blogs) -->
<script src="../../js/articles/classifycolors/import.js"></script>
<script>
$("table").each(function(){
$(this).addClass('table table-striped');
});
$(".current").each(function(){
var text = $(this).text().toLowerCase();
if(window.location.pathname.indexOf(text) >= 0){
$('.active').removeClass('active');
$(this).addClass('active');
}
})
</script>
</body>