sqrt vector length scale for LeNet (#64)

Author: erfanasgari21

LeNet.html

@@ -122,6 +122,18 @@ <h4>Style:</h4>
                                 <input type="checkbox" id="showLabels" name="showLabels" value="showLabels" checked>
                                 <label for="showLabels">Show Layer Labels</label>
                             </div>
+                            
+                            <hr>
+                            <div></div>
+                                <input type="checkbox" id="sqrtLength" name="sqrtLength" value="sqrtLength">
+                                <label for="sqrtLength">Sqrt Vector Length Scaling</label>
+                            </div>
+                            <div>
+                                <label for="lengthScale">Length Size Scaling</label>
+                                <input type="range" id="lengthScale" name="" min="1" max="200" step="1" value="100" style="position: relative; top: 3px;">
+                                <span id="lengthSpan">100</span>
+                                <span>%</span>
+                            </div>
 
                             <hr>
                             <h4>Architecture:</h4>
@@ -204,7 +216,7 @@ <h4>Architecture:</h4>
                                 </div>
 
                             </div>
-
+                            
                             <hr>
                             <div id="architecture2">
                                 <p>Vector Length</p>
@@ -264,8 +276,12 @@ <h4>Architecture:</h4>
     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 @@ <h4>Architecture:</h4>
     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');

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);