-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
128 lines (116 loc) · 8.34 KB
/
index.html
File metadata and controls
128 lines (116 loc) · 8.34 KB
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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Alegreya:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="spinner.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="keras.js"></script>
<script src="three.min.js"></script>
<script src="bundle.js"></script>
<script src="imagenet.js"></script>
<script type="x-shader/x-vertex" id="vertexshader">
attribute float alpha;
attribute vec3 color;
attribute float size;
varying float vAlpha;
varying vec3 vColor;
void main() {
vAlpha = alpha;
vColor = color;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * (500.0 / length(mvPosition.xyz));
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
varying vec3 vColor;
varying float vAlpha;
void main() {
if (vAlpha > 0.01) {
gl_FragColor = vec4( vColor, vAlpha );
} else {
discard;
}
}
</script>
</head>
<body>
<div class="content">
<h2>SCANNING AN ARTIFICIAL BRAIN</h2>
<h3>a look inside a neural network</h3>
<div class="text">
<p>When you look at a photo of a cat, your retinas absorb light and send information through layers of neurons in your brain until you suddenly think 'cat!' In artificial neural networks, image data flows through layers of artificial neurons (mathematical representations instead of the messy stuff in your head) until it finally guesses: 'cat with 99% probability.'</p>
<img src="brain-cat.png" style="max-width: 500px"/>
<img src="https://upload.wikimedia.org/wikipedia/en/d/d1/FMRIscan.jpg" style="float:left; margin-right:10px; margin-top:20px; width:170px;"/>
<p>An unfortunate property of neural networks is that it's really hard to figure out why it gave you a particular answer. They're essentially enormous mathematical functions with millions of parameters - assigning meaning to these parameters is a Sisyphean task. </p>
<p>This visualization is a peek inside a neural network by highlighting which neurons get excited when shown an image, similar to how an MRI scan shows which parts of the brain responds to certain stimuli. </p>
<!-- <p>Image data enters the leftmost layer (you can still make out the rough shape of the original image) and as the signal passes through the network, neurons get excited and light up. The last layer the system guesses what's in the image by highlighting a square. Each square represents one of a thousand categories like 'cat' or 'airplane.'</p>-->
</div>
<div id="source">
<p>
SELECT AN IMAGE:
<select id="image-urls">
<option value="">Loading model..</option>
</select>
</p>
OR PASTE AN IMAGE URL <input id="image-input"></input> <button type="button" id="button">GO!</button><br/>
<br/>
<canvas id="input-canvas" width="227" height="227"></canvas>
</div>
<div style="clear: both;"></div>
</div>
<script src="image_urls.js"></script>
<script src="vis.js"></script>
<script src="index.js"></script>
<div id="vis-container">
<div id="vis">
</div>
<svg id="svg"><line id="tool_line" stroke-width="1" stroke="white"/></svg>
<div id="predictions"></div>
<div id="info">
Click and drag to rotate and use the arrow keys to zoom in.
<br />
Hover over the final layer!
</div>
<div id="tooltip"></div>
<div class="label" id="progress">Downloading Neural Net</div>
<table>
<tr> <td><div class="legend" style="background-color: #FF8800"</div> </td> <td>Highly Active</td></tr>
<tr> <td><div class="legend" style="background-color: #FFCC22"</div> </td> <td></td></tr>
<tr> <td><div class="legend" style="background-color: #FFFF44"</div> </td> <td></td></tr>
<tr> <td><div class="legend" style="background-color: #CCFFAA"</div> </td> <td></td></tr>
<tr> <td><div class="legend" style="background-color: #88FFFF"</div> </td> <td>Moderate</td></tr>
<tr> <td><div class="legend" style="background-color: rgba(192,255,255,1)"</div> </td> <td></td></tr>
<tr> <td><div class="legend" style="background-color: rgba(255,255,255,.75)"</div> </td> <td></td></tr>
<tr> <td><div class="legend" style="background-color: rgba(255,255,255,.25)"</div> </td> <td></td></tr>
<tr> <td><div class="legend" style="background-color: rgba(255,255,255,.1)"</div> </td> <td>Not Active</td></tr>
</table>
<div id="spinner" style="display:none">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="3" stroke-miterlimit="10"/>
</svg>
</div>
<div class="label" id="start"><a href="#" onclick="startAnimate(); hideStart(); return false;">CLICK TO START ANIMATION</a></div>
</div>
<!--
<div class="text">
<p>The way you teach neural nets and brains end up being pretty similar.</p>
<p>Let's say you're reading a picture book to a toddler. You point at the cute animals and enthusiastically call out "Lamb!" "Dog!" or "Cat!" - if the child points at a cow and says "Pig!" you'd gently correct "No, that's a cow, not a pig." After many repetitions, the young brain will magically wire its neurons up to identify farm animals. </p>
<p>Analagously, researchers show a network millions of labelled photographs, compressing years of human visual experience into a few hours. If the network claims an image labelled 'bed' is an airplane, instead of wiring up physical neurons it corrects itself by nudging mathematical parameters.</p>
</div>
-->
<div class="content2" >
<div class="text">
<h4> So What am I looking at?</h4>
<p>Here each dot in this represents a neuron from the <a href src="https://github.com/DeepScale/SqueezeNet">Squeezenet</a> network, pre-trained to recognize 1000 objects. Different input images will excite different regions of neurons. The neural net runs directly in your browser (and your GPU if you have one).</p>
<p>A neuron receives signals from neurons in the layer before it. The strengths of these connections get 'learned' when a neural network is trained, so a neuron may learn to ignore an input from Neuron A or give extra weight to Neuron B. If the weighted sum of all inputs is big enough (imagine many rivers flowing into a reservoir until a dam is breached; see GIF) the neuron gets 'activated' and sends a signal out to neurons in the next layer, continuing this cycle. If the threshold is not reached, even if it's only by a smidge, there is no output (well this is not always true.. but valid for illustrative purposes). </p>
<p> Each block in this visualization represents a layer of neurons in the neural network. These layers are arranged sequentially and you can see a vague outline of the original image in the first layer; this is because neurons in earlier layers tend to detect low-level details like edges, corners, colors, etc (known as 'features' in computer vision) and will become excited when they see these features.</p>
<p> Interestingly, no one explicitly programmed these neurons to learn to identify these features. This is a sharp contrast to pre-deep learning Computer Vision algorithms where artisinal hand-crafted features were the norm. The whole network figured out on their own that these are important pieces of information to recognize objects! <p>
<p> After the signals pass through the entire network they reach the final layer, composed of 1000 neurons with each representing a type of object. The most excited neuron in the last layer is the network's guess as to what is in the image.
<p> This was created using <a href="https://github.com/transcranial/keras-js">keras.js</a> and <a href="https://threejs.org/">three.js</a>. Source code <a href="https://github.com/albertlai/inception-vis"> on Github</a>. Tweet <a href="https://twitter.com/albertlai">@albertlai</a> feedback!
</p>
</div>
<img src="http://i.imgur.com/LbFin5P.gif" title="source: imgur.com" style="width:400px; float:left; margin-left:-50px; margin-top:30px;" />
</div>
</body>