add video

index.html

@@ -25,7 +25,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
 
-    <title>COSMO</title>
+    <title>OmniParser</title>
     <!-- <link rel="icon" type="image/x-icon" href="static/images/mammoth_icon.png"> -->
     <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet">
 
@@ -188,28 +188,28 @@ <h2 class="subtitle">
     <!-- End image carousel -->
 
 
-    <!-- Image carousel -->
-    <section class="hero">
+    <section class="hero is-small">
         <div class="hero-body">
-            <div class="container is-max-desktop">
-                <div class="columns is-centered">
-                    <!-- <div class="column is-four-fifths"> -->
+            <div class="container  is-max-desktop">
+                <div class="columns is-centered has-text-centered">
+                    <div class="column is-four-fifths">
+                        <h2 class="title is-3">Curated Dataset for Interactable Region Detection and Icon Functionality Description</h2>
+                        <br>
+                        <b>Key Takeaways:</b> The addition of one or more contexts results in a performance gain over the no-context baseline in the vast majority of cases. Furthermore, the use of multiple contexts results in a performance boost in a majority of cases.
                         <div class="item">
-                            <!-- Your image here -->
-                            <img src="static/images/curated_data.png" alt="Result mobile" />
-                            <h2 class="subtitle">
-                                Examples from the Interactable Region Detection dataset. The bounding boxes are based on the interactable region extracted from the DOM tree of the webpage.  
-                            </h2>
+                            <img src="static/images/curated_data.png" alt="Species Classification results on iWildCam2020-WILDS (OOD) dataset" />
+                            <p>
+                                <b>Examples from the Interactable Region Detection dataset. </b>. TThe bounding boxes are based on the interactable region extracted from the DOM tree of the webpage. 
+                            </p>
                         </div>
-                    <!-- </div> -->
+                    </div>
                 </div>
             </div>
         </div>
     </section>
-    <!-- End image carousel -->
 
 
-    <section class="hero is-small">
+    <section class="hero is-small"></section>
         <div class="hero-body">
             <div class="container  is-max-desktop">
                 <div class="columns is-centered has-text-centered">
@@ -228,8 +228,28 @@ <h2 class="title is-3">Curated Dataset for Interactable Region Detection and Ico
             </div>
         </div>
     </section>
-
     <br>
+
+    <section class="hero is-light is-small">
+        <div class="hero-body">
+          <div class="container">
+            <div id="results-carousel" class="carousel results-carousel">
+              <div class="item item-steve">
+                <video poster="" id="steve" autoplay controls muted loop playsinline height="100%">
+                  <source src="./static/videos/web_5_demo_nocap.mp4"
+                          type="video/mp4">
+                </video>
+              </div>
+              <div class="item item-chair-tp">
+                <video poster="" id="chair-tp" autoplay controls muted loop playsinline height="100%">
+                  <source src="./static/videos/web_22_demo_nocap.mp4"
+                          type="video/mp4">
+                </video>
+              </div>
+            </div>
+          </div>
+        </div>
+    </section>