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 class="js" lang="en">3 <head>4 <style>5*::before,6*::after {7 box-sizing: border-box;8}9 10article,11aside,12dialog,13figcaption,14figure,15footer,16header,17hgroup,18main,19nav,20section {21 display: block;22}23 24:focus::-webkit-input-placeholder {25 color: transparent;26}27 28:focus::-moz-placeholder {29 color: transparent;30}31 32:focus:-moz-placeholder {33 color: transparent;34}35 36:focus:-ms-input-placeholder {37 color: transparent;38}39 40/* Structure */41html {42 font-size: 100%;43 -ms-text-size-adjust: none;44 -webkit-text-size-adjust: none;45}46 47body {48 margin: 0;49 font-family: "Open Sans", sans-serif;50 font-size: 14px;51 font-size: .875rem;52 line-height: 1.6;53 word-wrap: break-word;54 background: #f7f7f7;55 -webkit-font-smoothing: antialiased;56}57 58.container {59 position: relative;60 width: 100%;61 max-width: 1080px;62 margin: 0 auto;63}64 65.container--outer {66 margin: 25px auto;67 box-shadow: 0 0 10px rgba(50, 50, 50, .17);68}69 70.wrapper {71 padding: 25px;72 background: #fff;73}74 75.flex {76 display: -webkit-flex;77 display: flex;78}79 80.primary {81 -webkit-flex: 1 0 65.83%;82 flex: 1 0 65.83%;83 -webkit-order: 1;84 order: 1;85 min-width: 0;86}87 88.sidebar {89 -webkit-flex: 1 0 31.66%;90 flex: 1 0 31.66%;91 -webkit-order: 2;92 order: 2;93 min-width: 0;94 margin: 0 0 0 2.5%;95}96 97.sidebar--left {98 -webkit-order: 0;99 order: 0;100 margin: 0 2.5% 0 0;101}102 103.clearfix {104 display: block;105}106 107.clearfix::after {108 display: block;109 height: 0;110 padding: 0;111 margin: 0;112 clear: both;113 line-height: 0;114 visibility: hidden;115 content: "";116}117 118input,119button,120select,121optgroup,122textarea {123 margin: 0;124 font-family: inherit;125 font-size: inherit;126 line-height: inherit;127}128 129/* Button */130.btn {131 padding: 5px 10px;132 font-weight: 700;133 color: #fff;134 white-space: pre-line;135 background: #2a2a2a;136}137 138.btn:hover {139 color: #fff;140 background: #fd8e07;141}142 143/* Animation */144.menu__item,145.btn {146 transition: background-color .25s ease-out;147}148 149/* Typography */150h1,151h2,152h3,153h4,154h5,155h6 {156 margin: 0 0 20px;157 margin: 0 0 1.25rem;158 font-weight: 700;159 line-height: 1.3;160 color: #000;161}162 163h1 {164 font-size: 32px;165 font-size: 2rem;166}167 168h2 {169 font-size: 24px;170 font-size: 1.5rem;171}172 173h3 {174 font-size: 20px;175 font-size: 1.25rem;176}177 178h4 {179 font-size: 18px;180 font-size: 1.125rem;181}182 183h5 {184 font-size: 16px;185 font-size: 1rem;186}187 188h6 {189 font-size: 16px;190 font-size: 1rem;191}192 193a {194 color: #000;195 text-decoration: none;196}197 198a:hover {199 color: #fd8e07;200}201 202hr {203 margin: 0 0 20px;204 border: 0;205 border-top: 1px solid #dadada;206}207 208p {209 margin: 0 0 20px;210 margin: 0 0 1.25rem;211}212 213b,214strong {215 font: inherit;216 font-weight: 700;217}218 219i,220em {221 font: inherit;222 font-style: italic;223}224 225ol,226ul {227 padding: 0;228 margin: 0;229}230 231small {232 font-size: 12px;233 font-size: .75rem;234}235 236mark {237 background-color: #fd5;238}239 240figure {241 margin: 0 0 20px;242 margin: 0 0 1.25rem;243}244 245figcaption {246 margin-top: 4px;247 margin-top: .25rem;248 color: #666;249}250 251figcaption h4 {252 margin: 0;253 color: inherit;254}255 256pre,257code,258kbd,259samp {260 font-family: "Liberation Mono", monospace;261 font-size: inherit;262}263 264pre,265code {266 background-color: #f5f5f5;267 border: 1px solid #ebebeb;268}269 270code {271 padding: 0 5px;272 color: #c33;273}274 275pre {276 display: block;277 padding: 0;278 padding: 1.25rem;279 margin-bottom: 20px;280 margin-bottom: 1.25rem;281 overflow: auto;282 color: #000;283}284 285pre code {286 padding: 0;287 color: inherit;288 white-space: inherit;289 background: inherit;290 border: 0;291}292 293pre.listing {294 font-size: 0.7em;295}296 297kbd {298 padding: 2px 3px;299 color: #fff;300 background-color: #2a2a2a;301}302 303blockquote {304 display: block;305 padding: 5px 0 5px 15px;306 margin: 0 0 20px;307 margin: 0 0 1.25rem;308 line-height: 1.6;309 border-left: 5px solid #fd8e07;310}311 312blockquote p:last-child {313 margin: 0;314}315 316blockquote footer {317 text-align: right;318}319 320sup,321sub {322 font-size: 10px;323 font-size: .625rem;324 font-style: normal;325}326 327sup {328 vertical-align: super;329}330 331sub {332 vertical-align: sub;333}334 335abbr[title] {336 text-decoration: none;337 cursor: help;338 border-bottom: 1px dotted #000;339}340 341q {342 font-style: italic;343}344 345address {346 margin-bottom: 20px;347 margin-bottom: 1.25rem;348 font-family: "Consolas", Courier New, Courier, monospace;349 line-height: 1.5;350}351 352dl {353 margin: 0 0 10px 20px;354}355 356dt,357dd {358 display: list-item;359}360 361dt {362 font-weight: bold;363 list-style-type: square;364}365 366dd {367 margin-left: 20px;368 list-style-type: circle;369}370 371select {372 max-width: 100%;373}374 375.warning {376 padding: 20px 10px;377 text-align: center;378 border: 1px solid #ddd;379}380 381.warning__icon {382 margin-bottom: 20px;383 fill: #ddd;384}385 386@media screen {387 .summaries .list__item {388 background: #f5f5f5;389 }390 391 .summaries .list__item .list__header,392 .summaries .list__item .list__excerpt {393 padding-left: 0.5rem;394 padding-right: 0.5rem;395 }396}397 398@media screen and (min-width: 1100px) {399 :root {400 --small-summaries-gap: 1rem;401 }402 403 .summaries .small {404 font-size: 90%;405 display: flex;406 flex-wrap: wrap;407 column-gap: var(--small-summaries-gap);408 }409 410 .summaries .small {411 }412 413 .summaries .small .list__item {414 width: calc(50% - 0.5 * var(--small-summaries-gap));415 position: relative;416 }417 418 .summaries .small .list__item h1 {419 font-size: 175%;420 }421 422 .summaries .small .list__item .list__excerpt{423 max-height: 10em;424 overflow-y: clip;425 margin-bottom: 2.5rem;426 }427 428 .summaries .small .list__item .list__footer {429 position: absolute;430 bottom: 1.25rem;431 width: 100%;432 }433}434 435/* Header */436.header {437 background: #fff;438}439 440.logo {441 padding: 25px;442}443 444.logo__link {445 display: inline-block;446}447 448.logo__item {449 display: inline-block;450 vertical-align: middle;451}452 453.logo__img {454 max-height: 256px;455}456 457.logo__text {458 text-transform: uppercase;459}460 461.logo--mixed .logo__item {462 margin: .5rem auto;463}464 465.logo--mixed .logo__img {466 max-width: 128px;467 max-height: 128px;468}469 470.logo--mixed .logo__text {471 padding: 0 1rem;472}473 474.logo__title {475 font-size: 32px;476 font-size: 2rem;477 font-weight: 700;478 line-height: 1;479 color: #000;480}481 482.logo__tagline {483 display: inline-block;484 padding-top: 10px;485 margin-top: 10px;486 font-size: 14px;487 font-size: .875rem;488 font-weight: 700;489 line-height: 1;490 color: #fd8e07;491 border-top: 1px solid #ebebeb;492}493 494.divider {495 height: 5px;496 margin: 0;497 background: #fd8e07;498 border: 0;499}500 501/* Main menu */502.no-js .menu__btn {503 display: none;504}505 506.no-js .menu {507 flex-direction: column;508}509 510.menu {511 display: flex;512 justify-content: space-between;513 position: relative;514 background: #2a2a2a;515}516 517.menu__btn {518 background-color: #2a2a2a;519 display: flex;520 padding: 0;521 font: inherit;522 color: #fff;523 border: 0;524 outline: 0;525 z-index: 10;526 flex-grow: 11;527}528 529.menu__btn-title::before {530 height: 2rem;531 width: 2rem;532 position: absolute;533 left: -1.25rem;534 top: 0.25rem;535 mask: url("../breeze-icons/application-menu.svg");536 background: white;537 content: " ";538}539 540.menu__btn-title {541 margin-left: 1.5rem;542 position: relative;543 display: inline-block;544 padding: .625rem .9375rem;545 font-weight: 700;546 text-align: left;547 text-transform: uppercase;548 cursor: pointer;549 -webkit-user-select: none;550 -moz-user-select: none;551 -ms-user-select: none;552 -o-user-select: none;553 user-select: none;554}555 556:focus > .menu__btn-title {557 box-shadow: inset 0 0 1px 3px #fd8e07;558}559 560button:not(:-moz-focusring):focus > .menu__btn-title {561 box-shadow: none;562}563 564.menu__btn:focus,565.menu__btn-title:focus,566.search-query:focus {567 outline: 0;568}569 570.menu__btn--active .menu__btn-title::before {571 background-color: #fd8e07;572}573 574.js .menu__btn--active {575 color: #fd8e07;576 flex-grow: 11;577}578 579.menu__list {580 list-style: none;581 background: #2a2a2a;582}583 584.menu__item:hover {585 background: #fd8e07;586}587 588.menu__item:first-child {589 border: 0;590}591 592.menu__item--active {593 background: #fd8e07;594}595 596.menu__link {597 display: block;598 padding: 10px 15px;599 padding: .625rem .9375rem;600 font-weight: 700;601 color: #fff;602 text-transform: uppercase;603}604 605.menu__link:hover {606 color: #fff;607}608 609.js .menu__list {610 position: absolute;611 z-index: 1;612 visibility: hidden;613 -webkit-transform: scaleY(0);614 transform: scaleY(0);615 -webkit-transform-origin: top left;616 transform-origin: top left;617 width: 100%;618}619 620.js .menu__list--active {621 visibility: visible;622 border-top: 1px solid rgba(255, 255, 255, .1);623 border-bottom: 1px solid rgba(255, 255, 255, .1);624 -webkit-transform: scaleY(1);625 transform: scaleY(1);626 top: 100%;627 width: 100%;628}629 630.menu__list--transition {631 transition: visibility .15s ease, transform .15s ease, -webkit-transform .15s ease;632}633 634.menu__search__form {635 display: flex;636 align-items: center;637 padding: .5rem;638 z-index: 10;639 background: #2a2a2a;640}641 642.menu__search__form .search-query {643 font-size: 14px;644 padding: .125rem;645 width: 100%;646}647 648.menu__search__form .search-btn {649 aspect-ratio: 1/1;650 border: 0;651 background-image: url("../breeze-icons/edit-find.svg");652 background-color: #fd8e07;653 background-position: center;654 background-repeat: no-repeat;655 height: 1.8rem;656 display: inline-block;657 cursor: pointer;658}659 660@media screen and (min-width: 767px) {661 .no-js .menu {662 flex-direction: row;663 }664 665 .menu {666 border-bottom: 5px solid #fd8e07;667 }668 669 .menu__btn {670 display: none;671 }672 673 .menu__list,674 .js .menu__list {675 position: relative;676 display: -webkit-flex;677 display: flex;678 -webkit-flex-wrap: wrap;679 flex-wrap: wrap;680 visibility: visible;681 border: 0;682 -webkit-transform: none;683 transform: none;684 width: unset;685 flex-grow: 11;686 }687 688 .menu__item {689 border-left: 1px solid rgba(255, 255, 255, .1);690 }691 692 .menu__search__form {693 flex-basis: 25%;694 }695}696 697/* Posts/Pages */698.post__header,699.main__header {700 margin-bottom: 20px;701 margin-bottom: 1.25rem;702}703 704.main__title {705 font-size: 28px;706 font-size: 1.75rem;707}708 709.main__content {710 margin-bottom: 20px;711 margin-bottom: 1.25rem;712}713 714.meta {715 font-size: 13px;716 font-size: .8125rem;717 vertical-align: baseline;718}719 720.meta,721.meta a {722 color: #666;723}724 725.meta a:hover {726 color: #fd8e07;727}728 729.meta__item {730 display: inline;731 margin-left: 15px;732}733 734.meta__item:first-child {735 margin-left: 0;736}737 738.meta__icon {739 margin-right: 5px;740 vertical-align: middle;741 fill: #c4c4c4;742}743 744.meta__text {745 vertical-align: middle;746}747 748.post__title {749 margin: 0;750}751 752.post__meta {753 padding: 5px 0;754 margin-top: 10px;755 margin-top: .625rem;756 border-top: 1px dotted #ebebeb;757 border-bottom: 1px dotted #ebebeb;758}759 760.post__lead {761 margin-top: 4px;762 margin-top: .25rem;763 margin-bottom: 0;764 font-size: 16px;765 font-size: 1rem;766 font-style: italic;767}768 769.post__thumbnail {770 max-width: 1030px;771 margin: 0 0 20px;772 margin-bottom: 0 0 1.25rem;773}774 775.post__thumbnail img {776 width: 100%;777}778 779.content a,780.warning a,781.authorbox__description a {782 font-weight: 700;783 color: #fd8e07;784}785 786.content a:hover,787.warning a:hover,788.authorbox__description a:hover {789 color: #fd8e07;790 text-decoration: underline;791}792 793.summaries .content.list__excerpt a {794 color: inherit;795 font-weight: inherit;796}797 798.summaries .content.list__excerpt a:hover {799 text-decoration: none;800}801 802.content .alignnone {803 display: block;804 margin: 20px 0;805 margin: 1.25rem 0;806}807 808.content .aligncenter {809 display: block;810 margin: 20px auto;811 margin: 1.25rem auto;812}813 814.content .alignleft {815 display: inline;816 float: left;817 margin: 5px 20px 20px 0;818 margin: .3125rem 1.25rem 1.25rem 0;819}820 821.content .alignright {822 display: inline;823 float: right;824 margin: 5px 0 20px 20px;825 margin: .3125rem 0 1.25rem 1.25rem;826}827 828.content ul {829 list-style: square;830}831 832.content ol {833 list-style: decimal;834}835 836.content ul,837.content ol {838 margin: 0 0 20px 40px;839}840 841.content ul ul,842.content ol ol,843.content ol ul,844.content ul ol {845 margin: 0 0 0 40px;846}847 848.content li {849 margin-bottom: 5px;850}851 852.post__footer {853 margin-top: 20px;854 margin-top: 1.25rem;855}856 857/* Post tags */858.tags {859 margin-bottom: 20px;860 margin-bottom: 1.25rem;861 font-size: 12px;862 font-size: .75rem;863 line-height: 1;864 color: #fff;865}866 867.tags__list {868 list-style: none;869}870 871.tags__item {872 float: left;873 margin: 0 6px 6px 0;874 margin: 0 .375rem .375rem 0;875 text-transform: uppercase;876 background: #2a2a2a;877}878 879.tags__item:hover {880 background: #fd8e07;881}882 883.tags__link,884.tags__link:hover {885 display: block;886 padding: 10px 15px;887}888 889.tags__badge {890 float: left;891 width: 32px;892 height: 32px;893 padding: 8px;894 margin-right: 6px;895 background: #fd8e07;896 fill: #fff;897}898 899/* Table of Contents */900.toc {901 margin-bottom: 20px;902 font-weight: 700;903 color: #7a8288;904 background: #fff;905 border-color: #ebebeb;906 border-style: solid;907 border-top-width: 0;908 border-right-width: 0;909 border-bottom-width: 0;910 border-left-width: 0;911}912 913.content .toc {914 border-top-width: 2px;915 border-bottom-width: 2px;916 padding-top: 8px;917}918 919.content .toc nav ul {920 font-size: 0.9rem;921 margin-top: 5px;922 margin-bottom: 10px;923 margin-left: 20px;924}925 926.content .toc nav ul li a {927 font-weight: 400;928}929 930.content .toc nav ul li {931 margin-bottom: 0;932}933 934.content .toc nav ul {935 margin-top: 0;936 margin-bottom: 5px;937}938 939.toc__title {940 padding: 5px 10px;941 color: #fff;942 text-transform: uppercase;943 -webkit-user-select: none;944 -moz-user-select: none;945 -ms-user-select: none;946 -o-user-select: none;947 user-select: none;948 background: #2a2a2a;949}950 951.toc__menu ul {952 margin: 0;953 list-style: none;954}955 956.toc__menu ul ul ul a {957 padding-left: 25px;958}959 960.toc__menu ul ul ul ul a {961 padding-left: 45px;962}963 964.toc__menu ul ul ul ul ul a {965 padding-left: 65px;966}967 968.toc__menu ul ul ul ul ul ul a {969 padding-left: 85px;970}971 972.toc__menu li {973 margin: 0;974}975 976.toc__menu a {977 display: block;978 padding: 5px 10px;979 color: #fd8e07;980 border-bottom: 1px solid #ebebeb;981}982 983.toc__menu a:hover {984 text-decoration: underline;985}986 987/* Author Box */988.authorbox {989 padding: 25px 0;990 margin-bottom: 25px;991 line-height: 1.5;992 border-top: 1px solid #ebebeb;993 border-bottom: 1px solid #ebebeb;994}995 996.authorbox__avatar {997 float: left;998 padding: 3px;999 margin: 0 25px 0 0;1000 border: 1px solid #ebebeb;1001}1002 1003.authorbox__header {1004 margin-bottom: 10px;1005}1006 1007.authorbox__name {1008 font-size: 16px;1009 font-size: 1rem;1010 font-weight: 700;1011}1012 1013/* List content */1014.list__heading, .list__item {1015 margin-bottom: 30px;1016 margin-bottom: 1.875rem;1017 border-bottom: solid #2a2a2a;1018 border-bottom-width: 5px;1019 border-bottom-width: 0.3125rem;1020}1021 1022.list__item {1023 padding-bottom: 20px;1024 padding-bottom: 1.25rem;1025}1026 1027.list__header {1028 margin-bottom: 10px;1029 margin-bottom: .625rem;1030}1031 1032.list__meta {1033 margin-top: 5px;1034}1035 1036.list__thumbnail {1037 float: left;1038 margin: 0 20px 0 0;1039}1040 1041.list__thumbnail img {1042 width: 100%;1043 max-width: 235px;1044}1045 1046.list__footer-readmore {1047 float: right;1048 margin-top: 10px;1049}1050 1051/* Pagination */1052.pagination {1053 margin-top: 20px;1054}1055 1056.pagination__item {1057 display: inline-block;1058 padding: 10px 15px;1059 font-weight: 700;1060 color: #000;1061 background: #f5f5f5;1062}1063 1064.pagination__item:hover,1065.pagination__item--current {1066 color: #fff;1067 background: #fd8e07;1068}1069 1070/* Pager (prev/next links) navigation */1071.pager {1072 -webkit-justify-content: space-between;1073 justify-content: space-between;1074 padding-top: 25px;1075 padding-bottom: 25px;1076 margin-bottom: 25px;1077 border-bottom: 1px solid #ebebeb;1078}1079 1080.pager__subtitle {1081 display: block;1082 margin-bottom: 5px;1083 font-weight: 700;1084 line-height: 1;1085 text-transform: uppercase;1086}1087 1088.pager__title {1089 margin-bottom: 0;1090 overflow: hidden;1091 font-size: 13px;1092 font-size: .8125rem;1093}1094 1095.pager__item {1096 -webkit-flex: 1 1 50%;1097 flex: 1 1 50%;1098 max-width: 48%;1099}1100 1101.pager__item--next {1102 margin-left: auto;1103 text-align: right;1104}1105 1106.pager__link {1107 display: block;1108}1109 1110/* Images / Video */1111img {1112 width: auto\9; /* ie8 */1113 max-width: 100%;1114 height: auto;1115 vertical-align: bottom;1116}1117 1118iframe,1119embed,1120object,1121video {1122 max-width: 100%;1123}1124 1125/* Table */1126table {1127 width: 100%;1128 margin-bottom: 20px;1129 margin-bottom: 1.25rem;1130 border-spacing: 0;1131 border-collapse: collapse;1132 border-top: 1px solid #ebebeb;1133 border-left: 1px solid #ebebeb;1134}1135 1136td,1137th {1138 padding: 5px 10px;1139 border-right: 1px solid #ebebeb;1140 border-bottom: 1px solid #ebebeb;1141}1142 1143th {1144 font-weight: 700;1145}1146 1147/* Forms */1148input {1149 padding: 5px;1150 font-size: 12px;1151 vertical-align: middle;1152 background: #f5f5f5;1153 border: 1px solid #ebebeb;1154 transition: all .25s ease-in-out;1155}1156 1157input[type=text],1158input[type=email],1159input[type=tel],1160input[type=url] {1161 width: 60%;1162}1163 1164input[type=text]:hover,1165input[type=email]:hover,1166input[type=tel]:hover,1167input[type=url]:hover,1168textarea:hover {1169 border: 1px solid #aaa;1170}1171 1172input[type=submit],1173input[type=reset] {1174 display: inline-block;1175 min-width: 150px;1176 font-weight: 700;1177 color: #fff;1178 text-transform: uppercase;1179 cursor: pointer;1180 background: #2a2a2a;1181 border: 0;1182 transition: all .1s linear;1183 -webkit-appearance: none;1184}1185 1186input[type=submit]:hover,1187input[type=reset]:hover {1188 background: #fd8e07;1189}1190 1191textarea {1192 width: 96%;1193 padding: 5px;1194 overflow: auto;1195 line-height: 1.5;1196 resize: vertical;1197 background: #f5f5f5;1198 border: 1px solid rgba(0, 0, 0, .1);1199}1200