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">3 <head>4 <style>5 @font-face {6 font-family: 'Lora';7 font-style: normal;8 font-weight: 400;9 src: url(https://fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787weuxJBkqg.ttf) format('truetype');10}11@font-face {12 font-family: 'Lora';13 font-style: normal;14 font-weight: 700;15 src: url(https://fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787z5vBJBkqg.ttf) format('truetype');16}17@font-face {18 font-family: 'Ubuntu';19 font-style: normal;20 font-weight: 400;21 src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfw7z.ttf) format('truetype');22}23@font-face {24 font-family: 'Ubuntu Mono';25 font-style: normal;26 font-weight: 400;27 src: url(https://fonts.gstatic.com/s/ubuntumono/v17/KFOjCneDtsqEr0keqCMhbCc6CsE.ttf) format('truetype');28}29 30 31 32html33{34 --red: #ef4955;35 --orange: #f7974d;36 --green: #43a095;37 --brown: #433032;38 --off-white: #fffaf8;39 --plain-white: #ffffff;40}41 42html43{44}45 46body47{48 color: var(--brown);49 font-family: "Lora", Georgia, serif;50 line-height: 1.4;51 background-color: var(--off-white);52 margin: 0 auto;53 font-size: 1.1rem;54}55 56p57{58 text-align: justify;59}60 61a62{63 color: var(--green);64}65 66a:hover67{68 color: var(--orange);69}70 71h1,72h2,73h3,74h4,75h5,76h677{78 font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;79 margin-bottom: -0.5em;80 color: var(--red);81}82 83h1 {84 margin-bottom: 1rem;85}86 87pre,88code89{90 font-family: "Ubuntu Mono", "Courier New", monospace;91 font-size: 1em;92}93 94input,95textarea96{97 display: block;98}99 100.old_banner {101 text-align: center;102 background-color: var(--red);103}104 105.old_banner span {106 color: var(--off-white);107 font-family: "Ubuntu Mono", "Courier New", monospace;108 text-decoration: none !important;109}110 111.old_banner:hover {112 background-color: var(--green);113}114 115.old{116 text-decoration: none !important;117}118 119#navigation {120 width: 100%;121 clear: both;122 display: block;123 position: relative124}125 126#container #content {127 clear: both;128 display: block;129 position: relative130}131 132.column {133 margin-bottom: 2rem;134}135 136.banner {137 background-image: url("../img/og-image.jpg");138 background-size: cover;139 background-repeat: no-repeat;140}141 142.banner p {143 margin: 0;144 padding: 5% 12.5% 5% 12.5%;145 font-size: 2rem;146 font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;147 color: var(--off-white);148 text-align: center;149 text-shadow: -1px 0 var(--brown), 0 1px var(--brown), 1px 0 var(--brown), 0 -1px var(--brown);150}151 152#footer {153 font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;154 text-align: center;155 box-sizing: border-box;156 padding-left: 2rem;157 padding-right: 2rem;158 padding-top: 1rem;159 padding-bottom: .5rem;160 font-size: .7rem;161 background-color: var(--brown);162 color: var(--off-white);163 width: 100%;164 overflow: overlay;165 display: table;166 vertical-align: middle;167}168 169#footer p {170 margin-top: 0;171 text-align: center;172}173 174.footer-column {175 float: left;176 width: 33.33%;177 display: table-column;178}179 180#footer a {181 color: var(--off-white);182}183 184#footer #social {185 text-align: left;186}187 188#footer #coc p{189 text-align: right;190}191 192#footer #social img {193 width: 2rem;194}195 196@media (max-width: 880px) {197 .footer-column {198 width: 100%;199 margin-bottom: 1rem;200 text-align: center !important;201 }202 203 .footer-column div {204 border-top: 1px;205 }206 207 .copy .column {208 width: 100% !important;209 margin: 0 !important;210 margin-bottom: 2rem !important;211 }212}213 214 215 216 217 218button {219 margin-top: 2rem;220 font-size: 2rem;221 padding: 1rem;222 font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;223 text-decoration: none;224 background-color: var(--green);225 color: var(--plain-white);226 border: none;227}228 229button:hover {230 background-color: var(--brown);231 cursor: pointer;232}233 234.copy {235 width: 100%;236 box-sizing: border-box;237 padding-left: 12.5%;238 padding-right: 12.5%;239 padding-top: 2%;240 padding-bottom: 2%;241 float: left;242}243 244.copy #main {245 float: left;246 width: 67%;247 margin-right: 3%;248}249 250.copy #side {251 float: left;252 width: 27%;253 margin-left: 3%;254}255 256.copy #photograph {257 float: left;258 width: 27%;259 margin-left: 3%;260}261 262.copy #photograph img {263 padding-top: 6rem;264 width: 100%;265}266 267.copy #biography {268 float: left;269 width: 67%;270 margin-right: 3%;271}272 273.copy #fullwidth {274 float: none;275 clear: both;276 margin-bottom: 3rem;277}278 279.schedule-table .schedule-row {280 display: block;281 clear: both;282 vertical-align: middle;283 padding-left: .8rem;284 padding-top: .3rem;285 height: 2rem;286}287 288.schedule-table .placeholder {289 color: #dbc7c9;290}291 292.schedule-table .organisational {293 background-color: var(--orange);294}295 296.schedule-table .schedule-row div{297 display: inline-block;298 float: left;299}300 301.schedule-table .schedule-row div:nth-of-type(1){302 width: 10%;303}304.schedule-table .schedule-row div:nth-of-type(2){305 width: 40%;306}307.schedule-table .schedule-row div:nth-of-type(3){308 width: 50%;309 font-style: italic;310}311 312@media (max-width: 880px) {313 314 .schedule-table .schedule-row{315 display: block;316 width: 100%;317 box-sizing: border-box;318 }319 320 .schedule-table .schedule-row div:nth-of-type(1){321 display: inline-block;322 float: left;323 width: 3rem;324 margin-right: 1rem;325 }326 .schedule-table .schedule-row div:nth-of-type(2){327 display: inline-block;328 float: left;329 width: initial;330 }331 332 .schedule-table .schedule-row div:nth-of-type(3){333 display: block;334 clear: both;335 width: calc(100% - 4rem);336 margin-left: 4rem;337 font-style: italic;338 }339 340 .copy #photograph img {341 display: block;342 margin: 0 auto;343 text-align: center;344 padding-top: 0;345 width: 100%;346 max-width: 300px;347 }348 349}350 351.speakercard {352 margin: .5%;353 display: inline-block;354 float: left;355 padding: 3%;356 box-sizing: border-box;357}358 359.speakercard#tba {360 display: inline-block;361 float: left;362 padding: 1%;363 box-sizing: border-box;364 background-color: #dbc7c9;365}366 367#tba-list368{369 list-style: disc !important;370}371#tba-list li372{373 display: inline-block;374}375 376.speakercard#tba:hover {377 background-color: #dbc7c9;378}379 380.speakercard#bruno {381 background-color: var(--green);382}383 384.speakercard p {385 text-align: left;386 color: var(--brown)387}388 389.speakercard:nth-of-type(odd){390 background-color: var(--orange);391}392 393.speakercard:nth-of-type(even){394 background-color: var(--red);395}396 397.speakercard:hover {398 background-color: var(--green);399}400 401.speakercard h2 {402 color: var(--off-white);403}404 405.speakercard .button {406 background-color: var(--green);407 color: var(--off-white);408 font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;409 padding: .5rem;410 clear: both;411 display: block;412}413 414.speakercard .photoblock {415 width: 100%;416 display: inline-block;417 float: left;418}419 420.speakercard .textblock {421 width: 100%;422 display: inline-block;423 float: left;424 box-sizing: border-box;425 padding-left: 2%;426}427 428.speakercard img {429 width: 100%;430 height: 100%;431}432 433#hosts {434 float: none;435 clear: both;436}437 438@media (max-width: 880px) {439 .speakercard {440 grid-column-start: 1;441 grid-column-end: 4;442 }443}444 445.invisible{446 color: var(--off-white);447}448 449.copy #speakers, .copy #schedule {450 margin-bottom: 1.5rem;451}452 453@media (min-width: 881px) {454 .hostgrid .speakercard{455 width: 49%;456 }457 458 .hostgrid .speakercard .photoblock {459 width: 30%;460 }461 462 .hostgrid .speakercard .textblock {463 width: 70%;464 }465}466 467.committee {468 font-family: "Ubuntu Mono", "Courier New", monospace;469}470 471.committee div div {472 display: inline-block;473 float: left;474}475 476.committee .name {477 width: 60%;478}479 480.committee .name a{481 text-decoration: none;482}483 484.committee .role {485 width: 40%;486}487 488@media (min-width: 881px) {489 .contact, .contact p{490 text-align: right;491 }492}493 494.impression {495 width: 100%;496}497 498.partner-overview {499 width: 100%;500 text-align: center;501}502 503.partner-overview .partner {504 padding: 1rem;505 box-sizing: border-box;506}507 508.partner-overview .partner img {509 margin-top: 2rem;510 margin-bottom: 2rem;511 max-width: 100%;512}513 514.partner-overview #principal img {515 max-height: 12rem;516}517 518.partner-overview #gold img {519 max-height: 9rem;520}521 522.partner-overview #silver img {523 max-height: 7rem;524}525 526.partner-overview #bronze img {527 max-height: 5rem;528}529 530.partner-tier {531 width: 100%;532 float: block;533 clear: both;534}535 536.partner-tier#gold .partner {537 width: 100%;538 display: inline-block;539 float: left;540}541 542.partner-tier#gold .partner {543 width: 50%;544 display: inline-block;545 float: left;546}547 548.partner-tier#silver .partner {549 width: calc(100%/2);550 display: inline-block;551 float: left;552}553 554.partner-tier#bronze .partner {555 width: 50%;556 display: inline-block;557 float: left;558}559 560@media (max-width: 881px) {561 .partner-overview .partner{562 width: 100% !important;563 float: none;564 }565}566 567.partner-banner {568 width: 100%;569 clear: both;570 text-align: center;571}572 573.partner-banner img {574 max-height: 4rem;575 margin-top: 1rem;576 margin-bottom: .5rem;577}578 579.partner-overview .partner:hover{580 background-color: var(--green);581}582 583#partner-link {584 text-decoration: none;585 color: var(--brown);586}587 588p.warning {589 font-size: .8rem;590}591 592p.warning-header {593 color: var(--red);594}595 596.speakergrid597{598 display: grid;599 grid-column-gap: 10px;600 grid-row-gap: 10px;601 grid-template-columns: [one] 33% [two] 33% [three] 33%;602}603 604.card605{606 background: #ccc;607 width: 100%;608 height: 100px;609}610 611 612 613#navigation {614 line-height: 70px;615 background-color: var(--brown);616 font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;617 color: var(--off-white);618}619 620#navigation div {621 display: inline-block;622}623 624/*Strip the ul of padding and list styling*/625ul {626 list-style-type:none;627 margin:0;628 padding:0;629 630 display: inline-block;631 float: right;632}633/*Create a horizontal list with spacing*/634li {635 display:inline-block;636 float: left;637 margin-right: 1px;638}639 640/*Style for menu links*/641li a {642 display:block;643 min-width:140px;644 text-align: center;645 text-decoration: none;646 color: var(--off-white);647}648/*Hover state for top level links*/649li:hover a {650 color: var(--green);651}652/*Style for dropdown links*/653li:hover ul a {654 background: var(--brown);655 color: var(--off-white);656 height: 40px;657 line-height: 40px;658}659/*Hover state for dropdown links*/660li:hover ul a:hover {661 background: var(--green);662 color: var(--off-white);663}664 665 666 667 668/*Hide dropdown links until they are needed*/669li ul {670 display: none;671}672/*Make dropdown links vertical*/673li ul li {674 display: block;675 float: none;676}677/*Prevent text wrapping*/678li ul li a {679 width: auto;680 min-width: 100px;681 padding: 0 20px;682}683/*Display the dropdown on hover*/684ul li a:hover + .hidden, .hidden:hover {685 display: block;686}687/*Style 'show menu' label button and hide it by default*/688.show-menu {689 font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;690 text-decoration: none;691 color: red);692 background: var(--green);693 text-align: center;694 display: none;695}696/*Hide checkbox*/697input[type=checkbox]{698 display: none;699}700/*Show menu when invisible checkbox is checked*/701input[type=checkbox]:checked ~ #menu{702 display: block;703}704 705/*Responsive Styles*/706@media screen and (max-width : 880px){707 nav {708 line-height: 50px;709 }710 711 /*Make dropdown links appear inline*/712 ul {713 width: 100%;714 position: static;715 display: none;716 }717 /*Create vertical spacing*/718 li {719 margin-top: 1px;720 background-color: var(--brown)721 }722 /*Make all menu links full width*/723 ul li, li a {724 width: 100%;725 }726 /*Display 'show menu' link*/727 .show-menu {728 display: inline-block;729 float: right;730 width: 70px;731 }732}733 734#logo{735 height: 30px;736 margin-left: 15px;737 display: inline-block;738 vertical-align: middle;739}740 741#hamburger{742 height: 30px;743 display: inline-block;744 vertical-align: middle;745}746 </style>747 <meta charset="utf-8">748 <title>749 exec(ut)750 </title>751 <meta content="A new general software and technology conference that will take place on April 23rd, 2018 in the city of Utrecht. Visit our website for information and tickets." name="description">752 <meta content="execut,execute,conference,congres,symposium,utrecht,studievereniging,sticky,stichting,it,tech,technology" name="keywords">753 <meta content="exec(ut)" name="author">754 <meta content="width=device-width, initial-scale=1" name="viewport">755 <!-- Favicon and Facebook OG -->756 <meta content="/icons/browserconfig.xml" name="msapplication-config">757 <meta content="#ef4955" name="theme-color">758 <meta content="/img/og-image.jpg" property="og:image">759 <meta content="1406" property="og:image:width">760 <meta content="736" property="og:image:height">761 <meta content="exec(ut) conference - April 23rd, 2018" property="og:title">762 <meta content="A new general software and technology conference that will take place on April 23rd, 2018 in the city of Utrecht. Visit our website for information and tickets." property="og:description">763 <meta content="" property="og:url">764 </head>765 <body>766 <div class="container">767 <a alt="Visit our currently relevant website!" class="old">768 <div class="old_banner">769 <span>770 This is the archived version of 2018's conference website. Click here for currently relevant info.771 </span>772 </div>773 </a>774 <div id="navigation">775 <div>776 <a alt="Home">777 <img alt="exec(ut) logo" id="logo" src="rick.jpg">778 </a>779 </div>780 <label class="show-menu" for="show-menu">781 <img alt="Menu" id="hamburger" src="rick.jpg">782 </label>783 <input id="show-menu" role="button" type="checkbox">784 <ul id="menu">785 <li>786 <a>787 Programme788 </a>789 </li>790 <li>791 <a>792 Partners793 </a>794 </li>795 <li>796 <a>797 Location798 </a>799 </li>800 <li>801 <a>802 Tickets803 </a>804 </li>805 </ul>806 </div>807 <div id="content">808 <div class="banner">809 <p>810 <code>811 exec(ut)812 </code>813 would not be possible without our amazing partners814 <br>815 </p>816 </div>817 <div class="copy">818 <h1>819 About our partnerships820 </h1>821 <p>822 Organising823 <code>824 exec(ut)825 </code>826 is only made possible through the contributions of our partners, to whom we are very grateful for their support.827 <code>828 exec(ut)829 </code>830 with a stand, so make sure to stop by and have a chat!831 </p>832 <div class="partner-overview">833 <div class="partner-tier" id="principal">834 <h1>835 Principal partner836 </h1>837 <a alt="More about PwC" target="_blank">838 <div class="partner" id="pwc">839 <img class="partner-logo" src="rick.jpg">840 </div>841 </a>842 </div>843 <div class="partner-tier" id="gold">844 <h1>845 Gold partners846 </h1>847 <a alt="More about ChipSoft">848 <div class="partner" id="chipsoft">849 <img class="partner-logo" src="rick.jpg">850 </div>851 </a>852 <a alt="More about Nedap" target="_blank">853 <div class="partner" id="nedap">854 <img class="partner-logo" src="rick.jpg">855 </div>856 </a>857 </div>858 <div class="partner-tier" id="silver">859 <h1>860 Silver partners861 </h1>862 <a alt="More about Topicus" target="_blank">863 <div class="partner" id="topicus">864 <img class="partner-logo" src="rick.jpg">865 </div>866 </a>867 <a alt="More about Quintor">868 <div class="partner" id="quintor">869 <img class="partner-logo" src="rick.jpg">870 </div>871 </a>872 <a alt="More about Capgemini">873 <div class="partner" id="capgemini">874 <img class="partner-logo" src="rick.jpg">875 </div>876 </a>877 <a alt="More about ING">878 <div class="partner" id="ing">879 <img class="partner-logo" src="rick.jpg">880 </div>881 </a>882 </div>883 <div class="partner-tier" id="bronze">884 <h1>885 Bronze partners886 </h1>887 <div class="logos">888 <a alt="More about ASML">889 <div class="partner" id="asml">890 <img class="partner-logo" src="rick.jpg">891 </div>892 </a>893 <a alt="More about Brunel" target="_blank">894 <div class="partner" id="brunel">895 <img class="partner-logo" src="rick.jpg">896 </div>897 </a>898 </div>899 </div>900 </div>901 </div>902 </div>903 <div id="footer">904 <div class="footer-column" id="social">905 <a alt="Facebook page" target="_blank">906 <img alt="Facebook page" class="socialmedia" src="rick.jpg">907 </a>908 <a alt="Tweeter page" target="_blank">909 <img alt="Tweeter page" class="socialmedia" src="rick.jpg">910 </a>911 </div>912 <div class="footer-column" id="copyright">913 <p>914 <code>915 exec(ut)916 </code>917 is an event organised by918 <a alt="Stichting Sticky" target="_blank">919 Stichting Sticky920 </a>921 .922 <br>923 All rights reserved.924 </p>925 </div>926 <div class="footer-column" id="coc">927 <p>928 Please take note of our929 <br>930 <a alt="Our Code of Conduct" target="_blank">931 Code of Conduct932 </a>933 and934 <a alt="Our Privacy Policy" target="_blank">935 Privacy Policy936 </a>937 </p>938 </div>939 </div>940 </div>941 </body>942</html>943