-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathviz.html
140 lines (124 loc) · 4.57 KB
/
viz.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
<html>
<head>
<title>Visualizing a neural network</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/npgmain.js"></script>
<script src="js/util.js"></script>
<script src="js/convnet.js"></script>
<script src="js/netviz.js"></script>
<style type="text/css">
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #333;
padding: 20px;
}
canvas {
border: 1px solid #555;
}
#histcanvas {
border: none;
}
#wrap {
width: 1280px;
margin-right: auto;
margin-left: auto;
margin-bottom: 200px;
}
.panes {
display: flex;
}
.pane {
width: 200px;
display: inline-block;
vertical-align: top;
}
/*#layerdef {
display: none;
}
#buttontp {
display: none;
}*/
input[type="submit"] {
margin: 3px;
}
</style>
</head>
<body>
<div id="wrap">
<center>
<p> <b>Instructions:</b>
<br>
Clicking on a node in the large viz will display its activation with respect to the input.
<br>
You may click and drag the small circles in the large viz to alter network weights.
<br>
Try clicking a node and watch how changes to an incoming weight alter its activation function with respect to
the activation of the node above.
<br>
Once you have trained the network, you can go back to previous states by clicking on the tree that will show up
directly below.
</p>
<canvas id="histcanvas" width="1200" height="50"></canvas>
<br>
<input id="toggletrain" type="submit" value="start training" onclick="toggleTrain()"
style="width: 300px; height: 50px;" />
<input id="steptrain" type="submit" value="training step" onclick="stepTrain()"
style="width: 300px; height: 50px;" />
<br>
<div style="display: flex; justify-content: space-evenly;">
<div>
<canvas id="nncanvas" width="600" height="400">Browser not supported for Canvas. Get a real browser.</canvas>
</div>
<div class="panes">
<div class="pane">
<canvas id="nodecanvas" width="200" height="200">Browser not supported for Canvas. Get a real
browser.</canvas>
</div>
<div class="pane">
<canvas id="NPGcanvas" width="200" height="200">Browser not supported for Canvas. Get a real
browser.</canvas>
<input id="buttondata1" type="submit" value="simple data" onclick="original_data();"
style="width: 120px; height: 30px;" />
<input id="buttondata2" type="submit" value="circle data" onclick="circle_data();"
style="width: 120px; height: 30px;" />
<input id="buttondata3" type="submit" value="spiral data" onclick="spiral_data();"
style="width: 120px; height: 30px;" /><br>
<input id="buttondata4" type="submit" value="concentric rings" onclick="concentric_rings();"
style="width: 120px; height: 30px;" />
<input id="buttondata5" type="submit" value="random data" onclick="random_data();"
style="width: 120px; height: 30px;" />
<input id="buttondata6" type="submit" value="clear data" onclick="clear_data();"
style="width: 120px; height: 30px;" />
<br>
<p>
Controls:<br>
<b>CLICK</b>: Add red data point<br>
<b>SHIFT+CLICK</b>: Add green data point<br>
<b>CTRL+CLICK</b>: Remove closest data point<br>
</p>
</div>
<div class="pane">
<canvas id="viscanvas" width="200" height="200">Browser not supported for Canvas. Get a real
browser.</canvas>
<div id="cyclestatus"></div>
<div id="layer_ixes"></div>
<input id="buttoncycle" type="submit"
value="cycle through visualized neurons at selected layer (if more than 2)" onclick="cycle();"
style="text-wrap: balance;" />
</div>
</div>
</div>
<br>
<textarea id="layerdef" style="width:100%; height:200px;"></textarea>
<br>
<input id="buttontp" type="submit" value="change network" onclick="reload();"
style="width: 300px; height: 50px;" />
<br>
<p>This is built on top of <a
href="http://cs.stanford.edu/people/karpathy/convnetjs/demo/classify2d.html">Karpathy's demo</a> in his <a
href="https://github.com/karpathy/convnetjs"> convnetjs library </a>.
</p>
</center>
</div>
</body>
</html>