wehub-resource-sync
146 lines
6.0 KiB
HTML
146 lines
6.0 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 CIFAR-10 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="cifar10/cifar10_labels.js"></script>
|
|
<script type="text/javascript">
|
|
// ------------------------
|
|
// BEGIN CIFAR-10 SPECIFIC STUFF
|
|
// ------------------------
|
|
var classes_txt = ['airplane', 'car', 'bird', 'cat', 'deer', 'dog', 'frog', 'horse', 'ship', 'truck'];
|
|
var dataset_name = "cifar10";
|
|
var num_batches = 51; // 20 training batches, 1 test
|
|
var test_batch = 50;
|
|
var num_samples_per_batch = 1000;
|
|
var image_dimension = 32;
|
|
var image_channels = 3;
|
|
var use_validation_data = true;
|
|
var random_flip = true;
|
|
var random_position = true;
|
|
|
|
var layer_defs, net, trainer;
|
|
var t = "layer_defs = [];\n\
|
|
layer_defs.push({type:'input', out_sx:32, out_sy:32, out_depth:3});\n\
|
|
layer_defs.push({type:'conv', sx:5, filters:16, 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:20, 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:20, stride:1, pad:2, activation:'relu'});\n\
|
|
layer_defs.push({type:'pool', sx:2, stride:2});\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:4, l2_decay:0.0001});\n\
|
|
";
|
|
// ------------------------
|
|
// END CIFAR-10 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> CIFAR-10 demo</h2>
|
|
<h1>Description</h1>
|
|
<p>
|
|
This demo trains a Convolutional Neural Network on the <a href="http://www.cs.toronto.edu/~kriz/cifar.html">CIFAR-10 dataset</a> in your browser, with nothing but Javascript. The state of the art on this dataset is about 90% accuracy and human performance is at about 94% (not perfect as the dataset can be a bit ambiguous). I used <a href="cifar10_parse.zip">this python script</a> to parse the <a href="http://www.cs.toronto.edu/~kriz/cifar.html">original files</a> (python version) into batches of images that can be easily loaded into page DOM with img tags.
|
|
</p>
|
|
<p>This dataset is more difficult and it takes longer to train a network. Data augmentation includes random flipping and random image shifts by up to 2px horizontally and verically.</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();"/>
|
|
<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>
|
|
<br>
|
|
|
|
<input id="buttonpre" type="submit" value="load a pretrained network (achieves ~80% accuracy)" onclick="load_pretrained();" style="height: 30px; width: 400px;"/><br />
|
|
</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>
|
|
|
|
|
|
|