Skip to content

Commit

Permalink
Add and reorg videos
Browse files Browse the repository at this point in the history
  • Loading branch information
abhaybd committed Apr 21, 2024
1 parent 03c2a81 commit 2063a03
Show file tree
Hide file tree
Showing 20 changed files with 140 additions and 81 deletions.
160 changes: 103 additions & 57 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -229,107 +229,153 @@ <h2 class="title is-2">Abstract</h2>
</div>

<div class="columns is-centered has-text-centered">
<div class="column is-half">
<h3 class="title is-3">With Corrective Labels</h3>
<div class="columns has-text-centered is-centered">
<div class="column is-3">
<video class="synced" muted>
<source src="./static/videos/ccil_cube_success.mp4" type="video/mp4">
<div class="column">
<div class="columns is-centered has-text-centered">
<div class="column is-2">
<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-3">
<video class="synced" muted>
<source src="./static/videos/ccil_coin_success.mp4" type="video/mp4">
<div class="column is-2">
<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-3">
<video class="synced" muted>
<source src="./static/videos/ccil_cube_success.mp4" type="video/mp4">
<div class="column is-2">
<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>
<div class="columns has-text-centered is-centered">
<div class="column is-3">
<video class="synced" muted>
<source src="./static/videos/ccil_cube_success.mp4" type="video/mp4">
<div class="column is-2">
<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-3">
<video class="synced" muted>
<source src="./static/videos/ccil_coin_success.mp4" type="video/mp4">
<div class="column is-2">
<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 class="column is-3">
<video class="synced" muted>
<source src="./static/videos/ccil_cube_success.mp4" type="video/mp4">
</div>
<div class="columns is-centered has-text-centered">
<div class="column is-2">
<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>
</div>
<div class="column is-half">
<h3 class="title is-3">Without Corrective Labels</h3>
<div class="columns has-text-centered is-centered">
<div class="column is-3">
<video class="synced" muted>
<source src="./static/videos/bc_cube_failure.mp4" type="video/mp4">
<div class="column is-2">
<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">
<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-3">
<video class="synced" muted>
<source src="./static/videos/bc_coin_failure.mp4" type="video/mp4">
<div class="column is-2">
<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-3">
<video class="synced" muted>
<source src="./static/videos/bc_cube_failure.mp4" type="video/mp4">
<div class="column is-2">
<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 has-text-centered is-centered">
<div class="column is-3">
<video class="synced" muted>
<source src="./static/videos/bc_cube_failure.mp4" type="video/mp4">
<div class="columns is-centered has-text-centered">
<div class="column is-2">
<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">
<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-3">
<video class="synced" muted>
<source src="./static/videos/bc_coin_failure.mp4" type="video/mp4">
<div class="column is-2">
<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-3">
<video class="synced" muted>
<source src="./static/videos/bc_cube_failure.mp4" type="video/mp4">
<div class="column is-2">
<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">
<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.
</video>
</div>
</div>
</div>
</div>

<!-- Paper video. -->
<div class="has-text-centered is-centered">
<h3 class="title is-3 mb-5">With (top) vs. Without (bottom) Corrective Labels</h3>
</div>
<div class="columns is-centered has-text-centered">
<div class="column is-four-fifths">
<h2 class="title is-3">CCIL Successes and Failures</h2>
<div class="publication-video">
<video controls preload="metadata">
<source src="./static/videos/successes_and_failures.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="column is-3">
<h4 class="title is-4 vid-title">Grasp Cube</h4>
<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>
<video class="synced-2" muted>
<source src="./static/videos/bc_cube_failure.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>
Without corrective labels, the agent can knock over the cube while trying to grasp it.
</p>
</div>
<div class="column is-3">
<h4 class="title is-4 vid-title">Gear Insert</h4>
<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>
<video class="synced-2" muted>
<source src="./static/videos/bc_lego_failure.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>
Without corrective labels, the agent is not precise enough to reliably insert the gear.
</p>
</div>
<div class="column is-3">
<h4 class="title is-4 vid-title">Grasp Coin</h4>
<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>
<video class="synced-2" muted>
<source src="./static/videos/bc_coin_failure.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>
Without corrective labels, the agent is not able to precisely grasp the coin in the right place.
</p>
</div>
</div>
<!--/ Paper video. -->

<div class="columns is-centered has-text-centered">
<div class="column is-four-fifths">
Expand Down
4 changes: 4 additions & 0 deletions static/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -229,3 +229,7 @@ body {
.insight p:not(:last-child) {
margin-bottom: 5px;
}

.title.vid-title {
margin-bottom: 2px;
}
57 changes: 33 additions & 24 deletions static/js/sync_vids.js
Original file line number Diff line number Diff line change
@@ -1,35 +1,44 @@
$(document).ready(function() {
const syncedVids = document.querySelectorAll('video.synced');
const syncedGroups = ["synced-1", "synced-2"];

let vidsReady = 0;
let vidsEnded = 0;
let vidsReady = {};
let vidsEnded = {};

for (const vid of syncedVids) {
vid.oncanplay = () => {
vid.oncanplay = null;
vidsReady += 1;
console.log(`${vidsReady}/${syncedVids.length} videos ready`);
if (vidsReady === syncedVids.length) {
console.log("Starting all videos");
for (const v of syncedVids) {
v.play();
}
}
}
for (const group of syncedGroups) {
vidsReady[group] = 0;
vidsEnded[group] = 0;

vid.onended = () => {
vidsEnded += 1;
console.log(`${vidsEnded}/${syncedVids.length} videos finished`);
if (vidsEnded === syncedVids.length) {
console.log("Restarting all videos");
setTimeout(() => {
vidsEnded = 0;
const syncedVids = document.querySelectorAll(`video.${group}`);

for (const vid of syncedVids) {
vid.oncanplay = () => {
vid.oncanplay = null;
vidsReady[group] += 1;
console.log(`${vidsReady[group]}/${syncedVids.length} videos ready in group ${group}`);
if (vidsReady[group] === syncedVids.length) {
console.log(`Starting all videos in group ${group}`);
for (const v of syncedVids) {
v.currentTime = 0;
v.play();
}
}, 1000);
}
}

vid.onended = () => {
vidsEnded[group] += 1;
console.log(`${vidsEnded[group]}/${syncedVids.length} videos finished in group ${group}`);
if (vidsEnded[group] === syncedVids.length) {
console.log(`Restarting all videos in group ${group}`);
setTimeout(() => {
vidsEnded[group] = 0;
for (const v of syncedVids) {
v.currentTime = 0;
v.play();
}
}, 1000);
}
}
}
}


});
Binary file added static/videos/bc_lego_failure.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/coin_success_0.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/coin_success_1.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/coin_success_2.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/coin_success_3.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/coin_success_4.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/cube_success_0.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/cube_success_1.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/cube_success_2.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/cube_success_3.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/cube_success_4.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/lego_success_0.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/lego_success_1.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/lego_success_2.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/lego_success_3.mp4
Binary file not shown.
Binary file added static/videos/ccil_grid/lego_success_4.mp4
Binary file not shown.
Binary file added static/videos/ccil_lego_success.mp4
Binary file not shown.

0 comments on commit 2063a03

Please sign in to comment.