Update index.html

index.html

@@ -129,13 +129,26 @@ <h3 style="text-align: center;">Overview</h3>
 
 	<br>
 
-	<i class="fa-brands fa-youtube fa-bounce"></i><h3 style="text-align: center;">Demo Video</h3>
+	<h3 style="text-align: center;">Demo Video</h3>
 	<div style="text-align: center;">
 		<iframe width="672" height="378" src="https://www.youtube.com/embed/Dx5BQmgK4n8?si=FN9pLyQBN--vJBZA" frameborder="0" allowfullscreen></iframe>
 	</div>
 
 	<br>
 
+	<h3 style="text-align: center;">Comparison Case</h3>
+	<div style="color:orange; border-bottom: 1px solid #d9d9d9;
+    display: inline-block;
+    color: #999;
+    padding: 2px;"> Question and answer about a clip from YouTube, which is a tutorial on how to cook steak. The entire instructional process begins with marinating the steak, followed by pan-searing it, preparing side dishes, and ultimately plating the meal. Green ( Red ) highlights the correct (wrong) answer and yellow indicates that the model is hallucinating.
+	</div>
+
+	<p align="center" width="100%">
+	<a target="_blank"><img src="assets/compare_case.png"  style="width: 80%; min-width: 200px; display: block; margin: auto;"></a>
+	</p>
+
+	<br>
+
 	<h3 style="text-align: center;">Breakpoint Mode</h3>
 	<br>
     <div class="container">
@@ -257,7 +270,7 @@ <h3 style="text-align: center;">Breakpoint Mode</h3>
         </table>
 
 
-	<i class="fa-solid fa-film fa-fade"></i><h3 style="text-align: center;"> Global Mode</h3>
+	<h3 style="text-align: center;"> Global Mode</h3>
 	<br>
 	<div class="container" style="min-height: 224px">
 		<div id="resultCarousel1" class="carousel slide" data-ride="carousel" data-interval="5000">