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.8k
1<!DOCTYPE html>2<html lang="en-gb">3 <head>4 <style>5 html{background:url("bg4.jpg") no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}6ul{list-style-image:url("dot2.gif")}7ul ul{list-style-image:url("dot2.gif")}8ul ul ul{list-style-image:url("dot2.gif")}9a:link{color:#399}10a:active{color:#36c}11a:visited{color:#999}12table{table-border-color-light:#666;table-border-color-dark:#666}13th{border-color:#666}14td{border:0 solid #c0c0c0}15h1{color:#000}16h2{color:#000}17h3{color:#000}18h4{color:#000}19h5{color:#000}20h6{color:#000}21hr{color:#4e416d}22body{font-weight:normal;font-size:10pt;font-style:normal;font-family:Verdana;text-align:none;vertical-align:none}23h1{font-weight:bold;font-size:16pt;vertical-align:baseline;font-family:Verdana;text-align:center}24h2{font-weight:bold;font-size:12pt;text-align:center;font-family:Verdana;vertical-align:none;font-style:normal}25h3{font-weight:bold;font-size:12pt;text-align:center;font-family:Verdana;vertical-align:none;font-style:normal}26h4{font-weight:normal;font-family:Verdana;font-style:normal;text-align:none;vertical-align:none}27h5{font-weight:normal;font-family:Verdana;vertical-align:none;font-style:normal;text-align:none}28h6{vertical-align:none;font-weight:normal;text-align:none;font-family:Verdana;font-style:normal}29P{font-weight:normal;font-size:10pt;font-family:Verdana}30hr{color:#4e416d;height:2px}31il{list-style-image:url("bull2_breeze.gif")}32table{border-width:0;vertical-align:none;font-weight:normal;font-style:normal;font-family:Verdana;text-align:none}33.e800{max-width:800px;margin:auto;padding:10px}34.e750{max-width:750px;margin:auto;padding:10px}35.e700{max-width:700px;margin:auto;padding:10px}36.e600{max-width:600px;margin:auto;padding:10px}37.e500{max-width:500px;margin:auto;padding:10px}38.e400{max-width:400px;margin:auto;padding:10px}39.main_container{width:1024px;margin:auto}40header{background:#fff}41#table12 img{display:block;margin:auto}42@media all and (max-width:1040px){img,table,video,audio,iframe{max-width:100%}43#table,#table1,#table2,#table3,#table4,#table5,#table6,#table7,#table8,#table9,#table10,#table14,#table18,#table23,#table12,img{width:inherit!important;height:inherit!important}44table[width="1024"],table[width="1024"] td[width="1024"]{max-width:100%;width:98%}45table[width="1024"] td[width="1024"]{width:100%}46.menu_area{background-position:center top;background-size:100%;background-repeat:no-repeat}47table[width="900"],table[width="800"],table[width="700"]{width:96%;margin:auto}48table#table15{width:98%;margin:auto}49table tr:after,table:after{display:block;clear:both;content:''}50}@media all and (max-width:820px){.menu_area{height:180px}51table#table9 tr,table#table9 tr td,table#table9 tr,table#table23 tr,table#table23 tr td,table#table23 tr,table#table10 tr,table#table10 tr td,table#table10 tr,table#table14 tr,table#table14 tr td,table#table14 tr,table#table13 tr,table#table13 tr td,table#table13 tr,table#table8 tr,table#table8 tr td,table#table8 tr,table#table7 tr,table#table7 tr td,table#table12,table#table12 tr,table#table12 tr td,table.auto-style13 tr,table.auto-style13 tr,table.auto-style13 tr td,table.auto-style8 tr,table.auto-style8 tr,table.auto-style8 tr td,table.auto-style1 tr,table.auto-style1 tr,table.auto-style1 tr th,table.auto-style1 tr td,table#table17 tr,table#table17 tr th,table#table17 tr td,table#table18 tr,table[width="536"] tr,table[width="536"] tr th,table[width="536"] tr td,table#table18 tr,table#table18 tr th,table#table18 tr td{display:block;width:inherit!important;height:inherit!important;max-width:100%}52table[width="800"]{width:92%;margin:auto}53table[width="536"]{background-color:#069;display:block;height:inherit;width:100%}54table[width="536"] td[height="24"]{height:0;background-color:#069}55table.auto-style13 tr td{padding-bottom:5px}56table#table13 td[width="250"]{width:50%!important;float:left}57table#table8 td[width="224"],table#table8 td[width="225"]{width:50%!important;float:left}58table#table8 td[height="159"]{height:240px!important}59table#table12 td[width="224"],table#table12 td[width="223"]{width:calc(24% - 10px)!important;float:left;padding:10px 5px}60table[width="900"] td[width="450"]{width:calc(49% - 10px)!important;padding:10px 5px}61table[width="800"] td[width="400"],table[width="700"] td[width="349"]{width:calc(49% - 10px)!important;padding:10px 5px}62#table15 td[width="36%"]{width:40%!important}63table[height="85"]{height:inherit!important}64table#table6 td{padding:10px 0}65table#table6 td,table#table6 img{height:inherit!important}66font[size="4"]{font-size:15px}67table#table5{background:#fff}68table#table5 td{height:inherit!important}69table#table5 tr,table#table5 tr td{display:block;width:inherit!important;height:inherit!important;max-width:100%}70table#table5 tbody tr:first-child{background:#69c}71table#table5 tbody tr:nth-child(2){background:#fff}72table#table5 tbody tr:last-child{background:#333}73table#table5 tbody tr:last-child td:last-child p{margin:0}74table#table5 tbody tr:last-child td:first-child{padding-top:5px}75img[src="index/fb.gif"]{padding:5px}76table#table5 p[align=left]{text-align:center}77.hide_mobile{display:none!important}78#table15{text-align:center}79#table15 td{display:inline-block}80table#table8 td{vertical-align:bottom!important}81.responsive_table{width:98%;overflow:scroll;margin:auto}82.auto-style17 font[size="2"]{font-size:12px!important}83#table12 tbody{width:100%;display:block}84}@media all and (max-width:720px){#table15 td[width="36%"]{width:90%!important}85table#table5 tr,table#table5 tr td,table#table4 tr{display:block;width:inherit!important;height:inherit!important}86table#table12 td[width="224"],table#table12 td[width="223"]{width:calc(23% - 10px)!important;float:left;padding:10px 5px}87table#table12 td[width="224"],table#table12 td[width="223"]{width:calc(100% - 10px)!important;float:none;padding:10px 5px}88table#table19 td,table#table2 td{width:calc(99% - 10px)!important;float:none;text-align:center;display:block;padding:10px 5px;padding-top:15px;height:inherit!important}89.menu_area{height:160px!important}90table[width="700"] td[width="349"]{width:calc(99% - 10px)!important;display:block}91}@media all and (max-width:600px){table[width="700"] td[width="53%"],table[width="700"] td[width="46%"]{width:100%;display:block}92.menu_area{height:140px!important;background-size:auto 120px!important}93table#table13 td[width="250"],table#table8 td[width="250"]{width:100%!important;float:left}94table[width="800"] td[width="400"]{width:calc(99% - 10px)!important;padding:10px 5px;display:block;text-align:center}95table[width="900"] td[width="450"]{width:calc(99% - 10px)!important;padding:10px 5px;display:block}96table#table8 td[width="224"],table#table8 td[width="225"]{width:100%!important;float:left}97}98 </style>99 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">100 <meta content="width=device-width, initial-scale=1.0" name="viewport">101 <title>102 Highlead GC20698-1L40 super long arm walking foot sewing machine103 </title>104 <meta content='sewing information on Highlead GC20698-1L40 extra long arm sewing machine with walking foot 40" clearance' name="description">105 <style type="text/css">106 </style>107 </head>108 <body>109 <div style="max-width: 1024px; margin-left: auto; margin-right: auto; text-align: center">110 <div style="font-size: 10.5pt; padding-top: 10px; padding-bottom: 10px; max-width: 1024px; background-color: #1C1D45;">111 <strong>112 <span style="color: #FFFFFF; font-size: 12pt;">113 <a style="text-decoration: none">114 <span style="color: #FFFFFF">115 [PHONE REDACTED]116 </span>117 </a>118 119 <a style="text-decoration: none">120 <span style="color: #FFFFFF">121 [PHONE REDACTED]122 </span>123 </a>124 </span>125 </strong>126 </div>127 <a title="Braithwaite Sewing Machines">128 <img alt="Sewing Machines at Braithwaite UK" height="133" src="rick.jpg" style="vertical-align: bottom" width="1024">129 </a>130 <div style="font-size: 10.5pt; padding-top: 15px; padding-bottom: 15px; padding-left: 8px; padding-right: 8px; max-width : 1024px; background-color: #1C1D45;">131 <strong>132 <a style="text-decoration: none" title="Braithwaite Index Page">133 <span style="color: #FFFFFF">134 INDEX135 </span>136 </a>137 138 <a style="text-decoration: none" title="New and Used Sewing Machines">139 <span style="color: #FFFFFF">140 SEWING141 </span>142 </a>143 144 <a style="text-decoration: none" title="Cloth Cutting Machines">145 <span style="color: #FFFFFF">146 CUTTING147 </span>148 </a>149 150 <a style="text-decoration: none" title="Industrial Steam Irons">151 <span style="color: #FFFFFF">152 PRESSING153 </span>154 </a>155 156 <a style="text-decoration: none" title="Fusing Presses">157 <span style="color: #FFFFFF">158 FUSING159 </span>160 </a>161 162 <a style="text-decoration: none" title="Used Sewing Machines">163 <span style="color: #FFFFFF">164 USED165 </span>166 </a>167 168 <a style="text-decoration: none" title="News from Braithwaite Sewing Machines">169 <span style="color: #FFFFFF">170 JOBS171 </span>172 </a>173 174 <a style="text-decoration: none" title="About Braithwaite Sewing Machines">175 <span style="color: #FFFFFF">176 ABOUT177 </span>178 </a>179 </strong>180 </div>181 <div style="background-color: #FFFFFF; max-width: 1024px; padding-top: 10px; padding-bottom: 10px; padding-left: 5px; padding-right: 5px;">182 <center>183 Highlead Long Arm Industrial Sewing Machines184 <br>185 <br>186 </center>187 <center>188 <a>189 <img alt="Highlead Sewing Machines" border="0" height="86" longdesc="highlead.html" src="rick.jpg" width="247">190 </a>191 <div align="center">192 <center>193 <center>194 </center>195 <table border="0" cellpadding="3" id="table12" style="max-width: 800px">196 <tbody>197 <tr>198 <td colspan="2" height="85">199 <h1>200 Highlead GC20698-1L40201 </h1>202 <h2>203 Extra Long Arm Sewing Machine204 </h2>205 <p align="center">206 <strong>207 Heavy Duty Walking Foot with 40" clearance208 </strong>209 </p>210 </td>211 </tr>212 <tr>213 <td colspan="2">214 215 </td>216 </tr>217 <tr>218 <td colspan="2">219 <img alt="Highlead GC20698-1L 40" border="1" height="528" src="rick.jpg" width="792">220 </td>221 </tr>222 <tr>223 <td colspan="2">224 225 </td>226 </tr>227 </tbody>228 </table>229 </center>230 </div>231 <center>232 <img alt="Highlead sewing machine logo" border="0" height="86" src="rick.jpg" width="247">233 <p>234 <a>235 [ Highlead sewing machine index ]236 </a>237 </p>238 </center>239 <p align="center">240 <font size="4">241 Request more information on Highlead machines242 <a>243 HERE244 </a>245 </font>246 </p>247 <p align="center">248 <font size="4">249 Want a leaflet posting to you250 <a>251 CLICK HERE252 </a>253 </font>254 <br>255 </p>256 </center>257 </div>258 <div style="max-width: 1024px; padding-top: 15px; padding-bottom: 15px; background-color: #6699CC">259 </div>260 <div style="max-width: 1024px; padding-top: 50px; padding-bottom: 50px; color: rgb(255, 255, 255); font-size: 24pt; background-color: #1C1D45;">261 <span style="color: #FFFFFF">262 <a style="text-decoration: none">263 <strong>264 <span style="color: rgb(255, 255, 255)">265 Promotions = Click Here266 </span>267 </strong>268 </a>269 </span>270 </div>271 <div style="max-width: 1024px; padding-top: 0px; padding-bottom: 15px; background-color: #1C1D45;">272 <address>273 <font color="#FFFFFF" size="4">274 New offers:275 </font>276 </address>277 <address>278 <span style="font-style: normal">279 <a style="text-decoration: none">280 <font color="#FFFFFF" size="4">281 <strong>282 Brother S-7250A £1079283 </strong>284 </font>285 </a>286 </span>287 </address>288 <address>289 <span style="font-style: normal">290 <font color="#FFFFFF">291 <a style="text-decoration: none">292 <font color="#FFFFFF" size="4">293 <strong>294 Overlocker Complete 4 Thread £788295 </strong>296 </font>297 </a>298 </font>299 </span>300 </address>301 <address>302 <span style="font-style: normal">303 <font color="#0000FF" size="4">304 <a style="text-decoration: none">305 <font color="#FFFFFF">306 <strong>307 New sewing machine model GC198-1308 </strong>309 </font>310 </a>311 </font>312 </span>313 </address>314 <address>315 <span style="font-style: normal; font-size: 14pt;">316 <a style="text-decoration: none">317 <font color="#FFFFFF" size="4">318 <strong>319 Highlead GC0618-1-SC walking foot & needle feed £945320 </strong>321 </font>322 </a>323 </span>324 </address>325 <address style="text-align: right; margin-bottom: 0px;">326 <font color="#6699CC" style="font-size: 8pt">327 All Prices +VAT328 </font>329 </address>330 </div>331 <div style="max-width: 1024px; padding-top: 10px; padding-bottom: 10px; background-color: #FFFFFF">332 </div>333 <div style="max-width: 1024px; background-color: #6699CC; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;">334 <div style="width: 256px; padding-top: 5px; padding-bottom: 5px; background-color: #6699CC;">335 <a style="text-decoration: none">336 <font color="#FFFFFF" style="font-size: 28pt">337 <strong>338 Email339 </strong>340 </font>341 </a>342 </div>343 <div style="width: 512px; padding-top : 5px; padding-bottom: 5px; background-color: #6699CC; font-size: 10pt;">344 <font color="#FFFFFF">345 <span style="font-style: normal;">346 <strong>347 J. Braithwaite & Co. (SM) Ltd348 <br>349 5 Cheltenham Street - Salford Manchester M6 6WY England350 </strong>351 </span>352 </font>353 </div>354 <div style="width: 256px; padding-top: 5px; padding-bottom: 5px; background-color: #6699CC; font-size: 18pt;">355 <font color="#FFFFFF">356 <strong>357 <a style="text-decoration: none">358 <span style="color: #FFFFFF">359 [PHONE REDACTED]360 </span>361 </a>362 </strong>363 </font>364 </div>365 </div>366 <div style="max-width: 1024px; background-color: #FFFFFF; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;">367 <div style="width: 256px; padding-top: 5px; padding-bottom: 5px; background-color: #FFFFFF;">368 <a style="text-decoration: none" title="Highlead sewing machine range">369 <span style="font-weight: 400; color: #000000;">370 New371 </span>372 <font color="#6699CC">373 <strong>374 HIGHLEAD375 </strong>376 </font>377 <span style="font-weight: 400; color: #000000;">378 Machines379 </span>380 </a>381 </div>382 <div style="width: 512px; padding-top: 5px; padding-bottom: 5px; background-color: #FFFFFF; font-size: 10pt;">383 <strong>384 <a style="text-decoration: none">385 <font color="#336699">386 Index387 </font>388 </a>389 390 <a style="text-decoration: none">391 <font color="#336699">392 Sewing393 </font>394 </a>395 396 <a style="text-decoration: none">397 <font color="#336699">398 Cutting399 </font>400 </a>401 402 <a style="text-decoration: none">403 <font color="#336699">404 Pressing405 </font>406 </a>407 408 <a style="text-decoration: none">409 <font color="#336699">410 Fusing411 </font>412 </a>413 <font color="#336699">414 415 <a style="text-decoration: none">416 <font color="#336699">417 Highlead418 </font>419 </a>420 421 <a style="text-decoration: none">422 <font color="#336699">423 Used424 </font>425 </a>426 427 <a style="text-decoration: none">428 <font color="#336699">429 About430 </font>431 </a>432 </font>433 </strong>434 </div>435 <div style="width: 256px; padding-top: 5px; padding-bottom: 5px; background-color: #FFFFFF; font-size: 16pt;">436 <a title="Braithwaite on Facebook">437 <img alt="facebook link" height="29" src="rick.jpg" style="border-width: 0px" width="102">438 </a>439 </div>440 </div>441 <div style="max-width: 1024px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;">442 <div style="width: 256px; padding-top: 5px; padding-bottom: 5px;">443 444 <a style="text-decoration: none">445 <font color="#FFFFFF">446 Website Disclaimer447 </font>448 </a>449 </div>450 <div style="width: 512px; padding-top: 5px; padding-bottom: 5px; font-size: 8pt;">451 <a style="color: rgb(255, 255, 255); text-decoration: none;">452 (C) 2000-2023 sewingmachinery.co.uk453 </a>454 </div>455 <div style="width: 256px; padding-top: 5px; padding-bottom: 5px;">456 </div>457 </div>458 </div>459 </body>460</html>461