You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
226 lines
5.7 KiB
HTML
226 lines
5.7 KiB
HTML
6 years ago
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="NeuralNetwork.js"></script>
|
||
|
|
<script src="Neuron.js"></script>
|
||
|
|
<script src="NeuronLayer.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body{
|
||
|
|
padding:0;
|
||
|
|
margin:0;
|
||
|
|
overflow:hidden;
|
||
|
|
font-family:Helvetica;
|
||
|
|
font-size:10px;
|
||
|
|
}
|
||
|
|
input{
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
p{
|
||
|
|
padding:0;
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#input{
|
||
|
|
position:absolute;
|
||
|
|
top:100px;
|
||
|
|
left:10px;
|
||
|
|
}
|
||
|
|
#first_layer{
|
||
|
|
position:absolute;
|
||
|
|
top: 100px;
|
||
|
|
left: 200px;
|
||
|
|
}
|
||
|
|
#second_layer{
|
||
|
|
position:absolute;
|
||
|
|
top: 100px;
|
||
|
|
left: 400px;
|
||
|
|
}
|
||
|
|
#output{
|
||
|
|
position:absolute;
|
||
|
|
top: 100px;
|
||
|
|
left: 600px;
|
||
|
|
}
|
||
|
|
#network_container{
|
||
|
|
position:absolute;
|
||
|
|
top: 100px;
|
||
|
|
left: 600px;
|
||
|
|
margin-left:-400px;
|
||
|
|
margin-top:-250px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<canvas id="myCanvas" width="100%" height="100%"></canvas>
|
||
|
|
<div id="network_container">
|
||
|
|
<div id="input">
|
||
|
|
|
||
|
|
|
||
|
|
<input type="range" min="0" max="100" value="1" class="i0" id="i0">
|
||
|
|
<p id="i0_output"></p>
|
||
|
|
<input type="range" min="0" max="100" value="10" class="i1" id="i1">
|
||
|
|
<p id="i1_output"></p>
|
||
|
|
</div>
|
||
|
|
<div id = "first_layer">
|
||
|
|
<input type="range" min="-400" max="400" value="10" class="w0" id="w0">
|
||
|
|
<p id="w0_output"></p>
|
||
|
|
<input type="range" min="-400" max="400" value="10" class="w1" id="w1">
|
||
|
|
<p id="w1_output"></p><br><br>
|
||
|
|
<input type="range" min="-400" max="400" value="10" class="w2" id="w2">
|
||
|
|
<p id="w2_output"></p>
|
||
|
|
<input type="range" min="-400" max="400" value="10" class="w3" id="w3">
|
||
|
|
<p id="w3_output"></p><br><br>
|
||
|
|
<input type="range" min="-400" max="400" value="10" class="w4" id="w4">
|
||
|
|
<p id="w4_output"></p>
|
||
|
|
<input type="range" min="-400" max="400" value="10" class="w5" id="w5">
|
||
|
|
<p id="w5_output"></p>
|
||
|
|
</div>
|
||
|
|
<div id = "second_layer">
|
||
|
|
<input type="range" min="-400" max="400" value="10" class="w6" id="w6">
|
||
|
|
<p id="w6_output"></p>
|
||
|
|
<input type="range" min="-400" max="400" value="10" class="w7" id="w7">
|
||
|
|
<p id="w7_output"></p>
|
||
|
|
<input type="range" min="-400" max="400" value="10" class="w8" id="w8">
|
||
|
|
<p id="w8_output"></p><br><br>
|
||
|
|
<input type="range" min="-400" max="400" value="10" class="w9" id="w9">
|
||
|
|
<p id="w9_output"></p>
|
||
|
|
<input type="range" min="-400" max="400" value="10" class="w10" id="w10">
|
||
|
|
<p id="w10_output"></p>
|
||
|
|
<input type="range" min="-400" max="400" value="10" class="w11" id="w11">
|
||
|
|
<p id="w11_output"></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="output">
|
||
|
|
<input id="clickMe" type="button" value="update network" onclick="update();" />
|
||
|
|
<input id="random" type="button" value="random network" onclick="random();" />
|
||
|
|
|
||
|
|
<p id="network_output"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var numInputs = 2;
|
||
|
|
var numOutputs = 2;
|
||
|
|
var numHiddenLayers = 1;
|
||
|
|
var numNeuronsPerHiddenLayer = 3;
|
||
|
|
|
||
|
|
var slider = [];
|
||
|
|
var output = [];
|
||
|
|
|
||
|
|
var neuralNetwork = new NeuralNetwork(numInputs, numOutputs, numHiddenLayers, numNeuronsPerHiddenLayer);
|
||
|
|
|
||
|
|
|
||
|
|
var input0 = document.getElementById("i0")
|
||
|
|
var input_display0 = document.getElementById("i0_output")
|
||
|
|
input_display0.innerHTML = input0.value/100;
|
||
|
|
input0.oninput = function() {
|
||
|
|
input_display0.innerHTML = this.value/100;
|
||
|
|
}
|
||
|
|
var input1 = document.getElementById("i1")
|
||
|
|
var input_display1 = document.getElementById("i1_output")
|
||
|
|
input_display1.innerHTML = input1.value/100;
|
||
|
|
input1.oninput = function() {
|
||
|
|
input_display1.innerHTML = this.value/100;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//slider
|
||
|
|
for (var i = 0; i<12; i++){
|
||
|
|
slider.push(document.getElementById("w"+i));
|
||
|
|
output.push(document.getElementById("w"+i+"_output"));
|
||
|
|
output[i].innerHTML = slider[i].value/100;
|
||
|
|
slider[i].oninput = function() {
|
||
|
|
output[slider.indexOf(this)].innerHTML = this.value/100;
|
||
|
|
|
||
|
|
updateCanvas()
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('mousemove', function(e) {
|
||
|
|
console.log("move")
|
||
|
|
var x = e.clientX / window.innerWidth;
|
||
|
|
var y = e.clientY / window.innerHeight;
|
||
|
|
input0.value=x*100;
|
||
|
|
input1.value=y*100;
|
||
|
|
input_display0.innerHTML = x;
|
||
|
|
input_display1.innerHTML = y;
|
||
|
|
update([x,y])
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
//CANVAS STUFF
|
||
|
|
var c = document.getElementById("myCanvas");
|
||
|
|
var ctx = c.getContext("2d");
|
||
|
|
ctx.canvas.width = window.innerWidth;
|
||
|
|
ctx.canvas.height = window.innerHeight;
|
||
|
|
var stepsize = 50;
|
||
|
|
for(var x = 0; x < window.innerWidth; x = x+stepsize){
|
||
|
|
for(var y = 0; y < window.innerHeight; y = y+stepsize){
|
||
|
|
var outputs = neuralNetwork.update([x/window.innerWidth,y/window.innerHeight]);
|
||
|
|
ctx.fillStyle = 'hsl(' + 360 * outputs[0] + ', 50%,'+outputs[1]*100 +'%)';
|
||
|
|
//ctx.fillStyle= "rgb(255,20,255);"
|
||
|
|
console.log(outputs[1]*255)
|
||
|
|
ctx.fillRect(x,y,stepsize,stepsize);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function updateCanvas(){
|
||
|
|
|
||
|
|
var stepsize = 50;
|
||
|
|
for(var x = 0; x < window.innerWidth; x = x+stepsize){
|
||
|
|
for(var y = 0; y < window.innerHeight; y = y+stepsize){
|
||
|
|
var outputs = neuralNetwork.update([x/window.innerWidth,y/window.innerHeight]);
|
||
|
|
ctx.fillStyle = 'hsl(' + 360 * outputs[0] + ', 90%,'+outputs[1]*100+'%)';
|
||
|
|
//ctx.fillStyle= "rgb(255,20,255);"
|
||
|
|
console.log(outputs[1]*255)
|
||
|
|
ctx.fillRect(x,y,stepsize,stepsize);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function update(inputs){
|
||
|
|
|
||
|
|
|
||
|
|
var weights = neuralNetwork.getWeights();
|
||
|
|
var newWeights = [];
|
||
|
|
for (var i=0; i < weights.length; i++) {
|
||
|
|
newWeights.push(slider[i].value/100);
|
||
|
|
//newWeights.push(1);
|
||
|
|
}
|
||
|
|
neuralNetwork.setWeights(newWeights);
|
||
|
|
|
||
|
|
|
||
|
|
//var inputs = [input0.value/100, input1.value/100];
|
||
|
|
var outputs = neuralNetwork.update(inputs);
|
||
|
|
// console.log(neuralNetwork.getWeights());
|
||
|
|
var output_display = document.getElementById("network_output")
|
||
|
|
output_display.innerHTML = "<br> "+outputs[0] + "<br><br> "+outputs [1];
|
||
|
|
|
||
|
|
document.getElementById('network_container').style.left=outputs[0]*window.innerWidth;
|
||
|
|
document.getElementById('network_container').style.top=outputs[1]*window.innerHeight;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
random()
|
||
|
|
function random(inputs){
|
||
|
|
|
||
|
|
for (var i = 0; i<slider.length; i++){
|
||
|
|
|
||
|
|
slider[i].value = Math.random()*800-400;
|
||
|
|
output[slider.indexOf(slider[i])].innerHTML = slider[i].value/100;
|
||
|
|
}
|
||
|
|
updateCanvas();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|