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>2<html>3 <head>4 <style>5 /* CSS Document */6 7body {8 margin:0em;9 padding: 0px;10}11.small {12 font: normal 14px Arial, Helvetica, sans-serif;13 color: #000000;14}15.small2 {16 font: normal 12px Arial, Helvetica, sans-serif;17 color: #000000;18 }19 20.green {21 font: bold normal 14px Verdana, Arial, Helvetica, sans-serif;22 color: #339933;23 }24 25.green {26 font: bold normal 14px Verdana, Arial, Helvetica, sans-serif;27 color: #339933;28 }29 30.red {31 color: #FF0000;32 font-weight: bold;33 font-size: 12px;34 font-family: Arial, Helvetica, sans-serif;35 }36.h2 {37 color: #669900;38 font-weight: bold;39 font-size: 16px;40 font-family: Arial, Helvetica, sans-serif;41 } 42 43.redlarge {44 color: #FF0000;45 font-weight: bold;46 font-size: 14px;47 font-family: Arial, Helvetica, sans-serif;48 }49 50#colImages {51 margin-left: 144px;52 margin-right: 0px;53 color: #000000;54 margin-top: 0px;55 width: 621px;56}57#colMain {58 margin-left: auto;59 margin-right: auto;60 font: normal 12px Arial, Helvetica, sans-serif;61 color: #000000;62 background: center;63 margin-top: 5px;64 width: 850px;65} 66#contentcenter {67 margin-left: auto;68 margin-right: auto;69 color: #000000;70 background: center;71 margin-top: 5px;72 width: 800px;73} 74#contenttop {75 width:800px;76 padding:0px;77 text-decoration: none;78 height: 45px;79 margin-left: auto;80 margin-right: auto;81 background: center;82 }83#contenttop2 {84 width:90px;85 padding:0px;86 height: 40px;87 top: 10px;88 margin-left: 150px;89 } 90 91.main {92 font: normal 14px Arial, Helvetica, sans-serif;93 color: #000000;94 margin: 0px;95 list-style: square;96 97}98.newsletter{99 font: normal 14px Arial, Helvetica, sans-serif;100 color: #000000;101 text-decoration: underline;102}103.bold {104 font: bold 14px Arial, Helvetica, sans-serif;105 color: #000000;106 margin: 0px;107 108}109 110.boldgreen {111 font: bold 14px Arial, Helvetica, sans-serif;112 color: #669900;113 margin: 0px;114 }115 116.h1 {117 font: bold 18px Arial, Helvetica, sans-serif;118 color:#669900;119 margin: 0px;120 121} 122.navtext {123 color: #999999;124 text-decoration:none;125 font-family: Arial, Helvetica, sans-serif;126 font-size: 14px;127 font-style: normal;128 font-weight: bold;129 font-variant: normal;130 131}132div#navbar {133 width: 100%;134 text-align: center;135 margin: 0px 0px 0px 3px;136 background: #FFFFFF center;137 padding: 2px 0px 0px;138 font-family: Arial, Helvetica, sans-serif;139 font-style: normal;140 font-weight: normal;141 font-variant: normal;142 color: #999999;143 text-decoration: none;144 145}146 147div#navbar ul {148 margin: 0px;149 padding: 0px 2px 0px 0px;150 color: #999999;151 white-space: nowrap;152 font: bold normal 14px Arial, Helvetica, sans-serif;153 background: center;154 155 156}157div#navbar li {158 list-style-type: none;159 display: inline;160 padding-right: 5px;161 162 163}164div#navbar li a {165 text-decoration: none;166 padding: 0px 0px 0px 5px;167 color: #999999;168 font: 14px Arial, Helvetica, sans-serif;169 }170 171div#navbar li a:hover {172 font-weight: bold;173 color: #999999;174 font-family: Arial, Helvetica, sans-serif;175 176}177 178#footer {179 padding: 0px;180 background: #FFFFFF center;181 margin: 0px;182 height: 33px;183 float: left;184 width: 100%;185 font: bold 10px Verdana, Arial, Helvetica, sans-serif;186 color: #000000;187 position: absolute;188 189}190img.floatRight {191 float: right;192 margin: 9px 9px 1px;193} 194img.floatRight2 {195 float: right;196 margin: 0px 9px 1px;197} 198img.floatLeft {199 float: left;200 margin: 10px 15px 7px 0px;201 padding: 0px;202}203img.floatLeft2 {204 float: left;205 margin: 2px 15px 7px 0px;206 padding: 0px;207}208 #footer {209 font: bold 9px/normal Arial, Helvetica, sans-serif;210 color: #000000;211 margin-left: 138px;212 vertical-align: bottom;213 text-align: center;214 background: #FF0000 no-repeat;215 height: 0.1cm;216 border-bottom: thin solid #000000;217 border-top: thick solid #FFFFFF;218 position: fixed;219 }220 </style>221 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">222 <title>223 Jean Greenhowe Designs Official Website - knitting patterns, knitted dolls, toys224 </title>225 <meta content="Jean Greenhowe official Website - Jean Greenhowe knitting patterns, knitted dolls, knitted toys, easy knitting patterns, free knitting patterns" name="description">226 <meta content="jean greenhowe,official jean greenhowe website,knitting patterns,jean greenhowe designs,knitted dolls,knitted toys,knitting,free knitting patterns,downloadable knitting patterns,crafts,arts" name="keywords">227 <style type="text/css">228 </style>229 </head>230 <body>231 <div>232 <div id="colMain">233 <p align="left" class="main">234 <img alt="Jean Greenhowe Designs" height="85" src="rick.jpg" width="500">235 <br>236 </p>237 <div id="navbar">238 <table border="0" width="99%">239 <!--DWLayoutTable-->240 <tbody>241 <tr>242 <td colspan="21">243 <img alt="line" height="1" src="rick.jpg" width="850">244 </td>245 </tr>246 <tr>247 <td width="57">248 <div align="center">249 <a class="navtext">250 Home251 </a>252 </div>253 </td>254 <td width="7">255 |256 </td>257 <td width="83">258 <div align="center">259 <a class="navtext">260 Knitting261 <br>262 Booklets263 </a>264 </div>265 </td>266 <td width="7">267 |268 </td>269 <td width="60">270 <div align="center">271 <a class="navtext">272 Buy273 <br>274 Online275 </a>276 </div>277 </td>278 <td width="7">279 |280 </td>281 <td width="59">282 <div align="center">283 <a class="navtext">284 About285 <br>286 Us287 </a>288 </div>289 </td>290 <td width="7">291 |292 </td>293 <td width="165">294 <div align="center">295 <a class="navtext">296 About Jean's Designs297 <br>298 Notes, Tips & History299 <br>300 </a>301 </div>302 </td>303 <td width="7">304 |305 </td>306 <td width="77">307 <div align="center">308 <a class="navtext">309 Free Patterns310 </a>311 </div>312 </td>313 <td width="7">314 |315 </td>316 <td width="48">317 <div align="center">318 <a class="navtext">319 Fan Mail320 </a>321 </div>322 </td>323 <td width="7">324 |325 </td>326 <td width="59">327 <div align="center">328 <a class="navtext">329 Contact330 <br>331 Us332 </a>333 </div>334 </td>335 </tr>336 <tr>337 <td colspan="21" height="3">338 <div align="left">339 <img alt="line" height="1" src="rick.jpg" width="850">340 </div>341 </td>342 </tr>343 </tbody>344 </table>345 </div>346 <p align="left" class="h1">347 348 </p>349 <div id="contentcenter">350 <div align="left">351 <img alt="Winifred's wool shop" class="floatRight" height="282" src="rick.jpg" width="280">352 <p align="left" class="h1">353 <strong class="h1">354 Buy Online355 </strong>356 </p>357 <p align="left" class="main">358 Jean Greenhowe booklets can be purchased online from the following companies.359 <br>360 <br>361 <span class="bold">362 UNITED KINGDOM363 </span>364 <br>365 <span class="main">366 <a target="_blank">367 Gill-I-Am368 </a>369 . Jean Greenhowe page, click370 <a target="_blank">371 here372 </a>373 </span>374 <br>375 <br>376 <a target="_blank">377 UK Knitting Patterns.378 </a>379 Jean Greenhowe page, click380 <a target="_blank">381 here382 </a>383 <br>384 <br>385 <br>386 <span class="bold">387 </span>388 <span class="bold">389 USA390 </span>391 <br>392 <a target="_blank">393 Frugal Knitting Haus394 </a>395 . Jean Greenhowe page, click396 <a target="_blank">397 here398 </a>399 <br>400 <br>401 <br>402 <br>403 </p>404 <p align="left" class="main">405 <br>406 <br>407 </p>408 <p align="left" class="main">409 <br>410 <br>411 </p>412 </div>413 <p align="center">414 <img alt="line" height="8" src="rick.jpg" width="850">415 <br>416 <span class="small2">417 © Copyright418 Jean Greenhowe Designs 2006 - 2023419 </span>420 <br>421 <br>422 </p>423 </div>424 </div>425 </div>426 </body>427</html>428