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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">2<html lang="en">3 <head>4 <style>5 /*styles for the plenty 2k14 at main*/6body7{ background-color: #FFF;8 color: #000;9 font-family:"Trebuchet MS", Helvetica, sans-serif;10 font-size: 0.9em;11 margin: 0px;12 padding: 0px;13 line-height:150%;14}15 16/*uusi uljas banneritausta*/17div.lohariheader18{ background-image: url(graphics/loharitausta.jpg);19 background-repeat: no-repeat;20 background-position: 0px;21 width: 800px;22 height: 152px;23 background-repeat: no-repeat; }24 25/*uusi uljas banneritausta foorumeille*/26div.lohariheader4forums27{ background-image: url(graphics/loharitausta.jpg);28 background-repeat: no-repeat;29 background-position: 0px;30 height: 152px;31 background-color: #FFF;32 background-repeat: no-repeat; }33 34/*kiva yksinkertainen ja pelkistetty naviratkaisu*/ 35 36div.naviarea37{ position: absolute;38 left: 280px;39 top: 120px;40 height: 34px;41 width: 520px;42 background-color: #6699cc;43 margin: 0px;44 padding: 0px; }45 46p.navi47{ font-family:"Trebuchet MS", Helvetica, sans-serif;48 font-weight:lighter;49 font-size: 1.5em;50 text-align:center;51 vertical-align: middle;52 letter-spacing: 0.1em; }53 54 55/* uuden pelkistetyn navin linkit*/56 57a.mainnavi:link58{ margin: 15px;59 color: #003366;60 background: transparent none;61 text-decoration: none;62}63 64a.mainnavi:visited65{ margin: 15px;66 color: #330066;67 background: transparent none;68 text-decoration: none;69}70 71a.mainnavi:hover72{ margin: 15px;73 color: #003;74 background: #99ccff;75 text-decoration: none;76 padding: 10px 0px 3px 0px;77 font-style: normal;78} 79 80/*navijutut paattyy*/81 82p83{ margin: 3px 15px 5px 15px;84 padding: 5px; }85 86p.centered87{ text-align: center; }88 89ul, li90{ margin: 5px 5px 5px 0px;91 text-indent: 0px; }92 93em94{ font-style: italic;95 font-weight: bold; } 96 97h198{ font-size: 1.4em;99 text-align: left;100 margin: 15px 15px 5px 15px;101 letter-spacing: 0.em;102 color: #003;103 padding: 0px 5px 0px 5px; }104 105h2106{ font-size: 1.2em;107 text-align: left;108 letter-spacing: 0.1em;109 margin: 15px 15px 5px 15px;110 color: #036;111 padding: 0px 5px 0px 5px; }112 113h3114{ font-size: 1.0em;115 text-align: left;116 margin: 15px 15px 5px 15px;117 color: #036;118 padding: 0px 5px 0px 5px; }119 120div.content121{ background-image: url(graphics/bluebg.jpg);122 background-repeat: repeat;123 background-color: #FFF;124 background-position: 0px 0px;125 z-index:-2; }126 127div.vasen128{ float: left;129 width: 40%;130 background: #efefef;131 margin: 25px 10px 10px 25px;132 border-color: #333;133 border-width: 1px;134 border-style: solid; }135 136div.oikea137{ float: left;138 width: 40%;139 background: #fff;140 margin: 25px 25px 10px 10px;141 border-color: #333;142 border-width: 1px;143 border-style: solid; }144 145div.share, p.share /*seems to be in use mostly in hiding stuff to the far right lol*/146{147 font-size: 0.9em;148 text-align: right;149 padding: 0px;150 font-family: 'Bookman Old Style', Georgia, Times, Georgia, serif;151 font-style: normal;152 font-weight: normal;153 font-size: smaller;154 padding: 0px;155 margin: 0px 10px 0px 0px;156 letter-spacing: 0.1em;157}158h2.share159{ margin: 0 5px 0px 20px;160}161 162.official163{ margin: 0px 15px 0px 15px;164 font-size: smaller;165 font-style: italic;166 font-weight: lighter; }167 168 169div.rssnews170 171{ font-family: 'Bookman Old Style', Georgia, Times, Georgia, serif;172 font-weight: normal;173 padding: 0px;174 margin: 10px;175 letter-spacing: 0.1em;176} 177 178/*stuff for the book quotes*/179/*not sure if these work with teh new layout*/180/*which new layout is that*/181 182.quote183{ font-family: 'Bookman Old Style', Georgia, Times, Georgia, serif;184 font-style: italic;185 font-weight: normal;186 padding: 0px;187 margin: 10px;188 letter-spacing: 0.1em; }189 190div.random /*nakyis olevan kaytossa*/191{192 font-family: 'Bookman Old Style', Georgia, Times, Georgia, serif;193 font-style: italic;194 font-weight: normal;195 font-size: larger;196 padding: 10px;197 margin: 0 0 5px 0;198 letter-spacing: 0.1em;199 background-color: #FFF;200 background-image: url(../graphics/quotes.jpg);201 background-repeat: no-repeat;202}203 204cite205{ font-size: smaller;206 color: #333;207 font-style: normal;208 margin: 0px;209 letter-spacing: 0em;210 text-align: right;211 font-weight: bold;212}213 214.form { padding: 10px; }215 216.credit217{ margin: 15px 15px 1px 25px;218 text-indent: 15px;219 font-style: italic;220 font-weight: lighter; }221 222.icons223{ padding: 10px;224 text-indent: 0px; } 225 226div.fl227{ margin: 5px 25px 5px 25px;228 text-indent: 0px;229 border-color: #003;230 border-width: 1px;231 border-style: solid;232 padding: 3px 10px 3px 10px; }233 234 235div.footer236{ clear: both;237 background-color: #FFF;238 border-width: 2px 0 0px 0;239 border-style: solid none none none;240 border-color: #033 #033 transparent #033;241 text-align: left;242 font-size: smaller;243 margin: 0px;244 letter-spacing: 0.1em;245 padding: 5px; }246 247p.smallcentered248{249 font-size: smaller;250 text-align: center;251}252 253div.frontstores254{ background: #fff;255 margin: 0 20px 0 20px; 256 padding: 0 20px 0 20px; }257 258div.frontpagefls259{ font-size: smaller;260 background-color: #95a6c0;261 margin: 0 20px 20px 20px;262 padding: 10px;263}264 265div.affiliates266{ text-align: left;267 margin: 15px 15px 5px 15px;268 padding: 0px 5px 0px 5px; }269 270p.stores271{272 margin: 0px;273 padding: 0px;274}275 276a:link { color: #003; 277 background: transparent none; 278 text-decoration: underline; }279 280a:visited { color: #666; 281 background: transparent none; 282 text-decoration: underline; }283 284a:hover285{ color: #036;286 text-decoration: none;287 background: transparent none; }288 289 290a:active { color: #9999cc;291 background: transparent none; 292 text-decoration: none; }293 294/* FanUpdate 2.0 */295 296div#fanupdate {}297 298h2.news299{ font-size: 1.2em;300 text-align: left;301 letter-spacing: 0.1em;302 margin: 15px 10px 5px 15px;303 color: #036;304 padding: 0px 3px 0px 3px;305}306 307h3 {}308p {}309 310/* Entries */311 312div.post { clear: both; }313 314div.news315{ }316 317p.catfile318{ }319 320.newsinfo321{ font-size: 0.8em;322 text-align: left;323 font-style: italic;324 margin: 3px 8px 2px 8px;325 color: #036; }326 327/* Comments */328 329div#comments {}330 331div.comment332{ clear: both;333 padding: 0.5em;334 margin: 10px;335 min-height: 150px;336 border-color: #333;337 border-width: 1px;338 border-style: solid;339 background: #e4e4e4e4e4e4; }340 341div.comment p {padding: 0 0 0 3em;}342 343div.comment p.commenter {padding: 0;}344 345div.odd {background: #ffffff;}346 347div.author {}348 349div#newComment {}350 351img.gravatar352{ float: left;353 margin: 5px; }354 355/* Comment Form */356 357div.comments-form { }358 359form#comments-form {}360 361form#comments-form p {}362 363p.news_ala364{365 text-align: right;366 font-size: 0.8em;367 border-color: transparent transparent #033 transparent;368 border-width: 0px 0px 1px 0px;369 border-style: none none solid none;370 padding: 0 0 3px 0;371 clear: both;372}373 374img.share375{376 padding: 0px;377 margin: 0px;378 position: -20px;379} 380 381p.news_yla382{ font-size: 0.8em;383padding: 0px 3px 0px 3px;384}385 386p#cmt-rules { }387p#cmt-moderation {}388 389fieldset 390{ border: 1px solid #e4e4e4;391 margin: 0 auto 0.5em auto;392 padding: 0.5em; }393 394fieldset p, fieldset ul {margin: 0 0 0.5em 0;}395 396label 397{ float: left;398 width: 9em;399 text-align: right;400 margin: 0 0.5em 0 0; }401 402input, textarea, select, option {403 font-family: Arial, sans-serif;404 font-size: 1em; }405 406input[type=submit] {407 text-transform: capitalize;408 font-size: 1.2em; }409 410/* Footer fanupdaten edelleen siis */411 412a.rss {}413 414div.archivelink {415 text-align: center; 416 margin: 2em 0 0 0; }417 418div.credit {419 clear: both;420 text-align: center;421 border-top: 6px solid #eee;422 margin: 1em 0 0 0; }423 424div.credit p {margin: 0; }425 426 427/* navigate responsibly*/428 429.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}430 </style>431 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">432 <title>433 thePlenty.net: a Robin Hobb / Megan Lindholm website434 </title>435 <meta content="Mervi Makela" name="author">436 <meta content="Robin Hobb, Megan Lindholm, fansite, farseer, liveship traders, tawny man, soldier son, 437rain wild chronicles, the inheritance, elderlings, fitz, the fool, nighteyes, amber, nevare, fanlist, fanlisting, forums, 438wallpapers, wiki, icons, " name="keywords">439 <meta content="Robin Hobb / Megan Lindholm website with news, wiki, forums and other goodies." name="description">440 <meta content="summary" name="twitter:card">441 <meta content="“@theplenty.net”" name="twitter:site">442 <meta and content="“Robin" hobb lindholm megan name="twitter:title" news“>443 <meta content="Visit theplenty.net for more information." name="twitter:description">444 <meta content="" name="twitter:image">445 </head>446 <body>447 <div class="lohariheader">448 <div class="naviarea">449 <p class="navi">450 <a class="mainnavi" title="home">451 <span>452 home453 </span>454 </a>455 <a class="mainnavi" title="news">456 <span>457 news458 </span>459 </a>460 <a class="mainnavi" title="PlentyWiki">461 <span>462 wiki463 </span>464 </a>465 <a class="mainnavi" title="forums">466 <span>467 forums468 </span>469 </a>470 <!--<a class="mainnavi" title="goodies"><span>more</span></a>-->471 </p>472 </div>473 <br style="clear: left;">474 </div>475 <!-- div lohariheader ends, actual content begins -->476 <div class="content">477 <br>478 <div class="vasen">479 <div class="news">480 <h1 class="newsheader">481 Latest Robin Hobb and Megan Lindholm news482 </h1>483 <!-- fetch me a rss rabbit -->484 <div class="rssnews">485 <p>486 <strong>487 <a title="New Liveship Traders special edition forthcoming">488 New Liveship Traders special edition forthcoming489 </a>490 </strong>491 <br>492 <small>493 Posted on Sunday March 26, 2023494 </small>495 </p>496 <p>497 </p>498 <p>499 <strong>500 <a title="Documentary about fantasy genre's roots features Robin Hobb">501 Documentary about fantasy genre's roots features Robin Hobb502 </a>503 </strong>504 <br>505 <small>506 Posted on Friday December 09, 2022507 </small>508 </p>509 <p>510 </p>511 <p>512 <strong>513 <a title="Robin Hobb AA comic signing">514 Robin Hobb AA comic signing515 </a>516 </strong>517 <br>518 <small>519 Posted on Friday December 09, 2022520 </small>521 </p>522 <p>523 </p>524 <p>525 <strong>526 <a title="An interview with Robin Hobb and Jody Houser">527 An interview with Robin Hobb and Jody Houser528 </a>529 </strong>530 <br>531 <small>532 Posted on Friday November 18, 2022533 </small>534 </p>535 <p>536 </p>537 <p>538 <strong>539 <a title="Assassin's Apprentice comic news">540 Assassin's Apprentice comic news541 </a>542 </strong>543 <br>544 <small>545 Posted on Wednesday November 02, 2022546 </small>547 </p>548 <p>549 </p>550 </div>551 <!-- you call it bones and meat and fur and guts -->552 <p>553 More554 <a>555 recent news556 </a>557 !558 </p>559 <p>560 All the old news from 2005 to 2020 have been561 <a>562 archived563 </a>564 .565 </p>566 <p class="official">567 Visit568 <a>569 robinhobb.com570 </a>571 for official information on appearances etc.572 <a>573 Got news to share?574 </a>575 </p>576 <p class="share">577 follow theplenty.net 578 <br>579 <a>580 <img alt="theplentynet on twitter" border="0" height="35" src="rick.jpg" width="35">581 </a>582 <a>583 <img alt="theplentynet on instagram" border="0" height="35" src="rick.jpg" width="35">584 </a>585 <a>586 <img alt="theplentynet on tumblr" border="0" height="35" src="rick.jpg" width="35">587 </a>588 <a ">589 <img alt="theplentynet on tumblr" border="0" height="35" src="rick.jpg" width="35">590 </a>591 <a>592 <img alt="rss of theplenty.net news" border="0" height="35" src="rick.jpg" width="35">593 </a>594 <a rel="me">595 Mastodon596 </a>597 </p>598 </div>599 <!-- div class recent news ends-->600 </div>601 <!-- div vasen ends -->602 <div class="oikea">603 <h2>604 Latest stories605 </h2>606 <p>607 Megan Lindholm:608 <em>609 <a>610 A Dime611 </a>612 </em>613 (November 2021)614 </p>615 <p>616 Robin Hobb:617 <em>618 <a>619 Assassin's Fate620 </a>621 </em>622 (May 2017)623 </p>624 <p class="share">625 more new and recent titles at the626 <a>627 wiki628 </a>629 </p>630 <h2>631 Recent forum discussions632 </h2>633 <ul class="last-threads">634 <li>635 <a>636 Best Mobile LCDs in UAE and africa637 </a>638 </li>639 <li>640 <a>641 1st Print UK dustjacket variation for the original Assassin's Apprentice HC642 </a>643 </li>644 <li>645 <a>646 [from news] New Liveship Traders special edition forthcoming647 </a>648 </li>649 <li>650 <a>651 [from news] Robin Hobb AA comic signing652 </a>653 </li>654 </ul>655 <p class="share">656 visit the657 <a>658 forums659 </a>660 </p>661 <h2>662 Random quote663 </h2>664 <div class="random">665 <p>666 First, let me introduce you to yourself.667 <br>668 <br>669 <cite>670 Chade in "Assassin´s Apprentice"671 </cite>672 </p>673 </div>674 <!-- div class random ends here -->675 <p class="share">676 more677 <a>678 quotes679 </a>680 </p>681 <h2>682 Robin Hobb fanlisting683 </h2>684 <div class="frontpagefls">685 <p>686 The687 <a>688 fanlisting689 </a>690 for Robin Hobb aka Megan Lindholm lists691 <em>692 611693 </em>694 (+0) readers from695 <em>696 46697 </em>698 different countries and was last updated on699 <i>700 01st November 2023701 </i>702 with703 <a target="_blank">704 Karin705 </a>706 .707 </p>708 <p>709 Are you on the list?710 <a>711 Sign your name712 </a>713 !714 </p>715 </div>716 </div>717 <!-- div oikea ends -->718 <div class="footer">719 <div class="copy">720 <p>721 site © 2003 - 2023 Mervi •722 <a>723 memories(at)theplenty.net724 </a>725 •726 <a>727 site and copyright info728 </a>729 •730 <a>731 site map732 </a>733 •734 <a>735 support us736 </a>737 </p>738 </div>739 </div>740 <!-- div class footer ends-->741 </div>742 <!-- div class content ends-->743 </body>744</html>745