Upload 5 files
Browse files- analytics.js +7 -0
- bundle.css +0 -0
- bundle.js +0 -0
- index.html +398 -16
- lib.js +0 -0
analytics.js
ADDED
@@ -0,0 +1,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
2 |
+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
3 |
+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
4 |
+
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
5 |
+
|
6 |
+
var ANALYTICS_ID = 'Add your own analytics ID here';
|
7 |
+
ga('create', ANALYTICS_ID, 'auto');
|
bundle.css
ADDED
File without changes
|
bundle.js
ADDED
File without changes
|
index.html
CHANGED
@@ -1,19 +1,401 @@
|
|
1 |
<!doctype html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2 |
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
19 |
</html>
|
|
|
1 |
<!doctype html>
|
2 |
+
<!-- Copyright 2016 Google Inc. All Rights Reserved.
|
3 |
+
|
4 |
+
Licensed under the Apache License, Version 2.0 (the "License");
|
5 |
+
you may not use this file except in compliance with the License.
|
6 |
+
You may obtain a copy of the License at
|
7 |
+
|
8 |
+
http://www.apache.org/licenses/LICENSE-2.0
|
9 |
+
|
10 |
+
Unless required by applicable law or agreed to in writing, software
|
11 |
+
distributed under the License is distributed on an "AS IS" BASIS,
|
12 |
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13 |
+
See the License for the specific language governing permissions and
|
14 |
+
limitations under the License.
|
15 |
+
==============================================================================-->
|
16 |
<html>
|
17 |
+
<head lang="en">
|
18 |
+
<link rel="icon" type="image/png" href="favicon.png">
|
19 |
+
<meta charset="utf-8">
|
20 |
+
<meta name="viewport" content="width=1024">
|
21 |
+
<meta name="keywords" content="neural networks,machine learning,javascript">
|
22 |
+
|
23 |
+
<meta property="og:type" content="article"/>
|
24 |
+
<meta property="og:title" content="Tensorflow — Neural Network Playground"/>
|
25 |
+
<meta property="og:description" content="Tinker with a real neural network right here in your browser.">
|
26 |
+
<meta property="og:url" content="http://playground.tensorflow.org"/>
|
27 |
+
<meta property="og:image" content="http://playground.tensorflow.org/preview.png"/>
|
28 |
+
|
29 |
+
<meta name="twitter:card" value="summary_large_image">
|
30 |
+
<meta name="twitter:title" content="Tensorflow — Neural Network Playground">
|
31 |
+
<meta name="twitter:description" content="Tinker with a real neural network right here in your browser.">
|
32 |
+
<meta name="twitter:url" content="http://playground.tensorflow.org">
|
33 |
+
<meta name="twitter:image" content="http://playground.tensorflow.org/preview.png">
|
34 |
+
<meta name="twitter:image:width" content="560">
|
35 |
+
<meta name="twitter:image:height" content="295">
|
36 |
+
|
37 |
+
<meta name="author" content="Daniel Smilkov and Shan Carter">
|
38 |
+
<title>A Neural Network Playground</title>
|
39 |
+
<link rel="stylesheet" href="bundle.css" type="text/css">
|
40 |
+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons" rel="stylesheet" type="text/css">
|
41 |
+
<script src="lib.js"></script>
|
42 |
+
</head>
|
43 |
+
<body>
|
44 |
+
<!-- GitHub link -->
|
45 |
+
<a class="github-link" href="https://github.com/tensorflow/playground" title="Source on GitHub" target="_blank">
|
46 |
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60.5 60.5" width="60" height="60">
|
47 |
+
<polygon class="bg" points="60.5,60.5 0,0 60.5,0 "/>
|
48 |
+
<path class="icon" d="M43.1,5.8c-6.6,0-12,5.4-12,12c0,5.3,3.4,9.8,8.2,11.4c0.6,0.1,0.8-0.3,0.8-0.6c0-0.3,0-1,0-2c-3.3,0.7-4-1.6-4-1.6c-0.5-1.4-1.3-1.8-1.3-1.8c-1.1-0.7,0.1-0.7,0.1-0.7c1.2,0.1,1.8,1.2,1.8,1.2c1.1,1.8,2.8,1.3,3.5,1c0.1-0.8,0.4-1.3,0.8-1.6c-2.7-0.3-5.5-1.3-5.5-5.9c0-1.3,0.5-2.4,1.2-3.2c-0.1-0.3-0.5-1.5,0.1-3.2c0,0,1-0.3,3.3,1.2c1-0.3,2-0.4,3-0.4c1,0,2,0.1,3,0.4c2.3-1.6,3.3-1.2,3.3-1.2c0.7,1.7,0.2,2.9,0.1,3.2c0.8,0.8,1.2,1.9,1.2,3.2c0,4.6-2.8,5.6-5.5,5.9c0.4,0.4,0.8,1.1,0.8,2.2c0,1.6,0,2.9,0,3.3c0,0.3,0.2,0.7,0.8,0.6c4.8-1.6,8.2-6.1,8.2-11.4C55.1,11.2,49.7,5.8,43.1,5.8z"/>
|
49 |
+
</svg>
|
50 |
+
</a>
|
51 |
+
<!-- Header -->
|
52 |
+
<header>
|
53 |
+
<h1 class="l--page">Tinker With a <b>Neural Network</b> <span class="optional">Right Here </span>in Your Browser.<br>Don’t Worry, You Can’t Break It. We Promise.</h1>
|
54 |
+
</header>
|
55 |
+
|
56 |
+
<!-- Top Controls -->
|
57 |
+
<div id="top-controls">
|
58 |
+
<div class="container l--page">
|
59 |
+
<div class="timeline-controls">
|
60 |
+
<button class="mdl-button mdl-js-button mdl-button--icon ui-resetButton" id="reset-button" title="Reset the network">
|
61 |
+
<i class="material-icons">replay</i>
|
62 |
+
</button>
|
63 |
+
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored ui-playButton" id="play-pause-button" title="Run/Pause">
|
64 |
+
<i class="material-icons">play_arrow</i>
|
65 |
+
<i class="material-icons">pause</i>
|
66 |
+
</button>
|
67 |
+
<button class="mdl-button mdl-js-button mdl-button--icon ui-stepButton" id="next-step-button" title="Step">
|
68 |
+
<i class="material-icons">skip_next</i>
|
69 |
+
</button>
|
70 |
+
</div>
|
71 |
+
<div class="control">
|
72 |
+
<span class="label">Epoch</span>
|
73 |
+
<span class="value" id="iter-number"></span>
|
74 |
+
</div>
|
75 |
+
<div class="control ui-learningRate">
|
76 |
+
<label for="learningRate">Learning rate</label>
|
77 |
+
<div class="select">
|
78 |
+
<select id="learningRate">
|
79 |
+
<option value="0.00001">0.00001</option>
|
80 |
+
<option value="0.0001">0.0001</option>
|
81 |
+
<option value="0.001">0.001</option>
|
82 |
+
<option value="0.003">0.003</option>
|
83 |
+
<option value="0.01">0.01</option>
|
84 |
+
<option value="0.03">0.03</option>
|
85 |
+
<option value="0.1">0.1</option>
|
86 |
+
<option value="0.3">0.3</option>
|
87 |
+
<option value="1">1</option>
|
88 |
+
<option value="3">3</option>
|
89 |
+
<option value="10">10</option>
|
90 |
+
</select>
|
91 |
+
</div>
|
92 |
+
</div>
|
93 |
+
<div class="control ui-activation">
|
94 |
+
<label for="activations">Activation</label>
|
95 |
+
<div class="select">
|
96 |
+
<select id="activations">
|
97 |
+
<option value="relu">ReLU</option>
|
98 |
+
<option value="tanh">Tanh</option>
|
99 |
+
<option value="sigmoid">Sigmoid</option>
|
100 |
+
<option value="linear">Linear</option>
|
101 |
+
</select>
|
102 |
+
</div>
|
103 |
+
</div>
|
104 |
+
<div class="control ui-regularization">
|
105 |
+
<label for="regularizations">Regularization</label>
|
106 |
+
<div class="select">
|
107 |
+
<select id="regularizations">
|
108 |
+
<option value="none">None</option>
|
109 |
+
<option value="L1">L1</option>
|
110 |
+
<option value="L2">L2</option>
|
111 |
+
</select>
|
112 |
+
</div>
|
113 |
+
</div>
|
114 |
+
<div class="control ui-regularizationRate">
|
115 |
+
<label for="regularRate">Regularization rate</label>
|
116 |
+
<div class="select">
|
117 |
+
<select id="regularRate">
|
118 |
+
<option value="0">0</option>
|
119 |
+
<option value="0.001">0.001</option>
|
120 |
+
<option value="0.003">0.003</option>
|
121 |
+
<option value="0.01">0.01</option>
|
122 |
+
<option value="0.03">0.03</option>
|
123 |
+
<option value="0.1">0.1</option>
|
124 |
+
<option value="0.3">0.3</option>
|
125 |
+
<option value="1">1</option>
|
126 |
+
<option value="3">3</option>
|
127 |
+
<option value="10">10</option>
|
128 |
+
</select>
|
129 |
+
</div>
|
130 |
+
</div>
|
131 |
+
<div class="control ui-problem">
|
132 |
+
<label for="problem">Problem type</label>
|
133 |
+
<div class="select">
|
134 |
+
<select id="problem">
|
135 |
+
<option value="classification">Classification</option>
|
136 |
+
<option value="regression">Regression</option>
|
137 |
+
</select>
|
138 |
+
</div>
|
139 |
+
</div>
|
140 |
+
</div>
|
141 |
+
</div>
|
142 |
+
|
143 |
+
<!-- Main Part -->
|
144 |
+
<div id="main-part" class="l--page">
|
145 |
+
|
146 |
+
<!-- Data Column-->
|
147 |
+
<div class="column data">
|
148 |
+
<h4>
|
149 |
+
<span>Data</span>
|
150 |
+
</h4>
|
151 |
+
<div class="ui-dataset">
|
152 |
+
<p>Which dataset do you want to use?</p>
|
153 |
+
<div class="dataset-list">
|
154 |
+
<div class="dataset" title="Circle">
|
155 |
+
<canvas class="data-thumbnail" data-dataset="circle"></canvas>
|
156 |
+
</div>
|
157 |
+
<div class="dataset" title="Exclusive or">
|
158 |
+
<canvas class="data-thumbnail" data-dataset="xor"></canvas>
|
159 |
+
</div>
|
160 |
+
<div class="dataset" title="Gaussian">
|
161 |
+
<canvas class="data-thumbnail" data-dataset="gauss"></canvas>
|
162 |
+
</div>
|
163 |
+
<div class="dataset" title="Spiral">
|
164 |
+
<canvas class="data-thumbnail" data-dataset="spiral"></canvas>
|
165 |
+
</div>
|
166 |
+
<div class="dataset" title="Plane">
|
167 |
+
<canvas class="data-thumbnail" data-regDataset="reg-plane"></canvas>
|
168 |
+
</div>
|
169 |
+
<div class="dataset" title="Multi gaussian">
|
170 |
+
<canvas class="data-thumbnail" data-regDataset="reg-gauss"></canvas>
|
171 |
+
</div>
|
172 |
+
</div>
|
173 |
+
</div>
|
174 |
+
<div>
|
175 |
+
<div class="ui-percTrainData">
|
176 |
+
<label for="percTrainData">Ratio of training to test data: <span class="value">XX</span>%</label>
|
177 |
+
<p class="slider">
|
178 |
+
<input class="mdl-slider mdl-js-slider" type="range" id="percTrainData" min="10" max="90" step="10">
|
179 |
+
</p>
|
180 |
+
</div>
|
181 |
+
<div class="ui-noise">
|
182 |
+
<label for="noise">Noise: <span class="value">XX</span></label>
|
183 |
+
<p class="slider">
|
184 |
+
<input class="mdl-slider mdl-js-slider" type="range" id="noise" min="0" max="50" step="5">
|
185 |
+
</p>
|
186 |
+
</div>
|
187 |
+
<div class="ui-batchSize">
|
188 |
+
<label for="batchSize">Batch size: <span class="value">XX</span></label>
|
189 |
+
<p class="slider">
|
190 |
+
<input class="mdl-slider mdl-js-slider" type="range" id="batchSize" min="1" max="30" step="1">
|
191 |
+
</p>
|
192 |
+
</div>
|
193 |
+
<button class="basic-button" id="data-regen-button" title="Regenerate data">
|
194 |
+
Regenerate
|
195 |
+
</button>
|
196 |
+
</div>
|
197 |
+
</div>
|
198 |
+
|
199 |
+
<!-- Features Column -->
|
200 |
+
<div class="column features">
|
201 |
+
<h4>Features</h4>
|
202 |
+
<p>Which properties do you want to feed in?</p>
|
203 |
+
<div id="network">
|
204 |
+
<svg id="svg" width="510" height="450">
|
205 |
+
<defs>
|
206 |
+
<marker id="markerArrow" markerWidth="7" markerHeight="13" refX="1" refY="6" orient="auto" markerUnits="userSpaceOnUse">
|
207 |
+
<path d="M2,11 L7,6 L2,2" />
|
208 |
+
</marker>
|
209 |
+
</defs>
|
210 |
+
</svg>
|
211 |
+
<!-- Hover card -->
|
212 |
+
<div id="hovercard">
|
213 |
+
<div style="font-size:10px">Click anywhere to edit.</div>
|
214 |
+
<div><span class="type">Weight/Bias</span> is <span class="value">0.2</span><span><input type="number"/></span>.</div>
|
215 |
+
</div>
|
216 |
+
<div class="callout thumbnail">
|
217 |
+
<svg viewBox="0 0 30 30">
|
218 |
+
<defs>
|
219 |
+
<marker id="arrow" markerWidth="5" markerHeight="5" refx="5" refy="2.5" orient="auto" markerUnits="userSpaceOnUse">
|
220 |
+
<path d="M0,0 L5,2.5 L0,5 z"/>
|
221 |
+
</marker>
|
222 |
+
</defs>
|
223 |
+
<path d="M12,30C5,20 2,15 12,0" marker-end="url(#arrow)">
|
224 |
+
</svg>
|
225 |
+
<div class="label">
|
226 |
+
This is the output from one <b>neuron</b>. Hover to see it larger.
|
227 |
+
</div>
|
228 |
+
</div>
|
229 |
+
<div class="callout weights">
|
230 |
+
<svg viewBox="0 0 30 30">
|
231 |
+
<defs>
|
232 |
+
<marker id="arrow" markerWidth="5" markerHeight="5" refx="5" refy="2.5" orient="auto" markerUnits="userSpaceOnUse">
|
233 |
+
<path d="M0,0 L5,2.5 L0,5 z"/>
|
234 |
+
</marker>
|
235 |
+
</defs>
|
236 |
+
<path d="M12,30C5,20 2,15 12,0" marker-end="url(#arrow)">
|
237 |
+
</svg>
|
238 |
+
<div class="label">
|
239 |
+
The outputs are mixed with varying <b>weights</b>, shown by the thickness of the lines.
|
240 |
+
</div>
|
241 |
+
</div>
|
242 |
+
</div>
|
243 |
+
</div>
|
244 |
+
|
245 |
+
<!-- Hidden Layers Column -->
|
246 |
+
<div class="column hidden-layers">
|
247 |
+
<h4>
|
248 |
+
<div class="ui-numHiddenLayers">
|
249 |
+
<button id="add-layers" class="mdl-button mdl-js-button mdl-button--icon">
|
250 |
+
<i class="material-icons">add</i>
|
251 |
+
</button>
|
252 |
+
<button id="remove-layers" class="mdl-button mdl-js-button mdl-button--icon">
|
253 |
+
<i class="material-icons">remove</i>
|
254 |
+
</button>
|
255 |
+
</div>
|
256 |
+
<span id="num-layers"></span>
|
257 |
+
<span id="layers-label"></span>
|
258 |
+
</h4>
|
259 |
+
<div class="bracket"></div>
|
260 |
+
</div>
|
261 |
+
|
262 |
+
<!-- Output Column -->
|
263 |
+
<div class="column output">
|
264 |
+
<h4>Output</h4>
|
265 |
+
<div class="metrics">
|
266 |
+
<div class="output-stats ui-percTrainData">
|
267 |
+
<span>Test loss</span>
|
268 |
+
<div class="value" id="loss-test"></div>
|
269 |
+
</div>
|
270 |
+
<div class="output-stats train">
|
271 |
+
<span>Training loss</span>
|
272 |
+
<div class="value" id="loss-train"></div>
|
273 |
+
</div>
|
274 |
+
<div id="linechart"></div>
|
275 |
+
</div>
|
276 |
+
<div id="heatmap"></div>
|
277 |
+
<div style="float:left;margin-top:20px">
|
278 |
+
<div style="display:flex; align-items:center;">
|
279 |
+
|
280 |
+
<!-- Gradient color scale -->
|
281 |
+
<div class="label" style="width:105px; margin-right: 10px">
|
282 |
+
Colors shows data, neuron and weight values.
|
283 |
+
</div>
|
284 |
+
<svg width="150" height="30" id="colormap">
|
285 |
+
<defs>
|
286 |
+
<linearGradient id="gradient" x1="0%" y1="100%" x2="100%" y2="100%">
|
287 |
+
<stop offset="0%" stop-color="#f59322" stop-opacity="1"></stop>
|
288 |
+
<stop offset="50%" stop-color="#e8eaeb" stop-opacity="1"></stop>
|
289 |
+
<stop offset="100%" stop-color="#0877bd" stop-opacity="1"></stop>
|
290 |
+
</linearGradient>
|
291 |
+
</defs>
|
292 |
+
<g class="core" transform="translate(3, 0)">
|
293 |
+
<rect width="144" height="10" style="fill: url('#gradient');"></rect>
|
294 |
+
</g>
|
295 |
+
</svg>
|
296 |
+
</div>
|
297 |
+
<br/>
|
298 |
+
<div style="display:flex;">
|
299 |
+
<label class="ui-showTestData mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="show-test-data">
|
300 |
+
<input type="checkbox" id="show-test-data" class="mdl-checkbox__input" checked>
|
301 |
+
<span class="mdl-checkbox__label label">Show test data</span>
|
302 |
+
</label>
|
303 |
+
<label class="ui-discretize mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="discretize">
|
304 |
+
<input type="checkbox" id="discretize" class="mdl-checkbox__input" checked>
|
305 |
+
<span class="mdl-checkbox__label label">Discretize output</span>
|
306 |
+
</label>
|
307 |
+
</div>
|
308 |
+
</div>
|
309 |
+
</div>
|
310 |
+
|
311 |
+
</div>
|
312 |
+
|
313 |
+
<!-- More -->
|
314 |
+
<div class="more">
|
315 |
+
<!-- <button class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons">keyboard_arrow_down</i></button> -->
|
316 |
+
<button class="mdl-button mdl-js-button mdl-button--fab">
|
317 |
+
<i class="material-icons">keyboard_arrow_down</i>
|
318 |
+
</button>
|
319 |
+
</div>
|
320 |
+
<!-- Article -->
|
321 |
+
|
322 |
+
<article id="article-text">
|
323 |
+
<div class="l--body">
|
324 |
+
<h2>Um, What Is a Neural Network?</h2>
|
325 |
+
<p>It’s a technique for building a computer program that learns from data. It is based very loosely on how we think the human brain works. First, a collection of software “neurons” are created and connected together, allowing them to send messages to each other. Next, the network is asked to solve a problem, which it attempts to do over and over, each time strengthening the connections that lead to success and diminishing those that lead to failure. For a more detailed introduction to neural networks, Michael Nielsen’s <a href="http://neuralnetworksanddeeplearning.com/index.html">Neural Networks and Deep Learning</a> is a good place to start. For a more technical overview, try <a href="http://www.deeplearningbook.org/">Deep Learning</a> by Ian Goodfellow, Yoshua Bengio, and Aaron Courville.</p>
|
326 |
+
</div>
|
327 |
+
|
328 |
+
<div class="l--body">
|
329 |
+
<h2>This Is Cool, Can I Repurpose It?</h2>
|
330 |
+
<p>Please do! We’ve open sourced it on <a href="https://github.com/tensorflow/playground">GitHub</a> with the hope that it can make neural networks a little more accessible and easier to learn. You’re free to use it in any way that follows our <a href="https://github.com/tensorflow/playground/blob/master/LICENSE">Apache License</a>. And if you have any suggestions for additions or changes, please <a href="https://github.com/tensorflow/playground/issues">let us know</a>.</p>
|
331 |
+
<p>We’ve also provided some controls below to enable you tailor the playground to a specific topic or lesson. Just choose which features you’d like to be visible below then save <a class="hide-controls-link" href="#">this link</a>, or <a href="javascript:location.reload();">refresh</a> the page.</p>
|
332 |
+
<div class="hide-controls"></div>
|
333 |
+
</div>
|
334 |
+
|
335 |
+
<div class="l--body">
|
336 |
+
<h2>What Do All the Colors Mean?</h2>
|
337 |
+
<p>Orange and blue are used throughout the visualization in slightly different ways, but in general orange shows negative values while blue shows positive values.</p>
|
338 |
+
<p>The data points (represented by small circles) are initially colored orange or blue, which correspond to positive one and negative one.</p>
|
339 |
+
<p>In the hidden layers, the lines are colored by the weights of the connections between neurons. Blue shows a positive weight, which means the network is using that output of the neuron as given. An orange line shows that the network is assiging a negative weight.</p>
|
340 |
+
<p>In the output layer, the dots are colored orange or blue depending on their original values. The background color shows what the network is predicting for a particular area. The intensity of the color shows how confident that prediction is.</p>
|
341 |
+
</div>
|
342 |
+
|
343 |
+
<div class="l--body">
|
344 |
+
<h2>What Library Are You Using?</h2>
|
345 |
+
<p>We wrote a tiny neural network <a href="https://github.com/tensorflow/playground/blob/master/src/nn.ts">library</a>
|
346 |
+
that meets the demands of this educational visualization. For real-world applications, consider the
|
347 |
+
<a href="https://www.tensorflow.org/">TensorFlow</a> library.
|
348 |
+
</p>
|
349 |
+
</div>
|
350 |
+
|
351 |
+
<div class="l--body">
|
352 |
+
<h2>Credits</h2>
|
353 |
+
<p>
|
354 |
+
This was created by Daniel Smilkov and Shan Carter.
|
355 |
+
This is a continuation of many people’s previous work — most notably Andrej Karpathy’s <a href="http://cs.stanford.edu/people/karpathy/convnetjs/demo/classify2d.html">convnet.js demo</a>
|
356 |
+
and Chris Olah’s <a href="http://colah.github.io/posts/2014-03-NN-Manifolds-Topology/">articles</a> about neural networks.
|
357 |
+
Many thanks also to D. Sculley for help with the original idea and to Fernanda Viégas and Martin Wattenberg and the rest of the
|
358 |
+
<a href="https://research.google.com/bigpicture/">Big Picture</a> and <a href="https://research.google.com/teams/brain/">Google Brain</a> teams for feedback and guidance.
|
359 |
+
</p>
|
360 |
+
</div>
|
361 |
+
</article>
|
362 |
+
|
363 |
+
<!-- Footer -->
|
364 |
+
<footer>
|
365 |
+
<div class="l--body">
|
366 |
+
<a href="https://www.tensorflow.org/" class="logo">
|
367 |
+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 528 87" xml:space="preserve">
|
368 |
+
<path d="M37.4,15.5v70.3H25V15.5H1V3.4h60.4v12.1H37.4z"/>
|
369 |
+
<path d="M149,85.8v-35c0-12.5-4.7-16.9-12.7-16.9c-8.1,0-12.7,5.8-12.7,15.8v36.1h-12.1V24h12.1v5.9c3.1-4.5,9.2-7.2,15.5-7.2
|
370 |
+
c14.4,0,22,9.4,22,27.7v35.4H149z"/>
|
371 |
+
<path d="M188.7,87.1c-8.4,0-17.4-3.3-23.7-7.9l5.5-9.2c5.8,4,12.2,6.1,18,6.1c7.7,0,11.3-2.5,11.3-6.8c0-4.7-5.4-6.9-14.4-10.4
|
372 |
+
c-13.3-5.2-18.1-9.7-18.1-19.4c0-11.1,8.7-16.8,21.1-16.8c7.8,0,15.4,2.8,21,6.8l-5.3,9.3c-5.1-3.5-10.1-5.3-16-5.3
|
373 |
+
c-5.9,0-8.5,2.4-8.5,5.7c0,3.1,2.1,5.3,11.4,8.9c13.8,5.3,20.8,9.1,20.8,20.7C211.9,82.5,200.8,87.1,188.7,87.1z"/>
|
374 |
+
<path d="M242,87.1c-15.5,0-27.2-12.8-27.2-32.1c0-20.2,12-32.3,27.5-32.3c15.8,0,27.5,12.6,27.5,31.9
|
375 |
+
C269.9,75.1,257.9,87.1,242,87.1z M241.9,34.3c-9.2,0-14.8,8.1-14.8,20.4c0,13.5,6.2,21,15.4,21c9.2,0,15.2-9.3,15.2-20.6
|
376 |
+
C257.7,42.4,251.7,34.3,241.9,34.3z"/>
|
377 |
+
<path d="M310,36.8c-2.6-1.4-5.3-2.2-9.3-2.2c-7.7,0-12.1,5.4-12.1,15.9v35.3h-12.1V24h12.1v5.9c2.8-4.1,8-7.2,14.1-7.2
|
378 |
+
c4.9,0,8,0.9,10.5,2.6L310,36.8z"/>
|
379 |
+
<path d="M330.3,15.5v21.5H354v12.1h-23.7v36.6H318V3.4h50.3v12.1H330.3z"/>
|
380 |
+
<path d="M374.5,85.8V6.4L386.6,0v85.8H374.5z"/>
|
381 |
+
<path d="M421.9,87.1c-15.5,0-27.2-12.8-27.2-32.1c0-20.2,12-32.3,27.5-32.3c15.8,0,27.5,12.6,27.5,31.9
|
382 |
+
C449.8,75.1,437.7,87.1,421.9,87.1z M421.7,34.3c-9.2,0-14.8,8.1-14.8,20.4c0,13.5,6.2,21,15.4,21c9.2,0,15.2-9.3,15.2-20.6
|
383 |
+
C437.5,42.4,431.5,34.3,421.7,34.3z"/>
|
384 |
+
<path d="M510.9,85.8h-10.4l-8.4-31.2c-1.3-4.7-2.6-10.2-3.2-13.2c-0.6,2.9-1.9,8.6-3.2,13.3l-8.2,31.1h-10.4L450.3,24h12l7.3,30
|
385 |
+
c1.2,4.7,2.5,10.6,3.1,13.5c0.7-3.1,2.1-8.7,3.4-13.5l8.2-30h9.8l8.4,30.1c1.3,4.8,2.6,10.4,3.3,13.4c0.7-3.1,1.9-8.8,3.1-13.5
|
386 |
+
l7.3-30h12L510.9,85.8z"/>
|
387 |
+
<path d="M79.1,76.2c-6.7,0-12.7-4-14.9-13.2l40.5-12.2c-0.2-2.8-0.6-5.4-1.3-8c-3-11.6-11.1-20.1-24.7-20.1
|
388 |
+
c-16,0-27.1,11.3-27.1,32.3c0,20.5,12.2,32.1,26.7,32.1c9.4,0,15.9-2.9,21.3-8.1l-7.2-7.8C88.4,74.3,84.3,76.2,79.1,76.2z
|
389 |
+
M78,33.7c7.9,0,12.1,4.5,13.8,10.5l-27.9,8.5l0-3.5C64.9,39.3,69.8,33.7,78,33.7z"/>
|
390 |
+
</svg>
|
391 |
+
</a>
|
392 |
+
<div class="links">
|
393 |
+
<a href="https://github.com/tensorflow/playground">Source on GitHub</a>
|
394 |
+
</div>
|
395 |
+
</div>
|
396 |
+
</footer>
|
397 |
+
<script src="bundle.js"></script>
|
398 |
+
<!-- Google analytics -->
|
399 |
+
<script src="analytics.js"></script>
|
400 |
+
</body>
|
401 |
</html>
|
lib.js
ADDED
File without changes
|