Update website

UT-Austin-RPL · Jun 1, 2024 · a02fe79 · a02fe79
1 parent 126eae2
commit a02fe79
Show file tree

Hide file tree

Showing 9 changed files with 257 additions and 8 deletions.
diff --git a/docs/_data/video_breakfast.yml b/docs/_data/video_breakfast.yml
@@ -0,0 +1,19 @@
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/ff29srbu79pb3rn6o88spcjxhhf6dyiy.mp4
+  type: video/mp4
+  caption: ""
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/ol4wwwmpsrjigc0wpij9rbgpbyfm2fo7.mp4
+  type: video/mp4
+  caption: ""
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/684wj4njs55wpg1e2y1lvuafa1wdd5m1.mp4
+  type: video/mp4
+  caption: ""
+
+
diff --git a/docs/_data/video_llama.yml b/docs/_data/video_llama.yml
@@ -0,0 +1,46 @@
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/y23f4e5gsqyj0ybu2j15rmh66tlu3e09.mp4
+  type: video/mp4
+  caption: ""
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/ra0rbehy66qan4wbmynccckx8ph7f0x2.mp4
+  type: video/mp4
+  caption: ""
+
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/mbnudhmasrip2y2j42fmm0r3zu0nsza0.mp4
+  type: video/mp4
+  caption: ""
+
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/w37gjs2h4c3bm32pn70d4a8jab4682bx.mp4
+  type: video/mp4
+  caption: ""
+
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/lgar3cdoaaax8m5icitn9jx05f0n1m5y.mp4
+  type: video/mp4
+  caption: ""
+
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/0vysdb06zl2junyvrnno25ado1ux3427.mp4
+  type: video/mp4
+  caption: ""
+
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/mr8p02sph4eknngp7ckksip34yvzz8vc.mp4
+  type: video/mp4
+  caption: ""
diff --git a/docs/_data/video_long_boat.yml b/docs/_data/video_long_boat.yml
@@ -0,0 +1,29 @@
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/ii92px1gar7kqbnsll2fr1sqg1ziz2zm.mp4
+  type: video/mp4
+  caption: ""
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/l0f41b37fyoqg9gu4oo3krezyz5r68xy.mp4
+  type: video/mp4
+  caption: ""
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/mjr5gulwaah3rsthz77ztvj9zwef0inn.mp4
+  type: video/mp4
+  caption: ""
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/s4wr3boggvpqbxixbsvn17f5193cfj10.mp4
+  type: video/mp4
+  caption: ""
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/gleho1kqha8v2hfnnjg7nffgdfvlppdq.mp4
+  type: video/mp4
+  caption: ""
diff --git a/docs/_data/video_mug.yml b/docs/_data/video_mug.yml
@@ -0,0 +1,51 @@
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/kpbv5rg3l4i5x942mfe09x896sx6wcs5.mp4
+  type: video/mp4
+  caption: ""
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/7oqutplgt56hlsbppzgbnt4s1kuyizex.mp4
+  type: video/mp4
+  caption: ""
+
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/m2xqqnh4zwz7irr1vi8za1i1bxw4pw9u.mp4
+  type: video/mp4
+  caption: ""
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/vqgtqavhpjxcths5hywwevfe0afqd30x.mp4
+  type: video/mp4
+  caption: ""
+
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/250wsuivseu0x1xbz4ttwbj1pdp96nct.mp4
+  type: video/mp4
+  caption: ""
+
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/lht5l58r3a8cls8yghy9mevnglr2t9fv.mp4
+  type: video/mp4
+  caption: ""
+
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/eejrgqosxsrw3gis4ct3ny9y7ofispmo.mp4
+  type: video/mp4
+  caption: ""
+
+- class: item item-camera
+  id: "camera"
+  src: https://utexas.box.com/shared/static/vmeukokqm2kbbskv4wvvn8yj13i73r2e.mp4
+  type: video/mp4
+  caption: ""
diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html
@@ -241,6 +241,31 @@ <h2 class="title is-3">Abstract</h2>
 
 <!-- / Carousel Video Example. -->
 
+<section class="section">
+  <div class="container is-max-desktop">
+    <!-- Method Overview. -->
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-four-fifths">
+        <h2 class="subtitle is-3">Overview</h2>
+        <!-- <div class="hero-body"> -->
+          <div>
+          <!-- <img id="teaser" src="./static/imgs/plan_generation.svg" alt="No image found."/> -->
+          <!-- <h2 class="subtitle">
+            ORION imitates manipulation from a single human video.
+          </h2> -->
+          <video poster="" id="opening-video" autoplay controls muted loop playsinline height="100%">
+            <source src="static/videos/method/overview.mp4"
+                    type="video/mp4">
+            </video> 
+          <div class="content has-text-justified">
+            In this animation, we explain at the high-level how ORION is able to extract object-centric information for a robot to imitate the humana.
+        </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
 <section class="section">
   <div class="container is-max-desktop">
     <!-- Method Overview. -->
@@ -266,6 +291,8 @@ <h2 class="subtitle is-3">Method - Plan Generation from Video</h2>
     </div>
   </div>
 
+  <br>
+  <br>
   <div class="container is-max-desktop">
   <div class="columns is-centered has-text-centered">
   <div class="column is-four-fifths">
@@ -301,11 +328,82 @@ <h4 class="subtitle is-3">Method - Action Synthesis of ORION Policy</h4>
       <div class="example-slick">
         {% for video in site.data.video_human_demo %}
               <div class="{{ video.class }} is-centered">
-                  <video class="human-video is-centered" poster="" id="{{ video.id }}" autoplay controls muted loop playsinline height="100%">
+                  <video class="human-video is-centered" poster="" id="{{ video.id }}" autoplay muted loop playsinline height="100%">
+                  <source src="{{ video.src }}"
+                          type="{{ video.type }}">
+                  </video>   
+                  <div class="caption" style="font-size:20px!important"> Task: <br> {{ video.caption }} </div>         
+                  <br>
+              </div>
+        {% endfor %}
+      </div>
+    </div>
+    <p class="content has-text-justified"> Here we show all the videos of human demonstrations. All the videos are taken using an iPad that is statically placed on the table. </p>
+  </div>
+</section>
+
+<br><hr><br>
+
+<section class="section">
+  <div class="container is-max-desktop">
+    <!-- Content to be toggled -->
+    <h2 class="title is-3 sectiont-title">Real Robot Rollouts</h2>
+    <p class="content has-text-justified"> Here we provide rollout videos of ORION policies on real robots. All video playbacks are at 4x speed.</p>
+    <div class="toggleContent" id="toggleContent-human-video-demo">
+      <p class="carousel-title" id="toggleButton-human-video-demo">Task: Succulents-in-llama-vase</p>
+      <div class="robot-one-video-slick">
+        {% for video in site.data.video_llama %}
+              <div class="{{ video.class }} is-centered">
+                  <video class="human-video is-centered" poster="" id="{{ video.id }}" autoplay muted loop playsinline height="100%">
+                  <source src="{{ video.src }}"
+                          type="{{ video.type }}">
+                  </video>   
+                  <div class="caption" style="font-size:20px!important"> <br> {{ video.caption }} </div>         
+                  <br>
+              </div>
+        {% endfor %}
+      </div>
+    </div>
+    <div class="toggleContent" id="toggleContent-human-video-demo">
+      <p class="carousel-title" id="toggleButton-human-video-demo">Task: Mug-on-coaster</p>
+      <div class="robot-one-video-slick">
+        {% for video in site.data.video_mug %}
+              <div class="{{ video.class }} is-centered">
+                  <video class="human-video is-centered" poster="" id="{{ video.id }}" autoplay muted loop playsinline height="100%">
+                  <source src="{{ video.src }}"
+                          type="{{ video.type }}">
+                  </video>   
+                  <div class="caption" style="font-size:20px!important"> <br> {{ video.caption }} </div>         
+                  <br>
+              </div>
+        {% endfor %}
+      </div>
+    </div>
+    <div class="toggleContent" id="toggleContent-human-video-demo">
+      <p class="carousel-title" id="toggleButton-human-video-demo">Task: Complex-boat-assembly</p>
+      <div class="robot-one-video-slick">
+        {% for video in site.data.video_long_boat %}
+              <div class="{{ video.class }} is-centered">
+                  <video class="human-video is-centered" poster="" id="{{ video.id }}" autoplay muted loop playsinline height="100%">
+                  <source src="{{ video.src }}"
+                          type="{{ video.type }}">
+                  </video>   
+                  <div class="caption" style="font-size:20px!important"> <br> {{ video.caption }} </div>         
+                  <br>
+              </div>
+        {% endfor %}
+      </div>
+    </div>
+    <div class="toggleContent" id="toggleContent-human-video-demo">
+      <p class="carousel-title" id="toggleButton-human-video-demo">Task: Prepare-breakfast</p>
+      <div class="robot-one-video-slick">
+        {% for video in site.data.video_breakfast %}
+              <div class="{{ video.class }} is-centered">
+                  <video class="human-video is-centered" poster="" id="{{ video.id }}" autoplay muted loop playsinline height="100%">
                   <source src="{{ video.src }}"
                           type="{{ video.type }}">
                   </video>   
-                  <div class="caption" style="font-size:20px!important"> Task name: <br> {{ video.caption }} </div>         
+                  <div class="caption" style="font-size:20px!important"> <br> {{ video.caption }} </div>         
                   <br>
               </div>
         {% endfor %}
@@ -324,7 +422,7 @@ <h4 class="subtitle is-3">Method - Action Synthesis of ORION Policy</h4>
       <div class="robot-three-video-slick">
         {% for video in site.data.video_failure %}
               <div class="{{ video.class }} is-centered">
-                  <video class="human-video is-centered" poster="" id="{{ video.id }}" autoplay controls muted loop playsinline height="100%">
+                  <video class="human-video is-centered" poster="" id="{{ video.id }}" autoplay muted loop playsinline height="100%">
                   <source src="{{ video.src }}"
                           type="{{ video.type }}">
                   </video>   
@@ -334,7 +432,7 @@ <h4 class="subtitle is-3">Method - Action Synthesis of ORION Policy</h4>
         {% endfor %}
       </div>
     </div>
-    <p class="content has-text-justified"> Typical failure modes of ORION policies are due to missed grasp. Fail to complete the goal due to misalignment during insertion, or failed to place the object on the correct region in the plate.</p>
+    <p class="content has-text-justified"> Typical failure modes of ORION policies are due to missed grasp, fail to complete the goal due to misalignment during insertion, or fail to place the object on the correct region in the plate.</p>
   </div>
 </section>
 

diff --git a/docs/static/.DS_Store b/docs/static/.DS_Store
diff --git a/docs/static/css/index.css b/docs/static/css/index.css
@@ -251,14 +251,14 @@ padding: 0 40px;
 
 .slick-prev:before {
   /* content: "<"; */
-  color: black!important;
+  color: #878787!important;
   font-size: 50px!important;
   left: -40px!important;
 }
 
 .slick-next:before {
   /* content: ">"; */
-  color: black!important;
+  color: #878787!important;
   font-size: 50px!important;
   right: -25px!important;
 }
@@ -328,4 +328,10 @@ padding: 0 40px;
   right: 0;
   text-align: center; /* Center the text horizontally */
 
+}
+
+.sectiont-title {
+  text-align: center;
+  left: 0;
+  right: 0;
 }
diff --git a/docs/static/js/index.js b/docs/static/js/index.js
@@ -206,11 +206,11 @@ $(document).ready(function() {
       adaptiveHeight: true,
       // centerMode: true,
     });
-    $('.robot-1-video-slick').slick({
+    $('.robot-one-video-slick').slick({
       dots: true,
       infinite: true,
       // speed: 300,
-      slidesToShow: 3,
+      slidesToShow: 1,
       slidesToScroll: 1,
       // vertical:true,
       arrows: true,

diff --git a/docs/static/videos/method/overview.mp4 b/docs/static/videos/method/overview.mp4