86 lines
3.2 KiB
HTML
86 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>ConvNetJS MNIST demo</title>
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
|
|
<script src="js/jquery-1.8.3.min.js"></script>
|
|
<script src="../build/vis.js"></script>
|
|
<script src="../build/util.js"></script>
|
|
<script src="../build/convnet.js"></script>
|
|
|
|
|
|
<script src="mnist/mnist_labels.js"></script>
|
|
<script src="js/autoencoder.js"></script>
|
|
|
|
<body>
|
|
<div id="wrap">
|
|
<h2 style="text-align: center;"><a href="http://cs.stanford.edu/people/karpathy/convnetjs/">ConvNetJS</a> Denoising Autoencoder demo</h2>
|
|
<h1>Description</h1>
|
|
<p>
|
|
All the other demos are examples of Supervised Learning, so in this demo I wanted to show an example of Unsupervised Learning. We are going to train an autoencoder on MNIST digits.
|
|
</p>
|
|
<p>
|
|
An autoencoder is a regression task where the network is asked to predict its input (in other words, model the identity function). Sounds simple enough, except the network has a tight bottleneck of a few neurons in the middle (in the default example only two!), forcing it to create effective representations that compress the input into a low-dimensional code that can be used by the decoder to reproduce the original input.
|
|
</p>
|
|
<p>Report questions/bugs/suggestions to <a href="https://twitter.com/karpathy">@karpathy</a>.
|
|
</p>
|
|
<h1>Training Stats</h1>
|
|
<div class="divsec" style="270px;">
|
|
<div class="secpart">
|
|
Current image: <img id="input_image" src=""></img><input id="buttontp" type="submit" value="pause" onclick="toggle_pause();"/>
|
|
<div id="trainstats"></div>
|
|
|
|
<div id="controls">
|
|
Learning rate: <input name="lri" type="text" maxlength="20" id="lr_input"/>
|
|
<input id="buttonlr" type="submit" value="change" onclick="change_lr();"/>
|
|
<br />
|
|
</div>
|
|
|
|
<input id="buttondj" type="submit" value="save network snapshot as JSON" onclick="dump_json();"/><br />
|
|
<input id="buttonlfj" type="submit" value="init network from JSON snapshot" onclick="load_from_json();"/><br />
|
|
<textarea id="dumpjson"></textarea>
|
|
</div>
|
|
<div class="secpart">
|
|
|
|
<div>
|
|
Loss:<br />
|
|
<canvas id="lossgraph">
|
|
</canvas>
|
|
<br />
|
|
<input id="buttoncg" type="submit" value="clear graph" onclick="clear_graph();"/>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
<textarea id="newnet" style="width:100%; height:100px;"></textarea><br />
|
|
<input id="buttonnn" type="submit" value="reload" onclick="change_net();" style="width:200px; height: 40px;"/>
|
|
</div>
|
|
|
|
<div style="margin-top: 1px solid #000; margin-top:20px;">
|
|
<div id="layer_ixes"></div>
|
|
<input id="buttoncycle" type="submit" value="cycle through visualized neurons at selected layer (if more than 2)" onclick="cycle();" style="height: 40px;"/>
|
|
<div id="cyclestatus"></div>
|
|
<div style="text-align:center;"><canvas id="embedding" width="500" height="500"></canvas></div>
|
|
</div>
|
|
|
|
<div style="clear:both;"></div>
|
|
</div>
|
|
|
|
<div class="divsec">
|
|
<h1>Network Visualization</h1>
|
|
<div id="visnet"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|