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 lang="en-us">3 <head>4 <style>5 @font-face {6 font-family: 'Open Sans';7 font-style: normal;8 font-weight: 400;9 font-stretch: normal;10 font-display: swap;11 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf) format('truetype');12}13@font-face {14 font-family: 'Open Sans';15 font-style: normal;16 font-weight: 600;17 font-stretch: normal;18 font-display: swap;19 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4n.ttf) format('truetype');20}21 22 23 24@font-face {25 font-family: 'Playfair Display';26 font-style: normal;27 font-weight: 400;28 font-display: swap;29 src: url(https://fonts.gstatic.com/s/playfairdisplay/v36/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvUDQ.ttf) format('truetype');30}31@font-face {32 font-family: 'Playfair Display';33 font-style: normal;34 font-weight: 500;35 font-display: swap;36 src: url(https://fonts.gstatic.com/s/playfairdisplay/v36/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKd3vUDQ.ttf) format('truetype');37}38@font-face {39 font-family: 'Playfair Display';40 font-style: normal;41 font-weight: 600;42 font-display: swap;43 src: url(https://fonts.gstatic.com/s/playfairdisplay/v36/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKebukDQ.ttf) format('truetype');44}45@font-face {46 font-family: 'Playfair Display';47 font-style: normal;48 font-weight: 700;49 font-display: swap;50 src: url(https://fonts.gstatic.com/s/playfairdisplay/v36/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiukDQ.ttf) format('truetype');51}52@font-face {53 font-family: 'Playfair Display';54 font-style: normal;55 font-weight: 800;56 font-display: swap;57 src: url(https://fonts.gstatic.com/s/playfairdisplay/v36/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfFukDQ.ttf) format('truetype');58}59@font-face {60 font-family: 'Playfair Display';61 font-style: normal;62 font-weight: 900;63 font-display: swap;64 src: url(https://fonts.gstatic.com/s/playfairdisplay/v36/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfsukDQ.ttf) format('truetype');65}66 67 68 69@font-face {70 font-family: 'Permanent Marker';71 font-style: normal;72 font-weight: 400;73 font-display: swap;74 src: url(https://fonts.gstatic.com/s/permanentmarker/v16/Fh4uPib9Iyv2ucM6pGQMWimMp004Hao.ttf) format('truetype');75}76 77 78 79html {80 text-rendering: optimizeLegibility;81 --text-color: #333;82 --header-font: 'Open Sans', sans-serif;83 --title-font: 'Playfair Display', serif;84 --text-font: 'Open Sans', sans-serif;85}86 87body {88 color: var(--text-color);89 margin: 0;90 padding: 0;91 font-family: var(--text-font);92 min-height: 100vh;93 max-width: 65vw;94 margin: auto;95 display: flex;96 flex-direction: column;97 font-weight: 400;98}99 100@media only screen and (max-width:55em) {101 body {102 max-width: 80vw;103 }104}105 106main {107 margin: auto;108 flex: 1;109}110 111h1, h2, h3, h4, h5, h6 {112 margin: 0;113 font-family: var(--title-font);114 color: var(--text-color);115 font-weight: 400;116}117 118p {119 margin: 0;120 font-family: var(--text-font);121 font-size: 1.1em;122 line-height: 1.5em;123 color: var(--text-color);124 font-weight: 400;125}126 127ul {128 list-style: none;129 margin: 0;130 padding: 0;131}132 133a {134 text-decoration: none;135 color: var(--text-color);136}137 138strong {139 font-weight: 600;140}141/*Header*/142header {143 width: 100%;144 margin: 4em auto 2em auto;145 color: var(--text-color);146}147 148.header-content {149 font-size: 1em;150 padding: 1em;151 display: flex;152 flex-direction: column;153 justify-content: space-between;154 margin: auto;155 font-size: 1.35em;156 width: 75%;157}158 159.header-name {160 border-bottom: 1.5px solid #a8a8a8;161 padding-bottom: 1em;162 margin-bottom: 0.2em;163 text-align: center;164 font-family: var(--header-font);165 font-size: 1.5em;166}167 168header nav ul {169 display: flex;170 flex-direction: row;171 margin: auto;172 justify-content: center;173}174 175header nav a {176 margin: 0 0.5em;177 padding: 0.2em 0.25em;178 border-bottom: 1.5px solid white;179}180 181header nav a:hover {182 border-bottom: 1.5px solid var(--text-color);183}184 185header nav a.active {186 border-bottom: 1.5px solid var(--text-color);187}188 189@media only screen and (max-width:55em) {190 header {191 width: 95%;192 margin: 1em auto;193 }194 195 .header-content {196 width: 90%;197 margin: auto;198 }199 200}201 202@media only screen and (max-width:34em) {203 header nav ul {204 display: flex;205 flex-direction: row;206 flex-wrap: wrap;207 justify-content: center;208 }209 210 header nav a {211 font-size: 0.75em;212 }213 214 .header-name {215 font-size: 1.2em;216 }217 218 219}220 221/*Index*/222.top-bar {223 position: relative;224 margin: 4em auto 4em auto;225 display: flex;226 flex-direction: row;227 flex-wrap: wrap;228 text-align: center;229 justify-content: center;230 align-items: center;231}232 233.dot {234 border: 1px solid #222;235 border-radius: 100em;236 width: 8px;237 height: 8px;238 margin: 0 0.8em;239 color: white;240}241 242 243.top-bar-p {244 margin: 0em;245 padding: 0em;246}247 248.index-main {249 margin: auto;250}251 252.index-text p {253 font-size: 0.9em;254 opacity: 0.8;255}256 257.index-main h1 {258 font-size: 3em;259 margin: 1em 0;260}261 262@media only screen and (max-width:32em) {263 .index-main h1 {264 font-size: 2em;265 }266 267 .top-bar {268 width: 80%;269 }270 271}272 273.index-main h2 {274 margin: 1em 0;275}276 277.index-main h3 {278 font-size: 1.5em;279 text-transform: uppercase;280 margin: 1em 0;281}282 283.index-me-all {284 display: flex;285 flex-direction: column;286 align-items: center;287 margin: 0 auto 4em;288}289 290.index-me-img {291 width: 75px;292 height: 100%;293 border-radius: 50%;294}295 296.index-me-text {297 margin-top: 1em;298 margin-left: 0;299 margin-bottom: 2em;300 text-align: center;301}302 303.index-me-text a {304 text-decoration: underline;305}306 307.masonry-with-columns {308 columns: 3;309 column-gap: 1em;310}311/* 312.masonry-with-columns div {313 margin: 0 1em 1em 0;314 display: inline-block;315 width: 100%;316 } */317 318.masonry-with-columns figure {319 margin: 0 1em 1em 0;320 display: inline-block;321 width: 100%;322}323.index-box-img {324 width: 100%;325 height: auto;326 object-fit: cover;327 margin: auto;328}329 330.masonry-with-columns figcaption {331 font-size: 0.9em;332 opacity: 0.8;333}334 335@media only screen and (max-width:50em) {336 .masonry-with-columns {337 columns: 2;338 column-gap: 1em;339 }340 341 .index-me-text {342 width: 70%;343 }344}345 346@media only screen and (max-width:36em) {347 .masonry-with-columns {348 columns: 1;349 column-gap: 1em;350 }351 352 .index-box-img {353 width: 100%;354 height: auto;355 object-fit: cover;356 margin: auto;357 }358 359 .index-me-text {360 width: 100%;361 }362 363}364 365/*Projects*/366.projects {367 margin: auto;368}369 370.projects p {371 padding: 0.5em 0;372 width: 80%;373 margin: 1em auto;374}375 376.projects__title-area {377 width: 80%;378 margin: 1em auto;379}380 381.projects h1 {382 font-size: 3em;383 font-weight: 700;384}385 386.projects h2 {387 /* text-transform: uppercase; */388 margin: 2em auto -0.5em;389 font-weight: 600;390}391 392.projects a {393 text-decoration: underline;394}395 396.projects_singleimg {397 width: 100%;398 margin: auto;399}400 401.projects_img-shadow {402 box-shadow: 1rem 1rem 5rem rgba(0, 0, 0, 0.07);403}404 405.projects_masonry {406 display: flex;407 justify-content: space-between;408 align-items: center;409 flex-wrap: wrap;410 margin: auto;411}412 413.projects_masonry img {414 width: 48%;415 height: 100%;416 margin: 1em 0;417 justify-content: space-between;418}419 420.projects-img-description {421 margin: 0 0 4em 0;422 padding: 0;423 font-size: 1em;424 opacity: 0.6;425}426 427 428@media only screen and (max-width:55em) {429 430.projects p {431 width: 90%;432}433}434 435@media only screen and (max-width:36em) {436 .projects_singleimg {437 width: 100%;438 margin: auto;439 }440 441 .projects_masonry {442 flex-direction: column;443 }444 445.projects p {446 width: 100%;447 margin: auto;448}449 450 451 .projects_masonry img {452 width: 100%;453 }454 455 456}457 458/*Subsites*/459section {460 width: 65%;461 margin: auto;462 display: flex;463 flex-direction: column;464}465 466section h1 {467 font-size: 2em;468 margin: 1em 0 0 0;469}470 471section p {472 margin-bottom: 0.75em;473}474 475section img {476 width: 100%;477 margin: 0.5em 0;478}479 480section h2 {481 font-size: 2em;482 margin: 1em 0;483}484 485section h3 {486 font-size: 1.5em;487 text-transform: uppercase;488 margin: 1em 0;489}490 491section h4 {492 font-size: 1.3em;493 text-transform: uppercase;494 margin: 1em 0;495}496 497section li {498 list-style: disc;499 margin-left: 3em;500 font-size: 1.15em;501 line-height: 1.25em;502 margin-bottom: 0.75em;503}504 505section img {506 margin: 2em auto;507}508 509@media only screen and (max-width:55em) {510 section {511 width: 85%;512 }513 514}515 516@media only screen and (max-width:32em) {517 section h1 {518 font-size: 2em;519 }520 521 section {522 width: 95%;523 }524 525}526 527 528.place-link-id {529 background-color: red;530}531 532.signature {533 font-family: 'Waiting for the Sunrise', cursive;534 font-size: 3em;535 margin-left: 0.5em;536 transform: rotate(-2deg);537 opacity: 0.8;538}539 540.img-design-page {541 /* box-shadow: 0 4px 8px 0 #d3d3d3, 0 6px 20px 0 #d3d3d3; */542 width: 40%543}544 545/*BlogPost Ubersicht*/546.blog-all {547 width: 65%;548 margin: auto;549}550 551.blog-all li {552 list-style: none;553 margin-left: 0;554}555 556.blog-all a {557 background-color: transparent;558 padding: 0;559}560 561.blog-all a:hover {562 background-color: transparent;563 padding: 0;564}565 566.blog-section-title {567 font-size: 3em;568 margin: 1em 0;569}570 571.single-blog-post {572}573 574.seperator-blog-posts {575 border-bottom: 2px solid var(--text-color);576 width: 50%;577 text-align: center;578 margin: 5em auto 5em auto;579}580 581.single-blog-post a:hover {582 opacity: 0.7;583}584 585.blog-ubersicht-date {586 opacity: 0.6;587 margin-bottom: 1.5em;588 margin-top: 0.5em;589}590 591.blog-ubersicht-title {592 padding: 0;593 font-size: 2em;594}595 596.blog-ubersicht-lesezeit {597 opacity: 0.8;598}599 600.blog-ubersicht-summary {601 font-size: 1.1em;602 line-height: 1.6em;603 opacity: 0.8;604}605 606.blog-ubersicht-read-more {607 font-weight: 600;608 font-size: 1.15em;609}610 611@media only screen and (max-width:55em) {612 .blog-all {613 width: 85%;614 }615 616 .blog-section-title {617 margin: 1em 0;618 }619 620 .blog-ubersicht-date {621 font-size: 0.9em;622 line-height: 1em;623 }624 625 .blog-ubersicht-title {626 padding: 0.1em 0;627 margin: 0.5em 0 0 0;628 font-size: 1.5em;629 line-height: 1.5em;630 }631 632 .blog-ubersicht-summary {633 padding: 0.8em 0;634 font-size: 0.9em;635 line-height: 1.7em;636 }637 638 .blog-ubersicht-read-more {639 font-size: 1em;640 }641 642}643 644@media only screen and (max-width:32em) {645 .blog-section-title {646 font-size: 2em;647 margin: 1em 0;648 }649 650}651 652/*Blogposts*/653.blog-post-date {654 opacity: 0.8;655}656 657.blog-post-title {658 font-size: 2em;659 margin: 0.5em 0 0.2em 0;660}661 662.blog-post-lesezeit {663 margin-bottom: 2.5em;664}665 666.blog-post-text {667}668 669/*Contact*/670.contact-all {671 width: 80%;672 margin: auto;673}674 675/*Impressum*/676.kontakt-impressum-link {677 margin-top: 4em;678 margin-bottom: -2em;679}680 681.kontakt-impressum-link a {682 background-color: white;683}684 685/*Footer*/686footer {687 position: relative;688 margin: 6em auto 2em auto;689 display: flex;690 flex-direction: column;691 text-align: center;692 font-size: 1em;693}694 695footer p {696 font-size: 1em;697}698footer div {699 display: flex;700 margin: 0em auto 1em;701 flex-direction: row;702 flex-wrap: wrap;703 text-align: center;704 justify-content: center;705 align-items: center;706}707 708footer a:hover {709 text-decoration: underline;710}711 712@media only screen and (max-width:32em) {713 footer div {714 width: 85%;715 }716 717}718 </style>719 <title>720 The dog in my head | Verena Ortlieb - Designer & Illustrator721 </title>722 <meta charset="utf-8">723 <meta content="yes" name="apple-mobile-web-app-capable">724 <meta content="width=device-width, initial-scale=1" name="viewport">725 <meta content name="description">726 <meta content name="author">727 </head>728 <body>729 <header>730 <div class="header-content">731 <div class="header-name">732 <a>733 Verena Ortlieb734 </a>735 </div>736 </div>737 </header>738 <main>739 <section>740 <div class="blog-post-date">741 16.03.2018742 </div>743 <div>744 <h2 class="blog-post-title">745 The dog in my head746 </h2>747 <div class="blog-post-lesezeit">748 Reading time ~ 3 minutes749 </div>750 <img alt src="rick.jpg">751 <p class="blog-post-text">752 </p>753 <p>754 <strong>755 Sometimes, my brain behaves like a dog.756 </strong>757 A sweet little dog.758 </p>759 <p>760 When I pay attention, keep him occupied, and train him well he is a blast to be around. We have a lot of fun together, get compliments and enjoy our evenings cuddling on the couch.761 </p>762 <p>763 <strong>764 But if I don’t pay attention, when I am distracted or forget to occupy this sweet little dog, it goes south. The dog starts to bite the sofa, digs holes into the floor and barks at the mailman.765 </strong>766 </p>767 <p>768 No matter how sweet the dog is, this behavior isn’t welcome in the long run. In the beginning, it might be sweet to watch the puppy catch the mailman or slip on the floor with his small clumsy paws, but as the puppy grows into a bigger dog, he can do a lot of damage.769 </p>770 <p>771 No, it is not possible that I am attentive all the time and always be mindful and occupy my brain with the “right stuff.” Every now and then the thoughts wander. Every now and then negative thoughts take over.772 </p>773 <p>774 That’s ok. Every now and then the dog can dig a hole in the garden, may be scared of a loud noise or chase a rabbit in the woods.775 </p>776 <p>777 <strong>778 But it is essential that it is only every now and then. This must not become the rule and may under no circumstances determine my life.779 </strong>780 </p>781 <p>782 In these situations, it is important to watch out and rethink. Because what happens in my mind is still my decision.783 </p>784 <p>785 And I am not going to allow a scared dog to determine what I do. I will take the dog to my side, show him that it was nothing terrible that scared him, and walk with him in the eerie forest because I know that nothing can happen to me.786 </p>787 <p>788 <strong>789 And in the end, these are the stories I want to tell.790 </strong>791 Of the roads that scared me, and the steep slopes I climbed, and the eerie caves I explored. And all with my companion, with my wonderfully behaved dog by my side.792 </p>793 <p>794 </p>795 </div>796 </section>797 </main>798 <footer>799 <div>800 <a class="hover-1" rel="noopener" target="_blank">801 Email802 </a>803 <p class="dot">804 </p>805 <a rel="noopener" target="_blank">806 Instagram807 </a>808 <p class="dot">809 </p>810 <a rel="noopener" target="_blank">811 Twitter812 </a>813 <p class="dot">814 </p>815 <a rel="noopener" target="_blank">816 Dribbble817 </a>818 </div>819 <p>820 © 2022 Verena Ortlieb821 </p>822 </footer>823 </body>824</html>825