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 HTML 4.01 Transitional//EN">2<html>3 <head>4 <style>5 BODY6{7background-image: url("/include/images/skin/bg_website.png");8background-repeat: repeat-x; /*CHOICES: repeat, repeat-x, repeat-y, no-repeat */9background-color: #FFFFFF;10font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;11font-size: 12px;12color: #000000;13}14 15P16{17margin-top: 0px; 18margin-bottom: 15px; 19color: #004000;20font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;21font-size: 12px;22line-height: 18px;23}24 25P B26{27color: #4F780F; 28}29 30 31 32/* standard page links */33 34A:link35{36font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;37color: #004000;38text-decoration: underline;39font-weight: bold; 40}41 42A:visited43{44font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;45color: #004000;46text-decoration: underline;47font-weight: bold; 48}49 50A:hover 51{ 52font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;53color: #57A557;54text-decoration: none;55font-weight: bold; 56}57 58 59 60 61 62 63 64 65/* The to top link */66 67A.toTop:link68{69font-size: 11px; 70font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;71color: #004000;72text-decoration: none;73font-weight: normal; 74}75 76A.toTop:visited77{78font-size: 11px; 79font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;80color: #004000;81text-decoration: none;82font-weight: normal; 83}84 85A.toTop:hover 86{ 87font-size: 11px; 88font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;89color: #004000;90text-decoration: underline;91font-weight: normal; 92}93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129/* The menu at the top of every page */130 131A.menu_001:link132{133font-size: 12px; 134font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;135color: #FFFFFF;136text-decoration: none;137font-weight: bold; 138}139 140A.menu_001:visited141{142font-size: 12px; 143font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;144color: #FFFFFF;145text-decoration: none;146font-weight: bold; 147}148 149A.menu_001:hover 150{ 151font-size: 12px; 152font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;153color: #FFFFFF;154text-decoration: underline;155font-weight: bold; 156}157 158 159 160 161 162 163 164 165 166 167 168 169/* The menus at the side of every page */170 171.menu_002172{173font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;174padding-top: 0px; 175margin-top: 0px; 176font-size: 11px; 177line-height: 22px;178}179 180A.menu_002:link181{182color: #000000;183text-decoration: none;184font-weight: bold;185}186 187A.menu_002:visited188{189color: #7D7D7D;190text-decoration: none;191font-weight: bold; 192}193 194A.menu_002:hover 195{ 196color: #000000;197text-decoration: underline;198font-weight: bold; 199}200 201 202 203.menu_002b204{205font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;206padding-top: 0px; 207margin-top: 0px; 208font-size: 11px; 209line-height: 16px;210}211 212A.menu_002b:link213{214color: #000000;215text-decoration: none;216font-weight: normal;217}218 219A.menu_002b:visited220{221color: #7D7D7D;222text-decoration: none;223font-weight: normal; 224}225 226A.menu_002b:hover 227{ 228color: #000000;229text-decoration: underline;230font-weight: normal; 231}232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257/* The menu at the bottom of every page */258 259.menu_003260{261font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;262margin-top: 15px;263font-size: 11px;264line-height: 14px; 265}266 267 268 269A.menu_003:link270{271color: #C0C0C0;272text-decoration: none;273font-weight: bold;274}275 276A.menu_003:visited277{278color: #C0C0C0;279text-decoration: none;280font-weight: bold; 281}282 283A.menu_003:hover 284{ 285color: #C0C0C0;286text-decoration: underline;287font-weight: bold; 288}289 290 291 292 293.time294{295margin-top: 15px; 296font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif;297font-size: 10px; 298color: #8C8C8C;299}300 301 302.footer303{304margin-top: 15px; 305font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif; 306font-size: 10px; 307color: #8C8C8C; 308}309 310.quotes311{312font-family: georgia; 313font-size: 15px;314font-weight: bold; 315}316 317 318.pageHeading319{320position: absolute; 321top: 140px; 322right: 30px; 323text-align: right; 324font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif; 325font-size: 26px; 326color: #8C8C8C; 327}328 329 330.slogan331{332position: absolute; 333top: 80px; 334right: 30px; 335text-align: right; 336font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif; 337font-size: 18px; 338color: #008800;339}340 341.bulletedList342{343margin-top: 0px; 344}345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361LI362{363margin-bottom: 5px; 364font-size: 11px;365line-height: 16px;366}367 368 369UL,OL370{371margin-bottom: 15px; 372}373 374 375H1,H2,H3376{377margin-top: 0px;378margin-bottom: 10px;379}380 381H1382{383font-size: 16px;384color: #000000;385}386 387H2388{389font-size: 14px;390color: #000000;391}392 393H3394{395font-size: 13px;396color: #000000;397}398 </style>399 <title>400 PATHWAYS for NeuroEducational Development401 </title>402 </head>403 <body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">404 <div class="slogan">405 Please Call [PHONE REDACTED]406 </div>407 <div class="pageHeading">408 Helpful Links409 </div>410 <table border="0" cellpadding="0" cellspacing="0" width="100%">411 <tbody>412 <tr bgcolor="#000000">413 <td align="right" height="32">414 <div class="menu_001">415 <table border="0" cellpadding="0" cellspacing="0" width="100%">416 <tbody>417 <tr>418 <td valign="top">419 <a name="top">420 <img border="0" height="1" src="rick.jpg" width="1">421 </a>422 </td>423 <td align="right">424 <a class="menu_001">425 What is PATHWAYS?426 </a>427 <img height="9" src="rick.jpg" width="9">428 <a class="menu_001">429 Where to Start430 </a>431 <img height="9" src="rick.jpg" width="9">432 <a class="menu_001">433 Articles434 </a>435 <img height="9" src="rick.jpg" width="9">436 <a class="menu_001">437 Helpful Links438 </a>439 <img height="9" src="rick.jpg" width="9">440 <a class="menu_001">441 Contact Us442 </a>443 <img height="9" src="rick.jpg" width="9">444 <a class="menu_001">445 Home446 </a>447 </td>448 </tr>449 </tbody>450 </table>451 </div>452 </td>453 <td width="30">454 <!-- spacer -->455 </td>456 </tr>457 <tr>458 <td background="/include/images/skin/bg_header.png" height="170">459 <a>460 <img alt="PATHWAYS for NeuroEducational Development" border="0" height="170" src="rick.jpg" width="250">461 </a>462 </td>463 <td background="/include/images/skin/bg_header.png" width="30">464 <!-- spacer -->465 </td>466 </tr>467 </tbody>468 </table>469 <table border="0" cellpadding="0" cellspacing="0" width="100%">470 <tbody>471 <tr>472 <td height="30" width="30">473 <!-- left margin spacer -->474 </td>475 <td valign="top" width="220">476 <!-- the side menu spacer -->477 </td>478 <td valign="top" width="*">479 <!-- content spacer -->480 </td>481 <td width="30">482 <!-- right margin spacer -->483 </td>484 </tr>485 <tr>486 <td height="298" width="30">487 <!-- left margin -->488 </td>489 <td valign="top" width="220">490 <!-- the side menu -->491 <div class="menu_002">492 <table border="0" cellpadding="0" cellspacing="0">493 <tbody>494 <tr>495 <td height="26">496 <img border="0" height="9" src="rick.jpg" style="margin-right: 5px;" width="9">497 </td>498 <td height="26">499 <a class="menu_002">500 Certified ND's and Associates501 </a>502 </td>503 </tr>504 <tr>505 <td height="26">506 <img border="0" height="9" src="rick.jpg" style="margin-right: 5px;" width="9">507 </td>508 <td height="26">509 <a class="menu_002">510 Other Links511 </a>512 </td>513 </tr>514 </tbody>515 </table>516 </div>517 </td>518 <td valign="top" width="*">519 <!-- content.begin -->520 <h1>521 Certified Neurodevelopmentalists522 </h1>523 <h3>524 Jan Bedell525 </h3>526 <p>527 <b>528 Little Giant Steps529 </b>530 <br>531 Phone: [PHONE REDACTED]532 <br>533 E-mail:534 <a>535 [EMAIL REDACTED]536 </a>537 <br>538 Evaluation sites: Dallas, TX., Houston, TX.,539 <br>540 Amarillo, TX., Lubbock, TX.541 </p>542 <h3>543 Marcia Blackwood544 </h3>545 <p>546 <b>547 NeuroEducational Consultants of Indiana548 </b>549 <br>550 Phone: [PHONE REDACTED]551 <br>552 E-mail:553 <a>554 [EMAIL REDACTED]555 </a>556 <br>557 Evaluation sites: Indianapolis, IN558 </p>559 <h3>560 Marilee Nicoll Coots561 </h3>562 <p>563 <b>564 Help With Learning Neuroeducational Consulting565 </b>566 <br>567 Phone: [PHONE REDACTED]568 <br>569 E-mail:570 <a>571 [EMAIL REDACTED]572 </a>573 <br>574 Evaluation sites: Bakersfield CA, Costa Mesa, CA, Modesto, CA., Pasadena, CA., San Diego, CA., Weldon, CA.575 </p>576 <h3>577 Elizabeth Harms578 </h3>579 <p>580 <b>581 Hope Centre for NeuroEducational Development582 </b>583 <br>584 Phone: [PHONE REDACTED]585 <br>586 E-mail:587 <a>588 [EMAIL REDACTED]589 </a>590 or591 <a>592 [EMAIL REDACTED]593 </a>594 <br>595 Evaluation sites: Alberta/Saskatchewan, Canada596 </p>597 <h3>598 Linda Kane599 </h3>600 <p>601 <b>602 Hope and A Future, Inc.603 </b>604 <br>605 Phone: [PHONE REDACTED]606 <br>607 E-mail:608 <a>609 [EMAIL REDACTED]610 </a>611 <br>612 Evaluation sites: Annapolis, MD; Baton Rouge, LA; Dallas, TX; Houston, TX; Kansas City, KS; Lafayette, LA; Madison, WI; Manchester, NH; Nashville, TN; Oahu, HI; Ogden, UT; Seattle, WA; Wichita, KS613 </p>614 <h3>615 Kay Ness616 </h3>617 <p>618 <b>619 SENC, Southeastern620 </b>621 <br>622 Neurodevelopmental Consultants623 <br>624 Phone: [PHONE REDACTED]625 <br>626 E-mail:627 <a>628 [EMAIL REDACTED]629 </a>630 <br>631 Evaluation sites: Atlanta GA, Orlando area, FL632 </p>633 <h3>634 Cyndi Ringoen635 </h3>636 <p>637 <b>638 CAN-DO: Christian Access to Neuro-Developmental Organization639 </b>640 <br>641 Phone: [PHONE REDACTED]642 <br>643 E-mail:644 <a>645 [EMAIL REDACTED]646 </a>647 <br>648 Evaluation sites: Fairbanks, AK.649 </p>650 <h1>651 Associate Neurodevelopmentalists652 </h1>653 <h3>654 Maggie Dail655 </h3>656 <p>657 <b>658 Master Enterprises Learning Center659 </b>660 <br>661 Phone: [PHONE REDACTED]662 <br>663 E-mail:664 <a>665 [EMAIL REDACTED]666 </a>667 <br>668 Evaluation sites: Western Washington and Colorado669 </p>670 <h3>671 Stephanie Lankhorst672 </h3>673 <p>674 <b>675 Step By Step676 </b>677 <br>678 Phone: [PHONE REDACTED]679 <br>680 E-mail:681 <a>682 [EMAIL REDACTED]683 </a>684 <br>685 Evaluation sites: Grand Rapids, MI and Fremont, MI686 </p>687 <h3>688 Sylvia Funk689 </h3>690 <p>691 <b>692 PATHWAYS for NeuroEducational Development693 </b>694 <br>695 Phone: [PHONE REDACTED]696 <br>697 E-mail:698 <a>699 [EMAIL REDACTED]700 </a>701 ,702 <a>703 [EMAIL REDACTED]704 </a>705 <br>706 Evaluation sites: Okotoks, AB707 </p>708 <p align="right">709 <a class="toTop">710 <img border="0" height="9" src="rick.jpg" width="9">711 Back to Top712 </a>713 </p>714 <!-- content.end -->715 </td>716 <td width="30">717 <!-- right margin -->718 </td>719 </tr>720 <!-- spacer row -->721 </tbody>722 </table>723 </body>724</html>725