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 Transitional//EN" "">2<html dir="ltr" xmlns="">3 <head>4 <style>5 /* 6Template name: Freshmade Software7Template URI: http://templates.arcsin.se/freshmade-software-website-template/8Release date: 2009-06-219Description: A software company styled template in light colors of white, orange and brown.10Author: Viktor Persson11Author URI: http://arcsin.se/12 13This template is licensed under a Creative Commons Attribution 2.5 License:14http://templates.arcsin.se/license/15*/16 17 18/* 19 Reset20------------------------------------------------------------------- */21 22html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, input, select {margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}23table {border-collapse: collapse; border-spacing: 0;}24caption, th, td {text-align: left; font-weight: normal;}25table, td, th {vertical-align: middle;}26blockquote:before, blockquote:after, q:before, q:after {content: "";}27blockquote, q {quotes: "" "";}28a img {border: none;}29:focus {outline: 0;}30 31 32/* 33 General 34------------------------------------------------------------------- */35 36html {37 height: 100%;38 padding-bottom: 1px; /* force scrollbars */39}40 41body {42 background: #A9A9A9;43 color: #444;44 font: normal 75% sans-serif;45 line-height: 1.5;46}47 48 49/* 50 Typography 51------------------------------------------------------------------- */52 53/* Headings */54 55h1,h2,h3,h4,h5,h6 {56 color: #444;57 font-weight: normal;58 line-height: 1;59 margin-bottom: 0.3em;60}61h4,h5,h6 {font-weight: bold;}62 63h1 {font-size: 2.6em;}64h2 {font-size: 2em;}65h3 {font-size: 1.5em;}66h4 {font-size: 1.25em;}67h5 {font-size: 1.1em;}68h6 {font-size: 1em;}69 70h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin: 0;}71 72 73/* Text elements */74 75p {margin-bottom: 1em;}76 77a:focus,a:hover {color: #002;}78a {79 color: #246;80 text-decoration: underline;81}82 83abbr, acronym {border-bottom: 1px dotted #666;}84address {margin-bottom: 1.5em;}85blockquote {margin: 1.2em; line-height: 1.4em;}86blockquote span {font-size: 1.4em; color: #000;}87del {color:#666;}88em, dfn, blockquote, address {font-style: italic;}89strong, dfn {font-weight: bold;}90sup, sub {line-height: 0;}91cite {color: #666;}92 93pre {94 margin: 1.5em 0;95 white-space: pre;96}97pre,code,tt {98 font: 1em monospace;99 line-height: 1.5;100}101 102 103/* Lists */104 105li ul, li ol {margin-left: 1.5em;}106ul, ol {margin: 0 1.5em 1.5em 1.5em;}107 108ul {list-style-type: disc;}109ol {list-style-type: decimal;}110 111dl {margin: 0 0 1.5em 0;}112dl dt {font-weight: bold;}113dd {margin-left: 1.5em;}114 115 116/* Tables */117 118table {margin-bottom: 1.4em; width: 100%;}119th {font-weight: bold;}120thead th {background: #C3D9FF;}121th,td,caption {padding: 4px 10px 4px 5px;}122tr.even td {background: #F2F6FA;}123tfoot {font-style: italic;}124caption {background: #EEE;}125 126table.data-table {127 border: 1px solid #EEE;128 margin-bottom: 2em;129 width: 100%;130}131table.data-table th {132 background: #EEE;133 border: 1px solid #DDD;134 color: #555;135 text-align: left;136}137table.data-table tr {border-bottom: 1px solid #EEE;}138table.data-table td, table th {padding: 8px 10px;}139table.data-table td {140 background: #F6F6F6;141 border: 1px solid #E6E6E6;142}143table.data-table tr.even td {background: #FCFCFC;}144 145 146/* Misc classes */147 148.small {font-size: 0.9em;}149.smaller {font-size: 0.8em;}150.smallest {font-size: 0.7em;}151 152.large {font-size: 1.1em;}153.larger {font-size: 1.2em;}154.largest {font-size: 1.3em;}155 156.hidden {display: none;}157 158.quiet {color: #666;}159.loud {color: #000;}160.highlight {background: #FF0;}161 162.text-left {text-align: left;}163.text-right {text-align: right;}164.text-center {text-align: center;}165 166.error, .notice, .success {167 border: 1px solid #DDD;168 margin-bottom: 1em;169 padding: 0.6em 0.8em;170}171 172.error {background: #FBE3E4; color: #8A1F11; border-color: #FBC2C4;}173.error a {color: #8A1F11;}174 175.notice {background: #FFF6BF; color: #514721; border-color: #FFD324;}176.notice a {color: #514721;}177 178.success {background: #E6EFC2; color: #264409; border-color: #C6D880;}179.success a {color: #264409;}180 181div.more {padding-top: 6px;}182.more a, a.more {color: #666;}183.more a:hover, a.more:hover {color: #002;}184 185 186/* 187 Forms 188------------------------------------------------------------------- */189 190label {font-weight: bold; cursor: pointer;}191fieldset {padding: 1.4em; margin: 0 0 1.5em 0; border: 1px solid #DDD; background: #F6F6F6;}192legend {font-weight: bold; font-size: 1.2em;}193textarea {overflow: auto;}194input.text, textarea, select {195 background: #FCFCFC;196 border: 1px inset #AAA;197 margin: 0.5em 0;198 padding: 4px 5px;199}200input.text:focus, textarea:focus, select:focus {background: #FFFFF5;}201 202input.button {203 background: #DDD;204 border: 1px outset #AAA;205 padding: 4px 5px;206}207input.button:active {border-style: inset;}208 209.form-error {border-color: #F00;}210 211 212/* 213 Alignment 214------------------------------------------------------------------- */215 216/* General */217 218.center,.aligncenter {219 display: block;220 margin-left: auto;221 margin-right: auto;222}223 224 225/* Images */226 227img.bordered,img.alignleft,img.alignright,img.aligncenter {228 background-color: #FFF;229 border: 1px solid #DDD;230 padding: 3px;231}232img.alignleft, img.left {margin: 0 1.5em 1em 0;}233img.alignright, img.right {margin: 0 0 1em 1.5em;}234 235 236/* Floats */ 237 238.left,.alignleft {float: left;}239.right,.alignright {float: right;}240 241.clear,.clearer {clear: both;}242.clearer {243 display: block;244 font-size: 0;245 line-height: 0; 246}247 248 249/* Columns */250 251.col2 {width: 47%;}252 253 254 255/* 256 Separators 257------------------------------------------------------------------- */258 259.content-separator, .archive-separator {260 background: #EEE;261 clear: both;262 color: #FFE;263 display: block;264 font-size: 0;265 height: 1px;266 line-height: 0;267 margin: 12px 0 24px;268}269.archive-separator {margin: 0 0 14px;}270 271.separator-vertical {background: url('img/separator-vertical.gif') repeat-y center top;}272 273 274/* 275 Posts 276------------------------------------------------------------------- */277 278.post {margin-bottom: 24px;}279 280.post a {text-decoration: none;}281.post a:hover, .post-body a {text-decoration: underline;}282 283.post-title {border-bottom: 1px solid #E5E5E5;}284 285.post-date {286 color: #777;287 font-size: 0.9em;288 padding: 8px 0 0;289}290.post-date a {color: #444;}291 292.post-body {padding-top: 12px;}293 294.post-meta {295 background: #FCFCFC;296 border: 1px solid #ECECEC;297 color: #777;298 font-size: 0.9em;299 padding: 6px 10px;300}301.post-meta a {color: #345; }302.post-meta a:hover {color: #001;}303 304 305ul.nice-list {306 border-top: 1px solid #F0F0F0;307 margin-left: 0;308 margin-right: 0;309}310ul.nice-list li {311 border-bottom: 1px solid #F0F0F0;312 list-style: none;313 padding: 6px 5px;314}315ul.nice-list li a {text-decoration: none;}316ul.nice-list li a:hover {text-decoration: underline;}317ul.nice-list span {color: #666;}318 319#sidebar ul.nice-list li,#sidebar ul.nice-list {border-color: #E0E0E0;}320 321 322/* Archives */323.archive-pagination {margin-bottom: 1.6em;}324.archive-pagination a {text-decoration: none;}325.archive-pagination a:hover {text-decoration: underline;}326.archive-post {margin-bottom: 14px;}327.archive-post-date {328 background: #F5F5F5;329 border-bottom: 1px solid #C5C5C5;330 border-right: 1px solid #CFCFCF;331 float: left;332 margin-right: 12px;333 padding: 2px 0 5px;334 text-align: center;335 width: 46px;336}337.archive-post .post-date {338 border: none;339 padding: 0;340}341.archive-post-day {font: normal 1.6em Georgia,serif;}342.archive-post .post-date,.archive-post-title {padding-top: 3px;} 343 344 345/* 346 Thumbnails347------------------------------------------------------------------- */348 349.thumbnails {margin: 0 0 1em -8px;}350.thumbnails a.thumb { 351 background: #DAD6D0;352 display: block;353 float: left;354 margin: 0 0 8px 8px;355 padding: 1px;356}357.thumbnails a.thumb:hover {background: #AAA;}358.thumbnails .thumb img {display: block;}359 360 361/* 362 Box363------------------------------------------------------------------- */364 365.box {366 background: url('img/box.gif') no-repeat left top;367 border-bottom: 1px solid #DFDFDA;368 border-top: 1px solid #FFF;369 padding: 16px 20px 0;370}371.box a {color: #951;}372.box a:hover {color: #310;}373.box-title { 374 color: #665;375 font: normal 1.6em sans-serif;376}377.box-content {padding: 8px 0;}378 379 380 381/* 382 Comments 383------------------------------------------------------------------- */384 385div.comment-list {386 border-top: 1px solid #EEE; 387 margin: 1em 0 2em;388}389 390.comment {391 border-bottom: 1px solid #EEE;392 padding: 10px 8px 0;393}394.comment-date {font-size: 0.9em;}395.comment-date a {396 color: #567;397 text-decoration: none;398}399.comment-date a:hover {400 color: #001;401 text-decoration: underline;402}403.comment-body {padding-top: 4px;}404 405.comment-gravatar {width: 48px;}406.comment-gravatar img {407 background: #FFF;408 border: 1px solid #DDD;409 padding: 2px;410}411 412 413/* 414 Layout 415------------------------------------------------------------------- */416 417/* Common */418.center-wrapper {419 width: 960px;420 margin: 0 auto;421}422 423/* Header */424 425#header-wrapper {background: #2F2F2F url('img/header.gif') repeat-x left top;}426#header-wrapper-2 {background: url('img/header-wrapper-2.gif') repeat-y center top;}427#header {428 background: #333 url('img/header.gif') repeat-x left top;429 padding: 32px 32px 0 46px;430}431 432#help-wrapper {433 background: url('img/help.gif') no-repeat left top;434 height: 39px;435 margin: -8px 0 0 auto;436 width: 290px;437}438#help {439 color: #666;440 font-size: 1.2em;441 padding: 10px 28px 0 32px;442}443#help a {444 color: #999;445 text-decoration: none;446}447#help a:hover {color: #DDD;}448 449#help span.text-separator {450 color: #444;451 padding: 0 7px;452}453 454#logo {color: #FFF;}455#site-title a {text-decoration: none;}456#site-title, #site-title a {color: #FFF;}457#site-title span, #site-title a span {color: #DDD;}458#site-slogan {459 color: #B58361;460 font-size: 1.3em;461}462 463 464/* Navigation */465 466ul.tabbed {467 display: inline;468 margin: 0;469 padding: 0;470}471ul.tabbed li {472 float: left;473 list-style: none;474}475ul.tabbed a {text-decoration: none;}476 477#navigation-wrapper {background: url('img/navigation.gif') repeat-x left top;}478#navigation-wrapper-2 {background: url('img/navigation-wrapper-2.gif') no-repeat center top;}479#navigation {480 background: url('img/navigation.gif') repeat-x left top;481 min-height: 46px;482 padding: 0 8px;483}484 485#navigation a {486 color: #EAE6DD;487 display: block;488 font-weight: bold;489 font-size: 1.3em;490 padding: 12px 12px 11px;491}492#navigation a:hover {color: #FFF;}493#navigation li.current_page_item a, #navigation li.current_page_parent a {color: #FFE;}494#navigation li.current_page_item a {background: url('img/navigation-arrow-2.gif') no-repeat center bottom;}495#navigation li.current_page_parent a {background: url('img/navigation-arrow.gif') no-repeat center bottom;}496 497 498/* Subnav */499 500#subnav-wrapper {background: #E9E9E9 url('img/subnav-wrapper.gif') repeat-x left bottom;}501#subnav-wrapper-2 {background: url('img/subnav-wrapper-2.gif') no-repeat center bottom;}502#subnav {padding: 0 8px;}503 504#subnav a {505 color: #666;506 display: block;507 font: bold 1.1em sans-serif;508 padding: 12px 12px;509}510#subnav a:hover {color: #111;}511#subnav li.current_page_item a {color: #333;}512 513 514/* Content */515 516.content {font-size: 1.1em;}517#content-wrapper {background: #F6F6F6 url('img/content-wrapper.gif') repeat-y center top;}518.content#content-two-columns {background: url('img/content-two-columns.gif') repeat-y left top;}519 520 521/* Main */522 523#main-wrapper {524 float: right;525 width: 698px;526}527#main {padding: 24px;}528 529#main .text-separator, #featured .text-separator {530 color: #AAA;531 padding: 0 5px;532}533 534 535/* Sidebar */536 537#sidebar-wrapper {538 float: left;539 width: 260px;540}541 542 543/* Footer */544 545#footer-wrapper {546 background: url('img/footer-wrapper.gif') no-repeat center bottom;547 border-top: 1px solid #999;548 padding-bottom: 20px;549}550#footer {551 background: #808080;552 font-size: 1.1em;553 padding: 12px 16px;554}555#footer a {556 color: #DDD;557 text-decoration: none;558}559#footer a:hover {color: #FFF;}560#footer span.text-separator {561 color: #999;562 padding: 0 3px;563}564 565/* Bottom */566 567#bottom {568 color: #666;569 padding: 0 6px 12px;570 margin-top: -6px;571}572#bottom a {573 color: #555;574 text-decoration: none;575}576#bottom a:hover, #bottom .right a:hover {color: #002;}577#bottom span.text-separator {578 color: #888;579 padding: 0 3px;580}581#bottom .right, #bottom .right a {color: #777;}582 583 584/* Featured Box */585#featured-wrapper {586 background: url('img/gradient-light.gif') repeat-x left bottom;587 border-bottom: 1px solid #E0E0E0;588 padding-bottom: 22px;589}590#featured {padding: 42px 124px 12px 48px;}591 592#featured h2 {593 font: normal 3em sans-serif;594 margin: 0;595}596#featured h2 span {color: #43B16C;}597 598 599/* 600 Misc overriding classes601------------------------------------------------------------------- */602 603/* Border */604 605.noborder {border: 0;}606.notborder {border-top: 0;}607.norborder {border-right: 0;}608.nobborder {border-bottom: 0;}609.nolborder {border-left: 0;}610 611/* Margin */612 613.nomargin {margin: 0;}614.notmargin {margin-top: 0;}615.normargin {margin-right: 0;}616.nobmargin {margin-bottom: 0;}617.nolmargin {margin-left: 0;}618 619/* Padding */620 621.nopadding {padding: 0;}622.notpadding {padding-top: 0;}623.norpadding {padding-right: 0;}624.nobpadding {padding-bottom: 0;}625.nolpadding {padding-left: 0;}626 </style>627 <meta content="text/html; charset=utf-8" http-equiv="content-type">628 <meta content="Frequently Asked Questions (F.A.Q)" name="description">629 <meta content name="keywords">630 <meta content="Michael Zacharias" name="author">631 <title>632 Mz Ultimate Tools633 </title>634 </head>635 <body id="top">636 <div id="header-wrapper">637 <div id="header-wrapper-2">638 <div class="center-wrapper">639 <div id="header">640 <div id="logo">641 <h1 id="site-title">642 <a>643 Mz Ultimate Tools644 <span>645 by Michael Zacharias646 </span>647 </a>648 </h1>649 <h2 id="site-slogan">650 Get the ultimate PC performance!651 </h2>652 </div>653 <div id="help-wrapper">654 <div id="help">655 <div align="center">656 <a>657 Contact658 </a>659 <span class="text-separator">660 |661 </span>662 <a>663 F.A.Q664 </a>665 <span class="text-separator">666 |667 </span>668 <a>669 Donate670 </a>671 </div>672 </div>673 </div>674 </div>675 </div>676 </div>677 </div>678 <div id="navigation-wrapper">679 <div id="navigation-wrapper-2">680 <div class="center-wrapper">681 <div id="navigation">682 <ul class="tabbed">683 <li class="tabbed">684 <a class="tabbed">685 Home686 </a>687 </li>688 <li>689 <a>690 Products691 </a>692 </li>693 <li>694 <a>695 News696 </a>697 </li>698 <li>699 <a>700 Awards701 </a>702 </li>703 </ul>704 <div class="clearer">705 706 </div>707 </div>708 </div>709 </div>710 </div>711 <div id="content-wrapper">712 <div class="center-wrapper">713 <div class="content">714 <div id="main">715 <h3 align="center" class="post-body">716 <strong>717 Frequently Asked Questions (F.A.Q):718 </strong>719 </h3>720 <p>721 722 </p>723 <p class="notice">724 <strong>725 When i try to start an application, i get the following error: "Application failed to initialize properly error".726 </strong>727 <br>728 - To use Mz Ultimate Tools on Windows XP (or to an earlier Windows operating system), you must have Microsoft729 <a>730 .Net Framework 2.0731 </a>732 or a733 <a>734 higher versio735 </a>736 n installed.737 </p>738 <p class="success">739 <strong>740 Do Windows Vista-7 users have to download and install .Net Framework 2.0?741 </strong>742 <br>743 -No. Microsoft .Net FRAMework is already installed on these operating systems.744 </p>745 <p class="notice">746 <strong>747 When i try to start or while i am working in an application i get a "System.ArgumentException" errror.748 </strong>749 <br>750 -This is probably a bug. Please, e-mail me the details of this window to fix this error.751 </p>752 <p class="success">753 <strong>754 Do i have to pay for Mz Ultimate Tools?755 </strong>756 <br>757 -No, Mz Ultimate Tools are 100% freeware. However, donations are highly appriciated!758 </p>759 <p class="notice">760 <strong>761 Are Mz Ultimate Tools 100% clean of malware?762 </strong>763 <br>764 -Yes, Mz Ultimate Tools are 100% free of malware (Please, refer to the awards page, for more information).765 </p>766 <p class="success">767 <strong>768 Are Mz Ultimate Tools overclocking my computer?769 </strong>770 <br>771 - No, Mz Ultimate Tools do not overclock your hardware. However, some of them are changing some of your Windows registry or system settings, this is 100% hardware safe!772 </p>773 <p>774 775 </p>776 <p>777 *Feel free to contact me. All comments and suggestions are accepted!778 </p>779 </div>780 </div>781 </div>782 </div>783 <div id="footer-wrapper">784 <div class="center-wrapper">785 <div id="footer">786 <div class="left">787 <a>788 Home789 </a>790 <span class="text-separator">791 |792 </span>793 <a>794 Products795 </a>796 <span class="text-separator">797 |798 </span>799 <a>800 News801 </a>802 <span class="text-separator">803 |804 </span>805 <a>806 Awards807 </a>808 <span class="text-separator">809 |810 </span>811 <a>812 Contact813 </a>814 </div>815 <span class="left">816 <a>817 s818 </a>819 <span class="text-separator">820 |821 </span>822 <a>823 Donate824 </a>825 </span>826 <div class="right">827 <a>828 Top ^829 </a>830 </div>831 <div class="clearer">832 833 </div>834 </div>835 </div>836 </div>837 <div id="bottom">838 <div class="center-wrapper">839 <div class="left">840 © 2010 mztweak.com - Mz Ultimate Tools841 </div>842 <div class="right">843 <a>844 Website template845 </a>846 by847 <a>848 Arcsin849 </a>850 </div>851 <div class="clearer">852 853 </div>854 </div>855 </div>856 <!-- Piwik -->857 <noscript>858 <p>859 <img alt src="rick.jpg" style="border:0">860 </p>861 </noscript>862 <!-- End Piwik Tracking Code -->863 </body>864</html>865