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 data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D" lang="en">3 <head>4 <style>5 </style>6 <!-- Google tag (gtag.js) -->7 <title>8 Problems We Help Companies Solve in Buffalo, NY | GreenTek Solutions, LLC9 </title>10 <meta charset="utf-8" data-n-head="ssr">11 <meta content="width=device-width, initial-scale=1" data-n-head="ssr" name="viewport">12 <meta content="We help companies properly sell or dispose of their used IT equipment in Buffalo, NY. We make the process of disposing your used computer equipment easy and secure." data-hid="description" data-n-head="ssr" name="description">13 <base>14 <link as="font" data-n-head="ssr" rel="preload">15 <link as="script" rel="preload">16 <link as="script" rel="preload">17 <link as="script" rel="preload">18 <link as="script" rel="preload">19 <link as="script" rel="preload">20 <style data-vue-ssr-id="15bbe95e:0 54b08540:0 9d54a558:0 53f61d5f:0 1239d49d:0 beb44534:0 31524172:0 f3ec02b0:0 6ecb5806:0 3fb5033c:0 28f1d0c2:0 c80cdf1e:0">21 .svg-inline--fa,svg:not(:root).svg-inline--fa{22 overflow:visible23}24 25.svg-inline--fa{26 display:inline-block;27 font-size:inherit;28 height:1em;29 vertical-align:-.125em30}31 32.svg-inline--fa.fa-lg{33 vertical-align:-.225em34}35 36.svg-inline--fa.fa-w-1{37 width:.0625em38}39 40.svg-inline--fa.fa-w-2{41 width:.125em42}43 44.svg-inline--fa.fa-w-3{45 width:.1875em46}47 48.svg-inline--fa.fa-w-4{49 width:.25em50}51 52.svg-inline--fa.fa-w-5{53 width:.3125em54}55 56.svg-inline--fa.fa-w-6{57 width:.375em58}59 60.svg-inline--fa.fa-w-7{61 width:.4375em62}63 64.svg-inline--fa.fa-w-8{65 width:.5em66}67 68.svg-inline--fa.fa-w-9{69 width:.5625em70}71 72.svg-inline--fa.fa-w-10{73 width:.625em74}75 76.svg-inline--fa.fa-w-11{77 width:.6875em78}79 80.svg-inline--fa.fa-w-12{81 width:.75em82}83 84.svg-inline--fa.fa-w-13{85 width:.8125em86}87 88.svg-inline--fa.fa-w-14{89 width:.875em90}91 92.svg-inline--fa.fa-w-15{93 width:.9375em94}95 96.svg-inline--fa.fa-w-16{97 width:1em98}99 100.svg-inline--fa.fa-w-17{101 width:1.0625em102}103 104.svg-inline--fa.fa-w-18{105 width:1.125em106}107 108.svg-inline--fa.fa-w-19{109 width:1.1875em110}111 112.svg-inline--fa.fa-w-20{113 width:1.25em114}115 116.svg-inline--fa.fa-pull-left{117 margin-right:.3em;118 width:auto119}120 121.svg-inline--fa.fa-pull-right{122 margin-left:.3em;123 width:auto124}125 126.svg-inline--fa.fa-border{127 height:1.5em128}129 130.svg-inline--fa.fa-li{131 width:2em132}133 134.svg-inline--fa.fa-fw{135 width:1.25em136}137 138.fa-layers svg.svg-inline--fa{139 bottom:0;140 left:0;141 margin:auto;142 position:absolute;143 right:0;144 top:0145}146 147.fa-layers{148 display:inline-block;149 height:1em;150 position:relative;151 text-align:center;152 vertical-align:-.125em;153 width:1em154}155 156.fa-layers svg.svg-inline--fa{157 transform-origin:center center158}159 160.fa-layers-counter,.fa-layers-text{161 display:inline-block;162 position:absolute;163 text-align:center164}165 166.fa-layers-text{167 left:50%;168 top:50%;169 transform:translate(-50%,-50%);170 transform-origin:center center171}172 173.fa-layers-counter{174 background-color:#ff253a;175 border-radius:1em;176 box-sizing:border-box;177 color:#fff;178 height:1.5em;179 line-height:1;180 max-width:5em;181 min-width:1.5em;182 overflow:hidden;183 padding:.25em;184 right:0;185 text-overflow:ellipsis;186 top:0;187 transform:scale(.25);188 transform-origin:top right189}190 191.fa-layers-bottom-right{192 bottom:0;193 right:0;194 top:auto;195 transform:scale(.25);196 transform-origin:bottom right197}198 199.fa-layers-bottom-left{200 bottom:0;201 left:0;202 right:auto;203 top:auto;204 transform:scale(.25);205 transform-origin:bottom left206}207 208.fa-layers-top-right{209 right:0;210 top:0;211 transform:scale(.25);212 transform-origin:top right213}214 215.fa-layers-top-left{216 left:0;217 right:auto;218 top:0;219 transform:scale(.25);220 transform-origin:top left221}222 223.fa-lg{224 font-size:1.33333em;225 line-height:.75em;226 vertical-align:-.0667em227}228 229.fa-xs{230 font-size:.75em231}232 233.fa-sm{234 font-size:.875em235}236 237.fa-1x{238 font-size:1em239}240 241.fa-2x{242 font-size:2em243}244 245.fa-3x{246 font-size:3em247}248 249.fa-4x{250 font-size:4em251}252 253.fa-5x{254 font-size:5em255}256 257.fa-6x{258 font-size:6em259}260 261.fa-7x{262 font-size:7em263}264 265.fa-8x{266 font-size:8em267}268 269.fa-9x{270 font-size:9em271}272 273.fa-10x{274 font-size:10em275}276 277.fa-fw{278 text-align:center;279 width:1.25em280}281 282.fa-ul{283 list-style-type:none;284 margin-left:2.5em;285 padding-left:0286}287 288.fa-ul>li{289 position:relative290}291 292.fa-li{293 left:-2em;294 position:absolute;295 text-align:center;296 width:2em;297 line-height:inherit298}299 300.fa-border{301 border:.08em solid #eee;302 border-radius:.1em;303 padding:.2em .25em .15em304}305 306.fa-pull-left{307 float:left308}309 310.fa-pull-right{311 float:right312}313 314.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{315 margin-right:.3em316}317 318.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{319 margin-left:.3em320}321 322.fa-spin{323 -webkit-animation:fa-spin 2s linear infinite;324 animation:fa-spin 2s linear infinite325}326 327.fa-pulse{328 -webkit-animation:fa-spin 1s steps(8) infinite;329 animation:fa-spin 1s steps(8) infinite330}331 332@-webkit-keyframes fa-spin{333 0%{334 transform:rotate(0deg)335 }336 337 to{338 transform:rotate(1turn)339 }340}341 342@keyframes fa-spin{343 0%{344 transform:rotate(0deg)345 }346 347 to{348 transform:rotate(1turn)349 }350}351 352.fa-rotate-90{353 -ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";354 transform:rotate(90deg)355}356 357.fa-rotate-180{358 -ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";359 transform:rotate(180deg)360}361 362.fa-rotate-270{363 -ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";364 transform:rotate(270deg)365}366 367.fa-flip-horizontal{368 -ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";369 transform:scaleX(-1)370}371 372.fa-flip-vertical{373 transform:scaleY(-1)374}375 376.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{377 -ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"378}379 380.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{381 transform:scale(-1)382}383 384:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{385 filter:none386}387 388.fa-stack{389 display:inline-block;390 height:2em;391 position:relative;392 width:2.5em393}394 395.fa-stack-1x,.fa-stack-2x{396 bottom:0;397 left:0;398 margin:auto;399 position:absolute;400 right:0;401 top:0402}403 404.svg-inline--fa.fa-stack-1x{405 height:1em;406 width:1.25em407}408 409.svg-inline--fa.fa-stack-2x{410 height:2em;411 width:2.5em412}413 414.fa-inverse{415 color:#fff416}417 418.sr-only{419 border:0;420 clip:rect(0,0,0,0);421 height:1px;422 margin:-1px;423 overflow:hidden;424 padding:0;425 position:absolute;426 width:1px427}428 429.sr-only-focusable:active,.sr-only-focusable:focus{430 clip:auto;431 height:auto;432 margin:0;433 overflow:visible;434 position:static;435 width:auto436}437 438.svg-inline--fa .fa-primary{439 fill:currentColor;440 fill:var(--fa-primary-color,currentColor);441 opacity:1;442 opacity:1;443 opacity:var(--fa-primary-opacity,1)444}445 446.svg-inline--fa .fa-secondary{447 fill:currentColor;448 fill:var(--fa-secondary-color,currentColor)449}450 451.svg-inline--fa .fa-secondary,.svg-inline--fa.fa-swap-opacity .fa-primary{452 opacity:.4;453 opacity:.4;454 opacity:var(--fa-secondary-opacity,.4)455}456 457.svg-inline--fa.fa-swap-opacity .fa-secondary{458 opacity:1;459 opacity:1;460 opacity:var(--fa-primary-opacity,1)461}462 463.svg-inline--fa mask .fa-primary,.svg-inline--fa mask .fa-secondary{464 fill:#000465}466 467.fad.fa-inverse{468 color:#fff469}470/*! tailwindcss v2.2.4 | MIT License | https://tailwindcss.com*/471 472/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */473 474/*475Document476========477*/478 479/**480Use a better box model (opinionated).481*/482 483*,484::before,485::after {486 box-sizing: border-box;487}488 489/**490Use a more readable tab size (opinionated).491*/492 493html {494 -moz-tab-size: 4;495 -o-tab-size: 4;496 tab-size: 4;497}498 499/**5001. Correct the line height in all browsers.5012. Prevent adjustments of font size after orientation changes in iOS.502*/503 504html {505 line-height: 1.15; /* 1 */506 -webkit-text-size-adjust: 100%; /* 2 */507}508 509/*510Sections511========512*/513 514/**515Remove the margin in all browsers.516*/517 518body {519 margin: 0;520}521 522/**523Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)524*/525 526body {527 font-family:528 system-ui,529 -apple-system, /* Firefox supports this but not yet `system-ui` */530 'Segoe UI',531 Roboto,532 Helvetica,533 Arial,534 sans-serif,535 'Apple Color Emoji',536 'Segoe UI Emoji';537}538 539/*540Grouping content541================542*/543 544/**5451. Add the correct height in Firefox.5462. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)547*/548 549hr {550 height: 0; /* 1 */551 color: inherit; /* 2 */552}553 554/*555Text-level semantics556====================557*/558 559/**560Add the correct text decoration in Chrome, Edge, and Safari.561*/562 563abbr[title] {564 -webkit-text-decoration: underline dotted;565 text-decoration: underline dotted;566}567 568/**569Add the correct font weight in Edge and Safari.570*/571 572b,573strong {574 font-weight: bolder;575}576 577/**5781. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)5792. Correct the odd 'em' font sizing in all browsers.580*/581 582code,583kbd,584samp,585pre {586 font-family:587 ui-monospace,588 SFMono-Regular,589 Consolas,590 'Liberation Mono',591 Menlo,592 monospace; /* 1 */593 font-size: 1em; /* 2 */594}595 596/**597Add the correct font size in all browsers.598*/599 600small {601 font-size: 80%;602}603 604/**605Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.606*/607 608sub,609sup {610 font-size: 75%;611 line-height: 0;612 position: relative;613 vertical-align: baseline;614}615 616sub {617 bottom: -0.25em;618}619 620sup {621 top: -0.5em;622}623 624/*625Tabular data626============627*/628 629/**6301. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)6312. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)632*/633 634table {635 text-indent: 0; /* 1 */636 border-color: inherit; /* 2 */637}638 639/*640Forms641=====642*/643 644/**6451. Change the font styles in all browsers.6462. Remove the margin in Firefox and Safari.647*/648 649button,650input,651optgroup,652select,653textarea {654 font-family: inherit; /* 1 */655 font-size: 100%; /* 1 */656 line-height: 1.15; /* 1 */657 margin: 0; /* 2 */658}659 660/**661Remove the inheritance of text transform in Edge and Firefox.6621. Remove the inheritance of text transform in Firefox.663*/664 665button,666select { /* 1 */667 text-transform: none;668}669 670/**671Correct the inability to style clickable types in iOS and Safari.672*/673 674button,675[type='button'],676[type='reset'],677[type='submit'] {678 -webkit-appearance: button;679}680 681/**682Remove the inner border and padding in Firefox.683*/684 685/**686Restore the focus styles unset by the previous rule.687*/688 689/**690Remove the additional ':invalid' styles in Firefox.691See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737692*/693 694/**695Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.696*/697 698legend {699 padding: 0;700}701 702/**703Add the correct vertical alignment in Chrome and Firefox.704*/705 706progress {707 vertical-align: baseline;708}709 710/**711Correct the cursor style of increment and decrement buttons in Safari.712*/713 714/**7151. Correct the odd appearance in Chrome and Safari.7162. Correct the outline style in Safari.717*/718 719/**720Remove the inner padding in Chrome and Safari on macOS.721*/722 723/**7241. Correct the inability to style clickable types in iOS and Safari.7252. Change font properties to 'inherit' in Safari.726*/727 728/*729Interactive730===========731*/732 733/*734Add the correct display in Chrome and Safari.735*/736 737summary {738 display: list-item;739}740 741/**742 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base743 * A thin layer on top of normalize.css that provides a starting point more744 * suitable for web applications.745 */746 747/**748 * Removes the default spacing and border for appropriate elements.749 */750 751blockquote,752dl,753dd,754h1,755h2,756h3,757h4,758h5,759h6,760hr,761figure,762p,763pre {764 margin: 0;765}766 767button {768 background-color: transparent;769 background-image: none;770}771 772fieldset {773 margin: 0;774 padding: 0;775}776 777ol,778ul {779 list-style: none;780 margin: 0;781 padding: 0;782}783 784/**785 * Tailwind custom reset styles786 */787 788/**789 * 1. Use the user's configured `sans` font-family (with Tailwind's default790 * sans-serif font stack as a fallback) as a sane default.791 * 2. Use Tailwind's default "normal" line-height so the user isn't forced792 * to override it to ensure consistency even when using the default theme.793 */794 795html {796 font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */797 line-height: 1.5; /* 2 */798}799 800/**801 * Inherit font-family and line-height from `html` so users can set them as802 * a class directly on the `html` element.803 */804 805body {806 font-family: inherit;807 line-height: inherit;808}809 810/**811 * 1. Prevent padding and border from affecting element width.812 *813 * We used to set this in the html element and inherit from814 * the parent element for everything else. This caused issues815 * in shadow-dom-enhanced elements like <details> where the content816 * is wrapped by a div with box-sizing set to `content-box`.817 *818 * https://github.com/mozdevs/cssremedy/issues/4819 *820 *821 * 2. Allow adding a border to an element by just adding a border-width.822 *823 * By default, the way the browser specifies that an element should have no824 * border is by setting it's border-style to `none` in the user-agent825 * stylesheet.826 *827 * In order to easily add borders to elements by just setting the `border-width`828 * property, we change the default border-style for all elements to `solid`, and829 * use border-width to hide them instead. This way our `border` utilities only830 * need to set the `border-width` property instead of the entire `border`831 * shorthand, making our border utilities much more straightforward to compose.832 *833 * https://github.com/tailwindcss/tailwindcss/pull/116834 */835 836*,837::before,838::after {839 box-sizing: border-box; /* 1 */840 border-width: 0; /* 2 */841 border-style: solid; /* 2 */842 border-color: currentColor; /* 2 */843}844 845/*846 * Ensure horizontal rules are visible by default847 */848 849hr {850 border-top-width: 1px;851}852 853/**854 * Undo the `border-style: none` reset that Normalize applies to images so that855 * our `border-{width}` utilities have the expected effect.856 *857 * The Normalize reset is unnecessary for us since we default the border-width858 * to 0 on all elements.859 *860 * https://github.com/tailwindcss/tailwindcss/issues/362861 */862 863img {864 border-style: solid;865}866 867textarea {868 resize: vertical;869}870 871input::-moz-placeholder, textarea::-moz-placeholder {872 opacity: 1;873 color: #9ca3af;874}875 876input:-ms-input-placeholder, textarea:-ms-input-placeholder {877 opacity: 1;878 color: #9ca3af;879}880 881input::placeholder,882textarea::placeholder {883 opacity: 1;884 color: #9ca3af;885}886 887button {888 cursor: pointer;889}890 891table {892 border-collapse: collapse;893}894 895h1,896h2,897h3,898h4,899h5,900h6 {901 font-size: inherit;902 font-weight: inherit;903}904 905/**906 * Reset links to optimize for opt-in styling instead of907 * opt-out.908 */909 910a {911 color: inherit;912 text-decoration: inherit;913}914 915/**916 * Reset form element properties that are easy to forget to917 * style explicitly so you don't inadvertently introduce918 * styles that deviate from your design system. These styles919 * supplement a partial reset that is already applied by920 * normalize.css.921 */922 923button,924input,925optgroup,926select,927textarea {928 padding: 0;929 line-height: inherit;930 color: inherit;931}932 933/**934 * Use the configured 'mono' font family for elements that935 * are expected to be rendered with a monospace font, falling936 * back to the system monospace stack if there is no configured937 * 'mono' font family.938 */939 940pre,941code,942kbd,943samp {944 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;945}946 947/**948 * 1. Make replaced elements `display: block` by default as that's949 * the behavior you want almost all of the time. Inspired by950 * CSS Remedy, with `svg` added as well.951 *952 * https://github.com/mozdevs/cssremedy/issues/14953 * 954 * 2. Add `vertical-align: middle` to align replaced elements more955 * sensibly by default when overriding `display` by adding a956 * utility like `inline`.957 *958 * This can trigger a poorly considered linting error in some959 * tools but is included by design.960 * 961 * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210962 */963 964img,965svg,966video,967canvas,968audio,969iframe,970embed,971object {972 display: block; /* 1 */973 vertical-align: middle; /* 2 */974}975 976/**977 * Constrain images and videos to the parent width and preserve978 * their intrinsic aspect ratio.979 *980 * https://github.com/mozdevs/cssremedy/issues/14981 */982 983img,984video {985 max-width: 100%;986 height: auto;987}988 989*, ::before, ::after{990 --tw-border-opacity:1;991 border-color:rgba(229, 231, 235, var(--tw-border-opacity));992}993 994.container{995 width:100%;996}997 998@media (min-width: 640px){999 .container{1000 max-width:640px;1001 }1002}1003 1004@media (min-width: 768px){1005 .container{1006 max-width:768px;1007 }1008}1009 1010@media (min-width: 1024px){1011 .container{1012 max-width:1024px;1013 }1014}1015 1016@media (min-width: 1280px){1017 .container{1018 max-width:1280px;1019 }1020}1021 1022@media (min-width: 1536px){1023 .container{1024 max-width:1536px;1025 }1026}1027 1028.invisible{1029 visibility:hidden;1030}1031 1032.fixed{1033 position:fixed;1034}1035 1036.absolute{1037 position:absolute;1038}1039 1040.relative{1041 position:relative;1042}1043 1044.top-4{1045 top:1rem;1046}1047 1048.right-4{1049 right:1rem;1050}1051 1052.z-10{1053 z-index:10;1054}1055 1056.z-30{1057 z-index:30;1058}1059 1060.m-0{1061 margin:0px;1062}1063 1064.m-auto{1065 margin:auto;1066}1067 1068.my-8{1069 margin-top:2rem;1070 margin-bottom:2rem;1071}1072 1073.my-10{1074 margin-top:2.5rem;1075 margin-bottom:2.5rem;1076}1077 1078.my-16{1079 margin-top:4rem;1080 margin-bottom:4rem;1081}1082 1083.mt-4{1084 margin-top:1rem;1085}1086 1087.mt-16{1088 margin-top:4rem;1089}1090 1091.mr-2{1092 margin-right:0.5rem;1093}1094 1095.mr-4{1096 margin-right:1rem;1097}1098 1099.mr-6{1100 margin-right:1.5rem;1101}1102 1103.mb-2{1104 margin-bottom:0.5rem;1105}1106 1107.mb-4{1108 margin-bottom:1rem;1109}1110 1111.mb-8{1112 margin-bottom:2rem;1113}1114 1115.mb-10{1116 margin-bottom:2.5rem;1117}1118 1119.ml-4{1120 margin-left:1rem;1121}1122 1123.ml-8{1124 margin-left:2rem;1125}1126 1127.ml-10{1128 margin-left:2.5rem;1129}1130 1131.flex{1132 display:flex;1133}1134 1135.table{1136 display:table;1137}1138 1139.grid{1140 display:grid;1141}1142 1143.hidden{1144 display:none;1145}1146 1147.h-2{1148 height:0.5rem;1149}1150 1151.h-full{1152 height:100%;1153}1154 1155.h-screen{1156 height:100vh;1157}1158 1159.min-h-screen{1160 min-height:100vh;1161}1162 1163.w-6{1164 width:1.5rem;1165}1166 1167.w-8{1168 width:2rem;1169}1170 1171.w-24{1172 width:6rem;1173}1174 1175.w-64{1176 width:16rem;1177}1178 1179.w-1\/2{1180 width:50%;1181}1182 1183.w-3\/4{1184 width:75%;1185}1186 1187.w-full{1188 width:100%;1189}1190 1191.flex-grow{1192 flex-grow:1;1193}1194 1195.transform{1196 --tw-translate-x:0;1197 --tw-translate-y:0;1198 --tw-rotate:0;1199 --tw-skew-x:0;1200 --tw-skew-y:0;