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 class="js canvas canvastext geolocation crosswindowmessaging no-websqldatabase indexeddb hashchange historymanagement draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers no-applicationcache svg smil svgclippaths fontface" xmlns="">3 <head>4 <style>5 @font-face { 6 font-family: Yanone Kaffeesatz; 7 src: url('../fonts/YanoneKaffeesatz-Regular.eot'); 8 src: local("Yanone Kaffeesatz"), url('../fonts/YanoneKaffeesatz-Regular.ttf'); 9} 10 11@font-face { 12 font-family: News Cycle; 13 src: url('../fonts/NewsCycle-Regular.eot'); 14 src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf'); 15} 16 17html { 18 height: 100%;19}20 21* { 22 margin: 0;23 padding: 0;24}25 26/* tell the browser to render HTML 5 elements as block */27article, aside, figure, footer, header, hgroup, nav, section { 28 display:block;29}30 31body { 32/* font for text in body */33 font: normal .80em arial, sans-serif;34/* background colour - only seen when re-drawing the page */35 background: #fff url(../images/pattern.png) repeat;36/* text colour in body */37 color: #FfF;38}39 40p { 41 padding: 0 0 20px 0;42 line-height: 1.7em;43}44 45img { 46 border: 0;47}48 49h1, h2, h3, h4, h5, h6 { 50/* headings colour #362C20 is white */51 color: #362C20; 52 letter-spacing: 0em;53 padding: 0 0 5px 0;54}55 56h1, h2, h3 { 57 font: normal 140% arial, sans-serif;58 margin: 0 0 15px 0;59 padding: 15px 0 5px 0;60 color: #FFF;61 62}63 64h2 { 65 font-size: 160%;66 padding: 9px 0 5px 0;67}68 69h3 { 70 font-size: 140%;71 padding: 5px 0 0 0;72}73 74h4, h6 { 75 color: #FFF;76 padding: 0 0 5px 0;77 font: normal 160% 'News Cycle', arial, sans-serif;78}79 80h5, h6 { 81 color: #555;82 font: italic 95% arial, sans-serif;83 letter-spacing: normal;84 padding: 0 0 15px 0;85}86 87a, a:hover { 88/* blue colour #09D4FF when hovering menus */89 outline: none;90 text-decoration: underline;91 color: #09D4FF;92}93 94a:hover { 95 text-decoration: none;96}97 98blockquote { 99 margin: 20px 0; 100 padding: 10px 20px 0 20px;101 border: 1px solid #E5E5DB;102 background: #FFF;103}104 105ul { 106 margin: 2px 0 22px 17px;107}108 109ul li { 110 list-style-type: circle;111 margin: 0 0 6px 0; 112 padding: 0 0 4px 5px;113 line-height: 1.5em;114}115 116ol { 117 margin: 8px 0 22px 20px;118}119 120ol li { 121 margin: 0 0 11px 0;122}123 124.left { 125 float: left;126 width: auto;127 margin-right: 10px;128}129 130.right { 131 float: right; 132 width: auto;133 margin-left: 10px;134}135 136.center { 137 display: block;138 text-align: center;139 margin: 20px auto;140}141 142#main, nav, #container, #logo, #site_content, footer { 143 margin-left: auto; 144 margin-right: auto;145}146 147#main {148 margin: 5px auto;149 width: 940px;150 background: transparent;151 padding-bottom: 30px;152}153 154 155header { 156 background: transparent;157 height: 170px;158 margin-bottom: 20px;159}160 161#logo { 162 width: 940px;163 height: 110px;164 background: transparent;165 color: #333;166 padding: 0;167 float: left;}168 169#logo h1, #logo h2 { 170 font: normal 320% 'News Cycle', arial, sans-serif;171 border-bottom: 0;172 text-transform: none;173 margin: 0;174}175 176#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover { 177 padding: 0;178 color: #FFF;179 text-decoration: none;180}181 182#logo_text h1 a .logo_colour { 183/* blue logo #09D4FF change to #00cc00 for WR green */184 color: #00cc00;185}186 187#logo_text a:hover .logo_colour { 188color: #09D4FF;189}190 191#logo_text h2 { 192 font-size: 140%;193 padding: 0 0 0 0;194 color: #FFF;195}196 197nav { 198 height: 44px;199 width: 940px;200 float: right;201 margin: 0 auto 0 auto;202 padding: 10px 0px;203 color: #FFF;204 background: #000;205 border-radius: 7px 7px 7px 7px;206 -moz-border-radius: 7px 7px 7px 7px;207 -webkit-border: 7px 7px 7px 7px; 208} 209 210#site_content { 211 width: 940px;212 overflow: hidden;213 margin: 0 auto 0 auto;214 padding: 0 0 15px 0; 215} 216 217#sidebar_container { 218 float: left;219 width: 248px;220 margin: 10px 0 0 0;221}222 223.sidebar { 224 float: right;225 width: 220px;226 margin: 0 0 17px 0;227 background: #000;228 border-radius: 7px 7px 7px 7px;229 -moz-border-radius: 7px 7px 7px 7px;230 -webkit-border: 7px 7px 7px 7px;231 padding: 0 15px 5px 13px;232}233 234.sidebar h3, .content h1 { 235 padding: 0 15px 20px 0;236 font: 230% 'News Cycle', arial, sans-serif;237 text-shadow: #323232 1px 1px;238 margin: 0 1px;239 color: #FFF;240}241 242.sidebar h3 { 243 color: #FFF;244 font: 250% 'News Cycle', arial, sans-serif;245 padding: 0 15px 5px 0; 246}247 248.sidebar ul { 249 margin: 0 0 15px 0;250} 251 252.sidebar li a, .sidebar li a:hover { 253 color: #555;254 text-decoration: none;255} 256 257.sidebar li a:hover { 258 text-decoration: underline;259} 260 261.sidebar_item, .content_item { 262 padding: 15px 0;263}264 265.content { 266 text-align: left;267 width: 670px;268 float: right;269 font-size: 120%;270}271 272.content ul { 273 margin: 2px 0 22px 0px;274}275 276.content ul li, .sidebar ul li { 277 list-style-type: none;278 background: url(../images/bullet.png) no-repeat;279 margin: 0 0 0 0; 280 padding: 0 0 4px 28px;281 line-height: 1.5em;282}283 284footer { 285 width: 940px;286 font: 170% 'Yanone Kaffeesatz', arial, sans-serif;287 height: 30px;288 padding: 20px 0 20px 0;289 text-align: center;290}291 292footer p { 293 line-height: 1.7em;294 padding: 0 0 10px 0;295 color: #FFF;296}297 298footer a { 299 color: #FFF;300 text-decoration: 1px 1px #FFF;301}302 303footer a:hover { 304 color: #FFF;305 text-shadow: none;306 text-decoration: underline;307}308 309.form_settings { 310 margin: 15px 0 0 0;311}312 313.form_settings p { 314 padding: 0 0 4px 0;315}316 317.form_settings span { 318 float: left; 319 width: 200px; 320 text-align: left;321}322 323.form_settings input, .form_settings textarea { 324 padding: 5px; 325 width: 299px; 326 font: 100% arial; 327 border: 1px solid #D5D5D5; 328 background: #FFF; 329 color: #47433F;330 border-radius: 7px 7px 7px 7px;331 -moz-border-radius: 7px 7px 7px 7px;332 -webkit-border: 7px 7px 7px 7px; 333}334 335.form_settings .submit { 336 font: 140% 'Yanone Kaffeesatz', arial, sans-serif; 337 border: 0; 338 width: 99px; 339 margin: 0 0 0 212px; 340 height: 33px;341 padding: 2px 0 3px 0;342 cursor: pointer; 343 background: #ddd; /* Show a solid color for older browsers */344 background: -moz-linear-gradient(#fff, #ddd);345 background: -o-linear-gradient(#fff, #ddd);346 background: -webkit-linear-gradient(#fff, #ddd);347 -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;348 -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;349 box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;350 border: 1px solid #ddd;351 border-radius: 7px 7px 7px 7px;352 -moz-border-radius: 7px 7px 7px 7px;353 -webkit-border: 7px 7px 7px 7px;354 color: #222;355 text-shadow: 1px 1px #FFF;356}357 358.form_settings textarea, .form_settings select { 359 font: 100% arial; 360 width: 299px;361}362 363.form_settings select { 364 width: 310px;365}366 367.form_settings .checkbox { 368 margin: 4px 0; 369 padding: 0; 370 width: 14px;371 border: 0;372 background: none;373}374 375.separator { 376 width: 100%;377 height: 0;378 border-top: 1px solid #D9D5CF;379 border-bottom: 1px solid #FFF;380 margin: 0 0 20px 0;381}382 383table { 384 margin: 10px 0 30px 0;385}386 387table tr th, table tr td { 388 background: #BBB;389 color: #FFF;390 padding: 7px 4px;391 text-align: left;392}393 394table tr td { 395 background: #DDD;396 color: #444;397 border-top: 1px solid #FFF;398}399 400/* Image Transitions */401ul#images {402 margin: 0 15px 10px 0;403 padding: 0;404 list-style: none;405 position: relative;406}407 408ul#images li {409 display: block;410 overflow: hidden;411 padding: 0;412 float: left;413 width: 155px;414 height: 300px;415}416 417/**418Stylesheet for SooperFish by www.SooperThemes.com419Author: Jurriaan Roelofs420**/421 422/* Configuration of menu width */423html body ul.sf-menu ul,html body ul.sf-menu ul li { 424 width: 200px;425}426 427html body ul.sf-menu ul ul { 428 margin: 0 0 0 200px;429}430 431/* Framework for proper showing/hiding/positioning */432ul.sf-menu,ul.sf-menu * { 433 margin: 0;434 padding: 0;435}436 437ul.sf-menu { 438 display: block;439 position: relative;440}441 442ul.sf-menu li { 443 display: block;444 list-style: none;445 float: left;446 position: relative;447}448 449ul.sf-menu li:hover { 450 visibility: inherit; /* fixes IE7 'sticky bug' */ 451}452 453ul.sf-menu a { 454 display: block;455 position: relative;456}457 458ul.sf-menu ul { 459 position: absolute;460 left: 0;461 width: 150px; 462 top: auto;463 left: -999999px;464}465 466ul.sf-menu ul a { 467 zoom: 1; /* IE6/7 fix */ 468}469 470ul.sf-menu ul li { 471 float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */472 width: 150px;473}474 475ul.sf-menu ul ul { 476 top: 0;477 margin: 0 0 0 150px;478}479 480ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 481ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,482ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,483ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 484 left: auto;485}486 487ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,488ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,489ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,490ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 491 left: -999999px;492}493 494/* autoArrows CSS */495span.sf-arrow { 496 width: 7px;497 height: 7px;498 position: absolute;499 top: 20px;500 right: 5px;501 display: block;502 background: url(../images/arrows-black.png) no-repeat 0 0;503 overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */504 font-size: 1px;505}506 507ul ul span.sf-arrow { 508 right: 5px;509 top: 20px;510 background-position: 0 100%;511}512 513/* Theming the menu */514ul#nav { 515 float: left;516}517 518ul#nav ul { 519 background: #00cc00;520 margin-top: 5px;521 padding-bottom: 15px;522}523 524ul#nav li a { 525 padding: 7px 25px 6px 25px;526 font: 170% 'Yanone Kaffeesatz', arial, sans-serif;527 text-shadow: 1px 1px #323232;528 text-decoration: none;529 color: #FFF;530 margin-right: 2px;531}532 533ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus { 534 color: #FFF;535 text-shadow: 1px 1px #323232;536}537 538ul#nav ul li a { 539 color: #FFF;540}541 542ul#nav ul li a:hover { 543 color: #09D4FF;544 margin-right: 2px;545}546 547/* Image Transitions */548ul#images {549 margin: 0 15px 10px 0;550 padding: 0;551 position: relative;552}553 554ul#images li {555 display: block;556 overflow: hidden;557 padding: 0;558 float: left;559 width: 155px;560 height: 300px;561 list-style: none;562}563 564a.imPop { 565 position:relative; 566 z-index:20; 567} 568 569a.imPop:hover { 570 display:inline; 571 z-index:30; 572} 573 574a.imPop span { 575 display:none; 576} 577 578a.imPop:hover span { 579 display:block; 580 position:absolute; 581 top:1em; 582 left:1em; 583 width:64px; 584 height:64px; 585}586 </style>587 <title>588 White Rose Morris Events589 </title>590 <title>591 White Rose Morris Events592 </title>593 </head>594 <body>595 <div id="main">596 <header>597 <div id="logo">598 <div id="logo_text">599 <h1>600 White Rose Morris Men601 </h1>602 </div>603 </div>604 <nav>605 <ul class="sf-menu" id="nav">606 <li class="sf-parent">607 <a>608 Home609 <span class="sf-arrow">610 </span>611 </a>612 <ul style="left: auto; display: none;">613 <li>614 <a>615 White Rose home page616 </a>617 </li>618 </ul>619 </li>620 <li class="sf-parent">621 <a>622 Events623 <span class="sf-arrow">624 </span>625 </a>626 <ul style="left: auto; display: none;">627 <li>628 <a>629 See where we will perform630 </a>631 </li>632 </ul>633 </li>634 <li class="sf-parent">635 <a>636 Photos637 <span class="sf-arrow">638 </span>639 </a>640 <ul style="left: auto; display: none;">641 <li>642 <a>643 See what we look like644 </a>645 </li>646 </ul>647 </li>648 <li class="sf-parent">649 <a>650 Music651 <span class="sf-arrow">652 </span>653 </a>654 <ul style="left: auto; display: none;">655 <li>656 <a>657 Hear what we sound like658 </a>659 </li>660 </ul>661 </li>662 </ul>663 </nav>664 </header>665 <center>666 <p>667 </p>668 <h4>669 <a target="_blank">670 Wednesday nights with White Rose671 </a>672 </h4>673 </center>674 <div align="left">675 <ol>676 </ol>677 </div>678 <div id="site_content">679 <ul id="images" style="width: 940px; height: 300px;">680 <li style="left: 0px; margin: 0px; position: absolute;">681 <img alt="white_rose_one" height="150" src="rick.jpg" width="300">682 </li>683 <li style="left: 157px; margin: 0px; position: absolute;">684 <img alt="white_rose_two" height="150" src="rick.jpg" width="300">685 </li>686 <li style="left: 314px; margin: 0px; position: absolute;">687 <img alt="white_rose_three" height="150" src="rick.jpg" width="300">688 </li>689 <li style="left: 471px; margin: 0px; position: absolute;">690 <img alt="white_rose_four" height="150" src="rick.jpg" width="300">691 </li>692 </ul>693 </div>694 </div>695 <p>696 697 </p>698 <!-- javascript at the bottom for fast page loading -->699 </body>700</html>701