diff --git a/LeNet.html b/LeNet.html index 283b6f0..080894b 100644 --- a/LeNet.html +++ b/LeNet.html @@ -122,6 +122,18 @@

Style:

+ +
+
+ + + +
+ + + 100 + % +

Architecture:

@@ -204,7 +216,7 @@

Architecture:

- +

Vector Length

@@ -264,8 +276,12 @@

Architecture:

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)); + + sqrtLength = $('#sqrtLength').prop('checked'); + lengthScale = parseFloat($('#lengthScale').prop('value')); + - lenet.redraw({'architecture_':architecture, 'architecture2_':architecture2}); + lenet.redraw({'architecture_':architecture, 'architecture2_':architecture2, 'sqrtLength_': sqrtLength, 'lengthScale_': lengthScale}); lenet.redistribute({'betweenLayers_':betweenLayers}); } @@ -363,6 +379,18 @@

Architecture:

restart(); }); +$(document).on('change', '#sqrtLength', function(e) { + e.preventDefault(); + + restart(); +}); + +$(document).on('change', '#lengthScale', function(e) { + e.preventDefault(); + $("#lengthSpan").text(e.target.value) + restart(); +}); + d3.select("#download").on("click", function() { // ga('send', 'event', 'downloadSVG', 'LeNet'); diff --git a/LeNet.js b/LeNet.js index ef4f4d3..66ae49d 100644 --- a/LeNet.js +++ b/LeNet.js @@ -22,11 +22,17 @@ function LeNet() { var betweenLayersDefault = 12; var architecture = []; + var architecture2 = []; var lenet = {}; var layer_offsets = []; var largest_layer_width = 0; var showLabels = true; + var sqrtLength = false; + var lengthScale = 100; + + let lengthFn = (length) => sqrtLength ? (Math.sqrt(length) * lengthScale/10) : (length * lengthScale/100); + let textFn = (layer) => (typeof(layer) === "object" ? layer['numberOfSquares']+'@'+layer['squareHeight']+'x'+layer['squareWidth'] : "1x"+layer) var rect, conv, link, poly, line, text, info; @@ -36,10 +42,14 @@ function LeNet() { ///////////////////////////////////////////////////////////////////////////// function redraw({architecture_=architecture, - architecture2_=architecture2}={}) { + architecture2_=architecture2, + sqrtLength_=sqrtLength, + lengthScale_=lengthScale,}={}) { architecture = architecture_; architecture2 = architecture2_; + sqrtLength = sqrtLength_; + lengthScale = lengthScale_; lenet.rects = architecture.map((layer, layer_index) => range(layer['numberOfSquares']).map(rect_index => {return {'id':layer_index+'_'+rect_index,'layer':layer_index,'rect_index':rect_index,'width':layer['squareWidth'],'height':layer['squareHeight']}})); lenet.rects = flatten(lenet.rects); @@ -50,7 +60,7 @@ function LeNet() { lenet.conv_links = lenet.convs.map(conv => {return [Object.assign({'id':'link_'+conv['layer']+'_0','i':0},conv), Object.assign({'id':'link_'+conv['layer']+'_1','i':1},conv)]}); lenet.conv_links = flatten(lenet.conv_links); - lenet.fc_layers = architecture2.map((size, fc_layer_index) => {return {'id': 'fc_'+fc_layer_index, 'layer':fc_layer_index+architecture.length, 'size':size/Math.sqrt(2)}}); + lenet.fc_layers = architecture2.map((size, fc_layer_index) => {return {'id': 'fc_'+fc_layer_index, 'layer':fc_layer_index+architecture.length, 'size': lengthFn(size)}}); lenet.fc_links = lenet.fc_layers.map(fc => { return [Object.assign({'id':'link_'+fc['layer']+'_0','i':0,'prevSize':10},fc), Object.assign({'id':'link_'+fc['layer']+'_1','i':1,'prevSize':10},fc)]}); lenet.fc_links = flatten(lenet.fc_links);