Fixed layout + new intro + new top text + implemtation + twitter

Theo-Jaunet · Sep 5, 2019 · f7e454c · f7e454c
1 parent 6006b99
commit f7e454c
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 301 deletions.
diff --git a/css/custom.css b/css/custom.css
@@ -80,7 +80,7 @@ a {
 
 .cell {
     width: 13px;
-    height: 17px;
+    height: 15px;
     border: 0.5px solid #333333;
     display: inline-block;
 }

diff --git a/css/skeleton.css b/css/skeleton.css
@@ -58,7 +58,7 @@
 
     .column,
     .columns {
-        margin-left: 4%;
+        margin-left: 3.47%;
     }
 
     .column:first-child,
@@ -313,7 +313,7 @@ input[type="button"] {
     display: inline-block;
     height: 48px;
     /*width: 100px;*/
-    padding: 0 10px;
+    padding: 0 15px;
     color: #555;
     text-align: center;
     font-size: 11px;
@@ -604,6 +604,6 @@ there.
     .button {
         /*height: 50px;*/
         /*line-height: 50px;*/
-        padding: 0 10px;
+        padding: 0 15px;
         vertical-align: bottom;
     }
diff --git a/index.html b/index.html
@@ -41,32 +41,34 @@
 
 <!-- Primary Page Layout
 –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-<div class="container" style="position: relative; min-width: 1200px;padding: 0">
+<div class="container" style="position: relative; min-width: 1245px;padding: 0;">
 
 
     <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">
+        <img class="play" style="width: 29px;position: absolute;left: 90px;top:-53px" src="assets/play-sign.svg">
         <input id="timebar" type="range" min="0" max="66" step="1" value="0"
-               style="width: 295.5px;position: absolute;top: -6px;left: -1px">
+               style="width: 299px;position: absolute;top: -6px;left: 11.9px">
         <p id="stepctn"
-           style="position: absolute;display: inline-block;left: 118px;width: 88px;top: -34px;user-focus: none;user-select: none">
+           style="position: absolute;display: inline-block;left: 145px;width: 88px;top: -50px;user-focus: none;user-select: none">
             Step --/--</p>
     </div>
-    <div class="row" style="margin-top: 15px">
+    <div class="row" style="margin-top: 12px">
         <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 a Doom player AI <img src="assets/agent.png" class="arrow-icon" style="transform: rotate(270deg);width: 24px;margin-bottom: -4px"> using Deep Reinforcement learning.
+            <p style="max-height: 100px;width: 490px">
+                We built a 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 what it sees from the game.
-                Reducing this memory could help the player learning to complete its task and thus lower both its training time and energy consumption footprint.<br>
+                This memory represents what the AI knows about the game, and is the root of each decision.
+                Reducing the size of the memory <img src="assets/red.png" class="arrow-icon">, could help the player learning to complete its task and thus lower its training time and energy consumption footprint.
 
-                In this scenario, the player has to gather items in a specific order: <br>Green Armor <img src="assets/armorGreen.png"
+                In this scenario, the player has to gather items in a specific order: Green Armor <img src="assets/armorGreen.png"
                                                                                                            class="item-icon" height="57px"> <img
                         src="assets/arrow.png" class="arrow-icon"> Red Armor
                 <img src="assets/armorRed.png" class="item-icon"> <img src="assets/arrow.png" class="arrow-icon"> Health
                 Pack <img src="assets/hp.png" class="item-icon"> <img src="assets/arrow.png" class="arrow-icon">
                 Soul-sphere <img src="assets/soul.png" class="item-icon" style="width: 16px"> , with the
                 shortest path possible.
-                Let’s explore how reducing <img src="assets/red.png" class="arrow-icon"> the memory of a trained agent influences its trajectory!
+                <!--Let’s explore how reducing <img src="assets/red.png" class="arrow-icon">  the memory of a trained agent influences its trajectory!-->
             </p>
 
         </div>
@@ -80,13 +82,13 @@ <h5> What if we Reduce the Memory of an Artificial Doom Player?</h5>
             <div class=" nav right-card-arr button"><p style="padding: 13px 0px;font-weight: 700"> > </p></div>
         </div>
     </div>
-    <div style="width: 353px;position: absolute;right: -11px;top: 78px">
+    <div style="width: 360px;position: absolute;right: 22px;top: 86px">
         <h5 style="width: 100%" id="card_title"> Full Memory</h5>
         <p id="card_txt" style="margin-top: -11px;width: 100%">
         </p>
         <svg id="sco" style="width: 150px;height: 150px;position: absolute;right: 109px;bottom: -200px;z-index: 777;visibility:hidden"></svg>
         <div id="nextarr" onclick="$('.right-card-arr').trigger('click')"
-             style="cursor:pointer;position: absolute;right: 28px;bottom: 12px;z-index: 777"><a>next <img src="assets/arrow.png" class="arrow-icon"> </a>
+             style="cursor:pointer;position: absolute;right: 28px;bottom: 12px;z-index: 777"><a>Next <img src="assets/arrow.png" class="arrow-icon"> </a>
         </div>
     </div>
 
@@ -210,7 +212,7 @@ <h4> How do we Erase Memory Elements?</h4>
                     The outcome of such operation is then used by the model to decide which action it should do.
                     This method allows to change the agent's memory without having to retrain a model.
                 </p>
-                <!--<svg id="fig2" style="border:solid slategray 1px;height: 100%"></svg>-->
+
                 <p> But how can we select which elements should be erased and those to preserve?</p>
 
             </div>
@@ -220,11 +222,9 @@ <h4> How do we Erase Memory Elements?</h4>
     <div class="row" style="text-align: center">
         <div class="twelve columns" style="margin-top: 2%;display: inline-block">
             <div style=" text-align: left;width: 800px;margin-bottom: 50px;display: inline-block">
-                <h5>Implementaion</h5>
-                <p> This project uses D3 to display data extrated from the Deep Reinforcement Learning developped in Pytorch. The video game DOOM is simulated with Vizdoom. In addition, this project uses our previous work DRLViz to analyse
-                    and generate episodes.
-
-                    -- Vizdoom, Pytorch, D3, DRLVIz. </p>
+                <h4>Implementation</h4>
+                <p> This project uses the JavaScript library <a href="https://d3js.org/">d3</a> to display data extracted from the Deep Reinforcement Learning model implemented in python using <a href="https://pytorch.org/">PyTorch</a>. The video game DOOM is simulated with <a href="http://vizdoom.cs.put.edu.pl/">ViZDoom</a>. In addition, this project uses our previous work DRLViz (<a href="https://github.com/sical/drlviz">github</a>, <a href="https://sical.github.io/drlviz/">demo</a>, <a href="https://theo-jaunet.github.io/drlviz.pdf">paper</a>) to analyse
+                    and generate episodes. For more information on this project, please feel free to visit our <a href="https://github.com/Theo-Jaunet/MemoryReduction">github</a>. </p>
 
             </div>
 
@@ -235,7 +235,7 @@ <h5>Implementaion</h5>
         <div class="twelve columns" style="margin-top: 2%;display: inline-block">
             <div style=" text-align: left;width: 800px;margin-bottom: 50px;display: inline-block">
                 <h5>Authors</h5>
-                <p><a href="https://theo-jaunet.github.io/">Théo Jaunet</a>, <a href="http://romain.vuillemot.net/">Romain Vuillemot</a> and <a href="https://perso.liris.cnrs.fr/christian.wolf/">Christian Wolf </a>, at LIRIS lab Lyon.</p>
+                <p><a href="https://theo-jaunet.github.io/">Théo Jaunet</a>, <a href="http://romain.vuillemot.net/">Romain Vuillemot</a> (<a href="https://twitter.com/romsson">@romsson</a>) and <a href="https://perso.liris.cnrs.fr/christian.wolf/">Christian Wolf </a>(<a href="https://twitter.com/chriswolfvision">@chriswolfvision</a>), at LIRIS lab Lyon - France.</p>
                 This work takes place in Théo jaunet's Ph.D. which is supported by a French Ministry Fellowship and the <a href="https://projet.liris.cnrs.fr/mi2/"> M2I project</a>,
             </div>
 
@@ -252,7 +252,6 @@ <h5>Authors</h5>
 <script src="js/observation.js"></script>
 <script src="js/distributionV2.js"></script>
 <script src="js/trajectory.js"></script>
-<script src="js/reduce.js"></script>
 <script src="js/stage.js"></script>
 <script src="js/main.js"></script>
 </html>
diff --git a/js/distribution.js b/js/distribution.js
diff --git a/js/distributionV2.js b/js/distributionV2.js
@@ -10,7 +10,7 @@ function bars_init(svg, width, height) {
 
     let g = svg.append('g').attr('class', 'distrib');
 
-    let st = height - 117;
+    let st = height - 128;
 
 
     g.selectAll('.bar').data([0, 0, 0, 0, 0]).enter()

diff --git a/js/drawVector.js b/js/drawVector.js
@@ -2,7 +2,7 @@ let ve_h;
 let ve_rows = [];
 let ve_w = 15;
 let col = d3.scaleLinear().domain([-1, 0, 1]).range(['#2266a6', '#effce5', '#bf6b09']).interpolate(d3.interpolateHcl);
-let hst = 521;
+let hst = 535;
 let sels = [-1, -1];
 let old_sels = [-1, -1];
 let cur_tri = 'nm';
@@ -25,7 +25,7 @@ function ve_init_rows(svg, data, height, width, mask, elem) {
     let g = svg.append('g').attr('class', 'hiddensgrp').attr('id', 'hiddensgrp');
 
     ve_h = Math.min(((height - 151) / data[0].length), 60);
-    ve_w = Math.min((width - hst - 10) / data.length, 13);
+    ve_w = Math.min((width - (hst-7)) / data.length, 13);
 
     for (let w = 0; w < data.length; w++) {
 
@@ -196,7 +196,7 @@ function mask_elem(index) {
     for (let w = 0; w < index.length; w++) {
         let tsvg = rough.svg(tool[0]);
         if (index[w] > -1) {
-            let t = tsvg.rectangle(hst - getRandomArbitrary(0, 12), (index[w] * ve_h) + 20, (ve_w * tdata.hiddens.length + (0.02 * tdata.hiddens.length)) + getRandomArbitrary(0, 12), ve_h * 0.8, {
+            let t = tsvg.rectangle(hst - (ve_w *  getRandomArbitrary(0, 3)), (index[w] * ve_h) + 20, (ve_w * (tdata.hiddens.length + getRandomArbitrary(1, 2)) + (0.02 * tdata.hiddens.length)) + getRandomArbitrary(0, 12), ve_h * 0.8, {
                 fill: (!old_sels.includes(index[w]) ? "url(#linear-gradient)" : "rgb(10,10,10)"),
                 fillWeight: getRandomArbitrary(5, 9), // thicker lines for hachure
                 hachureAngle: getRandomArbitrary(10, 70), // angle of hachure,

diff --git a/js/main.js b/js/main.js
@@ -1,6 +1,6 @@
-let tool = [d3.select('#svg-tool'), $('#svg-tool').width(), $('#svg-tool').height()];
+let tool = [d3.select('#svg-tool'), 850, 663];
 let tdata;
-let margin = 20;
+// let margin = 20;
 let iz = 0;
 let start = 0;
 let pl = false;
@@ -12,7 +12,7 @@ let tops = [];
 let diy = [];
 let random = [];
 let mains = [];
-let stfold = ['main', 'random', "top", "sel", 'diy'];
+// let stfold = ['main', 'random', "top", "sel", 'diy'];
 let selecs_list = ['rest0', 'rest1'];
 let selecs = [];
 let can = d3.select('#input');
@@ -82,6 +82,7 @@ function load_data(data, index) {
 
     $('#timebar').val(curStep);
     update_time();
+    show_current(tool[0], (hst - 10) + (ve_w / 2), -10, curStep);
     d3.selectAll('.item').moveToFront();
     switch (stage) {
         case  "0":
@@ -371,28 +372,26 @@ function draw_arrowV2(x, y, z, ind) {
 
 
     tool[0].append('text')
-        .attr('x', 102)
+        .attr('x', 100)
         .attr('y', 660)
         .text('Input');
 
 
     tool[0].append('text')
         .attr('x', x - 22)
-        .attr('y', 660)
-        .text('Image Processing (CNN)');
+        .attr('y', 650)
+        .text('Image Processing');
 
 
     tool[0].append('text')
         .attr('x', x + 260)
-        .attr('y', 660)
+        .attr('y', 650)
         .text('Memory');
 
     tool[0].append('text')
         .attr('x', x + 372)
         .attr('y', 660)
         .text('Output');
-
-
 }
 
 
@@ -471,9 +470,6 @@ $('body').on('click', '.scro rect', function () {
 
 function highelems(elems) {
 
-    //TODO: Detected close elements
-
-
     tool[0].selectAll('.hiddensgrp rect[order]').transition().duration(900).style('opacity', '0.3');
 
     for (let i = 0; i < elems.length; i++) {

diff --git a/js/observation.js b/js/observation.js
@@ -46,5 +46,4 @@ function stepIm() {
         con.drawImage(tdata['inputs'], 240 * curStep, 0, 240, 162, 0, 0, 274, 176);
         con.save()
     }
-
 }