-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
198 lines (158 loc) · 8.81 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<title>McCulloch & Pitts Neural Net Simulator</title>
<style>
body {
background-color: white;
font-family: Lucida Console, Courier, monospace;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
#content {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 800px;
}
#main-canvas {
border: 1px solid black;
}
.context-menu {
display: none;
position: absolute;
z-index: 10;
background-color: white;
border: 1px solid black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.context-menu ul {
list-style: none;
padding: 8px;
margin: 0;
}
.context-menu ul li {
cursor: pointer;
}
.context-menu ul li:hover {
background-color: rgb(200, 200, 200);
}
.context-menu.active {
display: block;
}
.controls {
margin-bottom: 0.5rem;
}
#storage-controls input {
width: 100%;
margin-top: 0.25rem;
}
</style>
</head>
<body>
<div id="content">
<h2>McCulloch & Pitts Neural Net Simulator</h2>
<canvas id="main-canvas" width="800" height="600"></canvas>
<div id='new-menu' class="context-menu">
<ul>
<li data-action="new-cell">New Neuron</li>
<li data-action="new-label">New Label</li>
</ul>
</div>
<div id="cell-menu" class="context-menu">
<ul>
<li data-action="delete">Delete</li>
<li data-action="flip">Flip</li>
</ul>
</div>
<div id="label-menu" class="context-menu">
<ul>
<li data-action="delete">Delete</li>
<li data-action="edit">Edit</li>
</ul>
</div>
<div id="fiber-menu" class="context-menu">
<ul>
<li data-action="delete">Delete</li>
<li data-action="toggle">Toggle</li>
</ul>
</div>
<div id="playback-controls" class="controls">
<span id="time"></span>
<button id="play-btn">Pause</button>
<button id="step-btn" accesskey="s">Step</button>
<button id="restart-btn">Restart</button>
</div>
<div id="storage-controls" class="controls">
<button id="load-btn">Load</button>
<button id="save-btn">Save</button>
<span>Use copy and paste here</span>
<input id="storage-input" type="text"/>
</div>
<h2>How does this work?</h2>
<p>
Each <b>neuron</b> has input <b>fibers</b> and output fibers which connect it to other neurons.
A neuron fires after it receives a number of signals from its input fibers, greater or equal to its threshold (the number written on it.)
Fibers which have a circle at the end are called <b>inhibitory</b> fibers. If a neuron receives an inhibitory signal, it will not fire, regardless of how many signals it receives.
</p>
<h2>Examples</h2>
<ul>
<li>
<a href="?">Instructions (startup screen)</a>
</li>
<li>
<a href="?d=examples/memory_gate.net">Memory Gate</a>
</li>
<li>
<a href="?d=examples/unary_scaler.net">Unary Scaler</a>
</li>
<li><a href="?d=examples/binary_scaler.net">Binary Scaler</a>
</li>
<li><a href="?d=examples/chained_scaler.net">Chained Scaler</a>
</li>
<li>
<a href="?d=examples/binary_adder.net">Binary Adder</a>
</li>
</ul>
You can share your own neural nets too! Copy the saved text to an online location (like a Gist)
and append it to the end of the URL like so: <code>?d={YOUR URL}</code>.
Contribute yours to the <a href="https://github.com/justinmeiners/neural-nets-sim">list</a>!
<h2>What are McCulloch & Pitts Neural Nets?</h2>
<p>
<a href="https://en.wikipedia.org/wiki/Warren_Sturgis_McCulloch">McCulloch</a> and
<a href="https://en.wikipedia.org/wiki/Walter_Pitts">Pitts</a>
were researchers in neuroscience who became <a href="https://www.dlsi.ua.es//~mlf/nnafmc/pbook/node10.html">pioneers in artificial intelligence.</a>
In 1943 they created a <a href="papers/mcp.pdf">computation model</a> of how neurons fire in our brains.
This project is a simulator of that model.
</p>
<img alt="neuron" class="center" src="img/mcp.gif">
<p>
Even though these neural nets are inspired by biology, they aren't an accurate representation of their physical properties. They are a simplification for computational purposes.
Marvin Minsky says:
</p>
<blockquote>
It should be understood clearly that neither McCulloch, Pitts, nor the present writer considers these devices and machines to serve as accurate physiological models of nerve cells and tissues. They were not designed with that purpose in mind. They are designed for the representation and analysis of the logic of situations that arise in any discrete process, be it in brain, computer, or anywhere else. In theories which are more seriously intended to be brain models, the "neurons" have to be much more complicated. The real biological neuron is much more complex than our simple
logical units for the evolution of nerve cells has led to very intricate and specialized organs.
</blockquote>
<p>
Their work later became important in the Theory of Computation. In 1951, <a href="https://en.wikipedia.org/wiki/Stephen_Cole_Kleene">Kleene</a> proved that the
patterns which are recognizable by the neural nets are precisely the <a href="papers/kleene.pdf">Regular Expressions</a>. This is commonly known as <a href="https://www.cs.odu.edu/~toida/nerzic/390teched/regular/fa/kleene-1.html">Kleene's Theorem</a>. Finite state machines and neural nets are computationally equivalent.
</p>
<p>
If you want to learn more, I recommend Marvin Minsky's book: <a href="https://dl.acm.org/citation.cfm?id=1095587">Computation: Finite & Infinite</a>.
Also see <a href="http://www.alanturing.net/ace/index.html#section3figs">Turing's</a> diagrams
which use similar nets.
</p>
</div>
<a href="https://github.com/justinmeiners/neural-nets-sim" class="github-corner" aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
</a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<script src="neural_nets.js"></script>
</body>
</html>