upgrade

css/custom.css

@@ -1,4 +1,14 @@
 
+.hum {
+
+    stroke: #dbc81c !important;
+}
+
+.fufu {
+
+    stroke: #19c157 !important;
+}
+
 .traj path {
 
     stroke-width: 1.6px;
@@ -54,13 +64,13 @@ a {
     outline: none;
 }
 
-
-.cell{
+.cell {
     width: 13px;
     height: 17px;
     border: 0.5px solid #333333;
     display: inline-block;
 }
+
 .selected {
     border: solid #a92234 2px !important;
 }
@@ -89,7 +99,6 @@ a {
 }
 
 .input-range {
-    -webkit-appearance: none;
     height: 200px;
     border-radius: 5px;
     background: #ccc;
@@ -108,6 +117,10 @@ input::-moz-focus-inner {
     border: 0;
 }
 
+input[type=range]::-moz-focus-outer {
+    border: 0;
+}
+
 input[type="range"] {
     -webkit-appearance: none;
     -moz-apperance: none;
@@ -116,6 +129,7 @@ input[type="range"] {
     user-select: none;
     outline: none;
     width: 100%;
+    border: 0;
     background-image: -webkit-gradient(
             linear,
             left top,
@@ -129,6 +143,7 @@ input[type="range"] {
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* Internet Explorer/Edge */
     user-select: none;
+    user-focus: none;
     /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
 }
@@ -148,3 +163,20 @@ input[type='range']::-webkit-slider-thumb {
     user-select: none;
     cursor: pointer;
 }
+
+input[type='range']::-moz-range-thumb {
+    -webkit-appearance: none !important;
+    background-color: #183d4e;
+    border: 1px solid #183d4e;
+    height: 18px;
+    width: 18px;
+    opacity: 1;
+    border-radius: 50%;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none;
+    cursor: pointer;
+}

data/presk.json

@@ -0,0 +1 @@
+{"positions":[[-80.0,240.0],[-72.9032592773,239.5688323975],[-57.3142089844,239.8639831543],[-36.0520935059,241.3308563232],[-10.9104919434,243.009765625],[16.7949523926,245.409942627],[46.2259063721,245.9455871582],[76.7217407227,244.3581542969],[108.0255126953,241.9132995605],[139.2969055176,236.6040802002],[169.3508911133,227.00390625],[196.8508911133,212.5113372803],[220.4622955322,193.2011108398],[237.6701049805,176.6720123291],[248.8569335938,158.4353485107],[255.8835144043,142.4391479492],[256.9132537842,125.5984039307],[255.4078826904,111.2260437012],[248.2668914795,97.9460296631],[233.2746887207,85.3802032471],[212.4132843018,75.8755493164],[187.5229797363,70.1912384033],[159.9203033447,67.229598999],[130.488067627,66.1044769287],[99.8217926025,66.2180938721],[68.3231658936,67.1672363281],[36.2631072998,68.6799926758],[3.805480957,70.1282653809],[-28.8550720215,70.0579376221],[-61.4092254639,67.4044952393],[-93.8608398438,62.8655853271],[-126.1130523682,56.6274414062],[-157.6784210205,47.866607666],[-188.0347442627,36.0129547119],[-217.4991760254,21.9481811523],[-246.3620910645,6.3920135498],[-274.8192443848,-10.1701049805],[-303.0026550293,-27.410736084],[-331.2370147705,-44.7292480469],[-360.1767578125,-60.7775268555],[-390.3056030273,-73.6129760742],[-414.3552703857,-82.4570159912],[-430.5772247314,-88.4225311279],[-441.5193023682,-92.4464874268],[-448.9000091553,-95.1607818604],[-453.8785095215,-96.9916381836],[-458.8465118408,-91.3128662109],[-462.633102417,-76.6932067871],[-462.9929046631,-56.260635376],[-459.3376922607,-32.3628387451],[-452.8361816406,-6.1759490967],[-444.0069580078,21.3723297119],[-432.8779449463,49.484588623],[-420.1328582764,77.9433441162],[-406.2977294922,106.6358642578],[-391.7273712158,135.486038208],[-376.2784881592,164.2113952637],[-359.0377655029,191.9795227051],[-338.8814544678,217.3280181885],[-315.4042205811,238.7727813721],[-288.9250030518,255.0528411865],[-260.2976837158,265.2146606445],[-237.3414764404,271.2794189453],[-221.8572540283,275.3700561523],[-211.4130249023,278.1291809082],[-204.3683166504,279.9901275635],[-198.1344299316,274.3027496338],[-193.6930999756,259.6706542969],[-192.217956543,239.0654449463],[-192.8890228271,214.4472198486],[-195.446182251,187.2082519531],[-200.0660705566,158.3824462891],[-206.1481323242,128.5047302246]]}

data/presk1.json

@@ -0,0 +1 @@
+{"positions":[[-80.0,240.0],[-72.9032592773,239.5688323975],[-57.3142089844,239.8639831543],[-36.0520935059,241.3308563232],[-10.9104919434,243.009765625],[16.7949523926,245.409942627],[46.2259063721,245.9455871582],[76.7217407227,244.3581542969],[108.0255126953,241.9132995605],[139.2969055176,236.6040802002],[169.3508911133,227.00390625],[196.8508911133,212.5113372803],[220.4622955322,193.2011108398],[237.6701049805,176.6720123291],[249.2769317627,165.5227508545],[254.9782562256,151.230178833],[257.4223632812,138.1317596436],[254.0013580322,124.3294677734],[248.8273162842,112.6319732666],[245.3372955322,104.7417755127],[235.9658966064,98.2572174072],[218.9424438477,92.1103973389],[196.7014160156,86.6345825195],[170.8643798828,82.4187164307],[142.5970306396,79.1257171631],[112.6903991699,76.4552154541],[81.6781158447,74.2045898438],[49.9200439453,72.2371826172],[17.6589050293,70.4608154297],[-14.9415740967,68.8132781982],[-47.7347564697,66.8074188232],[-80.5669708252,63.7539978027],[-113.3247070312,59.4839782715],[-145.6086578369,52.9719543457],[-176.4688415527,42.747467041],[-205.3337860107,28.5904846191],[-232.7583770752,11.669128418],[-258.8950653076,-7.4323425293],[-284.0563964844,-28.0900421143],[-310.0200653076,-47.9972381592],[-337.7084655762,-65.0332336426],[-367.1336517334,-77.5530700684],[-390.710067749,-85.8433380127],[-406.6128540039,-91.4353790283],[-417.339630127,-95.2073974609],[-424.5751037598,-97.7517700195],[-429.4556121826,-99.4680633545],[-433.7151794434,-93.5928955078],[-436.0324554443,-78.846282959],[-435.2894439697,-58.3058929443],[-432.3382873535,-33.8841400146],[-427.8977355957,-6.8444366455],[-422.4526062012,21.9611206055],[-416.329864502,51.9577941895],[-409.7500457764,82.7579193115],[-402.4310302734,113.9819335938],[-393.2218933105,144.9787139893],[-380.6121520996,174.5804138184],[-363.7866973877,201.4241943359],[-342.6944122314,224.1786499023],[-317.8848114014,241.6671905518],[-290.3634185791,252.9733886719],[-261.4563903809,257.5057983398],[-238.5640563965,259.0142364502],[-223.1228790283,260.0316009521],[-209.3887329102,254.443862915],[-196.9572906494,240.3535003662],[-188.0045928955,220.0658721924],[-184.027923584,195.8048858643],[-185.3450317383,169.7340698242],[-189.448135376,141.8210296631],[-196.9080657959,113.2205505371]]}

data/presk2.json

@@ -0,0 +1 @@
+{"positions":[[-80.0,240.0],[-72.9032592773,239.5688323975],[-57.3142089844,239.8639831543],[-36.0520935059,241.3308563232],[-10.9104919434,243.009765625],[16.7949523926,245.409942627],[46.2259063721,245.9455871582],[76.7217407227,244.3581542969],[108.0255126953,241.9132995605],[139.2969055176,236.6040802002],[169.3508911133,227.00390625],[196.8508911133,212.5113372803],[220.4622955322,193.2011108398],[237.6701049805,176.6720123291],[249.2769317627,165.5227508545],[257.1058502197,158.0023040771],[258.6767730713,146.8785705566],[252.4669952393,131.3953399658],[239.2864227295,114.9784393311],[220.2204437256,100.2967529297],[196.6112060547,89.3649291992],[169.8674468994,82.717956543],[141.0145874023,79.1069641113],[110.7391357422,77.543762207],[79.5041351318,77.3618774414],[47.6219024658,78.1116790771],[15.3030548096,79.489944458],[-17.3291168213,80.8475341797],[-50.1073608398,80.7160339355],[-82.447479248,77.1783905029],[-113.3455352783,68.9601135254],[-142.2360229492,56.1563415527],[-169.6778564453,40.1477661133],[-196.142578125,21.9774932861],[-221.9482116699,2.3491210938],[-247.5999755859,-17.9232788086],[-274.0131835938,-37.4250793457],[-302.0048217773,-54.1876220703],[-331.634552002,-66.5229797363],[-362.2975463867,-73.2355651855],[-386.5590057373,-76.707824707],[-402.9238433838,-79.0500488281],[-413.9622497559,-80.6300201416],[-421.4078826904,-81.6958007812],[-427.397644043,-75.3818664551],[-430.881942749,-60.3393554688],[-430.0752716064,-39.868850708],[-424.7196960449,-16.3474273682],[-416.1625976562,9.1711120605],[-405.4460144043,36.0366973877],[-393.2728729248,63.8108825684],[-380.1172637939,92.1979675293],[-366.2989196777,120.9984588623],[-352.0335540771,150.0777893066],[-337.0773925781,179.1259613037],[-320.4297943115,207.3173522949],[-300.8807983398,233.2098083496],[-277.9514312744,255.3225860596],[-258.9294891357,271.3678741455],[-246.0989532471,282.1905517578],[-237.4446411133,289.4904937744],[-231.6072692871,294.4143066406],[-222.9254302979,292.4571533203],[-211.4884033203,281.8966522217],[-200.6064300537,264.4520874023],[-191.8107452393,241.9408569336],[-185.0111846924,215.9506835938],[-184.6344146729,200.9480133057],[-188.0648803711,183.8985900879],[-195.0711364746,162.6258239746],[-204.6231689453,138.5634307861],[-215.8923950195,112.6193695068]]}

data/pseudopit.json

@@ -0,0 +1 @@
+{"positions":[[-80.0,240.0],[-72.9032592773,239.5688323975],[-57.3142089844,239.8639831543],[-36.0520935059,241.3308563232],[-10.9104919434,243.009765625],[16.7949523926,245.409942627],[46.2259063721,245.9455871582],[76.7217407227,244.3581542969],[108.0255126953,241.9132995605],[139.2969055176,236.6040802002],[169.3508911133,227.00390625],[196.8508911133,212.5113372803],[220.4622955322,193.2011108398],[237.6701049805,176.6720123291],[249.2769317627,165.5227508545],[257.1058502197,158.0023040771],[262.386505127,152.9295654297],[260.8788909912,144.540725708],[250.8700561523,132.909072876],[233.9434661865,121.4550933838],[211.8544921875,111.8132019043],[186.2528076172,103.5366821289],[158.2256774902,96.6243591309],[128.5033721924,92.1104431152],[97.74949646,90.7833099365],[66.3184814453,91.7509155273],[34.4307098389,94.2663269043],[2.1750640869,97.3829650879],[-30.4002990723,99.4274597168],[-62.8778839111,98.3126373291],[-94.7856903076,93.3767852783],[-126.0629119873,85.324432373],[-156.1585388184,73.8938140869],[-183.8516693115,58.3180236816],[-208.5736236572,38.8119049072],[-231.1726226807,16.569229126],[-252.7040405273,-7.260635376],[-274.6472167969,-31.2021636963],[-298.4401702881,-53.3243255615],[-324.6643981934,-71.8543395996],[-353.1020355225,-85.3819122314],[-382.9609375,-92.8987579346],[-406.679977417,-96.9135437012],[-422.6789855957,-99.6216430664],[-433.4706573486,-101.448348999],[-443.3974609375,-96.0948028564],[-452.1689605713,-81.8882904053],[-457.529586792,-61.5220947266],[-457.9885406494,-37.4606323242],[-453.4866485596,-11.5170135498],[-445.5053863525,15.6352996826],[-435.177230835,43.6029205322],[-422.876739502,71.9012298584],[-408.0204772949,99.5868530273],[-390.2422180176,125.8313140869],[-370.3875274658,151.0022735596],[-349.1322174072,175.4491271973],[-326.63722229,199.0718994141],[-302.4261322021,220.9446258545],[-275.9654388428,239.4306030273],[-254.4725494385,252.6978759766],[-239.9753723145,261.6468200684],[-230.1968994141,267.6829376221],[-218.1054229736,267.2635955811],[-203.0215759277,258.7027587891],[-188.1396484375,243.2134246826],[-184.0027160645,224.5857391357],[-184.6813201904,207.6843109131],[-187.315246582,185.6622467041],[-191.4123382568,160.2110290527],[-196.4963531494,132.4467773438],[-202.6783599854,103.2352600098]]}

index.html

@@ -46,15 +46,15 @@
     <div style="width: 35px;height: auto;display: inline-block;margin-right: 20px;position: absolute;left: 515.7px;top: 122px;z-index: 50">
         <img class="play" style="width: 35px;position: absolute;left: 0;top:-58px" src="assets/play-sign.svg">
         <input id="timebar" type="range" min="0" max="66" step="1" value="0"
-               style="width: 295px;position: absolute;top: -6px;">
+               style="width: 296px;position: absolute;top: -6px;left: -1px">
         <p id="stepctn"
            style="position: absolute;display: inline-block;left: 118px;width: 88px;top: -34px;user-focus: none;user-select: none">
             Step --/--</p>
     </div>
     <div class="row" style="margin-top: 15px">
         <div class="five  columns" style="position: relative">
             <h5> What if we Reduce the Memory of an Artificial Doom Player?</h5>
-            <p style="max-height: 100px;">We built Doom player AI <img src="assets/agent.png" class="arrow-icon" height="57px" style="transform: rotate(270deg)"> using Deep Reinforcement learning.
+            <p style="max-height: 100px;">We built Doom player AI <img src="assets/agent.png" class="arrow-icon"  style="transform: rotate(270deg);width: 24px;margin-bottom: -4px"> using Deep Reinforcement learning.
                 While playing, it builds and updates an inner representation (memory) of the game, its environment.
                 Reducing this memory could help the player learning to complete its task and thus lower both its training time and energy consumption footprint.<br>
 

js/drawVector.js

@@ -6,7 +6,7 @@ let hst = 521;
 let sels = [-1, -1];
 let old_sels = [-1, -1];
 let cur_tri = 'nm';
-let mono_col = d3.scaleLinear().domain([0.35, 1]).range(['#FFF', '#bf542f']).interpolate(d3.interpolateHcl);
+let mono_col = d3.scaleLinear().domain([0, 0.35, 1]).range(['#ffffe1', '#FEEAA9', '#cf582f']).interpolate(d3.interpolateHcl);
 let goplz = false;
 let tri = {
     'act': [17, 16, 4, 12, 0, 18, 11, 7, 15, 19, 30, 3, 5, 8, 31, 25, 14, 29, 22, 6, 1, 24, 2, 20, 10, 28, 21, 9, 23, 27, 26, 13],
@@ -103,7 +103,7 @@ function init_current(svg, offx, offy, step) {
 function show_current(svg, offx, offy, step) {
 
     svg.selectAll('.curt')
-        .attr('transform', 'translate(' + (ve_w * (step - 1) + (ve_w / 2) + offx) + ',' + (0 + offy) + ') rotate(' + (90) + ' ' + (15) + ' ' + (15) + ')')
+        .attr('transform', 'translate(' + (ve_w * (step - 1) + ((ve_w / 2) / 2) + offx) + ',' + (0 + offy) + ') rotate(' + (90) + ' ' + (15) + ' ' + (15) + ')')
 
 }
 
@@ -116,10 +116,26 @@ function show_sel(step) {
 
     d3.selectAll('.hsel rect').style('stroke-width', '2.2px')
     let st = [hst + (ve_w * curStep + (0.02 * curStep)), (tdata.hiddens[0].length * ve_h) + 22];
-    d3.select('#nlink').attr('points', "658," + (tool[2] - 105) + ",676," + (tool[2] - 105) + ", " + (st[0] + ve_w + 1.5) + "," + (st[1] + 10) + ", " + (st[0] + ve_w) + "," + (st[1]) + "," + (st[0]) + "," + st[1] + ", " + (st[0] - 1.5) + "," + (st[1] + 10))
+    d3.select('#nlink').attr('points', "658," + (tool[2] - 105) + ",675," + (tool[2] - 105) + ", " + (st[0] + ve_w + 1.5) + "," + (st[1] + 10) + ", " + (st[0] + ve_w) + "," + (st[1]) + "," + (st[0]) + "," + st[1] + ", " + (st[0] - 1.5) + "," + (st[1] + 10))
 }
 
 
+function draw_border(svg, data) {
+
+    let st = [hst, 20];
+    let ed = [(ve_w * data.length + (0.02 * data.length)) - 1, (data[0].length * ve_h)];
+
+
+    svg.append('rect')
+        .attr('x', st[0])
+        .attr('y', st[1])
+        .attr('width', ed[0])
+        .attr('height', ed[1])
+        .attr('stroke-width', '1')
+        .attr('stroke', 'rgb(85, 85, 85)')
+        .attr('fill', 'none')
+}
+
 function mask_elems(svg, mask, nb) {
 
 
@@ -242,7 +258,7 @@ function link_model(svg, data) {
         .attr('id', 'nlink')
         .style("fill", "#233E34")
         .style('stroke-width', '0px')
-        .attr("points", "685," + (tool[2] - 107) + ",702," + (tool[2] - 107) + ", " + (st[0] + ve_w + 4.5) + "," + (st[1] + 10) + ", " + (st[0] + ve_w) + "," + (st[1]) + "," + (st[0]) + "," + st[1] + ", " + (st[0]) + "," + (st[1] + 10));
+        .attr("points", "685," + (tool[2] - 107) + ",698," + (tool[2] - 107) + ", " + (st[0] + ve_w + 4.5) + "," + (st[1] + 10) + ", " + (st[0] + ve_w) + "," + (st[1]) + "," + (st[0]) + "," + st[1] + ", " + (st[0]) + "," + (st[1] + 10));
 
 
     svg.append('line')