update WM OOD cases

Author: hiskiv

figures/ood_cases/1.mp4

@@ -563,6 +563,52 @@ <h3 class="title is-4 has-text-centered" style="margin-bottom: 20px;">LIBERO-Spa
     </div>
 </section>
 
+<section class="section hero is-small">
+    <div class="hero-body">
+        <div class="container">
+            <h2 class="title is-3 has-text-centered">World Model Generation in OOD Cases</h2>
+            <div class="columns is-centered"><p>Our world model still faithfully follow the action condition inputs even with random action sequence unseen during training.</p></div>
+            <div class="columns is-centered">
+                <div class="column is-four-fifths">
+                    <div>
+                        <div class="item">
+                            <div class="columns is-multiline">
+                            <div class="column is-one-quarter">
+                                <div style="margin-bottom: 10px;">
+                                    <video controls muted loop autoplay preload="metadata" style="width: 100%; display: block;">
+                                        <source src="figures/ood_cases/1.mp4" type="video/mp4">
+                                    </video>
+                                </div>
+                            </div>
+                            <div class="column is-one-quarter">
+                                <div style="margin-bottom: 10px;">
+                                    <video controls muted loop autoplay preload="metadata" style="width: 100%; display: block;">
+                                        <source src="figures/ood_cases/2.mp4" type="video/mp4">
+                                    </video>
+                                </div>
+                            </div>
+                            <div class="column is-one-quarter">
+                                <div style="margin-bottom: 10px;">
+                                    <video controls muted loop autoplay preload="metadata" style="width: 100%; display: block;">
+                                        <source src="figures/ood_cases/3.mp4" type="video/mp4">
+                                    </video>
+                                </div>
+                            </div>
+                            <div class="column is-one-quarter">
+                                <div style="margin-bottom: 10px;">
+                                    <video controls muted loop autoplay preload="metadata" style="width: 100%; display: block;">
+                                        <source src="figures/ood_cases/4.mp4" type="video/mp4">
+                                    </video>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
 
 <section class="section hero is-small">
     <div class="hero-body">

figures/ood_cases/2.mp4

@@ -290,6 +290,43 @@ body {
   font-weight: 500;
 }
 
+.results-carousel_fake {
+  overflow: hidden;
+  padding: 1rem 0;
+}
+
+.results-carousel_fake .item {
+  margin: 1rem;
+  overflow: hidden;
+  padding: 1.5rem;
+  font-size: 0;
+  background: var(--background-primary);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-md);
+  transition: var(--transition);
+  border: 1px solid var(--border-color);
+}
+
+.results-carousel_fake .item:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+
+/* .results-carousel_fake .item img, */
+.results-carousel_fake video {
+  margin: 0;
+  border-radius: var(--border-radius);
+  width: 100%;
+  height: auto;
+}
+
+.results-carousel_fake .subtitle {
+  font-size: 1rem !important;
+  color: var(--text-secondary);
+  margin-top: 1rem;
+  font-weight: 500;
+}
+
 /* Pagination and Misc Improvements */
 .slider-pagination .slider-page {
   background: var(--primary-color);