Update website

index.html

@@ -90,29 +90,41 @@ <h2>Introducing MyVLM</h2>
 						</div>
 					</section>
 
+					<section>
+						<div class="content" style="width: 100%; text-decoration: none !important; display: block;">
+							<h2 style="color: #d4d4d4">Background</h2>
+							<p style="color: #d4d4d4; text-align: left; text-decoration: none; display: block;">
+								LLMs offer users intuitive interfaces for interacting with textual information. The integration of vision into LLMs through VLMs has enabled these models to "see" and reason over visual content. However, these VLMs possess generic knowledge, lacking a personal touch. With MyVLM we equip these models with the ability to comprehend user-specific concepts, tailoring the model specifically to you. MyVLM allows users to obtain personalized responses where outputs are no longer generic, but focus on communicating information about the target subject to the user.
+							</p>
+							<a class="image-overlay-container">
+								<img style="display: block; line-height: 0; text-decoration: none !important;" src="assets/images/background.png"/>
+							</a>
+						</div>
+					</section>
+
 					<section>
 						<div class="image image-overlay-container">
 							<a class="image"><img src="assets/images/image_1.jpg" alt="" data-position="50% 60%" /></a>
 							<div class="overlay">
 								<div class="text" style="margin: 2%;">"<span style="color:rgb(253, 216, 31)">&lt;you&gt;</span>, wearing sunglasses and a yellow strap, standing on a bustling street in a colorful city."</div>
 							</div>
 						</div>	
-						<div class="content">
+						<div class="content" style="background-color: #FFF176">
 							<div class="inner fade-up">
-								<h2 style="color: #d4d4d4">The Vision Language Models</h2>
-								<p style="color: #d4d4d4;">We apply MyVLM to various VLM architectures for personalized captioning, visual question-answering, and referring expression comprehension.</p>
+								<h2>The Vision Language Models</h2>
+								<p>We apply MyVLM to various VLM architectures for personalized captioning, visual question-answering, and referring expression comprehension.</p>
 								<div class="fade-up" style="text-align: center; width: 100%;">
 									<div style="display: inline-block; width: 30%;">
 										<a><img style="display: block; width: 100%; text-decoration: none;" src="assets/images/blip-icon.png" alt="" data-position="center center"/></a>
-										<p style="font-size: 20px; color: #d4d4d4; margin-top: 5%; margin-bottom: 5%;">BLIP-2</p>
+										<p style="font-size: 20px; margin-top: 5%; margin-bottom: 5%;">BLIP-2</p>
 									</div>
 									<div style="display: inline-block; width: 30%;">
 										<a><img style="display: block; width: 100%; text-decoration: none;" src="assets/images/volcano_icon.png" alt="" data-position="center center" /></a>
-										<p style="font-size: 20px; color: #d4d4d4; margin-top: 5%; margin-bottom: 5%;">LLaVA 1.6</p>
+										<p style="font-size: 20px; margin-top: 5%; margin-bottom: 5%;">LLaVA 1.6</p>
 									</div>
 									<div style="display: inline-block; width: 30%;">
 										<a><img style="display: block; width: 100%; text-decoration: none;" src="assets/images/robot_head_icon.png" alt="" data-position="center center" /></a>
-										<p style="font-size: 20px; color: #d4d4d4; margin-top: 5%; margin-bottom: 5%;">MiniGPT-v2</p>
+										<p style="font-size: 20pxs; margin-top: 5%; margin-bottom: 5%;">MiniGPT-v2</p>
 									</div>
 								</div>								
 							</div>