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: 'Lato';7 font-style: normal;8 font-weight: 400;9 src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwWw.ttf) format('truetype');10}11@font-face {12 font-family: 'Lato';13 font-style: normal;14 font-weight: 700;15 src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwaPHA.ttf) format('truetype');16}17@font-face {18 font-family: 'Noto Sans';19 font-style: italic;20 font-weight: 400;21 src: url(https://fonts.gstatic.com/s/notosans/v32/o-0OIpQlx3QUlC5A4PNr4ARMQ_w.ttf) format('truetype');22}23@font-face {24 font-family: 'Noto Sans';25 font-style: italic;26 font-weight: 700;27 src: url(https://fonts.gstatic.com/s/notosans/v32/o-0TIpQlx3QUlC5A4PNr4Az5ZuyNzWg.ttf) format('truetype');28}29@font-face {30 font-family: 'Noto Sans';31 font-style: normal;32 font-weight: 400;33 src: url(https://fonts.gstatic.com/s/notosans/v32/o-0IIpQlx3QUlC5A4PNr6zRF.ttf) format('truetype');34}35@font-face {36 font-family: 'Noto Sans';37 font-style: normal;38 font-weight: 700;39 src: url(https://fonts.gstatic.com/s/notosans/v32/o-0NIpQlx3QUlC5A4PNjXhFVatyE.ttf) format('truetype');40}41 42 43 44/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font:400 16px "Noto Sans",Helvetica,Arial,sans-serif;box-sizing:border-box;color:#434343}.page{background:#fff;display:flex;flex-flow:column;min-height:100vh}.page__header,.page__footer{flex:none}.page__main{display:flex;flex-flow:column;flex:1 1 auto}.page__main>*{flex:1 1 auto}.page-header{align-items:center;background:#fff;box-shadow:0 0 .6em #ccc;box-sizing:border-box;display:flex;height:4em;justify-content:center;left:0;position:-webkit-sticky;position:sticky;right:0;top:0;z-index:100}.page-header__content{box-sizing:border-box;display:grid;grid-template-columns:1fr auto;max-width:1000px;padding:0 1em;width:100%}.page-header__content-section{display:flex;align-items:center}.page-header__title{color:#fff;font-size:1.4em;font-weight:400;margin:0;white-space:nowrap}.page-header__title a{background:#135e13;color:inherit;padding:.2em .4em;text-decoration:none}.page-header__subtitle{font-size:1.2em;margin-left:.6em}@media(max-width: 659px){.page-header__subtitle{display:none}}.page-header__menu-link{border-bottom:2px solid transparent;color:#000;font-size:1.2em;text-decoration:none;transition:border-bottom-color .3s}.page-header__menu-link:hover{border-bottom-color:#c7c7c7}.page-footer{align-items:center;background:#135e13;color:#fff;display:flex;flex-direction:column;padding:2em 1em 3em}.page-footer__contact{display:flex;align-items:center;width:100%;max-width:1000px}.page-footer__contact-photo{flex:0 0 auto;max-width:100px;border-radius:50%;border:4px solid #fff}.page-footer__contact-content{flex:1 1 auto;margin-left:1em}.page-footer__contact-heading{font-weight:700;font-family:"Lato",Helvetica,Arial,sans-serif;text-transform:uppercase}.page-footer__contact-heading:nth-of-type(n + 2){margin-top:1em}.page-footer__contact-links{margin-top:.4em}.page-footer__contact-link{background:#fff;color:#000;display:inline-block;margin-right:.4em;padding:.3em .4em .2em;text-decoration:none}.page-footer__copyright{font-size:.9em;line-height:1.3;margin:2em 0 0;max-width:1000px;width:100%}.page-footer__copyright a{color:inherit;text-decoration:none;border-bottom:1px solid #fff}.feature{background:#fafafa;display:flex;flex-flow:column;align-items:center;padding:1.4em 0}.feature__heading{box-sizing:border-box;font-size:inherit;line-height:1.4;padding:0 1em;margin:1em 0 0;max-width:1000px;width:100%}.feature__heading-title{color:#000;font-size:1.2em;font-weight:700;font-family:"Lato",Helvetica,Arial,sans-serif;text-transform:uppercase}.feature__heading-description{font-weight:400}.feature__heading-description:after{content:":"}.feature__articles{display:grid;grid-gap:1em;margin-top:1em;max-width:1000px;width:100%}@media(min-width: 660px){.feature__articles{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}}.feature__article{background:#fff;padding:1em 1em 0;outline:1px solid #e1e1e1}.feature__categories{margin-bottom:.6em}.feature__category{background:linear-gradient(to bottom, #24b324 0%, #24b324 100%) repeat-x 0 100%;background-size:3px 100%;color:#fff;display:inline-block;font-size:.9em;padding:.3em .6em;text-decoration:none;transition:background-size .3s,color .3s}.feature__category+.feature__category{margin-left:.4em}.feature__category:hover{background-size:3px 3px;color:#000}.feature__title{font-family:"Lato",Helvetica,Arial,sans-serif;line-height:1.4;font-size:1.6em;font-weight:400;margin:0;text-transform:uppercase}.feature__title a{border-bottom:2px solid transparent;color:#000;text-decoration:none;transition:border-bottom-color .3s}.feature__title a:hover{border-bottom-color:#c7c7c7}.feature__meta{color:#135e13;margin-top:.8em}.list{background:#fafafa;display:flex;flex-flow:column;align-items:center;padding:1.4em 0}.list__heading{box-sizing:border-box;font-size:inherit;line-height:1.4;padding:0 1em;margin:1em 0 0;max-width:1000px;width:100%}.list__heading-title{color:#000;font-size:1.2em;font-weight:700;text-transform:uppercase}.list__heading-description{font-weight:400}.list__heading-description:after{content:":"}.list__articles{display:grid;grid-gap:1em;margin-top:1em;max-width:1000px;width:100%}@media(min-width: 660px){.list__articles{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}}.list__article{background:#fff;padding:1em 1em 0;outline:1px solid #e1e1e1}.list__title{font-family:"Lato",Helvetica,Arial,sans-serif;line-height:1.4;font-size:1.6em;font-weight:400;margin:0;text-transform:uppercase}.list__title a{border-bottom:2px solid transparent;color:#000;text-decoration:none;transition:border-bottom-color .3s}.list__title a:hover{border-bottom-color:#c7c7c7}.list__meta{color:#135e13;margin-top:.8em}.list__pager{box-sizing:border-box;margin:2em 0 2em;max-width:1000px;padding:0 1em;width:100%}.article{max-width:700px;margin:0 auto 4em;width:100%}.article__header{line-height:1.2;padding:3.4em 1em 1em;text-align:center}.article__categories{margin:0 auto}.article__category{background:linear-gradient(to bottom, #24b324 0%, #24b324 100%) repeat-x 0 100%;background-size:3px 100%;color:#fff;display:inline-block;padding:.2em .5em;text-decoration:none;transition:background-size .3s,color .3s}.article__category+.article__category{margin-left:.4em}.article__category:hover{background-size:3px 3px;color:#000}.article__title{color:#000;font:400 2.4em "Lato",Helvetica,Arial,sans-serif;margin:.4em 0 1em;text-transform:uppercase}@media(max-width: 659px){.article__title{font-size:2em}}.article__meta{color:#666}.article__warning{border:1px solid #f98f00;font-size:.8em;line-height:1.6;margin:2em .32em;padding:.8em 1em}.article__warning-label{background:#f98f00;color:#fff;margin-right:.6em;padding:.1em .4em}.article__content{margin-left:1em;margin-right:1em}.article__content:not(.article__content--plain)>p:first-child{background:#fafafa;border-width:1px 0;border-style:solid;border-color:#e1e1e1;font-size:1.2em;line-height:1.421;margin-bottom:1.8em;margin-left:-1em;margin-right:-1em;padding:.8em 1em}@media(max-width: 659px){.article__content:not(.article__content--plain)>p:first-child{font-size:1.1em}}@media(max-width: 799px){.article__content:not(.article__content--plain)>p:first-child,.article__content>figure{box-sizing:border-box;left:50%;margin-left:-50vw;margin-right:-50vw;position:relative;right:50%;width:100vw}}.article__content figure img{max-width:100%}.article__footer{margin:3em 1em 0}.article__topics{margin-top:2em}.article__author{border-top:2px solid #135e13;color:#000;padding:1em 0 0;font-weight:700;text-transform:uppercase;display:inline-block}.article__other{margin-top:2em}.topics__heading{color:#000;font-family:"Lato",Helvetica,Arial,sans-serif;font-weight:700;text-transform:uppercase}.topics__list{list-style:none;margin:.4em 0 0;padding:0}.topics__topic{display:inline-block;margin:0 .4em .4em 0}.topics__topic a{background:linear-gradient(to bottom, #24b324 0%, #24b324 100%) repeat-x 0 100%;background-size:3px 100%;color:#fff;display:block;padding:.2em .5em;text-decoration:none;transition:background-size .3s,color .3s}.topics__topic a:hover{background-size:3px 3px;color:#000}.text h2{font-weight:400;margin:1.4em 0 .6em}.text p,.text li{line-height:1.421}@media(min-width: 800px){.text p,.text li{line-height:1.521}}.text li>p{margin:0}.text ul,.text ol{padding-left:2em}.text ul{list-style:none}.text li+li{margin:.4em 0}.text li ul{margin:.4em 0}.text ul>li::before{background:#135e13;border-radius:50%;content:"";display:inline-block;height:.5em;margin:.6em 0 0 -1.2em;position:absolute;width:.5em}.text ul>li>ul li::before{background:#24b324}.text figure{margin-bottom:2em;margin-top:2em;text-align:center}.text figcaption{font-size:.9em;margin-top:.8em}.text blockquote{border-left:4px solid #24b324;padding:.4em 0 .4em 1em;margin:1em 0 1em 1em}.text blockquote>*:first-child{margin-top:0}.text blockquote>*:last-child{margin-bottom:0}.text hr{border:0;border-top:2px solid #767676;margin:2em auto;width:4em}.text .twitter-tweet{margin-left:auto;margin-right:auto}.text .youtube-movie{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.text .youtube-movie iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.text a{border-bottom:1px solid #c7c7c7;color:#434343;text-decoration:none;transition:border-width .3s,color .3s}.text a:hover{border-width:2px;color:#135e13}.text pre{background:#ededed;padding:.2em .4em;overflow-x:auto}.text code{background:#ededed;border-radius:.2em;padding:.1em .2em}.text pre>code{background:transparent;padding:0}.article-crosslinks{background:#fafafa;border-top:1px solid #e1e1e1;padding:1.4em 0}.article-crosslinks__heading{box-sizing:border-box;color:#000;font-family:"Lato",Helvetica,Arial,sans-serif;font-weight:700;text-transform:uppercase;margin:0 auto;max-width:1000px;padding:0 1em}.article-crosslinks__articles{display:grid;grid-gap:1em;margin:1em auto 0;max-width:1000px}@media(min-width: 800px){.article-crosslinks__articles{grid-template-columns:1fr 1fr 1fr}}.article-crosslinks__article{background:#fff;padding:1em 1em 0;outline:1px solid #e1e1e1}.article-crosslinks__title{font-family:"Lato",Helvetica,Arial,sans-serif;line-height:1.4;font-size:1.2em;text-transform:uppercase}.article-crosslinks__title a{border-bottom:2px solid transparent;color:#000;text-decoration:none;transition:border-bottom-color .3s}.article-crosslinks__title a:hover{border-bottom-color:#c7c7c7}.article-crosslinks__meta{color:#135e13;margin-top:.8em;font-size:.9em}.article-crosslinks__summary{font-size:.9em}.pager{align-items:center;display:flex;flex-flow:row wrap}.pager__page{background:linear-gradient(to bottom, #24b324 0%, #24b324 100%) repeat-x 0 100%;background-size:3px 100%;color:#fff;display:inline-block;font-size:1.2em;font-weight:700;padding:.5em .8em;text-decoration:none;transition:background-size .3s,color .3s;margin-right:.8em}.pager__page:hover{background-size:3px 3px;color:#000}.pager__page--current{background:#fff;color:#000;outline:1px solid #e1e1e1}.pager__description{display:inline-block;margin:0}.four-o-four{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:0 1em}.four-o-four__content{max-width:700px}.four-o-four__heading{background:#135e13;color:#fff;display:inline-block;font-size:6em;font-weight:400;margin:0;padding:.05em .2em}.four-o-four__explanation{margin-top:3em}.four-o-four__exit{background:linear-gradient(to bottom, #24b324 0%, #24b324 100%) repeat-x 0 100%;background-size:3px 100%;color:#fff;display:inline-block;padding:.2em .5em;text-decoration:none;transition:background-size .3s,color .3s}.four-o-four__exit:hover{background-size:3px 3px;color:#000}45 </style>46 <meta charset="utf-8">47 <title>48 I remember49 </title>50 <meta content="width=device-width, initial-scale=1" name="viewport">51 <meta content="Hugo 0.117.0" name="generator">52 <meta content="2023-11-03T00:05:04+0100" name="build-timestamp">53 <meta content="index,follow" name="robots">54 <meta content="summary" name="twitter:card">55 <meta content="@mpaluchowski" name="twitter:creator">56 <meta content="@mpaluchowski" name="twitter:site">57 <meta content="article" property="og:type">58 <meta content="" property="og:url">59 <meta content="I remember" property="og:title">60 <meta content="In 2019 I&rsquo;m &ldquo;celebrating&rdquo; twenty years since I published my first website. It was ugly, it was heavy and it was built completely with Microsoft FrontPage. Building for the web was different, very different back then, from what it is today. Our tools were young, our computers low on power and our connections slow and unreliable." property="og:description">61 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">62 </head>63 <body class="page" itemscope itemtype="">64 <header class="page__header page-header">65 <div class="page-header__content">66 <div class="page-header__content-section">67 <div class="page-header__title" itemprop="headline">68 <a>69 Michał's Bites70 </a>71 </div>72 <div class="page-header__subtitle" itemprop="description">73 Recipes for a software business74 </div>75 </div>76 <div class="page-header__content-section">77 <nav class="page-header__menu">78 <a class="page-header__menu-link">79 About Michał80 </a>81 </nav>82 </div>83 </div>84 </header>85 <main class="page__main" itemprop="mainEntity" itemscope itemtype="">86 <article class="article" itemprop="blogPost" itemscope itemtype="">87 <header class="article__header">88 <div class="article__categories">89 <a class="article__category">90 Technology91 </a>92 </div>93 <h1 class="article__title" itemprop="name headline">94 I remember95 </h1>96 <div class="article__meta">97 <time itemprop="datePublished">98 January 20, 201999 </time>100 ,101 3 minutes to read102 </div>103 </header>104 <div class="article__content text" itemprop="articleBody">105 <p>106 In 2019 I’m “celebrating” twenty years since I published my first website. It was ugly, it was heavy and it was built completely with107 <a>108 Microsoft FrontPage109 </a>110 .111 </p>112 <p>113 I’m putting together a list of memories from my early days on the web—late 90s and early 2000s. Smile and nod if you encountered any number of these:114 </p>115 <ul>116 <li>117 A way to locally simulate modem loading speeds was to open the website from a 3.5’ floppy disk. The data reading speed was comparable, and frankly, both devices were just as noisy.118 </li>119 <li>120 There was virtually no support for Unicode. To publish websites with Polish diacritics we had to use the121 <code>122 ISO-8859-2123 </code>124 encoding. Granted, some (primarily U.S.) websites remain in this era to this day and offer no charset support beyond125 <code>126 ASCII127 </code>128 .129 </li>130 <li>131 Laying out elements on a website involved tables—lots of them.132 <em>133 whole134 </em>135 HTML code was downloaded.136 </li>137 <li>138 Major, free email providers routinely offered 1-2MB of storage. When GMail launched on April 1, 2004, offering 1GB of free storage (by which time other services offered around 15-25MB), most people thought it was an April Fool’s joke.139 </li>140 </ul>141 <p>142 This post is a work in progress and will remain so, likely indefinitely. Whenever I remember some quirky way of doing things from the past, I will update it with new content.143 </p>144 </div>145 <footer class="article__footer">146 <div class="article__author">147 By148 <span class="p-author" itemprop="author" itemscope itemtype="">149 <span itemprop="name">150 Michał Paluchowski151 </span>152 </span>153 </div>154 <div class="article__bio text">155 <p>156 I make software.157 <a rel="me">158 [TWITTER REDACTED]159 </a>160 .161 </p>162 </div>163 <nav class="article__topics topics">164 <div class="topics__heading">165 Topics166 </div>167 <ul class="topics__list">168 <li class="topics__topic">169 <a itemprop="keywords">170 history171 </a>172 </li>173 <li class="topics__topic">174 <a itemprop="keywords">175 web176 </a>177 </li>178 </ul>179 </nav>180 </footer>181 </article>182 <div class="article-crosslinks">183 <div class="article-crosslinks__heading">184 Read another post?185 </div>186 <nav class="article-crosslinks__articles">187 <article class="article-crosslinks__article">188 <div class="article-crosslinks__title">189 <a>190 Software installations for Noobs and Freaks191 </a>192 </div>193 <div class="article-crosslinks__meta">194 <time>195 October 27, 2012196 </time>197 ,198 2 minutes to read199 </div>200 <div class="article-crosslinks__summary text">201 <p>202 “Copying Windows files”, “Getting files ready for installation”, “Installing features” … and so on. Installing Windows 8 is an experience pretty much the same as it’s ever been, where too much information is presented to those who don’t care, and not nearly enough to those who do.203 </p>204 </div>205 </article>206 <article class="article-crosslinks__article">207 <div class="article-crosslinks__title">208 <a>209 How to fix Facebook210 </a>211 </div>212 <div class="article-crosslinks__meta">213 <time>214 July 6, 2013215 </time>216 ,217 1 minute to read218 </div>219 <div class="article-crosslinks__summary text">220 <p>221 An endless stream of music videos, LOL content and the occasional drunk party photo. Facebook has become the new TV with 500 different channels and absolutely nothing on.222 </p>223 </div>224 </article>225 <article class="article-crosslinks__article">226 <div class="article-crosslinks__title">227 <a>228 The title is all there is229 </a>230 </div>231 <div class="article-crosslinks__meta">232 <time>233 April 2, 2014234 </time>235 ,236 1 minute to read237 </div>238 <div class="article-crosslinks__summary text">239 <p>240 I was invited once to241 <a>242 speak243 </a>244 at a245 <a>246 Toastmasters247 </a>248 Leadership Institute, about the Leadership Track of the organization’s educational program. I crafted a short title:249 </p>250 </div>251 </article>252 </nav>253 </div>254 </main>255 <footer class="page__footer page-footer">256 <div class="page-footer__contact">257 <img alt="Michał Paluchowski" class="page-footer__contact-photo" loading="lazy" src="rick.jpg">258 <div class="page-footer__contact-content">259 <div class="page-footer__contact-heading">260 Find me on261 </div>262 <nav class="page-footer__contact-links">263 <a class="page-footer__contact-link" rel="me">264 GitHub265 </a>266 <a class="page-footer__contact-link" rel="me">267 Mastodon268 </a>269 <a class="page-footer__contact-link" rel="me">270 Twitter271 </a>272 </nav>273 <div class="page-footer__contact-heading">274 My other blogs275 </div>276 <nav class="page-footer__contact-links">277 <a class="page-footer__contact-link">278 Cycling279 </a>280 <a class="page-footer__contact-link">281 Travel282 </a>283 </nav>284 </div>285 </div>286 <p class="page-footer__copyright">287 Made in Warsaw by Michał Paluchowski. All content is under a288 <a rel="license">289 Creative Commons Attribution 4.0 International License290 </a>291 . This template is292 <a>293 open source294 </a>295 , available under the MIT License. Built with296 <a>297 Hugo298 </a>299 .300 </p>301 </footer>302 </body>303</html>304