|
<!doctype html> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
<a class="github-link" href="https://github.com/tensorflow/playground" title="Source on GitHub"> |
|
<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> |
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<div id="main-part" class="l--page"> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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;"> |
|
|
|
|
|
<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> |
|
|
|
|
|
<div class="more"> |
|
|
|
<button class="mdl-button mdl-js-button mdl-button--fab"> |
|
<i class="material-icons">keyboard_arrow_down</i> |
|
</button> |
|
</div> |
|
|
|
|
|
<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> |
|
<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> |
|
|
|
<script src="analytics.js"></script> |
|
</body> |
|
</html> |
|
|
