add demo

Author: zhangchen-xu

examples.html

@@ -244,7 +244,9 @@ <h1 style="color: #183385; font-size:x-large;line-height:1.2" class="text-center
 										href="index.html">Home</a></li>
 									<li style="background-color: #276be0;"><a
 										style="color:white; font-weight: 600; font-size: 18px"
-										href="index.html">Magpie Exampels</a></li>
+										href="examples.html">Magpie Exampels</a></li>
+									<li><a style="color:white; font-weight: 600; font-size: 18px;" href="https://magpie-align-readme.static.hf.space/README.md#dataset-navigation-%F0%9F%A7%AD">Dataset Navigation</a></li> 
+									<li><a style="color:white; font-weight: 600; font-size: 18px;" href="https://huggingface.co/spaces/flydust/Chat-with-Magpie">Chat with Magpie</a></li> 
 									<!-- <li><a style="color:white; font-weight: 600; font-size: 18px" href="#misc">Misc.</a></li> -->
 									<!-- <li ><a href="#blog">Blogs</a></li>  -->
 									<!-- <li><a href="#contact">Contact</a></li> -->

index.html

@@ -208,14 +208,22 @@ <h1 style="color: #183385; font-size:x-large;line-height:1.2" class="text-center
 						<a target="_blank" href="https://github.com/magpie-align/magpie">
 							<img src="https://img.shields.io/badge/-Github-purple?style=for-the-badge&logo=github" style="height:35px;">
 						</a>
-						
-						<a target="_blank" href="https://huggingface.co/Magpie-Align">
-							<img src="https://img.shields.io/badge/-🤗_HUGGINGFACE-green?style=for-the-badge" style="height:35px;">
-						</a>
 
 						<a target="_blank" href="https://arxiv.org/abs/2406.08464">
 							<img src="https://img.shields.io/badge/-Paper-red?style=for-the-badge&logo=arxiv" style="height:35px;">
 						</a>
+
+						<a target="_blank" href="https://huggingface.co/Magpie-Align">
+							<img src="https://img.shields.io/badge/-🤗_Dataset-green?style=for-the-badge" style="height:35px;">
+						</a>
+						
+						<a target="_blank" href="https://huggingface.co/spaces/davanstrien/magpie">
+							<img src="https://img.shields.io/badge/-🤗_Demo-blue?style=for-the-badge" style="height:35px;">
+						</a>
+
+						<a target="_blank" href="https://huggingface.co/spaces/flydust/Chat-with-Magpie">
+							<img src="https://img.shields.io/badge/-🤗_Chat Model-orange?style=for-the-badge" style="height:35px;">
+						</a>
 				  </p>
 			  </div>
 
@@ -244,6 +252,8 @@ <h1 style="color: #183385; font-size:x-large;line-height:1.2" class="text-center
 											style="color:white; font-weight: 600; font-size: 18px"
 											href="index.html">Home</a></li>
 									<li><a style="color:white; font-weight: 600; font-size: 18px;" href="examples.html">Magpie Examples</a></li> 
+									<li><a style="color:white; font-weight: 600; font-size: 18px;" href="https://magpie-align-readme.static.hf.space/README.md#dataset-navigation-%F0%9F%A7%AD">Dataset Navigation</a></li> 
+									<li><a style="color:white; font-weight: 600; font-size: 18px;" href="https://huggingface.co/spaces/flydust/Chat-with-Magpie">Chat with Magpie</a></li> 
 									<!-- <li><a style="color:white; font-weight: 600; font-size: 18px" href="#misc">Misc.</a></li> -->
 									<!-- <li ><a href="#blog">Blogs</a></li>  -->
 									<!-- <li><a href="#contact">Contact</a></li> -->