Skip to content

Commit

Permalink
Enhancements for mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@abhaybd
abhaybd committed Apr 25, 2024
1 parent f8cb0fa commit 3de88e1
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 43 deletions.
89 changes: 46 additions & 43 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
<link rel="stylesheet" href="./static/css/fontawesome.all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
<link rel="stylesheet" href="./static/css/index.css">
<link rel="stylesheet" href="./static/css/bulma-ext.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pseudocode@latest/build/pseudocode.min.css">
<link rel="icon" href="./static/images/favicon.svg" type="image/svg">

Expand Down Expand Up @@ -230,96 +231,96 @@ <h2 class="title is-2">Abstract</h2>

<div class="columns is-centered has-text-centered">
<div class="column">
<div class="columns is-centered has-text-centered">
<div class="column is-2">
<div class="columns is-centered has-text-centered is-mobile is-multiline">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/cube_success_0.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="column is-2">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/cube_success_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="column is-2">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/cube_success_2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="column is-2">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/cube_success_3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="column is-2">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/cube_success_4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="columns is-centered has-text-centered">
<div class="column is-2">
<div class="columns is-centered has-text-centered is-mobile is-multiline">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/lego_success_0.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="column is-2">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/lego_success_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="column is-2">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/lego_success_2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="column is-2">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/lego_success_3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="column is-2">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/lego_success_4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="columns is-centered has-text-centered">
<div class="column is-2">
<div class="columns is-centered has-text-centered is-mobile is-multiline">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/coin_success_0.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="column is-2">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/coin_success_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="column is-2">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/coin_success_2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="column is-2">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/coin_success_3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="column is-2">
<div class="column is-2 is-one-third-mobile">
<video class="synced-1" muted>
<source src="./static/videos/ccil_grid/coin_success_4.mp4" type="video/mp4">
Your browser does not support the video tag.
Expand All @@ -332,18 +333,20 @@ <h2 class="title is-2">Abstract</h2>
<div class="has-text-centered is-centered">
<h3 class="title is-3 mb-5">Impact of Corrective Labels</h3>
</div>
<div class="columns is-centered has-text-centered">
<div class="column is-3">
<div class="columns is-centered has-text-centered is-mobile is-multiline">
<div class="column is-3 is-half-mobile">
<h4 class="title is-4 vid-title">Grasp Cube</h4>
<div class="captioned-vid">
<p>With Corrective Labels</p>
<p class="is-hidden-mobile">With Corrective Labels</p>
<p class="is-hidden-tablet">With Corr. Labels</p>
<video class="synced-2" muted>
<source src="./static/videos/ccil_cube_success.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="captioned-vid">
<p>Without Corrective Labels</p>
<p class="is-hidden-mobile">Without Corrective Labels</p>
<p class="is-hidden-tablet">Without Corr. Labels</p>
<video class="synced-2" muted>
<source src="./static/videos/bc_cube_failure.mp4" type="video/mp4">
Your browser does not support the video tag.
Expand All @@ -353,17 +356,17 @@ <h4 class="title is-4 vid-title">Grasp Cube</h4>
Without corrective labels, the agent can knock over the cube while trying to grasp it.
</p>
</div>
<div class="column is-3">
<div class="column is-3 is-half-mobile">
<h4 class="title is-4 vid-title">Gear Insert</h4>
<div class="captioned-vid">
<p class="is-hidden-tablet">With Corrective Labels</p>
<!-- <p class="is-hidden-tablet">With Corrective Labels</p> -->
<video class="synced-2" muted>
<source src="./static/videos/ccil_lego_success.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="captioned-vid">
<p class="is-hidden-tablet">Without Corrective Labels</p>
<!-- <p class="is-hidden-tablet">Without Corrective Labels</p> -->
<video class="synced-2" muted>
<source src="./static/videos/bc_lego_failure.mp4" type="video/mp4">
Your browser does not support the video tag.
Expand All @@ -373,17 +376,17 @@ <h4 class="title is-4 vid-title">Gear Insert</h4>
Without corrective labels, the agent is not precise enough to reliably insert the gear.
</p>
</div>
<div class="column is-3">
<div class="column is-3 is-half-mobile">
<h4 class="title is-4 vid-title">Grasp Coin</h4>
<div class="captioned-vid">
<p class="is-hidden-tablet">With Corrective Labels</p>
<p class="is-hidden-tablet">With Corr. Labels</p>
<video class="synced-2" muted>
<source src="./static/videos/ccil_coin_success.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="captioned-vid">
<p class="is-hidden-tablet">Without Corrective Labels</p>
<p class="is-hidden-tablet">Without Corr. Labels</p>
<video class="synced-2" muted>
<source src="./static/videos/bc_coin_failure.mp4" type="video/mp4">
Your browser does not support the video tag.
Expand Down Expand Up @@ -460,28 +463,28 @@ <h4 class="title is-4">Filtering High-Error Labels</h4>
<section class="section">
<div class="container has-text-centered is-max-desktop">
<h2 class="title is-2">Real Robot Experiments</h3>
<div class="columns is-centered">
<div class="column is-3 has-text-centered">
<div class="columns is-centered is-mobile">
<div class="column is-3 is-one-third-mobile has-text-centered">
<img class="no_outline" src="./static/images/cube.JPEG" alt="Grasp cube task" style="max-width: 100%; max-height: 100%;">
</div>
<div class="column is-3 has-text-centered">
<div class="column is-3 is-one-third-mobile has-text-centered">
<img class="no_outline" src="./static/images/lego.JPEG" alt="Lego insert task" style="max-width: 100%; max-height: 100%;">
</div>
<div class="column is-3 has-text-centered">
<div class="column is-3 is-one-third-mobile has-text-centered">
<img class="no_outline" src="./static/images/coin.JPEG" alt="Grasp coin task" style="max-width: 100%; max-height: 100%;">
</div>
</div>
<div class="columns is-centered has-text-centered mt-5">
<div class="column is-four-fifths">
<h4 class="title is-4">CCIL improves imitation learning, especially in low-data regimes</h4>
<div class="columns is-centered">
<div class="column is-4 has-text-centered">
<div class="columns is-centered is-mobile is-multiline">
<div class="column is-4 is-half-mobile has-text-centered">
<img src="./static/images/IROS_figures/grasp_cube_ablation_line_plot.png" alt="Cube data ablation" style="max-width: 100%; max-height: 100%;">
</div>
<div class="column is-4 has-text-centered">
<div class="column is-4 is-half-mobile has-text-centered">
<img src="./static/images/IROS_figures/lego_insert_ablation_line_plot.png" alt="Lego data ablation" style="max-width: 100%; max-height: 100%;">
</div>
<div class="column is-4 has-text-centered">
<div class="column is-4 is-half-mobile has-text-centered">
<img src="./static/images/IROS_figures/coin_ablation_line_plot.png" alt="Coin data ablation" style="max-width: 100%; max-height: 100%;">
</div>
</div>
Expand All @@ -498,11 +501,11 @@ <h4 class="title is-4">CCIL improves imitation learning, especially in low-data
<div class="columns is-centered has-text-centered mt-6">
<div class="column is-four-fifths">
<h4 class="title is-4">CCIL's Robustness to Lipschitz Constraint</h4>
<div class="columns is-centered is-vcentered">
<div class="column is-4 has-text-centered">
<div class="columns is-centered is-vcentered is-mobile">
<div class="column is-4 is-half-mobile has-text-centered">
<img src="./static/images/IROS_figures/hparam_grid.png" alt="Hyperparameter ablation grid" style="max-width: 100%; max-height: 100%;">
</div>
<div class="column is-4 has-text-centered">
<div class="column is-4 is-half-mobile has-text-centered">
<img src="./static/images/IROS_figures/local_L.png" alt="Local L" style="max-width: 100%; max-height: 100%;">
</div>
</div>
Expand Down Expand Up @@ -556,14 +559,14 @@ <h5 class="title is-5 mb-1">Without Corrective Labels</h5>
<!-- Animation. -->
<h2 class="title is-3">Simulation Experiments</h2>
<h3 class="title is-4">F1Tenth</h3>
<div class="columns is-centered has-text-centered is-vcentered">
<div class="column is-3">
<div class="columns is-centered has-text-centered is-vcentered is-mobile is-multiline">
<div class="column is-3 is-half-mobile">
<img src="static/images/f1.png" alt="F1Tenth graphic" style="max-height: 100%;" />
</div>
<div class="column is-3">
<div class="column is-3 is-half-mobile">
<img src="static/images/f1_lidar.png" alt="F1Tenth LiDAR" style="max-height: 100%;"/>
</div>
<div class="column is-4">
<div class="column is-4 is-whole-mobile">
<div class="table-container">
<table class="results-table">
<tr>
Expand Down
22 changes: 22 additions & 0 deletions static/css/bulma-ext.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/* Overrides and extensions that fill gaps in Bulma */

@media screen and (max-width: 768px) {
.column.is-one-third-mobile {
flex: none !important;
width: 33% !important;
}
}

@media screen and (max-width: 768px) {
.column.is-half-mobile {
flex: none !important;
width: 50% !important;
}
}

@media screen and (max-width: 768px) {
.column.is-whole-mobile {
flex: none !important;
width: 100% !important;
}
}

0 comments on commit 3de88e1

Please sign in to comment.