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.7k
1<!DOCTYPE html>2<html lang="en-US">3 <head>4 <style>5 .highlight { background: #ffffff; }6.highlight .c { color: #999988; font-style: italic } /* Comment */7.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */8.highlight .k { font-weight: bold } /* Keyword */9.highlight .o { font-weight: bold } /* Operator */10.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */11.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */12.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */13.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */14.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */15.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */16.highlight .ge { font-style: italic } /* Generic.Emph */17.highlight .gr { color: #aa0000 } /* Generic.Error */18.highlight .gh { color: #999999 } /* Generic.Heading */19.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */20.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */21.highlight .go { color: #888888 } /* Generic.Output */22.highlight .gp { color: #555555 } /* Generic.Prompt */23.highlight .gs { font-weight: bold } /* Generic.Strong */24.highlight .gu { color: #aaaaaa } /* Generic.Subheading */25.highlight .gt { color: #aa0000 } /* Generic.Traceback */26.highlight .kc { font-weight: bold } /* Keyword.Constant */27.highlight .kd { font-weight: bold } /* Keyword.Declaration */28.highlight .kp { font-weight: bold } /* Keyword.Pseudo */29.highlight .kr { font-weight: bold } /* Keyword.Reserved */30.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */31.highlight .m { color: #009999 } /* Literal.Number */32.highlight .s { color: #d14 } /* Literal.String */33.highlight .na { color: #008080 } /* Name.Attribute */34.highlight .nb { color: #0086B3 } /* Name.Builtin */35.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */36.highlight .no { color: #008080 } /* Name.Constant */37.highlight .ni { color: #800080 } /* Name.Entity */38.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */39.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */40.highlight .nn { color: #555555 } /* Name.Namespace */41.highlight .nt { color: #000080 } /* Name.Tag */42.highlight .nv { color: #008080 } /* Name.Variable */43.highlight .ow { font-weight: bold } /* Operator.Word */44.highlight .w { color: #bbbbbb } /* Text.Whitespace */45.highlight .mf { color: #009999 } /* Literal.Number.Float */46.highlight .mh { color: #009999 } /* Literal.Number.Hex */47.highlight .mi { color: #009999 } /* Literal.Number.Integer */48.highlight .mo { color: #009999 } /* Literal.Number.Oct */49.highlight .sb { color: #d14 } /* Literal.String.Backtick */50.highlight .sc { color: #d14 } /* Literal.String.Char */51.highlight .sd { color: #d14 } /* Literal.String.Doc */52.highlight .s2 { color: #d14 } /* Literal.String.Double */53.highlight .se { color: #d14 } /* Literal.String.Escape */54.highlight .sh { color: #d14 } /* Literal.String.Heredoc */55.highlight .si { color: #d14 } /* Literal.String.Interpol */56.highlight .sx { color: #d14 } /* Literal.String.Other */57.highlight .sr { color: #009926 } /* Literal.String.Regex */58.highlight .s1 { color: #d14 } /* Literal.String.Single */59.highlight .ss { color: #990073 } /* Literal.String.Symbol */60.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */61.highlight .vc { color: #008080 } /* Name.Variable.Class */62.highlight .vg { color: #008080 } /* Name.Variable.Global */63.highlight .vi { color: #008080 } /* Name.Variable.Instance */64.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */65 66 67 68@font-face {69 font-family: "Ovo";70 src: url(../assets/Ovo-Regular.otf);71}72 73@font-face {74 font-family: "Quicksand";75 font-style: normal;76 src: url(../assets/Quicksand-Regular.otf);77}78 79@font-face {80 font-family: "Quicksand";81 font-style: normal;82 font-weight: 300;83 src: url(../assets/Quicksand-Light.otf);84}85 86@font-face {87 font-family: "Quicksand";88 font-style: italic;89 font-weight: 300;90 src: url(../assets/Quicksand-LightItalic.otf);91}92 93@font-face {94 font-family: "Crimson Text";95 font-style: normal;96 src: url(../assets/CrimsonText-Roman.ttf);97}98 99@font-face {100 font-family: "Crimson Text";101 font-style: italic;102 src: url(../assets/CrimsonText-Italic.ttf);103}104 105@font-face {106 font-family: "Source Code Pro";107 font-weight: normal;108 src: url(../assets/SourceCodePro-Regular.otf);109}110 111@font-face {112 font-family: "Source Code Pro";113 font-weight: bold;114 src: url(../assets/SourceCodePro-Semibold.otf);115}116 117@font-face {118 font-family: "Source Code Pro";119 font-weight: lighter;120 src: url(../assets/SourceCodePro-Light.otf);121}122 123:root {124 /* TODO color-scheme: light dark; */125 --font-face-header: "Ovo", "Palatino", "Georgia", sans-serif;126 --font-face-header-forced: "Ovo";127 --font-face-secondary: "Quicksand", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica-Light", "Helvetica Neue", Helvetica, Calibri, Arial, sans-serif;128 --font-face-secondary-forced: "Quicksand";129 --font-face-main: "Crimson Text", "Linden Hill", "Palatino", serif;130 --font-face-main-forced: "Crimson Text";131 --font-face-mono: "Source Code Pro", "Menlo", "Consolas", monospace;132 --font-face-mono-forced: "Source Code Pro";133 --background-color-main: hsl(165, 33%, 98%);134 --background-color-subtle: hsl(185, 10%, 97%);135 --background-color-inverse: hsl(185, 10%, 12%);136 --background-color-header: hsl(133, 15%, 82%);137 --text-color-main: hsl(185, 10%, 24%);138 --text-color-inverse: hsl(133, 15%, 82%);139 --text-color-secondary: hsl(173, 7%, 54%);140 --text-color-warn: hsl(28, 100%, 63%);141 --link-color-main: hsl(202, 85%, 29%);142 --link-color-main-active: hsl(208, 100%, 52%);143 --link-color-secondary: var(--text-color-secondary);144 --link-color-secondary-active: hsl(208, 50%, 52%);145}146 147.clearfix:before,148.clearfix:after {149 content: " ";150 display: table;151}152 153.clearfix:after {154 clear: both;155}156 157.clearfix {158 *zoom: 1;159}160 161html,162button,163input,164select,165textarea,166body,167h1 a:link, h1 a:visited, header h1 a:hover, header h1 a:active {168 color: var(--text-color-main);169}170 171a { /* inspired by inessential.com */172 transition: all 0.2s ease-in-out;173}174 175a:link, a:visited { color: var(--link-color-main); }176a:hover, a:active, h1 a:hover, h1 a:active { color: var(--link-color-main-active); }177 178body {179 margin: 0;180 font-size: 14pt;181 line-height: 1.3;182 font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, Calibri, Arial, sans-serif;183 background-color: var(--background-color-main);184}185 186h1, h2, h3, header .caption, article .figure {187 font-family: var(--font-face-secondary);188 font-weight: 300;189 letter-spacing: -0.075em;190 margin-bottom: 0.5em;191 text-rendering: optimizelegibility;192}193 194time {195 color: var(--text-color-secondary);196 font-family: var(--font-face-secondary);197 font-weight: 500;198 font-size: 12pt;199 letter-spacing: -1.5pt;200 text-transform: uppercase;201 text-rendering: optimizelegibility;202}203 204h1 {205 font-size: 1.75em;206 margin: 0.75em 0;207}208 209h1.with-time {210 margin-bottom: 0;211}212 213h1.with-time + time {214 display: block;215 margin-bottom: 1em; /* match the 0.5em margin of h1 without time */216}217 218h1.with-time + time a:any-link {219 color: var(--text-color-secondary);220}221 222p, blockquote, li, dt, dd, summary, details footer {223 font: 15pt/22pt var(--font-face-main);224 -webkit-hyphens: auto;225 hyphens: auto;226}227 228code, kbd, pre, samp {229 font-family: var(--font-face-mono);230 font-size: 11pt;231 -webkit-hyphens: none;232 hyphens: none;233}234 235.nohyphen {236 -webkit-hyphens: none;237 hyphens: none;238}239 240pre {241 line-height: 17pt;242 background-color: #f0f0f0;243 border-color: #cccccc;244 border-style: solid;245 border-width: 0 0 0 6px;246 border-top-right-radius: 5px;247 border-bottom-right-radius: 5px;248 padding: 3px 6px;249}250 251h1 code, h2 code, h3 code {252 font-family: var(--font-face-mono);253 font-size: inherit;254 line-height: inherit;255 font-weight: lighter;256}257 258.highlighter-rouge > div.highlight > pre.highlight {259 /*background-color: transparent;*/260 border-width: 1px 1px 1px 6px;261}262 263header {264 width: 100%;265 margin: 0;266 padding: 1.5em 0;267 background-color: var(--background-color-header);268}269 270header h1 {271 width: 100%;272 text-align: center;273 margin: 0.5em 0 0.2em 0;274 font-family: var(--font-face-header);275 font-weight: normal;276 letter-spacing: 1pt;277}278 279h1 a {280 text-decoration: none;281}282 283header .caption {284 text-align: center;285 font-size: 13pt;286 line-height: 19pt;287 margin: 0;288}289 290main {291 margin: 0 auto;292 padding: 1.5em 10px;293 min-width: 300px;294 max-width: 600px;295}296 297body > footer {298 margin: 1.5em 0 0.5em 0;299 text-align: center;300 color: var(--text-color-secondary);301}302 303body > footer a:link, body > footer a:visited {304 color: var(--link-color-secondary);305}306 307body > footer a:hover, body > footer a:active {308 color: var(--link-color-secondary-active);309}310 311body > footer p {312 font-family: var(--font-face-secondary);313 font-weight: 400;314 font-size: 12pt;315 line-height: 18pt;316 -webkit-hyphens: none;317 hyphens: none;318 /* letter-spacing: -1pt; */319}320 321.latest h3 {322 margin-bottom: 0.3em;323}324 325.latest h3 a {326 text-decoration: none;327}328 329.latest .excerpt {330 margin-top: 0;331}332 333.more {334 font-style: italic;335}336 337.more:after {338 content: " »";339}340 341body.home h2 {342 text-align: center;343 text-transform: uppercase;344 letter-spacing: 0.05em;345}346body.home h2:after {347 content: " —";348}349body.home h2:before {350 content: "— ";351}352 353article footer {354 margin-top: 1.25em;355 color: var(--text-color-secondary);356}357 358article footer li, details footer {359 font-size: 12pt;360 line-height: 18pt;361}362 363/* footnote back-links */364a.back:link, a.back:visited, a.back:hover, a.back:active {365 color: var(--link-color-secondary);366 font-size: 10pt;367 text-decoration: none;368}369 370a.back:hover, a.back:active {371 color: var(--link-color-secondary-active);372}373 374/* navigation between related posts */375a.continue {376 font-style: italic;377}378a.continue::after {379 content: " ☞";380}381 382sup a {383 padding-left: 1pt;384 padding-right: 1pt;385 font-size: 9pt;386}387 388nav ul, section.archive ol {389 list-style: none;390 padding: 0;391}392 393/* fin */394section.archive h2:last-child {395 text-transform: lowercase;396 font-style: italic;397}398 399.archive li {400 margin: 14pt 0;401 padding-left: 90pt;402 padding-right: 8pt; /* visually balance the perceived indent of <time>s */403 line-height: 16pt;404 -webkit-hyphens: none;405 hyphens: none;406}407 408.archive time {409 display: inline-block;410 width: 67pt;411 margin-left: -85pt;412 margin-right: 15pt;413 text-align: right;414}415 416.archive a {417 -webkit-hyphens: none;418 hyphens: none;419}420 421nav.links ul {422 text-align: center;423 padding: 0;424}425nav.links li {426 display: inline-block;427 padding: 0;428 margin: 0;429}430nav.links li + li:before {431 content: " • ";432}433 434.cc-notice {435 display: block;436 text-align: center;437}438.cc-notice a {439 display: inline-block;440 background-image: url(../assets/cc.svg);441 background-repeat: no-repeat;442 background-position: left center;443 background-size: 1em 1em;444 padding-left: 1.5em;445 min-height: 1em;446}447 448article .figure {449 max-width: 570px;450 margin: 1em auto;451 font-size: 85%;452 font-style: italic;453 text-align: center;454}455 456article .figure > a:first-child {457 display: block;458 text-align: center;459 text-decoration: none;460}461 462article .figure img {463 border-style: none;464 max-width: 570px;465}466 467p.triforce {468 padding-left: 20px;469 background-size: 20px 18px;470 min-height: 18px;471 background-image: image-set(url(../assets/triforce-glyph-dark-20.png) 1x, url(../assets/triforce-glyph-dark-40.png) 2x);472 background-position: left center;473 background-repeat: no-repeat;474}475 476p.triforce span {477 display: none;478}479 480@media only screen and (max-width: 500px) {481 header {482 padding: 0.5em 0;483 }484 h1 {485 font-size: 1.5em;486 }487 main {488 padding-top: 0.5em;489 padding-bottom: 0.5em;490 }491 492 time {493 font-size: 11pt;494 letter-spacing: -1.25pt;495 }496 497 .archive li {498 padding-left: 70pt;499 padding-right: 4pt;500 }501 502 .archive time {503 width: 65pt;504 margin-left: -70pt;505 margin-right: 1pt;506 }507 508 article .figure {509 max-width: 95%;510 }511 512 article .figure img {513 max-width: 100%;514 }515}516 517.editorial-note {518 padding: 4pt;519 border-radius: 4pt;520 background-color: var(--background-color-subtle);521 font-style: italic;522}523 524.editorial-note::before {525 content: "❖ ";526 font-style: normal;527}528 529blockquote cite {530 display: block;531 font-style: italic;532 text-align: right;533}534 535blockquote cite:before {536 content: "–";537}538 539blockquote.warn {540 margin-left: 0.25em;541 margin-right: 0.5em;542 padding: 0.25em 0.25em 0.25em 0.5em;543 border: 1px solid var(--text-color-warn);544 border-left-width: 0.25em;545 border-radius: 0.5em;546 font: 13pt/19pt var(--font-face-secondary);547 letter-spacing: -0.05em;548 background-color: var(--background-color-subtle);549}550 551.post-modified {552 font-style: italic;553 font-size: 13pt;554 line-height: 18pt;555 margin-top: 2em;556}557 558.discuss {559 margin-top: 2.5em;560 font-family: var(--font-face-secondary);561 font-weight: 400;562 font-size: 12pt;563 letter-spacing: -1pt;564}565 566.discuss iframe {567 display: inline-block;568 margin-bottom: -5px;569 margin-left: 0.25em;570}571 572dt {573 font-weight: normal;574 float: left;575 clear: both;576 width: 8em;577 text-align: right;578}579dd {580 float: left;581 margin-left: 1.33em;582 text-align: left;583}584dd + dd {585 clear: left;586 margin-left: 9.33em;587}588dd:last-child {589 margin-bottom: 1em;590}591dl + * {592 clear: both;593}594.color-samples dt, .color-samples dd {595 line-height: 24pt;596 padding-top: 2pt;597}598.color-sample {599 display: inline-block;600 width: 37pt;601 height: 22pt;602 padding: 0;603 margin: 0 1em 0 0;604}605.color-sample.bordered {606 width: 36pt;607 height: 20pt;608 border: 1pt solid #ccc;609}610.color-value {611 color: var(--text-color-secondary);612}613 614@media only screen and (max-width: 400px) {615 dt {616 width: auto;617 text-align: left;618 float: none;619 }620 621 dd, dd + dd {622 margin-left: 1em;623 float: none;624 }625}626 627#color-sample-text-color-main .color-sample {628 background-color: var(--text-color-main);629}630 631#color-sample-link-color-main .color-sample {632 background-color: var(--link-color-main);633}634 635#color-sample-link-color-main-active .color-sample {636 background-color: var(--link-color-main-active);637}638 639#color-sample-text-color-secondary .color-sample {640 background-color: var(--text-color-secondary);641}642 643#color-sample-link-color-secondary-active .color-sample {644 background-color: var(--link-color-secondary-active);645}646 647#color-sample-background-color-main .color-sample {648 background-color: var(--background-color-main);649}650 651#color-sample-background-color-header .color-sample {652 background-color: var(--background-color-header);653}654 655#font-sample-font-face-header {656 font-family: var(--font-face-header-forced);657 font-weight: normal;658}659 660#font-sample-font-face-secondary {661 font-family: var(--font-face-secondary-forced);662 font-weight: 300; letter-spacing: -0.075em;663}664 665#font-sample-font-face-main {666 font-family: var(--font-face-main-forced);667 font-weight: normal;668}669 670#font-sample-font-face-mono {671 font-family: var(--font-face-mono-forced);672 font-weight: normal;673}674 675.instagram-media {676 width:79.375% ! important;677 width:calc(80% - 2px) ! important;678 margin: 1px auto ! important;679}680 </style>681 <meta charset="utf-8">682 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">683 <meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport">684 <meta content="A problem lately: I start running, and within five minutes or so, I start thinking about a title or description for my online training log. I should be payin..." name="description">685 <meta content="Meta-Running?" property="og:title">686 <meta content="article" property="og:type">687 <meta content="2015-03-16" property="og:article:published_time">688 <title>689 Meta-Running?690 </title>691 </head>692 <body class="">693 <header>694 <h1>695 <a>696 Running|Code697 </a>698 </h1>699 <p class="caption">700 About software and adventures on foot.701 </p>702 </header>703 <main>704 <article>705 <h1 class="with-time">706 Meta-Running?707 </h1>708 <time class="permalink" datetime="2015-03-16T00:00:00+00:00">709 <a title="Permalink to Meta-Running?">710 16 Mar 2015711 </a>712 </time>713 <p>714 A problem lately: I start running, and within five minutes or so, I start thinking about a title or description for my715 <a>716 online training log717 </a>718 .719 </p>720 <p>721 Take today’s run, for example.722 <a>723 Strava entry724 </a>725 about this in my head.726 </p>727 <p>728 This is a bit of a problem, for me and I think a lot of other people (there is a steady stream of running-selfies out there, for one measure). Sometimes we are too connected; we quantify our runs until we neglect to feel the ground with each step, and we objectify our performance until we no longer feel our lungs fill with each breath.729 </p>730 <p>731 Short of investing time in learning to meditate or throwing out all training technology (which really is useful), the only two solutions I know of are to run longer and work harder. Working hard or being out a long time, you will eventually get into a zone in which you are present to the reality of the run.732 </p>733 <p>734 Maybe blogging about it will help.735 </p>736 <!--737-->738 </article>739 </main>740 <footer>741 <nav class="links">742 <ul>743 <li>744 <a>745 My Apps746 </a>747 </li>748 <li>749 <a rel="me">750 Contact751 </a>752 </li>753 <li>754 <a>755 RSS756 </a>757 </li>758 </ul>759 </nav>760 <p class="cc-notice">761 <a>762 2023763 </a>764 </p>765 </footer>766 <!-- generated by Jekyll 2023-08-23 02:24:51 +0000 -->767 </body>768</html>769