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>3 <head>4 <style>5 * :focus {6 outline: 0;7}8 9:link,:visited {10 text-decoration: none11}12 13ul, ol, li {14 list-style: none15}16 17h1, h2, h3, h4, h5, h6, pre, code {18 font-size: 1em;19}20 21ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {22 margin: 0;23 padding: 024}25 26a img,:link img,:visited img {27 border: none28}29 30address {31 font-style: normal32}33 34html, body {35 height: 100%;36 margin: 0;37 padding: 0;38}39 40body {41 /* font-family: "Helvetica", sans-serif; */42 font-family: 'PT Mono', serif;43 font-size: 14px;44 background-color: #000;45 color:#111;46 padding-bottom:1px;47}48 49h1, h2, h3, h4, h5, h6 {50 padding:5px 0;51 color:#0095c9;52 53}54 55p {56 padding:5px 0;57 line-height:1.5em;58}59 60h1 {61 font-size: 22px;62}63 64h2 {65 font-size: 16px;66}67 68img {69 margin:5px;70 max-width:100%;71}72 73img#bg {74 margin:0;75}76 77/* a:link, a:visited { */78a {79 color: #EEE;80}81 82p a {83 color:#0095c9;84}85 86a:hover, a:active, a:focus {87 text-decoration: underline;88}89 90li {91 padding:5px 0;92}93 94#bg {95 min-height: 100%;96 min-width: 1024px;97 width: 100%;98 height: auto;99 position: fixed;100 top: 0;101 left: 0;102 z-index:-1;103}104 105#page {106 overflow: auto;107 position: relative;108}109 110#splash {111 width: 450px;112 margin: 50px auto 0 auto;113 text-align: center;114}115 116#menuwrap {117 position: fixed;118 bottom: 10px;119 /* background: url(../img/trans.png); */120 background-color:rgba(0, 0, 0, 0.6);121 height: 33px;122 width: 100%;123}124 125#menu {126 margin-left: 100px;127 color: #EEE;128}129 130#menu li {131 float: left;132 padding: 5px 0px 0px 0px;133}134 135#menu a:link, #menu a:visited {136 font-size: 14px;137 color: #EEE;138 padding: 5px 30px 12px 30px;139}140 141#menu a:hover, #menu a:active, #menu a:focus {142 text-decoration: none;143 color: #000;144 background-color: #EEE;145}146 147 148#wrapper {149 overflow: auto;150 position: relative;151 width: 960px;152 margin: 30px auto 0 auto;153}154 155#wrapper.each-other-wrapper {156 width: unset;157}158 159#content_right {160 width: 520px;161 float: right;162 margin-bottom: 100px;163}164 165.each-other-wrapper #content_right {166 width: 570px;167}168 169#content_left {170 width: 390px;171 float: left;172 margin-bottom: 100px;173}174 175div.content {176 color: #EEE;177 /* background:url(../img/trans.png); */178 background-color:rgba(0, 0, 0, 0.6);179 margin: 30px 0 0 0;180 padding:40px;181 overflow:hidden;182}183 184.each-other-content {185 padding-bottom: 8rem;186}187 188.each-other-content h2 {189 margin-top: 1.5rem;190}191 192.each-other-content li {193 list-style: circle;194 margin-left: 2rem;195}196 197form {198 padding: 40px;199}200 201form input {202 float:left;203 margin-right: 30px;204 width: 160px;205 padding: 5px;206 border: 1px solid #CCC;207}208 209form label {210 width:120px;211 float:left;212}213 214form select {215 float:left;216 width:160px;217 padding:4px;218 margin-right:30px;219}220input[type="file"] {221 width:400px;222}223 224textarea {225 float:left;226 padding: 5px;227 width: 260px;228 height: 150px;229 margin-right: 40px;230 border: 1px solid #CCC;231}232 233input[type="submit"] {234 color: #000;235 background-color:#0095c9;236 border: none;237 width:auto;238 margin:10px 5px;239}240 241input[type="submit"]:hover {242 background-color:#000;243 color:#EEE;244}245 246li.form_error {247 /* font-size:10px; */248 background-color:#BC5467;249 padding:10px;250 margin-top:-10px;251 margin-bottom:10px;252}253 254.selected {255 background-color:#0095c9;256 color:#000;257}258 259span {260 /* color:#0095c9; */261}262 263.clear {264 clear: both;265}266 267.small_input {268 width:70px;269}270 271.big_input {272 width:200px;273}274 275.top_100 {276 margin-top:100px;277}278 279ul.list {280 margin-bottom:20px;281}282 283ul.list ul {284 margin-left:10px;285}286 287div.container {288 /* padding:10px; */289}290 291h1 a:hover, h2 a:hover, h3 a:hover {292 /* text-decoration:none; */293}294 295a.continue {296 font-size:14px;297 font-style:italic;298}299 300/* contact icons */301ul.icons {302 margin-left:-5px;303}304 305ul.icons li {306 float:left;307}308 309ul.icons img {310 width:32px;311 height:32px;312}313 314/* player */315 316#player ul#playlist {317 position:absolute;318 margin:0px 18px;319 display:none;320 width:250px;321 background-color:rgba(0, 0, 0, 0.8);322 /* background-color:black; */323 padding:10px;324}325 326ul#playlist a:hover {327 color:#0088cc;328}329 330ul#playlist a.current_track {331 color:#0088cc;332}333 334div#menu #player {335 margin-top:-12px;336}337 338div#menu #player li {339 padding:0;340}341 342div#menu #player li a {343 padding:0;344}345 346div#menu #player li a:hover {347 background-color: transparent;348}349 350div#menu #player #playlist li {351 padding:5px;352 float:none;353}354 355#player ul#playlist a {356 font-size:12px;357}358 359#player:hover ul#playlist {360 display:block;361}362 363div#menu li#player {364 width:300px;365 padding:15px;366}367 368div.dropdownParent {369 font-size:20px;370 font-weight:bold;371 padding:10px 0;372 cursor:pointer;373}374 375a.preview_play span.icon {376 display:inline-block;377 background:url('/jplayer/images/mute-off.png');378 text-indent:-9999px;379 outline: none;380 width: 30px;381 height: 15px;382 background-position: 10px center;383 background-repeat: no-repeat;384}385 386a.preview_play.active span.icon {387 background-position: -23px center;388}389 390a.preview_play span {391 color:#EEE;392}393 394a.preview_play.active span {395 color:#0095c9;396}397 398a.preview_play:hover {399 text-decoration:none;400}401 402.meta {403 font-size:10px;404}405 406.blog_meta {407 font-style:italic;408}409 410h3.list_header {411 cursor:pointer;412 color:#EEE;413}414 415h3 a , h2 a{416 color:#0095c9;417}418 419 420 421@font-face {422 font-family: 'PT Mono';423 font-style: normal;424 font-weight: 400;425 src: url(http://fonts.gstatic.com/s/ptmono/v13/9oRONYoBnWILk-9AnC8zNg.ttf) format('truetype');426}427 428 429 430* {431 -webkit-box-sizing: border-box;432 -moz-box-sizing: border-box;433 box-sizing: border-box;434}435 436/* GENERAL437----------------------------------------------- */438.jp-jplayer {439 width: 0px;440 height: 0px;441 background-color: #000000;442}443.jp-audio {444 margin: 0 auto;445 width: 400px;446 max-width: 100%;447 padding: 0 20px;448 font-size: 1em;449 font-family: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", sans-serif;450 color: #fff;451 line-height: 1.6;452}453.jp-audio a {454 text-decoration: none;455 color: #d2d6db;456}457.jp-audio a:hover {458 color: #ffffff;459}460.jp-interface {461 position: relative;462 height: 30px;463 width: 100%;464}465/* CONTROLS466----------------------------------------------- */467.jp-controls {468 float: left;469 width: 30px;470 height: 30px;471 list-style-type: none;472 padding: 0;473 margin: 0;474 z-index: 100;475}476.jp-controls:after {477 content: " ";478 position: absolute;479 top: 0;480 left: 30px;481 width: 0;482 height: 30px;483}484.jp-controls li {485 float: left;486}487.jp-controls a {488 position: absolute;489 overflow: hidden;490 text-indent: -9999px;491}492.jp-play,493.jp-pause,494.jp-mute,495.jp-unmute {496 z-index: 1;497 outline: none;498 width: 30px;499 height: 30px;500 background-position: 10px center;501 background-repeat: no-repeat;502}503.jp-play:hover,504.jp-pause:hover,505.jp-mute:hover,506.jp-unmute:hover {507 background-position: -23px center;508}509.jp-play {510 background-image: url('images/play.png');511}512@media all and (-webkit-min-device-pixel-ratio: 1.5) {513 .jp-play {514 background-image: url('images/[EMAIL REDACTED]');515 background-size: auto auto;516 }517}518.jp-pause {519 display: none;520 background-image: url('images/pause.png');521}522@media all and (-webkit-min-device-pixel-ratio: 1.5) {523 .jp-pause {524 background-image: url('images/[EMAIL REDACTED]');525 background-size: auto auto;526 }527}528.jp-mute,529.jp-unmute {530 display: block;531 position: absolute;532 top: 0;533 right: 55px;534}535.jp-mute {536 background-image: url('images/mute-off.png');537}538@media all and (-webkit-min-device-pixel-ratio: 1.5) {539 .jp-mute {540 background-image: url('images/[EMAIL REDACTED]');541 background-size: auto auto;542 }543}544.jp-unmute {545 background-image: url('images/mute-on.png');546}547@media all and (-webkit-min-device-pixel-ratio: 1.5) {548 .jp-unmute {549 background-image: url('images/[EMAIL REDACTED]');550 background-size: auto auto;551 }552}553/* PROGRESS BAR554----------------------------------------------- */555.jp-progress {556 position: absolute;557 padding: 0 95px 0 40px;558 margin-top: 12px;559 margin-bottom: 12px;560 margin-left: 0;561 margin-right: 0;562 width: 100%;563 height: 7px;564}565.jp-seek-bar,566.jp-play-bar {567 width: 0px;568 height: 5px;569 -webkit-border-radius: 1px;570 -khtml-border-radius: 1px;571 -moz-border-radius: 1px;572 -o-border-radius: 1px;573 border-radius: 1px;574}575.jp-seek-bar {576 cursor: pointer;577 position: relative;578 z-index: 999;579 background: #464849;580}581.jp-seek-bar:before {582 content: " ";583 display: block;584 background: transparent;585 /* border: 1px solid; */586 border-color: #212424 #262929 #262929;587 height: 5px;588 width: 100%;589 position: relative;590 top: -1px;591 left: -1px;592 -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);593 -khtml-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);594 -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);595 -o-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);596 box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);597 -webkit-border-radius: 1px;598 -khtml-border-radius: 1px;599 -moz-border-radius: 1px;600 -o-border-radius: 1px;601 border-radius: 1px;602}603.jp-play-bar {604 position: absolute;605 top: 0;606 left: 0;607 -webkit-animation: progress 0.75s linear infinite;608 -moz-animation: progress 0.75s linear infinite;609 -o-animation: progress 0.75s linear infinite;610 -ms-animation: progress 0.75s linear infinite;611 animation: progress 0.75s linear infinite;612}613/* VOLUME BAR614----------------------------------------------- */615.jp-volume-bar {616 float: right;617 z-index: 99;618 position: relative;619 margin: 10px 10px 12px;620 width: 40px;621 height: 7px;622 cursor: pointer;623 background: #262929;624 -webkit-border-radius: 1px;625 -khtml-border-radius: 1px;626 -moz-border-radius: 1px;627 -o-border-radius: 1px;628 border-radius: 1px;629}630.jp-volume-bar-value {631 width: 0px;632 height: 7px;633 /* margin: 1px; */634 -webkit-border-radius: 1px;635 -khtml-border-radius: 1px;636 -moz-border-radius: 1px;637 -o-border-radius: 1px;638 border-radius: 1px;639}640 641.jp-volume-bar-value,642.jp-play-bar {643 -webkit-box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);644 -khtml-box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);645 -moz-box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);646 -o-box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);647 box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);648 -webkit-background-size: 7px 7px;649 -moz-background-size: 7px 7px;650 -o-background-size: 7px 7px;651 background-size: 7px 7px;652 background-color: #0095c9;653 background-repeat: repeat-x;654}655/* Diagonal Background Bars */656.jp-play-bar {657 background-image: -khtml-gradient(linear, left top, left bottom, from(#0095c9), to(#3395c9));658 background-image: -moz-linear-gradient(#0095c9, #3395c9);659 background-image: -ms-linear-gradient(#0095c9, #3395c9);660 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0095c9), color-stop(100%, #3395c9));661 background-image: -webkit-linear-gradient(#0095c9, #3395c9);662 background-image: -o-linear-gradient(#0095c9, #3395c9);663 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095c9', endColorstr='#3395c9', GradientType=0);664 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095c9', endColorstr='#3395c9', GradientType=0)";665 background-image: linear-gradient(#0095c9, #3395c9);666 background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.3)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.3)), color-stop(0.75, rgba(255, 255, 255, 0.3)), color-stop(0.75, transparent), to(transparent));667 background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);668 background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);669 background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);670 background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);671 background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);672}673/* TIME HOLDER674----------------------------------------------- */675.jp-time-holder {676 display: none;677 visibility: hidden;678}679/* TIME HOLDER680----------------------------------------------- */681.jp-toggles {682 display: none;683 visibility: hidden;684}685/* CSS3 ANIMATINS686----------------------------------------------- */687/* Progress Bar Animation */688@-webkit-keyframes progress {689 0% {690 background-position: 0;691 }692 100% {693 background-position: -7px;694 }695}696@-moz-keyframes progress {697 0% {698 background-position: 0;699 }700 100% {701 background-position: -7px;702 }703}704@-ms-keyframes progress {705 0% {706 background-position: 0;707 }708 100% {709 background-position: -7px;710 }711}712@-o-keyframes progress {713 0% {714 background-position: 0;715 }716 100% {717 background-position: -7px;718 }719}720 721 722 723/* Styling for cmsWidgets. */724 725div.dropdownParent {726 cursor:pointer;727 position:relative;728 padding:10px 0;729}730 731div.dropdownParent * {732 padding:0;733 margin:0;734}735 736div.dropdownChild {737 display:none;738 margin-bottom:30px;739}740 741.cmsImageCentre {742 display:block;743 margin-left:auto;744 margin-right:auto;745}746 747.cmsImageLeft {748 float:left;749}750 751.cmsImageRight {752 float:right;753}754 755.clear {756 clear:both;757}758 </style>759 <meta content="Website of Scottish composer Richard Greer." name="description">760 <meta content="Richard, Greer, composer, classical music" name="keywords">761 <meta content="Glynn Forrest" name="author">762 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">763 <title>764 A Polemic Overture - Richard Greer765 </title>766 </head>767 <body>768 <div>769 <img alt="background image" id="bg" src="rick.jpg">770 </div>771 <div id="wrapper">772 <div class="content" id="content_left">773 <div class="cmsWidget cmsWidgetTitle">774 <div class="cmsWidgetContent" style="display: block;">775 <h1>776 Works777 </h1>778 </div>779 </div>780 <ul class="list">781 <ul id="/works">782 <li>783 <a id="67">784 Violin Concerto785 </a>786 </li>787 <li>788 <a id="68">789 Darwin Among The Machines790 </a>791 </li>792 <li>793 <a id="66">794 Each Other795 </a>796 </li>797 <li>798 <a id="65">799 Electric Dreams800 </a>801 </li>802 </ul>803 </ul>804 <ul class="list">805 <li>806 <a>807 <b>808 View by instrumentation809 </b>810 </a>811 </li>812 <li>813 <a>814 <b>815 View by year816 </b>817 </a>818 </li>819 <li>820 <a>821 <b>822 View all823 </b>824 </a>825 </li>826 </ul>827 </div>828 <div class="content" id="content_right">829 <h1>830 A Polemic Overture831 </h1>832 <p class="meta blog_meta">833 (2012)834 <i>835 For 4 Horns in F, 3 Trumpets in C, 2 Tubas, 5 Tenors, 4 Violins836 </i>837 -838 5'839 </p>840 <p>841 This little overture is my parody and comment on political rhetoric.842 </p>843 <p>844 In his 1946 essay845 <a>846 <span>847 ‘Politics and The English Language’848 <span>849 </span>850 </span>851 </a>852 , George Orwell condemns and explores this frivolous relationship with language.853 </p>854 <p>855 I have set an excerpt from the opening of the essay in badly translated German, courtesy of Google Translate.856 </p>857 <p>858 Dedicated to Brendan Toal, for friendship, good times and being the greatest parody-agent I know.859 </p>860 <p>861 Premièred at PLUG 2012. Conducted by Eoin Tonner.862 </p>863 </div>864 </div>865 <div class="clear">866 </div>867 <div id="menuwrap">868 <div id="menu">869 <ul>870 <li>871 <a>872 Home873 </a>874 </li>875 <li>876 <a>877 Bio878 </a>879 </li>880 <li>881 <a class="selected">882 Works883 </a>884 </li>885 <li>886 <a>887 Performances888 </a>889 </li>890 </ul>891 </div>892 </div>893 <!-- Piwik -->894 <!-- End Piwik Code -->895 </body>896</html>897