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 XHTML 1.0 Transitional//EN">2<html dir="ltr">3 <head>4 <style>5 @font-face6{7font-family: 'myFirstFont';8 src: url('../fonts/HacenSaudiArabia.eot'); /* IE9 Compat Modes */9 src: url('../fonts/HacenSaudiArabia.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */10 url('../fonts/HacenSaudiArabia.woff') format('woff'), /* Modern Browsers */11 url('../fonts/HacenSaudiArabia.ttf') format('truetype'), /* Safari, Android, iOS */12 url('../fonts/HacenSaudiArabia.svg#svgFontName') format('svg'); /* Legacy iOS */13}14 15 16* {17margin:0;18padding:0;19 20}21 22body {23margin:0;24padding:0;25font-size:1.03em;26background:#C0C0C0;27font-family:myFirstFont;28}29 30a:link {31 text-decoration: none;32 color: inherit;33}34 35a:visited {36 text-decoration: none;37 color: inherit;38}39 40 41img{42 width:100%;43}44 45.general{46 padding:0;47 margin:0;48 background:white;49 height: 3400px;50 width:100%;51 max-width:1003px;52 margin-right: auto;53 margin-left: auto;54}55 56.container{57 58position:relative;59height:100%;60width:100%;61max-width:1003px; 62display:block;63text-align:center;64margin-right: auto;65margin-left: auto;66//border: 5px solid #333;67//background:blue;68}69 70 71 72.section4{73 display:flex; 74 position:relative;75 height:320px;76 text-align:right;77 78 79}80 81 82 83.section5{84 display:flex; 85 position:relative;86 direction:rtl;87 88}89 90.section5-1{91 display:flex; 92 position:relative;93 direction:rtl;94 95}96 97.section6{98 display:flex; 99 direction:ltr;100 //background:blue;101 Top:440px;102 position:relative;103 width:100%;104 max-width:697px;105 float:right;106}107 108.section7{109 display:flex; 110 direction:rtl;111 //background:blue;112 Top:100px;113 right:12px;114 position:relative;115 height:1900px;116 width:270px;117 float:right;118 //background:blue;119}120 121 122.section8{123 display:flex; 124 direction:rtl;125 //background:blue;126 //right:12px;127 position:relative;128 height:400px;129 width:700px;130 float:right;131 top:250px;132 133}134 135 136.sec7part1{137 width:100%;138 display:block;139}140 141.imgstyl1142{143width:150px;144height:auto;145padding:5px;146max-height:150px;147}148 149.textstyl150{151font-family: myFirstFont;152font-size:14px;153color: black;154direction: ltr;155text-align:left;156overflow:hidden;157}158 159.textsty2160{161font-family: Tahoma;162font-size:14px;163color: black;164direction: ltr;165height:50px;166overflow:hidden;167text-align:justify;168}169 170 171.newsmovbar{172 background:white;173 height:30px;174 //border:5px solid #fff;175 display: table-cell ;176 padding-bottom:10px;177 font-size:1.3em;178 179}180 181ul#newsmovtab {182 list-style:none;183 margin:0;184 padding:0;185 white-space:nowrap;186 }187 188ul#newsmovtab li {189 display:inline;190 white-space:nowrap;191 font-family: myFirstFont;192 font-size:16px;193 }194 195.rot196{197 198width:auto;199background: rgb(219,220,226); /* Old browsers */200background: -moz-linear-gradient(top, rgba(219,220,226,1) 21%, rgba(245,246,246,1) 100%); /* FF3.6+ */201background: -webkit-gradient(linear, left top, left bottom, color-stop(21%,rgba(219,220,226,1)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */202background: -webkit-linear-gradient(top, rgba(219,220,226,1) 21%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */203background: -o-linear-gradient(top, rgba(219,220,226,1) 21%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */204background: -ms-linear-gradient(top, rgba(219,220,226,1) 21%,rgba(245,246,246,1) 100%); /* IE10+ */205background: linear-gradient(to bottom, rgba(219,220,226,1) 21%,rgba(245,246,246,1) 100%); /* W3C */206filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdce2', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */207} 208 209.rot ul{210 display:inline-block;211width:100%;212}213.rot ul li{214 215 list-style:none;216 217 218 219}220 221 222.slidnewsshow{223 position:absolute;224 display:block;225 //background:blue;226 height:440px;227 width:700px;228 max-width:700px;229 //top:20px;230}231 232.slidnewsshowpart1{233 234 position: relative; height:420px; width:680px; border-left: 1px solid #DEDEDE; border-bottom: 1px solid #DEDEDE; padding:8px;235}236 237 238.searchbox{239 position:absolute;240 display:block;241 height:80px;242 width:100%;243 max-width:290px;244 //top:20px;245 right:709px;246 text-align:right;247 248}249 250.searchcomand{251 position: relative;252 font-family: myFirstFont;253 font-size:23px;254 color:#B1B1B1;255 text-align:right;256 height:25px;257 width:65px;258 right:12px;259 cursor:pointer;260 top:10px;261}262 263.searchinput264{265 position:relative;266 width:190px;267 border:1px solid #DEDEDE;268 height:30px;269 text-align:right;270 right: 85px;271 Top:-18px;272}273 274.search275{276 277display:flex;278position: relative;279width:100%;280border: 1px solid #B1B1B1;281height:45px;282background-color: #DEDEE7;283}284 285 286.dorostab287{288 289display:flex;290position: relative;291width:292px;292border: 1px solid #B1B1B1;293height:45px;294background-color: #DEDEE7;295Top:25px;296}297 298 299.doros300{301font-family: myFirstFont;302font-size:20px;303color: #B1B1B1;304position: relative;305width:60px;306text-align:center;307border-radius: 4px;308cursor: pointer;309display:flex;310padding-right:18px;311Top:5px;312}313 314.leaddsound {315position: relative;316font-family: myFirstFont;317font-size:16px;318color:#2D2D2D;319text-align:right;320height:25px;321width:100%;322padding:15px;323//background-color: #25292E;324left:-18px;325}326 327 328 329 330 331.leadd {332position: relative;333font-family: myFirstFont;334font-size:1.3em;335color:#2D2D2D;336text-align:left;337height:25px;338width:270px;339padding:10px;340 341}342 343 344 345 346.leaddinter {347position: relative;348font-family: myFirstFont;349font-size:1.3em;350height:auto;351width:270px;352padding:10px;353color: #C2D7E4;354text-align:center;355top:-10px;356}357 358 359 360.riadd {361position: relative;362font-family: myFirstFont;363font-size:1.3em;364color:#2D2D2D;365text-align:left;366height:36px;367width:318px;368padding:10px;369float:left;370 371}372 373 374.sqr375{376position: relative;377height:auto;378width:auto;379border-left: 1px solid #DEDEDE;380border-bottom: 1px solid #DEDEDE;381border-top: 1px solid #DEDEDE;382padding:10px;383Top:60px;384}385 386 387.sqr1388{389position: relative;390border-left: 1px solid #DEDEDE;391border-bottom: 1px solid #DEDEDE;392border-top: 1px solid #DEDEDE;393padding:10px;394width:676px;395Top:50px;396 397}398 399 400 401.for402{403font-family: myFirstFont;404font-size:1em;405color: #DEDEDE;406position: relative;407width:190px;408border: 1px solid #DEDEDE;409height:30px;410text-align:center;411}412 413 414.leftside415{416position: relative;417display:block;418border: 1px solid #DEDEDE;419padding:10px;420//width:270px;421width:100%;422font-family: myFirstFont;423font-size:16px;424direction: ltr;425 426 427}428 429.maillistst430{431font-family: myFirstFont;432font-size:1.5rem;433direction: ltr;434height:50px;435overflow:hidden;436text-align:justify;437color:#3A5275;438 width:350px;439 440}441 442 443.mailliststbox{444 position: relative;445 text-align:left;446 background-color:#C6CBD2;447 width:100%;448 border-radius:5px;449 border-style:solid;450 border-width:0px;451 height:30px;452}453 454.sendcomm455{456 position: relative;457 top:20px;458 font-size:1rem;459}460.eventsmarquee{461 height:180px;462}463 464 465.sec7part4 #d4{/*اÙÙ
Ùاسبات اÙدÙÙÙØ©*/466height:180px;467 }468.eventsmarquee{/*اÙÙ
Ùاسبات اÙدÙÙÙØ©*/469 height:180px;470 471 }472 473 474.sec7part7 #d7{/*استÙتاءات Ù
ختارة*/475height:180px;476}477 478.istefmarqee{/*استÙتاءات Ù
ختارة*/479 height:180px;480}481 482 483#newsmar{484 display:none;485}486 487 488.textinside {489 text-align:left;490 direction:ltr;491 font-family:Tahoma;492 font-size:1.3rem;493 font-weight:bold;494}495 496.textinside2 {497 direction:ltr;498 font-size:1.3rem;499 font-family:Arial;500 padding-right:30px;501 padding-left:30px;502 503}504 505.dowbar506{507 508cursor:pointer;509border: 1px solid #DEDEDE;510width:auto;511font-family: myFirstFont;512font-size:19px;513direction: rtl;514text-align:center;515background: #AAB6C6;516border-radius: 8px;517box-shadow: inset 0px 0px 5px #ACB985;518}519 520 521 522 523#gallery_kutub_ul li{524 525display: inline-block;526margin-left:auto;527margin-right:auto;528width:350px;529height:360px;530list-style-type: none;531vertical-align: middle;532padding:25px;533 534}535 536 537.divwrit1{538 width:400px;539 position: relative;540 background-color: rgba(0, 0, 0, 0.1);541 z-index: 1;542 border-style: solid;543 text-align:center;544 vertical-align:middle;545 display: table-cell;546 border-width: 0px;547}548 549.divwrit1img{550 width:auto; max-width:350px; height:230px;551}552 553 554#news_ul li {555 display: inline-flex;556 list-style-type: none;557 direction:rtl;558 padding-bottom:20px;559 vertical-align:middle;560}561 562.socialblock{563 width:50px;564 height:172px;565 display:block;566 position:fixed;567 top: 250px;568 //left:73px;569 background-color:#838383;570 border-radius: 8px 0px 0px 8px;571}572 573.istefsub574{575 margin: 1em 0;576padding: 10px;577width:auto;578display: inline-block;579list-style-type: none;580vertical-align: middle;581border: 1px solid #375037;582background: #AAB6C6;583font-family: myFirstFont;584font-size:1rem;585direction: ltr;586text-align:left;587}588#gallery_image_ul {589 590 list-style:none;591 margin:0;592 padding:10px;593 text-align: right;594 // white-space:nowrap;595 596}597#gallery_image_li {598 display:inline;599 padding-right: .7em;600 margin: 1em 0;601 602 603}604 605 606.pun607{608direction: rtl;609text-align:right;610width:200px;611font-size:1.3rem;612 613}614 615.pun1616{617padding-right:20px;618}619 620.textstylduros621{622font-family: myFirstFont;623font-size:1.3rem;624color: black;625direction: rtl;626}627 628.textduro{629 font-family:Tahoma;630 font-size:1rem;631}632 633 634.gallery_moaalf li{635 636display: inline-block;637margin-left:auto;638margin-right:auto;639width:260px;640//height:360px;641list-style-type: none;642vertical-align: middle;643padding:25px;644 645 646}647 648 649.imgdetnews {650 651 "position: relative;652 width: 650px; background-color: rgba(0, 0, 0, 0.1);653 height: 450px;654 z-index: 1;655 border-style: solid;656 text-align:center;657 vertical-align:middle;658 display: table-cell;659 border-width: 0px;660}661 662 663.gallery_image_li_img {664 665width:250px;666height:auto;667cursor: pointer;668}669 670.overlay {671 position:fixed;672 display:table;673 width: 100%;674 height: 100%;675 left: 0;676 right: 0;677 top: 0px;678 background: rgba(51,51,51,0.9);679 z-index: 10;680 visibility:hidden;681 overflow-y: scroll;682 overflow-x: scroll;683 }684/*******************************************************************@MEDIA*********************************************************************/685 686@media screen and ( max-width:990px){687 688 689body {690 font-size:1.5rem;691}692 693.general{694 height: 23500px;695}696 697 698.slidnewsshow{699 top:85px;700 max-width:1000px;701 padding-right:0;702}703 704 705.search706{707 708width:100%;709top:5px;710 711}712 713 714 715.searchbox{716 717 right:0;718 max-width:700px;719}720 721.searchinput722{723 width:400px;724 right:200px;725 726}727 728 729.searchcomand{730 font-size:40px;731 Top:-7px;732}733 734 735ul#newsmovtab li {736 font-family: Tahoma;737 font-size:2rem;738 }739 740 741 742 743.section4744{745 display:none;746}747 748 749 750 751 752.section5{753 //Top:100px;754 display:none;755}756 757 758.section6{759 Top:220px;760 max-width:1003px;761 padding-right: 30px;762 max-width:930px;763}764 765.section6-0 {766 position:relative;767 max-width:1003px;768}769 770 771.section7{772 773 Top:440px;774 right:0px;775 width:100%;776 //max-width:98%;777 778 779}780 781 782.sec7part1{/*Ù
عرض اÙصÙر*/783 width:100%;784 display:block;785 position:relative;786 Top:20px;787}788 789.sec7part2{/*اخر اÙدرÙس*/790 width:100%;791 display:block;792 position:relative;793 Top:120px;794 795}796 797.sec7part3{/*اÙتÙÙÙÙ
اÙÙجرÙ*/798 width:100%;799 display:block;800 position:relative;801 Top:200px;802 height:110px;803}804 805.sec7part4{/*اÙÙ
Ùاسبات اÙدÙÙÙØ©*/806 width:100%;807 height:auto;808 display:block;809 position:relative;810 Top:440px;811 }812 813 814 815.sec7part5{/*Ù
٠تÙجÙÙات سÙ
اØØ© اÙÙ
رجع*/816 width:100%;817 max-width:98%;818 height:auto;819 display:block;820 position:relative;821 Top:560px;822 823}824 825.sec7part6{/*صØÙÙØ© اÙاÙÙار*/826 width:100%;827 display:block;828 position:relative;829 Top:660px;830}831 832 833.sec7part7{/*استÙتاءات Ù
ختارة*/834 width:100%;835 display:block;836 position:relative;837 Top:770px;838 839}840 841 842.sec7part8{/*اÙÙائÙ
Ø© اÙبرÙدÙØ©*/843 width:100%;844 display:block;845 position:relative;846 Top:900px;847}848 849 850.section8{851 852 Top:2500px;853 width:100%;854 855}856 857 858 859.leftside860{861border: 1px solid #DEDEDE;862width:100%;863font-family: Tahoma;864font-size:2.8rem;865Top:10px;866 867}868 869 870 871 872 873 874.dorostab875{876 877 878 879display:flex;880position: relative;881//width:99%;882width:100%;883justify-content: space-between;884height:80px;885top:48px;886 887}888 889 890.doros891{892 893position: relative;894display:flex;895width:130px;896justify-content: center;897padding-right:0;898font-size:3rem;899 900}901 902 903.leaddsound {904position: relative;905width:100%;906font-family: Tahoma;907font-size:2.4rem;908padding:70px;909}910 911 912 913 914 915.leaddinter {916 917font-size:1.3em;918height:auto;919width:100%;920text-align:center;921top:20px;922}923 924 925 926.riadd {927font-size:3em;928//top:-65px;929width:800px;930}931 932 933.sqr934{935 936Top:115px;937}938 939 940.sqr1941{942 943width:100%;944Top:110px;945}946 947 948 949.leadd {950font-size:2.7em;951width:auto;952height:auto;953}954 955 956 957.textstyl958{959font-family: Tahoma;960font-size:2.3rem;961font-weight:bold;962 963}964 965.textsty2966{967font-family: Tahoma;968font-size:2rem;969height:auto;970//max-height:150px;971 972}973 974 975 976 977.maillistst978{979 980font-size:3rem;981height:90px;982 983}984 985 986.mailliststbox{987 988 width:100%;989 height:80px;990 width:500px;991 992}993 994 995 996 997.sendcomm998{999 1000 font-size:2.5rem;1001}1002 1003 1004.for1005{1006font-family: Tahoma;1007font-size:1.5em;1008width:290px;1009height:50px;1010 1011}1012 1013 1014 1015 1016 1017.sec7part4 #d4{/*اÙÙ
Ùاسبات اÙدÙÙÙØ©*/1018height:280px;1019 }1020.eventsmarquee{/*اÙÙ
Ùاسبات اÙدÙÙÙØ©*/1021 height:280px;1022 1023 }1024 1025 1026.sec7part7 #d7{/*استÙتاءات Ù
ختارة*/1027height:280px;1028}1029 1030.istefmarqee{/*استÙتاءات Ù
ختارة*/1031 height:280px;1032}1033 1034 1035 1036 1037 1038#newsmar{1039 display:block;1040}1041 1042 1043 1044 1045#gallery_kutub_ul li {1046 1047display: block;1048width:auto;1049height:auto;1050padding:1px;1051float:center;1052padding-bottom:150px;1053}1054 1055 1056 1057 1058.divwrit1{1059 width:auto; 1060 display:block;1061 float:center;1062 margin: auto;1063}1064 1065.divwrit1img{1066 width:100%; max-width:750px; height:100%;1067}1068 1069 1070.textinside {1071 1072 font-size:2.3rem;1073}1074 1075.textinside2 {1076 direction:rtl;1077 font-size:2rem;1078 1079}1080 1081#news_ul li {1082 display: block;1083 list-style-type: none;1084 direction:ltr;1085 padding-bottom:180px;1086 vertical-align:middle;1087 1088}1089 1090.imgstyl11091{1092width:90%;1093height:auto;1094padding:5px;1095max-height:none;1096}1097 1098 1099 1100.socialblock{1101 width:172px;1102 height:50px;1103 display:flex;1104 position:fixed;1105 top: 250px;1106 left:10px;1107 z-index:2;1108 //background:none;1109 border-radius: 8px 8px 8px 8px;1110 padding-top:10px;1111}1112 1113.istefsub1114{1115font-size:3rem;1116}1117 1118.pun1119{1120font-size:3rem;1121width:450px;1122 1123}1124 1125.pun11126{1127padding-right:50px;1128}1129 1130 1131.textstylduros1132{1133font-size:1.6rem;1134}1135 1136 1137.textduro{1138 font-family:Tahoma;1139 font-size:2.3rem;1140}1141 1142 1143 1144 1145.gallery_moaalf li{1146 1147display:block;1148width:650px;1149 1150}1151 1152 1153 1154.section3{1155display:none;1156}1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180}/******@MEDIA******/1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200