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-GB">3 <head>4 <style>5 *,*::before,*::after{box-sizing:border-box}body{color:#3b3b3b;background:#fff;line-height:1.5;margin:0}header{margin:0 1rem}.container{margin:0 auto;padding:0 0 0 0}section,main,#main{padding:0 1rem 1rem 1rem}aside{padding:1rem}@media only screen and (min-width: 750px){aside{padding:1rem 1rem 1rem 0}}footer{margin:1rem 0 4rem 0;font-size:.9rem;text-align:center}@media only screen and (min-width: 750px){footer{margin:1rem 0 2rem 0}}nav{font-size:1.3rem;line-height:2;padding:0 0 1rem 0;display:flex;flex-wrap:wrap;justify-content:center;position:fixed;bottom:0;background-color:#f0f9f1;z-index:2000}nav a,nav a:visited,nav label{margin:.4rem .4rem .4rem 0;line-height:1.2;border-radius:5px;background-color:#31813c;color:#fafafa;display:none;padding:.3rem .5rem;text-decoration:none;transition:background .2s ease-out}nav a:hover,nav label:hover,nav a:focus-visible,nav label:focus-visible{background-color:#333;color:#fafafa}nav a[aria-current=page]{background-color:#333}nav a:active,nav label:active{background:#333}@media(min-width: 750px){nav a,nav label{margin:.4rem .4rem .2rem 0;display:inline-block;text-align:center}}nav label{display:block;background-color:#31813c;padding:.2rem 2rem;border:2px solid red}@media(min-width: 750px){nav{font-size:1.1rem;top:0;bottom:auto;flex-direction:column;width:9rem;margin:0 0 0 1rem;background-color:rgba(0,0,0,0)}nav label{display:none}}nav #nav-toggle{display:none}@media(max-width: 749px){nav #nav-toggle:checked~a,nav #nav-toggle:checked~label{display:block}}nav{grid-area:nav}header{grid-area:header}main{grid-area:main}aside{grid-area:aside;align-self:start}footer{grid-area:footer}.hero{grid-area:hero}.intro{grid-area:intro}.news{grid-area:news}@media only screen and (max-width: 749px){.home-page .container{display:grid;grid-template-columns:1fr;grid-template-areas:"header" "intro" "news" "nav"}}@media only screen and (min-width: 750px){.home-page .container{display:grid;grid-template-columns:10.5rem 1fr;grid-template-areas:"nav header" "nav intro" "nav news"}}@media only screen and (max-width: 749px){.entry-page .container{display:grid;grid-template-columns:1fr;grid-template-areas:"header" "main" "aside" "nav"}}@media only screen and (min-width: 750px){.entry-page .container{display:grid;grid-template-columns:10.5rem 2fr 1fr;grid-template-areas:"nav header header" "nav main aside"}}@media only screen and (min-width: 1000px){.entry-page .container{display:grid;grid-template-columns:10.5rem 3fr 1fr;grid-template-areas:"nav header header" "nav main aside"}}@media only screen and (max-width: 749px){.index-page .container{display:inherit;grid-template-columns:1fr;grid-template-areas:"header" "main" "nav"}}@media only screen and (min-width: 750px){.index-page .container{display:grid;grid-template-columns:10.5rem 1fr;grid-template-areas:"nav header" "nav main"}}@media only screen and (max-width: 749px){.events .container{display:grid;grid-template-columns:1fr;grid-template-areas:"header" "main" "nav"}}@media only screen and (min-width: 750px){.events .container{display:grid;grid-template-columns:10.5rem 1fr;grid-template-areas:"header header" "nav main"}}.embed{clear:both;position:relative;padding-bottom:56.25%;padding-top:25px;height:0;margin:.5em 0 1em 0}.embed iframe{position:absolute;top:0;left:0;width:100% !important;height:100% !important}.skip-link{background:#333;color:#fafafa;padding:.5rem 1rem;position:absolute;left:.5rem;transform:translateY(-120%);transition:transform 325ms ease-in;z-index:9000}.skip-link:focus{transform:translateY(0)}.hero{grid-area:hero;background-image:url(/assets/images/hero-group3.jpg);background-repeat:no-repeat;background-position:right 50% bottom 90%;background-size:cover;height:30vh;margin-bottom:1rem}.titleImagePortrait{max-width:60%;margin-left:1rem;float:right;clear:right}.titleImageLandscape{max-width:100%}.titleImageLandscape img{display:block;margin-left:auto;margin-right:auto;margin-bottom:.5rem}.caption{font-size:.9em;color:#424242;text-align:center}details.explain{background:rgba(0,0,0,0);padding:0}details[open].explain{padding:0}summary.explain{color:#31813c;padding:0;font-size:1rem;font-weight:500;list-style-type:none}summary.explain::-webkit-details-marker{display:none}details[open] summary.explain{margin-bottom:.5rem;padding:0;list-style:none}.card-container{display:grid;grid-template-columns:repeat(auto-fill, minmax(13rem, 1fr));grid-gap:1rem}.card-container>.card{display:flex;flex-direction:column;border:1px solid #ccc;border-radius:5px;padding:.5rem;text-align:center}.card>img{margin-bottom:.5rem;align-self:center}.card>.button{margin-top:auto;padding:0;border:none;border-radius:5px;align-self:center}.card>form input[type=submit]{margin-top:0}.errors{color:#ef4136;font-size:1.5rem}.errors li{list-style-image:none}.button a,.button a:visited{background-color:#31813c;border-radius:5px;border:none;color:#fafafa;text-decoration:none;cursor:pointer;line-height:1.1;padding:.5rem;display:inline-block;margin-left:auto;margin-right:auto;margin-bottom:.5rem;width:auto}.button a:link{text-decoration:none}.button a:hover{background-color:#333;color:#fafafa}.flex-container{display:-webkit-box;display:-webkit-flex;-webkit-flex-wrap:wrap;display:flex;flex-wrap:wrap;flex-direction:row;gap:1rem;margin:0}.flex-container .summary{-webkit-box-flex:1;-webkit-flex-grow:1;-webkit-flex-basis:18rem;flex:1 1 18rem;display:flex;flex-direction:column;min-width:18rem;max-width:510px;margin:0}.flex-container details{-webkit-box-flex:1;-webkit-flex-grow:1;-webkit-flex-basis:15.5rem;flex:1 1 15.5rem;display:flex;flex-direction:column;min-width:15.5rem;margin:0}.flex-container details[open] summary{list-style:none}details[open] summary::-webkit-details-marker{display:none}.column-container{-webkit-columns:18rem;-webkit-column-gap:2rem;-moz-columns:18rem;-moz-column-gap:2rem;columns:18rem;column-gap:2rem;margin:0;clear:both}.column-container .summary{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;margin-bottom:2rem}.entry-page .column-container .summary{border:none}.summary{padding:.6rem 1rem;margin-bottom:2rem;border-radius:5px;border:solid 1px #ccc;-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid}.summary img{max-inline-size:100%;block-size:auto;display:block;margin:0 auto;border-radius:5px}.summary p{margin:.2rem 0 .3rem 0}.summary h2{font-size:1.6rem}.summary h3{font-size:1.4rem}.summary-content{padding:.6rem 1rem;flex-grow:1;display:flex;flex-direction:column;-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid}.col-span{column-span:all;text-align:center;background-color:#f0f9f1;border:solid 1px #ddd;margin:0 0 1rem 0}.col-span h1,.col-span h2{margin:0}.prime-background{background-color:#f0f9f1;border:none}.meta{font-size:.9rem;display:inline}.right{float:right}.center{text-align:center}.width30{max-inline-size:30%;margin:1rem 0 0 1rem;float:right;clear:right}.width50{max-inline-size:50%;margin:1rem 0 0 1rem;float:right;clear:right}.width100{max-inline-size:100%;display:block;margin:1rem auto 0 auto;padding:1rem 0}@media only screen and (max-width: 750px){.width30{max-inline-size:50%;float:right}.width50{max-inline-size:100%;float:none}}figure.imageText{clear:both;padding:1rem 0}figure.imageText img{max-inline-size:50%;margin-left:1rem;margin-top:.5rem;float:right}figcaption.imageText{text-align:start;font-size:1rem;color:#3b3b3b}#map_canvas img{max-width:inherit;background-color:rgba(0,0,0,0)}#map_canvas{width:100%;height:45vh;margin:1rem auto;background-color:rgba(0,0,0,0);background-image:url(/assets/images/loadingAnimation.gif);padding:0}#map_selection{margin:.5em 5%}ul.crumbs{list-style:none;margin:0 0 .5rem 0;padding:0}.crumbs li{display:inline;margin:0;font-size:.8rem}ul.inLine{list-style:none;margin:0 0 .5rem 0;padding:0}.inLine li{display:inline;margin:0;font-size:1rem}a.external-link{background-image:url(/assets/images/icons-16/external-link.png);background-image:url(/assets/images/icons-16/external-link.svg);background-position:right center;background-repeat:no-repeat;display:inline;padding-right:20px}html{font-family:-apple-system,BlinkMacSystemFont,"Avenir Next",Avenir,"Nimbus Sans L",Roboto,"Noto Sans","Segoe UI",Arial,Helvetica,"Helvetica Neue",sans-serif;scroll-behavior:smooth;font-size:calc(.8rem + .27vw);font-size:clamp(1rem,.5714rem + .5714vw,2rem)}p{margin:.5rem 0 1rem 0}p,h1,h2,h3,h4{overflow-wrap:break-word;word-break:break-word}h1,h2,h3,h4{font-weight:500;line-height:1.1;color:#235c2b}h2:first-of-type,h3:first-of-type{margin-top:0}h1 span,h2 span,h3 span{display:block;font-size:.7em}h1{font-size:2.5rem;margin-top:0}h2{font-size:2rem;margin:2rem 0 .5rem 0}h3{font-size:1.6rem;margin:2rem 0 .5rem 0}h4{font-size:1.1rem}a,a:visited{color:#31813c;text-decoration:none}a:hover{text-decoration:none;color:#333}p a{text-decoration:underline}button,[role=button],input[type=submit],input[type=reset],input[type=button]{border:none;border-radius:5px;background:#31813c;font-size:1rem;color:#fafafa;padding:0;margin:.5rem 0}input[type=range]{padding:0}abbr{cursor:help}button:focus,button:enabled:hover,[role=button]:focus,[role=button]:not([aria-disabled=true]):hover,input[type=submit]:focus,input[type=submit]:enabled:hover,input[type=reset]:focus,input[type=reset]:enabled:hover,input[type=button]:focus,input[type=button]:enabled:hover{filter:brightness(1.4);cursor:pointer}details{background:#f0f9f1;border-radius:5px}details summary>*{display:inline}summary{cursor:pointer;font-weight:normal;color:#235c2b;padding:0 1rem;font-size:1.3rem;font-weight:500}details[open]{padding:.6rem 1rem}details[open] summary{margin-bottom:.5rem;padding:0;color:#235c2b}details[open]>*:last-child{margin-bottom:0}table{border-collapse:collapse;width:100%;margin:1.5rem 0}td,th{border:1px solid #ccc;text-align:left;padding:.2rem .5rem}th{background:#3fa64d;color:#fafafa;font-weight:bold;position:sticky;top:0;z-index:2;line-height:1}tr:nth-child(even){background:#f0f9f1}table caption{font-weight:bold;margin-bottom:.5rem}dt{margin-inline-start:0}dd{margin-inline-start:1rem}ul{margin-left:0}ul li{list-style-image:url(/assets/images/icons-16/icon.svg);margin:0 0 .4em 0}hr{color:#ccc;border-top:1px;width:80%;margin:1rem auto}mark{padding:2px 5px;border-radius:4px;background:#fd3}img,video,iframe{max-inline-size:100%;block-size:auto;border-radius:5px}figure{margin:1em auto}figcaption{font-size:.9rem;text-align:center;color:#424242;margin-bottom:1rem}blockquote{margin:2rem 0 2rem 2rem;padding:.4rem .8rem;border-left:.35rem solid #3fa64d;color:#3b3b3b;font-style:italic}cite{font-size:.9rem;color:#3b3b3b;font-style:normal}textarea,select,input{font-size:inherit;font-family:inherit;padding:.5rem;margin-bottom:.5rem;color:#3b3b3b;background:#fff;border:1px solid #ccc;border-radius:5px;box-shadow:none;width:60%;-moz-appearance:none;-webkit-appearance:none;appearance:none}select{background-image:linear-gradient(45deg, transparent 49%, hsl(0deg, 0%, 23%) 51%),linear-gradient(135deg, hsl(0deg, 0%, 23%) 51%, transparent 49%);background-position:calc(100% - 20px),calc(100% - 15px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}select[multiple]{background-image:none !important}input[type=checkbox],input[type=radio]{vertical-align:bottom;position:relative}input[type=radio]{border-radius:100%}input[type=checkbox]:checked,input[type=radio]:checked{background:#3fa64d}input[type=checkbox]:checked::after{content:" ";width:.1em;height:.25em;border-radius:0;position:absolute;top:.05em;left:.18em;background:rgba(0,0,0,0);border-right:solid #fff .08em;border-bottom:solid #fff .08em;font-size:1.8em;transform:rotate(45deg)}input[type=radio]:checked::after{content:" ";width:.25em;height:.25em;border-radius:100%;position:absolute;top:.125em;background:#fff;left:.125em;font-size:32px}input#additional{display:none}textarea{width:80%}@media only screen and (max-width: 720px){textarea,select,input{width:100%}}input[type=checkbox],input[type=radio]{width:auto}input[type=file]{border:0}a[href$=".pdf"]{background-image:url(/assets/images/icons-16/pdf.png);background-image:url(/assets/images/icons-16/pdf.svg);background-position:right center;background-repeat:no-repeat;padding-right:20px}a[href$=".doc"]{background-image:url(/assets/images/icons-16/word.png);background-image:url(/assets/images/icons-16/word.svg);background-position:right center;background-repeat:no-repeat;padding-right:20px}a[href$=".docx"]{background-image:url(/assets/images/icons-16/word.png);background-image:url(/assets/images/icons-16/word.svg);background-position:right center;background-repeat:no-repeat;padding-right:20px}a[href$=".xls"]{background-image:url(/assets/images/icons-16/excel.png);background-image:url(/assets/images/icons-16/excel.svg);background-position:right center;background-repeat:no-repeat;padding-right:20px}a[href$=".xlsx"]{background-image:url(/assets/images/icons-16/excel.png);background-image:url(/assets/images/icons-16/excel.svg);background-position:right center;background-repeat:no-repeat;padding-right:20px}a[href^=".zip"]{background-image:url(/assets/images/icons-16/zip.png);background-image:url(/assets/images/icons-16/zip.svg);background-position:right center;background-repeat:no-repeat;padding-right:20px}a[href^="mailto:"]{background-image:url(/assets/images/icons-16/email.png);background-image:url(/assets/images/icons-16/email.svg);background-position:right center;background-repeat:no-repeat;padding-right:20px}@media print{*{background:rgba(0,0,0,0) !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}body{width:100% !important;margin:0 !important;padding:0 !important;line-height:1.25;font-size:13pt}h1,h2,h3,h4,h5,h6{page-break-after:avoid;font-weight:bold}h1{font-size:20pt}h2{font-size:18pt}h3{font-size:16pt}h4,h5,h6{font-size:14pt}p,h2,h3{orphans:3;widows:3}code{font:12pt Courier,monospace}blockquote{margin:1.2em;padding:1em;border:1px solid #999;page-break-inside:avoid}hr{background-color:#ccc}ul li{list-style-image:none;margin:0 0 .3em 0}img{margin:1em 1em 1em 0;max-width:100% !important}a img{border:none}a:link,a:visited{background:rgba(0,0,0,0);font-weight:normal;color:#000}a:link[href]:after,a[href]:visited:after{content:" (" attr(href) ") ";font-size:85%;color:#666}abbr[title]:after{content:" (" attr(title) ")"}a[href]{color:#000}a[href$=".jpg"]:after,a[href$=".jpeg"]:after,a[href$=".gif"]:after,a[href$=".png"]:after{content:" (" attr(href) ") ";display:none}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}table{margin:1px;text-align:left}th{border-bottom:1px solid #333;font-weight:bold}td{border-bottom:1px solid #333}th,td{padding:4px 10px 4px 0}tfoot{font-style:italic}caption{background:#fff;margin-bottom:2em;text-align:left}thead{display:table-header-group}img,tr{page-break-inside:avoid}main,section,aside{width:100%}nav,.header,footer,.noPrint{display:none}.embed{display:none;width:0 !important;height:0 !important;overflow:hidden !important;line-height:0pt !important;white-space:nowrap}}6 </style>7 <meta charset="utf-8">8 <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">9 <title>10 Problem - Devon Orienteering11 </title>12 <meta content="Sorry, we have a problem." name="description">13 <meta content="#3fa64d" name="msapplication-TileColor">14 <meta content="#ffffff" name="theme-color">15 </head>16 <body class="entry-page">17 <a class="skip-link">18 Skip to Main content19 </a>20 <div class="container">21 <header>22 <img alt height="340" src="rick.jpg" width="3200">23 </header>24 <nav id="nav" role="navigation">25 <label for="nav-toggle">26 ☰ Menu27 </label>28 <input id="nav-toggle" type="checkbox">29 <a>30 Home31 </a>32 <a>33 Newcomers34 </a>35 <a>36 Events37 </a>38 <a>39 Anytime O40 </a>41 <a>42 Results43 </a>44 <a>45 Information46 </a>47 <a title="Contact Us">48 Contacts49 </a>50 <a>51 Search52 </a>53 </nav>54 <main class="content" id="content">55 <div class="titleImagePortrait">56 <img alt="Are you lost?" src="rick.jpg" title="Are you lost?">57 </div>58 <h2>59 We have a problem…60 </h2>61 <p>62 We can't find the page you requested, and we're not sure what happened, but here are 4 possible causes.63 </p>64 <h3>65 1. We have recently updated our website66 </h3>67 <p>68 Some pages will have changed their location due to a new content structure, use the Navigation, Search or the list of Recent Entries to try and find what you are looking for.69 </p>70 <h3>71 2. Did you follow a link from this website?72 </h3>73 <p>74 That's probably our fault, please go to the75 <a>76 contact page77 </a>78 and send an email to our webmaster to point us to the bad link so we can fix it.79 </p>80 <h3>81 3. Did you follow a link from another website?82 </h3>83 <p>84 We may have changed or moved the item, or they may have a typo in their link address. Again,85 <a>86 let us know87 </a>88 so we can fix it.89 </p>90 <h3>91 4. Did you type the address in yourself?92 </h3>93 <p>94 Check that you entered it correctly.95 </p>96 <h3>97 Still no luck?98 </h3>99 <p>100 Use the Navigation, Search or the list of Recent Entries (right) to try and find what you are looking for.101 </p>102 <h3>103 Search104 </h3>105 <form action="">106 <input name="q" placeholder="Search phrase" type="search">107 <input class="submit" type="submit" value="Go">108 </form>109 </main>110 <aside>111 <h2>112 Recent entries113 </h2>114 <ul class="clean">115 <li>116 <a title="Read more about South West Middle Distance Championships">117 South West Middle Distance Championships118 </a>119 </li>120 <li>121 <a title="Read more about Devon League scores after event 2">122 Devon League scores after event 2123 </a>124 </li>125 <li>126 <a title="Read more about Annual General Meeting 2023">127 Annual General Meeting 2023128 </a>129 </li>130 <li>131 <a title="Read more about Nun's Cross event">132 Nun's Cross event133 </a>134 </li>135 </ul>136 </aside>137 </div>138 <footer>139 <p>140 © 2023 Devon Orienteering141 <br>142 Built by143 <a>144 PFweb145 </a>146 </p>147 </footer>148 </body>149</html>150