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="js no-touch svg inlinesvg svgclippaths no-ie8compat" lang="en" style>3 <!--<![endif]-->4 <head>5 <meta charset="utf-8">6 <meta content="width=device-width" name="viewport">7 <meta content="Founded by Phillip Lopate and Donald Barthelme in 1986, Gulf Coast is a journal of literature, art, and critical art writing, publishing contributors who represent a flow of international cultures, voices, and aesthetics. Through programs and publications, and in collaboration with the University of Houston, Gulf Coast brings consequential art and writing to an engaged audience." name="description">8 <title>9 Fog - Gulf Coast: A Journal of Literature and Fine Arts10 </title>11 <base>12 <meta content="summary" name="twitter:card">13 <meta content="@Gulf_Coast" name="twitter:site">14 <meta content="Fog" name="twitter:title">15 <meta content="" property="twitter:image">16 <meta content="I am yellow fingers swabbing your face at dawn and a ghost breath blown on your wife’s neck when she’s alone. Just try and keep me out. I wither houseplants, settle in the little berries of your infant’s lungs. Not even the spirits you pour…" property="twitter:description">17 <meta content="" property="og:url">18 <meta content="Fog" property="og:title">19 <meta content="I am yellow fingers swabbing your face at dawn and a ghost breath blown on your wife’s neck when she’s alone. Just try and keep me out. I wither houseplants, settle in the little berries of your infant’s lungs. Not even the spirits you pour so generously…" property="og:description">20 <meta content="article" property="og:type">21 <meta content="" property="og:image">22 <style type="text/css">23 #logo, .arrow-more, .inline-arrow-more {background-color: #901d1b;}24 a,h1,h2, .article-content h2,#sidebar-faceted h3, .series-heading, #sidebar #pagetitle { color: #901d1b;}25 #nav li a {border-left-color: #901d1b;}26 .paypal-button {background-color: #901d1b;border-color:#901d1b;}27 .paypal-button:hover {color:#901d1b;}28 .form-toggle,29 .sidebar-subscribe a,30 .sidebar-donate a {border-color:#901d1b;}31 32 .form-toggle:hover, .form-toggle.active,33 .sidebar-subscribe a:hover, .sidebar-donate a:hover {background-color:#901d1b;}34 35 .icon-area {background-color: #901d1b;border-color:#901d1b; border-radius:3px;}36 .sidebar-subscribe a, .sidebar-donate a {37 38 }39 </style>40 <!-- Google Analytics, m21 - 070314 -->41 <meta class="foundation-data-attribute-namespace">42 <meta class="foundation-mq-xxlarge">43 <meta class="foundation-mq-xlarge">44 <meta class="foundation-mq-large">45 <meta class="foundation-mq-medium">46 <meta class="foundation-mq-small">47 <style>48 meta.foundation-mq-small {49 font-family: "/only screen and (max-width: 40em)/";50 width: 0em;51}52 53meta.foundation-mq-medium {54 font-family: "/only screen and (min-width:40.063em) and (max-width:64em)/";55 width: 40.063em;56}57 58meta.foundation-mq-large {59 font-family: "/only screen and (min-width:64.063em)/";60 width: 64.063em;61}62 63meta.foundation-mq-xlarge {64 font-family: "/only screen and (min-width:90.063em)/";65 width: 90.063em;66}67 68meta.foundation-mq-xxlarge {69 font-family: "/only screen and (min-width:120.063em)/";70 width: 120.063em;71}72 73*,74*:before,75*:after {76 -moz-box-sizing: border-box;77 -webkit-box-sizing: border-box;78 box-sizing: border-box;79}80 81html,82body {83 font-size: 100%;84}85 86body {87 padding: 0;88 margin: 0;89 font-weight: normal;90 font-style: normal;91 line-height: 1;92 position: relative;93}94 95a:hover {96 cursor: pointer;97}98 99img,100object,101embed {102 max-width: 100%;103 height: auto;104}105 106object,107embed {108 height: 100%;109}110 111img {112 -ms-interpolation-mode: bicubic;113}114 115#map_canvas img,116#map_canvas embed,117#map_canvas object,118.map_canvas img,119.map_canvas embed,120.map_canvas object {121 max-width: none !important;122}123 124.left {125 float: left !important;126}127 128.right {129 float: right !important;130}131 132.clearfix {133 *zoom: 1;134}135 .clearfix:before, .clearfix:after {136 content: " ";137 display: table;138}139 .clearfix:after {140 clear: both;141}142 143.text-left {144 text-align: left !important;145}146 147.text-right {148 text-align: right !important;149}150 151.text-center {152 text-align: center !important;153}154 155.text-justify {156 text-align: justify !important;157}158 159.hide {160 display: none;161}162 163.antialiased {164 -webkit-font-smoothing: antialiased;165}166 167img {168 display: inline-block;169 vertical-align: middle;170}171 172textarea {173 height: auto;174 min-height: 50px;175}176 177select {178 width: 100%;179}180 181.row {182 width: 100%;183 margin-left: auto;184 margin-right: auto;185 margin-top: 0;186 margin-bottom: 0;187 max-width: 62.5rem;188 *zoom: 1;189}190 .row:before, .row:after {191 content: " ";192 display: table;193}194 .row:after {195 clear: both;196}197 .row.collapse > .column,198 .row.collapse > .columns {199 position: relative;200 padding-left: 0;201 padding-right: 0;202 float: left;203}204 .row.collapse .row {205 margin-left: 0;206 margin-right: 0;207}208 .row .row {209 width: auto;210 margin-left: -0.9375rem;211 margin-right: -0.9375rem;212 margin-top: 0;213 margin-bottom: 0;214 max-width: none;215 *zoom: 1;216}217 .row .row:before, .row .row:after {218 content: " ";219 display: table;220}221 .row .row:after {222 clear: both;223}224 .row .row.collapse {225 width: auto;226 margin: 0;227 max-width: none;228 *zoom: 1;229}230 .row .row.collapse:before, .row .row.collapse:after {231 content: " ";232 display: table;233}234 .row .row.collapse:after {235 clear: both;236}237 238.column,239.columns {240 position: relative;241 padding-left: 0.9375rem;242 padding-right: 0.9375rem;243 width: 100%;244 float: left;245}246 247@media only screen {248 .small-push-1 {249 position: relative;250 left: 8.33333%;251 right: auto;252}253 254 .small-pull-1 {255 position: relative;256 right: 8.33333%;257 left: auto;258}259 260 .small-push-2 {261 position: relative;262 left: 16.66667%;263 right: auto;264}265 266 .small-pull-2 {267 position: relative;268 right: 16.66667%;269 left: auto;270}271 272 .small-push-3 {273 position: relative;274 left: 25%;275 right: auto;276}277 278 .small-pull-3 {279 position: relative;280 right: 25%;281 left: auto;282}283 284 .small-push-4 {285 position: relative;286 left: 33.33333%;287 right: auto;288}289 290 .small-pull-4 {291 position: relative;292 right: 33.33333%;293 left: auto;294}295 296 .small-push-5 {297 position: relative;298 left: 41.66667%;299 right: auto;300}301 302 .small-pull-5 {303 position: relative;304 right: 41.66667%;305 left: auto;306}307 308 .small-push-6 {309 position: relative;310 left: 50%;311 right: auto;312}313 314 .small-pull-6 {315 position: relative;316 right: 50%;317 left: auto;318}319 320 .small-push-7 {321 position: relative;322 left: 58.33333%;323 right: auto;324}325 326 .small-pull-7 {327 position: relative;328 right: 58.33333%;329 left: auto;330}331 332 .small-push-8 {333 position: relative;334 left: 66.66667%;335 right: auto;336}337 338 .small-pull-8 {339 position: relative;340 right: 66.66667%;341 left: auto;342}343 344 .small-push-9 {345 position: relative;346 left: 75%;347 right: auto;348}349 350 .small-pull-9 {351 position: relative;352 right: 75%;353 left: auto;354}355 356 .small-push-10 {357 position: relative;358 left: 83.33333%;359 right: auto;360}361 362 .small-pull-10 {363 position: relative;364 right: 83.33333%;365 left: auto;366}367 368 .small-push-11 {369 position: relative;370 left: 91.66667%;371 right: auto;372}373 374 .small-pull-11 {375 position: relative;376 right: 91.66667%;377 left: auto;378}379 380 .column,381 .columns {382 position: relative;383 padding-left: 0.9375rem;384 padding-right: 0.9375rem;385 float: left;386}387 388 .small-1 {389 position: relative;390 width: 8.33333%;391}392 393 .small-2 {394 position: relative;395 width: 16.66667%;396}397 398 .small-3 {399 position: relative;400 width: 25%;401}402 403 .small-4 {404 position: relative;405 width: 33.33333%;406}407 408 .small-5 {409 position: relative;410 width: 41.66667%;411}412 413 .small-6 {414 position: relative;415 width: 50%;416}417 418 .small-7 {419 position: relative;420 width: 58.33333%;421}422 423 .small-8 {424 position: relative;425 width: 66.66667%;426}427 428 .small-9 {429 position: relative;430 width: 75%;431}432 433 .small-10 {434 position: relative;435 width: 83.33333%;436}437 438 .small-11 {439 position: relative;440 width: 91.66667%;441}442 443 .small-12 {444 position: relative;445 width: 100%;446}447 448 .small-offset-0 {449 position: relative;450 margin-left: 0%;451}452 453 .small-offset-1 {454 position: relative;455 margin-left: 8.33333%;456}457 458 .small-offset-2 {459 position: relative;460 margin-left: 16.66667%;461}462 463 .small-offset-3 {464 position: relative;465 margin-left: 25%;466}467 468 .small-offset-4 {469 position: relative;470 margin-left: 33.33333%;471}472 473 .small-offset-5 {474 position: relative;475 margin-left: 41.66667%;476}477 478 .small-offset-6 {479 position: relative;480 margin-left: 50%;481}482 483 .small-offset-7 {484 position: relative;485 margin-left: 58.33333%;486}487 488 .small-offset-8 {489 position: relative;490 margin-left: 66.66667%;491}492 493 .small-offset-9 {494 position: relative;495 margin-left: 75%;496}497 498 .small-offset-10 {499 position: relative;500 margin-left: 83.33333%;501}502 503 [class*="column"] + [class*="column"]:last-child {504 float: right;505}506 507 [class*="column"] + [class*="column"].end {508 float: left;509}510 511 .column.small-centered,512 .columns.small-centered {513 position: relative;514 margin-left: auto;515 margin-right: auto;516 float: none !important;517}518 519 .column.small-uncentered,520 .columns.small-uncentered {521 margin-left: 0;522 margin-right: 0;523 float: left !important;524}525 526 .column.small-uncentered.opposite,527 .columns.small-uncentered.opposite {528 float: right !important;529}530}531@media only screen and (min-width: 40.063em) {532 .medium-push-1 {533 position: relative;534 left: 8.33333%;535 right: auto;536}537 538 .medium-pull-1 {539 position: relative;540 right: 8.33333%;541 left: auto;542}543 544 .medium-push-2 {545 position: relative;546 left: 16.66667%;547 right: auto;548}549 550 .medium-pull-2 {551 position: relative;552 right: 16.66667%;553 left: auto;554}555 556 .medium-push-3 {557 position: relative;558 left: 25%;559 right: auto;560}561 562 .medium-pull-3 {563 position: relative;564 right: 25%;565 left: auto;566}567 568 .medium-push-4 {569 position: relative;570 left: 33.33333%;571 right: auto;572}573 574 .medium-pull-4 {575 position: relative;576 right: 33.33333%;577 left: auto;578}579 580 .medium-push-5 {581 position: relative;582 left: 41.66667%;583 right: auto;584}585 586 .medium-pull-5 {587 position: relative;588 right: 41.66667%;589 left: auto;590}591 592 .medium-push-6 {593 position: relative;594 left: 50%;595 right: auto;596}597 598 .medium-pull-6 {599 position: relative;600 right: 50%;601 left: auto;602}603 604 .medium-push-7 {605 position: relative;606 left: 58.33333%;607 right: auto;608}609 610 .medium-pull-7 {611 position: relative;612 right: 58.33333%;613 left: auto;614}615 616 .medium-push-8 {617 position: relative;618 left: 66.66667%;619 right: auto;620}621 622 .medium-pull-8 {623 position: relative;624 right: 66.66667%;625 left: auto;626}627 628 .medium-push-9 {629 position: relative;630 left: 75%;631 right: auto;632}633 634 .medium-pull-9 {635 position: relative;636 right: 75%;637 left: auto;638}639 640 .medium-push-10 {641 position: relative;642 left: 83.33333%;643 right: auto;644}645 646 .medium-pull-10 {647 position: relative;648 right: 83.33333%;649 left: auto;650}651 652 .medium-push-11 {653 position: relative;654 left: 91.66667%;655 right: auto;656}657 658 .medium-pull-11 {659 position: relative;660 right: 91.66667%;661 left: auto;662}663 664 .column,665 .columns {666 position: relative;667 padding-left: 0.9375rem;668 padding-right: 0.9375rem;669 float: left;670}671 672 .medium-1 {673 position: relative;674 width: 8.33333%;675}676 677 .medium-2 {678 position: relative;679 width: 16.66667%;680}681 682 .medium-3 {683 position: relative;684 width: 25%;685}686 687 .medium-4 {688 position: relative;689 width: 33.33333%;690}691 692 .medium-5 {693 position: relative;694 width: 41.66667%;695}696 697 .medium-6 {698 position: relative;699 width: 50%;700}701 702 .medium-7 {703 position: relative;704 width: 58.33333%;705}706 707 .medium-8 {708 position: relative;709 width: 66.66667%;710}711 712 .medium-9 {713 position: relative;714 width: 75%;715}716 717 .medium-10 {718 position: relative;719 width: 83.33333%;720}721 722 .medium-11 {723 position: relative;724 width: 91.66667%;725}726 727 .medium-12 {728 position: relative;729 width: 100%;730}731 732 .medium-offset-0 {733 position: relative;734 margin-left: 0%;735}736 737 .medium-offset-1 {738 position: relative;739 margin-left: 8.33333%;740}741 742 .medium-offset-2 {743 position: relative;744 margin-left: 16.66667%;745}746 747 .medium-offset-3 {748 position: relative;749 margin-left: 25%;750}751 752 .medium-offset-4 {753 position: relative;754 margin-left: 33.33333%;755}756 757 .medium-offset-5 {758 position: relative;759 margin-left: 41.66667%;760}761 762 .medium-offset-6 {763 position: relative;764 margin-left: 50%;765}766 767 .medium-offset-7 {768 position: relative;769 margin-left: 58.33333%;770}771 772 .medium-offset-8 {773 position: relative;774 margin-left: 66.66667%;775}776 777 .medium-offset-9 {778 position: relative;779 margin-left: 75%;780}781 782 .medium-offset-10 {783 position: relative;784 margin-left: 83.33333%;785}786 787 [class*="column"] + [class*="column"]:last-child {788 float: right;789}790 791 [class*="column"] + [class*="column"].end {792 float: left;793}794 795 .column.medium-centered,796 .columns.medium-centered {797 position: relative;798 margin-left: auto;799 margin-right: auto;800 float: none !important;801}802 803 .column.medium-uncentered,804 .columns.medium-uncentered {805 margin-left: 0;806 margin-right: 0;807 float: left !important;808}809 810 .column.medium-uncentered.opposite,811 .columns.medium-uncentered.opposite {812 float: right !important;813}814 815 .push-1 {816 position: relative;817 left: 8.33333%;818 right: auto;819}820 821 .pull-1 {822 position: relative;823 right: 8.33333%;824 left: auto;825}826 827 .push-2 {828 position: relative;829 left: 16.66667%;830 right: auto;831}832 833 .pull-2 {834 position: relative;835 right: 16.66667%;836 left: auto;837}838 839 .push-3 {840 position: relative;841 left: 25%;842 right: auto;843}844 845 .pull-3 {846 position: relative;847 right: 25%;848 left: auto;849}850 851 .push-4 {852 position: relative;853 left: 33.33333%;854 right: auto;855}856 857 .pull-4 {858 position: relative;859 right: 33.33333%;860 left: auto;861}862 863 .push-5 {864 position: relative;865 left: 41.66667%;866 right: auto;867}868 869 .pull-5 {870 position: relative;871 right: 41.66667%;872 left: auto;873}874 875 .push-6 {876 position: relative;877 left: 50%;878 right: auto;879}880 881 .pull-6 {882 position: relative;883 right: 50%;884 left: auto;885}886 887 .push-7 {888 position: relative;889 left: 58.33333%;890 right: auto;891}892 893 .pull-7 {894 position: relative;895 right: 58.33333%;896 left: auto;897}898 899 .push-8 {900 position: relative;901 left: 66.66667%;902 right: auto;903}904 905 .pull-8 {906 position: relative;907 right: 66.66667%;908 left: auto;909}910 911 .push-9 {912 position: relative;913 left: 75%;914 right: auto;915}916 917 .pull-9 {918 position: relative;919 right: 75%;920 left: auto;921}922 923 .push-10 {924 position: relative;925 left: 83.33333%;926 right: auto;927}928 929 .pull-10 {930 position: relative;931 right: 83.33333%;932 left: auto;933}934 935 .push-11 {936 position: relative;937 left: 91.66667%;938 right: auto;939}940 941 .pull-11 {942 position: relative;943 right: 91.66667%;944 left: auto;945}946}947@media only screen and (min-width: 64.063em) {948 .large-push-1 {949 position: relative;950 left: 8.33333%;951 right: auto;952}953 954 .large-pull-1 {955 position: relative;956 right: 8.33333%;957 left: auto;958}959 960 .large-push-2 {961 position: relative;962 left: 16.66667%;963 right: auto;964}965 966 .large-pull-2 {967 position: relative;968 right: 16.66667%;969 left: auto;970}971 972 .large-push-3 {973 position: relative;974 left: 25%;975 right: auto;976}977 978 .large-pull-3 {979 position: relative;980 right: 25%;981 left: auto;982}983 984 .large-push-4 {985 position: relative;986 left: 33.33333%;987 right: auto;988}989 990 .large-pull-4 {991 position: relative;992 right: 33.33333%;993 left: auto;994}995 996 .large-push-5 {997 position: relative;998 left: 41.66667%;999 right: auto;1000}1001 1002 .large-pull-5 {1003 position: relative;1004 right: 41.66667%;1005 left: auto;1006}1007 1008 .large-push-6 {1009 position: relative;1010 left: 50%;1011 right: auto;1012}1013 1014 .large-pull-6 {1015 position: relative;1016 right: 50%;1017 left: auto;1018}1019 1020 .large-push-7 {1021 position: relative;1022 left: 58.33333%;1023 right: auto;1024}1025 1026 .large-pull-7 {1027 position: relative;1028 right: 58.33333%;1029 left: auto;1030}1031 1032 .large-push-8 {1033 position: relative;1034 left: 66.66667%;1035 right: auto;1036}1037 1038 .large-pull-8 {1039 position: relative;1040 right: 66.66667%;1041 left: auto;1042}1043 1044 .large-push-9 {1045 position: relative;1046 left: 75%;1047 right: auto;1048}1049 1050 .large-pull-9 {1051 position: relative;1052 right: 75%;1053 left: auto;1054}1055 1056 .large-push-10 {1057 position: relative;1058 left: 83.33333%;1059 right: auto;1060}1061 1062 .large-pull-10 {1063 position: relative;1064 right: 83.33333%;1065 left: auto;1066}1067 1068 .large-push-11 {1069 position: relative;1070 left: 91.66667%;1071 right: auto;1072}1073 1074 .large-pull-11 {1075 position: relative;1076 right: 91.66667%;1077 left: auto;1078}1079 1080 .column,1081 .columns {1082 position: relative;1083 padding-left: 0.9375rem;1084 padding-right: 0.9375rem;1085 float: left;1086}1087 1088 .large-1 {1089 position: relative;1090 width: 8.33333%;1091}1092 1093 .large-2 {1094 position: relative;1095 width: 16.66667%;1096}1097 1098 .large-3 {1099 position: relative;1100 width: 25%;1101}1102 1103 .large-4 {1104 position: relative;1105 width: 33.33333%;1106}1107 .large-4-5 {1108 position: relative;1109 width: 37.33333%;1110}1111 1112 .large-5 {1113 position: relative;1114 width: 41.66667%;1115}1116 .large-5-5 {1117 position: relative;1118 width: 44.5%;1119}1120 1121 .large-6 {1122 position: relative;1123 width: 50%;1124}1125 1126 .large-7 {1127 position: relative;1128 width: 58.33333%;1129}1130 1131 .large-8 {1132 position: relative;1133 width: 66.66667%;1134}1135 1136 .large-9 {1137 position: relative;1138 width: 75%;1139}1140 1141 .large-10 {1142 position: relative;1143 width: 83.33333%;1144}1145 1146 .large-11 {1147 position: relative;1148 width: 91.66667%;1149}1150 1151 .large-12 {1152 position: relative;1153 width: 100%;1154}1155 1156 .large-offset-0 {1157 position: relative;1158 margin-left: 0%;1159}1160 1161 .large-offset-1 {1162 position: relative;1163 margin-left: 8.33333%;1164}1165 1166 .large-offset-2 {1167 position: relative;1168 margin-left: 16.66667%;1169}1170 1171 .large-offset-3 {1172 position: relative;1173 margin-left: 25%;1174}1175 1176 .large-offset-4 {1177 position: relative;1178 margin-left: 33.33333%;1179}1180 1181 .large-offset-5 {1182 position: relative;1183 margin-left: 41.66667%;1184}1185 1186 .large-offset-6 {1187 position: relative;1188 margin-left: 50%;1189}1190 1191 .large-offset-7 {1192 position: relative;1193 margin-left: 58.33333%;1194}1195 1196 .large-offset-8 {1197 position: relative;1198 margin-left: 66.66667%;1199}1200