update html

index.html

@@ -201,6 +201,51 @@ <h2 class="title is-3">Abstract</h2>
 </div>
 </section>
 
+<!-- VSIL Problem -->
+<section class="hero is-light is-small">
+  <div class="hero-body has-text-centered">
+  <h1 class="title is-1 mmmu">
+    <span class="mmmu" style="vertical-align: middle">The Problem of VSIL</span>
+  </h1>
+  </div>
+</section>
+
+<section class="section">
+  <!-- <div class="container">
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-four-fifths">
+        <h2 class="title is-3">Problem</h2>
+        <div class="content has-text-justified">
+            <img src="static/images/pipeline.png" alt="pipeline" width="95%"/>
+            <p>
+               
+            </p>
+        </div>
+    </div>
+  </div> -->
+
+
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-four-fifths">
+        <h2 class="title is-3">Shortcut Alignment </h2>
+        <div class="content has-text-justified">
+            <img src="static/images/alignment_table.png" alt="dataset_statistics" width="95%"/>
+          <p>
+            The VSIL problem leads the shortcut alignment methods: textual alignment to the multimodal safety challenge.
+          </p>
+
+          <br>
+        </div>
+    </div>
+    </div>
+
+
+
+  </div>
+</section>
+
+
+
 <!-- DATASET SECTION -->
 <section class="hero is-light is-small">
   <div class="hero-body has-text-centered">
@@ -305,6 +350,19 @@ <h2 class="title is-3" id="leaderboard">Benchmark Results</h2>
             </p>
         </div>
       </div>
+
+      <div class="column is-full has-text-centered content">
+        <h2 class="title is-3" id="leaderboard">Results</h2>
+        <div class="content">
+          <div class="content has-text-justified">
+          </div>
+
+        <img src="static/images/results_figure.png" alt="pipeline" width="95%"/>
+        <p> 
+            The above two figures highlight our VLSBench's several features: (1) the <strong>challenging nature</strong>  of our dataset; (2) highlight the importance of <strong>multimodal alignment</strong> methods rather than textual shortcut alignment.
+        </div>
+      </div>
+
     </div> 
 
 
@@ -331,6 +389,8 @@ <h2 class="title is-3" id="examples">More Examples</h2>
         </div>
       </div>
     </div>
+
+
   </div>
 </section>