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.
221.7k
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">2<html xmlns="">3 <head>4 <style>5 div.easyrecipe{position:relative;clear:both}.easyrecipe div,.easyrecipe li,.easyrecipe ol,.easyrecipe p,.easyrecipe span,.easyrecipe ul{padding:0;margin:0;line-height:inherit}.easyrecipe .ERSIngredients .ERSIngredientsHeader,.easyrecipe .ERSInstructions .ERSInstructionsHeader,.easyrecipe .nutrition .ERSNutritionHeader,.easyrecipe div .ERSNotesHeader{font-size:1.4em;font-weight:700;clear:both;margin-top:1em;margin-bottom:1em}#content .easyrecipe .ERSIngredients li.ingredient,.easyrecipe .ERSIngredients li.ingredient{list-style:disc inside;margin-left:10px;line-height:inherit;background:0 0;padding:0}.easyrecipe .ERSIngredients li.ERSIngredientImage{list-style-type:none;margin-left:10px}.easyrecipe .ERSInstructions li.instruction{list-style:decimal;margin-left:30px;line-height:inherit;background:0 0;padding:0}.easyrecipe .ERSInstructions li.ERSInstructionImage{list-style-type:none;margin-left:30px}.easyrecipe .ERSIngredients,.easyrecipe .ERSInstructions,.easyrecipe .ERSNotesDiv{margin-bottom:10px}.easyrecipe .ERSIngredients .ERSSectionHead,.easyrecipe .ERSInstructions .ERSSectionHead{margin-top:3px;margin-bottom:3px;font-weight:700}.entry .easyrecipe .ERSIngredients ul li::before{content:normal}.easyrecipe .ERSLinkback a,.easyrecipe .ERSLinkback span{font:9px "Trebuchet MS",Arial,Helvetica,sans-serif;position:relative;margin-bottom:6px;margin-top:15px;font-weight:400}.easyrecipe .ERSLinkback .ERSWRPLink{color:inherit!important;text-decoration:none!important}.easyrecipe .ERSWRPLink .ERSAttribution{text-decoration:underline!important}.easyrecipe .ERSClear{clear:both;line-height:0;height:0}.easyrecipe .ERSClearLeft{clear:left;line-height:0;height:0}.easyrecipe .ERSFloatLeft{float:left}div.easyrecipe div.ERSSavePrint .ERSPrintBtnSpan .ERSPrintBtn,div.easyrecipe div.ERSSavePrint .ERSSaveBtnSpan .ERSSaveBtn{border:none;color:#fff;background:#666;font-size:11px}div.easyrecipe a.ERSPrintBtn span,div.easyrecipe a.ERSSaveBtn span{color:#fff}div.easyrecipe div.ERSSavePrint .ERSSaveBtnSpan .ziplist-button.ERSSaveBtn,div.easyrecipe div.ERSSavePrint .ERSSaveBtnSpan .ziplist-link.ERSSaveBtn{background-color:#007ec8}div.easyrecipe div.ERSSavePrint span.ERSPrintBtnSpan a.ERSPrintBtn span.ERSPrintIcon{background-image:url(images/printicon.png);width:16px;height:16px}.foodie div.easyrecipe div.ERSSavePrint span.ERSSaveBtnSpan a.bigoven span.ERSSaveIcon{background-image:url(../../../themes/foodie/images/save.png);margin-left:10px}.foodie-pro div.easyrecipe div.ERSSavePrint span.ERSSaveBtnSpan a.bigoven span.ERSSaveIcon{background-image:url(../../../themes/foodiepro/images/save.png);margin-left:10px}div.easyrecipe div.ERSSavePrint span.ERSSaveBtnSpan a.ziplist-button span.ERSSaveIcon,div.easyrecipe div.ERSSavePrint span.ERSSaveBtnSpan a.ziplist-link span.ERSSaveIcon{background-image:url(images/saveicon.png);width:16px;height:16px}div.easyrecipe div.ERSSavePrint span.ERSSaveBtnSpan span.ERSSaveIcon{background-image:url(images/bigovenicon.png);width:20px;height:18px}.easyrecipe .ERSRatings{float:right;width:95px}.ERSRatingOuter{background:url(images/greystar15.png) repeat-x;width:95px;height:15px;font:10px "Trebuchet MS",Arial,Helvetica,sans-serif;text-align:center;margin-right:5px;margin-left:5px}.ERSRatingInner{background:url(images/yellowstar15.png) repeat-x;width:50%;height:15px}.ERComment{margin-bottom:10px!important;margin-top:10px}.ERComment .ERRateBG{width:95px;height:15px;cursor:pointer;float:left;background:url(images/greystar15.png) repeat-x}.ERComment .ERRateStars{width:95px;height:15px;cursor:pointer;background:url(images/yellowstar15.png) repeat-x}span.ERComment,span.ERComment span{display:block}.ERRatingComment{background:url(images/greystar15.png) repeat-x;width:95px;height:15px;margin-right:20px}.ERRatingCommentInner{background:url(images/yellowstar15.png) repeat-x;width:50%;height:15px}.easyrecipeWrapper .easyrecipeAbove,.easyrecipeWrapper .easyrecipeBelow{display:none}.easyrecipe .ERSSaveBtnSpan a.ziplist-button img,.easyrecipe .ERSSaveBtnSpan a.ziplist-link img{position:relative;top:10px;width:auto;height:auto;border:none;padding:0;margin:0;box-shadow:none}body .easyrecipe .ERSTimes p{margin:0!important}6 7 8 9html>body .easyrecipe ul {10 list-style-position: outside;11 list-style-type: circle;12 margin: 10px 0 10px 22px;13 padding: 0;14}15 16body .easyrecipe ul li {17 background: none repeat scroll 0 0 transparent;18 list-style-position: inherit;19 list-style-type: inherit;20 margin: 0;21 padding-bottom: 0;22 padding-top: 0;23}24 25html>body .easyrecipe ol {26 list-style-position: outside;27 list-style-type: decimal;28 margin: 10px 0 10px 30px;29 padding: 0;30}31 32body .easyrecipe ol li {33 list-style-position: inherit;34 list-style-type: inherit;35 margin: 0;36 padding-bottom: 2px;37 padding-top: 2px;38}39 40#divERPContainer {41 font: 12px Arial, Helvetica, sans-serif;42 margin-left: auto;43 margin-right: auto;44 padding: 20px;45 position: relative;46 width: 700px;47}48 49#imgERPPhoto {50 float: right;51 /* [disabled]height: 200px; */52 margin-bottom: 20px;53 top: 14px;54 width: 200px;55}56 57.btnERPrint {58 display: none;59}60 61.easyrecipe {62 background: none repeat scroll 0 0 #FFFFFF;63 border: 1px dashed #000000;64 clear: both;65 margin-top: 0;66 padding: 20px;67}68 69.ERName {70 font-size: 23px;71}72 73.easyrecipe .ERHDTable .ERName .fn {74 background-color: inherit;75 color: inherit;76 font-family: inherit;77 font-size: inherit;78 font-style: inherit;79 font-weight: inherit;80 margin: inherit;81 padding: inherit;82}83 84 85.easyrecipe .ERSummary {86 clear: left;87 padding-top: 4px;88}89 90.ERIngredientsHeader,.ERInstructionsHeader {91 clear: left;92 font-size: 120%;93 font-weight: bold;94 margin-top: 5px;95}96 97#wrap,#footer,#wpadminbar {98 display: none;99}100 101.easyrecipe .ERHDTable {102 width: auto !important;103}104 105.ERPTagline {106 font-size: 80%;107 margin-top: 5px;108 text-align: center;109}110 111.ERPBlogname {112 font-weight: bold;113}114 115.ERClear {116 clear: none;117}118 119#ERFPrint {120 display: none;121}122 123.easyrecipe .ingredients .ERSeparator {124 font-style: italic;125 font-weight: bold;126 list-style: none outside none;127 margin-left: 7px;128 margin-top: 5px;129}130 131.easyrecipe .instructions .ERSeparator {132 font-style: italic;133 font-weight: bold;134 list-style: none outside none;135 margin-left: 14px;136 margin-top: 10px;137}138 139.easyrecipe .ERIngredientsHeader,.easyrecipe .ERInstructionsHeader,.easyrecipe .ERNotesHeader {140 font-size: 120%;141 font-weight: bold;142 margin-top: 5px;143}144 145.easyrecipe .ERHead {146 color: #828080;147 float: left;148 font: 9px "Trebuchet MS", Arial, Helvetica, sans-serif;149 margin-right: 15px;150}151 </style>152 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">153 <meta content="noindex, noarchive" name="robots">154 <title>155 Easy Sesame Noodles156 </title>157 <style type="text/css">158 </style>159 </head>160 <body>161 <div id="divERPContainer">162 <div class="easyrecipe">163 <div id="imgERPPhoto" style="display: #imagedisplay#">164 <img src="rick.jpg" width="200">165 </div>166 <table border="0" class="ERHDTable">167 <tbody>168 <tr>169 <td>170 <span class="item ERName">171 Easy Sesame Noodles172 </span>173 </td>174 </tr>175 </tbody>176 </table>177 <div class="ERClear">178 </div>179 <div class="ERHead">180 Author: Nikki181 </div>182 <div class="ERSummary">183 These Easy Sesame Noodles are a wonderful side dish. For such a simple side dish, they have a lot of delicious flavor packed in and are sure to be a hit at the dinner table!184 </div>185 <div class="ERIngredients ingredients">186 <div class="ERIngredientsHeader ERSHeading">187 Ingredients188 </div>189 <ul class="ingredients">190 <li class="ingredient" itemprop="ingredients">191 12 ounce stir fry noodles, cooked and drained192 </li>193 <li class="ingredient" itemprop="ingredients">194 ¼ cup Soy Sauce, I prefer reduced sodium195 </li>196 <li class="ingredient" itemprop="ingredients">197 2½ Tablespoons sugar198 </li>199 <li class="ingredient" itemprop="ingredients">200 2 Tablespoons Rice Vinegar201 </li>202 </ul>203 </div>204 <div class="ERInstructions">205 <div class="ERInstructionsHeader">206 Instructions207 </div>208 <div class="instructions">209 <ol class="instructions">210 <li class="instruction" itemprop="recipeInstructions">211 In a small mixing bowl, combine Soy Sauce, sugar, vinegar, sesame oil, Hot Chili Oil and vegetable oil. Whisk until will combined.212 </li>213 <li class="instruction" itemprop="recipeInstructions">214 Pour over noodles and top with green onions and toasted sesame seeds.215 </li>216 </ol>217 </div>218 </div>219 <div class="nutrition">220 </div>221 <div>222 <div class="ERNotesHeader">223 Notes224 </div>225 <div class="ERNotes">226 Adapted from227 <a>228 Pioneer Woman229 </a>230 </div>231 </div>232 <div class="ERPTagline">233 Recipe by234 <span class="ERPBlogname">235 Chef in Training236 </span>237 at https://www.chef-in-training.com/easy-sesame-noodles/238 </div>239 <div class="endeasyrecipe" style="display: none">240 3.4.3177241 </div>242 </div>243 </div>244 </body>245</html>246