代码拉取完成，页面将自动刷新
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119008715-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-119008715-1');
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
* { font-weight: 100; }
h1 { font-weight: 100; }
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
}
.nn-picker {
width: 410px;
margin: 30px;
z-index: 1000;
}
[data-toggle="collapse"] .fa:before {
font-size: 2rem;
color: black;
content: "\f106";
position: relative;
top: 5px;
}
.fa {
transition: 0.3s transform ease-in-out;
}
.collapsed .fa {
transform: rotate(-180deg);
}
.tab-content {
padding: 20px;
}
input[type="range"] {
margin-left: 10px;
}
#count {
position: fixed;
bottom: 0;
right: 1rem;
opacity: 0.4;
font-weight: 100;
}
.text {
font-weight: 300;
}
</style>
<title>NN SVG</title>
</head>
<body>
<div id="graph-container"></div>
<div class="container-fluid">
<div class="row">
<div class="nn-picker">
<div class="card">
<div class="card-header">
<a class="pull-right" data-toggle="collapse" href="#collapsable" role="button"><i class="fa"></i></a>
<h1>NN-SVG</h1>
<p>Publication-ready NN-architecture schematics. <a id="download" href="#">Download SVG</a></p>
<nav>
<div class="nav nav-tabs card-header-tabs" role="tablist">
<a class="nav-item nav-link" href="index.html">FCNN style</a>
<a class="nav-item nav-link active">LeNet style</a>
<a class="nav-item nav-link" href="AlexNet.html">AlexNet style</a>
</div>
</nav>
</div>
<div class="tab-content collapse show" id="collapsable">
<div class="tab-pane fade show active" id="LeNet" role="tabpanel">
<h4>Style:</h4>
<div>
<input type="color" value="#e0e0e0" id="color1">
<label for="color1">Color 1</label>
</div>
<div>
<input type="color" value="#a0a0a0" id="color2">
<label for="color2">Color 2</label>
</div>
<div>
<label for="rectOpacity">Filter Opacity</label>
<input type="range" id="rectOpacity" name="" min="0.2" max="1" step="0.01" value="0.9" style="position: relative; top: 3px;">
</div>
<div>
<label for="borderWidth">Border Width</label>
<input type="range" id="borderWidth" name="" min="0.01" max="3" step="0.01" value="1" style="position: relative; top: 3px;">
</div>
<div>
<label for="betweenSquares">Spacing Between Filters</label>
<input type="range" id="betweenSquares" name="" min="1" max="40" step="1" value="10" style="position: relative; top: 3px;">
</div>
<div>
<input type="checkbox" id="showLabels" name="showLabels" value="showLabels" checked>
<label for="showLabels">Show Layer Labels</label>
</div>
<hr>
<h4>Architecture:</h4>
<div id="architecture">
<p>Depth | Height | Width | filter Height | filter Width</p>
<div class="row entry">
<div class="input-group mb-2 mr-sm-2 col-12">
<button class="btn btn-secondary btn-remove input-group-prepend"><span class="fa fa-minus"></span></button>
<input type="number" class="form-control" name="numberOfSquares" step="1" value="8" />
<input type="number" class="form-control" name="squareHeight" step="1" value="128" />
<input type="number" class="form-control" name="squareWidth" step="1" value="128" />
<input type="number" class="form-control" name="filterHeight" step="1" value="8" />
<input type="number" class="form-control" name="filterWidth" step="1" value="8" />
</div>
<div class="input-group mb-2 mr-sm-2 col-12">
<label for="Op" style="width: 36px;padding: 4px;">Op: </label>
<input type="text" class="form-control" name="Op" step="1" value="Max-Pool" />
<input type="range" class="form-control" name="spacing" min="-100" max="100" step="1" value="40" style="margin-left: 10px !important;">
</div>
</div>
<div class="row entry">
<div class="input-group mb-2 mr-sm-2 col-12">
<button class="btn btn-secondary btn-remove input-group-prepend"><span class="fa fa-minus"></span></button>
<input type="number" class="form-control" name="numberOfSquares" step="1" value="8" />
<input type="number" class="form-control" name="squareHeight" step="1" value="64" />
<input type="number" class="form-control" name="squareWidth" step="1" value="64" />
<input type="number" class="form-control" name="filterHeight" step="1" value="16" />
<input type="number" class="form-control" name="filterWidth" step="1" value="16" />
</div>
<div class="input-group mb-2 mr-sm-2 col-12">
<label for="Op" style="width: 36px;padding: 4px;">Op: </label>
<input type="text" class="form-control" name="Op" step="1" value="Convolution" />
<input type="range" class="form-control" name="spacing" min="-100" max="100" step="1" value="10" style="margin-left: 10px !important;">
</div>
</div>
<div class="row entry">
<div class="input-group mb-2 mr-sm-2 col-12">
<button class="btn btn-secondary btn-remove input-group-prepend"><span class="fa fa-minus"></span></button>
<input type="number" class="form-control" name="numberOfSquares" step="1" value="24" />
<input type="number" class="form-control" name="squareHeight" step="1" value="48" />
<input type="number" class="form-control" name="squareWidth" step="1" value="48" />
<input type="number" class="form-control" name="filterHeight" step="1" value="8" />
<input type="number" class="form-control" name="filterWidth" step="1" value="8" />
</div>
<div class="input-group mb-2 mr-sm-2 col-12">
<label for="Op" style="width: 36px;padding: 4px;">Op: </label>
<input type="text" class="form-control" name="Op" step="1" value="Max-Pool" />
<input type="range" class="form-control" name="spacing" min="-100" max="100" step="1" value="-20" style="margin-left: 10px !important;">
</div>
</div>
<div class="row entry">
<div class="input-group mb-2 mr-sm-2 col-12">
<button class="btn btn-secondary btn-remove input-group-prepend"><span class="fa fa-minus"></span></button>
<input type="number" class="form-control" name="numberOfSquares" step="1" value="24" />
<input type="number" class="form-control" name="squareHeight" step="1" value="16" />
<input type="number" class="form-control" name="squareWidth" step="1" value="16" />
<input type="number" class="form-control" name="filterHeight" step="1" value="8" />
<input type="number" class="form-control" name="filterWidth" step="1" value="8" />
</div>
<div class="input-group mb-2 mr-sm-2 col-12">
<label for="Op" style="width: 36px;padding: 4px;">Op: </label>
<input type="text" class="form-control" name="Op" step="1" value="Dense" />
<input type="range" class="form-control" name="spacing" min="-100" max="100" step="1" value="-20" style="margin-left: 10px !important;">
</div>
</div>
<div class="row entry">
<div class="input-group mb-2 mr-sm-2 col-12">
<button class="btn btn-primary btn-add input-group-prepend"><span class="fa fa-plus"></span></button>
<input type="number" class="form-control" name="numberOfSquares" step="1"/>
<input type="number" class="form-control" name="squareHeight" step="1"/>
<input type="number" class="form-control" name="squareWidth" step="1"/>
<input type="number" class="form-control" name="filterHeight" step="1"/>
<input type="number" class="form-control" name="filterWidth" step="1"/>
</div>
<div class="input-group mb-2 mr-sm-2 col-12">
<label for="Op" style="width: 36px;padding: 4px;">Op: </label>
<input type="text" class="form-control" name="Op" step="1" value="" />
<input type="range" class="form-control" name="spacing" min="-100" max="100" step="1" value="10" style="margin-left: 10px !important;">
</div>
</div>
</div>
<hr>
<div id="architecture2">
<p>Vector Length</p>
<div class="row entry">
<div class="input-group mb-2 mr-sm-2 col-5">
<button class="btn btn-secondary btn-remove input-group-prepend"><span class="fa fa-minus"></span></button>
<input type="number" class="form-control" name="vectorLength" step="1" value="256" />
</div>
</div>
<div class="row entry">
<div class="input-group mb-2 mr-sm-2 col-5">
<button class="btn btn-secondary btn-remove input-group-prepend"><span class="fa fa-minus"></span></button>
<input type="number" class="form-control" name="vectorLength" step="1" value="128" />
</div>
</div>
<div class="row entry">
<div class="input-group mb-2 mr-sm-2 col-5">
<button class="btn btn-primary btn-add input-group-prepend"><span class="fa fa-plus"></span></button>
<input type="number" class="form-control" name="vectorLength" step="1"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="count"><a style="font-size: 1rem" href="about.html">About</a></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript" src="https://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="LeNet.js"></script>
<script type="text/javascript">
lenet = LeNet();
function restart() {
architecture = $('#architecture').find('.entry').map((i,el) =>
_.object(['numberOfSquares','squareHeight','squareWidth','filterHeight','filterWidth', 'op', 'layer'],
$(el).find('input[type="number"]').map((j,input) => parseFloat($(input).val())).get().concat([$(el).find('input[type="text"]').val(), i]))
).get()
.filter(layer => Object.values(layer).every(val => !_.isNaN(val)));
betweenLayers = $('#architecture').find('input[type="range"]').map((i,el) => $(el).val()).get().filter(input => $.isNumeric(input)).map(s => parseInt(s)); betweenLayers.pop();
architecture2 = $('#architecture2').find('input').map((i,el) => $(el).val()).get().filter(input => $.isNumeric(input)).map(s => parseInt(s));
lenet.redraw({'architecture_':architecture, 'architecture2_':architecture2});
lenet.redistribute({'betweenLayers_':betweenLayers});
}
restart();
/////////////////////////////////////////////////////////////////////////////
/////// Select Styling ///////
/////////////////////////////////////////////////////////////////////////////
$("#color1").change( function () { lenet.style({'color1_': this.value}); });
$("#color2").change( function () { lenet.style({'color2_': this.value}); });
$("#borderWidth").change( function () { lenet.style({'borderWidth_': parseFloat(this.value)}); });
$("#rectOpacity").change( function () { lenet.style({'rectOpacity_': parseFloat(this.value)}); });
$("#betweenSquares").change( function () { lenet.redistribute({'betweenSquares_': parseFloat(this.value)}); });
$("#showLabels").change( function () { lenet.style({'showLabels_': this.checked}); });
$("input[name='spacing']").change(function() {
betweenLayers = $('#architecture').find('input[type="range"]').map((i,el) => $(el).val()).get().filter(input => $.isNumeric(input)).map(s => parseInt(s)); betweenLayers.pop();
lenet.redistribute({'betweenLayers_':betweenLayers});
});
/////////////////////////////////////////////////////////////////////////////
/////// Select Architecture ///////
/////////////////////////////////////////////////////////////////////////////
$(document).on('click', '#architecture .btn-add', function(e) {
e.preventDefault();
var controlForm = $('#architecture');
var currentEntry = $(this).parents('.entry:first');
var newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-primary').addClass('btn-secondary')
.html('<span class="fa fa-minus"></span>');
restart();
});
$(document).on('click', '#architecture .btn-remove', function(e) {
e.preventDefault();
$(this).parents('.entry:first').remove();
restart();
return false;
});
$(document).on('click', '#architecture2 .btn-add', function(e) {
e.preventDefault();
var controlForm = $('#architecture2');
var currentEntry = $(this).parents('.entry:first');
var newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-primary').addClass('btn-secondary')
.html('<span class="fa fa-minus"></span>');
restart();
});
$(document).on('click', '#architecture2 .btn-remove', function(e) {
e.preventDefault();
$(this).parents('.entry:first').remove();
restart();
return false;
});
$(document).on('change', 'input[type="number"]', function(e) {
e.preventDefault();
restart(); // TODO only fire if the whole row is filled.
});
$(document).on('change', 'input[type="text"]', function(e) {
e.preventDefault();
restart();
});
d3.select("#download").on("click", function() {
// ga('send', 'event', 'downloadSVG', 'LeNet');
d3.select(this)
.attr("href", 'data:application/octet-stream;base64,' + btoa(d3.select("#graph-container").html()))
.attr("download", "nn.svg")
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。