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 /** Reset some basic elements */6body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }7 8/** Basic styling */9body { font: 400 16px/1.5 Bitter, "Apple SD Gothic Neo", AppleGothic, NanumBarunGothic, "Malgun Gothic", Dotum, sans-serif; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; word-wrap: break-word; }10 11table { width: 100%; margin: 0 0 20px 0; text-align: left; }12 13/** Set `margin-bottom` to maintain vertical rhythm */14h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }15 16/** Images */17img { max-width: 100%; vertical-align: middle; }18 19/** Figures */20figure > img { display: block; }21 22figcaption { font-size: 14px; }23 24/** Lists */25ul, ol { margin-left: 30px; }26 27li > ul, li > ol { margin-bottom: 0; }28 29/** Headings */30h1, h2, h3, h4, h5, h6 { font-weight: 400; }31 32h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { font-size: inherit; }33 34h1:lang(ko), h2:lang(ko), h3:lang(ko) { word-break: keep-all; }35 36/** Links */37a { color: #2568ba; text-decoration: none; }38 39a:visited { color: #1d508f; }40 41a:hover { color: #111; text-decoration: underline; }42 43/** Blockquotes */44blockquote { color: #757575; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }45 46blockquote > :last-child { margin-bottom: 0; }47 48blockquote pre, blockquote code { color: #111; }49 50/** Rules */51hr { height: 4px; margin: 15px 0; border: 0; background-color: #e8e8e8; }52 53/** Code formatting */54pre, code { font-family: Monaco, Menlo, Consolas, "Courier New", DotumChe, monospace; font-size: 13px; border: 1px solid #e8e8e8; border-radius: 0; background-color: #f8f8f8; }55 56code { padding: 1px 5px; }57 58pre { padding: 8px 12px; overflow-x: auto; word-wrap: normal; }59 60pre > code { border: 0; padding-right: 0; padding-left: 0; }61 62/** Wrapper */63.wrapper { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }64 65@media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } }66 67/** Clearfix */68.pagination:after, .wrapper:after { content: ""; display: table; clear: both; }69 70/** Site header */71.site-header { min-height: 56px; position: relative; }72 73.site-title { font-size: 26px; font-weight: 300; line-height: 56px; letter-spacing: -1px; margin-bottom: 0; float: left; }74 75.site-title, .site-title:visited { color: #424242; }76 77.site-nav { float: right; line-height: 56px; }78 79.site-nav .page-link { color: #111; line-height: 1.5; }80 81.site-nav .page-link:not(:last-child) { margin-right: 20px; }82 83@media screen and (max-width: 600px) { .site-nav .page-link { padding: 20px 0; margin-left: 20px; } .site-nav .page-link:not(:last-child) { margin-right: 0; } }84 85/** Site footer */86.site-footer { padding: 30px 0; font-size: 15px; color: #757575; text-align: center; }87 88/** Page content */89.page-content { padding: 30px 0; }90 91.page-heading { font-size: 20px; }92 93.post-list { margin-left: 0; list-style: none; }94 95.post-list .post-link:hover { text-decoration: none; }96 97.post-list > li { margin-bottom: 60px; }98 99.post-list > li:not(:first-child) { border-top: 4px solid #e8e8e8; padding-top: 60px; }100 101.post-archives { margin-left: 0; list-style: none; }102 103.post-archives .post-link { font-size: 24px; }104 105.post-archives > li { margin-bottom: 30px; }106 107.post-meta { font-size: 14px; color: #757575; }108 109.post-link, .post-link:visited { color: #111; }110 111.post-link:hover { color: #2568ba; }112 113.post-continue a { padding: 8px 15px; text-decoration: none; }114 115.post-continue a, .post-continue a:visited { color: #424242; background-color: #e8e8e8; }116 117.post-continue a:hover { color: white; background-color: #2568ba; }118 119/** Posts */120.post-header { margin-bottom: 30px; }121 122.post-title { font-size: 42px; letter-spacing: -1px; line-height: 1; }123 124@media screen and (max-width: 800px) { .post-title { font-size: 36px; } }125 126.post-content { margin-bottom: 30px; }127 128.post-content h1 { font-size: 38px; }129 130@media screen and (max-width: 800px) { .post-content h1 { font-size: 34px; } }131 132.post-content h2 { font-size: 32px; }133 134@media screen and (max-width: 800px) { .post-content h2 { font-size: 28px; } }135 136.post-content h3 { font-size: 26px; }137 138@media screen and (max-width: 800px) { .post-content h3 { font-size: 22px; } }139 140.post-content h4 { font-size: 20px; }141 142@media screen and (max-width: 800px) { .post-content h4 { font-size: 18px; } }143 144/** Pagination */145.pagination { padding: 15px 0; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; text-align: center; }146 147.pagination a, .pagination a:visited { color: #757575; }148 149.pagination a:hover { color: #2568ba; }150 151.pagination .previous { float: left; }152 153.pagination .next { float: right; }154 155/** Syntax highlighting styles */156.highlight { background-color: #f8f8f8; }157 158.highlighter-rouge .highlight { background-color: #f8f8f8; }159 160.highlight .cm { color: #727262; font-style: italic; }161 162.highlight .cp { color: #727272; font-weight: bold; }163 164.highlight .c1 { color: #727262; font-style: italic; }165 166.highlight .cs { color: #727272; font-weight: bold; font-style: italic; }167 168.highlight .c, .highlight .cd { color: #727262; font-style: italic; }169 170.highlight .err { color: #a61717; background-color: #e3d2d2; }171 172.highlight .gd { color: #000; background-color: #fdd; }173 174.highlight .ge { color: #000; font-style: italic; }175 176.highlight .gr { color: #a00; }177 178.highlight .gh { color: #727272; }179 180.highlight .gi { color: #000; background-color: #dfd; }181 182.highlight .go { color: #727272; }183 184.highlight .gp { color: #555; }185 186.highlight .gs { font-weight: bold; }187 188.highlight .gu { color: #727272; }189 190.highlight .gt { color: #a00; }191 192.highlight .kc { color: #000; font-weight: bold; }193 194.highlight .kd { color: #000; font-weight: bold; }195 196.highlight .kn { color: #000; font-weight: bold; }197 198.highlight .kp { color: #000; font-weight: bold; }199 200.highlight .kr { color: #000; font-weight: bold; }201 202.highlight .kt { color: #458; font-weight: bold; }203 204.highlight .k, .highlight .kv { color: #000; font-weight: bold; }205 206.highlight .mf { color: #007f7f; }207 208.highlight .mh { color: #007f7f; }209 210.highlight .il { color: #007f7f; }211 212.highlight .mi { color: #007f7f; }213 214.highlight .mo { color: #007f7f; }215 216.highlight .m, .highlight .mb, .highlight .mx { color: #007f7f; }217 218.highlight .sb { color: #d14; }219 220.highlight .sc { color: #d14; }221 222.highlight .sd { color: #d14; }223 224.highlight .s2 { color: #d14; }225 226.highlight .se { color: #d14; }227 228.highlight .sh { color: #d14; }229 230.highlight .si { color: #d14; }231 232.highlight .sx { color: #d14; }233 234.highlight .sr { color: #008522; }235 236.highlight .s1 { color: #d14; }237 238.highlight .ss { color: #990073; }239 240.highlight .s { color: #d14; }241 242.highlight .na { color: #007f7f; }243 244.highlight .bp { color: #727272; }245 246.highlight .nb { color: #007aa3; }247 248.highlight .nc { color: #458; font-weight: bold; }249 250.highlight .no { color: #007f7f; }251 252.highlight .nd { color: #3c5d5d; font-weight: bold; }253 254.highlight .ni { color: #800080; }255 256.highlight .ne { color: #900; font-weight: bold; }257 258.highlight .nf { color: #900; font-weight: bold; }259 260.highlight .nl { color: #900; font-weight: bold; }261 262.highlight .nn { color: #555; }263 264.highlight .nt { color: #000080; }265 266.highlight .vc { color: #007f7f; }267 268.highlight .vg { color: #007f7f; }269 270.highlight .vi { color: #007f7f; }271 272.highlight .nv { color: #007f7f; }273 274.highlight .ow { color: #000; font-weight: bold; }275 276.highlight .o { color: #000; font-weight: bold; }277 278.highlight .w { color: #727272; }279 280/*# sourceMappingURL=main.css.map */281 282 283@font-face {284 font-family: 'Bitter';285 font-style: italic;286 font-weight: 400;287 font-display: swap;288 src: url(https://fonts.gstatic.com/s/bitter/v33/raxjHiqOu8IVPmn7epZnDMyKBvHf5D6c4Pz-X3B3.ttf) format('truetype');289}290@font-face {291 font-family: 'Bitter';292 font-style: normal;293 font-weight: 400;294 font-display: swap;295 src: url(https://fonts.gstatic.com/s/bitter/v33/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfOLjOWA.ttf) format('truetype');296}297@font-face {298 font-family: 'Bitter';299 font-style: normal;300 font-weight: 700;301 font-display: swap;302 src: url(https://fonts.gstatic.com/s/bitter/v33/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8RHYOLjOWA.ttf) format('truetype');303}304 </style>305 <meta charset="utf-8">306 <meta content="IE=edge" http-equiv="X-UA-Compatible">307 <meta content="width=device-width, initial-scale=1" name="viewport">308 <title>309 Community contributions for those who don't feel rockstarry enough yet310 </title>311 <meta content="Mark Stosberg kicks ass. Note only is he a driving force in CGI::Application, he’s also working on some scutwork in CGI.pm. He got privileges to the CGI.pm bug queue and has closed 100 of the 150 bugs in the queue. (He’s also done this for me with the WWW::Mechanize queue, too)" name="description">312 <meta content="Community contributions for those who don't feel rockstarry enough yet" property="og:title">313 <meta content="Perlbuzz" property="og:site_name">314 <meta content="" property="og:url">315 <meta content="Mark Stosberg kicks ass. Note only is he a driving force in CGI::Application, he’s also working on some scutwork in CGI.pm. He got privileges to the CGI.pm bug queue and has closed 100 of the 150 bugs in the queue. (He’s also done this for me with the WWW::Mechanize queue, too)" property="og:description">316 <meta content="summary" name="twitter:card">317 <meta content="perlbuzz" name="twitter:site">318 <meta content="Community contributions for those who don't feel rockstarry eno..." name="twitter:title">319 <meta content="Mark Stosberg kicks ass. Note only is he a driving force in CGI::Application, he’s also working on some scutwork in CGI.pm. He got privileges to the CGI.pm bug queue and has closed 100 of the 150 b..." name="twitter:description">320 <meta content="perlbuzz" name="twitter:creator">321 <!-- Global site tag (gtag.js) - Google Analytics -->322 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">323 </head>324 <body>325 <header class="site-header">326 <div class="wrapper">327 <a class="site-title">328 Perlbuzz329 </a>330 <nav class="site-nav">331 <a class="page-link">332 About333 </a>334 <a class="page-link">335 Feed336 </a>337 <a class="page-link">338 Archives339 </a>340 <a class="page-link">341 Categories342 </a>343 <a class="page-link">344 Tags345 </a>346 </nav>347 </div>348 </header>349 <main aria-label="Content" class="page-content">350 <div class="wrapper">351 <article class="post" itemscope itemtype="">352 <header class="post-header">353 <h1 class="post-title" itemprop="name headline">354 Community contributions for those who don't feel rockstarry enough yet355 </h1>356 <p class="post-meta">357 <time datetime="2009-08-15T15:49:02-05:00" itemprop="datePublished">358 Aug 15, 2009359 </time>360 •361 <span itemprop="author" itemscope itemtype="">362 <span itemprop="name">363 Andy Lester364 </span>365 </span>366 •367 <a>368 Community369 </a>370 ,371 <a>372 CPAN373 </a>374 </p>375 </header>376 <div class="post-content" itemprop="articleBody">377 <p>378 Mark Stosberg kicks ass. Note only is he a driving force in379CGI::Application, he’s also working on some scutwork in CGI.pm. He got380privileges to the CGI.pm bug queue and has381 <a>382 closed 100 of the 150 bugs in the queue383 </a>384 .385(He’s also done this for me with the WWW::Mechanize queue, too)386 </p>387 <p>388 Note that I didn’t say he389 <em>390 fixed391 </em>392 100 tickets, but that he393 <em>394 closed395 </em>396 100397tickets. As he notes:398 </p>399 <blockquote>400 <p>401 Many had already been addressed by Lincoln some time ago. Those were402simply closed.403 </p>404 </blockquote>405 <p>406 Although Mark Stosberg is a fine programmer in his own right, what he’s407been doing here requires no special skills, no megabrain rockstar code408chops. He’s doing project management and cleanup. It’s so simple, even409 <em>410 you411 </em>412 can do it.413 </p>414 <p>415 Yes, I’m talking to you out there, thinking “I’ve always wanted to get into416open source projects,” whether it’s to417 <a>418 improve your career419 </a>420 or just to help out. There are always ways you can pitch in that don’t421involve writing new code. I hope you’ll find some and join us.422 </p>423 </div>424 </article>425 </div>426 </main>427 <footer class="site-footer">428 <div class="wrapper">429 <p>430 © Andy Lester - Powered by431 <a>432 Jekyll433 </a>434 &435 <a>436 whiteglass437 </a>438 - Subscribe via439 <a>440 RSS441 </a>442 </p>443 </div>444 </footer>445 </body>446</html>447