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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">2<html>3 <head>4 <style>5 body {6 7 padding: 0;8 font-size: 12px;9 font-family: arial;10 text-align: center;11 12 13 margin: auto;14 color: #444444;15 16}17#maincontent18{19 margin-top: -15px;20}21 22#linieoben23 24{25 height: 20px;26 27 28}29#linieunten30 31{32background-image: url("rasenunten1.jpg");33 34 height: 20px;35 font-family: arial;36 background-size: 100%;37 background-repeat: no-repeat;38}39#bild40 41{42 -moz-box-shadow: 3px 3px 3px 3px #d2d2d2;43 -webkit-box-shadow: 3px 3px 3px 3px #d2d2d2;44 box-shadow: 3px 3px 3px 3px #d2d2d2;45 46 color: #444444;47 font-size: 12px;48 font-family: arial;49 text-align: center;50 51}52#umrandung53 54{55 56background: #ffffff; /* for non-css3 browsers */57 font-size: 12px;58 font-family: arial;59}60#shadow261 62{63 -moz-border-radius:0px;64 -webkit-border-radius:0px;65 border-radius:0px;66-moz-box-shadow: 0 0 5px 5px #888;67-webkit-box-shadow: 0 0 5px 5px #888;68box-shadow: 0 0 5px 5px #888;69background: #ffffff; /* for non-css3 browsers */70 font-size: 12px;71 font-family: arial;72}73h1{ 74 75 font-size: 18px;76 font-weight: bold;77}78h2{ 79 80 font-size: 16px;81 font-weight: bold;82}83#alle84 85{86 font-size: 12px;87 font-family: arial;88}89 90#schwach91 92{93 font-size: 12px;94 font-family: arial;95 color: #cecece; 96}97 98 99 100#tablea101 102{103 -moz-border-radius:0px;104 -webkit-border-radius:0px;105 border-radius:0px;106background: #E0E0E0;107border: 1px solid #cecece;108 font-size: 12px;109 font-family: arial;110}111#tableb112 113{114 -moz-border-radius:0px;115 -webkit-border-radius:0px;116 border-radius:0px;117background: #ffffff;118border: 1px solid #cecece;119 font-size: 12px;120 font-family: arial;121}122#tablea2123 124{125 -moz-border-radius:0px;126 -webkit-border-radius:0px;127 border-radius:0px;128background: #E0E0E0;129border-left: 1px solid #cecece;130border-right: 1px solid #cecece;131 font-size: 12px;132 font-family: arial;133}134#tableb2135 136{137 -moz-border-radius:0px;138 -webkit-border-radius:0px;139 border-radius:0px;140background: #ffffff;141border: 1px solid #cecece;142 font-size: 12px;143 font-family: arial;144}145#tablea3146 147{148 -moz-border-radius:0px;149 -webkit-border-radius:0px;150 border-radius:0px;151background: #E0E0E0;152border-top: 1px solid #cecece;153border-right: 1px solid #cecece;154 font-size: 12px;155 font-family: arial;156 border-bottom: 1px solid #cecece;157}158#tableb3159 160{161 -moz-border-radius:0px;162 -webkit-border-radius:0px;163 border-radius:0px;164background: #ffffff;165border-right: 1px solid #cecece;166border-top: 1px solid #cecece;167 font-size: 12px;168 font-family: arial;169}170#tablec171 172{173 background: #ECEAE6;174 175 176 font-size: 12px;177 font-family: arial;178 179 color: #444444;180 height: 20px;181 182 183}184#bwumrandung185 186{187 -moz-border-radius:0px;188 -webkit-border-radius:0px;189 border-radius:0px;190-moz-box-shadow: 0 0 6px 6px #888;191-webkit-box-shadow: 0 0 6px 6px#888;192box-shadow: 0 0 6px 6px #888;193background: #ffffff; /* for non-css3 browsers */194 195 font-size: 12px;196 font-family: arial;197}198#main199 200{201 202 font-size: 12px;203 font-family: arial;204 205}206 207 208 209input.inputt, textarea.inputt2, select.field {210 background: #B5D1FF;211 font-family: Arial,;212 font-size: 12px;213 margin: 0;214 padding: 5px 15px 5px 15px;215 border: 1px solid #444444;216}217input.stern {218 background-image: url(../stern4.gif);219 font-family: Arial,;220 font-size: 12px;221 margin: 0;222 padding: 10px 10px 10px 12px;223 border: 0px;224}225input.button1 {226 background: #FFF7A5;227 font-family: Arial,;228 font-size: 12px;229 margin: 0;230 padding: 5px 15px 5px 15px;231 border: 0px solid #444444;232 background: #ffffff;233 color: #444444;234}235input:hover { 236 background-color: #cecece;237}238input.suchfeld {239 width: 100%;240 background: #ffffff;241 font-family: Arial,;242 font-size: 30px;243 margin: 0;244 padding: 5px 15px 5px 15px;245 border: 1px solid #444444;246}247#blau248 249{250 251 252 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D6DDFF', endColorstr='#C1CDFF'); /* for IE */253 background: -webkit-gradient(linear, left top, left bottom, from(#D6DDFF), to(#C1CDFF)); /* for webkit browsers */254 background: -moz-linear-gradient(top, #D6DDFF, #C1CDFF); /* for firefox 3.6+ */255 256 257 -moz-border-radius:12px;258 -webkit-border-radius:12px;259 border-radius:12px;260-moz-box-shadow: 0 0 1px 1px #888;261-webkit-box-shadow: 0 0 1px 1px #888;262box-shadow: 0 0 1px 1px #888;263 font-family: arial;264 padding: 5px;265 text-align: center ;266}267#fehlt268 269{270background: #F8FFA3;271border: 1px solid #cecece;272 font-size: 12px;273 font-family: arial;274}275 276#fehlt2277 278{279background: #FFD472;280border: 1px solid #cecece;281 font-size: 12px;282 font-family: arial;283}284 </style>285 <meta content="text/html; charset=utf-8" http-equiv="content-type">286 <meta content="giRBhPBhqbOQSlqa7umkL7xovyMTJaMY9sOeT-Nqpf4" name="google-site-verification">287 <meta content="44E9BB5696B082442F295602C5812AE5" name="msvalidate.01">288 <meta content="width=device-width, initial-scale=1" name="viewport">289 <meta content="en" http-equiv="Language">290 <title>291 Football Lifestyle: Money & Girls & Cars292 </title>293 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">294 </head>295 <body>296 <center>297 <table border="0" cellpadding="0" cellspacing="0" id="main" width="1100">298 <tbody>299 <tr>300 <td align="left">301 <a>302 <img src="rick.jpg" title="Footballer Salary" width="100">303 </a>304 <br>305 </td>306 <td align="right" valign="bottom">307 <form action="/suche.php" enctype="multipart/form-data" method="post">308 <input name="spieler" size="15" style=" resize: none;" text value>309 <input class="button" name="suche" type="submit" value="Search player">310 </form>311 </td>312 </tr>313 </tbody>314 </table>315 <img height="20" src="rick.jpg" width="100%">316 <table border="0" cellpadding="0" cellspacing="0" id="main" width="1100">317 <tbody>318 <tr>319 <td align="left" width="100%">320 <br>321 <center>322 <br>323 </center>324 <br>325 <br>326 <b>327 Top Player328 </b>329 <br>330 <img height="1" src="rick.jpg" width="100%">331 <br>332 <table cellpadding="5" cellspacing="0" id="alle" width="100%">333 <tbody>334 <tr id="tableb">335 <td valign="top">336 <img src="rick.jpg" width="50">337 </td>338 <td valign="top">339 <a>340 Shalom Luani341 </a>342 <br>343 Tafuna Jets344 <br>345 striker346 <br>347 05.08.1994348 </td>349 </tr>350 <tr id="tableb">351 <td valign="top">352 <img src="rick.jpg" width="50">353 </td>354 <td valign="top">355 <a>356 Alfonso Luna357 </a>358 <br>359 Venados FC Yucatán360 <br>361 defence362 <br>363 23.01.1990364 </td>365 </tr>366 <tr id="tableb">367 <td valign="top">368 <img src="rick.jpg" width="50">369 </td>370 <td valign="top">371 <a>372 Ronan Finn373 </a>374 <br>375 Shamrock Rovers376 <br>377 midfield - Offensives midfield378 <br>379 21.12.1987380 </td>381 </tr>382 </tbody>383 </table>384 <br>385 <br>386 <br>387 <b>388 The advantages and disadvantages of a career as a football professional389 </b>390 <br>391 <br>392 Numerous boys and girls dream of a career as a professional footballer in the early childhood.393 <br>394 <br>395 <b>396 Football play with highest merit397 </b>398 <br>399 <br>400 Every enthusiastic hobby footballer would give a lot for his life support by playing football.401 <br>402 <br>403 <b>404 Varied trips to foreign countries405 </b>406 <br>407 <br>408 In addition to these two factors, which would make a career change for most people, professional footballers have the opportunity to travel to many foreign countries.409 <br>410 <br>411 <b>412 Professional footballers suffer from immense performance pressure413 </b>414 <br>415 <br>416 Together with these clear advantages, there are of course also some disadvantages.417 <br>418 <br>419 <b>420 Absolute discipline with little space for self-development421 </b>422 <br>423 <br>424 In addition, a career as a professional footballer offers very little room for self-development.425 <br>426 <br>427 <b>428 Demanding careers with high benefits429 </b>430 <br>431 <br>432 The career as a professional footballer offers numerous attractive advantages for the performance athletes.433 <br>434 <br>435 <br>436 <br>437 <br>438 </td>439 </tr>440 </tbody>441 </table>442 </center>443 <br>444 </body>445</html>446