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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">2<html xmlns="">3 <head>4 <style>5 @charset "utf-8";6 7/* <<<---------->>> GLOBAL <<<----------->>>*/8 9* {10 margin: 0;11 padding: 0;12 border: none;13 text-decoration: none;14 outline: none;15}16 17html { 18 min-height: 100%; margin-bottom: 1px; /* fix for Firefox page shift based on page length*/19 overflow: scroll;20}21 22body {23 color: #333;24 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;25 font-size: 12px;26 line-height: 1.5em;27 text-align: left;28 background: #CCC url(../img/bg-global.jpg) repeat-x scroll center top;29}30 31p {32 margin-bottom: 1.5em;33}34 35a {36 color: #336633;37 border-bottom: 1px dotted;38}39 40a:hover {41 color: #FFF;42 border-bottom: 1px dotted;43 background-color: #709a46;44}45 46a.no_underline {47 border-bottom: 0;48 background-color: transparent;49}50 51a:hover.no_underline {52 border-bottom: 0;53 background-color: transparent;54}55 56ul {57 margin: 0 0 1.5em 1.25em;58 list-style: circle outside;59}60 61strong {62 color: #666;63}64 65.gray_bullet {66 margin: 0 5px;67 color: #666;68}69 70.nobr {71 white-space: nowrap72} 73 74 75/* <<<--------->>> PAGE STRUCTURE <<<----------->>>*/76 77#wrapper {78 margin: 0 auto;79 width: 960px; 80 background: url(../img/bg-wrapper.png) repeat-y;81 overflow: hidden; 82}83 84#container-main {85 margin: 0 auto;86 width: 890px;87 overflow: hidden;88 background: url(../img/bg-container-main.gif) repeat-x center top;89}90 91#container-content {92 margin: 20px auto;93 width: 840px;94 overflow: hidden;95}96 97#column-left {98 margin: 0;99 width: 200px;100 overflow: hidden;101 float: left;102}103 104#column-right {105 margin: 0 0 0 25px;106 width: 615px;107 overflow: hidden;108 float: left;109}110 111#title_pic {112 margin: 0 0 1.5em 0;113 width: 615px;114 overflow: hidden;115}116 117#map_box {118 width: 518px;119 overflow: hidden;120 border: 1px solid #b8d19e;121}122 123 124/* <<<---------->>> HEADER <<<----------->>>*/125 126#header {127 display: block;128 margin: 0 auto;129 width: 890px;130 height: 70px;131 overflow: hidden; 132}133 134#logo {135 margin: 18px 25px 0 25px;136 height: 35px;137 width: 200px;138}139 140 141/* <<<---------->>> HOME PAGE <<<----------->>>*/142 143#home_display {144 margin: 0 0 10px 0;145 width: 840px;146 height: 300px;147 clear: both;148 overflow: hidden;149 background: url(../img/home_pic-display.jpg) no-repeat left center; 150}151 152#home_demo {153 margin: 205px 0 10px 0;154 width: 610px;155 height: 75px;156 float: left;157 overflow: hidden; 158}159 160#home_demo #demo_bug {161 margin: 0 0 0 20px;162 width: 153px;163 height: 75px;164 float: left;165 overflow: hidden;166}167 168#home_demo #demo_bug a {169 background-color: transparent;170 border-bottom: 0;171}172 173#home_demo #demo_bug a:hover {174 background-color: transparent;175 background-image: none;176}177 178#home_demo #demo_bug-text {179 margin: 0 0 0 10px;180 width: 200px;181 height: 75px;182 font-size: 11px;183 float: left;184 overflow: hidden;185}186 187#home_display-tabs {188 margin: 0;189 width: 220px;190 height: 300px;191 overflow: hidden;192 background-image: url(../img/home-display-tabs.png);193 float: right;194}195 196#home_display-tabs ul {197 margin: 46px 0 0 0;198 width: 220px;199 height: 38px;200 float: right;201}202 203#home_display-tabs li a {204 margin: 0 0 2px 0;205 width: 220px;206 height: 38px;207 color: #333;208 display: block;209 line-height: 38px;210 border-bottom: 0;211}212 213#home_display-tabs li a:hover {214 color: #FFF;215 background-image: url(../img/home-display-tab_on.jpg);216}217 218#home_display-tabs li a .text {219 margin: 0 0 0 20px;220}221 222#webinar_container {223 display: block;224 margin: 0 0 10px 0;225 width: 840px;226 color: #000;227 overflow: hidden;228 background: #FFF url(../img/bg-home-webinars_box.gif) repeat-x center bottom; 229}230 231.home-webinar {232 display: block;233 margin: 0;234 font-size: 11px;235 width: 840px;236 overflow: hidden;237}238 239#home-webinar-title_bar {240 display: block;241 margin: 0;242 width: 840px;243 height: 40px;244}245 246.home-webinar-title {247 display: inline; /* <---Solution for bug IE6 */ 248 margin: 0 0 11px 11px;249 float: left;250 width: 198px;251 overflow: hidden;252 font-size: 11px;253}254 255.home-webinar-title strong {256 color: #663;257}258 259.home-webinar-left {260 display: inline; /* <---Solution for bug IE6 */ 261 margin: 0 0 11px 12px;262 float: left;263 width: 298px;264 overflow: hidden;265 background-color: #FFF;266}267 268.home-webinar-right {269 display: inline; /* <---Solution for bug IE6 */ 270 margin: 0 0 11px 12px;271 float: left;272 width: 298px;273 overflow: hidden;274 background-color: #FFF;275}276 277.home-webinar p {278 margin: 1em;279}280 281#home-blurbs_box {282 margin: 0 auto 0 auto;283 width: 840px;284 overflow: hidden;285 background: #fff url(../img/bg-home-blurb_box.gif) repeat-x center bottom;286}287 288#home-blurbs_box a {289 color: #333;290 border-bottom: 0;291}292 293#home-blurbs_box a:hover {294 color: #FFF;295 border-bottom: 0;296 background-color: #709a46;297}298 299.home-blurb-first {300 margin: 0;301 width: 201px;302 float: left;303 overflow: hidden304}305 306.home-blurb {307 margin: 0 auto 0 12px;308 width: 201px;309 float: left;310 overflow: hidden311}312 313#home-blurbs_box p {314 margin: .5em 1em 1em 1em;315 font-size: 11px;316}317 318 319/* <<<---------->>> HEADINGS <<<----------->>>*/320 321h1 {322 margin: 1.5em 0 .5em 0;323 font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;324 font-weight: lighter;325 font-size: 28px;326}327 328h2 {329 margin: 1.5em 0 .5em 0;330 font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;331 font-weight: lighter;332 color: #360;333}334 335h3 {336 margin: 1.5em 0 .5em 0;337 font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;338 color: #666;339}340 341#page_title {342 margin: 0 0 20px 0;343 padding: 0;344 width: 615px;345 line-height: 60px;346 height: 60px;347 border-top: 1px solid #ccc;348 border-bottom: 1px solid #ccc;349 font-size: 28px;350 font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;351 overflow: hidden;352}353 354#page_title a {355 border-bottom-style: none;356}357 358#page_title a:hover {359 background-color: transparent;360}361 362.page_title-text {363 margin: 0;364 width: 445px;365 height: 60px;366 line-height: 60px;367 font-size: 28px;368 font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;369 float: left;370}371 372 373/* <<<---------->>> BLURBS - INSIDE PAGES <<<----------->>>*/374 375.blurb_row {376 display: block;377 margin: 0 0 1em 0;378 font-size: 11px;379 width: 615px;380 overflow: hidden;381}382 383.blurb-left {384 margin: 0 0 5px 0;385 float: left;386 font-size: 11px;387 width: 298px;388 overflow: hidden;389 border: 1px solid #b8d19e;390 background: #FFF url(../img/bg-blurb.jpg) repeat-x center bottom;391}392 393.blurb-right {394 margin: 0 0 5px 15px;395 float: left;396 font-size: 11px;397 width: 298px;398 overflow: hidden;399 border: 1px solid #b8d19e;400 background: #FFF url(../img/bg-blurb.jpg) repeat-x center bottom;401}402 403.blurb-full {404 margin: 0 0 5px 0;405 float: left;406 font-size: 11px;407 width: 613px;408 overflow: hidden;409 border: 1px solid #b8d19e;410 background: #FFF url(../img/bg-blurb.jpg) repeat-x center bottom;411}412 413.blurb_row p {414 margin: 1em;415}416 417.read_more {418 display: inline; /* <---Solution for bug IE6 */ 419 margin: 0 1em 10px 0;420 width: 90px;421 height: 16px;422 float: right;423}424 425.read_more a {426 border-bottom-style: none;427}428 429 430/* <<<---------->>> NAVIGATION <<<----------->>>*/431 432/* NAVIGATION - main nav433----------------------------------------- */434#nav-main {435 display: block;436 width: 890px;437 height: 50px;438}439 440#nav-main .nav-main-text {441 width: 890px;442 height: 50px;443 line-height: 50px;444 font-size: 16px;445 letter-spacing: 1.25px;446 text-align: center;447}448 449#nav-main .nav-main-text a {450 padding: 6px 14px;451 color: #363;452 border-bottom: 0;453}454 455#nav-main .nav-main-text a:hover {456 border-bottom: 0;457 background: transparent url(../img/bg-nav.jpg) repeat-x center bottom;458}459 460#nav-main .nav-main-text a.here {461 background: url(../img/bg-nav.jpg) repeat-x center bottom;462}463 464/* NAVIGATION - sub nav465----------------------------------------- */466 467#nav-sub ul {468 margin: 0;469 float: left;470 width: 200px;471 list-style: none outside; 472}473 474#nav-sub li {475 display: block;476 font-size: 12px;477}478 479#nav-sub a {480 display: block;481 padding: 14px 0 14px 12px;482 border-bottom: 1px solid #CCC;483}484 485#nav-sub a:hover {486 display: block;487 color: #363;488 border-bottom: 1px solid #CCC;489 background: transparent url(../img/bg-nav.jpg) repeat-x center bottom;490}491 492#nav-sub a.here {493 display: block;494 color: #363;495 border-bottom: 1px solid #CCC;496 background: transparent url(../img/bg-nav.jpg) repeat-x center bottom;497}498 499#nav-sub a.first {500 display: block;501 padding: 14px 0 14px 12px;502 border-top: 1px solid #ccc;503 border-bottom: 1px solid #ccc;504 background-color: transparent;505 color: #363;506}507 508#nav-sub a.here-first {509 display: block;510 padding: 14px 0 14px 12px;511 border-top: 1px solid #ccc;512 border-bottom: 1px solid #ccc;513 background-color: transparent;514 color: #363;515 background: url(../img/bg-nav.jpg) repeat-x center bottom;516}517 518 519/* <<<---------->>> FORMS <<<----------->>>*/520 521input {522 background-color: #e3ecdb;523 padding: 2px;524}525 526select {527 background-color: #e3ecdb;528 padding: 2px;529}530 531textarea {532 background-color: #e3ecdb;533 padding: 2px;534}535 536#contact_box {537 margin: 2em 0;538 width: 520px;539 overflow: hidden;540 background: url(../img/bg-blurb.jpg) repeat-x center bottom;541}542 543#contact_form {544 margin: 0 auto;545 width: 380px;546 overflow: hidden;547}548 549.row {550 margin: 0 0 8px 0; 551 width: 520px;552 overflow: hidden;553}554 555.left {556 width: 105px;557 float: left;558}559 560.field {561 width: 274px;562 float: left;563}564 565.submitbtn img {566 margin: 0 auto;567}568 569 570/* <<<---------->>> FOOTER <<<----------->>>*/571 572#footer {573 margin: 0 auto;574 width: 890px;575 overflow: hidden;576 background: url(../img/bg-footer.jpg) repeat-x center top;577}578 579#footer-text {580 margin: 24px 21px 10px 250px;581 font-size: 11px;582 text-align: left;583}584 585#footer-text p {586 margin-bottom: 1em;587}588 589#home-footer-text {590 margin: 24px auto 10px auto;591 font-size: 11px;592 text-align: center;593}594 595#home-footer-text p {596 margin-bottom: 1em;597}598 599#footer strong {600 margin: 0 5px 0 0;601 color: #666;602}603 604 605/* <<<---------->>> MISC <<<----------->>>*/606 607#column-right li {608 margin: 0 0 .75em .5em;609 font-size: 11px;610}611 612#column-right .intro_copy {613 margin: 0 0 20px 0;614 font-size: 16px;615 line-height: 1.25em;616 color: #666;617}618 619#section_title {620 margin: 0 0 20px 0;621 width: 615px;622 height: 275px;623}624 625#section_back-solutions {626 margin: 0;627 width: 615px;628 height: 275px;629 background-image: url(../img/section-solutions.jpg);630}631 632#section_back-about {633 margin: 0;634 width: 615px;635 height: 275px;636 background-image: url(../img/section-about.jpg);637}638 639#section_back-support {640 margin: 0;641 width: 615px;642 height: 275px;643 background-image: url(../img/section-support.jpg);644}645 646#section_back-free_demo {647 margin: 0;648 width: 615px;649 height: 275px;650 background-image: url(../img/section-free_demo.jpg);651}652 653.demo_bug-section {654 margin: 234px 12px 0 0;655 width: 170px;656 height: 26px;657 float: right;658}659 660.demo_bug-section a {661 border-bottom-style: none;662}663 664.demo_bug-section a:hover {665 background-color: transparent;666}667 668#page-base_cap {669 margin: 0 auto;670 width: 960px;671 overflow: hidden;672}673 </style>674 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">675 <meta content="RemedyMD, BariEHR for Surgeons, BariEHR for Physicians, EndoEHR, DietitianEHR, RemedyPractice, myHealthManager, ehr, e.h.r., electronic health record, electronic healthcare record, electronic health care record, health care, healthcare, health-care, bariatric, predictive informatics, healthcare software, patient data, web-based software" name="keywords">676 <meta content="RemedyMD's intelligent EHR software enables medical professionals to make better decisions that ultimately lead to better outcomes" name="description">677 <meta content="index,follow" name="robots">678 <title>679 Solutions - RemedyEHR680 </title>681 </head>682 <body>683 <!--wrapper - open -->684 <div id="wrapper">685 <!--container-main - open -->686 <div id="container-main">687 <!--header - open -->688 <div id="header">689 <div id="logo">690 <a class="no_underline">691 <img alt="RemedyEHR" height="35" src="rick.jpg" width="200">692 </a>693 </div>694 </div>695 <!--header - close -->696 <!--main nav - open -->697 <div id="nav-main">698 <div class="nav-main-text">699 <a>700 Home701 </a>702 <a class="here">703 Solutions704 </a>705 <a>706 About Us707 </a>708 <a>709 Support710 </a>711 <a>712 Contact Us713 </a>714 <a>715 Free Demo716 </a>717 </div>718 </div>719 <!--main nav - close -->720 <!--container-content - open -->721 <div id="container-content">722 <!--left column - open -->723 <div id="column-left">724 <div id="nav-sub">725 <ul>726 <li>727 <a class="here-first">728 Overview729 </a>730 </li>731 <li>732 <a>733 BariEHR for Surgeons734 </a>735 </li>736 <li>737 <a>738 BariEHR for Physicians739 </a>740 </li>741 <li>742 <a>743 EndoEHR744 </a>745 </li>746 </ul>747 </div>748 </div>749 <!--left column - close -->750 <!--right column - open -->751 <div id="column-right">752 <!--open section title -->753 <div id="section_title">754 <div id="section_back-solutions">755 <div class="demo_bug-section">756 <a>757 <img alt="Free Demo" height="26" src="rick.jpg" width="170">758 </a>759 </div>760 </div>761 </div>762 <!--close section title -->763 <p class="intro_copy">764 With RemedyEHR, you can access your patient files anytime, anywhere — from any computer with Web access.765 </p>766 <p>767 Do you have more than one office? With RemedyEHR, that's no problem.768 </p>769 <!--blurb block - open -->770 <div class="blurb_row">771 <div class="blurb-left">772 <p>773 <strong>774 BariEHR for Surgeons775 </strong>776 <br>777 BariEHR helps bariatric surgeons improve practice operations and outcomes.778 </p>779 <div class="read_more">780 <a>781 <img alt="read more" height="16" src="rick.jpg" width="90">782 </a>783 </div>784 </div>785 <div class="blurb-right">786 <p>787 <strong>788 BariEHR for Physicians789 </strong>790 <br>791 Bariatric physicians need an EHR system that can keep pace. That's what we provide.792 </p>793 <div class="read_more">794 <a>795 <img alt="read more" height="16" src="rick.jpg" width="90">796 </a>797 </div>798 </div>799 </div>800 <div class="blurb_row">801 <div class="blurb-left">802 <p>803 <strong>804 EndoEHR805 </strong>806 <br>807 Many EHRs are "one size fits all." That's not the case with EndoEHR.808 </p>809 <div class="read_more">810 <a>811 <img alt="read more" height="16" src="rick.jpg" width="90">812 </a>813 </div>814 </div>815 <div class="blurb-right">816 <p>817 <strong>818 DietitianEHR819 </strong>820 <br>821 DietitianEHR is designed exclusively for the needs of dietitians and nutritionists.822 </p>823 <div class="read_more">824 <a>825 <img alt="read more" height="16" src="rick.jpg" width="90">826 </a>827 </div>828 </div>829 </div>830 <div class="blurb_row">831 <div class="blurb-left">832 <p>833 <strong>834 RemedyPractice835 </strong>836 <br>837 RemedyPractice integrates with our EHRs to provide a solution for your entire office.838 </p>839 <div class="read_more">840 <a>841 <img alt="read more" height="16" src="rick.jpg" width="90">842 </a>843 </div>844 </div>845 <div class="blurb-right">846 <p>847 <strong>848 myHealthManager849 </strong>850 <br>851 myHealthManager empowers patients to take an active part in managing their health.852 </p>853 <div class="read_more">854 <a>855 <img alt="read more" height="16" src="rick.jpg" width="90">856 </a>857 </div>858 </div>859 <div class="blurb-left">860 <p>861 <strong>862 RemedyApps863 </strong>864 <br>865 RemedyApps help connect patients with their providers by creating mobile apps for your practice.866 </p>867 <div class="read_more">868 <a>869 <img alt="read more" height="16" src="rick.jpg" width="90">870 </a>871 </div>872 </div>873 </div>874 <!--blurb block - close -->875 </div>876 <!--right column - close -->877 </div>878 <!--container-content - close -->879 <!--footer - open -->880 <div id="footer">881 <div id="footer-text">882 <p>883 <a>884 Home885 </a>886 |887 <a>888 Solutions889 </a>890 |891 <a>892 About Us893 </a>894 |895 <a>896 Support897 </a>898 |899 <a>900 Contact Us901 </a>902 |903 <a>904 Free Demo905 </a>906 </p>907 <p>908 <strong>909 RemedyEHR910 </strong>911 [ADDRESS REDACTED]912 <br>913 <strong>914 Phone915 </strong>916 [PHONE REDACTED]917 <span class="gray_bullet">918 •919 </span>920 <strong>921 Fax922 </strong>923 [PHONE REDACTED]924 <span class="gray_bullet">925 •926 </span>927 <strong>928 Email929 </strong>930 <a>931 Sales932 </a>933 |934 <a>935 Tech Support936 </a>937 </p>938 <p>939 © 2014 RemedyEHR940 <span class="gray_bullet">941 •942 </span>943 site design by944 <a>945 Bill Cook946 </a>947 </p>948 </div>949 </div>950 <!--footer - close -->951 </div>952 <!--container-main - close -->953 </div>954 <!--wrapper - close -->955 <!--base cap - open -->956 <div id="page-base_cap">957 <img alt height="40" src="rick.jpg" width="960">958 </div>959 <!--base cap - close -->960 </body>961</html>962