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 This CSS-File uses the original "Tanteks Box Modell Hack"14 http://www.tantek.com/CSS/Examples/boxmodelhack.html15 16 NOTE:17 Older W3C CSS validators return errors when the voice-family property18 is used in a 'screen' style sheet. This is an error in the W3C CSS19 validator itself. The validator should report a warning, not an error,20 when properties which are unsupported by a particular medium are used,21 and this has been reported to the W3C:22 23 ----------------------------------------------------------------------------*/24 25/*----------------------------------------------------------------------------26 styles for specific classes and ids27----------------------------------------------------------------------------*/28 29body#main_body {30 margin: 0;31 padding: 0;32 text-align: center;33}34 35/*-- global container ------------------------------------------------------*/36 37#container {38 position: relative;39 padding: 0;40 margin: 0 auto;41 text-align: left;42 width: 909px;43}44 45#header {46 position: relative;47 padding: 0 0 22px 0;48 margin: 0;49 width: 909px;50 /*height:179px;*/51 52 top: 0px;53 left: 0px;54}55 56#main_container {57 padding: 0;58 margin: 0px 0px 0px 0px;59}60 61#layout_table {62 border-collapse: collapse;63}64 65#sub_nav_column {66 vertical-align: top;67}68 69#content_column {70 vertical-align: top;71}72 73#left_column_container {74 margin: 20px 0px 20px 0px;75 padding: 0;76 width: 200px;77 float: left;78}79 80#sub_container1 {81 margin: 0 0 0 0px;82 padding: 0;83}84 85#sub_container2 {86 margin: 20px 0px 0 0;87 padding: 0px 0px 10px 0px;88 background-repeat: no-repeat;89 background-position: left top;90 float: left;91 width: 680px;92}93 94#content_container {95 overflow: hidden;96 margin: 0px 0px 0px 0;97 padding: 0;98 width: 680px;99}100 101/*--- key visual -----------------------------------------------------------*/102 103#key_visual {104 clear: both;105 position: relative;106 top: 15px;107 left: 0px;108 width: 909px;109 height: 120px;110}111 112/*--- slogan (as text or background image) ---------------------------------*/113 114#slogan {115 position: relative;116 top: 7px;117 left: 0px;118 padding: 0px 0 0px 30px;119 voice-family: "\"}\"";120 voice-family: inherit;121 width: 843px;122}123 124html>body #slogan {125 width: 843px;126}127 128/*--- logo -----------------------------------------------------------------*/129 130#logo {131 width: 200px;132 height: 80px;133 position: relative;134 top: 20px;135 left: 60px;136}137 138/*--- main navigation ------------------------------------------------------*/139 140#main_nav_container {141 z-index: 1;142 position: relative;143 top: 15px;144 left: 0px;145 line-height: 0;146 padding: 0 0px 0 0px;147 margin: 0 0 0px 0;148 overflow: hidden;149 voice-family: "\"}\"";150 voice-family: inherit;151 width: 909px;152 /*height: 27px;*/153 154}155 156html>body #main_nav_container {157 width: 909px;158}159 160#main_nav_list {161 margin: 0;162 padding: 0;163 list-style-type: none;164 width: 909px;165}166 167#main_nav_list li {168 float: left;169 margin: 0px 0 0 0;170 padding: 0;171 min-width: 70px;172}173 174/*--- main navigation items ------------------------------------------------*/175 176#main_nav_list a {177 overflow: hidden; min-width: 50px;178 margin: 0;179 padding: 0px 10px 0px 30px;180 display: block;181 float: left;182 line-height: 27px;183 text-align: center;184 height: 27px;185 voice-family: "\"}\"";186 voice-family: inherit;187}188 189html>body #main_nav_list a {190 height: 27px;191}192 193a.main_nav_item:hover {194 /*background: transparent;*/195 196}197 198/*--- container for the subnavigation --------------------------------------*/199 200.sub_nav_container {201 margin: 0px 0px 20px 5px;202 padding: 0;203 float: left;204}205 206/*--- subnavigation --------------------------------------------------------*/207 208.sub_nav_list {209 border: 0;210 margin: 0;211 padding: 0;212 list-style-type: none;213}214 215.sub_nav_list li {216 clear: both;217 margin: 3px 0 2px 0;218 padding: 0;219}220 221/*--- subnavigation items --------------------------------------------------*/222 223.sub_nav_list a {224 overflow: hidden;225 text-align: left;226 line-height: 27px;227 height: 28px;228 padding: 0 5px 0 30px;229 display: block;230 voice-family: "\"}\"";231 voice-family: inherit;232 width: 105px;233}234 235html>body .sub_nav_list a {236 width: 105px;237}238 239/*--- footer ---------------------------------------------------------------*/240 241#footer {242 margin: 0;243 padding: 0;244 width: 909px;245 /*height: 21px;*/246 247 clear: both;248}249 250#footer_text {251 padding: 5px 30px 5px 30px;252 margin: 0px 0px 0px 0px;253 text-align: right;254}255 256/*----------------------------------------------------------------------------257 default-styles for .content html-elements258----------------------------------------------------------------------------*/259 260/*--- paragraph ------------------------------------------------------------*/261 262.content {263 font-family: Arial,Tahoma,Verdana, sans-serif;264 font-size: 12px;265 font-style: normal;266 font-weight: normal;267 text-decoration: none;268 margin: 5px 0 20px 0;269 padding: 0;270 line-height: 1.3;271}272 273.content p {274 margin: 5px 0 20px 0;275 padding: 0;276 line-height: 1.3;277}278 279.content table {280 font-family: Arial,Tahoma,Verdana, sans-serif;281 font-size: 12px;282 font-style: normal;283 font-weight: normal;284 text-decoration: none;285 margin-left: 1px;286 margin-bottom: 15px;287 /* width: 99.8%;*/288 289 border-left: 1px solid;290 border-top: 1px solid;291 border-collapse: collapse;292 border-spacing: 0;293 font-size: 11px;294}295 296.content select {297 font-family: Arial,Tahoma,Verdana, sans-serif;298 font-size: 12px;299 font-style: normal;300 font-weight: normal;301 text-decoration: none;302}303 304.content input {305 font-family: Arial,Tahoma,Verdana, sans-serif;306 font-size: 12px;307 font-style: normal;308 font-weight: normal;309 text-decoration: none;310 border-style: solid;311 border-width: 1px;312}313 314.content textarea {315 font-family: Arial,Tahoma,Verdana, sans-serif;316 font-size: 12px;317 font-style: normal;318 font-weight: normal;319 text-decoration: none;320 border-style: solid;321 border-width: 1px;322}323 324/*--- headings -------------------------------------------------------------*/325 326/*--- links ----------------------------------------------------------------*/327 328/*--- tables ---------------------------------------------------------------*/329 330.content th {331 border-right: 1px solid;332 border-bottom: 1px solid;333 padding: 3px 5px 3px 5px;334 text-align: left;335 font-weight: bold;336 font-family: Arial, Tahoma, Verdana;337}338 339.content td {340 border-right: 1px solid;341 border-bottom: 1px solid;342 padding: 3px 5px 3px 5px;343}344 345.content tr.odd {346 padding: 3px 2px 3px 2px;347}348 349.content tr.even {350 padding: 3px 2px 3px 2px;351}352 353/*--- forms ----------------------------------------------------------------*/354 355.content fieldset {356 padding: 15px;357 border-style: solid;358 border-width: 1px;359}360 361/*--- lists ----------------------------------------------------------------*/362 363/*--------------------------------------------------------------------------*/364 365 366 367 368/*----------------------------------------------------------------------------369 colorscheme.css for colorscheme 4370 371 this css-file contains all definitions, that depend on the colorscheme.372 373 (c) Schlund + Partner AG374----------------------------------------------------------------------------*/375 376/*-- main container --------------------------------------------------------*/377 378#container {379 background-color: #ffffff;380}381 382/*--- header ---------------------------------------------------------------*/383 384#header {385 background: #ffffff no-repeat bottom left;386 background-image: url(images/static/headerbg.gif);387}388 389/*--- key visiual ----------------------------------------------------------*/390 391#key_visual {392 background: no-repeat;393}394 395/*--- logo -----------------------------------------------------------------*/396 397#logo {398 background: no-repeat top right;399}400 401/*--- caption --------------------------------------------------------------*/402 403/*--- main navigation ------------------------------------------------------*/404 405#main_nav_container {406 background-image: url(images/static/menubg.gif);407}408 409/*--- main navigation items ------------------------------------------------*/410 411a.main_nav_item {412 background: no-repeat;413 background-position: top left;414}415 416a.main_nav_item:hover {417 background: no-repeat;418 background-position: top left;419}420 421a.main_nav_active_item {422 background: no-repeat;423 background-position: top left;424}425 426/*--- subnavigation items --------------------------------------------------*/427 428a.sub_nav_item {429 background: no-repeat;430}431 432a.sub_nav_item:hover {433 background: no-repeat;434}435 436a.sub_nav_active_item {437 background: no-repeat;438}439 440/*--- footer ---------------------------------------------------------------*/441 442#footer {443 background-color: #D2DBE8;444}445 446/*----------------------------------------------------------------------------447 default-styles for html-elements448----------------------------------------------------------------------------*/449 450/*--- body -----------------------------------------------------------------*/451 452body#main_body {453 background-image: url(images/static/pagebg.gif);454}455 456/*--- paragraph ------------------------------------------------------------*/457 458.content {459 color: #7D7D7D;460}461 462.content table {463 color: #7D7D7D;464 border-color: #3F3F3F;465}466 467.content select {468 color: #7D7D7D;469}470 471.content input {472 color: #7D7D7D;473 border-color: #3F3F3F;474}475 476.content textarea {477 color: #7D7D7D;478 border-color: #3F3F3F;479}480 481/*--- headings -------------------------------------------------------------*/482 483/*--- links ----------------------------------------------------------------*/484 485/*--- tables ---------------------------------------------------------------*/486 487.content th {488 color: #ffffff;489 background-color: #1F3561;490 border-color: #3F3F3F;491}492 493.content td {494 border-color: #3F3F3F;495}496 497.content tr.odd {498 color: #6E6E6E;499 background-color: #ffffff;500}501 502.content tr.even {503 color: #6E6E6E;504 background-color: #E0E9F5;505}506 507/*--- forms ----------------------------------------------------------------*/508 509.content fieldset {510 border-color: #7D7D7D;511}512 513.content legend {514 color: #7D7D7D;515}516 517.content label {518 color: #7D7D7D;519}520 521.content #submit {522 background-color: #F2F2F2;523 border-color: #3F3F3F;524 color: #000000;525}526 527/*--------------------------------------------------------------------------*/528 529#weblog_calendar caption {530 color: #979797;531}532 533 534 535 536 537div#logo a {538 display: block;539 width: 100%;540 height: 100%;541}542#footer_text a {543 font-family: Arial, Tahoma,Verdana, sans-serif;544 font-style: normal;545 font-size: 10px;546 font-weight: normal;547 color: #4F596A;548 text-decoration: underline; white-space: nowrap;549}550 551 552#logo {553 background: url(resources/logo_template.gif) no-repeat;554}555#key_visual {556 background: url(images/dynamic/key_visual7.jpg) no-repeat;557}558#slogan {559 font-family: Arial,sans-serif;560 font-style: normal;561 font-size: 12px;562 font-weight: normal;563 text-decoration: none;564 color: #656970;565}566a.main_nav_active_item {567 background: url(images/dynamic/buttonset4/n1active.gif) no-repeat;568 font-family: Verdana,sans-serif;569 font-style: normal;570 font-size: 12px;571 font-weight: bold;572 text-decoration: none;573 color: #236AEE;574 background-position: top left;575}576a.main_nav_item {577 background: url(images/dynamic/buttonset4/n1.gif) no-repeat;578 font-family: Verdana,sans-serif;579 font-style: normal;580 font-size: 12px;581 font-weight: bold;582 text-decoration: none;583 color: #1F3561;584 background-position: top left;585}586a.main_nav_item:hover {587 background: url(images/dynamic/buttonset4/n1hover.gif) no-repeat;588 font-family: Verdana,sans-serif;589 font-style: normal;590 font-size: 12px;591 font-weight: bold;592 text-decoration: none;593 color: #236AEE;594 background-position: top left;595}596a.sub_nav_active_item {597 background: url(images/dynamic/buttonset4/sn1active.gif) no-repeat;598 font-family: Verdana,sans-serif;599 font-style: normal;600 font-size: 12px;601 font-weight: normal;602 text-decoration: none;603 color: #333333;604}605a.sub_nav_item {606 background: url(images/dynamic/buttonset4/sn1.gif) no-repeat;607 font-family: Verdana,sans-serif;608 font-style: normal;609 font-size: 12px;610 font-weight: normal;611 text-decoration: none;612 color: #333333;613}614a.sub_nav_item:hover {615 background: url(images/dynamic/buttonset4/sn1hover.gif) no-repeat;616 font-family: Verdana,sans-serif;617 font-style: normal;618 font-size: 12px;619 font-weight: normal;620 text-decoration: none;621 color: #333333;622}623.content h1 {624 font-family: Verdana,sans-serif;625 font-style: normal;626 font-size: 24px;627 font-weight: bold;628 text-decoration: none;629 color: #236AEE;630}631.content h2 {632 font-family: Verdana,sans-serif;633 font-style: normal;634 font-size: 20px;635 font-weight: bold;636 text-decoration: none;637 color: #979797;638}639.content h3 {640 font-family: Verdana,sans-serif;641 font-style: normal;642 font-size: 16px;643 font-weight: bold;644 text-decoration: none;645 color: #4E4E4E;646}647.content, .content p {648 font-family: Verdana,sans-serif;649 font-style: normal;650 font-size: 12px;651 font-weight: normal;652 text-decoration: none;653 color: #7D7D7D;654}655.content a:link {656 font-family: Verdana,sans-serif;657 font-style: normal;658 font-size: 100%;659 font-weight: normal;660 text-decoration: underline;661 color: #236AEE;662}663.content a:visited {664 font-family: Verdana,sans-serif;665 font-style: normal;666 font-size: 100%;667 font-weight: normal;668 text-decoration: underline;669 color: #4E4E4E;670}671.content a:hover {672 font-family: Verdana,sans-serif;673 font-style: normal;674 font-size: 100%;675 font-weight: normal;676 text-decoration: none;677 color: #236AEE;678}679.content a:active {680 font-family: Verdana,sans-serif;681 font-style: normal;682 font-size: 100%;683 font-weight: normal;684 text-decoration: underline;685 color: #236AEE;686}687#footer_text {688 font-family: Arial, Tahoma,Verdana, sans-serif;689 font-style: normal;690 font-size: 10px;691 font-weight: normal;692 text-decoration: none;693 color: #4F596A;694}695 </style>696 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">697 <meta content="IES" name="author">698 <meta content="IES Lean Systems Ltd. is a Premier Control System, SPC and MES supplier. We have over 20 years experience in supplying systems to the global Process, Industrial and Environmental industries." name="description">699 <meta content="MES, SPC, SIL, Drives, Motion, Instrumentation, CEMS, PLC, SCADA, DCS, Control Systems, Flame, Burner Controls, OEE, Downtime, InfinityQS, Siemens, Rockwell Automation, Toshiba, Wonderware, Microsoft, Cisco, GE Fanuc, Fireye, Forney, Foods, Life Science, Mining, Minerals, Metals, Energy, Oil, Gas, Chemicals, Manufacturing, Waste Water, Water Treatment, Rail, Marine" name="keywords">700 <title>701 Where We Work - IES Lean Systems Ltd.702 </title>703 </head>704 <body id="main_body">705 <div id="container">706 <div id="header">707 <div id="slogan">708 We have moved in the UK and Ireland, see the News for our new location709 </div>710 <div id="main_nav_container">711 <ul id="main_nav_list">712 <li>713 <a class="main_nav_item" id="mni2" shape="rect">714 Home715 </a>716 </li>717 <li>718 <a class="main_nav_item" id="mni2" shape="rect">719 News720 </a>721 </li>722 <li>723 <a class="main_nav_item" id="mni2" shape="rect">724 What We Do725 </a>726 </li>727 <li>728 <a class="main_nav_active_item" id="mnai1" shape="rect">729 Where We Work730 </a>731 </li>732 </ul>733 </div>734 <div id="key_visual">735 <div id="logo">736 <a>737 </a>738 </div>739 </div>740 </div>741 <div id="main_container">742 <table id="layout_table">743 <tbody>744 <tr>745 <td colspan="1" id="sub_nav_column" rowspan="1">746 <div id="left_column_container">747 <div class="sub_nav_container">748 <ul class="sub_nav_list" id="sub_nav_list1">749 <li>750 <a class="sub_nav_item" id="sni2" shape="rect">751 Foods752 </a>753 </li>754 <li>755 <a class="sub_nav_item" id="sni2" shape="rect">756 Life Science757 </a>758 </li>759 <li>760 <a class="sub_nav_item" id="sni2" shape="rect">761 Mining & Minerals762 </a>763 </li>764 <li>765 <a class="sub_nav_item" id="sni2" shape="rect">766 Metals767 </a>768 </li>769 </ul>770 </div>771 <div id="sub_container1">772 </div>773 </div>774 </td>775 <td colspan="1" id="content_column" rowspan="1">776 <div id="sub_container2">777 <div class="content" id="content_container">778 <p align="center">779 <img border="0" src="rick.jpg">780 </p>781 <p align="justify">782 Every Industry has its own Customs and Practices, Standards, Regulations & Procedures. As a Control System Supplier it is necessary to understand these factors in determining applications and operating procedures within that environment.783 </p>784 <p align="justify">785 IES Lean Systems Ltd. is an Independent Turn-Key Systems Integrator providing solutions in Process, Industrial & Environmental applications. IES Lean Systems Ltd. has a widespread industry base some of which are displayed on the left.786 </p>787 </div>788 </div>789 </td>790 </tr>791 </tbody>792 </table>793 </div>794 <div id="footer">795 <div id="footer_text">796 IES Lean Systems Ltd.797 </div>798 </div>799 </div>800 <!-- wfxbuild / 1.0 / layout6-120-2 / 2013-08-02 13:33:06 CEST-->801 </body>802</html>803