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>2<html class="wf-keplerstd-i4-active wf-keplerstd-n4-active wf-keplerstd-n9-active wf-nimbussans-n9-active wf-nimbussans-i4-active wf-nimbussans-n4-active wf-active" dir="ltr" lang="en">3 <head>4 <style>5 /* @override 6 http://local.talentgrowthadvisors.com/_/css/layout.css7 http://talentgrowthadvisors.com/_/css/layout.css?v=28 http://talentgrowthadvisors.dev/_/css/layout.css?v=29 http://talentgrowthadvisors.test/_/css/layout.css?* */10 11@charset "UTF-8";12@font-face {13 font-family: "Socialico";14 src: url("/fonts/socialico/Socialico.eot?") format("eot"), url("/fonts/socialico/Socialico.woff") format("woff"), url("/fonts/socialico/Socialico.ttf") format("truetype"), url("/fonts/socialico/Socialico.svg#Socialico") format("svg");15 font-weight: normal;16 font-style: normal17}18 19.scale {20 max-width: 100%;21 height: auto22}23 24 25/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */26 27html {28 font-family: sans-serif;29 -ms-text-size-adjust: 100%;30 -webkit-text-size-adjust: 100%31}32 33body {34 margin: 035}36 37article,38aside,39details,40figcaption,41figure,42footer,43header,44hgroup,45main,46menu,47nav,48section,49summary {50 display: block51}52 53audio,54canvas,55progress,56video {57 display: inline-block;58 vertical-align: baseline59}60 61audio:not([controls]) {62 display: none;63 height: 064}65 66[hidden],67template {68 display: none69}70 71a {72 background-color: transparent73}74 75a:active,76a:hover {77 outline: 078}79 80abbr[title] {81 border-bottom: 1px dotted82}83 84b,85strong {86 font-weight: bold87}88 89dfn {90 font-style: italic91}92 93h1 {94 font-size: 2em;95 margin: 0.67em 096}97 98mark {99 background: #ff0;100 color: #000101}102 103small {104 font-size: 80%105}106 107sub,108sup {109 font-size: 75%;110 line-height: 0;111 position: relative;112 vertical-align: baseline113}114 115sup {116 top: -0.5em117}118 119sub {120 bottom: -0.25em121}122 123img {124 border: 0125}126 127svg:not(:root) {128 overflow: hidden129}130 131figure {132 margin: 1em 40px133}134 135hr {136 box-sizing: content-box;137 height: 0138}139 140pre {141 overflow: auto142}143 144code,145kbd,146pre,147samp {148 font-family: monospace, monospace;149 font-size: 1em150}151 152button,153input,154optgroup,155select,156textarea {157 color: inherit;158 font: inherit;159 margin: 0160}161 162button {163 overflow: visible164}165 166button,167select {168 text-transform: none169}170 171button,172html input[type=button],173input[type=reset],174input[type=submit] {175 -webkit-appearance: button;176 cursor: pointer177}178 179button[disabled],180html input[disabled] {181 cursor: not-allowed182}183 184button::-moz-focus-inner,185input::-moz-focus-inner {186 border: 0;187 padding: 0188}189 190input {191 line-height: normal192}193 194input[type=checkbox],195input[type=radio] {196 box-sizing: border-box;197 padding: 0198}199 200input[type=number]::-webkit-inner-spin-button,201input[type=number]::-webkit-outer-spin-button {202 height: auto203}204 205input[type=search] {206 -webkit-appearance: textfield;207 box-sizing: content-box208}209 210input[type=search]::-webkit-search-cancel-button,211input[type=search]::-webkit-search-decoration {212 -webkit-appearance: none213}214 215legend {216 border: 0;217 padding: 0218}219 220textarea {221 overflow: auto222}223 224optgroup {225 font-weight: bold226}227 228table {229 border-collapse: collapse;230 border-spacing: 0231}232 233td,234th {235 padding: 0236}237 238.foundation-mq {239 font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"240}241 242html {243 font-size: 100%;244 box-sizing: border-box245}246 247*,248:after,249:before {250 box-sizing: inherit251}252 253body {254 padding: 0;255 margin: 0;256 font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;257 font-weight: normal;258 line-height: 1.5;259 color: #0a0a0a;260 background: #fefefe;261 -webkit-font-smoothing: antialiased;262 -moz-osx-font-smoothing: grayscale263}264 265img {266 max-width: 100%;267 height: auto;268 -ms-interpolation-mode: bicubic;269 display: inline-block;270 vertical-align: middle271}272 273textarea {274 height: auto;275 min-height: 50px;276 border-radius: 0277}278 279select {280 width: 100%;281 border-radius: 0282}283 284#map_canvas embed,285#map_canvas img,286#map_canvas object,287.map_canvas embed,288.map_canvas img,289.map_canvas object,290.mqa-display embed,291.mqa-display img,292.mqa-display object {293 max-width: none!important294}295 296button {297 -webkit-appearance: none;298 -moz-appearance: none;299 background: transparent;300 padding: 0;301 border: 0;302 border-radius: 0;303 line-height: 1304}305 306[data-whatinput=mouse] button {307 outline: 0308}309 310.is-visible {311 display: block!important312}313 314.is-hidden {315 display: none!important316}317 318.row {319 max-width: 75rem;320 margin-left: auto;321 margin-right: auto322}323 324.row:after,325.row:before {326 content: ' ';327 display: table328}329 330.row:after {331 clear: both332}333 334.row.collapse>.column,335.row.collapse>.columns {336 padding-left: 0;337 padding-right: 0338}339 340.row .row {341 margin-left: -0.625rem;342 margin-right: -0.625rem;343 max-width: none344}345 346@media screen and (min-width:40em) {347 .row .row {348 margin-left: -0.9375rem;349 margin-right: -0.9375rem350 }351}352 353.row .row.collapse {354 margin-left: 0;355 margin-right: 0356}357 358.row.expanded {359 max-width: none360}361 362.row.expanded .row {363 margin-left: auto;364 margin-right: auto365}366 367.column,368.columns {369 width: 100%;370 float: left;371 padding-left: 0.625rem;372 padding-right: 0.625rem373}374 375@media screen and (min-width:40em) {376 .column,377 .columns {378 padding-left: 0.9375rem;379 padding-right: 0.9375rem380 }381}382 383.column:last-child:not(:first-child),384.columns:last-child:not(:first-child) {385 float: right386}387 388.column.end:last-child:last-child,389.end.columns:last-child:last-child {390 float: left391}392 393.column.row.row,394.row.row.columns {395 float: none396}397 398.row .column.row.row,399.row .row.row.columns {400 padding-left: 0;401 padding-right: 0;402 margin-left: 0;403 margin-right: 0404}405 406.small-1 {407 width: 8.33333%408}409 410.small-push-1 {411 position: relative;412 left: 8.33333%413}414 415.small-pull-1 {416 position: relative;417 left: -8.33333%418}419 420.small-offset-0 {421 margin-left: 0%422}423 424.small-2 {425 width: 16.66667%426}427 428.small-push-2 {429 position: relative;430 left: 16.66667%431}432 433.small-pull-2 {434 position: relative;435 left: -16.66667%436}437 438.small-offset-1 {439 margin-left: 8.33333%440}441 442.small-3 {443 width: 25%444}445 446.small-push-3 {447 position: relative;448 left: 25%449}450 451.small-pull-3 {452 position: relative;453 left: -25%454}455 456.small-offset-2 {457 margin-left: 16.66667%458}459 460.small-4 {461 width: 33.33333%462}463 464.small-push-4 {465 position: relative;466 left: 33.33333%467}468 469.small-pull-4 {470 position: relative;471 left: -33.33333%472}473 474.small-offset-3 {475 margin-left: 25%476}477 478.small-5 {479 width: 41.66667%480}481 482.small-push-5 {483 position: relative;484 left: 41.66667%485}486 487.small-pull-5 {488 position: relative;489 left: -41.66667%490}491 492.small-offset-4 {493 margin-left: 33.33333%494}495 496.small-6 {497 width: 50%498}499 500.small-push-6 {501 position: relative;502 left: 50%503}504 505.small-pull-6 {506 position: relative;507 left: -50%508}509 510.small-offset-5 {511 margin-left: 41.66667%512}513 514.small-7 {515 width: 58.33333%516}517 518.small-push-7 {519 position: relative;520 left: 58.33333%521}522 523.small-pull-7 {524 position: relative;525 left: -58.33333%526}527 528.small-offset-6 {529 margin-left: 50%530}531 532.small-8 {533 width: 66.66667%534}535 536.small-push-8 {537 position: relative;538 left: 66.66667%539}540 541.small-pull-8 {542 position: relative;543 left: -66.66667%544}545 546.small-offset-7 {547 margin-left: 58.33333%548}549 550.small-9 {551 width: 75%552}553 554.small-push-9 {555 position: relative;556 left: 75%557}558 559.small-pull-9 {560 position: relative;561 left: -75%562}563 564.small-offset-8 {565 margin-left: 66.66667%566}567 568.small-10 {569 width: 83.33333%570}571 572.small-push-10 {573 position: relative;574 left: 83.33333%575}576 577.small-pull-10 {578 position: relative;579 left: -83.33333%580}581 582.small-offset-9 {583 margin-left: 75%584}585 586.small-11 {587 width: 91.66667%588}589 590.small-push-11 {591 position: relative;592 left: 91.66667%593}594 595.small-pull-11 {596 position: relative;597 left: -91.66667%598}599 600.small-offset-10 {601 margin-left: 83.33333%602}603 604.small-12 {605 width: 100%606}607 608.small-offset-11 {609 margin-left: 91.66667%610}611 612.small-up-1>.column,613.small-up-1>.columns {614 width: 100%;615 float: left616}617 618.small-up-1>.column:nth-of-type(1n),619.small-up-1>.columns:nth-of-type(1n) {620 clear: none621}622 623.small-up-1>.column:nth-of-type(1n+1),624.small-up-1>.columns:nth-of-type(1n+1) {625 clear: both626}627 628.small-up-1>.column:last-child,629.small-up-1>.columns:last-child {630 float: left631}632 633.small-up-2>.column,634.small-up-2>.columns {635 width: 50%;636 float: left637}638 639.small-up-2>.column:nth-of-type(1n),640.small-up-2>.columns:nth-of-type(1n) {641 clear: none642}643 644.small-up-2>.column:nth-of-type(2n+1),645.small-up-2>.columns:nth-of-type(2n+1) {646 clear: both647}648 649.small-up-2>.column:last-child,650.small-up-2>.columns:last-child {651 float: left652}653 654.small-up-3>.column,655.small-up-3>.columns {656 width: 33.33333%;657 float: left658}659 660.small-up-3>.column:nth-of-type(1n),661.small-up-3>.columns:nth-of-type(1n) {662 clear: none663}664 665.small-up-3>.column:nth-of-type(3n+1),666.small-up-3>.columns:nth-of-type(3n+1) {667 clear: both668}669 670.small-up-3>.column:last-child,671.small-up-3>.columns:last-child {672 float: left673}674 675.small-up-4>.column,676.small-up-4>.columns {677 width: 25%;678 float: left679}680 681.small-up-4>.column:nth-of-type(1n),682.small-up-4>.columns:nth-of-type(1n) {683 clear: none684}685 686.small-up-4>.column:nth-of-type(4n+1),687.small-up-4>.columns:nth-of-type(4n+1) {688 clear: both689}690 691.small-up-4>.column:last-child,692.small-up-4>.columns:last-child {693 float: left694}695 696.small-up-5>.column,697.small-up-5>.columns {698 width: 20%;699 float: left700}701 702.small-up-5>.column:nth-of-type(1n),703.small-up-5>.columns:nth-of-type(1n) {704 clear: none705}706 707.small-up-5>.column:nth-of-type(5n+1),708.small-up-5>.columns:nth-of-type(5n+1) {709 clear: both710}711 712.small-up-5>.column:last-child,713.small-up-5>.columns:last-child {714 float: left715}716 717.small-up-6>.column,718.small-up-6>.columns {719 width: 16.66667%;720 float: left721}722 723.small-up-6>.column:nth-of-type(1n),724.small-up-6>.columns:nth-of-type(1n) {725 clear: none726}727 728.small-up-6>.column:nth-of-type(6n+1),729.small-up-6>.columns:nth-of-type(6n+1) {730 clear: both731}732 733.small-up-6>.column:last-child,734.small-up-6>.columns:last-child {735 float: left736}737 738.small-up-7>.column,739.small-up-7>.columns {740 width: 14.28571%;741 float: left742}743 744.small-up-7>.column:nth-of-type(1n),745.small-up-7>.columns:nth-of-type(1n) {746 clear: none747}748 749.small-up-7>.column:nth-of-type(7n+1),750.small-up-7>.columns:nth-of-type(7n+1) {751 clear: both752}753 754.small-up-7>.column:last-child,755.small-up-7>.columns:last-child {756 float: left757}758 759.small-up-8>.column,760.small-up-8>.columns {761 width: 12.5%;762 float: left763}764 765.small-up-8>.column:nth-of-type(1n),766.small-up-8>.columns:nth-of-type(1n) {767 clear: none768}769 770.small-up-8>.column:nth-of-type(8n+1),771.small-up-8>.columns:nth-of-type(8n+1) {772 clear: both773}774 775.small-up-8>.column:last-child,776.small-up-8>.columns:last-child {777 float: left778}779 780.small-collapse>.column,781.small-collapse>.columns {782 padding-left: 0;783 padding-right: 0784}785 786.small-collapse .row {787 margin-left: 0;788 margin-right: 0789}790 791.small-uncollapse>.column,792.small-uncollapse>.columns {793 padding-left: 0.625rem;794 padding-right: 0.625rem795}796 797.small-centered {798 float: none;799 margin-left: auto;800 margin-right: auto801}802 803.small-pull-0,804.small-push-0,805.small-uncentered {806 position: static;807 margin-left: 0;808 margin-right: 0;809 float: left810}811 812@media screen and (min-width:40em) {813 .medium-1 {814 width: 8.33333%815 }816 .medium-push-1 {817 position: relative;818 left: 8.33333%819 }820 .medium-pull-1 {821 position: relative;822 left: -8.33333%823 }824 .medium-offset-0 {825 margin-left: 0%826 }827 .medium-2 {828 width: 16.66667%829 }830 .medium-push-2 {831 position: relative;832 left: 16.66667%833 }834 .medium-pull-2 {835 position: relative;836 left: -16.66667%837 }838 .medium-offset-1 {839 margin-left: 8.33333%840 }841 .medium-3 {842 width: 25%843 }844 .medium-push-3 {845 position: relative;846 left: 25%847 }848 .medium-pull-3 {849 position: relative;850 left: -25%851 }852 .medium-offset-2 {853 margin-left: 16.66667%854 }855 .medium-4 {856 width: 33.33333%857 }858 .medium-push-4 {859 position: relative;860 left: 33.33333%861 }862 .medium-pull-4 {863 position: relative;864 left: -33.33333%865 }866 .medium-offset-3 {867 margin-left: 25%868 }869 .medium-5 {870 width: 41.66667%871 }872 .medium-push-5 {873 position: relative;874 left: 41.66667%875 }876 .medium-pull-5 {877 position: relative;878 left: -41.66667%879 }880 .medium-offset-4 {881 margin-left: 33.33333%882 }883 .medium-6 {884 width: 50%885 }886 .medium-push-6 {887 position: relative;888 left: 50%889 }890 .medium-pull-6 {891 position: relative;892 left: -50%893 }894 .medium-offset-5 {895 margin-left: 41.66667%896 }897 .medium-7 {898 width: 58.33333%899 }900 .medium-push-7 {901 position: relative;902 left: 58.33333%903 }904 .medium-pull-7 {905 position: relative;906 left: -58.33333%907 }908 .medium-offset-6 {909 margin-left: 50%910 }911 .medium-8 {912 width: 66.66667%913 }914 .medium-push-8 {915 position: relative;916 left: 66.66667%917 }918 .medium-pull-8 {919 position: relative;920 left: -66.66667%921 }922 .medium-offset-7 {923 margin-left: 58.33333%924 }925 .medium-9 {926 width: 75%927 }928 .medium-push-9 {929 position: relative;930 left: 75%931 }932 .medium-pull-9 {933 position: relative;934 left: -75%935 }936 .medium-offset-8 {937 margin-left: 66.66667%938 }939 .medium-10 {940 width: 83.33333%941 }942 .medium-push-10 {943 position: relative;944 left: 83.33333%945 }946 .medium-pull-10 {947 position: relative;948 left: -83.33333%949 }950 .medium-offset-9 {951 margin-left: 75%952 }953 .medium-11 {954 width: 91.66667%955 }956 .medium-push-11 {957 position: relative;958 left: 91.66667%959 }960 .medium-pull-11 {961 position: relative;962 left: -91.66667%963 }964 .medium-offset-10 {965 margin-left: 83.33333%966 }967 .medium-12 {968 width: 100%969 }970 .medium-offset-11 {971 margin-left: 91.66667%972 }973 .medium-up-1>.column,974 .medium-up-1>.columns {975 width: 100%;976 float: left977 }978 .medium-up-1>.column:nth-of-type(1n),979 .medium-up-1>.columns:nth-of-type(1n) {980 clear: none981 }982 .medium-up-1>.column:nth-of-type(1n+1),983 .medium-up-1>.columns:nth-of-type(1n+1) {984 clear: both985 }986 .medium-up-1>.column:last-child,987 .medium-up-1>.columns:last-child {988 float: left989 }990 .medium-up-2>.column,991 .medium-up-2>.columns {992 width: 50%;993 float: left994 }995 .medium-up-2>.column:nth-of-type(1n),996 .medium-up-2>.columns:nth-of-type(1n) {997 clear: none998 }999 .medium-up-2>.column:nth-of-type(2n+1),1000 .medium-up-2>.columns:nth-of-type(2n+1) {1001 clear: both1002 }1003 .medium-up-2>.column:last-child,1004 .medium-up-2>.columns:last-child {1005 float: left1006 }1007 .medium-up-3>.column,1008 .medium-up-3>.columns {1009 width: 33.33333%;1010 float: left1011 }1012 .medium-up-3>.column:nth-of-type(1n),1013 .medium-up-3>.columns:nth-of-type(1n) {1014 clear: none1015 }1016 .medium-up-3>.column:nth-of-type(3n+1),1017 .medium-up-3>.columns:nth-of-type(3n+1) {1018 clear: both1019 }1020 .medium-up-3>.column:last-child,1021 .medium-up-3>.columns:last-child {1022 float: left1023 }1024 .medium-up-4>.column,1025 .medium-up-4>.columns {1026 width: 25%;1027 float: left1028 }1029 .medium-up-4>.column:nth-of-type(1n),1030 .medium-up-4>.columns:nth-of-type(1n) {1031 clear: none1032 }1033 .medium-up-4>.column:nth-of-type(4n+1),1034 .medium-up-4>.columns:nth-of-type(4n+1) {1035 clear: both1036 }1037 .medium-up-4>.column:last-child,1038 .medium-up-4>.columns:last-child {1039 float: left1040 }1041 .medium-up-5>.column,1042 .medium-up-5>.columns {1043 width: 20%;1044 float: left1045 }1046 .medium-up-5>.column:nth-of-type(1n),1047 .medium-up-5>.columns:nth-of-type(1n) {1048 clear: none1049 }1050 .medium-up-5>.column:nth-of-type(5n+1),1051 .medium-up-5>.columns:nth-of-type(5n+1) {1052 clear: both1053 }1054 .medium-up-5>.column:last-child,1055 .medium-up-5>.columns:last-child {1056 float: left1057 }1058 .medium-up-6>.column,1059 .medium-up-6>.columns {1060 width: 16.66667%;1061 float: left1062 }1063 .medium-up-6>.column:nth-of-type(1n),1064 .medium-up-6>.columns:nth-of-type(1n) {1065 clear: none1066 }1067 .medium-up-6>.column:nth-of-type(6n+1),1068 .medium-up-6>.columns:nth-of-type(6n+1) {1069 clear: both1070 }1071 .medium-up-6>.column:last-child,1072 .medium-up-6>.columns:last-child {1073 float: left1074 }1075 .medium-up-7>.column,1076 .medium-up-7>.columns {1077 width: 14.28571%;1078 float: left1079 }1080 .medium-up-7>.column:nth-of-type(1n),1081 .medium-up-7>.columns:nth-of-type(1n) {1082 clear: none1083 }1084 .medium-up-7>.column:nth-of-type(7n+1),1085 .medium-up-7>.columns:nth-of-type(7n+1) {1086 clear: both1087 }1088 .medium-up-7>.column:last-child,1089 .medium-up-7>.columns:last-child {1090 float: left1091 }1092 .medium-up-8>.column,1093 .medium-up-8>.columns {1094 width: 12.5%;1095 float: left1096 }1097 .medium-up-8>.column:nth-of-type(1n),1098 .medium-up-8>.columns:nth-of-type(1n) {1099 clear: none1100 }1101 .medium-up-8>.column:nth-of-type(8n+1),1102 .medium-up-8>.columns:nth-of-type(8n+1) {1103 clear: both1104 }1105 .medium-up-8>.column:last-child,1106 .medium-up-8>.columns:last-child {1107 float: left1108 }1109 .medium-collapse>.column,1110 .medium-collapse>.columns {1111 padding-left: 0;1112 padding-right: 01113 }1114 .medium-collapse .row {1115 margin-left: 0;1116 margin-right: 01117 }1118 .medium-uncollapse>.column,1119 .medium-uncollapse>.columns {1120 padding-left: 0.9375rem;1121 padding-right: 0.9375rem1122 }1123 .medium-centered {1124 float: none;1125 margin-left: auto;1126 margin-right: auto1127 }1128 .medium-pull-0,1129 .medium-push-0,1130 .medium-uncentered {1131 position: static;1132 margin-left: 0;1133 margin-right: 0;1134 float: left1135 }1136}1137 1138@media screen and (min-width:64em) {1139 .large-1 {1140 width: 8.33333%1141 }1142 .large-push-1 {1143 position: relative;1144 left: 8.33333%1145 }1146 .large-pull-1 {1147 position: relative;1148 left: -8.33333%1149 }1150 .large-offset-0 {1151 margin-left: 0%1152 }1153 .large-2 {1154 width: 16.66667%1155 }1156 .large-push-2 {1157 position: relative;1158 left: 16.66667%1159 }1160 .large-pull-2 {1161 position: relative;1162 left: -16.66667%1163 }1164 .large-offset-1 {1165 margin-left: 8.33333%1166 }1167 .large-3 {1168 width: 25%1169 }1170 .large-push-3 {1171 position: relative;1172 left: 25%1173 }1174 .large-pull-3 {1175 position: relative;1176 left: -25%1177 }1178 .large-offset-2 {1179 margin-left: 16.66667%1180 }1181 .large-4 {1182 width: 33.33333%1183 }1184 .large-push-4 {1185 position: relative;1186 left: 33.33333%1187 }1188 .large-pull-4 {1189 position: relative;1190 left: -33.33333%1191 }1192 .large-offset-3 {1193 margin-left: 25%1194 }1195 .large-5 {1196 width: 41.66667%1197 }1198 .large-push-5 {1199 position: relative;1200 left: 41.66667%