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>3 <head>4 <style>5 .litebox.overlay {6 background: rgba(0, 0, 0, 0.96);7 position: fixed;8 top: 0;9 left: 0;10 height: 100%;11 width: 100%;12 z-index: 10;13 14 display: flex;15 align-items: center;16 justify-content: center;17 18 box-sizing: border-box;19 padding: 1em;20}21 22.litebox.overlay img {23 flex-shrink: 1;24 max-width: 100%;25 max-height: 100%;26}27 28 29 30 31.gallery {32 padding: 0.5rem;33 34 display: flex;35 flex-flow: row wrap;36 align-items: center;37 justify-content: center;38}39 40.gallery figure {41 margin: 1rem;42 43 background-color: rgb(250, 250, 250);44 box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);45 46 /* This ensures that our figures never grow bigger than desired. */47 flex-basis: 400px;48}49 50.gallery figure a {51 display: block;52 margin: 0.5rem;53}54 55.gallery img {56 border: none;57 display: block;58 59 width: 100%;60}61 62.gallery figcaption {63 display: block;64 margin: 0.5rem;65 66 font-size: 1rem;67 text-align: center;68 69 display: flex;70 align-items: center;71 justify-content: center;72 73 /* The figure caption should have a minimum height, if there are multiple74 lines of caption, the total size of the figure is likely to be the same as75 others. */76 min-height: 4rem;77}78 79 80 81 82* {box-sizing: border-box;}83 84html {85 /* font-family: 'HelveticaNeue-Light', Helvetica, Arial, sans-serif; */86 font-family: "PT Sans", Verdana, Helvetica, Arial, sans-serif;87 font-weight: lighter;88 min-height: 100%;89}90 91html {92 --main-color: #111;93 --main-background-color: #fff;94 95 --header-color: #eee;96 --underlay-color: #ddd;97 98 --accent-color: #0062b3;99 --accent-hover-color: #33a3ff;100 101 --overlay-color: rgba(255, 255, 255, 0.9);102 --underlay-color: rgba(0, 0, 0, 0.4);103}104 105@media (prefers-color-scheme: dark) {106 html {107 --main-color: #e1e1e1;108 --main-background-color: #111;109 110 --header-color: #222;111 --overlay-color: #333;112 113 --accent-color: #01b9ff;114 --accent-hover-color: #80dcff;115 116 --overlay-color: rgba(0, 0, 0, 0.8);117 --underlay-color: rgba(0, 0, 0, 1.0);118 119 background-color: black;120 }121}122 123body {124 padding: 0;125 margin: 0;126 127 color: var(--main-color);128 background-color: var(--main-background-color);129}130 131/* Page Navigation Bar */132 133nav {134 position: relative;135 white-space: nowrap;136}137 138nav ul.trail {139 padding: 0;140 margin: 0;141}142 143nav li {144 display: inline-block;145 list-style: none;146}147 148#header {149 width: 100%;150 151 background: var(--header-color);152 margin: 0;153 154 display: flex;155 flex-direction: column;156 justify-content: flex-end;157 158 text-align: center;159}160 161#header h1 {162 margin: 1rem 2rem;163}164 165#header nav {166 padding: 1rem;167 width: 100%;168 169 background-color: inherit;170 171 z-index: 5;172}173 174#header.sticky nav {175 position: fixed;176 177 left: 0; right: 0;178 top: 0;179}180 181a {182 color: var(--accent-color);183 text-decoration: none;184}185 186a:hover {187 color: var(--accent-hover-color);188}189 190main {191 margin: auto;192 max-width: 46rem;193}194 195p, ul, dl, figure {196 margin: 2rem 1rem;197}198 199section.articles {200 display: flex;201 flex-wrap: wrap;202 justify-content: space-around;203}204 205section.articles a {206 box-sizing: border-box;207 -flex-basis: 20rem;208 flex-grow: 1;209 210 margin: 1rem;211 position: relative;212 background-color: white;213 214 width: 15rem;215 height: 15rem;216 217 background-size: cover;218 background-position: center;219 text-decoration: none;220 221 box-shadow: 0 0 0.5rem var(--underlay-color);222 223 overflow: hidden;224 225 display: flex;226 flex-direction: column;227 justify-content: flex-start;228}229 230section.articles a > * {231 padding: 0.5rem;232 background-color: var(--overlay-color);233}234 235section.articles small {236 opacity: 0;237 transition: 0.2s;238 color: var(--main-color);239}240 241section.articles a:hover small {242 opacity: 1;243 display: block;244}245 246main {247 margin-top: 4rem;248}249 250main > section, main > article, main > header {251 margin-bottom: 4rem;252}253 254main header {255 text-align: center;256}257 258main header span {259 line-height: 2rem;260 margin: 0 2rem;261 white-space: nowrap;262}263 264footer {265 clear: both;266 text-align: center;267 padding: 1.25rem;268}269 270pre {271 tab-size: 2;272 -moz-tab-size: 2;273 overflow: auto;274 margin: 0;275}276 277pre, code {278 /* Same size as paragraph and other normal text. */279 font-size: 16px;280}281 282pre code {283 display: block;284}285 286figure {287 text-align: center;288 padding: 0.2rem;289}290 291figure.diagram {292 background-color: white;293 border-radius: 1rem;294}295 296figure.listing {297 text-align: left;298}299 300figure img {301 max-width: 100%;302}303 304figure figcaption {305 text-align: center;306 color: #999;307 308 margin: 0;309 padding: 0;310}311 312p {313 /* text-align: justify; */314}315 316ul ul {317 margin: 0.5rem;318}319 320@media (min-width: 40em) {321 pre {322 tab-size: 4;323 -moz-tab-size: 4;324 }325 326 p {327 text-align: left;328 }329}330 331p.discussion {332 background-color: rgba(0, 0, 0, 0.5);333 padding: 1rem;334 335 border-radius: 1rem;336}337 338div.centered {339 text-align: center;340}341 342main h1, main h2, main h3, main h4 {343 font-weight: normal;344 filter: brightness(150%);345 346 margin: 1rem 0.5rem 2rem;347 /* This was added to fix linking to anchors with the fixed <nav>. Maybe in the future consider scroll-padding-top. */348 padding-top: 5rem;349 350 letter-spacing: 0.12rem;351}352 353main h1 {354 margin-top: 0;355}356 357main h2 + p, main h3 + p {358 margin-top: 0;359}360 361footer {362 clear: both;363 text-align: center;364 padding: 1.25rem;365}366 367li {368 margin: 0.25rem;369}370 371dl.basic dt {372 text-decoration: underline;373 padding-top: 0.25rem;374}375 376dl.basic dd {377 padding: 0.25rem;378}379 380dl.basic dt {381 margin-top: 1.5rem;382}383 384dl.options {385 padding-top: 0.5rem;386 margin: 0;387 388 /* background: rgba(230, 230, 230, 0.25);389 border: 0.0625rem solid #ccc; */390}391 392dl.options dt {393 opacity: 0.5;394 395 float: left;396 clear: both;397 398 width: 30%;399 text-align: right;400 401 padding: 0 0.5rem 0.5rem 0.5rem;402}403 404dl.options dd {405 margin: 0 0 0.5rem 32%;406 padding: 0 0.4rem;407}408 409dl.options dd + dd {410 margin-top: 0.5rem;411}412 413dl.options dd.container {414 border-left: 0.0625rem solid #ccc;415}416 417dl.options dd.container p {418 margin-top: 0;419 margin-bottom: 0;420}421 422#entry {423 padding-bottom: 5rem;424}425 426img {427 border: none;428}429 430.diagram {431 text-align: center;432}433 434table.basic {435 border-collapse: collapse;436 margin: auto;437 width: 90%;438}439 440table th {441 font-weight: inherit;442}443 444table.basic thead th, table.basic tfoot th {445 font-family: "Lucida Grande", Sans-Serif;446 font-size: 110%;447 text-align: left;448}449 450table.basic thead th {451 border-bottom: 0.125rem solid var(--accent-color);452 padding: 0.625rem 0.5rem;453}454 455table.basic tfoot th {456 border-bottom: 0.125rem solid var(--accent-color);457 padding: 0.625rem 0.5rem;458}459 460table.basic tbody th,461table.basic tbody td {462 border: none;463 padding: 0.5625rem 0.5rem 0rem 0.5rem;464}465 466table.basic tbody th {467 text-align: left;468 text-decoration: underline;469 padding-top: 0.75rem;470}471 472table.data th {473 background-color: var(--header-color);474 padding: 0.25rem;475}476 477table.data {478 background-color: var(--underlay-color);479 480 margin: auto;481 text-align: center;482}483 484table.data td {485 padding: 0.25rem;486}487 488form label {489 display: block;490 margin: 0.5rem 0;491}492 493button, input, textarea {494 border-radius: 0.2rem;495 border: 0.1rem solid;496 497 margin: 0.2rem 0.2rem;498 padding: 0.2rem;499}500 501@media(prefers-color-scheme: dark) {502 input[type=submit] {503 background-color: #ccc;504 }505 506 input[type=submit]:active {507 background-color: #aaa;508 border-color: #666;509 }510 511 input, textarea {512 background-color: #222;513 color: #fff;514 border-color: #444;515 }516 517 input[type=submit] {518 border-color: #aaa;519 background-color: #444;520 color: #ccc;521 }522 523 input[type=submit]:active {524 border-color: #444;525 background-color: #222;526 color: white;527 }528}529 530form label input, form label textarea {531 display: block;532 margin: 0.5rem 0;533 padding: 0.5rem;534}535 536form fieldset {537 border: none;538 margin: 0;539 padding: 0;540}541 542form fieldset.footer {543 text-align: right;544}545 546form#login fieldset input {547 max-width: 6rem;548}549 550form.basic input:not([type=button]):not([type=reset]):not([type=submit]) {551 width: 70%;552}553 554form.basic input:invalid,555form.basic textarea:invalid {556 border-color: red;557}558 559form.basic textarea {560 box-sizing: border-box;561 width: 100%;562}563 564audio {565 width: 100%;566}567 568.latex.inline {569 padding: 0rem 0.3125rem 0rem;570 vertical-align: middle;571}572 573/* Entry Footnotes */574 575sup a {576 text-decoration: none;577}578 579/* Google Maps */580 581.google-map {582 width: 50rem;583 height: 37.5rem;584 margin-left: auto;585 margin-right: auto;586}587 588/* Blockquotes */589 590blockquote {591 margin-top: 2rem;592 margin-bottom: 2rem;593}594 595.comment blockquote {596 border-left: 0.2rem solid #888;597}598 599blockquote .spoken:before {600 content: "â";601}602 603blockquote .spoken:after {604 content: "â";605}606 607blockquote .spoken:first-letter {608}609 610blockquote .spoken {611 font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;612 613 letter-spacing: 0.1rem;614 text-align: center;615 font-variant: small-caps;616}617 618blockquote > .written {619 border-left: 2px solid blue;620 padding-left: 1rem;621}622 623blockquote cite {624 display: block;625 font-style: normal;626 text-align: right;627 margin-top: 1rem;628}629 630blockquote cite:before {631 content: " â ";632}633 634/* Features */635 636ul.features {637 list-style: none;638}639 640ul.features li {641 background-image: url("/_static/plus.png");642 padding-left: 2rem;643 644 background-repeat: no-repeat;645 margin-bottom: 0.5rem;646}647 648/* Journal comments */649 650section.comments h1 {651 margin-top: 8rem;652}653 654section.comments .comment .byline {655 padding: 0.5rem 0.25rem;656 display: flex;657 justify-content: space-between;658}659 660section.comments .comment .byline .summary {661 display: flex;662 flex-direction: column;663 justify-content: flex-end;664}665 666section.comments .comment .byline .details {667 display: flex;668 justify-content: space-between;669}670 671section.comments .comment .moderation {672 text-align: center;673 padding: 1rem;674}675 676section.comments .comment .byline .tools {677 text-align: right;678 padding-bottom: 0.2rem;679}680 681section.comments .comment .byline .icon {682 display: flex;683 flex-direction: column;684 justify-content: flex-end;685 align-items: flex-start;686 687 margin: 0 0.5rem 0 0;688}689 690section.comments .comment .byline .summary {691 flex-grow: 1;692}693 694section.comments .comment .byline .posted_on {695 color: #999;696 697 display: flex;698 flex-direction: column;699 justify-content: flex-end;700 align-items: flex-start;701}702 703section.comments .comment .body {704 margin: 0.125rem;705 border-top: 0.0625rem solid #ccc;706}707 708section.comments .comment pre {709 margin: 1.0rem;710}711 712/* Journal navigation */713 714.navigation {715 clear: both;716 717 margin: 1rem 0 1rem 0;718}719 720.navigation .prev_link {721 float: left;722}723 724.navigation .next_link {725 float: right;726}727 728/* Translations header */729 730li.locale {731 background-repeat: no-repeat;732 background-position: 0 50%;733 padding-left: 1.25rem;734}735 736/* Make youtube videos retain their 16:9 aspect ratio as they scale */737 738.youtube-wrapper {739 position: relative;740 741 /* 16:9 aspect ratio */742 padding-bottom: 56.25%;743 744 height: 0;745 width 100%;746}747 748.youtube-video {749 position: absolute;750 top: 0;751 left: 0;752 width: 100%;753 height: 100%;754}755 756section.sponsors {757 display: flex;758 flex-wrap: wrap;759 justify-content: space-around;760}761 762section.sponsors a {763 position: relative;764 765 margin: 1rem;766 767 width: 15rem;768 height: 15rem;769 770 background-size: contain;771 background-position: center;772 background-repeat: no-repeat;773 774 border-radius: 2rem;775 776 border: 1rem solid white;777 background-color: white;778 779 box-shadow: 0 0 0.5rem var(--underlay-color);780}781 </style>782 <meta content="website" property="og:type">783 <title>784 Scared By The Waves785 </title>786 <meta content="Scared By The Waves" property="og:title">787 <meta content="width=device-width, initial-scale=1" name="viewport">788 <!--789 <content:env for="development">790 <meta http-equiv="refresh" content="10"/>791 </content:env>792 -->793 <link rel="prefetch">794 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">795 </head>796 <body>797 <header id="header">798 <h1>799 Scared By The Waves800 </h1>801 <nav id="navigation">802 <a class="link">803 codeotaku804 </a>805 /806 <a class="link">807 Music808 </a>809 /810 <a class="link">811 The Space Between Here And There812 </a>813 </nav>814 </header>815 <p>816 Clarity of the mind; takes time.817 </p>818 <p>819 The ebony blackness of the sky draws me in. With experience comes pain and fear.820 </p>821 <p>822 In this space; chaos and void coincided with my heart. Both a sense of belonging, and abandonment.823 </p>824 <p>825 To move beyond this mindset, we can truly become clear of mind and vision. Life is too short to dwell on those things which are not possible.826 </p>827 <div style="text-align: center; padding: 2rem;">828 </div>829 <footer>830 <a>831 Contact Me832 </a>833 —834 <a rel="author">835 About Me836 </a>837 —838 © 2023 [NAME REDACTED].839 </footer>840 </body>841</html>842