Repository: tensorflow/playground
Branch: master
Commit: 02469bd37517
Files: 17
Total size: 124.8 KB
Directory structure:
gitextract_26n3631d/
├── .gitignore
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── analytics.js
├── index.html
├── package.json
├── src/
│ ├── dataset.ts
│ ├── heatmap.ts
│ ├── linechart.ts
│ ├── nn.ts
│ ├── playground.ts
│ ├── seedrandom.d.ts
│ └── state.ts
├── styles.css
├── tsconfig.json
└── tslint.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules/
dist/
*.log
.vscode
================================================
FILE: CONTRIBUTING.md
================================================
Want to contribute? Great! First, read this page (including the small print at the end).
### Before you contribute
Before we can use your code, you must sign the
[Google Individual Contributor License Agreement]
(https://cla.developers.google.com/about/google-individual)
(CLA), which you can do online. The CLA is necessary mainly because you own the
copyright to your changes, even after your contribution becomes part of our
codebase, so we need your permission to use and distribute your code. We also
need to be sure of various other things—for instance that you'll tell us if you
know that your code infringes on other people's patents. You don't have to sign
the CLA until after you've submitted your code for review and a member has
approved it, but you must do it before we can put your code into our codebase.
Before you start working on a larger contribution, you should get in touch with
us first through the issue tracker with your idea so that we can help out and
possibly guide you. Coordinating up front makes it much easier to avoid
frustration later on.
### Code reviews
All submissions, including submissions by project members, require review. We
use Github pull requests for this purpose.
### The small print
Contributions made by corporations are covered by a different agreement than
the one above, the
[Software Grant and Corporate Contributor License Agreement]
(https://cla.developers.google.com/about/google-corporate).
================================================
FILE: LICENSE
================================================
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
================================================
FILE: README.md
================================================
# Deep playground
Deep playground is an interactive visualization of neural networks, written in
TypeScript using d3.js. We use GitHub issues for tracking new requests and bugs.
Your feedback is highly appreciated!
**If you'd like to contribute, be sure to review the [contribution guidelines](CONTRIBUTING.md).**
## Development
To run the visualization locally, run:
- `npm i` to install dependencies
- `npm run build` to compile the app and place it in the `dist/` directory
- `npm run serve` to serve from the `dist/` directory and open a page on your browser.
For a fast edit-refresh cycle when developing run `npm run serve-watch`.
This will start an http server and automatically re-compile the TypeScript,
HTML and CSS files whenever they change.
## For owners
To push to production: `git subtree push --prefix dist origin gh-pages`.
This is not an official Google product.
================================================
FILE: analytics.js
================================================
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
var ANALYTICS_ID = 'Add your own analytics ID here';
ga('create', ANALYTICS_ID, 'auto');
================================================
FILE: index.html
================================================
<!doctype html>
<!-- Copyright 2016 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================-->
<html>
<head lang="en">
<link rel="icon" type="image/png" href="favicon.png">
<meta charset="utf-8">
<meta name="viewport" content="width=1024">
<meta name="keywords" content="neural networks,machine learning,javascript">
<meta property="og:type" content="article"/>
<meta property="og:title" content="Tensorflow — Neural Network Playground"/>
<meta property="og:description" content="Tinker with a real neural network right here in your browser.">
<meta property="og:url" content="http://playground.tensorflow.org"/>
<meta property="og:image" content="http://playground.tensorflow.org/preview.png"/>
<meta name="twitter:card" value="summary_large_image">
<meta name="twitter:title" content="Tensorflow — Neural Network Playground">
<meta name="twitter:description" content="Tinker with a real neural network right here in your browser.">
<meta name="twitter:url" content="http://playground.tensorflow.org">
<meta name="twitter:image" content="http://playground.tensorflow.org/preview.png">
<meta name="twitter:image:width" content="560">
<meta name="twitter:image:height" content="295">
<meta name="author" content="Daniel Smilkov and Shan Carter">
<title>A Neural Network Playground</title>
<link rel="stylesheet" href="bundle.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons" rel="stylesheet" type="text/css">
<script src="lib.js"></script>
</head>
<body>
<!-- GitHub link -->
<a class="github-link" href="https://github.com/tensorflow/playground" title="Source on GitHub" target="_blank">
<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">
<polygon class="bg" points="60.5,60.5 0,0 60.5,0 "/>
<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"/>
</svg>
</a>
<!-- Header -->
<header>
<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>
</header>
<!-- Top Controls -->
<div id="top-controls">
<div class="container l--page">
<div class="timeline-controls">
<button class="mdl-button mdl-js-button mdl-button--icon ui-resetButton" id="reset-button" title="Reset the network">
<i class="material-icons">replay</i>
</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored ui-playButton" id="play-pause-button" title="Run/Pause">
<i class="material-icons">play_arrow</i>
<i class="material-icons">pause</i>
</button>
<button class="mdl-button mdl-js-button mdl-button--icon ui-stepButton" id="next-step-button" title="Step">
<i class="material-icons">skip_next</i>
</button>
</div>
<div class="control">
<span class="label">Epoch</span>
<span class="value" id="iter-number"></span>
</div>
<div class="control ui-learningRate">
<label for="learningRate">Learning rate</label>
<div class="select">
<select id="learningRate">
<option value="0.00001">0.00001</option>
<option value="0.0001">0.0001</option>
<option value="0.001">0.001</option>
<option value="0.003">0.003</option>
<option value="0.01">0.01</option>
<option value="0.03">0.03</option>
<option value="0.1">0.1</option>
<option value="0.3">0.3</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="10">10</option>
</select>
</div>
</div>
<div class="control ui-activation">
<label for="activations">Activation</label>
<div class="select">
<select id="activations">
<option value="relu">ReLU</option>
<option value="tanh">Tanh</option>
<option value="sigmoid">Sigmoid</option>
<option value="linear">Linear</option>
</select>
</div>
</div>
<div class="control ui-regularization">
<label for="regularizations">Regularization</label>
<div class="select">
<select id="regularizations">
<option value="none">None</option>
<option value="L1">L1</option>
<option value="L2">L2</option>
</select>
</div>
</div>
<div class="control ui-regularizationRate">
<label for="regularRate">Regularization rate</label>
<div class="select">
<select id="regularRate">
<option value="0">0</option>
<option value="0.001">0.001</option>
<option value="0.003">0.003</option>
<option value="0.01">0.01</option>
<option value="0.03">0.03</option>
<option value="0.1">0.1</option>
<option value="0.3">0.3</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="10">10</option>
</select>
</div>
</div>
<div class="control ui-problem">
<label for="problem">Problem type</label>
<div class="select">
<select id="problem">
<option value="classification">Classification</option>
<option value="regression">Regression</option>
</select>
</div>
</div>
</div>
</div>
<!-- Main Part -->
<div id="main-part" class="l--page">
<!-- Data Column-->
<div class="column data">
<h4>
<span>Data</span>
</h4>
<div class="ui-dataset">
<p>Which dataset do you want to use?</p>
<div class="dataset-list">
<div class="dataset" title="Circle">
<canvas class="data-thumbnail" data-dataset="circle"></canvas>
</div>
<div class="dataset" title="Exclusive or">
<canvas class="data-thumbnail" data-dataset="xor"></canvas>
</div>
<div class="dataset" title="Gaussian">
<canvas class="data-thumbnail" data-dataset="gauss"></canvas>
</div>
<div class="dataset" title="Spiral">
<canvas class="data-thumbnail" data-dataset="spiral"></canvas>
</div>
<div class="dataset" title="Plane">
<canvas class="data-thumbnail" data-regDataset="reg-plane"></canvas>
</div>
<div class="dataset" title="Multi gaussian">
<canvas class="data-thumbnail" data-regDataset="reg-gauss"></canvas>
</div>
</div>
</div>
<div>
<div class="ui-percTrainData">
<label for="percTrainData">Ratio of training to test data: <span class="value">XX</span>%</label>
<p class="slider">
<input class="mdl-slider mdl-js-slider" type="range" id="percTrainData" min="10" max="90" step="10">
</p>
</div>
<div class="ui-noise">
<label for="noise">Noise: <span class="value">XX</span></label>
<p class="slider">
<input class="mdl-slider mdl-js-slider" type="range" id="noise" min="0" max="50" step="5">
</p>
</div>
<div class="ui-batchSize">
<label for="batchSize">Batch size: <span class="value">XX</span></label>
<p class="slider">
<input class="mdl-slider mdl-js-slider" type="range" id="batchSize" min="1" max="30" step="1">
</p>
</div>
<button class="basic-button" id="data-regen-button" title="Regenerate data">
Regenerate
</button>
</div>
</div>
<!-- Features Column -->
<div class="column features">
<h4>Features</h4>
<p>Which properties do you want to feed in?</p>
<div id="network">
<svg id="svg" width="510" height="450">
<defs>
<marker id="markerArrow" markerWidth="7" markerHeight="13" refX="1" refY="6" orient="auto" markerUnits="userSpaceOnUse">
<path d="M2,11 L7,6 L2,2" />
</marker>
</defs>
</svg>
<!-- Hover card -->
<div id="hovercard">
<div style="font-size:10px">Click anywhere to edit.</div>
<div><span class="type">Weight/Bias</span> is <span class="value">0.2</span><span><input type="number"/></span>.</div>
</div>
<div class="callout thumbnail">
<svg viewBox="0 0 30 30">
<defs>
<marker id="arrow" markerWidth="5" markerHeight="5" refx="5" refy="2.5" orient="auto" markerUnits="userSpaceOnUse">
<path d="M0,0 L5,2.5 L0,5 z"/>
</marker>
</defs>
<path d="M12,30C5,20 2,15 12,0" marker-end="url(#arrow)">
</svg>
<div class="label">
This is the output from one <b>neuron</b>. Hover to see it larger.
</div>
</div>
<div class="callout weights">
<svg viewBox="0 0 30 30">
<defs>
<marker id="arrow" markerWidth="5" markerHeight="5" refx="5" refy="2.5" orient="auto" markerUnits="userSpaceOnUse">
<path d="M0,0 L5,2.5 L0,5 z"/>
</marker>
</defs>
<path d="M12,30C5,20 2,15 12,0" marker-end="url(#arrow)">
</svg>
<div class="label">
The outputs are mixed with varying <b>weights</b>, shown by the thickness of the lines.
</div>
</div>
</div>
</div>
<!-- Hidden Layers Column -->
<div class="column hidden-layers">
<h4>
<div class="ui-numHiddenLayers">
<button id="add-layers" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">add</i>
</button>
<button id="remove-layers" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">remove</i>
</button>
</div>
<span id="num-layers"></span>
<span id="layers-label"></span>
</h4>
<div class="bracket"></div>
</div>
<!-- Output Column -->
<div class="column output">
<h4>Output</h4>
<div class="metrics">
<div class="output-stats ui-percTrainData">
<span>Test loss</span>
<div class="value" id="loss-test"></div>
</div>
<div class="output-stats train">
<span>Training loss</span>
<div class="value" id="loss-train"></div>
</div>
<div id="linechart"></div>
</div>
<div id="heatmap"></div>
<div style="float:left;margin-top:20px">
<div style="display:flex; align-items:center;">
<!-- Gradient color scale -->
<div class="label" style="width:105px; margin-right: 10px">
Colors shows data, neuron and weight values.
</div>
<svg width="150" height="30" id="colormap">
<defs>
<linearGradient id="gradient" x1="0%" y1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f59322" stop-opacity="1"></stop>
<stop offset="50%" stop-color="#e8eaeb" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#0877bd" stop-opacity="1"></stop>
</linearGradient>
</defs>
<g class="core" transform="translate(3, 0)">
<rect width="144" height="10" style="fill: url('#gradient');"></rect>
</g>
</svg>
</div>
<br/>
<div style="display:flex;">
<label class="ui-showTestData mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="show-test-data">
<input type="checkbox" id="show-test-data" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label label">Show test data</span>
</label>
<label class="ui-discretize mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="discretize">
<input type="checkbox" id="discretize" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label label">Discretize output</span>
</label>
</div>
</div>
</div>
</div>
<!-- More -->
<div class="more">
<!-- <button class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons">keyboard_arrow_down</i></button> -->
<button class="mdl-button mdl-js-button mdl-button--fab">
<i class="material-icons">keyboard_arrow_down</i>
</button>
</div>
<!-- Article -->
<article id="article-text">
<div class="l--body">
<h2>Um, What Is a Neural Network?</h2>
<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>
</div>
<div class="l--body">
<h2>This Is Cool, Can I Repurpose It?</h2>
<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>
<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>
<div class="hide-controls"></div>
</div>
<div class="l--body">
<h2>What Do All the Colors Mean?</h2>
<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>
<p>The data points (represented by small circles) are initially colored orange or blue, which correspond to positive one and negative one.</p>
<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>
<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>
</div>
<div class="l--body">
<h2>What Library Are You Using?</h2>
<p>We wrote a tiny neural network <a href="https://github.com/tensorflow/playground/blob/master/src/nn.ts">library</a>
that meets the demands of this educational visualization. For real-world applications, consider the
<a href="https://www.tensorflow.org/">TensorFlow</a> library.
</p>
</div>
<div class="l--body">
<h2>Credits</h2>
<p>
This was created by Daniel Smilkov and Shan Carter.
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>
and Chris Olah’s <a href="http://colah.github.io/posts/2014-03-NN-Manifolds-Topology/">articles</a> about neural networks.
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
<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.
</p>
</div>
</article>
<!-- Footer -->
<footer>
<div class="l--body">
<a href="https://www.tensorflow.org/" class="logo">
<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">
<path d="M37.4,15.5v70.3H25V15.5H1V3.4h60.4v12.1H37.4z"/>
<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
c14.4,0,22,9.4,22,27.7v35.4H149z"/>
<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
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
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"/>
<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
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
C257.7,42.4,251.7,34.3,241.9,34.3z"/>
<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
c4.9,0,8,0.9,10.5,2.6L310,36.8z"/>
<path d="M330.3,15.5v21.5H354v12.1h-23.7v36.6H318V3.4h50.3v12.1H330.3z"/>
<path d="M374.5,85.8V6.4L386.6,0v85.8H374.5z"/>
<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
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
C437.5,42.4,431.5,34.3,421.7,34.3z"/>
<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
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
l7.3-30h12L510.9,85.8z"/>
<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
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
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"/>
</svg>
</a>
<div class="links">
<a href="https://github.com/tensorflow/playground">Source on GitHub</a>
</div>
</div>
</footer>
<script src="bundle.js"></script>
<!-- Google analytics -->
<script src="analytics.js"></script>
</body>
</html>
================================================
FILE: package.json
================================================
{
"name": "deep-playground-prototype",
"version": "2016.3.10",
"description": "",
"private": true,
"scripts": {
"clean": "rimraf dist",
"start": "npm run serve-watch",
"prep": "copyfiles analytics.js dist && concat node_modules/material-design-lite/material.min.js node_modules/seedrandom/seedrandom.min.js > dist/lib.js",
"build-css": "concat node_modules/material-design-lite/material.min.css styles.css > dist/bundle.css",
"watch-css": "concat node_modules/material-design-lite/material.min.css styles.css -o dist/bundle.css",
"build-html": "copyfiles index.html dist",
"watch-html": "concat index.html -o dist/index.html",
"build-js": "browserify src/playground.ts -p [tsify] | uglifyjs -c > dist/bundle.js",
"watch-js": "watchify src/playground.ts -p [tsify] -v --debug -o dist/bundle.js",
"build": "npm run prep && npm run build-js && npm run build-css && npm run build-html",
"watch": "npm run prep && concurrently \"npm run watch-js\" \"npm run watch-css\" \"npm run watch-html\"",
"serve": "npx serve dist/",
"serve-watch": "concurrently \"npx serve dist/\" \"npm run watch\""
},
"devDependencies": {
"@types/d3": "^3.5.34",
"concat": "^1.0.3",
"concurrently": "3.1.0",
"copyfiles": "1.0.0",
"rimraf": "2.5.4",
"serve": "^11.3.0",
"tsify": "^4.0.0",
"typescript": "^2.9",
"uglify-js": "^2.8.29",
"watchify": "^4.0.0"
},
"dependencies": {
"d3": "^3.5.16",
"material-design-lite": "^1.3.0",
"seedrandom": "^2.4.3"
}
}
================================================
FILE: src/dataset.ts
================================================
/* Copyright 2016 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
import * as d3 from 'd3';
/**
* A two dimensional example: x and y coordinates with the label.
*/
export type Example2D = {
x: number,
y: number,
label: number
};
type Point = {
x: number,
y: number
};
/**
* Shuffles the array using Fisher-Yates algorithm. Uses the seedrandom
* library as the random generator.
*/
export function shuffle(array: any[]): void {
let counter = array.length;
let temp = 0;
let index = 0;
// While there are elements in the array
while (counter > 0) {
// Pick a random index
index = Math.floor(Math.random() * counter);
// Decrease counter by 1
counter--;
// And swap the last element with it
temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
}
export type DataGenerator = (numSamples: number, noise: number) => Example2D[];
export function classifyTwoGaussData(numSamples: number, noise: number):
Example2D[] {
let points: Example2D[] = [];
let varianceScale = d3.scale.linear().domain([0, .5]).range([0.5, 4]);
let variance = varianceScale(noise);
function genGauss(cx: number, cy: number, label: number) {
for (let i = 0; i < numSamples / 2; i++) {
let x = normalRandom(cx, variance);
let y = normalRandom(cy, variance);
points.push({x, y, label});
}
}
genGauss(2, 2, 1); // Gaussian with positive examples.
genGauss(-2, -2, -1); // Gaussian with negative examples.
return points;
}
export function regressPlane(numSamples: number, noise: number):
Example2D[] {
let radius = 6;
let labelScale = d3.scale.linear()
.domain([-10, 10])
.range([-1, 1]);
let getLabel = (x, y) => labelScale(x + y);
let points: Example2D[] = [];
for (let i = 0; i < numSamples; i++) {
let x = randUniform(-radius, radius);
let y = randUniform(-radius, radius);
let noiseX = randUniform(-radius, radius) * noise;
let noiseY = randUniform(-radius, radius) * noise;
let label = getLabel(x + noiseX, y + noiseY);
points.push({x, y, label});
}
return points;
}
export function regressGaussian(numSamples: number, noise: number):
Example2D[] {
let points: Example2D[] = [];
let labelScale = d3.scale.linear()
.domain([0, 2])
.range([1, 0])
.clamp(true);
let gaussians = [
[-4, 2.5, 1],
[0, 2.5, -1],
[4, 2.5, 1],
[-4, -2.5, -1],
[0, -2.5, 1],
[4, -2.5, -1]
];
function getLabel(x, y) {
// Choose the one that is maximum in abs value.
let label = 0;
gaussians.forEach(([cx, cy, sign]) => {
let newLabel = sign * labelScale(dist({x, y}, {x: cx, y: cy}));
if (Math.abs(newLabel) > Math.abs(label)) {
label = newLabel;
}
});
return label;
}
let radius = 6;
for (let i = 0; i < numSamples; i++) {
let x = randUniform(-radius, radius);
let y = randUniform(-radius, radius);
let noiseX = randUniform(-radius, radius) * noise;
let noiseY = randUniform(-radius, radius) * noise;
let label = getLabel(x + noiseX, y + noiseY);
points.push({x, y, label});
};
return points;
}
export function classifySpiralData(numSamples: number, noise: number):
Example2D[] {
let points: Example2D[] = [];
let n = numSamples / 2;
function genSpiral(deltaT: number, label: number) {
for (let i = 0; i < n; i++) {
let r = i / n * 5;
let t = 1.75 * i / n * 2 * Math.PI + deltaT;
let x = r * Math.sin(t) + randUniform(-1, 1) * noise;
let y = r * Math.cos(t) + randUniform(-1, 1) * noise;
points.push({x, y, label});
}
}
genSpiral(0, 1); // Positive examples.
genSpiral(Math.PI, -1); // Negative examples.
return points;
}
export function classifyCircleData(numSamples: number, noise: number):
Example2D[] {
let points: Example2D[] = [];
let radius = 5;
function getCircleLabel(p: Point, center: Point) {
return (dist(p, center) < (radius * 0.5)) ? 1 : -1;
}
// Generate positive points inside the circle.
for (let i = 0; i < numSamples / 2; i++) {
let r = randUniform(0, radius * 0.5);
let angle = randUniform(0, 2 * Math.PI);
let x = r * Math.sin(angle);
let y = r * Math.cos(angle);
let noiseX = randUniform(-radius, radius) * noise;
let noiseY = randUniform(-radius, radius) * noise;
let label = getCircleLabel({x: x + noiseX, y: y + noiseY}, {x: 0, y: 0});
points.push({x, y, label});
}
// Generate negative points outside the circle.
for (let i = 0; i < numSamples / 2; i++) {
let r = randUniform(radius * 0.7, radius);
let angle = randUniform(0, 2 * Math.PI);
let x = r * Math.sin(angle);
let y = r * Math.cos(angle);
let noiseX = randUniform(-radius, radius) * noise;
let noiseY = randUniform(-radius, radius) * noise;
let label = getCircleLabel({x: x + noiseX, y: y + noiseY}, {x: 0, y: 0});
points.push({x, y, label});
}
return points;
}
export function classifyXORData(numSamples: number, noise: number):
Example2D[] {
function getXORLabel(p: Point) { return p.x * p.y >= 0 ? 1 : -1; }
let points: Example2D[] = [];
for (let i = 0; i < numSamples; i++) {
let x = randUniform(-5, 5);
let padding = 0.3;
x += x > 0 ? padding : -padding; // Padding.
let y = randUniform(-5, 5);
y += y > 0 ? padding : -padding;
let noiseX = randUniform(-5, 5) * noise;
let noiseY = randUniform(-5, 5) * noise;
let label = getXORLabel({x: x + noiseX, y: y + noiseY});
points.push({x, y, label});
}
return points;
}
/**
* Returns a sample from a uniform [a, b] distribution.
* Uses the seedrandom library as the random generator.
*/
function randUniform(a: number, b: number) {
return Math.random() * (b - a) + a;
}
/**
* Samples from a normal distribution. Uses the seedrandom library as the
* random generator.
*
* @param mean The mean. Default is 0.
* @param variance The variance. Default is 1.
*/
function normalRandom(mean = 0, variance = 1): number {
let v1: number, v2: number, s: number;
do {
v1 = 2 * Math.random() - 1;
v2 = 2 * Math.random() - 1;
s = v1 * v1 + v2 * v2;
} while (s > 1);
let result = Math.sqrt(-2 * Math.log(s) / s) * v1;
return mean + Math.sqrt(variance) * result;
}
/** Returns the eucledian distance between two points in space. */
function dist(a: Point, b: Point): number {
let dx = a.x - b.x;
let dy = a.y - b.y;
return Math.sqrt(dx * dx + dy * dy);
}
================================================
FILE: src/heatmap.ts
================================================
/* Copyright 2016 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
import {Example2D} from "./dataset";
import * as d3 from 'd3';
export interface HeatMapSettings {
[key: string]: any;
showAxes?: boolean;
noSvg?: boolean;
}
/** Number of different shades (colors) when drawing a gradient heatmap */
const NUM_SHADES = 30;
/**
* Draws a heatmap using canvas. Used for showing the learned decision
* boundary of the classification algorithm. Can also draw data points
* using an svg overlayed on top of the canvas heatmap.
*/
export class HeatMap {
private settings: HeatMapSettings = {
showAxes: false,
noSvg: false
};
private xScale;
private yScale;
private numSamples: number;
private color;
private canvas;
private svg;
constructor(
width: number, numSamples: number, xDomain: [number, number],
yDomain: [number, number], container,
userSettings?: HeatMapSettings) {
this.numSamples = numSamples;
let height = width;
let padding = userSettings.showAxes ? 20 : 0;
if (userSettings != null) {
// overwrite the defaults with the user-specified settings.
for (let prop in userSettings) {
this.settings[prop] = userSettings[prop];
}
}
this.xScale = d3.scale.linear()
.domain(xDomain)
.range([0, width - 2 * padding]);
this.yScale = d3.scale.linear()
.domain(yDomain)
.range([height - 2 * padding, 0]);
// Get a range of colors.
let tmpScale = d3.scale.linear<string, number>()
.domain([0, .5, 1])
.range(["#f59322", "#e8eaeb", "#0877bd"])
.clamp(true);
// Due to numerical error, we need to specify
// d3.range(0, end + small_epsilon, step)
// in order to guarantee that we will have end/step entries with
// the last element being equal to end.
let colors = d3.range(0, 1 + 1E-9, 1 / NUM_SHADES).map(a => {
return tmpScale(a);
});
this.color = d3.scale.quantize()
.domain([-1, 1])
.range(colors);
container = container.append("div")
.style({
width: `${width}px`,
height: `${height}px`,
position: "relative",
top: `-${padding}px`,
left: `-${padding}px`
});
this.canvas = container.append("canvas")
.attr("width", numSamples)
.attr("height", numSamples)
.style("width", (width - 2 * padding) + "px")
.style("height", (height - 2 * padding) + "px")
.style("position", "absolute")
.style("top", `${padding}px`)
.style("left", `${padding}px`);
if (!this.settings.noSvg) {
this.svg = container.append("svg").attr({
"width": width,
"height": height
}).style({
// Overlay the svg on top of the canvas.
"position": "absolute",
"left": "0",
"top": "0"
}).append("g")
.attr("transform", `translate(${padding},${padding})`);
this.svg.append("g").attr("class", "train");
this.svg.append("g").attr("class", "test");
}
if (this.settings.showAxes) {
let xAxis = d3.svg.axis()
.scale(this.xScale)
.orient("bottom");
let yAxis = d3.svg.axis()
.scale(this.yScale)
.orient("right");
this.svg.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0,${height - 2 * padding})`)
.call(xAxis);
this.svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (width - 2 * padding) + ",0)")
.call(yAxis);
}
}
updateTestPoints(points: Example2D[]): void {
if (this.settings.noSvg) {
throw Error("Can't add points since noSvg=true");
}
this.updateCircles(this.svg.select("g.test"), points);
}
updatePoints(points: Example2D[]): void {
if (this.settings.noSvg) {
throw Error("Can't add points since noSvg=true");
}
this.updateCircles(this.svg.select("g.train"), points);
}
updateBackground(data: number[][], discretize: boolean): void {
let dx = data[0].length;
let dy = data.length;
if (dx !== this.numSamples || dy !== this.numSamples) {
throw new Error(
"The provided data matrix must be of size " +
"numSamples X numSamples");
}
// Compute the pixel colors; scaled by CSS.
let context = (this.canvas.node() as HTMLCanvasElement).getContext("2d");
let image = context.createImageData(dx, dy);
for (let y = 0, p = -1; y < dy; ++y) {
for (let x = 0; x < dx; ++x) {
let value = data[x][y];
if (discretize) {
value = (value >= 0 ? 1 : -1);
}
let c = d3.rgb(this.color(value));
image.data[++p] = c.r;
image.data[++p] = c.g;
image.data[++p] = c.b;
image.data[++p] = 160;
}
}
context.putImageData(image, 0, 0);
}
private updateCircles(container, points: Example2D[]) {
// Keep only points that are inside the bounds.
let xDomain = this.xScale.domain();
let yDomain = this.yScale.domain();
points = points.filter(p => {
return p.x >= xDomain[0] && p.x <= xDomain[1]
&& p.y >= yDomain[0] && p.y <= yDomain[1];
});
// Attach data to initially empty selection.
let selection = container.selectAll("circle").data(points);
// Insert elements to match length of points array.
selection.enter().append("circle").attr("r", 3);
// Update points to be in the correct position.
selection
.attr({
cx: (d: Example2D) => this.xScale(d.x),
cy: (d: Example2D) => this.yScale(d.y),
})
.style("fill", d => this.color(d.label));
// Remove points if the length has gone down.
selection.exit().remove();
}
} // Close class HeatMap.
export function reduceMatrix(matrix: number[][], factor: number): number[][] {
if (matrix.length !== matrix[0].length) {
throw new Error("The provided matrix must be a square matrix");
}
if (matrix.length % factor !== 0) {
throw new Error("The width/height of the matrix must be divisible by " +
"the reduction factor");
}
let result: number[][] = new Array(matrix.length / factor);
for (let i = 0; i < matrix.length; i += factor) {
result[i / factor] = new Array(matrix.length / factor);
for (let j = 0; j < matrix.length; j += factor) {
let avg = 0;
// Sum all the values in the neighborhood.
for (let k = 0; k < factor; k++) {
for (let l = 0; l < factor; l++) {
avg += matrix[i + k][j + l];
}
}
avg /= (factor * factor);
result[i / factor][j / factor] = avg;
}
}
return result;
}
================================================
FILE: src/linechart.ts
================================================
/* Copyright 2016 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
import * as d3 from 'd3';
type DataPoint = {
x: number;
y: number[];
};
/**
* A multi-series line chart that allows you to append new data points
* as data becomes available.
*/
export class AppendingLineChart {
private numLines: number;
private data: DataPoint[] = [];
private svg;
private xScale;
private yScale;
private paths;
private lineColors: string[];
private minY = Number.MAX_VALUE;
private maxY = Number.MIN_VALUE;
constructor(container, lineColors: string[]) {
this.lineColors = lineColors;
this.numLines = lineColors.length;
let node = container.node() as HTMLElement;
let totalWidth = node.offsetWidth;
let totalHeight = node.offsetHeight;
let margin = {top: 2, right: 0, bottom: 2, left: 2};
let width = totalWidth - margin.left - margin.right;
let height = totalHeight - margin.top - margin.bottom;
this.xScale = d3.scale.linear()
.domain([0, 0])
.range([0, width]);
this.yScale = d3.scale.linear()
.domain([0, 0])
.range([height, 0]);
this.svg = container.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
this.paths = new Array(this.numLines);
for (let i = 0; i < this.numLines; i++) {
this.paths[i] = this.svg.append("path")
.attr("class", "line")
.style({
"fill": "none",
"stroke": lineColors[i],
"stroke-width": "1.5px"
});
}
}
reset() {
this.data = [];
this.redraw();
this.minY = Number.MAX_VALUE;
this.maxY = Number.MIN_VALUE;
}
addDataPoint(dataPoint: number[]) {
if (dataPoint.length !== this.numLines) {
throw Error("Length of dataPoint must equal number of lines");
}
dataPoint.forEach(y => {
this.minY = Math.min(this.minY, y);
this.maxY = Math.max(this.maxY, y);
});
this.data.push({x: this.data.length + 1, y: dataPoint});
this.redraw();
}
private redraw() {
// Adjust the x and y domain.
this.xScale.domain([1, this.data.length]);
this.yScale.domain([this.minY, this.maxY]);
// Adjust all the <path> elements (lines).
let getPathMap = (lineIndex: number) => {
return d3.svg.line<{x: number, y:number}>()
.x(d => this.xScale(d.x))
.y(d => this.yScale(d.y[lineIndex]));
};
for (let i = 0; i < this.numLines; i++) {
this.paths[i].datum(this.data).attr("d", getPathMap(i));
}
}
}
================================================
FILE: src/nn.ts
================================================
/* Copyright 2016 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
/**
* A node in a neural network. Each node has a state
* (total input, output, and their respectively derivatives) which changes
* after every forward and back propagation run.
*/
export class Node {
id: string;
/** List of input links. */
inputLinks: Link[] = [];
bias = 0.1;
/** List of output links. */
outputs: Link[] = [];
totalInput: number;
output: number;
/** Error derivative with respect to this node's output. */
outputDer = 0;
/** Error derivative with respect to this node's total input. */
inputDer = 0;
/**
* Accumulated error derivative with respect to this node's total input since
* the last update. This derivative equals dE/db where b is the node's
* bias term.
*/
accInputDer = 0;
/**
* Number of accumulated err. derivatives with respect to the total input
* since the last update.
*/
numAccumulatedDers = 0;
/** Activation function that takes total input and returns node's output */
activation: ActivationFunction;
/**
* Creates a new node with the provided id and activation function.
*/
constructor(id: string, activation: ActivationFunction, initZero?: boolean) {
this.id = id;
this.activation = activation;
if (initZero) {
this.bias = 0;
}
}
/** Recomputes the node's output and returns it. */
updateOutput(): number {
// Stores total input into the node.
this.totalInput = this.bias;
for (let j = 0; j < this.inputLinks.length; j++) {
let link = this.inputLinks[j];
this.totalInput += link.weight * link.source.output;
}
this.output = this.activation.output(this.totalInput);
return this.output;
}
}
/**
* An error function and its derivative.
*/
export interface ErrorFunction {
error: (output: number, target: number) => number;
der: (output: number, target: number) => number;
}
/** A node's activation function and its derivative. */
export interface ActivationFunction {
output: (input: number) => number;
der: (input: number) => number;
}
/** Function that computes a penalty cost for a given weight in the network. */
export interface RegularizationFunction {
output: (weight: number) => number;
der: (weight: number) => number;
}
/** Built-in error functions */
export class Errors {
public static SQUARE: ErrorFunction = {
error: (output: number, target: number) =>
0.5 * Math.pow(output - target, 2),
der: (output: number, target: number) => output - target
};
}
/** Polyfill for TANH */
(Math as any).tanh = (Math as any).tanh || function(x) {
if (x === Infinity) {
return 1;
} else if (x === -Infinity) {
return -1;
} else {
let e2x = Math.exp(2 * x);
return (e2x - 1) / (e2x + 1);
}
};
/** Built-in activation functions */
export class Activations {
public static TANH: ActivationFunction = {
output: x => (Math as any).tanh(x),
der: x => {
let output = Activations.TANH.output(x);
return 1 - output * output;
}
};
public static RELU: ActivationFunction = {
output: x => Math.max(0, x),
der: x => x <= 0 ? 0 : 1
};
public static SIGMOID: ActivationFunction = {
output: x => 1 / (1 + Math.exp(-x)),
der: x => {
let output = Activations.SIGMOID.output(x);
return output * (1 - output);
}
};
public static LINEAR: ActivationFunction = {
output: x => x,
der: x => 1
};
}
/** Build-in regularization functions */
export class RegularizationFunction {
public static L1: RegularizationFunction = {
output: w => Math.abs(w),
der: w => w < 0 ? -1 : (w > 0 ? 1 : 0)
};
public static L2: RegularizationFunction = {
output: w => 0.5 * w * w,
der: w => w
};
}
/**
* A link in a neural network. Each link has a weight and a source and
* destination node. Also it has an internal state (error derivative
* with respect to a particular input) which gets updated after
* a run of back propagation.
*/
export class Link {
id: string;
source: Node;
dest: Node;
weight = Math.random() - 0.5;
isDead = false;
/** Error derivative with respect to this weight. */
errorDer = 0;
/** Accumulated error derivative since the last update. */
accErrorDer = 0;
/** Number of accumulated derivatives since the last update. */
numAccumulatedDers = 0;
regularization: RegularizationFunction;
/**
* Constructs a link in the neural network initialized with random weight.
*
* @param source The source node.
* @param dest The destination node.
* @param regularization The regularization function that computes the
* penalty for this weight. If null, there will be no regularization.
*/
constructor(source: Node, dest: Node,
regularization: RegularizationFunction, initZero?: boolean) {
this.id = source.id + "-" + dest.id;
this.source = source;
this.dest = dest;
this.regularization = regularization;
if (initZero) {
this.weight = 0;
}
}
}
/**
* Builds a neural network.
*
* @param networkShape The shape of the network. E.g. [1, 2, 3, 1] means
* the network will have one input node, 2 nodes in first hidden layer,
* 3 nodes in second hidden layer and 1 output node.
* @param activation The activation function of every hidden node.
* @param outputActivation The activation function for the output nodes.
* @param regularization The regularization function that computes a penalty
* for a given weight (parameter) in the network. If null, there will be
* no regularization.
* @param inputIds List of ids for the input nodes.
*/
export function buildNetwork(
networkShape: number[], activation: ActivationFunction,
outputActivation: ActivationFunction,
regularization: RegularizationFunction,
inputIds: string[], initZero?: boolean): Node[][] {
let numLayers = networkShape.length;
let id = 1;
/** List of layers, with each layer being a list of nodes. */
let network: Node[][] = [];
for (let layerIdx = 0; layerIdx < numLayers; layerIdx++) {
let isOutputLayer = layerIdx === numLayers - 1;
let isInputLayer = layerIdx === 0;
let currentLayer: Node[] = [];
network.push(currentLayer);
let numNodes = networkShape[layerIdx];
for (let i = 0; i < numNodes; i++) {
let nodeId = id.toString();
if (isInputLayer) {
nodeId = inputIds[i];
} else {
id++;
}
let node = new Node(nodeId,
isOutputLayer ? outputActivation : activation, initZero);
currentLayer.push(node);
if (layerIdx >= 1) {
// Add links from nodes in the previous layer to this node.
for (let j = 0; j < network[layerIdx - 1].length; j++) {
let prevNode = network[layerIdx - 1][j];
let link = new Link(prevNode, node, regularization, initZero);
prevNode.outputs.push(link);
node.inputLinks.push(link);
}
}
}
}
return network;
}
/**
* Runs a forward propagation of the provided input through the provided
* network. This method modifies the internal state of the network - the
* total input and output of each node in the network.
*
* @param network The neural network.
* @param inputs The input array. Its length should match the number of input
* nodes in the network.
* @return The final output of the network.
*/
export function forwardProp(network: Node[][], inputs: number[]): number {
let inputLayer = network[0];
if (inputs.length !== inputLayer.length) {
throw new Error("The number of inputs must match the number of nodes in" +
" the input layer");
}
// Update the input layer.
for (let i = 0; i < inputLayer.length; i++) {
let node = inputLayer[i];
node.output = inputs[i];
}
for (let layerIdx = 1; layerIdx < network.length; layerIdx++) {
let currentLayer = network[layerIdx];
// Update all the nodes in this layer.
for (let i = 0; i < currentLayer.length; i++) {
let node = currentLayer[i];
node.updateOutput();
}
}
return network[network.length - 1][0].output;
}
/**
* Runs a backward propagation using the provided target and the
* computed output of the previous call to forward propagation.
* This method modifies the internal state of the network - the error
* derivatives with respect to each node, and each weight
* in the network.
*/
export function backProp(network: Node[][], target: number,
errorFunc: ErrorFunction): void {
// The output node is a special case. We use the user-defined error
// function for the derivative.
let outputNode = network[network.length - 1][0];
outputNode.outputDer = errorFunc.der(outputNode.output, target);
// Go through the layers backwards.
for (let layerIdx = network.length - 1; layerIdx >= 1; layerIdx--) {
let currentLayer = network[layerIdx];
// Compute the error derivative of each node with respect to:
// 1) its total input
// 2) each of its input weights.
for (let i = 0; i < currentLayer.length; i++) {
let node = currentLayer[i];
node.inputDer = node.outputDer * node.activation.der(node.totalInput);
node.accInputDer += node.inputDer;
node.numAccumulatedDers++;
}
// Error derivative with respect to each weight coming into the node.
for (let i = 0; i < currentLayer.length; i++) {
let node = currentLayer[i];
for (let j = 0; j < node.inputLinks.length; j++) {
let link = node.inputLinks[j];
if (link.isDead) {
continue;
}
link.errorDer = node.inputDer * link.source.output;
link.accErrorDer += link.errorDer;
link.numAccumulatedDers++;
}
}
if (layerIdx === 1) {
continue;
}
let prevLayer = network[layerIdx - 1];
for (let i = 0; i < prevLayer.length; i++) {
let node = prevLayer[i];
// Compute the error derivative with respect to each node's output.
node.outputDer = 0;
for (let j = 0; j < node.outputs.length; j++) {
let output = node.outputs[j];
node.outputDer += output.weight * output.dest.inputDer;
}
}
}
}
/**
* Updates the weights of the network using the previously accumulated error
* derivatives.
*/
export function updateWeights(network: Node[][], learningRate: number,
regularizationRate: number) {
for (let layerIdx = 1; layerIdx < network.length; layerIdx++) {
let currentLayer = network[layerIdx];
for (let i = 0; i < currentLayer.length; i++) {
let node = currentLayer[i];
// Update the node's bias.
if (node.numAccumulatedDers > 0) {
node.bias -= learningRate * node.accInputDer / node.numAccumulatedDers;
node.accInputDer = 0;
node.numAccumulatedDers = 0;
}
// Update the weights coming into this node.
for (let j = 0; j < node.inputLinks.length; j++) {
let link = node.inputLinks[j];
if (link.isDead) {
continue;
}
let regulDer = link.regularization ?
link.regularization.der(link.weight) : 0;
if (link.numAccumulatedDers > 0) {
// Update the weight based on dE/dw.
link.weight = link.weight -
(learningRate / link.numAccumulatedDers) * link.accErrorDer;
// Further update the weight based on regularization.
let newLinkWeight = link.weight -
(learningRate * regularizationRate) * regulDer;
if (link.regularization === RegularizationFunction.L1 &&
link.weight * newLinkWeight < 0) {
// The weight crossed 0 due to the regularization term. Set it to 0.
link.weight = 0;
link.isDead = true;
} else {
link.weight = newLinkWeight;
}
link.accErrorDer = 0;
link.numAccumulatedDers = 0;
}
}
}
}
}
/** Iterates over every node in the network/ */
export function forEachNode(network: Node[][], ignoreInputs: boolean,
accessor: (node: Node) => any) {
for (let layerIdx = ignoreInputs ? 1 : 0;
layerIdx < network.length;
layerIdx++) {
let currentLayer = network[layerIdx];
for (let i = 0; i < currentLayer.length; i++) {
let node = currentLayer[i];
accessor(node);
}
}
}
/** Returns the output node in the network. */
export function getOutputNode(network: Node[][]) {
return network[network.length - 1][0];
}
================================================
FILE: src/playground.ts
================================================
/* Copyright 2016 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
import * as nn from "./nn";
import {HeatMap, reduceMatrix} from "./heatmap";
import {
State,
datasets,
regDatasets,
activations,
problems,
regularizations,
getKeyFromValue,
Problem
} from "./state";
import {Example2D, shuffle} from "./dataset";
import {AppendingLineChart} from "./linechart";
import * as d3 from 'd3';
let mainWidth;
// More scrolling
d3.select(".more button").on("click", function() {
let position = 800;
d3.transition()
.duration(1000)
.tween("scroll", scrollTween(position));
});
function scrollTween(offset) {
return function() {
let i = d3.interpolateNumber(window.pageYOffset ||
document.documentElement.scrollTop, offset);
return function(t) { scrollTo(0, i(t)); };
};
}
const RECT_SIZE = 30;
const BIAS_SIZE = 5;
const NUM_SAMPLES_CLASSIFY = 500;
const NUM_SAMPLES_REGRESS = 1200;
const DENSITY = 100;
enum HoverType {
BIAS, WEIGHT
}
interface InputFeature {
f: (x: number, y: number) => number;
label?: string;
}
let INPUTS: {[name: string]: InputFeature} = {
"x": {f: (x, y) => x, label: "X_1"},
"y": {f: (x, y) => y, label: "X_2"},
"xSquared": {f: (x, y) => x * x, label: "X_1^2"},
"ySquared": {f: (x, y) => y * y, label: "X_2^2"},
"xTimesY": {f: (x, y) => x * y, label: "X_1X_2"},
"sinX": {f: (x, y) => Math.sin(x), label: "sin(X_1)"},
"sinY": {f: (x, y) => Math.sin(y), label: "sin(X_2)"},
};
let HIDABLE_CONTROLS = [
["Show test data", "showTestData"],
["Discretize output", "discretize"],
["Play button", "playButton"],
["Step button", "stepButton"],
["Reset button", "resetButton"],
["Learning rate", "learningRate"],
["Activation", "activation"],
["Regularization", "regularization"],
["Regularization rate", "regularizationRate"],
["Problem type", "problem"],
["Which dataset", "dataset"],
["Ratio train data", "percTrainData"],
["Noise level", "noise"],
["Batch size", "batchSize"],
["# of hidden layers", "numHiddenLayers"],
];
class Player {
private timerIndex = 0;
private isPlaying = false;
private callback: (isPlaying: boolean) => void = null;
/** Plays/pauses the player. */
playOrPause() {
if (this.isPlaying) {
this.isPlaying = false;
this.pause();
} else {
this.isPlaying = true;
if (iter === 0) {
simulationStarted();
}
this.play();
}
}
onPlayPause(callback: (isPlaying: boolean) => void) {
this.callback = callback;
}
play() {
this.pause();
this.isPlaying = true;
if (this.callback) {
this.callback(this.isPlaying);
}
this.start(this.timerIndex);
}
pause() {
this.timerIndex++;
this.isPlaying = false;
if (this.callback) {
this.callback(this.isPlaying);
}
}
private start(localTimerIndex: number) {
d3.timer(() => {
if (localTimerIndex < this.timerIndex) {
return true; // Done.
}
oneStep();
return false; // Not done.
}, 0);
}
}
let state = State.deserializeState();
// Filter out inputs that are hidden.
state.getHiddenProps().forEach(prop => {
if (prop in INPUTS) {
delete INPUTS[prop];
}
});
let boundary: {[id: string]: number[][]} = {};
let selectedNodeId: string = null;
// Plot the heatmap.
let xDomain: [number, number] = [-6, 6];
let heatMap =
new HeatMap(300, DENSITY, xDomain, xDomain, d3.select("#heatmap"),
{showAxes: true});
let linkWidthScale = d3.scale.linear()
.domain([0, 5])
.range([1, 10])
.clamp(true);
let colorScale = d3.scale.linear<string, number>()
.domain([-1, 0, 1])
.range(["#f59322", "#e8eaeb", "#0877bd"])
.clamp(true);
let iter = 0;
let trainData: Example2D[] = [];
let testData: Example2D[] = [];
let network: nn.Node[][] = null;
let lossTrain = 0;
let lossTest = 0;
let player = new Player();
let lineChart = new AppendingLineChart(d3.select("#linechart"),
["#777", "black"]);
function makeGUI() {
d3.select("#reset-button").on("click", () => {
reset();
userHasInteracted();
d3.select("#play-pause-button");
});
d3.select("#play-pause-button").on("click", function () {
// Change the button's content.
userHasInteracted();
player.playOrPause();
});
player.onPlayPause(isPlaying => {
d3.select("#play-pause-button").classed("playing", isPlaying);
});
d3.select("#next-step-button").on("click", () => {
player.pause();
userHasInteracted();
if (iter === 0) {
simulationStarted();
}
oneStep();
});
d3.select("#data-regen-button").on("click", () => {
generateData();
parametersChanged = true;
});
let dataThumbnails = d3.selectAll("canvas[data-dataset]");
dataThumbnails.on("click", function() {
let newDataset = datasets[this.dataset.dataset];
if (newDataset === state.dataset) {
return; // No-op.
}
state.dataset = newDataset;
dataThumbnails.classed("selected", false);
d3.select(this).classed("selected", true);
generateData();
parametersChanged = true;
reset();
});
let datasetKey = getKeyFromValue(datasets, state.dataset);
// Select the dataset according to the current state.
d3.select(`canvas[data-dataset=${datasetKey}]`)
.classed("selected", true);
let regDataThumbnails = d3.selectAll("canvas[data-regDataset]");
regDataThumbnails.on("click", function() {
let newDataset = regDatasets[this.dataset.regdataset];
if (newDataset === state.regDataset) {
return; // No-op.
}
state.regDataset = newDataset;
regDataThumbnails.classed("selected", false);
d3.select(this).classed("selected", true);
generateData();
parametersChanged = true;
reset();
});
let regDatasetKey = getKeyFromValue(regDatasets, state.regDataset);
// Select the dataset according to the current state.
d3.select(`canvas[data-regDataset=${regDatasetKey}]`)
.classed("selected", true);
d3.select("#add-layers").on("click", () => {
if (state.numHiddenLayers >= 6) {
return;
}
state.networkShape[state.numHiddenLayers] = 2;
state.numHiddenLayers++;
parametersChanged = true;
reset();
});
d3.select("#remove-layers").on("click", () => {
if (state.numHiddenLayers <= 0) {
return;
}
state.numHiddenLayers--;
state.networkShape.splice(state.numHiddenLayers);
parametersChanged = true;
reset();
});
let showTestData = d3.select("#show-test-data").on("change", function() {
state.showTestData = this.checked;
state.serialize();
userHasInteracted();
heatMap.updateTestPoints(state.showTestData ? testData : []);
});
// Check/uncheck the checkbox according to the current state.
showTestData.property("checked", state.showTestData);
let discretize = d3.select("#discretize").on("change", function() {
state.discretize = this.checked;
state.serialize();
userHasInteracted();
updateUI();
});
// Check/uncheck the checbox according to the current state.
discretize.property("checked", state.discretize);
let percTrain = d3.select("#percTrainData").on("input", function() {
state.percTrainData = this.value;
d3.select("label[for='percTrainData'] .value").text(this.value);
generateData();
parametersChanged = true;
reset();
});
percTrain.property("value", state.percTrainData);
d3.select("label[for='percTrainData'] .value").text(state.percTrainData);
let noise = d3.select("#noise").on("input", function() {
state.noise = this.value;
d3.select("label[for='noise'] .value").text(this.value);
generateData();
parametersChanged = true;
reset();
});
let currentMax = parseInt(noise.property("max"));
if (state.noise > currentMax) {
if (state.noise <= 80) {
noise.property("max", state.noise);
} else {
state.noise = 50;
}
} else if (state.noise < 0) {
state.noise = 0;
}
noise.property("value", state.noise);
d3.select("label[for='noise'] .value").text(state.noise);
let batchSize = d3.select("#batchSize").on("input", function() {
state.batchSize = this.value;
d3.select("label[for='batchSize'] .value").text(this.value);
parametersChanged = true;
reset();
});
batchSize.property("value", state.batchSize);
d3.select("label[for='batchSize'] .value").text(state.batchSize);
let activationDropdown = d3.select("#activations").on("change", function() {
state.activation = activations[this.value];
parametersChanged = true;
reset();
});
activationDropdown.property("value",
getKeyFromValue(activations, state.activation));
let learningRate = d3.select("#learningRate").on("change", function() {
state.learningRate = +this.value;
state.serialize();
userHasInteracted();
parametersChanged = true;
});
learningRate.property("value", state.learningRate);
let regularDropdown = d3.select("#regularizations").on("change",
function() {
state.regularization = regularizations[this.value];
parametersChanged = true;
reset();
});
regularDropdown.property("value",
getKeyFromValue(regularizations, state.regularization));
let regularRate = d3.select("#regularRate").on("change", function() {
state.regularizationRate = +this.value;
parametersChanged = true;
reset();
});
regularRate.property("value", state.regularizationRate);
let problem = d3.select("#problem").on("change", function() {
state.problem = problems[this.value];
generateData();
drawDatasetThumbnails();
parametersChanged = true;
reset();
});
problem.property("value", getKeyFromValue(problems, state.problem));
// Add scale to the gradient color map.
let x = d3.scale.linear().domain([-1, 1]).range([0, 144]);
let xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues([-1, 0, 1])
.tickFormat(d3.format("d"));
d3.select("#colormap g.core").append("g")
.attr("class", "x axis")
.attr("transform", "translate(0,10)")
.call(xAxis);
// Listen for css-responsive changes and redraw the svg network.
window.addEventListener("resize", () => {
let newWidth = document.querySelector("#main-part")
.getBoundingClientRect().width;
if (newWidth !== mainWidth) {
mainWidth = newWidth;
drawNetwork(network);
updateUI(true);
}
});
// Hide the text below the visualization depending on the URL.
if (state.hideText) {
d3.select("#article-text").style("display", "none");
d3.select("div.more").style("display", "none");
d3.select("header").style("display", "none");
}
}
function updateBiasesUI(network: nn.Node[][]) {
nn.forEachNode(network, true, node => {
d3.select(`rect#bias-${node.id}`).style("fill", colorScale(node.bias));
});
}
function updateWeightsUI(network: nn.Node[][], container) {
for (let layerIdx = 1; layerIdx < network.length; layerIdx++) {
let currentLayer = network[layerIdx];
// Update all the nodes in this layer.
for (let i = 0; i < currentLayer.length; i++) {
let node = currentLayer[i];
for (let j = 0; j < node.inputLinks.length; j++) {
let link = node.inputLinks[j];
container.select(`#link${link.source.id}-${link.dest.id}`)
.style({
"stroke-dashoffset": -iter / 3,
"stroke-width": linkWidthScale(Math.abs(link.weight)),
"stroke": colorScale(link.weight)
})
.datum(link);
}
}
}
}
function drawNode(cx: number, cy: number, nodeId: string, isInput: boolean,
container, node?: nn.Node) {
let x = cx - RECT_SIZE / 2;
let y = cy - RECT_SIZE / 2;
let nodeGroup = container.append("g")
.attr({
"class": "node",
"id": `node${nodeId}`,
"transform": `translate(${x},${y})`
});
// Draw the main rectangle.
nodeGroup.append("rect")
.attr({
x: 0,
y: 0,
width: RECT_SIZE,
height: RECT_SIZE,
});
let activeOrNotClass = state[nodeId] ? "active" : "inactive";
if (isInput) {
let label = INPUTS[nodeId].label != null ?
INPUTS[nodeId].label : nodeId;
// Draw the input label.
let text = nodeGroup.append("text").attr({
class: "main-label",
x: -10,
y: RECT_SIZE / 2, "text-anchor": "end"
});
if (/[_^]/.test(label)) {
let myRe = /(.*?)([_^])(.)/g;
let myArray;
let lastIndex;
while ((myArray = myRe.exec(label)) != null) {
lastIndex = myRe.lastIndex;
let prefix = myArray[1];
let sep = myArray[2];
let suffix = myArray[3];
if (prefix) {
text.append("tspan").text(prefix);
}
text.append("tspan")
.attr("baseline-shift", sep === "_" ? "sub" : "super")
.style("font-size", "9px")
.text(suffix);
}
if (label.substring(lastIndex)) {
text.append("tspan").text(label.substring(lastIndex));
}
} else {
text.append("tspan").text(label);
}
nodeGroup.classed(activeOrNotClass, true);
}
if (!isInput) {
// Draw the node's bias.
nodeGroup.append("rect")
.attr({
id: `bias-${nodeId}`,
x: -BIAS_SIZE - 2,
y: RECT_SIZE - BIAS_SIZE + 3,
width: BIAS_SIZE,
height: BIAS_SIZE,
}).on("mouseenter", function() {
updateHoverCard(HoverType.BIAS, node, d3.mouse(container.node()));
}).on("mouseleave", function() {
updateHoverCard(null);
});
}
// Draw the node's canvas.
let div = d3.select("#network").insert("div", ":first-child")
.attr({
"id": `canvas-${nodeId}`,
"class": "canvas"
})
.style({
position: "absolute",
left: `${x + 3}px`,
top: `${y + 3}px`
})
.on("mouseenter", function() {
selectedNodeId = nodeId;
div.classed("hovered", true);
nodeGroup.classed("hovered", true);
updateDecisionBoundary(network, false);
heatMap.updateBackground(boundary[nodeId], state.discretize);
})
.on("mouseleave", function() {
selectedNodeId = null;
div.classed("hovered", false);
nodeGroup.classed("hovered", false);
updateDecisionBoundary(network, false);
heatMap.updateBackground(boundary[nn.getOutputNode(network).id],
state.discretize);
});
if (isInput) {
div.on("click", function() {
state[nodeId] = !state[nodeId];
parametersChanged = true;
reset();
});
div.style("cursor", "pointer");
}
if (isInput) {
div.classed(activeOrNotClass, true);
}
let nodeHeatMap = new HeatMap(RECT_SIZE, DENSITY / 10, xDomain,
xDomain, div, {noSvg: true});
div.datum({heatmap: nodeHeatMap, id: nodeId});
}
// Draw network
function drawNetwork(network: nn.Node[][]): void {
let svg = d3.select("#svg");
// Remove all svg elements.
svg.select("g.core").remove();
// Remove all div elements.
d3.select("#network").selectAll("div.canvas").remove();
d3.select("#network").selectAll("div.plus-minus-neurons").remove();
// Get the width of the svg container.
let padding = 3;
let co = d3.select(".column.output").node() as HTMLDivElement;
let cf = d3.select(".column.features").node() as HTMLDivElement;
let width = co.offsetLeft - cf.offsetLeft;
svg.attr("width", width);
// Map of all node coordinates.
let node2coord: {[id: string]: {cx: number, cy: number}} = {};
let container = svg.append("g")
.classed("core", true)
.attr("transform", `translate(${padding},${padding})`);
// Draw the network layer by layer.
let numLayers = network.length;
let featureWidth = 118;
let layerScale = d3.scale.ordinal<number, number>()
.domain(d3.range(1, numLayers - 1))
.rangePoints([featureWidth, width - RECT_SIZE], 0.7);
let nodeIndexScale = (nodeIndex: number) => nodeIndex * (RECT_SIZE + 25);
let calloutThumb = d3.select(".callout.thumbnail").style("display", "none");
let calloutWeights = d3.select(".callout.weights").style("display", "none");
let idWithCallout = null;
let targetIdWithCallout = null;
// Draw the input layer separately.
let cx = RECT_SIZE / 2 + 50;
let nodeIds = Object.keys(INPUTS);
let maxY = nodeIndexScale(nodeIds.length);
nodeIds.forEach((nodeId, i) => {
let cy = nodeIndexScale(i) + RECT_SIZE / 2;
node2coord[nodeId] = {cx, cy};
drawNode(cx, cy, nodeId, true, container);
});
// Draw the intermediate layers.
for (let layerIdx = 1; layerIdx < numLayers - 1; layerIdx++) {
let numNodes = network[layerIdx].length;
let cx = layerScale(layerIdx) + RECT_SIZE / 2;
maxY = Math.max(maxY, nodeIndexScale(numNodes));
addPlusMinusControl(layerScale(layerIdx), layerIdx);
for (let i = 0; i < numNodes; i++) {
let node = network[layerIdx][i];
let cy = nodeIndexScale(i) + RECT_SIZE / 2;
node2coord[node.id] = {cx, cy};
drawNode(cx, cy, node.id, false, container, node);
// Show callout to thumbnails.
let numNodes = network[layerIdx].length;
let nextNumNodes = network[layerIdx + 1].length;
if (idWithCallout == null &&
i === numNodes - 1 &&
nextNumNodes <= numNodes) {
calloutThumb.style({
display: null,
top: `${20 + 3 + cy}px`,
left: `${cx}px`
});
idWithCallout = node.id;
}
// Draw links.
for (let j = 0; j < node.inputLinks.length; j++) {
let link = node.inputLinks[j];
let path: SVGPathElement = drawLink(link, node2coord, network,
container, j === 0, j, node.inputLinks.length).node() as any;
// Show callout to weights.
let prevLayer = network[layerIdx - 1];
let lastNodePrevLayer = prevLayer[prevLayer.length - 1];
if (targetIdWithCallout == null &&
i === numNodes - 1 &&
link.source.id === lastNodePrevLayer.id &&
(link.source.id !== idWithCallout || numLayers <= 5) &&
link.dest.id !== idWithCallout &&
prevLayer.length >= numNodes) {
let midPoint = path.getPointAtLength(path.getTotalLength() * 0.7);
calloutWeights.style({
display: null,
top: `${midPoint.y + 5}px`,
left: `${midPoint.x + 3}px`
});
targetIdWithCallout = link.dest.id;
}
}
}
}
// Draw the output node separately.
cx = width + RECT_SIZE / 2;
let node = network[numLayers - 1][0];
let cy = nodeIndexScale(0) + RECT_SIZE / 2;
node2coord[node.id] = {cx, cy};
// Draw links.
for (let i = 0; i < node.inputLinks.length; i++) {
let link = node.inputLinks[i];
drawLink(link, node2coord, network, container, i === 0, i,
node.inputLinks.length);
}
// Adjust the height of the svg.
svg.attr("height", maxY);
// Adjust the height of the features column.
let height = Math.max(
getRelativeHeight(calloutThumb),
getRelativeHeight(calloutWeights),
getRelativeHeight(d3.select("#network"))
);
d3.select(".column.features").style("height", height + "px");
}
function getRelativeHeight(selection) {
let node = selection.node() as HTMLAnchorElement;
return node.offsetHeight + node.offsetTop;
}
function addPlusMinusControl(x: number, layerIdx: number) {
let div = d3.select("#network").append("div")
.classed("plus-minus-neurons", true)
.style("left", `${x - 10}px`);
let i = layerIdx - 1;
let firstRow = div.append("div").attr("class", `ui-numNodes${layerIdx}`);
firstRow.append("button")
.attr("class", "mdl-button mdl-js-button mdl-button--icon")
.on("click", () => {
let numNeurons = state.networkShape[i];
if (numNeurons >= 8) {
return;
}
state.networkShape[i]++;
parametersChanged = true;
reset();
})
.append("i")
.attr("class", "material-icons")
.text("add");
firstRow.append("button")
.attr("class", "mdl-button mdl-js-button mdl-button--icon")
.on("click", () => {
let numNeurons = state.networkShape[i];
if (numNeurons <= 1) {
return;
}
state.networkShape[i]--;
parametersChanged = true;
reset();
})
.append("i")
.attr("class", "material-icons")
.text("remove");
let suffix = state.networkShape[i] > 1 ? "s" : "";
div.append("div").text(
state.networkShape[i] + " neuron" + suffix
);
}
function updateHoverCard(type: HoverType, nodeOrLink?: nn.Node | nn.Link,
coordinates?: [number, number]) {
let hovercard = d3.select("#hovercard");
if (type == null) {
hovercard.style("display", "none");
d3.select("#svg").on("click", null);
return;
}
d3.select("#svg").on("click", () => {
hovercard.select(".value").style("display", "none");
let input = hovercard.select("input");
input.style("display", null);
input.on("input", function() {
if (this.value != null && this.value !== "") {
if (type === HoverType.WEIGHT) {
(nodeOrLink as nn.Link).weight = +this.value;
} else {
(nodeOrLink as nn.Node).bias = +this.value;
}
updateUI();
}
});
input.on("keypress", () => {
if ((d3.event as any).keyCode === 13) {
updateHoverCard(type, nodeOrLink, coordinates);
}
});
(input.node() as HTMLInputElement).focus();
});
let value = (type === HoverType.WEIGHT) ?
(nodeOrLink as nn.Link).weight :
(nodeOrLink as nn.Node).bias;
let name = (type === HoverType.WEIGHT) ? "Weight" : "Bias";
hovercard.style({
"left": `${coordinates[0] + 20}px`,
"top": `${coordinates[1]}px`,
"display": "block"
});
hovercard.select(".type").text(name);
hovercard.select(".value")
.style("display", null)
.text(value.toPrecision(2));
hovercard.select("input")
.property("value", value.toPrecision(2))
.style("display", "none");
}
function drawLink(
input: nn.Link, node2coord: {[id: string]: {cx: number, cy: number}},
network: nn.Node[][], container,
isFirst: boolean, index: number, length: number) {
let line = container.insert("path", ":first-child");
let source = node2coord[input.source.id];
let dest = node2coord[input.dest.id];
let datum = {
source: {
y: source.cx + RECT_SIZE / 2 + 2,
x: source.cy
},
target: {
y: dest.cx - RECT_SIZE / 2,
x: dest.cy + ((index - (length - 1) / 2) / length) * 12
}
};
let diagonal = d3.svg.diagonal().projection(d => [d.y, d.x]);
line.attr({
"marker-start": "url(#markerArrow)",
class: "link",
id: "link" + input.source.id + "-" + input.dest.id,
d: diagonal(datum, 0)
});
// Add an invisible thick link that will be used for
// showing the weight value on hover.
container.append("path")
.attr("d", diagonal(datum, 0))
.attr("class", "link-hover")
.on("mouseenter", function() {
updateHoverCard(HoverType.WEIGHT, input, d3.mouse(this));
}).on("mouseleave", function() {
updateHoverCard(null);
});
return line;
}
/**
* Given a neural network, it asks the network for the output (prediction)
* of every node in the network using inputs sampled on a square grid.
* It returns a map where each key is the node ID and the value is a square
* matrix of the outputs of the network for each input in the grid respectively.
*/
function updateDecisionBoundary(network: nn.Node[][], firstTime: boolean) {
if (firstTime) {
boundary = {};
nn.forEachNode(network, true, node => {
boundary[node.id] = new Array(DENSITY);
});
// Go through all predefined inputs.
for (let nodeId in INPUTS) {
boundary[nodeId] = new Array(DENSITY);
}
}
let xScale = d3.scale.linear().domain([0, DENSITY - 1]).range(xDomain);
let yScale = d3.scale.linear().domain([DENSITY - 1, 0]).range(xDomain);
let i = 0, j = 0;
for (i = 0; i < DENSITY; i++) {
if (firstTime) {
nn.forEachNode(network, true, node => {
boundary[node.id][i] = new Array(DENSITY);
});
// Go through all predefined inputs.
for (let nodeId in INPUTS) {
boundary[nodeId][i] = new Array(DENSITY);
}
}
for (j = 0; j < DENSITY; j++) {
// 1 for points inside the circle, and 0 for points outside the circle.
let x = xScale(i);
let y = yScale(j);
let input = constructInput(x, y);
nn.forwardProp(network, input);
nn.forEachNode(network, true, node => {
boundary[node.id][i][j] = node.output;
});
if (firstTime) {
// Go through all predefined inputs.
for (let nodeId in INPUTS) {
boundary[nodeId][i][j] = INPUTS[nodeId].f(x, y);
}
}
}
}
}
function getLoss(network: nn.Node[][], dataPoints: Example2D[]): number {
let loss = 0;
for (let i = 0; i < dataPoints.length; i++) {
let dataPoint = dataPoints[i];
let input = constructInput(dataPoint.x, dataPoint.y);
let output = nn.forwardProp(network, input);
loss += nn.Errors.SQUARE.error(output, dataPoint.label);
}
return loss / dataPoints.length;
}
function updateUI(firstStep = false) {
// Update the links visually.
updateWeightsUI(network, d3.select("g.core"));
// Update the bias values visually.
updateBiasesUI(network);
// Get the decision boundary of the network.
updateDecisionBoundary(network, firstStep);
let selectedId = selectedNodeId != null ?
selectedNodeId : nn.getOutputNode(network).id;
heatMap.updateBackground(boundary[selectedId], state.discretize);
// Update all decision boundaries.
d3.select("#network").selectAll("div.canvas")
.each(function(data: {heatmap: HeatMap, id: string}) {
data.heatmap.updateBackground(reduceMatrix(boundary[data.id], 10),
state.discretize);
});
function zeroPad(n: number): string {
let pad = "000000";
return (pad + n).slice(-pad.length);
}
function addCommas(s: string): string {
return s.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function humanReadable(n: number): string {
return n.toFixed(3);
}
// Update loss and iteration number.
d3.select("#loss-train").text(humanReadable(lossTrain));
d3.select("#loss-test").text(humanReadable(lossTest));
d3.select("#iter-number").text(addCommas(zeroPad(iter)));
lineChart.addDataPoint([lossTrain, lossTest]);
}
function constructInputIds(): string[] {
let result: string[] = [];
for (let inputName in INPUTS) {
if (state[inputName]) {
result.push(inputName);
}
}
return result;
}
function constructInput(x: number, y: number): number[] {
let input: number[] = [];
for (let inputName in INPUTS) {
if (state[inputName]) {
input.push(INPUTS[inputName].f(x, y));
}
}
return input;
}
function oneStep(): void {
iter++;
trainData.forEach((point, i) => {
let input = constructInput(point.x, point.y);
nn.forwardProp(network, input);
nn.backProp(network, point.label, nn.Errors.SQUARE);
if ((i + 1) % state.batchSize === 0) {
nn.updateWeights(network, state.learningRate, state.regularizationRate);
}
});
// Compute the loss.
lossTrain = getLoss(network, trainData);
lossTest = getLoss(network, testData);
updateUI();
}
export function getOutputWeights(network: nn.Node[][]): number[] {
let weights: number[] = [];
for (let layerIdx = 0; layerIdx < network.length - 1; layerIdx++) {
let currentLayer = network[layerIdx];
for (let i = 0; i < currentLayer.length; i++) {
let node = currentLayer[i];
for (let j = 0; j < node.outputs.length; j++) {
let output = node.outputs[j];
weights.push(output.weight);
}
}
}
return weights;
}
function reset(onStartup=false) {
lineChart.reset();
state.serialize();
if (!onStartup) {
userHasInteracted();
}
player.pause();
let suffix = state.numHiddenLayers !== 1 ? "s" : "";
d3.select("#layers-label").text("Hidden layer" + suffix);
d3.select("#num-layers").text(state.numHiddenLayers);
// Make a simple network.
iter = 0;
let numInputs = constructInput(0 , 0).length;
let shape = [numInputs].concat(state.networkShape).concat([1]);
let outputActivation = (state.problem === Problem.REGRESSION) ?
nn.Activations.LINEAR : nn.Activations.TANH;
network = nn.buildNetwork(shape, state.activation, outputActivation,
state.regularization, constructInputIds(), state.initZero);
lossTrain = getLoss(network, trainData);
lossTest = getLoss(network, testData);
drawNetwork(network);
updateUI(true);
};
function initTutorial() {
if (state.tutorial == null || state.tutorial === '' || state.hideText) {
return;
}
// Remove all other text.
d3.selectAll("article div.l--body").remove();
let tutorial = d3.select("article").append("div")
.attr("class", "l--body");
// Insert tutorial text.
d3.html(`tutorials/${state.tutorial}.html`, (err, htmlFragment) => {
if (err) {
throw err;
}
tutorial.node().appendChild(htmlFragment);
// If the tutorial has a <title> tag, set the page title to that.
let title = tutorial.select("title");
if (title.size()) {
d3.select("header h1").style({
"margin-top": "20px",
"margin-bottom": "20px",
})
.text(title.text());
document.title = title.text();
}
});
}
function drawDatasetThumbnails() {
function renderThumbnail(canvas, dataGenerator) {
let w = 100;
let h = 100;
canvas.setAttribute("width", w);
canvas.setAttribute("height", h);
let context = canvas.getContext("2d");
let data = dataGenerator(200, 0);
data.forEach(function(d) {
context.fillStyle = colorScale(d.label);
context.fillRect(w * (d.x + 6) / 12, h * (d.y + 6) / 12, 4, 4);
});
d3.select(canvas.parentNode).style("display", null);
}
d3.selectAll(".dataset").style("display", "none");
if (state.problem === Problem.CLASSIFICATION) {
for (let dataset in datasets) {
let canvas: any =
document.querySelector(`canvas[data-dataset=${dataset}]`);
let dataGenerator = datasets[dataset];
renderThumbnail(canvas, dataGenerator);
}
}
if (state.problem === Problem.REGRESSION) {
for (let regDataset in regDatasets) {
let canvas: any =
document.querySelector(`canvas[data-regDataset=${regDataset}]`);
let dataGenerator = regDatasets[regDataset];
renderThumbnail(canvas, dataGenerator);
}
}
}
function hideControls() {
// Set display:none to all the UI elements that are hidden.
let hiddenProps = state.getHiddenProps();
hiddenProps.forEach(prop => {
let controls = d3.selectAll(`.ui-${prop}`);
if (controls.size() === 0) {
console.warn(`0 html elements found with class .ui-${prop}`);
}
controls.style("display", "none");
});
// Also add checkbox for each hidable control in the "use it in classrom"
// section.
let hideControls = d3.select(".hide-controls");
HIDABLE_CONTROLS.forEach(([text, id]) => {
let label = hideControls.append("label")
.attr("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect");
let input = label.append("input")
.attr({
type: "checkbox",
class: "mdl-checkbox__input",
});
if (hiddenProps.indexOf(id) === -1) {
input.attr("checked", "true");
}
input.on("change", function() {
state.setHideProperty(id, !this.checked);
state.serialize();
userHasInteracted();
d3.select(".hide-controls-link")
.attr("href", window.location.href);
});
label.append("span")
.attr("class", "mdl-checkbox__label label")
.text(text);
});
d3.select(".hide-controls-link")
.attr("href", window.location.href);
}
function generateData(firstTime = false) {
if (!firstTime) {
// Change the seed.
state.seed = Math.random().toFixed(5);
state.serialize();
userHasInteracted();
}
Math.seedrandom(state.seed);
let numSamples = (state.problem === Problem.REGRESSION) ?
NUM_SAMPLES_REGRESS : NUM_SAMPLES_CLASSIFY;
let generator = state.problem === Problem.CLASSIFICATION ?
state.dataset : state.regDataset;
let data = generator(numSamples, state.noise / 100);
// Shuffle the data in-place.
shuffle(data);
// Split into train and test data.
let splitIndex = Math.floor(data.length * state.percTrainData / 100);
trainData = data.slice(0, splitIndex);
testData = data.slice(splitIndex);
heatMap.updatePoints(trainData);
heatMap.updateTestPoints(state.showTestData ? testData : []);
}
let firstInteraction = true;
let parametersChanged = false;
function userHasInteracted() {
if (!firstInteraction) {
return;
}
firstInteraction = false;
let page = 'index';
if (state.tutorial != null && state.tutorial !== '') {
page = `/v/tutorials/${state.tutorial}`;
}
ga('set', 'page', page);
ga('send', 'pageview', {'sessionControl': 'start'});
}
function simulationStarted() {
ga('send', {
hitType: 'event',
eventCategory: 'Starting Simulation',
eventAction: parametersChanged ? 'changed' : 'unchanged',
eventLabel: state.tutorial == null ? '' : state.tutorial
});
parametersChanged = false;
}
drawDatasetThumbnails();
initTutorial();
makeGUI();
generateData(true);
reset(true);
hideControls();
================================================
FILE: src/seedrandom.d.ts
================================================
/* Copyright 2016 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
interface Math {
seedrandom: (seed: string) => void;
}
declare let ga: any;
================================================
FILE: src/state.ts
================================================
/* Copyright 2016 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
import * as nn from "./nn";
import * as dataset from "./dataset";
/** Suffix added to the state when storing if a control is hidden or not. */
const HIDE_STATE_SUFFIX = "_hide";
/** A map between names and activation functions. */
export let activations: {[key: string]: nn.ActivationFunction} = {
"relu": nn.Activations.RELU,
"tanh": nn.Activations.TANH,
"sigmoid": nn.Activations.SIGMOID,
"linear": nn.Activations.LINEAR
};
/** A map between names and regularization functions. */
export let regularizations: {[key: string]: nn.RegularizationFunction} = {
"none": null,
"L1": nn.RegularizationFunction.L1,
"L2": nn.RegularizationFunction.L2
};
/** A map between dataset names and functions that generate classification data. */
export let datasets: {[key: string]: dataset.DataGenerator} = {
"circle": dataset.classifyCircleData,
"xor": dataset.classifyXORData,
"gauss": dataset.classifyTwoGaussData,
"spiral": dataset.classifySpiralData,
};
/** A map between dataset names and functions that generate regression data. */
export let regDatasets: {[key: string]: dataset.DataGenerator} = {
"reg-plane": dataset.regressPlane,
"reg-gauss": dataset.regressGaussian
};
export function getKeyFromValue(obj: any, value: any): string {
for (let key in obj) {
if (obj[key] === value) {
return key;
}
}
return undefined;
}
function endsWith(s: string, suffix: string): boolean {
return s.substr(-suffix.length) === suffix;
}
function getHideProps(obj: any): string[] {
let result: string[] = [];
for (let prop in obj) {
if (endsWith(prop, HIDE_STATE_SUFFIX)) {
result.push(prop);
}
}
return result;
}
/**
* The data type of a state variable. Used for determining the
* (de)serialization method.
*/
export enum Type {
STRING,
NUMBER,
ARRAY_NUMBER,
ARRAY_STRING,
BOOLEAN,
OBJECT
}
export enum Problem {
CLASSIFICATION,
REGRESSION
}
export let problems = {
"classification": Problem.CLASSIFICATION,
"regression": Problem.REGRESSION
};
export interface Property {
name: string;
type: Type;
keyMap?: {[key: string]: any};
};
// Add the GUI state.
export class State {
private static PROPS: Property[] = [
{name: "activation", type: Type.OBJECT, keyMap: activations},
{name: "regularization", type: Type.OBJECT, keyMap: regularizations},
{name: "batchSize", type: Type.NUMBER},
{name: "dataset", type: Type.OBJECT, keyMap: datasets},
{name: "regDataset", type: Type.OBJECT, keyMap: regDatasets},
{name: "learningRate", type: Type.NUMBER},
{name: "regularizationRate", type: Type.NUMBER},
{name: "noise", type: Type.NUMBER},
{name: "networkShape", type: Type.ARRAY_NUMBER},
{name: "seed", type: Type.STRING},
{name: "showTestData", type: Type.BOOLEAN},
{name: "discretize", type: Type.BOOLEAN},
{name: "percTrainData", type: Type.NUMBER},
{name: "x", type: Type.BOOLEAN},
{name: "y", type: Type.BOOLEAN},
{name: "xTimesY", type: Type.BOOLEAN},
{name: "xSquared", type: Type.BOOLEAN},
{name: "ySquared", type: Type.BOOLEAN},
{name: "cosX", type: Type.BOOLEAN},
{name: "sinX", type: Type.BOOLEAN},
{name: "cosY", type: Type.BOOLEAN},
{name: "sinY", type: Type.BOOLEAN},
{name: "collectStats", type: Type.BOOLEAN},
{name: "tutorial", type: Type.STRING},
{name: "problem", type: Type.OBJECT, keyMap: problems},
{name: "initZero", type: Type.BOOLEAN},
{name: "hideText", type: Type.BOOLEAN}
];
[key: string]: any;
learningRate = 0.03;
regularizationRate = 0;
showTestData = false;
noise = 0;
batchSize = 10;
discretize = false;
tutorial: string = null;
percTrainData = 50;
activation = nn.Activations.TANH;
regularization: nn.RegularizationFunction = null;
problem = Problem.CLASSIFICATION;
initZero = false;
hideText = false;
collectStats = false;
numHiddenLayers = 1;
hiddenLayerControls: any[] = [];
networkShape: number[] = [4, 2];
x = true;
y = true;
xTimesY = false;
xSquared = false;
ySquared = false;
cosX = false;
sinX = false;
cosY = false;
sinY = false;
dataset: dataset.DataGenerator = dataset.classifyCircleData;
regDataset: dataset.DataGenerator = dataset.regressPlane;
seed: string;
/**
* Deserializes the state from the url hash.
*/
static deserializeState(): State {
let map: {[key: string]: string} = {};
for (let keyvalue of window.location.hash.slice(1).split("&")) {
let [name, value] = keyvalue.split("=");
map[name] = value;
}
let state = new State();
function hasKey(name: string): boolean {
return name in map && map[name] != null && map[name].trim() !== "";
}
function parseArray(value: string): string[] {
return value.trim() === "" ? [] : value.split(",");
}
// Deserialize regular properties.
State.PROPS.forEach(({name, type, keyMap}) => {
switch (type) {
case Type.OBJECT:
if (keyMap == null) {
throw Error("A key-value map must be provided for state " +
"variables of type Object");
}
if (hasKey(name) && map[name] in keyMap) {
state[name] = keyMap[map[name]];
}
break;
case Type.NUMBER:
if (hasKey(name)) {
// The + operator is for converting a string to a number.
state[name] = +map[name];
}
break;
case Type.STRING:
if (hasKey(name)) {
state[name] = map[name];
}
break;
case Type.BOOLEAN:
if (hasKey(name)) {
state[name] = (map[name] === "false" ? false : true);
}
break;
case Type.ARRAY_NUMBER:
if (name in map) {
state[name] = parseArray(map[name]).map(Number);
}
break;
case Type.ARRAY_STRING:
if (name in map) {
state[name] = parseArray(map[name]);
}
break;
default:
throw Error("Encountered an unknown type for a state variable");
}
});
// Deserialize state properties that correspond to hiding UI controls.
getHideProps(map).forEach(prop => {
state[prop] = (map[prop] === "true") ? true : false;
});
state.numHiddenLayers = state.networkShape.length;
if (state.seed == null) {
state.seed = Math.random().toFixed(5);
}
Math.seedrandom(state.seed);
return state;
}
/**
* Serializes the state into the url hash.
*/
serialize() {
// Serialize regular properties.
let props: string[] = [];
State.PROPS.forEach(({name, type, keyMap}) => {
let value = this[name];
// Don't serialize missing values.
if (value == null) {
return;
}
if (type === Type.OBJECT) {
value = getKeyFromValue(keyMap, value);
} else if (type === Type.ARRAY_NUMBER ||
type === Type.ARRAY_STRING) {
value = value.join(",");
}
props.push(`${name}=${value}`);
});
// Serialize properties that correspond to hiding UI controls.
getHideProps(this).forEach(prop => {
props.push(`${prop}=${this[prop]}`);
});
window.location.hash = props.join("&");
}
/** Returns all the hidden properties. */
getHiddenProps(): string[] {
let result: string[] = [];
for (let prop in this) {
if (endsWith(prop, HIDE_STATE_SUFFIX) && String(this[prop]) === "true") {
result.push(prop.replace(HIDE_STATE_SUFFIX, ""));
}
}
return result;
}
setHideProperty(name: string, hidden: boolean) {
this[name + HIDE_STATE_SUFFIX] = hidden;
}
}
================================================
FILE: styles.css
================================================
/* Copyright 2016 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
/* General Type */
body {
font-family: "Helvetica", "Arial", sans-serif;
background-color: #f7f7f7;
}
h1 {
font-size: 34px;
}
header h1 {
line-height: 1.45em;
font-weight: 300;
color: rgba(255, 255, 255, 0.7);
}
h1 b {
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
h2 {
margin: 5px 0;
font-weight: 300;
font-size: 18px;
}
h3 {
margin: 10px 0;
}
p a {
color: #0D658C;
}
/* Layout */
body {
margin: 0;
}
.l--body {
width: 550px;
margin-left: auto;
margin-right: auto;
}
.l--page {
width: 944px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1180px) {
.l--page {
width: 1100px;
}
}
@media (min-width: 1400px) {
.l--page {
width: 1220px;
}
}
/* Buttons */
#main-part .mdl-button {
background-color: rgba(158,158,158,.1);
width: 28px;
height: 28px;
min-width: 28px;
}
#main-part .mdl-button:hover {
background-color: rgba(158,158,158,.3);
}
#main-part .mdl-button:focus:not(:active) {
background-color: rgba(158,158,158,.4);
}
#main-part .mdl-button:active {
background-color: rgba(158,158,158,.5);
}
#main-part .mdl-button .material-icons {
font-size: 20px;
color: rgba(0, 0, 0, 0.7);
}
.button {
cursor: pointer;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 18px;
border-radius: 50%;
margin: 0 1px;
background-color: rgba(0,0,0,0.05);
outline: none;
border: none;
padding: 0;
color: #666;
transition: background-color 0.3s, color 0.3s;
}
.button:hover {
background-color: rgba(0,0,0,0.1);
}
.button:active {
background-color: rgba(0,0,0,0.15);
color: #333;
}
.button i {
font-size: 16px;
}
.hide-button {
cursor: pointer;
padding: 6px 4px 8px 4px;
border-left: 1px solid #2c2c2c;
border-bottom: 1px solid #2c2c2c;
position: fixed;
right: 0px;
background: #1a1a1a;
color: #eee;
font: 11px 'Lucida Grande', sans-serif;
display: table;
}
/* Header */
.github-link {
width: 60px;
height: 60px;
position: absolute;
display: block;
top: 0;
right: 0;
z-index: 1000;
}
.github-link .bg {
fill: #fff;
fill-opacity: 0.2;
}
.github-link:hover .bg {
fill-opacity: 0.3;
}
.github-link .icon {
fill: #fff;
fill-opacity: 0.6;
}
.github-link:hover .icon {
fill-opacity: 0.7;
}
header {
border-bottom: solid 1px rgba(0,0,0,0.4);
background-color: #183D4E;
color: white;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
position: relative;
}
header h1 {
font-size: 30px;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
-webkit-font-smoothing: antialiased;
}
header h1 .optional {
display: none;
}
@media (min-width: 1064px) {
header h1 .optional {
display: inline;
}
}
@media (min-height: 700px) {
header h1 {
margin-top: 40px;
margin-bottom: 40px;
}
}
@media (min-height: 800px) {
header h1 {
font-size: 34px;
margin-top: 60px;
margin-bottom: 60px;
}
}
/* Top Controls */
#top-controls {
border-bottom: 1px solid #ddd;
padding: 18px 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
background: white;
}
@media (min-height: 700px) {
#top-controls {
padding: 24px 0;
}
}
#top-controls .container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-betweenspace-between;
justify-content: space-between;
}
#top-controls .timeline-controls {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
margin-right: 20px;
width: 140px;
}
#play-pause-button .material-icons {
color: white;
font-size: 36px;
transform: translate(-18px,-12px);
}
#play-pause-button .material-icons:nth-of-type(2) {
display: none;
}
#play-pause-button.playing .material-icons:nth-of-type(1) {
display: none;
}
#play-pause-button.playing .material-icons:nth-of-type(2) {
display: inherit;
}
#top-controls .control {
flex-grow: 1;
max-width: 180px;
min-width: 110px;
margin-left: 30px;
margin-top: 6px;
}
#top-controls .control .label,
#top-controls .control label {
color: #777;
font-size: 13px;
display: block;
margin-bottom: 6px;
font-weight: 300;
}
#top-controls .control .value {
font-size: 24px;
margin: 0;
font-weight: 300;
}
#top-controls .control .select {
position: relative;
}
#top-controls .control select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
background: none;
border: none;
border-radius: 0;
padding: 6px 0;
width: 100%;
font-size: 14px;
border-bottom: solid 1px #ccc;
color: #333;
outline: none;
}
#top-controls .control select:focus {
border-bottom-color: #183D4E;
}
#top-controls .control .select::after {
class: "material-icons";
content: "arrow_drop_down";
color: #999;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 18px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
position: absolute;
right: 0;
top: 6px;
pointer-events: none;
}
/* Hover card */
#hovercard {
display: none;
position: absolute;
padding: 5px;
border: 1px solid #aaa;
z-index: 1000;
background: #fff;
cursor: default;
border-radius: 5px;
left: 240px;
width: 150px;
top: -20px;
}
#hovercard input {
width: 60px;
}
/* Main Part*/
#main-part {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-top: 30px;
margin-bottom: 50px;
padding-top: 2px;
position: relative;
}
@media (min-height: 700px) {
#main-part {
margin-top: 50px;
}
}
#main-part h4 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
position: relative;
padding-bottom: 8px;
margin: 0;
line-height: 1.4em;
}
#main-part p,
#main-part .column .label,
#main-part .column label {
font-weight: 300;
line-height: 1.38em;
margin: 0;
color: #777;
font-size: 13px;
}
.more {
position: absolute;
left: 50%;
}
.more button {
position: absolute;
left: -28px;
top: -28px;
background: white;
}
.more button:hover,
.more button:active,
.more button:focus,
.more button:focus:not(:active) {
background: white;
}
svg text {
dominant-baseline: middle;
}
canvas {
display: block;
}
.link {
fill: none;
stroke: #aaa;
stroke-width: 1;
}
g.column rect {
stroke: none;
}
#heatmap {
position: relative;
float: left;
margin-top: 10px;
}
#heatmap .tick line {
stroke: #ddd;
}
#heatmap .tick text {
fill: #bbb;
dominant-baseline: auto;
}
#heatmap .tick:nth-child(7) text {
fill: #333;
}
#heatmap .tick:nth-child(7) line {
stroke: #999;
}
/* Data column */
.vcenter {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
}
.data.column {
width: 10%;
}
.data.column .dataset-list {
margin: 20px 0 10px;
overflow: hidden;
}
.data.column .dataset {
position: relative;
float: left;
width: 34px;
height: 34px;
margin: 0 14px 14px 0;
}
.data.column .dataset:nth-of-type(2n) {
margin-right: 0;
}
.data.column .data-thumbnail {
cursor: pointer;
width: 100%;
height: 100%;
opacity: 0.2;
border: 2px solid rgba(0,0,0,0.1);
border-radius: 3px;
}
/*.data.column .dataset:first-of-type {
margin-top: 8px;
}
.data.column .dataset:last-of-type {
margin-bottom: 20px;
}*/
.data.column .data-thumbnail:hover {
border: 2px solid #999;
}
.data.column .data-thumbnail.selected {
border: 2px solid black;
opacity: 1;
box-shadow: 0 1px 5px rgba(0,0,0,0.2);
background-color: white;
}
#main-part .data.column .dataset .label {
position: absolute;
left: 48px;
top: calc(50% - 9px);
display: none;
}
#main-part .data.column p.slider {
margin: 0 -25px 20px;
}
#main-part .basic-button {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
margin-top: 25px;
height: 34px;
margin-right: 0;
width: 100%;
display: block;
color: rgba(0, 0, 0, 0.5);
border: none;
background: rgba(158,158,158,.1);
border-radius: 3px;
padding: 5px;
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
outline: none;
transition: background 0.3s linear;
cursor: pointer;
}
#main-part .basic-button:hover {
background: rgba(158,158,158,.3);
color: rgba(0, 0, 0, 0.6);
}
#main-part .basic-button:focus {
background: rgba(158,158,158,.4);
color: rgba(0, 0, 0, 0.7);
}
#main-part .basic-button:active {
background: rgba(158,158,158,.5);
color: rgba(0, 0, 0, 0.8);
}
/* Features column */
.features.column {
width: 10%;
position: relative;
}
.features.column .plus-minus-neurons {
position: absolute;
text-align: center;
line-height: 28px;
top: -58px;
width: 65px;
height: 44px;
font-size: 12px;
z-index: 100;
}
.plus-minus-neurons .mdl-button:first-of-type {
margin-right: 5px;
}
.features.column .callout {
position: absolute;
width: 95px;
font-style: italic;
}
.features.column .callout svg {
position: absolute;
left: -15px;
width: 30px;
height: 30px;
}
.features.column .callout svg path {
fill: none;
stroke: black;
stroke-opacity: 0.4;
}
.features.column .callout svg defs path {
fill: black;
stroke: none;
fill-opacity: 0.4;
}
#main-part .features.column .callout .label {
position: absolute;
top: 24px;
left: 3px;
font-size: 11px;
}
/* Network (inside features column) */
#network {
position: absolute;
top: 110px;
left: 0;
z-index: 100;
}
#network svg .main-label {
font-size: 13px;
fill: #333;
font-weight: 300;
}
.axis line {
fill: none;
stroke: #777;
shape-rendering: crispEdges;
}
.axis text {
fill: #777;
font-size: 10px;
}
.axis path {
display: none;
}
#network svg .active .main-label {
fill: #333
}
#network svg #markerArrow {
fill: black;
stroke: black;
stroke-opacity: 0.2;
}
#network .node {
cursor: default;
}
#network .node rect {
fill: white;
stroke-width: 0;
}
#network .node.inactive {
opacity: 0.5;
}
#network .node.hovered {
opacity: 1.0;
}
@-webkit-keyframes flowing {
from { stroke-dashoffset: 0; } to { stroke-dashoffset: -10; }
}
#network .core .link {
stroke-dasharray: 9 1;
stroke-dashoffset: 1;
/*-webkit-animation: 0.5s linear 0s infinite flowing;*/
}
/** Invisible thick links used for showing weight values on mouse hover. */
#network .core .link-hover {
stroke-width: 8;
stroke: black;
fill: none;
opacity: 0;
}
#network .canvas canvas {
position: absolute;
top: -2px;
left: -2px;
border: 2px solid black;
border-radius: 3px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#network .canvas.inactive canvas {
box-shadow: inherit;
}
#network .canvas.inactive canvas {
opacity: 0.4;
border: 0;
top: 0;
left: 0;
}
#network .canvas.hovered canvas {
opacity: 1.0;
border: 2px solid #666;
top: -2px;
left: -2px;
}
/* Hidden layers column */
.hidden-layers.column {
width: 40%;
}
#main-part .hidden-layers h4 {
-webkit-justify-content: center;
justify-content: center;
margin-top: -5px;
}
.hidden-layers #layers-label {
width: 125px;
display: inline-block;
}
.hidden-layers #num-layers {
margin: 0 10px;
width: 10px;
display: inline-block;
}
.hidden-layers h4 .mdl-button {
margin-right: 5px;
}
.bracket {
margin-top: 5px;
border: solid 1px rgba(0, 0, 0, 0.2);
border-bottom: 0;
height: 4px;
}
.bracket.reverse {
border-bottom: solid 1px rgba(0, 0, 0, 0.2);
border-top: 0;
margin-top: 0;
margin-bottom: 5px;
}
/* Output column */
.output.column {
width: 275px;
}
.metrics {
position: relative;
font-weight: 300;
font-size: 13px;
height: 60px;
}
#linechart {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 55px;
}
.metrics .train {
color: #777;
}
#loss-test {
color: black;
}
.output .output-stats .value {
color: rgba(0, 0, 0, 0.6);
/*font-size: 20px;*/
font-weight: 300;
display: inline;
}
g.train circle {
stroke: white;
stroke-width: 1;
stroke-opacity: 0.8;
fill-opacity: 0.9;
}
g.test circle {
stroke-width: 1;
stroke: black;
stroke-opacity: 0.6;
fill-opacity: 0.9;
}
#main-part .output .mdl-checkbox__label.label {
line-height: 1.7em;
}
/* Article */
article {
background: white;
padding: 80px 0;
box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
/*border-top: 1px solid rgba(0, 0, 0, 0.08);*/
}
article h2, article h3 {
margin: 60px 0 20px 0;
font-size: 22px;
font-weight: 500;
line-height: 1.45em;
color: rgba(0, 0, 0, 0.7);
}
article h3 {
margin: 40px 0 20px 0;
font-size: 18px;
}
article :first-child h2 {
margin-top: 0;
}
article p {
font-weight: 400;
font-size: 17px;
line-height: 1.6;
color: rgba(0, 0, 0, 0.7);
}
/* Footer */
footer {
border-top: solid 1px #eee;
color: #ccc;
font-weight: 300;
padding: 40px 0;
height: 30px;
}
footer svg {
margin-top: 2px;
float: left;
width: 110px;
height: 18px;
fill: #aaa;
}
footer .links {
float: right;
font-size: 13px;
height: 30px;
line-height: 30px;
margin-left: 20px;
}
footer .links a {
margin-right: 15px;
text-decoration: none;
color: #999;
}
footer .links a:hover {
text-decoration: underline;
}
.hide-controls {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.hide-controls label.mdl-checkbox {
width: 145px;
height: 30px;
}
.hide-controls .mdl-checkbox__label {
font-size: 13px;
}
/* Material Overrides */
/* Buttons */
.mdl-button--fab.mdl-button--colored,
.mdl-button--fab.mdl-button--colored:hover,
.mdl-button--fab.mdl-button--colored:active,
.mdl-button--fab.mdl-button--colored:focus,
.mdl-button--fab.mdl-button--colored:focus:not(:active) {
background: #183D4E;
}
/* Checkbox */
.mdl-checkbox__box-outline {
border-color: rgba(0, 0, 0, 0.5);
}
.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
background-color: #183D4E;
}
.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
background-color: #183D4E;
}
.mdl-checkbox.is-checked .mdl-checkbox__box-outline {
border-color: #183D4E;
}
.mdl-checkbox__ripple-container .mdl-ripple {
background-color: #183D4E;
}
/* Slider */
#main-part .mdl-slider.is-upgraded {
color: #183D4E;
}
#main-part .mdl-slider__background-lower {
background-color: #183D4E;
}
#main-part .mdl-slider.is-upgraded::-webkit-slider-thumb {
background-color: #183D4E;
}
#main-part .mdl-slider.is-upgraded::-moz-range-thumb {
background-color: #183D4E;
}
#main-part .mdl-slider.is-upgraded::-ms-thumb {
background-color: #183D4E;
}
#main-part .mdl-slider.is-upgraded.is-lowest-value::-webkit-slider-thumb {
border-color: #183D4E;
}
#main-part .mdl-slider.is-upgraded.is-lowest-value::-moz-range-thumb {
border-color: #183D4E;
}
/* Keep grey focus circle for non-start values */
#main-part .mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb {
box-shadow: 0 0 0 10px rgba(0,0,0, 0.12);
}
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
"module": "commonjs",
"removeComments": true,
"preserveConstEnums": true
},
"exclude": [
"node_modules"
]
}
================================================
FILE: tslint.json
================================================
{
"rules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"max-line-length": [true, 80],
"indent": [
true,
"spaces"
],
"no-duplicate-variable": true,
"no-eval": true,
"no-internal-module": true,
"no-trailing-whitespace": true,
"no-var-keyword": true,
"no-unused-variable": true,
"no-unused-expression": true,
"no-switch-case-fall-through": true,
"no-unreachable": true,
"one-line": [
true,
"check-open-brace",
"check-whitespace"
],
"forin": false,
"quotemark": [
true,
"double"
],
"semicolon": [
true,
"always"
],
"triple-equals": false,
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": [
true,
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}
gitextract_26n3631d/ ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── analytics.js ├── index.html ├── package.json ├── src/ │ ├── dataset.ts │ ├── heatmap.ts │ ├── linechart.ts │ ├── nn.ts │ ├── playground.ts │ ├── seedrandom.d.ts │ └── state.ts ├── styles.css ├── tsconfig.json └── tslint.json
SYMBOL INDEX (97 symbols across 7 files)
FILE: src/dataset.ts
type Example2D (line 21) | type Example2D = {
type Point (line 27) | type Point = {
function shuffle (line 36) | function shuffle(array: any[]): void {
type DataGenerator (line 53) | type DataGenerator = (numSamples: number, noise: number) => Example2D[];
function classifyTwoGaussData (line 55) | function classifyTwoGaussData(numSamples: number, noise: number):
function regressPlane (line 75) | function regressPlane(numSamples: number, noise: number):
function regressGaussian (line 95) | function regressGaussian(numSamples: number, noise: number):
function classifySpiralData (line 136) | function classifySpiralData(numSamples: number, noise: number):
function classifyCircleData (line 156) | function classifyCircleData(numSamples: number, noise: number):
function classifyXORData (line 190) | function classifyXORData(numSamples: number, noise: number):
function randUniform (line 213) | function randUniform(a: number, b: number) {
function normalRandom (line 224) | function normalRandom(mean = 0, variance = 1): number {
function dist (line 237) | function dist(a: Point, b: Point): number {
FILE: src/heatmap.ts
type HeatMapSettings (line 19) | interface HeatMapSettings {
constant NUM_SHADES (line 26) | const NUM_SHADES = 30;
class HeatMap (line 33) | class HeatMap {
method constructor (line 45) | constructor(
method updateTestPoints (line 138) | updateTestPoints(points: Example2D[]): void {
method updatePoints (line 145) | updatePoints(points: Example2D[]): void {
method updateBackground (line 152) | updateBackground(data: number[][], discretize: boolean): void {
method updateCircles (line 182) | private updateCircles(container, points: Example2D[]) {
function reduceMatrix (line 210) | function reduceMatrix(matrix: number[][], factor: number): number[][] {
FILE: src/linechart.ts
type DataPoint (line 18) | type DataPoint = {
class AppendingLineChart (line 27) | class AppendingLineChart {
method constructor (line 39) | constructor(container, lineColors: string[]) {
method reset (line 75) | reset() {
method addDataPoint (line 82) | addDataPoint(dataPoint: number[]) {
method redraw (line 95) | private redraw() {
FILE: src/nn.ts
class Node (line 21) | class Node {
method constructor (line 51) | constructor(id: string, activation: ActivationFunction, initZero?: boo...
method updateOutput (line 60) | updateOutput(): number {
type ErrorFunction (line 75) | interface ErrorFunction {
type ActivationFunction (line 81) | interface ActivationFunction {
type RegularizationFunction (line 87) | interface RegularizationFunction {
class Errors (line 93) | class Errors {
class Activations (line 114) | class Activations {
class RegularizationFunction (line 140) | class RegularizationFunction {
class Link (line 157) | class Link {
method constructor (line 179) | constructor(source: Node, dest: Node,
function buildNetwork (line 204) | function buildNetwork(
function forwardProp (line 253) | function forwardProp(network: Node[][], inputs: number[]): number {
function backProp (line 282) | function backProp(network: Node[][], target: number,
function updateWeights (line 335) | function updateWeights(network: Node[][], learningRate: number,
function forEachNode (line 379) | function forEachNode(network: Node[][], ignoreInputs: boolean,
function getOutputNode (line 393) | function getOutputNode(network: Node[][]) {
FILE: src/playground.ts
function scrollTween (line 42) | function scrollTween(offset) {
constant RECT_SIZE (line 50) | const RECT_SIZE = 30;
constant BIAS_SIZE (line 51) | const BIAS_SIZE = 5;
constant NUM_SAMPLES_CLASSIFY (line 52) | const NUM_SAMPLES_CLASSIFY = 500;
constant NUM_SAMPLES_REGRESS (line 53) | const NUM_SAMPLES_REGRESS = 1200;
constant DENSITY (line 54) | const DENSITY = 100;
type HoverType (line 56) | enum HoverType {
type InputFeature (line 60) | interface InputFeature {
constant INPUTS (line 65) | let INPUTS: {[name: string]: InputFeature} = {
constant HIDABLE_CONTROLS (line 75) | let HIDABLE_CONTROLS = [
class Player (line 93) | class Player {
method playOrPause (line 99) | playOrPause() {
method onPlayPause (line 112) | onPlayPause(callback: (isPlaying: boolean) => void) {
method play (line 116) | play() {
method pause (line 125) | pause() {
method start (line 133) | private start(localTimerIndex: number) {
function makeGUI (line 178) | function makeGUI() {
function updateBiasesUI (line 397) | function updateBiasesUI(network: nn.Node[][]) {
function updateWeightsUI (line 403) | function updateWeightsUI(network: nn.Node[][], container) {
function drawNode (line 423) | function drawNode(cx: number, cy: number, nodeId: string, isInput: boolean,
function drawNetwork (line 538) | function drawNetwork(network: nn.Node[][]): void {
function getRelativeHeight (line 657) | function getRelativeHeight(selection) {
function addPlusMinusControl (line 662) | function addPlusMinusControl(x: number, layerIdx: number) {
function updateHoverCard (line 705) | function updateHoverCard(type: HoverType, nodeOrLink?: nn.Node | nn.Link,
function drawLink (line 752) | function drawLink(
function updateDecisionBoundary (line 796) | function updateDecisionBoundary(network: nn.Node[][], firstTime: boolean) {
function getLoss (line 840) | function getLoss(network: nn.Node[][], dataPoints: Example2D[]): number {
function updateUI (line 851) | function updateUI(firstStep = false) {
function constructInputIds (line 889) | function constructInputIds(): string[] {
function constructInput (line 899) | function constructInput(x: number, y: number): number[] {
function oneStep (line 909) | function oneStep(): void {
function getOutputWeights (line 925) | function getOutputWeights(network: nn.Node[][]): number[] {
function reset (line 940) | function reset(onStartup=false) {
function initTutorial (line 966) | function initTutorial() {
function drawDatasetThumbnails (line 993) | function drawDatasetThumbnails() {
function hideControls (line 1027) | function hideControls() {
function generateData (line 1067) | function generateData(firstTime = false) {
function userHasInteracted (line 1093) | function userHasInteracted() {
function simulationStarted (line 1106) | function simulationStarted() {
FILE: src/seedrandom.d.ts
type Math (line 16) | interface Math {
FILE: src/state.ts
constant HIDE_STATE_SUFFIX (line 20) | const HIDE_STATE_SUFFIX = "_hide";
function getKeyFromValue (line 51) | function getKeyFromValue(obj: any, value: any): string {
function endsWith (line 60) | function endsWith(s: string, suffix: string): boolean {
function getHideProps (line 64) | function getHideProps(obj: any): string[] {
type Type (line 78) | enum Type {
type Problem (line 87) | enum Problem {
type Property (line 97) | interface Property {
class State (line 104) | class State {
method deserializeState (line 170) | static deserializeState(): State {
method serialize (line 244) | serialize() {
method getHiddenProps (line 269) | getHiddenProps(): string[] {
method setHideProperty (line 279) | setHideProperty(name: string, hidden: boolean) {
Condensed preview — 17 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (135K chars).
[
{
"path": ".gitignore",
"chars": 34,
"preview": "node_modules/\ndist/\n*.log\n.vscode\n"
},
{
"path": "CONTRIBUTING.md",
"chars": 1450,
"preview": "Want to contribute? Great! First, read this page (including the small print at the end).\n\n### Before you contribute\nBefo"
},
{
"path": "LICENSE",
"chars": 11358,
"preview": "\n Apache License\n Version 2.0, January 2004\n "
},
{
"path": "README.md",
"chars": 888,
"preview": "# Deep playground\n\nDeep playground is an interactive visualization of neural networks, written in\nTypeScript using d3.js"
},
{
"path": "analytics.js",
"chars": 408,
"preview": "(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n(i[r].q=i[r].q||[]).push(arguments)},i[r].l"
},
{
"path": "index.html",
"chars": 20473,
"preview": "<!doctype html>\n<!-- Copyright 2016 Google Inc. All Rights Reserved.\n\nLicensed under the Apache License, Version 2.0 (th"
},
{
"path": "package.json",
"chars": 1549,
"preview": "{\n \"name\": \"deep-playground-prototype\",\n \"version\": \"2016.3.10\",\n \"description\": \"\",\n \"private\": true,\n \"scripts\": "
},
{
"path": "src/dataset.ts",
"chars": 7077,
"preview": "/* Copyright 2016 Google Inc. All Rights Reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou "
},
{
"path": "src/heatmap.ts",
"chars": 7269,
"preview": "/* Copyright 2016 Google Inc. All Rights Reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou "
},
{
"path": "src/linechart.ts",
"chars": 3242,
"preview": "/* Copyright 2016 Google Inc. All Rights Reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou "
},
{
"path": "src/nn.ts",
"chars": 13048,
"preview": "/* Copyright 2016 Google Inc. All Rights Reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou "
},
{
"path": "src/playground.ts",
"chars": 33988,
"preview": "/* Copyright 2016 Google Inc. All Rights Reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou "
},
{
"path": "src/seedrandom.d.ts",
"chars": 736,
"preview": "/* Copyright 2016 Google Inc. All Rights Reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou "
},
{
"path": "src/state.ts",
"chars": 8339,
"preview": "/* Copyright 2016 Google Inc. All Rights Reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou "
},
{
"path": "styles.css",
"chars": 16265,
"preview": "/* Copyright 2016 Google Inc. All Rights Reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou "
},
{
"path": "tsconfig.json",
"chars": 156,
"preview": "{\n \"compilerOptions\": {\n \"module\": \"commonjs\",\n \"removeComments\": true,\n \"preserveConstEnums\": true\n },\n \"ex"
},
{
"path": "tslint.json",
"chars": 1480,
"preview": "{\n \"rules\": {\n \"class-name\": true,\n \"comment-format\": [\n true,\n \"check-space\"\n "
}
]
About this extraction
This page contains the full source code of the tensorflow/playground GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 17 files (124.8 KB), approximately 35.7k tokens, and a symbol index with 97 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.