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 html, body { padding: 0 }6 7html {8 margin: 0;9 background-color: #181818;10}11 12body {13 min-width: 320px;14 max-width: 58em;15 position: relative;16 margin: auto;17 color: #ddd;18 line-height: 1.7;19 letter-spacing: 0.06em;20 font: 13px "DejaVu Sans", "Bitstream Vera Sans", "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;21}22 23@media (min-width: 560px) {24 html { padding: 0 22px }25 body { margin: 22px auto; font-size: 14px; line-height: 1.7 }26}27 28@media (min-width: 714px) {29 html { padding: 0 44px }30 body { margin: 44px auto }31}32 33p {34 text-align: inherit; /* justify, once hyphenation is a given? */35 -webkit-hyphens: auto;36 -moz-hyphens: auto;37 -ms-hyphens: auto;38 -o-hyphens: auto;39 hyphens: auto;40 padding: 0.5em 0;41 margin: 0.3em 0;42}43 44hr { border: 0; border-top: 1px solid #ccc; margin: 1em 0 }45 46abbr { letter-spacing: 0.15em }47abbr[title] { border-bottom: 1px dashed #666 }48 49dt {50 font-weight: bold;51}52dd {53 padding: 0 0 0.6em;54}55 56ul {57 list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAJCAQAAABUUf4oAAAAI0lEQVR4AWMAgf///zcwgAGUCxZAcGECCC5CAMbBrhfCIQwAlb8qWtY9uDsAAAAASUVORK5CYII=);58 padding: 0;59 margin: 0.5em 0 1em;60}61ul > li {62 padding: 0 0 0 0.15em;63 margin: 0.15em 0 0.15em 1.2em;64}65 66table {67 width: 100%;68 margin: 1em 0 1.5em;69 border-collapse: collapse;70 border-spacing: 0;71 border: 1px solid #666;72}73th[colspan] {74 text-align: center;75}76td, th {77 padding: 0.1em 0.9em;78 border: 1px solid #666;79}80 81table.rows td {82 border-width: 1px 0;83}84table.rows th {85 border-width: 1px 0 3px;86 border-bottom-style: double;87}88 89table.cols td,90table.cols th {91 border-width: 0 1px;92}93 94cite {95 font-style: italic;96}97 98blockquote, pre {99 background-color: #222;100 border: 1px solid #444;101 margin: 0;102 padding: 0 0.5em;103}104blockquote {105 color: #bbb;106}107pre {108 clear: both;109 line-height: 1.3;110 padding-top: 0.5em;111 padding-bottom: 0.5em;112 overflow-x: scroll;113}114blockquote blockquote {115 padding: 0 1em;116}117blockquote pre {118 padding: 0.5em 0;119 border: 0;120 margin: 0;121}122blockquote > p:first-child {123 margin-top: 0;124}125blockquote > p {126 margin-bottom: 0;127}128q {129 quotes: '\201C' '\201D' '\2018' '\2019';130}131 132div.body > blockquote,133div.body > pre,134div.body > ins > blockquote,135div.body > ins > pre,136div.body > pre > samp,137div.body > ins > pre > samp {138 padding-left: 2em;139 padding-right: 2em;140 margin-left: -2em;141 margin-right: -2em;142}143div.body > ul > li > blockquote,144div.body > ul > li > pre,145div.body > ol > li > blockquote,146div.body > ol > li > pre,147div.body > ul > li > pre > samp,148div.body > ol > li > pre > samp {149 padding-left: 4.8em;150 padding-right: 2em;151 margin-left: -4.8em;152 margin-right: -2em;153}154 155div.body > blockquote,156div.body > pre,157div.body > ins > blockquote,158div.body > ins > pre,159div.body > ul > li > blockquote,160div.body > ul > li > pre,161div.body > ol > li > blockquote,162div.body > ol > li > pre {163 border-width: 1px 0;164}165 166div.body > blockquote:first-child,167div.body > pre:first-child,168div.body > ins > blockquote:first-child,169div.body > ins > pre:first-child {170 margin-top: 2em;171}172 173blockquote + blockquote,174blockquote + pre,175pre + blockquote,176pre + pre {177 margin-top: 1.125em;178}179 180h1 { font-size: 2.20em; }181h2 { font-size: 1.90em; }182h3 { font-size: 1.55em; }183h4 { font-size: 1.30em; }184h5 { font-size: 1.10em; }185h6 { font-size: 1.00em; }186h1, h2, h3, h4, h5, h6 {187 color: #eee;188 line-height: 1.2;189 letter-spacing: 0.07em;190 margin-bottom: 0;191 text-align: left;192 font-family: Georgia, "Hoefler Text", "DejaVu Serif", "Bistream Vera Serif", "Lucida Bright", serif;193 font-weight: normal;194}195 196pre, code, var {197 font-family: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Andale Mono", monospace;198 word-spacing: 0;199}200var, code {201 padding: 0 2px;202 margin: 0;203 background-color: #242424;204 font-style: inherit;205 letter-spacing: 0;206 white-space: pre;207 -webkit-hyphens: none;208 -moz-hyphens: none;209 -ms-hyphens: none;210 -o-hyphens: none;211 hyphens: none;212}213kbd {214 padding: 0 0.3em;215 border: 1px solid #999;216}217pre > code {218 padding: 0;219 margin: 0;220 background: transparent;221}222pre > samp {223 color: #fff;224 background-color: #000;225 display: block;226 margin: -0.5em;227 padding: 0.5em;228}229 230img {231 padding: 0;232 border: 0;233 margin: 0;234 max-width: 100%;235 height: auto;236}237 238a {239 text-decoration: none;240 padding: 5px 0.2em 2px 0.2em;241 margin: -5px -0.2em -2px -0.2em;242 box-decoration-break: clone; -webkit-box-decoration-break: clone;243}244a:link {245 color: #fff;246 background: transparent;247 border-bottom: 1px solid #999;248}249a:visited {250 color: #ddd;251 background: transparent;252 border-bottom: 1px solid #666;253}254a:focus,255a:hover {256 text-decoration: none;257 color: #fff;258 background: #444;259 border-bottom: 2px solid #444; /* should be 1px but that looks jumpy for some reason */260}261a:active {262 color: #fff;263 background: transparent;264 border-bottom: 1px solid #999;265}266 267a[id],268a[name] {269 padding: 0;270 margin: 0;271}272 273body > del,274div > del,275li > del {276 text-decoration: line-through;277 display: block;278}279 280body > ins,281div > ins,282li > ins {283 display: block;284 text-decoration: none;285 padding: 0 2em;286 margin: 0.5em -2em;287 background-color: #191919;288 border: 1px dotted #777;289 border-width: 1px 0;290}291 292div.body {293 word-spacing: -0.05em;294}295.drop-cap:first-letter,296div.body > p:first-child:first-letter {297 font-family: Georgia, "Hoefler Text", "DejaVu Serif", "Bistream Vera Serif", "Lucida Bright", serif;298 font-size: 3.6em;299 font-style: normal;300 font-weight: normal;301 color: #cecece;302 float: left;303 padding: 0.155em 0 0;304 letter-spacing: 0.13em;305 line-height: 0.64;306}307div.body > p:first-child + p {308 clear: left;309}310div.body > ul,311div.body > ol {312 clear: left;313}314div.body h1,315div.body h2,316div.body h3,317div.body h4,318div.body h5,319div.body h6 {320 word-spacing: 0;321}322div.body > p:first-child + blockquote,323div.body > p:first-child + pre {324 margin-top: -0.325em;325}326div.body > p:first-child + blockquote:before {327 content: "\A";328 width: .8em;329 height: 1em;330 float: left;331}332 333.blocklink {334 clear: both;335 margin: auto;336 display: table;337}338.blocklink > a {339 text-align: center;340 display: table-cell;341 padding: 2px 2px 0.5em;342 border: 1px solid #333;343}344.blocklink > a:focus,345.blocklink > a:hover {346 border-color: #444;347}348 349.attention {350 color: #fff;351 background-color: #393939;352 padding: 0.5em 2em 0.5em 12em;353 border: 1px solid #666;354 margin: 0 -2em;355 text-align: justify;356}357.attention .pull-out {358 color: #aaa;359 font-size: 3em;360 padding: 0 0.25em 0 0;361 line-height: 1.1;362 font-family: Georgia, "Hoefler Text", "DejaVu Serif", "Bistream Vera Serif", "Lucida Bright", serif;363 font-weight: normal;364 float: left;365}366.attention > q:first-child {367 display: inline-block;368 text-indent: -.36em;369}370 371.mail {372 font-family: "Bitstream Vera Sans Mono", "Andale Mono", monospace;373 font-style: inherit;374}375 376.smiley {377 font-size: 1.2em;378 line-height: 1;379 color: #ff0;380}381 382.via,383.backlinks {384 font-size: 0.9em;385 font-style: italic;386}387 388ol.conversation { display: table }389ol.conversation > li { display: table-row }390ol.conversation > li > span,391ol.conversation > li > q { display: table-cell }392ol.conversation,393ol.conversation > li { list-style: none; margin: 0; padding: 0; }394ol.conversation > li > span { text-align: right }395ol.conversation > li > q { font-style: inherit; quotes: '' ''; padding-left: 1em }396 397#meta {398 float: left;399}400#meta a,401#meta abbr {402 border: 0;403}404 405#weblog .body + .title {406 margin-top: 1.41818em; /* 1.8 * 2.6 / 3.3 */407 margin-left: -0.60606em; /* 2 / 3.3 */408 margin-right: -0.60606em;409 padding: 0.3939em 0.60606em 0; /* 0.5 * 2.6 / 3.3 */410}411#weblog .body + .title.single-word {412 margin-top: 1.2em; /* 1.8 * 2.6 / 3.9 */413 margin-left: -0.51282em; /* 2 / 3.9 */414 margin-right: -0.51282em;415 padding: 0.3333em 0.51282em 0; /* 0.5 * 2.6 / 3.9 */416}417#weblog .body + .title.long {418 margin-top: 1.8em; /* baseline */419 margin-left: -0.76923em; /* 2 / 2.6 */420 margin-right: -0.76923em;421 padding: 0.5em 0.76923em 0; /* baseline */422}423#weblog .title a[rel="bookmark"] {424 text-decoration: none;425 line-height: 1.3;426}427#weblog .title a[rel="bookmark"]:link,428#weblog .title a[rel="bookmark"]:visited {429 margin-left: 0;430 padding-left: 0;431 margin-right: 0;432 padding-right: 0;433 border-bottom: 1px dotted #666;434}435#weblog .title a[rel="bookmark"]:focus,436#weblog .title a[rel="bookmark"]:hover,437#weblog .title a[rel="bookmark"]:active {438 margin-left: -.2em;439 padding-left: .2em;440 margin-right: -.2em;441 padding-right: .2em;442 border-bottom: 1px solid #444;443}444#weblog .body {445 clear: left;446}447#weblog .body > blockquote:first-child,448#weblog .body > pre:first-child {449 margin-top: 0.5em;450}451#weblog .seen-list > li {452 list-style: none none;453 margin: 0 0 2em;454}455#weblog .seen-list > li > div > blockquote {456 font-size: 0.9em;457 margin: -.5em -2.2222222222em 0;458 padding: 0 2.2222222222em 0;459 border-width: 1px 0;460}461#weblog .seen-list > li > h4 {462 float: left;463 margin: 0;464 padding: 0.375em 0 0;465 white-space: nowrap;466}467#weblog .seen-list > li > h4::after {468 content: '\2009â\2009';469}470#weblog .seen-list > li > h4 > a {471 margin-top: -1px;472 padding-top: 1px;473 margin-bottom: -1px;474 padding-bottom: 1px;475 border-bottom-color: transparent;476}477 478#archive li { margin-bottom: .5em }479#archive li.seen {480 list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAJCAQAAABUUf4oAAAAFklEQVR4AWMgBvz//78BhQsTQMhSCAD1Mwx2HJLWGgAAAABJRU5ErkJggg==);481}482#archive li.seen > div:first-child > a {483 font-size: 0.9em;484}485#archive .details {486 font-size: 0.7em;487 color: #777;488 padding: 0;489 margin: 0;490}491#archive .summary {492 font-size: 0.9em;493 color: #aaa;494 padding: 0;495 margin: 0;496}497 498#http-error {499 font-size: 2.25em;500 text-align: center;501 font-family: Georgia, 'Hoefler Text', 'Bistream Vera Serif', 'Lucida Bright', serif;502 letter-spacing: 0.075em;503 color: #bbb;504 background-color: #2c1111;505 border: 1px solid #381616506}507 508 509#navigation {510 padding: 0;511 margin: 0;512 border: 1px solid #ddd;513 margin-bottom: 2em;514 position: relative;515 text-align: right;516}517@media (min-width: 480px) and (max-width: 559px) { #navigation { margin: 11px } }518@media print { #navigation { display: none } }519#navigation ul,520#navigation li {521 list-style: none;522 padding: 0;523 margin: 0;524 display: inline-block;525 white-space: nowrap;526}527#navigation a {528 text-align: center;529 text-decoration: none;530 font-family: Georgia, "Hoefler Text", "DejaVu Serif", "Bistream Vera Serif", "Lucida Bright", serif;531 font-size: 32px;532 font-weight: bold;533 color: #fff;534 line-height: 2em;535 padding: 0;536 width: 2em;537 height: 2em;538 margin: 0;539 border: 0;540 border-left: 1px solid #ddd;541 display: block;542}543#navigation a:focus,544#navigation a:hover {545 background-color: #333;546}547#navigation a b {548 font-size: 44px;549 font-weight: normal;550 letter-spacing: 0.07em;551 position: absolute;552 display: none;553 left: 16px;554}555#navigation a:focus b,556#navigation a:hover b {557 display: inline;558}559#nav-home a::before { content: '~' }560#nav-back a::before { content: '*'; font-size: 40px; vertical-align: -0.28em; line-height: 40px }561#nav-code a::before { content: '#!' }562#nav-what a::before { content: '?'; font-family: 'Droid Serif', Georgia, sans-serif; vertical-align: -0.02em }563 564#content { padding: 0 1px; margin: 0 }565@media (min-width: 480px) { #content { padding: 0 11px } }566@media (min-width: 560px) { #content { padding: 1.5em 2em; border: 1px solid #ddd } }567@media print { #content { padding: 1em; border: 1px solid #000 } }568.title {569 letter-spacing: 0.015em;570 font-size: 3.3em;571 text-align: right;572 margin: 0 0 0.4em; /* 0.5 * 2.6 / 3.3 */573}574.title.single-word {575 font-size: 3.9em;576 margin-bottom: 0.33333333em; /* 0.5 * 2.6 / 3.9 */577}578.title.long {579 font-size: 2.6em;580 letter-spacing: 0.03em;581 margin-bottom: 0.5em; /* baseline */582}583#paging,584#copyright,585.date {586 color: #999;587 font-size: 0.9em;588 letter-spacing: -0.005em;589}590.date {591 text-align: right;592 margin-bottom: 1.25em;593}594.title + .date {595 margin-top: -2em;596}597.date > a:link,598.date > a:visited,599.date > a:focus,600.date > a:link,601.date > a:visited,602.date > a:hover {603 color: #999;604 border-bottom: 1px solid #666;605}606.date > a:focus,607.date > a:hover {608 color: #fff;609 border-bottom: 2px solid #444; /* should be 1px but that looks jumpy for some reason */610}611#footer {612 margin: 3em 0 0;613 padding: 0;614}615#footer a {616 padding: 7px 0.5em 4px;617 margin: 0 -0.2em;618}619@media print { #footer { display: none } }620#paging,621#copyright {622 white-space: nowrap;623 margin: 0;624 padding: 0;625 text-align: right;626}627#paging {628 float: left;629}630#paging a:first-child {631 margin-right: 1em;632}633 </style>634 <title>635 How to know you are using classic vi // plasmasturm.org636 </title>637 <meta content="width=device-width, initial-scale=1" name="viewport">638 </head>639 <body>640 <div id="navigation">641 <ul>642 <li id="nav-home">643 <a>644 <b>645 Home646 </b>647 </a>648 </li>649 <li id="nav-back">650 <a>651 <b>652 Archive653 </b>654 </a>655 </li>656 <li id="nav-code">657 <a>658 <b>659 Code660 </b>661 </a>662 </li>663 <li id="nav-what">664 <a>665 <b>666 About667 </b>668 </a>669 </li>670 </ul>671 </div>672 <div id="content">673 <h1 class="title long">674 How to know you are using classic vi675 </h1>676 <p class="date">677 <a>678 Wednesday, 19 Sep 2007679 </a>680 </p>681 <div class="body">682 <pre><samp><b>:version</b><br>Version 3.7, 6/7/85.</samp></pre>683 <p>684 Yes. 1985.685 </p>686 <p>687 On a contemporary computer, it will probably look like this:688 </p>689 <pre><samp><b>:version</b><br>Version 4.0 (gritter) 12/25/06</samp></pre>690 <p>691 (The given date will vary.) This is692 <a title="The Traditional Vi">693 Gunnar Ritter’s lightly modernised fork694 </a>695 – but still the classic vi.696 </p>697 <p>698 Any other response means you are using a clone.699 </p>700 </div>701 <div id="footer">702 <p id="paging">703 <a title="Enterprise software (Tuesday, 18 Sep 2007)">704 ← Older705 </a>706 <a title="Everything old is old again (Thursday, 20 Sep 2007 [updated])">707 Newer →708 </a>709 </p>710 <p id="copyright">711 ©2001–2023712 <a>713 Aristotle Pagaltzis714 </a>715 </p>716 </div>717 </div>718 </body>719</html>720