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="no-htmlimports">3 <head>4 <style>5 @font-face {6 font-family: 'Lato';7 font-style: normal;8 font-weight: 400;9 src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');10}11@font-face {12 font-family: 'Lato';13 font-style: normal;14 font-weight: 700;15 src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPHA.ttf) format('truetype');16}17 18 19 20 a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video21{22 margin:0;23 padding:0;24 border:0;25 font:inherit;26 font-size:100%;27 vertical-align:baseline;28 29}30 @font-face 31{32 font-family: 'CenturyGothic';33 src: url('font/CenturyGothic.eot') format('embedded-opentype');34 src: url('font/CenturyGothic.woff') format('embedded-opentype');35 font-weight: normal;36 font-style: normal;37}38 39body40 {41 font-family: CenturyGothic, 'Helvetica Neue', Arial, sans-serif;42}43 html44{45 line-height:146}47 ol,ul48{49 list-style:none50}51 table52{53 border-collapse:collapse;54 border-spacing:055}56 caption,td,th57{58 text-align:left;59 font-weight:400;60 vertical-align:middle61}62 blockquote,q63{64 quotes:none65}66 67 blockquote:after,blockquote:before,q:after,q:before68{69 content:"";70 content:none71}72 a img73{74 border:none75}76 article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary77{78 display:block79}80 81 82 .inner83{84 display:block;85 max-width:1700px;86 width:90%;87 padding:0 25px;88 margin:0 auto89}90.inner:after91{92 content:" ";93 display:block;94 clear:both95}96h4{97font-weight: bold;98background: none;99 100}101 @media screen and (max-width:1100px)102{103.inner104{105 padding:0 50px106}107 108}109 @media screen and (max-width:520px)110{111.inner112{113 padding:0 15px114}115 116}117.span4118{119 width:100%;120 float:left;121 margin-left:0;122 margin-right:0123}124.span3125{126 width:74.87685%;127 float:left;128 margin-right:.49261%129}130 @media screen and (max-width:1100px)131{132.span3133{134 width:100%;135 float:left;136 margin-left:0;137 margin-right:0138}139 140}141.span2142{143 width:49.75369%;144 float:left;145 margin-right:.49261%;146 margin-bottom:.49261%147}148 @media screen and (max-width:1100px)149{150.span2151{152 width:100%;153 float:left;154 margin-left:0;155 margin-right:0156}157 158}159.span1160{161 width:24.63054%;162 float:left;163 margin-right:.49261%;164 margin-bottom:.49261%165}166 @media screen and (max-width:1100px)167{168.span1:nth-child(odd)169{170 width:49.75369%;171 float:left;172 margin-right:.49261%173}174.span1:nth-child(even)175{176 width:49.75369%;177 float:right;178 margin-right:0179}180 181}182 @media screen and (max-width:520px)183{184.span1:nth-child(even),.span1:nth-child(odd)185{186 width:100%;187 float:right;188 margin-right:0189}190 191}192.span4.last193{194 width:100%;195 float:right;196 margin-right:0197}198.span3.last199{200 width:74.87685%;201 float:right;202 margin-right:0203}204 @media screen and (max-width:1100px)205{206.span3.last207{208 width:100%;209 float:right;210 margin-right:0211}212 213}214.span2.last215{216 width:49.75369%;217 float:right;218 margin-right:0219}220 @media screen and (max-width:1100px)221{222.span2.last223{224 width:100%;225 float:right;226 margin-right:0227}228 229}230.span1.last231{232 width:24.63054%;233 float:right;234 margin-right:0235}236 @media screen and (max-width:1100px)237{238.span1.last239{240 width:49.75369%;241 float:right;242 margin-right:0243}244 245}246 @media screen and (max-width:520px)247{248.span1.last:nth-child(even),.span1.last:nth-child(odd)249{250 width:100%;251 float:right;252 margin-right:0253}254 255}256.row257{258 width:100%;259 position:relative;260 overflow:hidden;261 margin-top:50px;262 margin-bottom:50px263}264.row:after265{266 content:" ";267 display:block;268 clear:both269}270 @media screen and (max-width:520px)271{272.row273{274 margin-top:30px;275 margin-bottom:30px276}277 278}279 *,::after,::before280{281 -moz-box-sizing:border-box;282 -webkit-box-sizing:border-box;283 box-sizing:border-box284}285 body286{287 width:100%;288 height:100%;289 overflow-x:hidden;290 -webkit-font-smoothing:antialiased;291 -moz-osx-font-smoothing:grayscale;292 -webkit-tap-highlight-color:transparent293}294 ::selection295{296 background-color:rgba(0,0,0,.05)297}298 ::-moz-selection299{300 background-color:rgba(0,0,0,.05)301}302.preload *303{304 -webkit-transition:none!important;305 -moz-transition:none!important;306 -ms-transition:none!important;307 -o-transition:none!important308}309 img,video310{311 width:100%;312 height:auto;313 vertical-align:bottom;314 margin-bottom:.49261%315}316 @media screen and (max-width:1100px)317{318 img,video319{320 margin-bottom:5px321}322 323}324 325 html326{327 font-size: .6em;328}329 body330{331 font-size:1.7rem332 /*font-family:'Lato',Helvetica,sans-serif*/333}334 @media screen and (max-width:1350px)335{336 body337{338 font-size:1.7rem339}340 341}342 @media screen and (max-width:1100px)343{344 body345{346 font-size:1.8rem347}348 349}350 @media screen and (max-width:520px)351{352 body353{354 font-size:1.6rem355}356 357}358 p,span359{360 font-size:1.7rem;361 line-height:1.22em362}363 @media screen and (max-width:1350px)364{365 p,span366{367 font-size:1.6rem368}369 370}371 @media screen and (max-width:1100px)372{373 p,span374{375 font-size:1.7rem376}377 378}379 @media screen and (max-width:520px)380{381 p,span382{383 font-size:1.6rem384}385 386}387 h1,h2,h3388{389 /*font-family:'Lato',Helvetica,sans-serif*/390 391}392 h1393{394 font-size:9.4rem;395 line-height:.93em;396 letter-spacing:-.035em;397 padding-top:20px;398 399}400 h6401{402 font-size:5rem;403 text-decoration: underline;404 font-style: oblique, !important;405 406}407 @media screen and (max-width:1350px)408{409 h1410{411 font-size:8.8rem412}413 414}415 @media screen and (max-width:1100px)416{417 h1418{419 font-size:8.6rem420}421 422}423 @media screen and (max-width:520px)424{425 h1426{427 font-size:5.2rem428}429 430}431 h2432{433 font-size:3rem;434 line-height:1.01em;435 letter-spacing:.005em;436 font-weight: 600;437}438 @media screen and (max-width:1350px)439{440 h2441{442 font-size:3rem;443 font-weight: 600;444 445}446 447}448 @media screen and (max-width:1100px)449{450 h2451{452 font-size:3rem453}454 455}456 @media screen and (max-width:520px)457{458 h2459{460 font-size:2.15rem461}462 463}464 h2 a465{466 text-decoration:none;467 display:inline-block;468 line-height:.45em;469 padding-bottom:0470}471 h2 span.glyph472{473 font-size:1em;474 line-height:1.01em475}476 h3477{478 font-size:2.6rem;479 line-height:1.01em;480 font-weight: 600;481}482 @media screen and (max-width:1350px)483{484 h3485{486 font-size:2.3rem;487 font-weight: 600;488}489 490}491 @media screen and (max-width:1100px)492{493 h3494{495 font-size:2rem;496 font-weight: 600;497}498 499}500 @media screen and (max-width:1100px)501{502.col h3503{504 font-size:2.6rem505}506 507}508 @media screen and (max-width:520px)509{510.col h3511{512 font-size:1.8rem513}514 515}516 h1 a,h2 a,h3 a517{518 filter:alpha(enabled=false);519 opacity:1;520 border-bottom:1px solid #000;521 line-height: 1;522}523 h1 a:hover,h2 a:hover,h3 a:hover524{525 border-bottom:none526}527 a528{529 color:#000;530 text-decoration:none;531 display:inline-block;532 line-height:.5em;533 filter:alpha(Opacity=63);534 opacity:.63;535 -moz-transition:opacity .22s cubic-bezier(.25,.46,.45,.94);536 -o-transition:opacity .22s cubic-bezier(.25,.46,.45,.94);537 /*-webkit-transition:opacity .22s cubic-bezier(.25,.46,.45,.94);*/538 transition:opacity .22s cubic-bezier(.25,.46,.45,.94)539}540 a:hover541{542 filter:alpha(enabled=false);543 opacity:.7544}545.btn,p546{547 margin-top:25px548}549.fadeIn550{551 -webkit-animation-duration:.22s;552 animation-duration:.22s;553 -webkit-animation-fill-mode:both;554 animation-fill-mode:both;555 -webkit-animation-name:fadeIn;556 animation-name:fadeIn557}558.fadeInDown559{560 -webkit-animation-duration:.22s;561 animation-duration:.22s;562 -webkit-animation-fill-mode:both;563 animation-fill-mode:both;564 -webkit-animation-name:fadeInDown;565 animation-name:fadeInDown566}567@-webkit-keyframes fadeIn568{569 0%570{571 filter:alpha(Opacity=0);572 opacity:0573}574 100%575{576 filter:alpha(enabled=false);577 opacity:1578}579 580}581 @keyframes fadeIn582{583 0%584{585 filter:alpha(Opacity=0);586 opacity:0587}588 100%589{590 filter:alpha(enabled=false);591 opacity:1592}593 594}595 @-webkit-keyframes fadeInDown596{597 0%598{599 filter:alpha(Opacity=0);600 opacity:0;601 -moz-transform:translate(0,50px);602 -ms-transform:translate(0,50px);603 -webkit-transform:translate(0,50px);604 transform:translate(0,50px)605}606 100%607{608 filter:alpha(enabled=false);609 opacity:1;610 -moz-transform:none;611 -ms-transform:none;612 -webkit-transform:none;613 transform:none614}615 616}617 @keyframes fadeInDown618{619 0%620{621 filter:alpha(Opacity=0);622 opacity:0;623 -moz-transform:translate(0,50px);624 -ms-transform:translate(0,50px);625 -webkit-transform:translate(0,50px);626 transform:translate(0,50px)627}628 100%629{630 filter:alpha(enabled=false);631 opacity:1;632 -moz-transform:none;633 -ms-transform:none;634 -webkit-transform:none;635 transform:none636}637 638}639.float640{641 -moz-animation:float 3s infinite ease-in-out;642 -webkit-animation:float 3s infinite ease-in-out;643 animation:float 3s infinite ease-in-out644}645 @-webkit-keyframes float646{647 from648{649 -webkit-transform:translate(0,0)650}651 65%652{653 -webkit-transform:translate(0,7px)654}655 to656{657 -webkit-transform:translate(0,0)658}659 660}661 @-moz-keyframes float662{663 from664{665 -moz-transform:translate(0,0)666}667 65%668{669 -moz-transform:translate(0,7px)670}671 to672{673 -moz-transform:translate(0,0)674}675 676}677 @-ms-keyframes float678{679 from680{681 -ms-transform:translate(0,0)682}683 65%684{685 -ms-transform:translate(0,7px)686}687 to688{689 -ms-transform:translate(0,0)690}691 692}693 @keyframes float694{695 from696{697 transform:translate(0,0)698}699 65%700{701 transform:translate(0,7px)702}703 to704{705 transform:translate(0,0)706}707 708}709.scale710{711 padding-top: 10px;712 -moz-animation:scale 3s infinite ease-in-out;713 -webkit-animation:scale 3s infinite ease-in-out;714 animation:scale 3s infinite ease-in-out715}716 @-webkit-keyframes scale717{718 from719{720 -webkit-transform:scale(.9)721}722 65%723{724 -webkit-transform:scale(1)725}726 to727{728 -webkit-transform:scale(.9)729}730 731}732 @-moz-keyframes scale733{734 from735{736 -moz-transform:scale(.9)737}738 65%739{740 -moz-transform:scale(1)741}742 to743{744 -moz-transform:scale(.9)745}746 747}748 @-ms-keyframes scale749{750 from751{752 -ms-transform:scale(.9)753}754 65%755{756 -ms-transform:scale(1)757}758 to759{760 -ms-transform:scale(.9)761}762 763}764 @keyframes scale765{766 from767{768 transform:scale(.9)769}770 65%771{772 transform:scale(1)773}774 to775{776 transform:scale(.9)777}778 779}780.giffy781{782 -moz-animation:giffy .44s infinite step-end;783 -webkit-animation:giffy .44s infinite step-end;784 animation:giffy .44s infinite step-end785}786 @-webkit-keyframes giffy787{788 0%789{790 background-position:0 0791}792 25%793{794 background-position:-60px 0795}796 50%797{798 background-position:-120px 0799}800 75%801{802 background-position:-180px 0803}804 100%805{806 background-position:0 0807}808 809}810 @-moz-keyframes giffy811{812 0%813{814 background-position:0 0815}816 25%817{818 background-position:-60px 0819}820 50%821{822 background-position:-120px 0823}824 75%825{826 background-position:-180px 0827}828 100%829{830 background-position:0 0831}832 833}834 @-ms-keyframes giffy835{836 0%837{838 background-position:0 0839}840 25%841{842 background-position:-60px 0843}844 50%845{846 background-position:-120px 0847}848 75%849{850 background-position:-180px 0851}852 100%853{854 background-position:0 0855}856 857}858 @keyframes giffy859{860 0%861{862 background-position:0 0863}864 25%865{866 background-position:-60px 0867}868 50%869{870 background-position:-120px 0871}872 75%873{874 background-position:-180px 0875}876 100%877{878 background-position:0 0879}880 881}882.giffy-small883{884 -moz-animation:giffy-small .44s infinite step-end;885 -webkit-animation:giffy-small .44s infinite step-end;886 animation:giffy-small .44s infinite step-end887}888 @-webkit-keyframes giffy-small889{890 0%891{892 background-position:0 0893}894 25%895{896 background-position:-40px 0897}898 50%899{900 background-position:-80px 0901}902 75%903{904 background-position:-120px 0905}906 100%907{908 background-position:0 0909}910 911}912 @-moz-keyframes giffy-small913{914 0%915{916 background-position:0 0917}918 25%919{920 background-position:-40px 0921}922 50%923{924 background-position:-80px 0925}926 75%927{928 background-position:-120px 0929}930 100%931{932 background-position:0 0933}934 935}936 @-ms-keyframes giffy-small937{938 0%939{940 background-position:0 0941}942 25%943{944 background-position:-40px 0945}946 50%947{948 background-position:-80px 0949}950 75%951{952 background-position:-120px 0953}954 100%955{956 background-position:0 0957}958 959}960 @keyframes giffy-small961{962 0%963{964 background-position:0 0965}966 25%967{968 background-position:-40px 0969}970 50%971{972 background-position:-80px 0973}974 75%975{976 background-position:-120px 0977}978 100%979{980 background-position:0 0981}982 983}984 body985{986 -moz-transition:background-color .662s cubic-bezier(.25,.46,.45,.94);987 -o-transition:background-color .662s cubic-bezier(.25,.46,.45,.94);988 -webkit-transition:background-color .662s cubic-bezier(.25,.46,.45,.94);989 transition:background-color .662s cubic-bezier(.25,.46,.45,.94);990 991}992 body.approach993{994 background-color:#FFFFFF995}996 body.cases997{998 background-color:#FFFFFF999}1000 body.art1001{1002 background-color:#FFFFFF1003}1004 body.about1005{1006 background-color:#FFFFFF1007}1008 body.contact1009{1010 background-color:#FFFFFF1011}1012 body.shop1013{1014 background-color:#0000001015}1016 1017 body.fadetogrey1018{1019 background-color:#1C1C1C;1020 color: #ffffff;1021}1022body.fadetogrey .case{1023border-bottom: #FFFFFF solid 1px;1024}1025body.fadetogrey .art{1026border-bottom: #FFFFFF solid 1px;1027}1028 #wrapper1029{1030 overflow:hidden1031}1032 #wrapper .intro h11033{1034 -moz-transition:opacity .44s cubic-bezier(.25,.46,.45,.94) .11s,-moz-transform .44s cubic-bezier(.25,.46,.45,.94) .11s;1035 -o-transition:opacity .44s cubic-bezier(.25,.46,.45,.94) .11s,-o-transform .44s cubic-bezier(.25,.46,.45,.94) .11s;1036 -webkit-transition:opacity .44s cubic-bezier(.25,.46,.45,.94),-webkit-transform .44s cubic-bezier(.25,.46,.45,.94);1037 -webkit-transition-delay:.11s,.11s;1038 transition:opacity .44s cubic-bezier(.25,.46,.45,.94) .11s,transform .44s cubic-bezier(.25,.46,.45,.94) .11s;1039 filter:alpha(Opacity=0);1040 opacity:0;1041 -moz-transform:translate(0,40px);1042 -ms-transform:translate(0,40px);1043 -webkit-transform:translate(0,40px);1044 transform:translate(0,40px);1045 -moz-transform:translate3d(0,40px,0);1046 -ms-transform:translate3d(0,40px,0);1047 -webkit-transform:translate3d(0,40px,0);1048 transform:translate3d(0,40px,0)1049}1050 #wrapper .items,#wrapper .subtitle1051{1052 -moz-transition:opacity .662s cubic-bezier(.25,.46,.45,.94) .22s,-moz-transform .44s cubic-bezier(.25,.46,.45,.94) .22s;1053 -o-transition:opacity .662s cubic-bezier(.25,.46,.45,.94) .22s,-o-transform .44s cubic-bezier(.25,.46,.45,.94) .22s;1054 -webkit-transition:opacity .662s cubic-bezier(.25,.46,.45,.94),-webkit-transform .44s cubic-bezier(.25,.46,.45,.94);1055 -webkit-transition-delay:.22s,.22s;1056 transition:opacity .662s cubic-bezier(.25,.46,.45,.94) .22s,transform .44s cubic-bezier(.25,.46,.45,.94) .22s;1057 filter:alpha(Opacity=0);1058 opacity:0;1059 -moz-transform:translate(0,20px);1060 -ms-transform:translate(0,20px);1061 -webkit-transform:translate(0,20px);1062 transform:translate(0,20px);1063 -moz-transform:translate3d(0,20px,0);1064 -ms-transform:translate3d(0,20px,0);1065 -webkit-transform:translate3d(0,20px,0);1066 transform:translate3d(0,20px,0)1067}1068 #wrapper .subtext1069{1070 -moz-transition:opacity .662s cubic-bezier(.25,.46,.45,.94) .33s,-moz-transform .44s cubic-bezier(.25,.46,.45,.94) .33s;1071 -o-transition:opacity .662s cubic-bezier(.25,.46,.45,.94) .33s,-o-transform .44s cubic-bezier(.25,.46,.45,.94) .33s;1072 -webkit-transition:opacity .662s cubic-bezier(.25,.46,.45,.94),-webkit-transform .44s cubic-bezier(.25,.46,.45,.94);1073 -webkit-transition-delay:.33s,.33s;1074 transition:opacity .662s cubic-bezier(.25,.46,.45,.94) .33s,transform .44s cubic-bezier(.25,.46,.45,.94) .33s;1075 filter:alpha(Opacity=0);1076 opacity:0;1077 -moz-transform:translate(0,20px);1078 -ms-transform:translate(0,20px);1079 -webkit-transform:translate(0,20px);1080 transform:translate(0,20px);1081 -moz-transform:translate3d(0,20px,0);1082 -ms-transform:translate3d(0,20px,0);1083 -webkit-transform:translate3d(0,20px,0);1084 transform:translate3d(0,20px,0)1085}1086 #wrapper .content,#wrapper footer1087{1088 -moz-transition:opacity .662s cubic-bezier(.25,.46,.45,.94) .44s;1089 -o-transition:opacity .662s cubic-bezier(.25,.46,.45,.94) .44s;1090 -webkit-transition:opacity .662s cubic-bezier(.25,.46,.45,.94);1091 -webkit-transition-delay:.44s;1092 transition:opacity .662s cubic-bezier(.25,.46,.45,.94) .44s;1093 filter:alpha(Opacity=0);1094 opacity:01095}1096 #wrapper.load .intro h1,#wrapper.load .items,#wrapper.load .subtext,#wrapper.load .subtitle1097{1098 filter:alpha(enabled=false);1099 opacity:1;1100 -moz-transform:translate(0,0);1101 -ms-transform:translate(0,0);1102 -webkit-transform:translate(0,0);1103 transform:translate(0,0);1104 -moz-transform:translate3d(0,0,0);1105 -ms-transform:translate3d(0,0,0);1106 -webkit-transform:translate3d(0,0,0);1107 letter-spacing: 1px;1108 transform:translate3d(0,0,0)1109}1110 #wrapper.load .content,#wrapper.load footer1111{1112 filter:alpha(enabled=false);1113 opacity:11114}1115.inner.approach1116{1117 padding:0;1118 max-width:100%1119}1120.inner.approach,.inner.approach .content1121{1122 overflow:hidden1123}1124.intro1125{1126 position:relative;1127 display:block;1128 overflow:hidden;1129 margin-top:196px;1130 padding-bottom:30px1131}1132.content1133{1134 position:relative;1135 width:100%;1136 height:100%;1137 -moz-transition:opacity .22s cubic-bezier(.25,.46,.45,.94);1138 -o-transition:opacity .22s cubic-bezier(.25,.46,.45,.94);1139 -webkit-transition:opacity .22s cubic-bezier(.25,.46,.45,.94);1140 transition:opacity .22s cubic-bezier(.25,.46,.45,.94);1141 margin-top:50px;1142 margin-bottom:50px1143}1144 1145.ind_box{1146color:#ffffff; 1147width: 100%;1148float: left;1149height: inherit;1150margin: 100px 0 50px 0;1151 1152 1153 1154}1155.ind_box_1{1156width: 100%;1157float: left;1158height: 700px;1159background: url(../img/content/bw/IntellectualJQ_8.png) no-repeat center bottom;1160}1161.ind_box_2{1162width: 100%;1163float: left;1164height: 700px;1165max-height: 700px;1166background: url(../img/content/bw/DaVinci_7.png) no-repeat center bottom;1167}1168.ind_box_3{1169width: 100%;1170float: left;1171height: 700px;1172background: url(../img/content/bw/Busy_7.png) no-repeat center bottom;1173}1174.content:after1175{1176 content:" ";1177 display:block;1178 clear:both1179}1180 @media screen and (max-width:520px)1181{1182.content1183{1184 margin-top:30px;1185 margin-bottom:30px1186}1187.ind_box_1{1188margin-top: -250px;1189background-size: 100%;1190 1191}1192.ind_box_2{1193margin-top: -300px;1194background-size: 100%;1195 1196}1197.ind_box_3{1198margin-top: -330px;1199background-size: 100%;1200