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 XHTML 1.0 Strict//EN" "">2<html lang="en" xml:lang="en" xmlns="">3 <head>4 <style>5 @CHARSET "UTF-8";6 7* {8 margin: 0;9 padding: 0;10}11 12a {13 color: #222;14}15 16a:hover {17 color: #137;18}19 20a img {21 border: none;22}23 24body {25 font-size: 16px;26 font-family: "Gill Sans","Trebuchet MS", Verdana, Helvetica;27 background-color: #eee;28 min-height: 100vh;29 overflow: hidden;30}31 32code {33 font-size: 13px;34 font-family: Monospace, "Courier New";35 background-color: #eef;36}37 38h1 {39 color: #000;40 margin: 0 -2px;41 padding: .2em .2em;42 font-size: 20px;43 text-align: left;44 font-weight: normal;45 text-transform: uppercase;46 background-color: #eee;47}48 49h1 a {50 color: #000;51 text-decoration: none;52}53 54h1#header {55 display: none;56}57 58h1:first-child:first-letter {59font-size: 22px;60}61 62h2 {63margin-top: 1.5em;64font-weight: normal;65}66 67h2.sf_comments_title {68 color: #000;69 margin: 2em -2px 0 -2px;70 padding: 0;71 font-size: 17px;72 text-align: left;73 text-transform: uppercase;74}75 76h3 {77margin-top: 2em;78font-weight: normal;79}80 81h4 {82margin-top: .5em;83font-weight: normal;84}85 86html {87 background-color: #eee;88 overflow: auto;89}90 91li {92 margin: .5em 0 0 2em;93 list-style-type: square;94}95 96object {97 max-width: 100%;98}99 100p {101 margin: 1em 0;102}103 104pre {105 margin: 1em 0;106 overflow: auto;107}108 109pre code {110 display: block;111 padding: 1em 10px;112 overflow: auto;113 line-height: 13px;114 border-left: 5px #47a solid;115}116 117.informations {118font-size: 14px;119list-style-type: none;120}121 122.informations li {123color: #999;124margin: 0 1em;125}126 127.informations li a {128color: #999;129}130 131.informations li a:hover {132color: #137;133}134 135.items-list {136padding: 0;137}138 139.items-list h2 {140margin: 0;141padding: 0 0 0 20px;142font-size: 1.2em;143}144 145.items-list h2 a {146text-decoration: none;147margin: 0;148line-height: .7em;149}150 151.items-list>li {152margin: 1em 0;153list-style-type: none;154}155 156.items-list li.other {157background: transparent url(../images/icons/other.png) 0 3px no-repeat;158}159 160.items-list li.movie {161background: transparent url(../images/icons/movie.png) 0 3px no-repeat;162}163 164.items-list li.book {165background: transparent url(../images/icons/book.png) 0 3px no-repeat;166}167 168.items-list li.link {169background: transparent url(../images/icons/link.png) 0 3px no-repeat;170}171 172.items-list li.museum {173background: transparent url(../images/icons/museum.png) 3px 0 no-repeat;174}175 176.items-list li.music {177background: transparent url(../images/icons/music.png) 0 3px no-repeat;178}179 180.items-list li.photo {181background: transparent url(../images/icons/photo.png) 0 3px no-repeat;182}183 184.items-list li.visit {185background: transparent url(../images/icons/visit.png) 0 3px no-repeat;186}187 188.items-list li.writing {189background: transparent url(../images/icons/post.png) 0 3px no-repeat;190}191 192.microformat {193display: none;194}195 196.sf_comment {197font-size: 14px;198margin-bottom: 40px;199}200 201.sf_comment_form div {202margin: 0 0 10px 0;203}204 205.sf_comment_form fieldset {206border: none;207padding: 0;208}209 210.sf_comment_form label {211margin: 0;212padding: 0;213display: block;214}215 216.sf_comment_form input, .sf_comment_form textarea {217border: 1px #888 solid;218padding: 1px 0 1px 10px;219min-width: 30em;220background: #fff url(../images/icons/input-shadow.gif) top left repeat-x;221}222 223.sf_comment_form textarea {224width: 660px;225height: 10em;226}227 228.sf_comment_form .form_error {229color: #888;230margin: 0;231padding: 0 0 0 20px;232font-size: 11px;233background: transparent url(../images/icons/error.png) 0 4px no-repeat;234font-weight: bold;235}236 237.sf_comment_form input.submit {238color: #666;239width: auto;240border: 1px #666 solid;241height: 2.2em;242margin: 0 0 2em 0;243padding: 0 5px;244font-size: 1em;245min-width: 0;246background: none;247background-color: #ececec;248}249 250.sf_comment_form input.submit:hover {251color: #ececec;252border: 1px #ececec solid;253background-color: #666;254}255 256.sf_comment_form .required input, .sf_comment_form .required textarea {257background: #fff url(../images/icons/input-shadow-required.gif) top left no-repeat;258}259 260.sf_comment_form_error {261color: red;262font-weight: bold;263}264 265.sf_comment_info {266margin-bottom: 0;267}268 269.sf_comment_info a {270color: #444;271}272 273.sf_comment_text {274overflow: auto;275margin-top: 0;276border-left: 5px solid #ccc;277padding: 0 0 0 5px;278}279 280.sf_comment_text p {281margin: 0;282}283 284#sf_comment_ajax_indicator {285width: 20px;286height: 20px;287margin: 0;288padding: 0;289background: transparent url(../images/icons/indicator.gif) top left no-repeat;290}291 292#sf_comment_list {293margin-left: 60px;294}295 296#sf_comment_list .gravatar_photo {297float: left;298margin-left: -60px;299}300 301.spacer {302clear: both;303height: 1px;304}305 306.tag-cloud {307font-size: 1.5em;308list-style-type: none;309}310 311.tag-cloud li {312margin: 0 .5em;313display: inline;314padding: 0;315}316 317.tag-cloud li a {318text-decoration: none;319}320 321.tag-cloud li a.normal {322font-size: 1.5em;323}324 325.tag-cloud li strong a {326font-size: 2em;327}328 329.tags-list {330margin: 10px 0 2em 0;331display: inline;332}333 334.tags-list li {335margin: 0;336display: inline;337list-style-type: none;338}339 340ul.toc li, ol.toc li {341list-style: disc; /* Mac NS has problem with 'none' */342list-style: none;343}344 345#container {346border-left: 1px #ccc solid;347border-right: 1px #ccc solid;348-moz-border-radius: 50px 50px 0 0;349-webkit-border-top-right-radius: 50px;350-webkit-border-top-left-radius: 50px;351}352 353#container p {354line-height: 1.5em;355}356 357#container blockquote {358border: 1px #eee solid;359margin: 1em 4em;360padding: 10px 10px 10px 40px;361font-size: 14px;362background: #f2f2f2 url(../images/icons/quote.png) top left no-repeat;363}364 365#container blockquote cite.author {366font-style: normal;367font-weight: bold;368}369 370#container blockquote cite.title {371font-style: normal;372text-decoration: underline;373}374 375#container ul {376margin-bottom: 20px;377}378 379#container #menu {380width: 100%;381height: 55px;382float: left;383padding: 0;384position: relative;385margin-bottom: -22px;386}387 388#container #menu ul {389clear: both;390margin: 0;391padding: 0 10px;392width: calc(100% - 20px);393}394 395#container #menu ul#first-level {396height: 33px;397background-color: #1a1a1a;398-moz-border-radius: 10px 10px 0 0;399border-top-right-radius: 10px;400border-top-left-radius: 10px;401-webkit-border-top-right-radius: 10px;402-webkit-border-top-left-radius: 10px;403}404 405#container #menu ul#second-level {406position: absolute;407padding-bottom: 3px;408background: transparent url(../images/second-level-menu-background.png) top left repeat;409z-index: 200;410}411 412#container #menu ul li {413list-style-type: none;414margin: 0;415float: left;416}417 418#container #menu ul#first-level li {419height: 33px;420background-color: #1a1a1a;421}422 423#container #menu ul li.right {424float: right;425}426 427#container #menu ul li a {428color: #fff;429padding: 0 10px;430font-size: 16px;431text-decoration: none;432}433 434#container #menu ul#first-level li a {435height: 25px;436padding: 5px 10px;437display: block;438}439 440#container #menu ul li.current a {441color: #8ae;442}443 444#container #menu ul li:hover a {445color: #000;446background-color: #eee;447}448 449#container #menu ul#first-level li a {450padding: 4px 10px;451}452 453#container #menu ul#second-level li a {454font-size: .7em;455padding: 3px 10px;456}457 458#container .illustration {459margin: 0 0 1em 0;460}461 462#container .illustration img {463border-bottom: 1px #eee solid;464max-width: 100%;465}466 467#container .illustration-comment {468color: #888;469margin: -1em 10px 1em 10px;470line-height: 16px;471font-style: italic;472text-align: right;473}474 475#container .sf_comment blockquote {476margin: 0;477}478 479#content {480padding: 0 40px 10px 40px;481font-size: 15px;482}483 484#footer {485padding: 12px 0;486font-size: 14px;487border-top: 1px #ccc solid;488background-color: #eee;489}490 491#how {492padding: 0;493}494 495#how h2 {496display: inline;497margin: 0;498padding: 0 2em 0 0;499}500 501#how h2 a {502text-decoration: none;503margin: 0;504line-height: .7em;505}506 507#how li {508margin: 1em 0;509list-style-type: none;510}511 512#language-choice {513padding: .5em 0;514font-size: 14px;515width: 195px;516}517 518#language-choice li {519background: transparent url(../images/white-background.png) top left repeat;520list-style-type: none;521margin: 0 0 1px 0;522padding: 0 10px;523}524 525#prelude {526display: none;527}528 529#root {530color: #111;531hyphens: auto;532width: 752px;533margin: 0 auto;534text-align: justify;535background-color: #fff;536}537 538@media screen and (max-width: 752px) {539 #content {540 padding: 0 20px 10px 20px;541 }542 543 #footer {544 padding: 12px;545 }546 547 #root {548 width: 100%;549 }550}551 </style>552 <meta content="application/xhtml+xml; charset=utf-8" http-equiv="Content-Type">553 <meta content='Ressources tagged with "compiler"' name="title">554 <meta content="Personal page of Xavier Lacot : articles, (open-source) code, photos, artwork" name="description">555 <meta content="xavier, lacot, php, symfony, photo, photos, writings, standards, semantic web" name="keywords">556 <meta content="en" name="language">557 <meta content="index, follow" name="robots">558 <meta content="width=device-width, initial-scale=1.0" name="viewport">559 <title>560 Ressources tagged with "compiler"561 </title>562 </head>563 <body>564 <div id="root">565 <h1 id="header">566 <a>567 Chez Xavier568 </a>569 </h1>570 <ul id="prelude">571 <li>572 <a>573 Go to the content574 </a>575 </li>576 <li>577 <a>578 Go to the menu579 </a>580 </li>581 </ul>582 <div id="container">583 <h1>584 <a>585 Home586 </a>587 /588 What /589 "compiler"590 </h1>591 <div id="menu">592 <ul id="first-level">593 <li>594 <a>595 writings596 </a>597 </li>598 <li>599 <a>600 photos601 </a>602 </li>603 <li>604 <a>605 projects606 </a>607 </li>608 <li class="right">609 <a>610 about611 </a>612 </li>613 </ul>614 </div>615 <p class="illustration">616 <img alt="One Tag, I'll be a cloud." src="rick.jpg">617 </p>618 <p class="illustration-comment">619 One620 <em>621 Tag622 </em>623 , I'll be a cloud.624 </p>625 <div id="content">626 <ul class="items-list">627 <li class="link">628 <h2>629 <a rel="nofollow">630 Phrozn - Static Site Generator for PHP631 </a>632 </h2>633 <ul class="informations">634 <li>635 saved on: 2011-04-13636 </li>637 <li>638 uri:639 <a>640 http://www.phrozn.info/en/641 </a>642 </li>643 <li>644 about: Phrozn is a Static Site Generator built in PHP with modern libraries. Still rather geeky, but a GUI to it would make it a much more attractive tool for simple requirements !645 </li>646 <li>647 tags:648 <ul class="tags-list">649 <li>650 <a rel="tag">651 compiler652 </a>653 ,654 </li>655 <li>656 <a rel="tag">657 generator658 </a>659 ,660 </li>661 <li>662 <a rel="tag">663 php664 </a>665 ,666 </li>667 <li>668 <a rel="tag">669 simple670 </a>671 ,672 </li>673 </ul>674 </li>675 </ul>676 </li>677 <li class="link">678 <h2>679 <a rel="nofollow">680 PHP compiler performance - PHP Classes blog - PHP Classes681 </a>682 </h2>683 <ul class="informations">684 <li>685 saved on: 2010-02-23686 </li>687 <li>688 uri:689 <a>690 http://www.phpclasses.org/blog/post/117-PHP-compiler-performance.html691 </a>692 </li>693 <li>694 about: A first benchmark of the main PHP compilers. Where HipHop PHP seems to perform well, but not at a tremendous level as expected.695 </li>696 <li>697 tags:698 <ul class="tags-list">699 <li>700 <a rel="tag">701 benchmark702 </a>703 ,704 </li>705 <li>706 <a rel="tag">707 blog708 </a>709 ,710 </li>711 <li>712 <a rel="tag">713 compiler714 </a>715 ,716 </li>717 <li>718 <a rel="tag">719 facebook720 </a>721 ,722 </li>723 </ul>724 </li>725 </ul>726 </li>727 <li class="link">728 <h2>729 <a rel="nofollow">730 Roadsend PHP Compiler731 </a>732 </h2>733 <ul class="informations">734 <li>735 saved on: 2010-01-08736 </li>737 <li>738 uri:739 <a>740 http://www.roadsend.com/home/index.php?pageID=compiler741 </a>742 </li>743 <li>744 about: A compiler for PHP programs, which allows to compile PHP application as common desktop binaries: non-required php executable, eventually microserver embedded, php-gtk support, etc.745 </li>746 <li>747 tags:748 <ul class="tags-list">749 <li>750 <a rel="tag">751 application752 </a>753 ,754 </li>755 <li>756 <a rel="tag">757 compiler758 </a>759 ,760 </li>761 <li>762 <a rel="tag">763 desktop764 </a>765 ,766 </li>767 <li>768 <a rel="tag">769 developement770 </a>771 ,772 </li>773 </ul>774 </li>775 </ul>776 </li>777 <li class="link">778 <h2>779 <a rel="nofollow">780 lessphp781 </a>782 </h2>783 <ul class="informations">784 <li>785 saved on: 2009-08-03786 </li>787 <li>788 uri:789 <a>790 http://leafo.net/lessphp/791 </a>792 </li>793 <li>794 about: lessphp is a compiler for the CSS LESS syntax, written in php.795 </li>796 <li>797 tags:798 <ul class="tags-list">799 <li>800 <a rel="tag">801 compiler802 </a>803 ,804 </li>805 <li>806 <a rel="tag">807 css808 </a>809 ,810 </li>811 <li>812 <a rel="tag">813 development814 </a>815 ,816 </li>817 <li>818 <a rel="tag">819 less820 </a>821 ,822 </li>823 </ul>824 </li>825 </ul>826 </li>827 </ul>828 </div>829 </div>830 <div id="footer">831 © 1998-2023 Xavier Lacot -832 <a>833 about834 </a>835 </div>836 </div>837 </body>838</html>839