[website] spiral motion in joint space

docs/index.html

@@ -15,8 +15,7 @@
   <meta property="og:title" content="Autonomous Neural Dynamic Policies (ANDPs) Paper Website" />
   <meta property="og:description" content="Website of the paper " Sensorimotor Learning with Stability Guarantees via
     Autonomous Neural Dynamic Policies"" />
-  <meta property="og:image"
-    content="https://nosalro.github.io/andps_website/static/images/concept_figure_banner.png" />
+  <meta property="og:image" content="https://nosalro.github.io/andps_website/static/images/concept_figure_banner.png" />
 
   <!-- Twitter -->
   <meta property="twitter:card" content="summary_large_image" />
@@ -134,8 +133,7 @@ <h1 class="title is-1 publication-title">Sensorimotor Learning with Stability Gu
 
               <!-- ArXiv abstract Link -->
               <span class="link-block">
-                <a href="#" target="+"
-                  class="external-link button is-normal is-rounded is-dark">
+                <a href="#" target="+" class="external-link button is-normal is-rounded is-dark">
                   <span class="icon">
                     <i class="ai ai-arxiv"></i>
                   </span>
@@ -482,6 +480,73 @@ <h2 class="subtitle has-text-centered">
   </section>
   <!-- End Experiment 3 carousel -->
 
+
+  <section class="hero is-small">
+    <div class="hero-body">
+      <div class="container">
+        <h2 class="title is-3">Supplementary Experiment: Learning a spiral motion in joint space</h2>
+        <p>In order to showcase that ANDPs can work with arbitrary state spaces
+          <sup><a href="#footnote1">1</a></sup>, we learn the spiral motion but this time in joint space (7 degrees of freedom), this means that <strong><i>x</i></strong> ≡ <strong><i>x<sub>c</sub></i></strong> =
+              <span style="display:inline-block; vertical-align:middle;">
+                  <table style="display:inline-table;">
+                      <tr>
+                          <td>θ<sub>0</sub></td>
+                          <td>θ<sub>1</sub></td>
+                          <td>⋯</td>
+                          <td>θ<sub>6</sub></td>
+                      </tr>
+                  </table>
+              </span>
+              and the output is the desired velocity profile <strong>ẋ<sub>c</sub></strong> that the joints should follow.
+          The data collection process of this experiment is similar to the one described above, with the only difference that this time on every timestep we collect the angle of every joint of the robot, as well as their corresponding angular velocities. The results showcase that we are able to learn the task even in the higher dimensional space of the joints.</p>
+
+          <hr>
+          <p id="footnote1"><sup>1</sup> Formally, we should require that the controllable part of the state forms a Euclidean space, which holds for the reduced coordinates system (joint space). The derivations and discussion on this topic are out of the scope of this paper, and will be discussed in future work.</p>
+
+      </div>
+
+    </div>
+
+    <div class="hero-body">
+      <div class="container">
+        <!-- <h2 class="title is-4"></h2> -->
+        <div id="demo-carousel" class="carousel results-carousel">
+
+          <div class="item">
+            <h2 class="subtitle has-text-centered">
+              Franka spiral movement reproductions of the joints with ANDPs model in joint-space.
+            </h2>
+            <img src="static/images/joint_space_res.jpg" alt="andps joint space" height="100%" />
+          </div>
+          <!-- Split the div into a left and a right div for each video -->
+
+          <div style="display: flex; justify-content: center;">
+            <div style="display: flex; flex-direction: column; align-items: center;">
+              <video poster="" id="video2" autoplay controls muted loop style="width: 75%;">
+                <source src="static/videos/spiral_js_demo_fixed.mp4" type="video/mp4">
+              </video>
+              <h2 class="subtitle has-text-centered" style="font-weight: bolder;">
+                Demonstration
+              </h2>
+            </div>
+
+            <div style="display: flex; flex-direction: column; align-items: center;">
+              <video poster="" id="video3" autoplay controls muted loop style="width: 75%;">
+                <source src="static/videos/spiral_js_eval_fixed.mp4" type="video/mp4">
+              </video>
+              <h2 class="subtitle has-text-centered" style="font-weight: bolder;">
+                Evaluation
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </section>
+
+
+
   <!-- Paper poster -->
   <section class="hero is-small is-light">
     <div class="hero-body">
@@ -529,16 +594,13 @@ <h2 class="title is-4">Acknowledgements</h2>
               <table>
                 <tr>
                   <td style="text-align: center;">
-                    <img
-                      src="https://nosalro.github.io/images/logo_elidek.png"
-                      alt="your_image1" style="width:50%">
+                    <img src="https://nosalro.github.io/images/logo_elidek.png" alt="your_image1" style="width:50%">
                   </td>
-                  </tr>
-                  <tr>
+                </tr>
+                <tr>
                   <td style="text-align: center;">
-                    <img
-                      src="https://rpl-as-ucl.github.io/RoboHike/images/logos/UKRI-logo.png"
-                      alt="your_image2" style="width:50%">
+                    <img src="https://rpl-as-ucl.github.io/RoboHike/images/logos/UKRI-logo.png" alt="your_image2"
+                      style="width:50%">
                   </td>
                 </tr>
               </table>
@@ -559,14 +621,11 @@ <h2 class="title is-4">Acknowledgements</h2>
                     alt="your_image1" style="width:25%">
                 </div>
                 <div class="column">
-                  <img
-                    src="https://nosalro.github.io/images/logo_cilab.jpg"
-                    alt="your_image2" style="width:25%">
+                  <img src="https://nosalro.github.io/images/logo_cilab.jpg" alt="your_image2" style="width:25%">
                 </div>
                 <div class="column">
-                  <img
-                    src="https://rpl-as-ucl.github.io/images/logos/rpl-cs-ucl-logo.png"
-                    alt="your_image3" style="width:25%">
+                  <img src="https://rpl-as-ucl.github.io/images/logos/rpl-cs-ucl-logo.png" alt="your_image3"
+                    style="width:25%">
                 </div>
               </div>
             </div>
@@ -604,4 +663,4 @@ <h2 class="title is-4">Acknowledgements</h2>
 
 </body>
 
-</html>
+</html>