wehub-resource-sync
112 lines
3.5 KiB
HTML
112 lines
3.5 KiB
HTML
<html>
|
|
<head>
|
|
<title>ConvNetJS demo: Image Painting</title>
|
|
<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
|
<link rel="stylesheet" href="css/jquery-ui.min.css">
|
|
<script src="js/jquery-1.8.3.min.js"></script>
|
|
<script src="js/jquery-ui.min.js"></script>
|
|
|
|
<script src="../build/convnet.js"></script>
|
|
<script src="js/image_regression.js"></script>
|
|
|
|
<style type="text/css">
|
|
canvas {
|
|
border: 1px solid #555;
|
|
margin-top: 10px;
|
|
}
|
|
#wrap {
|
|
width: 800px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
margin-bottom: 200px;
|
|
}
|
|
#gallery img {
|
|
width: 195;
|
|
height: 195px;
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="wrap">
|
|
<h1><a href="http://cs.stanford.edu/people/karpathy/convnetjs/">ConvnetJS</a> demo: Image "Painting"</h1>
|
|
|
|
<p>This demo that treats the pixels of an image as a learning problem: it takes the (x,y) position on a grid and learns to predict the color at that point using regression to (r,g,b). It's a bit like compression, since the image information is encoded in the weights of the network, but almost certainly not of practical kind :)</p>
|
|
<p>
|
|
Note that the entire ConvNetJS definition is shown in textbox below and it gets eval()'d to create the network, so feel free to fiddle with the parameters and hit "reload". I found that, empirically and interestingly, deeper networks tend to work much better on this task given a fixed parameter budget.
|
|
</p>
|
|
|
|
<p>Report questions/bugs/suggestions to <a href="https://twitter.com/karpathy">@karpathy</a>.</p>
|
|
|
|
<textarea id="layerdef" style="width:100%; height:250px;"></textarea>
|
|
<br /><br />
|
|
<input id="buttontp" type="submit" value="reload network" onclick="reload();" style="width: 200px; height: 30px;"/>
|
|
|
|
<div style="float: right;">
|
|
Choose your own image:
|
|
<input id="f" type="file" />
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div style="background-color: #EEE; padding: 10px; margin-top: 10px;">
|
|
<div style="float: left; margin-left: 200px;">
|
|
Original Image<br>
|
|
<canvas id="canv_original"></canvas>
|
|
</div>
|
|
<div style="float: left; margin-left: 10px;">
|
|
Neural Network output<br>
|
|
<canvas id="canv_net"></canvas>
|
|
</div>
|
|
|
|
<div style="clear:both;"></div>
|
|
</div>
|
|
|
|
<br>
|
|
<div id="report"></div>
|
|
<br>
|
|
|
|
<div id="lr">Learning rate:</div>
|
|
<div id="slider"></div>
|
|
<div>The learning rate should probably be decreased over time (slide left) to let the network better overfit the training data. It's nice to not have to worry about overfitting.</div>
|
|
|
|
<br><br>
|
|
<div>
|
|
You can upload your own image above (click Choose File), or you can click on any of the images below to load them.
|
|
</div>
|
|
<div id="gallery">
|
|
<img src="imgs/cat.jpg" class="ci" />
|
|
<img src="imgs/esher.png" class="ci" />
|
|
<img src="imgs/pencils.png" class="ci" />
|
|
<img src="imgs/usa.png" class="ci" />
|
|
<img src="imgs/fractal.jpg" class="ci" />
|
|
<img src="imgs/dora.jpg" class="ci" />
|
|
<img src="imgs/rubiks.jpg" class="ci" />
|
|
<img src="imgs/earth.jpg" class="ci" />
|
|
<img src="imgs/fox.png" class="ci" />
|
|
<img src="imgs/twitter.png" class="ci" />
|
|
<img src="imgs/reddit.jpg" class="ci" />
|
|
<img src="imgs/chip.jpg" class="ci" />
|
|
<img src="imgs/jitendra.jpg" class="ci" />
|
|
<img src="imgs/tesla.jpg" class="ci" />
|
|
<img src="imgs/rainforest.jpg" class="ci" />
|
|
<img src="imgs/chess.png" class="ci" />
|
|
<img src="imgs/gradient.png" class="ci" />
|
|
<img src="imgs/battery.jpg" class="ci" />
|
|
<img src="imgs/starry.jpg" class="ci" />
|
|
</div>
|
|
|
|
<br><br>
|
|
<p>Go <a href="http://cs.stanford.edu/people/karpathy/convnetjs/">back to ConvNetJS</a></p>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|