wehub-resource-sync
143 lines
5.8 KiB
HTML
143 lines
5.8 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">
|
|
|
|
<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="js/image-helpers.js"></script>
|
|
<script src="js/pica.js"></script>
|
|
|
|
<script src="mnist/mnist_labels.js"></script>
|
|
<script type="text/javascript">
|
|
// ------------------------
|
|
// BEGIN MNIST SPECIFIC STUFF
|
|
// ------------------------
|
|
classes_txt = ['0','1','2','3','4','5','6','7','8','9'];
|
|
var dataset_name = "mnist";
|
|
var num_batches = 21; // 20 training batches, 1 test
|
|
var test_batch = 20;
|
|
var num_samples_per_batch = 3000;
|
|
var image_dimension = 28;
|
|
var image_channels = 1;
|
|
var use_validation_data = true;
|
|
var random_flip = false;
|
|
var random_position = false;
|
|
|
|
var layer_defs, net, trainer;
|
|
var t = "layer_defs = [];\n\
|
|
layer_defs.push({type:'input', out_sx:24, out_sy:24, out_depth:1});\n\
|
|
layer_defs.push({type:'conv', sx:5, filters:8, stride:1, pad:2, activation:'relu'});\n\
|
|
layer_defs.push({type:'pool', sx:2, stride:2});\n\
|
|
layer_defs.push({type:'conv', sx:5, filters:16, stride:1, pad:2, activation:'relu'});\n\
|
|
layer_defs.push({type:'pool', sx:3, stride:3});\n\
|
|
layer_defs.push({type:'softmax', num_classes:10});\n\
|
|
\n\
|
|
net = new convnetjs.Net();\n\
|
|
net.makeLayers(layer_defs);\n\
|
|
\n\
|
|
trainer = new convnetjs.SGDTrainer(net, {method:'adadelta', batch_size:20, l2_decay:0.001});\n\
|
|
";
|
|
// ------------------------
|
|
// END MNIST SPECIFIC STUFF
|
|
// ------------------------
|
|
</script>
|
|
<script src="js/images-demo.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="wrap">
|
|
<h2 style="text-align: center;"><a href="http://cs.stanford.edu/people/karpathy/convnetjs/">ConvNetJS</a> MNIST demo</h2>
|
|
<h1>Description</h1>
|
|
<p>
|
|
This demo trains a Convolutional Neural Network on the <a href="http://yann.lecun.com/exdb/mnist/">MNIST digits dataset</a> in your browser, with nothing but Javascript. The dataset is fairly easy and one should expect to get somewhere around 99% accuracy within few minutes. I used <a href="mnist_parse.zip">this python script</a> to parse the <a href="http://deeplearning.net/tutorial/gettingstarted.html">original files</a> into batches of images that can be easily loaded into page DOM with img tags.
|
|
</p>
|
|
<p>
|
|
This network takes a 28x28 MNIST image and crops a random 24x24 window before training on it (this technique is called data augmentation and improves generalization). Similarly to do prediction, 4 random crops are sampled and the probabilities across all crops are averaged to produce final predictions. The network runs at about 5ms for both forward and backward pass on my reasonably decent Ubuntu+Chrome machine.
|
|
</p>
|
|
<p>
|
|
By default, in this demo we're using Adadelta which is one of per-parameter adaptive step size methods, so we don't have to worry about changing learning rates or momentum over time. However, I still included the text fields for changing these if you'd like to play around with SGD+Momentum trainer.
|
|
</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">
|
|
<input id="buttontp" type="submit" value="pause" onclick="toggle_pause();" style="width: 100px; height:30px; background-color: #FCC;"/>
|
|
<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 />
|
|
|
|
Momentum: <input name="momi" type="text" maxlength="20" id="momentum_input"/>
|
|
<input id="buttonmom" type="submit" value="change" onclick="change_momentum();"/>
|
|
<br />
|
|
|
|
Batch size: <input name="bsi" type="text" maxlength="20" id="batch_size_input"/>
|
|
<input id="buttonbs" type="submit" value="change" onclick="change_batch_size();"/>
|
|
<br />
|
|
|
|
Weight decay: <input name="wdi" type="text" maxlength="20" id="decay_input"/>
|
|
<input id="buttonwd" type="submit" value="change" onclick="change_decay();"/>
|
|
</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 class="secpart">
|
|
<div id="upload_box">
|
|
Test an image from your computer:
|
|
<div id="img_div">
|
|
<img id="preview_img"/>
|
|
</div>
|
|
<input name="image" type="file" accept="image/*" onchange="loadFile(event)">
|
|
|
|
<input type="submit" value="Test Image" onclick="testImage(document.getElementById('preview_img'))">
|
|
</div>
|
|
</div>
|
|
<div style="clear:both;"></div>
|
|
</div>
|
|
|
|
<h1>Instantiate a Network and Trainer</h1>
|
|
<div>
|
|
<textarea id="newnet" style="width:100%; height:200px;"></textarea><br />
|
|
<input id="buttonnn" type="submit" value="change network" onclick="change_net();" style="width:200px;height:30px;"/>
|
|
</div>
|
|
|
|
<div class="divsec">
|
|
<h1>Network Visualization</h1>
|
|
<div id="visnet"></div>
|
|
</div>
|
|
|
|
<div class="divsec">
|
|
<h1>Example predictions on Test set</h1>
|
|
<div id="testset_acc"></div>
|
|
<div id="testset_vis"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|