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 /*----------------------------------------------------------------------------6 main.css7 8 this css-file contains all definitions, that are independend from the9 colorschemes.10 11 (c) Schlund + Partner AG12 13 14 ----------------------------------------------------------------------15 Modified and extended by Barti Bartman for the Sports-Template16 17 This CSS-File uses the original "Tanteks Box Modell Hack"18 http://www.tantek.com/CSS/Examples/boxmodelhack.html19 20 NOTE:21 Older W3C CSS validators return errors when the voice-family property22 is used in a 'screen' style sheet. This is an error in the W3C CSS23 validator itself. The validator should report a warning, not an error,24 when properties which are unsupported by a particular medium are used,25 and this has been reported to the W3C:26 27 ----------------------------------------------------------------------------*/28 29 30/*----------------------------------------------------------------------------31 styles for specific classes and ids32----------------------------------------------------------------------------*/33 34 35/*-- global container ------------------------------------------------------*/36 37#container {38 position: relative;39 padding: 0;40 margin: 0 auto;41 text-align: left;42 width: 751px;43}44 45/*-- main container: contains all between header and footer ----------------*/46 47#main_container {48 clear: both;49 padding: 0;50 margin: 0;51 position: relative;52}53 54/*--- the main container is devided in sub containers ----------------------*/55 56#sub_container2 {57 width: 635px;58 margin-left: 60px;59}60 61#content_container {62 overflow: hidden;63 margin: 0;64 padding: 0;65 width:630px;66}67 68/*--- header ---------------------------------------------------------------*/69 70#header {71 position: absolute;72 padding: 0;73 margin: 0;74 height: 391px;75 width: 751px;76}77 78/*--- key visual -----------------------------------------------------------*/79 80#key_visual {81 position: absolute;82 top: 15px;83 left: 8px;84 width: 735px;85 height: 335px;86}87 88/*--- logo -----------------------------------------------------------------*/89 90#logo {91 width: 276px;92 height: 38px;93 position: absolute;94 top: 216px;95 left: 0px;96}97 98/*--- caption (as text or background image) --------------------------------*/99 100#slogan {101 position: relative;102 margin: 0 0 15px 60px;103}104 105/*--- main navigation ------------------------------------------------------*/106 107#main_nav_container {108 position: relative;109 margin: 0 0 0 7px;110 width: 450px;111}112 113#main_nav_list {114 margin: 0;115 padding: 0;116 list-style-type: none;117}118 119#main_nav_list li {120 float: left;121 margin: 0;122 padding: 0;123}124 125/*--- main navigation items ------------------------------------------------*/126 127a.navimain_current { 128 margin: 0;129 padding: 0;130 display: block;131 float:left;132 height: 27px;133 width: 150px;134}135 136a.navimain_link {137 margin: 0;138 padding: 0;139 display: block;140 float:left;141 height: 27px;142 width: 150px;143}144 145/*--- subnavigation --------------------------------------------------------*/146 147.sub_nav_container {148 position: relative;149 top: -2px;150 clear: both;151 padding: 0;152 margin: 0;153 width: 345px;154}155 156.sub_nav_list {157 margin: 0;158 padding: 0;159 list-style-type: none;160}161 162.sub_nav_list li {163 float: left;164 margin: 0;165 padding: 0;166}167 168/*--- subnavigation items --------------------------------------------------*/169 170a.navisub_current {171 margin: 0;172 padding: 0px 0px;173 height: 21px;174 voice-family: "\"}\"";175 voice-family: inherit;176 height: 21px;177 width: 114px;178 display: block;179 float:left;180 text-align:center;181}182 183a.navisub_link {184 margin: 0;185 padding: 0px 0px;186 height: 21px;187 voice-family: "\"}\"";188 voice-family: inherit;189 height: 21px;190 width: 114px;191 display: block;192 float:left;193 text-align:center;194}195 196/*--- content --------------------------------------------------------------*/197 198.content table {199 border-width: 4px;200}201 202.content th {203 padding: 3px 2px 3px 10px;204 font-weight:normal;205}206 207.content td {208 padding: 3px 2px 3px 10px;209}210 211/*--- footer ---------------------------------------------------------------*/212 213#footer {214 margin: 0;215 padding: 0;216 width: 775px;217}218 219#footer_text {220 padding: 10px 0 10px 0;221 margin: 0 30px 0 30px;222 text-align: center;223}224 225 226 227/*----------------------------------------------------------------------------228 default-styles for html-elements229----------------------------------------------------------------------------*/230 231/*--- body -----------------------------------------------------------------*/232 233body#main_body {234 margin: 0;235 padding: 0;236 text-align: center;237}238 239/*--- paragraph ------------------------------------------------------------*/240 241.content p {242 margin: 5px 0 20px 0;243 padding: 0;244}245 246/*--- forms ----------------------------------------------------------------*/247 248.content fieldset {249 padding: 15px;250 border-style: solid;251 border-width: 1px;252}253 254.content input {255 border-style: solid;256 border-width: 1px;257}258 259.content textarea {260 border-style: solid;261 border-width: 1px;262}263 264/*--------------------------------------------------------------------------*/265 266.hidden { display: none; }267 268/*--------------------------------------------------------------------------*/269 270 271 272/*----------------------------------------------------------------------------273 colorscheme1.css for colorscheme 4 - green274 275 this css-file contains all definitions, that depend on the colorscheme.276 277 (c) Schlund + Partner AG278----------------------------------------------------------------------------*/279 280 281/*-- main container --------------------------------------------------------*/282 283#container {284 background : url(images/static/contentbg.gif) repeat-y;285}286 287/*--- header ---------------------------------------------------------------*/288#header {289 background : url(images/static/headerbg.gif) no-repeat;290}291 292/*--- footer ---------------------------------------------------------------*/293 294#footer {295 background : url(images/static/contentbg.gif) repeat-y;296}297 298/*----------------------------------------------------------------------------299 default-styles for html-elements300----------------------------------------------------------------------------*/301 302/*--- body -----------------------------------------------------------------*/303 304body#main_body {305 color: #ffffff;306 background : #65715C url(images/static/pgbk.gif) repeat-x;307}308 309/*--- tables ---------------------------------------------------------------*/310 311.content table {312 border-color: #ffffff;313}314 315.content th {316 background-color:#34402B;317}318 319.content tr.odd {320 color: #415036;321 background-color:#C8C8C8;322}323 324.content tr.even {325 color: #415036;326 background-color:#C8C8C8;327}328 329/*--- forms ----------------------------------------------------------------*/330 331.content fieldset {332 border-color: #ffffff;333}334 335.content legend{336 color: #ffffff;337}338 339.content label {340 color: #ffffff;341}342 343.content input {344 border-color: #84685e;345 background-color: #C8C8C8;346}347 348.content textarea {349 border-color: #84685e;350 background-color: #C8C8C8;351}352 353.content button {354 background-color:#34402B;355 border: 0px solid #34402B;356}357 358/*--------------------------------------------------------------------------*/359 360 361 362 363div#logo a {364 display: block;365 width: 100%;366 height: 100%;367}368#footer_text a {369 font-family: Arial, sans-serif;370 font-style: normal;371 font-size: 12px;372 font-weight: normal;373 color: #ffffff;374 text-decoration: underline; white-space: nowrap;375}376 377 378#key_visual {379 background: url(colorschemes/colorscheme4/images/dynamic/key_visual1.jpg) no-repeat;380}381#slogan {382 font-family: Arial,sans-serif;383 font-style: normal;384 font-size: 28px;385 font-weight: bold;386 text-decoration: none;387 color: #ffffff;388}389#content_container h1 {390 font-family: Arial,sans-serif;391 font-style: normal;392 font-size: 28px;393 font-weight: bold;394 text-decoration: none;395 color: #ffffff;396}397#content_container h2 {398 font-family: Arial,sans-serif;399 font-style: normal;400 font-size: 24px;401 font-weight: bold;402 text-decoration: none;403 color: #ffffff;404}405#content_container h3 {406 font-family: Arial,sans-serif;407 font-style: normal;408 font-size: 20px;409 font-weight: bold;410 text-decoration: none;411 color: #ffffff;412}413#content_container, #content_container p {414 font-family: Times New Roman, Times, serif;415 font-style: normal;416 font-size: 16px;417 font-weight: normal;418 text-decoration: none;419 color: #ffffff;420}421#content_container a:visited {422 font-family: Times New Roman, Times, serif;423 font-style: normal;424 font-size: 16px;425 font-weight: normal;426 text-decoration: underline;427 color: #ffffff;428}429#content_container a:link {430 font-family: Times New Roman, Times, serif;431 font-style: normal;432 font-size: 16px;433 font-weight: normal;434 text-decoration: underline;435 color: #ffffff;436}437#content_container a:hover {438 font-family: Times New Roman, Times, serif;439 font-style: normal;440 font-size: 16px;441 font-weight: normal;442 text-decoration: none;443 color: #ffffff;444}445#content_container a:active {446 font-family: Times New Roman, Times, serif;447 font-style: normal;448 font-size: 16px;449 font-weight: normal;450 text-decoration: underline;451 color: #ffffff;452}453#footer_text {454 font-family: Arial, sans-serif;455 font-style: normal;456 font-size: 12px;457 font-weight: normal;458 text-decoration: none;459 color: #ffffff;460}461 462 463 464 465 466a.navimain_link_1 {467 background: url(img17.png) no-repeat;468 469 }470 a.navimain_link_1:hover {471 background: url(img18.png) no-repeat;472 473 }474 a.navimain_link_2 {475 background: url(img1.png) no-repeat;476 477 }478 a.navimain_link_2:hover {479 background: url(img2.png) no-repeat;480 481 }482 a.navimain_link_3 {483 background: url(img3.png) no-repeat;484 485 }486 a.navimain_link_3:hover {487 background: url(img4.png) no-repeat;488 489 }490 a.navimain_link_6 {491 background: url(img5.png) no-repeat;492 493 }494 a.navimain_link_6:hover {495 background: url(img6.png) no-repeat;496 497 }498 a.navimain_link_8 {499 background: url(img7.png) no-repeat;500 501 }502 a.navimain_link_8:hover {503 background: url(img8.png) no-repeat;504 505 }506 a.navimain_current {507 background: url(img23.png) no-repeat;508 509 }510 a.navimain_link_10 {511 background: url(img11.png) no-repeat;512 513 }514 a.navimain_link_10:hover {515 background: url(img12.png) no-repeat;516 517 }518 a.navimain_link_11 {519 background: url(img13.png) no-repeat;520 521 }522 a.navimain_link_11:hover {523 background: url(img14.png) no-repeat;524 525 }526 a.navimain_link_4 {527 background: url(img15.png) no-repeat;528 529 }530 a.navimain_link_4:hover {531 background: url(img16.png) no-repeat;532 533 }534 </style>535 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">536 <meta content="1&1 WebsiteBuilder" name="author">537 <meta content="Helen Carey Books, Art and photography in Newport, Pembrokeshire. Helen Beazley and Marc Mordey. Based at Penrallt Farm, off the Cilgwyn Road, SA42 0QE" name="description">538 <meta content="Affordable art, and photography, in Newport, Pembrokeshire.,Helen Carey, Newport, The Studio at Penrallt, Pembrokeshire, art, photography, treasure trail, Helen Beazley, Marc Mordey, art in Pembrokeshire, working studio, studio, Penrallt, nature trail, walks, views," name="keywords">539 <title>540 Sales - Art and photography in Newport Pembrokeshire.541 </title>542 </head>543 <body id="main_body">544 <div id="container">545 <div id="header">546 <div id="key_visual">547 <div id="logo">548 </div>549 </div>550 </div>551 <div style="padding-top: 268px;">552 <table style="border-collapse: collapse;">553 <tbody>554 <tr>555 <td style="vertical-align: top;">556 <div id="main_nav_container">557 <ul id="main_nav_list">558 <li>559 <a class="navimain_link navimain_link_1">560 <span class="hidden">561 Home562 </span>563 </a>564 </li>565 <li>566 <a class="navimain_link navimain_link_2">567 <span class="hidden">568 Helen's paintings569 </span>570 </a>571 </li>572 <li>573 <a class="navimain_link navimain_link_3">574 <span class="hidden">575 Reasons to be cheerful576 </span>577 </a>578 </li>579 <li>580 <a class="navimain_link navimain_link_6">581 <span class="hidden">582 How to find us583 </span>584 </a>585 </li>586 </ul>587 </div>588 </td>589 <td>590 <div style="height: 81px;">591 </div>592 </td>593 </tr>594 </tbody>595 </table>596 </div>597 <table style="border-collapse: collapse; width: 747px;">598 <tbody>599 <tr>600 <td>601 <div style="width: 340px;">602 </div>603 </td>604 <td rowspan="2" style="vertical-align: top;">605 <div class="sub_nav_container">606 </div>607 </td>608 </tr>609 <tr>610 <td style="vertical-align: top;">611 <div id="slogan">612 Art, Photography and Books - Newport, Pembrokeshire613 </div>614 </td>615 </tr>616 </tbody>617 </table>618 <div id="main_container">619 <div id="sub_container2">620 <div class="content" id="content_container">621 <p>622 <font face="Arial,sans-serif">623 </font>624 </p>625 <p>626 <font face="Arial,sans-serif">627 <span>628 <span style="font-size:18px;">629 <strong>630 HELEN'S PAINTINGS:631 </strong>632 </span>633 </span>634 </font>635 </p>636 <p>637 <span style="font-size:18px;">638 <font face="Arial,sans-serif">639 <span style="font-size:18px;">640 If you would like to buy a painting that you have seen on our website please telephone on 01239 820791.641 </span>642 </font>643 </span>644 </p>645 <p>646 <font face="Arial,sans-serif">647 <span style="font-size:18px;">648 Paintings will be sent to your address, packed and protected against potential damage in649 </span>650 </font>651 <span style="font-size:18px;">652 <font face="Arial,sans-serif">653 transit. As soon as payment has been received (we are unable to accept card payments at this time) we will despatch the paintings to your chosen address.654 </font>655 </span>656 </p>657 </div>658 </div>659 </div>660 <div id="footer">661 <div id="footer_text">662 The Studio at Penrallt - art and photography, Newport, Pembrokeshire663 </div>664 </div>665 </div>666 <!-- wfxbuild / 1.0 / layout3-3 / 2017-05-25 08:03:20 CEST-->667 </body>668</html>669