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>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/* A modified default Jekyll theme69/*70/* Improvements include:71/*72/* 1. Responsive Template: Added media-queries so that it works well73/* on a wide-range of screens.74/*75/* (Slightly modified further by Kevin Purdy (github.com/kevinpurdy), mostly with custom needs and Typeplate tweaks)76 77The MIT License (MIT)78 79Copyright (c) 2013 Kashyap80 81Permission is hereby granted, free of charge, to any person obtaining a copy82of this software and associated documentation files (the "Software"), to deal83in the Software without restriction, including without limitation the rights84to use, copy, modify, merge, publish, distribute, sublicense, and/or sell85copies of the Software, and to permit persons to whom the Software is86furnished to do so, subject to the following conditions:87 88The above copyright notice and this permission notice shall be included in89all copies or substantial portions of the Software.90 91THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR92IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,93FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE94AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER95LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,96OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN97THE SOFTWARE.98 99 100/*****************************************************************************/101/*102/* Common103/*104/*****************************************************************************/105 106/* Global Reset */107* {108 margin: 0;109 padding: 0;110}111 112html, body { height: 100%; }113 114body {115 background-color: #fcfcfc;116 font-size: 120%;117 font-family: 'Merriweather', Georgia, serif;118 font-weight: 400;119 line-height: 1.6;120 padding: 0 2em;121 text-rendering: optimizeLegibility;122 -webkit-hyphens: auto;123 -moz-hyphens: auto;124 -ms-hyphens: auto;125 -o-hyphens: auto;126 hyphens: auto;127 word-wrap: break-word;128 color: #38313b;129}130 131h1, h2, h3, h4, h5, h6 {132 color: #38313b;133 font-family: 'Oswald', 'Helvetica Neue', sans-serif;134 font-weight: 400;135 text-transform: uppercase;136 text-rendering: optimizeLegibility;137}138 139h1 {140 font-size: 300%;141 margin-top: 1em;142 margin-bottom: 0.5em;143 line-height: 1.6em;144}145 146h2 {147 font-size: 200%;148 margin-top: 1em;149 margin-bottom: 0.5em;150 line-height: 1.6em;151}152 153h3 {154 font-size: 150%;155 margin-top: 2.0em;156 margin-bottom: 0.5em;157 line-height: 1.6em;158}159 160p { margin-bottom: 1.5em;}161 162a { color: #0058a1; }163a:hover { color: #1b202e; }164a:visited { color: #5b2b61; }165 166 167blockquote {168 padding: 0.1em 1.3em;169 background: #fafafa;170 border-left: 5px #81E26D solid;171 color: #666;172}173 174hr {175 color: #8f9a9c;176 background-color: #8f9a9c;177 margin-top: 2em;178 margin-bottom: 2em;179}180 181ul {182 list-style-position: inside;183}184 185li {186 margin-bottom: 0.6em;187}188 189li p {190 display: inline;191}192 193/*****************************************************************************/194/*195/* Site196/*197/*****************************************************************************/198 199.site {200 margin: auto;201 max-width: 33.875em;202 padding: 0 1em;203# color: #111;204}205 206.site img.left {207 max-width: 50%;208 float: left;209 margin-right: 30px;210}211 212.site img.right {213 max-width: 50%;214 float: right;215 margin-left: 30px;216}217 218div.header {219 margin-bottom: 2em;220 word-wrap: normal;221# display: inline-table;222}223 224.site .header a {225 font-weight: bold;226 text-decoration: none;227 font-family: 'Oswald', 'Helvetica Neue', sans-serif;228 text-transform: uppercase;229}230 231.site .header h1.title {232# display: inline-block;233 font-size: 300%;234}235 236.site .header h1.title a {237 color: #f05a35;238 font-weight: 400;239 text-transform: uppercase;240}241 242.site .header h1.title a:hover {243 color: #000;244}245 246.site .header a.extra {247 color: #686169;248 margin-left: 1em;249 font-weight: 400;250 font-size: 110%;251}252 253.site .header a.extra_first {254 color: #686169;255 margin-left: 0em;256 font-weight: 400;257 font-size: 110%;258}259 260.site .header a.extra:hover {261 color: #000;262}263 264.site .meta {265 color: #8f9a9c;266}267 268.site .footer {269 font-size: 80%;270 color: #655f66;271 border-top: 4px solid #8f9a9c;272 margin-top: 2em;273 overflow: hidden;274 word-wrap: normal;275}276 277.site .footer .contact {278 float: left;279 margin-right: 3em;280 margin-top: 2em;281}282 283.site .footer .contact a {284 color: #8085C1;285}286 287.site .footer .rss {288 margin-top: 1.1em;289 margin-right: -.2em;290 float: right;291}292 293.site .footer .rss img {294 border: 0;295}296 297pre {298 font-family: Consolas, "Inconsolata", "Courier New", monospace;299 overflow: auto;300 margin: 1em auto;301}302 303code {304 font-family: Consolas, "Inconsolata", "Courier New", monospace;305 font-size: 110%;306}307 308/*****************************************************************************/309/*310/* Home311/*312/*****************************************************************************/313ul.posts {314 list-style-type: none;315 margin-bottom: 2em;316}317 318ul.posts li {319 line-height: 1.75em;320 margin-bottom: 1em;321}322 323ul.posts span {324 color: #616678;325 font-family: 'Merriweather', serif;326 font-size: 80%;327 display: list-item;328}329 330div.posts {331 list-style-type: none;332 margin-bottom: 2em;333}334 335div.posts span {336 color: #616678;337 font-family: 'Merriweather', serif;338 font-size: 80%;339 line-height: 1.75em;340}341 342div.posts img {343 max-width:50%;344 margin: 10px;345}346 347div.posts p {348 margin: 0;349}350 351div.tweet {352 border: 1px solid;353 border-radius: 10px;354}355 356/*****************************************************************************/357/*358/* Posts359/*360/*****************************************************************************/361 362/* standard */363.post pre {364 border: 1px solid #ddd;365 background-color: #eef;366 line-height: 1em;367 padding: 0.2em 0.5em;368}369 370.post img {371 max-width: 100%;372}373 374.post ul, .post ol {375 margin-left: 1.35em;376}377 378.post code {379 border: 1px solid #ddd;380 background-color: #eef;381 font-size: 110%;382 383}384 385.post pre code {386 border: none;387}388 389/* terminal */390.post pre.terminal {391 border: 1px solid #000;392 background-color: #333;393 color: #FFF;394}395 396.post pre.terminal code {397 background-color: #333;398}399 400.post {401 text-align: justify;402}403 404.post img {405 max-width: 100%;406 display: block;407 margin-left: auto;408 margin-right: auto;409 margin-bottom: 1.5em;410}411 412 413/* Read/subscribe buttons/links */414 415/*416div.meta {417 margin-bottom: 1.5em;418 color: #8f9a9c;419 vertical-align: text-bottom;420}421 422div.meta a {423 text-decoration: none;424}425*/426 427div.addthis_default_style {428 margin-bottom: 1.5em;429}430 431/************************************************************************/432/* Media Queries433/*434/************************************************************************/435 436 437 438 439@media screen and (max-width: 1000px) {440 body {441 font-size: 110%;442 padding: 0 4em;443 }444 .post code {445 font-size: 80%;446 }447}448 449@media screen and (max-width: 800px) {450 body {451 font-size: 100%;452 padding: 0 1.5em;453 }454}455 456 457@media screen and (max-width: 500px) {458 body {459 font-size: 100%;460 padding: 0 0.5em;461 }462 463 .footer {464 text-align: center;465 padding: 1em;466 }467 468 .contact {469 width: 100%;470 }471}472 473@media screen and (max-width: 320px) {474 body {475 font-size: 100%;476 padding: 0;477 }478}479 480 481 482/********************************************************************/483/* Additions from TypePlate:484 * URL ............ http://typeplate.com485 * VERSION ........ 1.1.1486 * Github ......... https://github.com/typeplate/typeplate.github.io487 * AUTHORS ........ Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)488 * LICENSE ........ Creative Commmons Attribution 3.0489 * LICENSE URL .... http://creativecommons.org/licenses/by/3.0490/********************************************************************/491 492 493/**494 *495 * =======================================================================496 Hyphens497 * =======================================================================498 */499 500abbr,501acronym,502blockquote,503code,504dir,505kbd,506listing,507plaintext,508q,509samp,510tt,511var,512xmp {513 /* Accepted values: [ none | manual | auto ] */ /* http://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation */514 -webkit-hyphens: none; /* Safari 5.1 thru 6, iOS 4.2 thru 6 */515 -moz-hyphens: none; /* Firefox 16 thru 20 */516 -ms-hyphens: none; /* IE10 */517 -o-hyphens: none; /* PRESTO...haha LOL */518 hyphens: none; /* W3C standard */519}520 521/**522 *523 * =======================================================================524 Pull Quotes525 * =======================================================================526 */527 528/**529 * Pull Quotes Markup530 *531 <aside class="pull-quote">532 <blockquote>533 <p></p>534 </blockquote>535 </aside>536 *537 * Extend this object into your custom stylesheet.538 *539 */540 541.pull-quote {542 position: relative;543 padding: 1em;544}545.pull-quote:before,546.pull-quote:after {547 height: 1em;548 opacity: 0.15;549 position: absolute;550 font-size: 4em;551 color: #dc976e;552}553.pull-quote:before {554 content: '“';555 top: 0;556 left: 0;557}558.pull-quote:after {559 content: '”';560 bottom: 0;561 right: 0;562}563 564/**565 *566 * =======================================================================567 Unicode Ampersand568 * =======================================================================569 */570 571@font-face {572 font-family: "Ampersand";573 src: local("Georgia"), local("Garamond"), local("Palatino"), local("Book Antiqua");574 unicode-range: U+0026;575}576 577@font-face {578 font-family: "Ampersand";579 src: local("Georgia");580 unicode-range: U+270C;581}582 583 584 585@font-face {586 font-family: 'Oswald';587 font-style: normal;588 font-weight: 400;589 src: url(https://fonts.gstatic.com/s/oswald/v53/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiYA.ttf) format('truetype');590}591 592 593 594@font-face {595 font-family: 'Merriweather';596 font-style: normal;597 font-weight: 400;598 src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZJ.ttf) format('truetype');599}600 </style>601 <meta charset="utf-8">602 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">603 <title>604 Excitery at the Ubuntu Farm605 </title>606 <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">607 <meta content="Kevin Purdy, the writer who lives in Washington, D.C." name="description">608 <!-- syntax highlighting CSS -->609 <!-- Custom CSS -->610 <!-- Typeplate CSS - modified -->611 <!-- Google Fonts -->612 <!-- RSS Feed -->613 </head>614 <body>615 <div class="site">616 <div class="header">617 <h1 class="title">618 <a>619 [NAME REDACTED]620 </a>621 </h1>622 <a class="extra_first">623 home624 </a>625 <a class="extra">626 work627 </a>628 <a class="extra">629 bio630 </a>631 <a class="extra">632 contact633 </a>634 </div>635 <h2>636 Excitery at the Ubuntu Farm637 </h2>638 <p class="meta">639 16 Oct 2007640 </p>641 <!-- Go to www.addthis.com/dashboard to customize your tools -->642 <div class="addthis_inline_share_toolbox">643 </div>644 <div class="post">645 <p>646 <img alt="purdman_ubuntu_crop" src="rick.jpg">647 <em>648 Colors I can never wear, but love to have on my desktop649 </em>650 </p>651 <p>652 Over at Lifehacker, I took653 <a>654 a screenshot tour655 </a>656 through installing the latest release from Ubuntu, 7.10, or “Gutsy Gibbon,” as it’s code-named. I plan to offer a few more comments here on what’s still missing from the most popular/buzz-worthy Linux distribution, but overall, I’m pretty satisfied.657 </p>658 <p>659 The official release drops Thursday, and anybody can try out the system without touching a thing on their computer by downloading a “Live CD” at660 <a>661 Ubuntu.com662 </a>663 . Pop the CD in your drive, restart your computer and see what works, what doesn’t, and why Digg is always664 <a>665 yakkin’ about the ‘buntu666 </a>667 .668 </p>669 <p>670 It might not generate the same kind of heat as the next OS X release, but for open source fans, it’s a twice-a-year scene, and it totally freaks us out.671 </p>672 <p>673 <img alt="Ubuntu 7.10 - Coming soon" height="164" id="countdownimage" src="rick.jpg" width="199">674 </p>675 </div>676 <!-- Go to www.addthis.com/dashboard to customize your tools -->677 <div class="addthis_inline_share_toolbox">678 </div>679 <!-- SubToMe button -->680 <div style="margin-bottom: 1.5em;">681 <input onclick="(function(){var z=document.createElement('script');z.src='https://www.subtome.com/load.js';document.body.appendChild(z);})()" type="button" value="Subscribe">682 </div>683 <div class="footer">684 <div class="contact">685 <p>686 [NAME REDACTED]687 <br>688 </p>689 </div>690 <div class="contact">691 <p>692 <a>693 @[NAME REDACTED]694 </a>695 <br>696 <a>697 github.com/[NAME REDACTED]698 </a>699 <br>700 </p>701 </div>702 </div>703 </div>704 <!-- Go to www.addthis.com/dashboard to customize your tools -->705 </body>706</html>707