Datasetpublic

SALT-NLP/Design2Code

This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.

sourceHugging Faceodc-byupdated 3y agoView on Hugging Face

22likes1.7kdownloads

root13312.html

13312.html213 linesDownload Raw Back to root

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">2<html xmlns="">3 <!-- InstanceBegin template="/Templates/djportfolio.dwt" codeOutsideHTMLIsLocked="false" -->4 <head>5  <style>6   body {7	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;8	width: 760px;9	margin: 0px auto;10}11 12p {13	margin: 0px;14}15 16a {17	color: #019982;18	font-weight: bold;19}20 21a:hover {22	color: #FF3366;23}24 25h1 {26	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;27	font-size: x-large;28	text-align: center;29	border-bottom: 3px double #019982;30	margin: 0px;31}32 33h3 {34	font-size: large;35	text-align: left;36	border-bottom: 1px solid #019982;37	margin: 0px;38}39 40h4 {41	margin: 0px;42	color: #019982;	43	text-align: center;44	font-weight: bold;45}46 47img {48	vertical-align: bottom;49}50 51td {52	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;53}54 55th {56	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;57}58 59ul {60	margin: 0px 0px 0px 35px;61	padding: 0px;62	list-style-type: square;63}64 65embed {66	border: 1px solid black;67}68 69dl {70	text-align: justify;71	margin-bottom: 0px;72}73 74dt {75	font-weight: bold;76}77 78 79 80.home {81	background-image: url(../images/layout/front_page.jpg);82	margin-top: 25px;83	width: 760px;84	height: 480px;85}86.home_content {87	padding-top: 150px;88	margin-left: 400px;89}90.home_content p {91	text-align: right;92	margin-top: 4px;93	padding-bottom: 4px;94	border-bottom: 1px dotted black;95}96 97.image_table {98	font-size: 0px; /* Hack to hide white space from line breaks; makes formating easier for the image table. */99	margin: auto;100	width: 600px;101}102.image_table img {103	border: 2px solid #019982;104	border-radius: 3px;105	margin: 5px;106}107.image_table img:hover {108	border: 2px solid red;109}110.image_border {111	border: 3px double black;112	margin: auto;113}114 115.main {116	background-color: #DDDDDD;117	border-radius: 15px;118	display: block;119	padding: 15px;120	width: 730px;121}122  </style>123  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">124  <!-- InstanceBeginEditable name="doctitle" -->125  <title>126   Dale Johnson: Portfolio127  </title>128  <!-- InstanceEndEditable -->129  <!-- InstanceBeginEditable name="head" -->130  <!-- InstanceEndEditable -->131 </head>132 <body>133  <p>134   &nbsp;135  </p>136  <table border="0" cellpadding="0" cellspacing="0" width="760">137   <tbody>138    <tr>139     <td valign="middle">140      <a>141       <img alt="Dale Johnson: Animator" border="0" height="51" src="rick.jpg" width="250">142      </a>143     </td>144     <td align="right" valign="middle">145      <a>146       Gallery147      </a>148      &bull;149      <a>150       Commissions151      </a>152      &bull;153      <a>154       R&eacute;sum&eacute;155      </a>156      &bull;157      <a>158       Contact159      </a>160     </td>161    </tr>162   </tbody>163  </table>164  <div class="main">165   <!-- InstanceBeginEditable name="Main Content" -->166   <h1>167    Gallery168   </h1>169   <p>170    &nbsp;171   </p>172   <div align="center">173    <img alt="Artwork" class="image_border" height="436" src="rick.jpg" width="700">174   </div>175   <p>176    &nbsp;177   </p>178   <h4>179    "Junction" Screenshot180   </h4>181   <p>182    &nbsp;183   </p>184   <p align="justify">185    A screenshot of the dialog interface in186    <cite>187     Junction188    </cite>189    . As an adventure game, the majority of the gameplay revolves around investigating the environment, finding items, and questing other characters in order to progress.190   </p>191   <p align="justify">192    &nbsp;193   </p>194   <p align="justify">195    Programmed in C#. Artwork and interface created in Photoshop.196   </p>197   <p>198    &nbsp;199   </p>200   <p align="center">201    <a>202     Back203    </a>204   </p>205   <!-- InstanceEndEditable -->206  </div>207  <p>208   &nbsp;209  </p>210 </body>211 <!-- InstanceEnd -->212</html>213