-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
147 lines (143 loc) · 5.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-131390792-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-131390792-1');
</script>
<!-- Libraries -->
<script src="https://cdn.rawgit.com/wagenaartje/neataptic/a7610e38/dist/neataptic.js"></script>
<script src="lib/tf.js"></script>
<script src="lib/planck-with-testbed.js"></script>
<script src="lib/utils.js"></script>
<script src="./robot.js"></script>
</head>
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
margin-left: 50px;
margin-right: 50px;
}
</style>
<body>
<h1><a id="NeuroevolutionBots_0"></a>Neuroevolution-Bots</h1>
<p>Neuroevolution-Bots is a personal project that demonstrates <a href="https://en.wikipedia.org/wiki/Neuroevolution">neuroevolution</a>
in a browser environment using <a href="https://js.tensorflow.org/">TensorFlow.js</a>, <a href="https://github.com/wagenaartje/neataptic">Neataptic</a>
(for neural nets) and HTML5 Canvas (for graphics). I tried to create a scaled down 2D version of the popular <a
href="https://gym.openai.com/envs/Humanoid-v2/">Gym’s Humanoid-v2 environment</a> using <a href="http://piqnt.com/planck.js/">Planck.js</a>,
a JavaScript rewrite of Box2D.</p>
<p>The bots in the simulation have simple brains (neural nets) that control their movements. Input to the brains: bot’s
head position in the world space and angles of bot’s leg and knee joints; output of the brains: rotation forces to
bot’s leg and knee joints. After every iteration, a fitness function chooses the most fit bots to the next
iteration (fitness score of bot: how much the bot traveled to the right + whether bot fell down or not).</p>
<p>Two variations of neuroevolution are available:</p>
<ul>
<li><a href="http://nn.cs.utexas.edu/downloads/papers/stanley.ec02.pdf">NEAT</a> (network architecture and weights
are updated)</li>
<li>Vanilla Neuroevolution (only network weights are updated)</li>
</ul>
<p>Source code available: <a href="https://github.com/mishig25/neuroevolution-robots">here</a></p>
<table>
<tr>
<td>Algorithm:</td>
<td>
<select id="algo" onchange="algoChange()">
<option value="neat">NEAT</option>
<option value="vne">Vanilla Neuroevolution</option>
</select>
</td>
</tr>
<tr>
<td>Training:</td>
<td>
<select id="pretrain" onchange="pretrainChange()">
<option value="yes">Load Pre-trained Weights</option>
<option value="no">Start from Scratch</option>
</select>
</td>
</tr>
<tr>
<td>Goal:</td>
<td>walk to the right side of the screen while not falling down</td>
</tr>
<tr>
<td>Generation:</td>
<td id="generation">1</td>
</tr>
<tr>
<td>Generation Period:</td>
<td id="gperiod">5 seconds</td>
</tr>
<tr>
<td>Population size:</td>
<td id="popsize">0</td>
</tr>
<tr>
<td>Muttion Rate:</td>
<td id="mrate">5%</td>
</tr>
<tr>
<td>Avg Score:</td>
<td id="score">0</td>
</tr>
<tr>
<td>Max Score:</td>
<td id="maxscore">0</td>
</tr>
</table>
<canvas id="canvas" width="800" height="300"></canvas>
<p>*live training is happening in your browser. Try dragging one of the bots</p>
<p>References and inspirations:</p>
<ul>
<li><a href="https://eng.uber.com/deep-neuroevolution/">Uber’s blogpost on Deep Neuroevolution</a></li>
<li><a href="http://www.evolvingai.org/robotics">Evolving AI Lab posts</a></li>
<li><a href="https://github.com/openai/roboschool">Roboschool by OpenAI</a></li>
<li><a href="https://github.com/adityathebe/evolutionSimulator">Evolution Simulator by Aditya Thebe</a></li>
<li><a href="https://twitter.com/hardmaru/status/1007150247829594112?lang=en">Tweet by hardmaru</a></li>
</ul>
</body>
<script>
const algo = sessionStorage.getItem('algo');
const pretrain = sessionStorage.getItem('pretrain');
function algoChange() {
const val = document.getElementById("algo").value;
sessionStorage.setItem('algo', val);
location.reload();
};
function pretrainChange(){
const val = document.getElementById("pretrain").value;
sessionStorage.setItem('pretrain', val);
setTimeout(() => {location.reload()}, 200);
};
const d = document,
h = d.getElementsByTagName('head')[0];
if (pretrain == 'no') {
document.getElementById("pretrain").selectedIndex = 1;
} else {
document.getElementById("pretrain").selectedIndex = 0;
};
var scrpts;
if (algo == 'vne') {
document.getElementById("algo").selectedIndex = 1;
scrpts = ["./vanilla_ne/pretrained.js", "./vanilla_ne/nn.js", "./vanilla_ne/ga.js",
"./vanilla_ne/robot_vne.js"];
}else{
document.getElementById("algo").selectedIndex = 0;
scrpts = ["./neat/pretrained.js", "./neat/robot_neat.js",
"./neat/neat.js"];
}
scrpts.forEach((src) => {
var s = d.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = src;
h.appendChild(s);
});
</script>
<script src="./main.js"></script>
</html>