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 PUBLIC "-//W3C//DTD HTML 4.01//EN" "">2<html lang="en">3 <head>4 <style>5 @media screen {6 /*** Defaults ***/7 .image {8 margin-top: 10px;9 }10 11 .image img {12 border: 1px solid black;13 }14 15 .image .caption {16 display: block;17 text-align: left;18 font-style: italic;19 line-height: 1.5em;20 }21 22 .left {23 float: left;24 padding-right: 25px;25 padding-bottom: 10px;26 }27 28 .right {29 float: right;30 padding-left: 25px;31 padding-bottom: 10px;32 }33 34 .center {35 margin-left: auto;36 margin-right: auto;37 text-align: center;38 }39 40 .expanded {41 letter-spacing: 0.25em;42 }43 44 .borderless img {45 border: 0;46 }47 48 /*** Carryover from original style ***/49 .townstate {50 font-weight: bold;51 }52 53 .floatright, .floatrightborder {54 float: right;55 margin: 0 0 25px 25px;56 }57 58 .floatleft, .floatleftborder {59 float: left;60 margin: 0 25px 25px 0px;61 }62 63 .floatleftborder, .floatrightborder {64 border: 1px solid #000;65 }66 67 .sidebar {68 background-color: #dfffbb;69 font-size: 0.85em;70 padding: 8px;71 margin-bottom: 10px;72 border: 1px solid #336600;73 }74 75 .sidebar ul {76 list-style-type: disc;77 margin-left: 20px;78 }79 80 .specialnote, .racomment, .tipnamedate {81 font-size: 90%;82 font-style: italic;83 }84 85 .racomment {86 clear: left;87 margin-top: 8pt;88 }89 90 .racomment p:before {91 content: "RA: ";92 font-weight: bold;93 }94 95 p {96 line-height: 1.5em;97 margin-bottom: 1em;98 }99 100 ul {101 margin: 0;102 padding: 0;103 list-style-type: none;104 }105 106 ul ul {107 list-style-type: circle;108 margin-left: 20px;109 margin-top: 4px;110 }111 112 li {113 margin-bottom: 1em;114 line-height: 1.2em;115 }116 117 a img {118 border: 0;119 }120 121 a {122 cursor: pointer;123 }124 125 a:link {126 text-decoration: none;127 font-weight: bold;128 color: #006600;129 }130 131 a:visited {132 text-decoration: none;133 font-weight: bold;134 color: #DA0505;135 }136 137 a:hover {138 text-decoration: underline;139 font-weight: bold;140 }141 142 h2, h4, p {143 margin: 0 0 12px 0;144 padding: 2px;145 }146 147 /* Moving h2 to h4 */148 h2, h4 {149 padding-top: 10px;150 padding-bottom: 4px;151 border-bottom: 1px dotted #455A79;152 }153 154 h3 {155 margin: 4px 0;156 }157 158 .group {159 margin: 0 0 11px 0;160 padding: 0;161 clear: both;162 }163 164 .group h2 {165 margin-top: 0;166 }167 168 .links .group {169 margin: 20px 0;170 }171 172 #main h1 {173 margin-top: 1.2em;174 }175 176 form noscript p {177 display: inline;178 }179 180 form input, form select {181 font-size: 0.85em;182 }183 184 form input.text, form select {185 background-color: #ccc;186 }187 188 #header form input.text, #header form select {189 background-color: #ff6;190 }191 192 form input.submit {193 cursor: pointer;194 }195 196 form input.submit, .poll input {197 background-color: #666;198 color: #fff;199 }200 201 .poll input {202 font-size: 0.9em;203 }204 205 form select {206 margin: 0 4px 0 0;207 padding: 0;208 }209 210 form input {211 margin: 0;212 padding-top: 0;213 padding-bottom: 0;214 }215 216 .creatures #main li {217 list-style-type: disc;218 margin-left: 35px;219 }220 221 .creatures #main .debate {222 width: 210px;223 float: right;224 margin-left: 10px;225 }226 227 .creatures .statistics dt {228 font-weight: bold;229 }230 231 .creatures .statistics dd {232 margin: 5px 0 10px 0;233 }234 235 #header .nav {236 clear: both;237 }238 239 #header .ad {240 width: 728px;241 display: block;242 margin: 10px auto;243 }244 245 .highlights .featured h2 {246 display: none;247 }248 249 #main .highlights h1 {250 margin-top: 0;251 }252 253 #main .ad {254 width: 100%;255 margin-left: auto;256 margin-right: auto;257 }258 259 #main .ad_main_top {260 width: 336px;261 float: right;262 margin-left: 20px;263 clear: none;264 }265 266 #main .specialnote > .group.ad.ad_main_top {267 clear: none;268 }269 270 #main .adset {271 width: 100%;272 }273 274 #main .adset > .ad {275 display: inline-block;276 margin-left: 5px;277 margin-right: 5px;278 }279 280 #main .adset > .ad_main:first-child {281 display: block;282 margin-left: auto;283 margin-right: auto;284 }285 286 /*** Font Variants ***/287 #header, #footer {288 font-size: 0.82em;289 }290 291 #footer p {292 font-size: 0.9em;293 }294 295 #context, #services, .attractfacts, .debate {296 font-size: 0.76em;297 font-size: 0.76rem;298 }299 300 .nearby {301 font-size: 0.79em;302 }303 304 .image .caption {305 font-size: 0.82em;306 }307 308 #main {309 font-size: 0.9em;310 }311 312 #main .headlines {313 font-size: 0.9em;314 }315 316 #main .hotelcity ul {317 font-size: 0.76em;318 }319 320 #main .hotelcity ul li {321 margin: 0;322 }323 324 h1 {325 font-size: 1.8em;326 }327 328 h2, h4 {329 font-size: 1.25em;330 }331 332 /* h2 moving to h4 here */333 .blog #main .highlights h2 {334 font-size: 1.5em;335 }336 337 /*** Featured Landmarks, Oddities and Attractions ***/338 .featuredlist h3, .featuredstate h3 {339 text-transform: uppercase;340 margin-bottom: 1em;341 }342 343 .featuredlist li {344 text-indent: -1.3em;345 margin-left: 1.3em;346 }347 348 /*** Spacing ***/349 .home #main .headlines-disabled {350 margin-top: 25px;351 }352 353 .fieldreview h1 {354 padding-top: 30px;355 margin-top: 0;356 }357 358 .townstate {359 margin-bottom: 25px;360 }361 362 /*** Sight of the Week ***/363 .home .sotw img {364 display: none;365 }366 367 /*** Story ***/368 .story .text ul {369 list-style-type: disc;370 margin-left: 25px;371 }372 373 /*** Top Ten List ***/374 /* http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/ */375 .topten ol {376 counter-reset: li;377 /* Initiate a counter */378 margin-left: 0;379 /* Remove the default left margin */380 padding-left: 0;381 /* Remove the default left padding */382 }383 384 .topten ol > li {385 position: relative;386 /* Create a positioning context */387 margin: 0 0 6px 2em;388 /* Give each list item a left margin to make room for the numbers */389 padding: 4px 8px;390 /* Add some spacing around the content */391 list-style: none;392 /* Disable the normal item numbering */393 border-top: 2px solid #cfe3cf;394 background: #f6f6f6;395 }396 397 .topten ol > li:before {398 content: counter(li);399 /* Use the counter as content */400 counter-increment: li;401 /* Increment the counter by 1 */402 /* Position and style the number */403 position: absolute;404 top: -2px;405 left: -2em;406 -moz-box-sizing: border-box;407 -webkit-box-sizing: border-box;408 box-sizing: border-box;409 width: 2em;410 /* Some space between the number and the content in browsers that support411 generated content but not positioning it (Camino 2 is one example) */412 margin-right: 8px;413 padding: 4px;414 border-top: 2px;415 /* solid #cfe3cf; */416 color: #4f714f;417 background: #cfe3cf;418 font-weight: bold;419 /* font-family: "Helvetica Neue", Arial, sans-serif; */420 text-align: center;421 }422 423 /*** Attraction Facts ***/424 .attractfacts {425 font-size: 0.9em;426 background-color: #dfffbb;427 margin-top: 1.5em;428 margin-bottom: 0em;429 border: 1px solid #336600;430 }431 432 body.tips .attractfacts {433 overflow: hidden;434 margin-top: 0;435 }436 437 /* body.tips .attractfacts, body.story .attractfacts { clear: both } */438 X#main .attractfacts {439 padding: 0 !important;440 }441 442 #main .attractfacts .info {443 padding: 12px;444 }445 446 #main .attractfacts h3 {447 color: #000;448 font-variant: normal;449 border: none;450 }451 452 #main .attractfacts h3, .attractfacts dl {453 margin-top: 0;454 }455 456 #main .attractfacts dl {457 margin-bottom: 0;458 }459 460 #main .attractfacts dt {461 font-weight: bold;462 display: inline;463 float: left;464 margin-right: 4px;465 }466 467 #main .attractfacts dd {468 margin-left: 10px;469 margin-bottom: 6px;470 }471 472 #main .attractfacts p {473 margin-top: 10px;474 }475 476 #main .attractfacts form {477 margin: 0;478 padding: 12px;479 background-color: #fdfa9e;480 }481 482 #main .attractfacts .mapIcon {483 float: right;484 margin-left: 10px;485 }486 487 /*** Nearby Offbeat Places ***/488 .specialtour ul {489 list-style-type: disc;490 margin-left: 40px;491 }492 493 .nearby ul {494 list-style-type: disc;495 margin-left: 25px;496 font-size: 1.2em;497 }498 499 /*** See Also ***/500 .seealso {501 font-style: italic;502 text-align: center;503 margin-top: 1em;504 }505 506 .newreports ul, .track ul, .headlines .blog ul, .headlines .tips ul, .countrysights ul, .hotelcity ul, .statesights ul {507 list-style-type: square;508 margin-left: 16px;509 }510 511 /*** Tips ***/512 .tips .attractfacts {513 clear: none;514 }515 516 /* To allow ad float */517 .tips .icon {518 float: right;519 width: 100px;520 height: 100px;521 margin-left: 10px;522 margin-bottom: 10px;523 }524 525 /*** Roadside Videos homepg ***/526 .videos .thumbnail {527 display: block;528 width: 120px;529 margin-bottom: 10px;530 }531 532 .videos p {533 margin: 0;534 font-size: 0.92em;535 }536 537 .videos p.more {538 margin-bottom: 10px;539 }540 541 #services .videos img {542 width: 160px;543 }544 545 /*** State Attractions Map ***/546 X.statemap {547 height: 1%;548 overflow: hidden;549 }550 551 X.statemap .thumbnail {552 display: block;553 float: left;554 width: 120px;555 margin-bottom: 10px;556 }557 558 X.statemap .description {559 float: right;560 width: 230px;561 margin: 0;562 }563 564 .location #main .toc {565 width: 160px;566 margin: 0 0 10px 15px;567 font-size: 0.9em;568 max-width: 40%;569 display: inline-block;570 }571 572 .location #main .toc img, X.statemap .thumbnail img {573 border: 1px solid black;574 margin: 0 0;575 max-width: 100%;576 }577 578 .location .city > img {579 padding-right: 15px;580 }581 582 X.location #main .intro {583 font-size: 0.9em;584 }585 586 .location #main .toc li {587 margin: 2px 0 2px 15px;588 list-style-type: square;589 }590 591 /*** Featured Attractions / Previews ***/592 .previews .thumbnail {593 display: block;594 float: left;595 width: 120px;596 margin-bottom: 10px;597 }598 599 .previews img {600 border: 1px solid black;601 }602 603 .previews .description {604 float: right;605 width: 200px;606 margin: 0;607 }608 609 .previews li .description a {610 font-weight: bold;611 }612 613 .previews p.more {614 margin-bottom: 10px;615 }616 617 .previews li .description p.location {618 line-height: 1.25em;619 }620 621 .previews li .description p.summary {622 font-size: 0.9em;623 line-height: 1.25em;624 }625 626 /*** Features and Field Trips ***/627 .features li {628 float: left;629 width: 210px;630 padding: 0;631 margin: 0 10px 0 0;632 }633 634 .features li p {635 font-size: 0.9em;636 }637 638 .features li.last {639 margin: 0;640 }641 642 .previews li, .videos li, .videos p.more, .features, .features p.more {643 clear: both;644 }645 646 .more {647 text-align: right;648 font-style: italic;649 font-weight: bold;650 }651 652 .more:before {653 content: "... ";654 }655 656 .poll, .debate, .hotelbook, .hotel, .specialtour, .Xstatemap, .tools, .report {657 background-color: #fdfa9e;658 padding: 8px;659 }660 661 X.home #main .headlines,662X.blog #main .headlines {663 background-color: #e0ede0;664 }665 666 .headlines {667 background-color: #cfe3cf;668 }669 670 x.featuredlist, x.featuredstate {671 background-color: #a7ff7e;672 padding: 8px;673 overflow: hidden;674 }675 676 .debate, .hotelbook {677 background-color: #dfffbb;678 }679 680 .tools {681 padding-bottom: 4px;682 font-size: 0.9em;683 border: 0;684 }685 686 .tools form, .tools form div {687 display: inline;688 }689 690 .tools dl dt {691 font-weight: bold;692 margin-top: 4px;693 }694 695 .tools dl dd {696 margin-left: 0;697 line-height: 1.6em;698 }699 700 .nav {701 background-color: #535353;702 color: #fff;703 }704 705 .nav a:link {706 color: #fff;707 text-decoration: none;708 }709 710 .nav a:visited {711 color: #fff;712 text-decoration: none;713 }714 715 .nav h6 {716 display: none;717 }718 719 .nav ul {720 padding: 0 10px;721 }722 723 .nav ul li {724 display: inline;725 margin: 0 2px;726 }727 728 .nav ul li:after {729 margin: 0 -2px 0 2px;730 content: " | ";731 }732 733 .nav ul li.last:after {734 margin: 0;735 content: " ";736 }737 738 /* Must have a space else FF3 breaks */739 .hotel_motel .group {740 margin-bottom: 10px;741 }742 743 .hotel_motel {744 margin-bottom: 20px;745 }746 747 .hotel ul {748 margin-bottom: 10px;749 }750 751 .hotel ul li {752 line-height: 1.5em;753 margin: 0;754 padding: 0;755 }756 757 .hotel ul li.newcol2 {758 margin-top: -12em;759 }760 761 .hotel ul li.col2 {762 margin-left: 80px;763 }764 765 .hotel p {766 line-height: 1.5em;767 }768 769 * html .hotel ul li {770 position: relative;771 }772 773 /* IE */774 .hotel .localhotels li {775 line-height: 1.15em;776 margin-bottom: 0px;777 padding-bottom: 6px;778 }779 780 .tip .intro, .outro {781 margin-top: 30px;782 font-size: 0.94em;783 font-style: italic;784 }785 786 .tip .intro {787 margin-bottom: 30px;788 }789 790 .tip .outro {791 margin-bottom: 50px;792 }793 794 /* TODO: This should be implicit based on the context, not explicitly named! */795 .fieldReviewListIcon {796 float: left;797 background-image: url(/images/icon_fieldreview110.gif);798 width: 110px;799 height: 39px;800 margin: 7px 10px 7px 10px;801 }802 803 .tourismNewsListIcon {804 float: left;805 background-image: url(/images/icon_tnews110.gif);806 width: 110px;807 height: 39px;808 margin: 7px 10px 7px 10px;809 }810 811 .mufflerListIcon {812 float: left;813 background-image: url(/images/icon_muffler110.gif);814 width: 110px;815 height: 39px;816 margin: 7px 10px 7px 10px;817 }818 819 .videoListIcon {820 float: left;821 background-image: url(/images/icon_video110.gif);822 width: 110px;823 height: 39px;824 margin: 7px 10px 7px 10px;825 }826 827 .blogListIcon {828 float: left;829 background-image: url(/images/icon_trunkations110.gif);830 width: 110px;831 height: 39px;832 margin: 7px 10px 7px 10px;833 }834 835 .mobileListIcon {836 float: left;837 background-image: url(/images/icon_mobile.gif);838 width: 110px;839 height: 39px;840 margin: 7px 10px 7px 10px;841 }842 843 /* retired attraction handling */844 .gone {845 background-color: #FFFF66;846 padding: 1em;847 }848 849 .retired {850 padding-bottom: 1em;851 }852 853 /* exception link style for hotel pages - DK */854 .hotels a {855 text-decoration: underline;856 }857 858 .relatedlinks ul {859 display: inline;860 list-style-type: none;861 }862 863 .relatedlinks li {864 display: inline;865 padding-right: 0.5em;866 }867 868 .sortlink {869 padding-left: 1em;870 }871 872 .tiplistIntro {873 background-color: #FFFF66;874 padding: 0.4em;875 margin-bottom: 0.4em;876 }877 878 .tiplistIntro p {879 margin: 0;880 }881 882 #main .relatedlinks {883 padding-top: 0.5em;884 }885 886 .mmIntro .relatedlinks {887 margin-left: auto;888 margin-right: auto;889 text-align: center;890 padding-top: 0;891 padding-bottom: 0.5em;892 }893 894 .mmIntro img {895 float: left;896 display: block;897 }898 899 .mmIntro p {900 font-style: italic;901 font-size: 13px;902 }903 904 .video-list .thumbnail img {905 height: 136px;906 width: 240px;907 }908 909 .video-list a {910 font-weight: bold;911 }912 913 .video-list .tabular {914 border-collapse: collapse;915 background-color: #CCFFCC;916 font-size: 12px;917 width: 100%;918 border: 1px solid black;919 }920 921 .video-list .tabular td {922 border: 1px solid black;923 padding: 0.5em;924 vertical-align: top;925 }926 927 .video-list .morelink {928 float: right;929 }930 931 .video-list .heading {932 font-weight: bold;933 color: #CCFFCC;934 background-color: #006600;935 }936 937 .statelist {938 background-color: #FDFA9E;939 padding: 0.5em;940 width: 100%;941 float: left;942 box-sizing: border-box;943 }944 945 .statelist ul {946 float: left;947 color: gray;948 width: 100%;949 -webkit-column-count: 9;950 -moz-column-count: 9;951 -ms-column-count: 9;952 -o-column-count: 9;953 column-count: 9;954 -webkit-column-break-inside: avoid;955 /* Chrome, Safari */956 page-break-inside: avoid;957 /* Theoretically FF 20+ */958 break-inside: avoid-column;959 /* IE 11 */960 }961 962 .video-list .videosubmit {963 background-color: #CFE3CF;964 padding: 0.5em;965 width: 35%;966 float: right;967 }968 969 .video-list .titleicon {970 position: absolute;971 right: 20px;972 top: 10px;973 }974 975 .statevideos {976 clear: both;977 margin-bottom: 1em;978 margin-top: 0.5em;979 }980 981 .mobileBoilerPlate {982 background-color: #ffff66;983 -moz-border-radius: 5px;984 -webkit-border-radius: 5px;985 border: 1px solid #ff9900;986 padding: 8px;987 margin-bottom: 10px;988 margin-top: 2em;989 font-size: 12px;990 }991 992 .researchLogo {993 width: 213px;994 height: 43px;995 background-image: url(/images/research-mobile-ttl.gif);996 margin: 4px auto 6px;997 }998 999 .mobileBoilerPlate .logo {1000 width: 55px;1001 height: 100px;1002 background-image: url(/images/research-mobile-phone.gif);1003 float: left;1004 margin-right: 10px;1005 }1006 1007 .popupDialog {1008 display: none;1009 position: fixed;1010 width: 100%;1011 height: 100%;1012 top: 0px;1013 left: 0px;1014 z-index: 999;1015 }1016 1017 .modalBackground {1018 filter: Alpha(Opacity=40);1019 -moz-opacity: 0.4;1020 opacity: 0.4;1021 width: 100%;1022 height: 100%;1023 background-color: #999999;1024 position: fixed;1025 top: 0px;1026 left: 0px;1027 z-index: 998;1028 }1029 1030 .modalContainer {1031 position: relative;1032 top: 50%;1033 }1034 1035 .modal {1036 background-color: #CCFF99;1037 border: solid 1px #006600;1038 position: relative;1039 z-index: 1000;1040 padding: 0px;1041 width: 600px;1042 height: 350px;1043 top: -165px;1044 margin-left: auto;1045 margin-right: auto;1046 overflow: hidden;1047 }1048 1049 .modalTop {1050 background-color: #003300;1051 padding: 4px;1052 color: #ffffff;1053 text-align: right;1054 }1055 1056 .modalTop a, .modalTop a:visited {1057 color: #ffffff;1058 }1059 1060 .modalTop a:hover {1061 text-decoration: none;1062 font-weight: bold;1063 }1064 1065 .modalTop span {1066 float: left;1067 }1068 1069 .modalBody {1070 overflow: auto;1071 }1072 1073 body.popup {1074 width: auto;1075 min-width: 0;1076 padding: 5px;1077 background-color: #CCFF99;1078 overflow: hidden;1079 }1080 1081 body.popup a {1082 font-weight: bold;1083 }1084 1085 body.popup #container {1086 padding-left: 30px;1087 padding-right: 30px;1088 }1089 1090 #errors li {1091 color: red;1092 font-weight: bold;1093 line-height: 1em;1094 }1095 1096 .popupIframe {1097 width: 600px;1098 height: 350px;1099 overflow: hidden;1100 background-color: #CCFF99;1101 }1102 1103 body.popup #content, body.popup #popupmain {1104 position: relative;1105 display: inline-block;1106 }1107 1108 body.popup #content {1109 left: 50%;1110 }1111 1112 body.popup #popupmain {1113 left: -50%;1114 overflow-y: auto;1115 overflow-x: hidden;1116 }1117 1118 body.popup h1 {1119 font-size: 1.25em;1120 }1121 1122 #regbox .info {1123 font-size: 85%;1124 }1125 1126 #regbox input.submit {1127 margin-bottom: 0.5em;1128 margin-top: 0.5em;1129 }1130 1131 #regbox .createAccount {1132 left: 50%;1133 position: relative;1134 display: inline-block;1135 margin-top: 1em;1136 }1137 1138 #regbox .createAccount a {1139 left: -50%;1140 position: relative;1141 display: block;1142 }1143 1144 #regbox input {1145 margin-top: 0.25em;1146 margin-bottom: 0.25em;1147 }1148 1149 #regbox .tip {1150 font-size: 75%;1151 }1152 1153 #regbox input.text {1154 width: 17em;1155 background-color: white;1156 }1157 1158 .validate-error {1159 color: red;1160 vertical-align: baseline;1161 font-weight: bold;1162 }1163 1164 .error-msg {1165 font-size: 0.75em;1166 text-align: left;1167 padding-bottom: 0.5em;1168 }1169 1170 .maplink {1171 display: block;1172 vertical-align: top;1173 }1174 1175 .maplink a {1176 display: inline-block;1177 vertical-align: top;1178 }1179 1180 .maplink .image {1181 width: 30px;1182 height: 30px;1183 background-image: url(/images/map3-30x30.png);1184 margin-top: 0;1185 }1186 1187 .rarating {1188 height: 22px;1189 display: inline-block;1190 background-image: url(/images/ratings-icon-on.png);1191 }1192 1193 .rarating-bg {1194 float: right;1195 background-image: url(/images/ratings-icon-off.png);1196 background-repeat: repeat-x;1197 width: 80px;1198 height: 22px;1199 }1200