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 xmlns="">3 <head>4 <style>5 @charset "UTF-8";6/* CSS Document */7 8h1 {9 color: black;10 font-size: 24px;11 font-family: Verdana, Geneva, sans-serif;12 font-weight: bold;13 text-align:left;14 15}16 17h2 {18 color:#999;19 text-shadow:1px 1px 4px black;20 font-size: 16px;21 font-family: Verdana, Geneva, sans-serif;22 font-style: italic;23 text-align:left;24 line-height:10px;25 }26 27h3 {28 color:#FFF;29 font-size: 16px;30 margin-top:0;31 padding-top:25px;32 font-family: Verdana, Geneva, sans-serif;33 text-align:right;34 }35 36h4 {37 color: white;38 font-size: 24px;39 font-family: Verdana, Geneva, sans-serif;40 font-weight: bold;41 text-align:left;42 line-height:0;43}44 45p {46 color: #333;47 font-family: Arial, Helvetica, sans-serif;48 font-size: 14px;49 -webkit-column-count: 2; /* Chrome, Safari, Opera */50 -moz-column-count: 2; /* Firefox */51 column-count: 2;52 text-align: justify;53 -webkit-column-gap: 50px; /* Chrome, Safari, Opera */54 -moz-column-gap: 50px; /* Firefox */55 column-gap: 50px;56 max-width: 800px;57 line-height:20px;58 margin-bottom:0;59}60 61 62p.single {63 color:#333;64 font-family:Arial, Helvetica, sans-serif;65 font-size:16px;66 -webkit-column-count: 1; /* Chrome, Safari, Opera */67 -moz-column-count: 1; /* Firefox */68 column-count: 1;69 text-align:justify;70 width:580px;71 line-height:25px;72 73 }74 75p.800 {76 color: #333;77 font-family: Arial, Helvetica, sans-serif;78 font-size: 14px;79 -webkit-column-count: 2; /* Chrome, Safari, Opera */80 -moz-column-count: 2; /* Firefox */81 column-count: 2;82 text-align: justify;83 -webkit-column-gap: 50px; /* Chrome, Safari, Opera */84 -moz-column-gap: 50px; /* Firefox */85 column-gap: 50px;86 max-width: 800px; !important87 line-height:20px;88 margin-bottom:0;89}90 91 92p + p {93 text-indent: 1.5em;94 margin-top: 0;95 }96 97 98p.800 + p.800 {99 text-indent: 1.5em;100 margin-top: 0;101 }102 103body {104 margin:0;105 padding:0;106}107 108td {109 padding:12px 5px 0px 5px;110}111 112 113 114 115#container {116 width: 1280px;117 margin:auto;118}119 120#container600 {121 width: 600px;122 margin:auto;123 padding-bottom:25px;124 padding-right:10px;125}126 127 128 129.txt {130 width:580px;131 overflow:visible;132 padding-left:10px;133 padding-right:10px;134 135 136 }137 138 139 140#homebutton {141 max-width:800px;142 height:150px;143 margin-left:auto;144 margin-right:auto;145 146 }147 148#homebuttonshort {149 width:800px;150 height:100px;151 margin-left:auto;152 margin-right:auto;153 154 }155 156#worktitle {157 max-width:800px;158 height:100px;159 margin-left:auto;160 margin-right:auto;161 position:relative;162 163 }164 165#description {166 max-width:800px;167 margin-left:auto;168 margin-right:auto;169 170 }171 172#mudmancontainer {173 width:800px;174 height:356px;175 margin-left:auto;176 margin-right:auto;177 position:relative;178 179 }180 181#mudman_main {182 position:absolute;183 top:0px;184 left:270px;185 186 }187 188#mudman_topleft {189 position:absolute;190 top:0px;191 left:0px;192 193 }194 195#mudman_bottomleft {196 position:absolute;197 top:183px;198 left:0px;199 200 }201 202#mudman_topright {203 position:absolute;204 top:0px;205 right:0px;206 207 }208 209#mudman_bottomright {210 position:absolute;211 top:183px;212 right:0px;213 214 }215 216#mudman_table_container {217 width:800px;218 margin-left:auto;219 margin-right:auto;220 position:static;221 222 }223 224 225#mainimagecontainer {226 width:800px;227 height:350px;228 margin-left:auto;229 margin-right:auto;230 position:relative;231 top:-50px;232 border:5px solid white;233 234 }235 236#audiocontainer {237 width:300px;238 position:absolute;239 right:0px;240 top:0px;241 border:2px solid white;242 opacity:0.7;243 244 }245 246.spacer {247 height:15px;248 249 }250 251 252 253a:link {254 text-decoration: none;255 color:white;256}257 258a:visited {259 text-decoration: none;260 color:white;261}262 263a:hover {264 text-decoration: none;265 color:white;266}267 268a:active {269 text-decoration: none;270 color:white;271}272 273 274 275 276 277 278 279#grid_container {280 max-width:817px;281 margin:0 auto;282 283 }284 285ul.grid {286 list-style: none;287 font-size: 0px;288}289ul.grid li {290 display: inline-block;291 margin-top:5px;292 margin-bottom:5px;293 margin-right:0;294 margin-left:1%;295 font-size: 16px;296 font-size: 1rem;297 vertical-align: top;298 299}300ul.grid li img {301 max-width: 100%;302}303 304ul, menu, dir {305 display: block;306 list-style-type: disc;307 -webkit-margin-before: 1em;308 -webkit-margin-after: 1em;309 -webkit-margin-start: 0px;310 -webkit-margin-end: 0px;311 -webkit-padding-start: 0px;312}313 314/* class for 2 columns */315ul.grid.columns-2 li {316 width: 47.5%; /* this value + 2.5 should = 50% */317}318/* class for 3 columns */319ul.grid.columns-3 li {320 width: 32.3%; /* this value + 2.5 should = 33% */321}322/* class for 4 columns */323ul.grid.columns-4 li {324 width: 24%; /* this value + 2.5 should = 25% */325}326 327@media (max-width: 480px) {328 ul.grid-nav li {329 display: block;330 margin: 0 0 5px;331 }332 ul.grid-nav li a {333 display: block;334 }335 ul.rig {336 margin-left: 0;337 }338 ul.rig li {339 width: 100% !important; /* over-ride all li styles */340 margin: 0 0 20px;341 }342}343 344 345 346 347 348#headerhaggards {349 width:100%;350 height:250px;351 margin-top:0;352 background-image:url(assets/haggards/banner_haggards.jpg);353 background-size:cover;354 background-repeat:no-repeat;355 background-position:center;356 background-color:black;357 margin:0 auto;358 z-index:-1;359 360 }361 362#headercommunity {363 width:100%;364 height:250px;365 margin-top:0;366 background-image:url(assets/community_spirit/banner_community.jpg);367 background-size:cover;368 background-repeat:no-repeat;369 background-position:center;370 background-color:black;371 margin:0 auto;372 373 }374 375#headerchina {376 width:100%;377 height:250px;378 margin-top:0;379 background-image:url(assets/made_in_china/banner_china.jpg);380 background-size:cover;381 background-repeat:no-repeat;382 background-position:center;383 background-color:black;384 margin:0 auto;385 386 }387 388#headerdaytrippers {389 width:100%;390 height:250px;391 margin-top:0;392 background-image:url(assets/day_trippers/banner_daytrippers.jpg);393 background-size:cover;394 background-repeat:no-repeat;395 background-position:center;396 background-color:black;397 margin:0 auto;398 399 }400 401 402#headerdarker {403 width:100%;404 height:250px;405 margin-top:0;406 background-image:url(assets/darker/banner_darker.jpg);407 background-size:cover;408 background-repeat:no-repeat;409 background-position:center;410 background-color:black;411 margin:0 auto;412 413 }414 415#headerrapture {416 width:100%;417 height:250px;418 margin-top:0;419 background-image:url(assets/rapture/banner_rapture.jpg);420 background-size:cover;421 background-repeat:no-repeat;422 background-position:center;423 background-color:black;424 margin:0 auto;425 426 }427 428#headerurbtrees {429 width:100%;430 height:250px;431 margin-top:0;432 background-image:url(assets/urban_trees/banner_urbtrees.jpg);433 background-size:cover;434 background-repeat:no-repeat;435 background-position:center;436 background-color:black;437 margin:0 auto;438 439 }440 441#headermudman {442 width:100%;443 height:250px;444 margin-top:0;445 background-image:url(assets/mudman/banner_mudman.jpg);446 background-size:cover;447 background-repeat:no-repeat;448 background-position:center;449 background-color:black;450 margin:0 auto;451 452 }453 454#headersnakes {455 width:100%;456 height:250px;457 margin-top:0;458 background-image:url(assets/snakes_and_snails/banner_snakes.jpg);459 background-size:cover;460 background-repeat:no-repeat;461 background-position:center;462 background-color:black;463 margin:0 auto;464 465 }466 467#headergoodthoughts {468 width:100%;469 height:250px;470 margin-top:0;471 background-image:url(assets/where_good_thoughts_go_after_dark/banner_gthoughts.jpg);472 background-size:cover;473 background-repeat:no-repeat;474 background-position:center;475 background-color:black;476 margin:0 auto;477 478 }479 480#headerparade {481 width:100%;482 height:250px;483 margin-top:0;484 background-image:url(assets/parade_of_the_denizens/banner_parade.jpg);485 background-size:cover;486 background-repeat:no-repeat;487 background-position:center;488 background-color:black;489 margin:0 auto;490 491 }492 493#headerurbnature {494 width:100%;495 height:250px;496 margin-top:0;497 background-image:url(assets/urban_nature/banner_urbnature.jpg);498 background-size:cover;499 background-repeat:no-repeat;500 background-position:center;501 background-color:black;502 margin:0 auto;503 504 }505 506#headertunnel {507 width:100%;508 height:250px;509 margin-top:0;510 background-image:url(assets/tunnel_vision/banner_tunnel.jpg);511 background-size:cover;512 background-repeat:no-repeat;513 background-position:center;514 background-color:black;515 margin:0 auto;516 517 }518 519 520#headerschizo {521 width:100%;522 height:250px;523 margin-top:0;524 background-image:url(assets/schizomagic/banner_schizo.jpg);525 background-size:cover;526 background-repeat:no-repeat;527 background-position:center;528 background-color:black;529 margin:0 auto;530 531 }532 533#headerbeautytips {534 width:100%;535 height:250px;536 margin-top:0;537 background-image:url(assets/beauty_tips/banner_beautytips.jpg);538 background-size:cover;539 background-repeat:no-repeat;540 background-position:center;541 background-color:black;542 margin:0 auto;543 544 }545 </style>546 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">547 <title>548 Eva Lis : Day Trippers549 </title>550 <style type="text/css">551 body {552 background-color: rgb(255,255,255);553}554 </style>555 </head>556 <body>557 <div id="headerdaytrippers">558 <div id="homebutton">559 <h3>560 <a>561 HOME562 </a>563 </h3>564 </div>565 <div id="worktitle">566 <h4>567 Day Trippers568 </h4>569 <h2>570 2010. Silkscreen on cardboard571 </h2>572 </div>573 </div>574 <div id="description">575 <p class="800">576 'Day Trippers' is an enquiry into poverty and tragedy as a form of entertainment. It looks at tourism and in particular “Slum Tourism" as a form of exploitation.577 </p>578 </div>579 <div class="spacer">580 </div>581 <!-- table vertical x4 -->582 <table align="center" border="0" cellspacing="0" width="800">583 <tbody>584 <tr>585 <td>586 <a>587 <img height="288" src="rick.jpg" width="192">588 </a>589 </td>590 <td>591 <a>592 <img height="288" src="rick.jpg" width="192">593 </a>594 </td>595 <td>596 <a>597 <img height="288" src="rick.jpg" width="192">598 </a>599 </td>600 <td>601 <a>602 <img height="288" src="rick.jpg" width="192">603 </a>604 </td>605 </tr>606 </tbody>607 </table>608 <!-- table vertical x4 -->609 <table align="center" border="0" cellspacing="0" width="800">610 <tbody>611 <tr>612 <td>613 <a>614 <img height="288" src="rick.jpg" width="192">615 </a>616 </td>617 <td>618 <a>619 <img height="288" src="rick.jpg" width="192">620 </a>621 </td>622 <td>623 <a>624 <img height="288" src="rick.jpg" width="192">625 </a>626 </td>627 <td>628 <a>629 <img height="288" src="rick.jpg" width="192">630 </a>631 </td>632 </tr>633 </tbody>634 </table>635 <!-- table vertical x4 -->636 <table align="center" border="0" cellspacing="0" width="800">637 <tbody>638 <tr>639 <td>640 <a>641 <img height="308" src="rick.jpg" width="192">642 </a>643 </td>644 <td>645 <a>646 <img height="308" src="rick.jpg" width="192">647 </a>648 </td>649 <td>650 <a>651 <img height="308" src="rick.jpg" width="192">652 </a>653 </td>654 <td>655 <a>656 <img height="308" src="rick.jpg" width="192">657 </a>658 </td>659 </tr>660 </tbody>661 </table>662 <!-- table horizontal x3 -->663 <table align="center" border="0" cellspacing="0" width="800">664 <tbody>665 <tr>666 <td>667 <a>668 <img height="288" src="rick.jpg" width="800">669 </a>670 </td>671 </tr>672 </tbody>673 </table>674 <div class="spacer">675 </div>676 <div class="spacer">677 </div>678 <div class="spacer">679 </div>680 </body>681</html>682