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 flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths js" style>3 <!--<![endif]-->4 <head>5 <style>6 font-size: 100%;7 line-height: 1.5em8}9 10html {11 font-family: sans-serif;12 -ms-text-size-adjust: 100%;13 -webkit-text-size-adjust: 100%14}15 16body {17 margin: 018}19 20article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {21 display: block22}23 24audio,canvas,progress,video {25 display: inline-block;26 *display: inline;27 *zoom:1;vertical-align: baseline28}29 30audio:not([controls]) {31 display: none;32 height: 033}34 35[hidden] {36 display: none37}38 39template {40 display: none41}42 43a {44 background-color: transparent45}46 47a:active,a:hover {48 outline: 049}50 51abbr[title] {52 border-bottom: 1px dotted53}54 55b,strong {56 font-weight: bold57}58 59blockquote {60 margin: 1em 40px ;61 font-style: italic;62}63 64dfn {65 font-style: italic66}67 68h1 {69 font-size: 2em;70 line-height: 1.5em;71 margin-top: 0.75em;72 margin-bottom: 0.75em73}74 75h2 {76 font-size: 1.5em;77 line-height: 2em;78 margin-top: 1em;79 margin-bottom: 1em80}81 82h3 {83 font-size: 1.17em;84 line-height: 1.28205em;85 margin-top: 1.28205em;86 margin-bottom: 1.28205em87}88 89h4 {90 font-size: 1em;91 line-height: 1.5em;92 margin-top: 1.5em;93 margin-bottom: 1.5em94}95 96h5 {97 font-size: 0.83em;98 line-height: 1.80723em;99 margin-top: 1.80723em;100 margin-bottom: 1.80723em101}102 103h6 {104 font-size: 0.67em;105 line-height: 2.23881em;106 margin-top: 2.23881em;107 margin-bottom: 2.23881em108}109 110mark {111 background: #ff0;112 color: #000113}114 115p,pre {116 margin: 1.5em 0117}118 119small {120 font-size: 80%121}122 123sub,sup {124 font-size: 75%;125 line-height: 0;126 position: relative;127 vertical-align: baseline128}129 130sup {131 top: -0.5em132}133 134sub {135 bottom: -0.25em136}137 138dl,menu,ol,ul {139 margin: 1.5em 0140}141 142dd {143 margin: 0 0 0 40px144}145 146menu,ol,ul {147 padding: 0 0 0 40px148}149 150nav ul,nav ol {151 list-style: none;152 list-style-image: none153}154 155img {156 border: 0;157 -ms-interpolation-mode: bicubic158}159 160svg:not(:root) {161 overflow: hidden162}163 164figure {165 margin: 1.5em 40px166}167 168hr {169 -moz-box-sizing: content-box;170 -webkit-box-sizing: content-box;171 box-sizing: content-box;172 height: 0173}174 175pre {176 overflow: auto177}178 179code,kbd,pre,samp {180 padding: 0;181 padding-top: 0.2em;182 padding-bottom: 0.2em;183 margin: 0;184 background-color: rgba(0,0,0,0.04);185 border-radius: 3px;186}187 188form {189 margin: 0190}191 192button,input,optgroup,select,textarea {193 color: inherit;194 font: inherit;195 margin: 0;196 *font-family: sans-serif;197 *vertical-align: middle198}199 200button {201 overflow: visible202}203 204button,select {205 text-transform: none206}207 208button,html input[type="button"],input[type="reset"],input[type="submit"] {209 -webkit-appearance: button;210 cursor: pointer;211 *overflow: visible212}213 214button[disabled],html input[disabled] {215 cursor: default216}217 218button::-moz-focus-inner,input::-moz-focus-inner {219 border: 0;220 padding: 0221}222 223input {224 line-height: normal225}226 227input[type="checkbox"],input[type="radio"] {228 -moz-box-sizing: border-box;229 -webkit-box-sizing: border-box;230 box-sizing: border-box;231 padding: 0;232 *height: 13px;233 *width: 13px234}235 236input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {237 height: auto238}239 240input[type="search"] {241 -webkit-appearance: textfield;242 -moz-box-sizing: content-box;243 -webkit-box-sizing: content-box;244 box-sizing: content-box245}246 247input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {248 -webkit-appearance: none249}250 251fieldset {252 margin: 0 2px;253 border-color: #c0c0c0;254 border-top-width: 0.0625em;255 border-top-style: solid;256 padding-top: 0.4625em;257 border-bottom-width: 0.0625em;258 border-bottom-style: solid;259 padding-bottom: 0.9125em;260 border-left-width: 0.0625em;261 border-left-style: solid;262 padding-left: 0.875em;263 border-right-width: 0.0625em;264 border-right-style: solid;265 padding-right: 0.875em266}267 268legend {269 border: 0;270 padding: 0;271 *margin-left: -7px272}273 274textarea {275 overflow: auto276}277 278optgroup {279 font-weight: bold280}281 282table {283 border-collapse: collapse;284 border-spacing: 0285}286 287td,th {288 padding: 0289}290 291.button,.button-secondary,.button-tertiary,.button-outline {292 background-color: #2e8b57;293 display: inline-block;294 position: relative;295 font-family: "Open Sans",Helvetica,Arial,sans-serif;296 text-decoration: none;297 color: #fff;298 font-size: 1em;299 line-height: 1.2em;300 font-weight: normal;301 padding: .5em 1.5em;302 border: 0;303 border-radius: 4px;304 cursor: pointer;305 margin-bottom: .5em;306 -moz-transition: background-color 0.14s ease-in-out;307 -o-transition: background-color 0.14s ease-in-out;308 -webkit-transition: background-color 0.14s ease-in-out;309 transition: background-color 0.14s ease-in-out310}311 312.button:hover,.button-secondary:hover,.button-tertiary:hover,.button-outline:hover,.button:focus,.button-secondary:focus,.button-tertiary:focus,.button-outline:focus {313 color: #fff;314 text-decoration: none;315 background-color: #21653f316}317 318.button:active,.button-secondary:active,.button-tertiary:active,.button-outline:active {319 top: 1px320}321 322.button-secondary {323 background-color: #233E5B324}325 326.button-secondary:hover {327 background-color: #152536328}329 330.button-tertiary {331 background-color: #aaa332}333 334.button-tertiary:hover {335 background-color: #909090336}337 338.button-outline {339 background-color: transparent;340 border: 3px solid #2e8b57;341 color: #2e8b57342}343 344.button-outline:hover {345 background-color: #2e8b57;346 color: #fff347}348 349label {350 display: block;351 margin-bottom: 5px352}353 354input[type=text],input[type=email],input[type=phone],input[type=password],input[type=number],input[type=search],textarea {355 background: #e6e6e6;356 padding: 5px;357 outline: none;358 border: none;359 height: 44px;360 width: 300px;361 margin-bottom: .5rem362}363 364input[type=text]:focus,input[type=email]:focus,input[type=phone]:focus,input[type=password]:focus,input[type=number]:focus,input[type=search]:focus,textarea:focus {365 border: 1px solid #2e8b57366}367 368input[type=text].full-width,input[type=email].full-width,input[type=phone].full-width,input[type=password].full-width,input[type=number].full-width,input[type=search].full-width,textarea.full-width {369 width: 100%370}371 372textarea {373 height: 132px374}375 376form {377 margin-bottom: 40px378}379 380form .field {381 margin-bottom: 20px382}383 384form .note {385 margin-top: 5px;386 color: #aaa387}388 389form .req {390 font-style: italic391}392 393form .error .reason {394 margin-top: 5px;395 color: #FF4136396}397 398form .error input[type=text],form .error input[type=email],form .error input[type=phone],form .error input[type=password],form .error input[type=number],form .error input[type=search],form .error textarea {399 border-color: #FF4136400}401 402table {403 width: 100%;404 border: 0px solid #d0d0d0;405 margin-bottom: 1.5em406}407 408table caption {409 margin: 0 0 7px;410 font-size: 0.75em;411 color: #aaa;412 text-transform: uppercase;413 letter-spacing: 1px414}415 416tr {417 border-bottom: 0px solid #d0d0d0418}419 420tr:nth-child(even) {421 background-color: #f6f6f6422}423 424td {425 padding: 7px;426 border-right: 0px solid #d0d0d0427}428 429td:last-child {430 border-right: 0431}432 433th {434 background-color: #f6f6f6;435 border-bottom: 1px solid #d0d0d0;436 border-right: 1px solid #d0d0d0437}438 439th:last-child {440 border-right: 0441}442 443.highlight {444 white-space: pre;445 overflow: auto;446 word-wrap: normal;447 -moz-border-radius: 3px;448 -webkit-border-radius: 3px;449 border-radius: 3px;450 padding: 20px;451 background: #343642;452 color: #C1C2C3453}454 455.highlight code {456 background-color: rgba(193, 194, 195, 0);457}458 459.highlight .hll {460 background-color: #ffc461}462 463.highlight .gd {464 color: #2e3436;465 background-color: #0e1416466}467 468.highlight .gr {469 color: #eeeeec;470 background-color: #c00471}472 473.highlight .gi {474 color: #babdb6;475 background-color: #1f2b2d476}477 478.highlight .go {479 color: #2c3032;480 background-color: #2c3032481}482 483.highlight .kt {484 color: #e3e7df485}486 487.highlight .ni {488 color: #888a85489}490 491.highlight .c,.highlight .cm,.highlight .c1,.highlight .cs {492 color: #8D9684493}494 495.highlight .err,.highlight .g,.highlight .l,.highlight .n,.highlight .x,.highlight .p,.highlight .ge,.highlight .gp,.highlight .gs,.highlight .gt,.highlight .ld,.highlight .s,.highlight .nc,.highlight .nd,.highlight .ne,.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py,.highlight .ow,.highlight .w,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss,.highlight .bp {496 color: #C1C2C3497}498 499.highlight .k,.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr,.highlight .nt {500 color: #729fcf501}502 503.highlight .cp,.highlight .gh,.highlight .gu,.highlight .na,.highlight .nf {504 color: #E9A94B505}506 507.highlight .m,.highlight .nb,.highlight .no,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo,.highlight .il {508 color: #8ae234509}510 511.highlight .o {512 color: #989DAA513}514 515.highlight .nv,.highlight .vc,.highlight .vg,.highlight .vi {516 color: #fff517}518 519body {520 font-size: 1em;521 line-height: 1.45522}523 524body .intro {525 font-size: 1.25em;526 line-height: 1.7527}528 529@media (min-width: 43.75em) {530 body {531 font-size:1em;532 line-height: 1.375533 }534}535 536h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {537 margin: .5rem 0 1.5rem;538 font-family: "Open Sans",Helvetica,Arial,sans-serif539}540 541h1,.h1 {542 font-size: 2em;543 line-height: 1.25544}545 546@media (min-width: 43.75em) {547 h1,.h1 {548 font-size:2.5em;549 line-height: 1.125550 }551}552 553@media (min-width: 56.25em) {554 h1,.h1 {555 font-size:3em;556 line-height: 1.05557 }558}559 560h2,.h2 {561 font-size: 1.625em;562 line-height: 1.15384615563}564 565@media (min-width: 43.75em) {566 h2,.h2 {567 font-size:2em;568 line-height: 1.25569 }570}571 572@media (min-width: 56.25em) {573 h2,.h2 {574 font-size:2.25em;575 line-height: 1.25576 }577}578 579h3,.h3 {580 font-size: 1.375em;581 line-height: 1.13636364582}583 584@media (min-width: 43.75em) {585 h3,.h3 {586 font-size:1.5em;587 line-height: 1.25588 }589}590 591@media (min-width: 56.25em) {592 h3,.h3 {593 font-size:1.75em;594 line-height: 1.25595 }596}597 598h4,.h4 {599 font-size: 1.125em;600 line-height: 1.11111111601}602 603@media (min-width: 43.75em) {604 h4,.h4 {605 line-height:1.22222222606 }607}608 609blockquote {610 font-size: 1em;611 line-height: 1.25;612 padding: 0613}614 615@media (min-width: 43.75em) {616 blockquote {617 font-size:1em;618 line-height: 1.45833333619 }620}621 622.clearfix {623 zoom:1}624 625.clearfix:before,.clearfix:after {626 content: "\0020";627 display: block;628 height: 0;629 overflow: hidden630}631 632.clearfix:after {633 clear: both634}635 636html {637 box-sizing: border-box638}639 640*,*:before,*:after {641 box-sizing: inherit642}643 644body {645 font-family: "PT Serif",Georgia,Times,serif;646 line-height: 1.75;647 font-size: 112.5%;648 color: #111;649 overflow-x: hidden650}651 652body p,body ul {653 margin: 0 0 2rem654}655 656::-moz-selection {657 background: #2e8b57;658 color: white659}660 661::selection {662 background: #2e8b57;663 color: white664}665 666img,video,audio,iframe,object {667 max-width: 100%668}669 670.container {671 max-width: 610px;672 margin-left: auto;673 margin-right: auto;674 padding: 0 20px675}676 677.container:after {678 content: " ";679 display: block;680 clear: both681}682 683a {684 color: #2e8b57685}686 687a:hover {688 color: #1b5233689}690 691.nav-collapse {692 z-index: 1693}694 695.nav-collapse ul {696 margin: 0;697 padding: 0;698 width: 100%;699 display: block;700 list-style: none701}702 703.nav-collapse ul li {704 width: 100%;705 display: block;706 background: seagreen;707 border-bottom: 2px solid #349e63708}709 710.nav-collapse ul li a {711 color: white;712 text-decoration: none;713 display: block;714 padding: 5px 2rem715}716 717.js .nav-collapse {718 clip: rect(0 0 0 0);719 max-height: 0;720 position: absolute;721 display: block;722 overflow: hidden;723 zoom:1;clear: both;724 width: 100%725}726 727.nav-collapse.opened {728 max-height: 9999px729}730 731.nav-toggle {732 -webkit-tap-highlight-color: transparent;733 -webkit-touch-callout: none;734 -webkit-user-select: none;735 -moz-user-select: none;736 -ms-user-select: none;737 -o-user-select: none;738 user-select: none;739 float: right;740 line-height: 2em;741 margin-top: .5em;742 background-color: seagreen;743 border-radius: 4px;744 padding: 0 .5em;745 color: white;746 text-decoration: none;747 position: relative;748 right: 2rem;749 -webkit-transition: all 0.2s ease-in-out;750 transition: all 0.2s ease-in-out751}752 753.nav-toggle:hover {754 color: white;755 background-color: #21653f756}757 758.no-list {759 list-style: none;760 padding-left: 0;761 margin-left: 0762}763 764dt {765 font-weight: bold766}767 768dd {769 margin: 0 0 1.5rem770}771 772.page-title {773 margin: 2rem auto 1em;774 text-align: center775}776 777.content {778 padding-top: 1em779}780 781.header {782 background-color: gray;783 background-image: url("../img/mountains.jpg");784 background-size: cover;785 background-position: center center;786 color: white;787 padding: 0;788 height: 3em789}790 791.header .container {792 padding: 0;793 max-width: 100%;794 margin-left: auto;795 margin-right: auto796}797 798.header .container:after {799 content: " ";800 display: block;801 clear: both802}803 804.header h1 {805 margin: 0;806 float: left;807 padding-left: 2rem;808 font-size: 1em;809 line-height: 3em;810 font-family: "Open Sans",Helvetica,Arial,sans-serif;811 font-weight: 800;812 text-transform: uppercase813}814 815.header h1 a {816 color: white;817 text-decoration: none818}819 820.post .postTitle {821 text-align: center;822 margin-top: 2rem;823 margin-bottom: 1rem824}825 826.post blockquote {827 clear: both;828 margin: 2.5em 0;829 padding: 0;830 line-height: 1.8;831 position: relative832}833 834.post blockquote:before {835 content: "";836 position: absolute;837 top: -1.25em;838 background: seagreen;839 display: block;840 height: 2px;841 width: 150px;842 left: calc(50% - 75px)843}844 845.post blockquote:after {846 content: "";847 position: absolute;848 bottom: -1.25em;849 background: seagreen;850 display: block;851 height: 2px;852 width: 150px;853 left: calc(50% - 75px)854}855 856.post .meta {857 text-align: center;858 color: gray;859 font-family: "Open Sans",Helvetica,Arial,sans-serif;860 font-weight: 300861}862 863.post figure {864 margin: 3rem 0;865 text-align: center;866}867 868.post figure figcaption {869 font-size: .9em;870 font-style: italic;871 color: #5e5e5e872}873 874.post figure img {875 margin: 0 auto;876 display: block877}878 879.post img {880 margin-bottom: 2rem881}882 883.post img.emoticon {884 margin-bottom: 0rem885}886 887.post .highlight {888 clear: both;889 margin-bottom: 2rem890}891 892.post .dropcap {893 color: #2e8b57;894 margin-right: .45rem895}896 897.post .featuredImage {898 position: relative;899 margin-top: 2rem900}901 902.post .featuredImage img {903 margin-bottom: 0904}905 906.post p.tags{907 color: gray;908 font-size: .8em 909}910 911.postNav {912 border-top: 1px solid #e6e6e6;913 border-bottom: 1px solid #e6e6e6;914 overflow: hidden915}916 917.postNav .prev,.postNav .next {918 display: block;919 width: 100%;920 height: 5rem;921 overflow: hidden;922 position: relative;923 font-family: "Open Sans",Helvetica,Arial,sans-serif;924 font-weight: 800;925 font-size: .9em;926 text-transform: uppercase;927 text-align: center928}929 930.postNav .prev img,.postNav .next img {931 z-index: 1;932 display: block;933 position: absolute;934 top: 50%;935 -webkit-transform: translateY(-50%);936 -ms-transform: translateY(-50%);937 transform: translateY(-50%);938 left: 0;939 width: 100%;940 .941 height: auto942}943 944.postNav .prev span,.postNav .next span {945 z-index: 10;946 position: relative;947 padding: .5rem;948 position: absolute;949 top: 50%;950 -webkit-transform: translateY(-50%);951 -ms-transform: translateY(-50%);952 transform: translateY(-50%);953 width: 100%;954 line-height: 1.4955}956 957.postNav .prev.image,.postNav .next.image {958 text-decoration: none;959 color: white;960 text-shadow: 1px 1px 3px rgba(0,0,0,0.8);961 padding: 0 .5rem;962 position: relative;963 -webkit-transition: all 0.2s ease-in-out;964 transition: all 0.2s ease-in-out965}966 967.postNav .prev:hover.image,.postNav .next:hover.image {968 opacity: .8969}970 971.postNav .prev span {972 left: 0973}974 975.postNav .next span {976 right: 0977}978 979.footer {980 text-align: center;981 padding: 2rem 0982}983 984.footer .container {985 border-top: 4px solid #d9d9d9;986 padding-top: .5em;987 max-width: 90%;988 margin-left: auto;989 margin-right: auto990}991 992.footer .container:after {993 content: " ";994 display: block;995 clear: both996}997 998.footer .copy,.footer .footer-links {999 font-size: .8em1000}1001 1002.footer .copy {1003 margin-bottom: 1rem1004}1005 1006.footer-links ul {1007 text-align: center1008}1009 1010.footer-links ul li {1011 display: inline-block1012}1013 1014.footer-links ul li a {1015 display: inline-block;1016 width: 30px;1017 height: 30px;1018 -webkit-transition: all 0.2s ease-in-out;1019 transition: all 0.2s ease-in-out1020}1021 1022.footer-links ul li a svg {1023 display: block;1024 width: 100%;1025 height: 100%1026}1027 1028.footer-links ul li a svg .outer-shape {1029 fill: #2e8b571030}1031 1032.footer-links ul li a svg .inner-shape {1033 fill: white1034}1035 1036.footer-links ul li:hover a svg .outer-shape {1037 fill: #21653f1038}1039 1040.pagination .next {1041 float: left1042}1043 1044.pagination .previous {1045 float: right1046}1047 1048.posts li {1049 margin-bottom: 4rem;1050 position: relative1051}1052 1053.posts li:before {1054 content: "";1055 position: absolute;1056 bottom: -2rem;1057 left: 0;1058 background: #e6e6e6;1059 height: 2px;1060 width: 60px1061}1062 1063.posts li a {1064 text-decoration: none1065}1066 1067.posts li a:hover {1068 text-decoration: underline1069}1070 1071.posts li .date {1072 color: gray;1073 font-family: "Open Sans",Helvetica,Arial,sans-serif;1074 font-weight: 300;1075 font-size: .8em1076}1077 1078.posts li h3 {1079 margin: 0 0 .5em1080}1081 1082@media only screen and (min-width: 800px) {1083 .content {1084 padding-top:0;1085 position: relative;1086 z-index: 11087 }1088 1089 .content:after {1090 z-index: -1;1091 background: white;1092 content: "";1093 display: block;1094 width: 100%;1095 height: 5em;1096 position: absolute;1097 top: -2em;1098 left: 0;1099 -webkit-transform: skewY(-2deg);1100 -ms-transform: skewY(-2deg);1101 transform: skewY(-2deg);1102 -webkit-transform-origin: bottom left;1103 -ms-transform-origin: bottom left;1104 transform-origin: bottom left1105 }1106 1107 .container {1108 max-width: 800px;1109 margin-left: auto;1110 margin-right: auto;1111 padding: 01112 }1113 1114 .container:after {1115 content: " ";1116 display: block;1117 clear: both1118 }1119 1120 #home .posts,#home .pageTitle,#home .pagination {1121 width: 74.46809%;1122 float: left;1123 margin-right: 2.12766%;1124 float: none;1125 margin: 0 auto 1.5em1126 }1127 1128 #home .pageTitle {1129 margin: 2rem auto 1em1130 }1131 1132 .header {1133 height: 15em;1134 position: relative;1135 padding-bottom: 2em1136 }1137 1138 .header .container {1139 position: relative;1140 top: 50%;1141 -webkit-transform: translateY(-50%);1142 -ms-transform: translateY(-50%);1143 transform: translateY(-50%);1144 max-width: 800px;1145 margin-left: auto;1146 margin-right: auto1147 }1148 1149 .header .container:after {1150 content: " ";1151 display: block;1152 clear: both1153 }1154 1155 .header h1 {1156 font-size: 3em;1157 line-height: 1;1158 letter-spacing: -3px;1159 padding-left: 01160 }1161 1162 .header nav {1163 float: left;1164 clear: left1165 }1166 1167 .header nav ul {1168 margin: 01169 }1170 1171 .header nav ul li {1172 display: inline;1173 line-height: 3em;1174 background: none;1175 padding: 0 5px;1176 border: none1177 }1178 1179 .header nav ul li a {1180 color: white;1181 font-size: .9em;1182 text-decoration: none;1183 padding: 0 .25em1184 }1185 1186 .header nav ul li a:hover {1187 color: #ccc1188 }1189 1190 .header nav ul li.current {1191 padding-bottom: .25em;1192 border-bottom: 4px solid rgba(255,255,255,0.4)1193 }1194 1195 .js .nav-collapse {1196 position: relative;1197 max-height: none1198 }1199 1200 .js .nav-collapse.closed {