website

index.html

@@ -281,7 +281,7 @@ <h2 class="subtitle has-text-centered">
     <!-- Overview. -->
     <div class="columns is-centered has-text-centered">
       <div class="column is-four-fifths">
-        <h2 class="title is-3">Visualizations</h2>
+        <h2 class="title is-3">Comparison of Failure vs. OOD Predictions</h2>
 
         <div class="content has-text-justified">
           <p>
@@ -319,6 +319,48 @@ <h2 class="subtitle has-text-centered">
     <!--/ Overview. -->
 
 
+    <!-- Overview. -->
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-four-fifths">
+        <h2 class="title is-3">Importance of Predicting Future Outcomes</h2>
+
+        <div class="content has-text-justified">
+            <p> 
+            <em>It is important to predict <i>future</i> outcomes before the catastrophic errors happen.</em>
+            </p>
+          </p>
+        </div>
+        <div class="item">
+          <!-- Your image here -->
+          <img src="videos/examples/traj1_failure.mp4" alt=""/>
+          <h2 class="subtitle has-text-centered">
+          </h2>
+        </div>
+        <div class="item">
+          <!-- Your image here -->
+          <img src="videos/examples/traj1_ood.mp4" alt=""/>
+          <h2 class="subtitle has-text-centered">
+          </h2>
+        </div>
+        <div class="item">
+          <!-- Your image here -->
+          <img src="videos/examples/traj2_failure.mp4" alt=""/>
+          <h2 class="subtitle has-text-centered">
+          </h2>
+        </div>
+        <div class="item">
+          <!-- Your image here -->
+          <img src="videos/examples/traj2_ood.mp4" alt=""/>
+          <h2 class="subtitle has-text-centered">
+          </h2>
+        </div>
+        <br>
+        <br>
+      </div>
+    </div>
+    <!--/ Overview. -->
+
+
   </div>
 </section>