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";6s7body {8 margin:0;9 padding:0;10 width:100%;11 color:#5f5f5f;12 font:normal 12px/1.8em Arial, Helvetica, sans-serif;13}14html, .main {15 padding:0;16 margin:0;17 background-color:#fff;18}19.clr {20 clear:both;21 padding:0;22 margin:0;23 width:100%;24 font-size:0;25 line-height:0;26}27.logo {28 padding:0 0 0 40px;29 float:left;30 width:auto;31}32 33.logo h1 a {34 font-family: 'Dancing Script', cursive;35 font-size: 32px;36}37 38h1 {39 margin:0;40 padding:32px 0;41 color:#bbb;42 font:normal 38px/1.2em Arial, Helvetica, sans-serif;43}44h1 a, h1 a:hover {45 color:#bbb;46 text-decoration:none;47}48h1 span {49 color:#65cde7;50}51h1 small {52 display:inline-block;53 padding:4px 0;54 text-align:center;55 font:normal 20px/1.2em 'Patua One', cursive;56 letter-spacing:normal;57 color:#61c0ec;58}59 60h2 {61 font:normal 24px Arial, Helvetica, sans-serif;62 padding:8px 0 12px;63 margin:8px 0;64 color:#323a3f;65}66 67h1,h2,h3,h4,h5,h6 {68 font:normal 20px/1.2em 'Patua One', cursive;69}70 71p, ul li, ol li, ul li a, ol li a {72 font:normal 14px/1.5em 'Roboto', sans-serif; 73}74 75p {76 margin:8px 0;77 padding:0 0 8px 0;78}79p.spec {80}81a {82 color:#49b6e9;83 text-decoration:underline;84}85a.rm, a.com {86 text-decoration:none;87}88.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {89 margin:0;90 padding:0;91}92.hbg_resize, .fbg_resize {93 margin:0 auto;94 padding:0 40px;95 width:890px;96}97.header {98}99.header_resize {100 margin:0 auto;101 padding:0;102 width:970px;103}104.hbg {105 padding: 20px 0;106 background: url('images/school.png');107}108.hbg img {109 padding: 7px;110 border: 3px solid #fff;111}112.menu_nav {113 margin:0;114 padding: 27px 40px 16px 0;115 float:right;116}117.menu_nav ul {118 list-style:none;119}120.menu_nav ul li {121 margin:0;122 padding:0 2px 0 0;123 float:left;124 border-left:1px solid #e4e4e4;125}126.menu_nav ul li a {127 display:block;128 margin:0;129 padding:12px 16px;130 color:#959595;131 text-decoration:none;132 font-family: 'Patua One', cursive;133 font-size:14px;134 letter-spacing: 1px;135 line-height:1.2em;136 text-transform: uppercase;137}138.menu_nav ul li.active a, .menu_nav ul li a:hover {139 color:#61c0ec;140}141 142#nav li {143 display: inline-block;144 padding: 0 15px;145 position: relative;146 transition: all 1s;147}148 149 150#nav li ul.submenu li {151 width: 100%;152 margin: 0;153 padding: 10px 10px 10px 20px;154 border: none;155 box-sizing: border-box;156}157 158.submenu { 159 position: absolute;160 top: 100%;161 left: -1px;162 padding: 0;163 min-width: 160px;164 z-index: 9999;165 background: rgba(0,0,0,.78);166 display: none;167}168 169#nav li ul.submenu li a {170 display: inline-block;171 margin: 0;172 padding: 0;173 width: 100%;174 text-align: left;175 border-right: 0;176 transition: all 1s;177 text-transform: none;178 color: #fff;179} 180 181#nav li .submenu li a:hover {182 padding-left: 10px;183 color: #555;184}185 186#nav li .submenu li:hover {187 background: rgba(255,255,255,.85);188}189 190#nav li:hover .submenu { 191 display: block;192}193 194.content_resize {195 margin:0 auto;196 padding:24px 0;197 width:970px;198}199.content .mainbar {200 margin:0;201 padding:0;202 float:left;203 width:670px;204}205.content .mainbar img {206 padding:4px;207 border:1px solid #b7b7b7;208 background-color:#fff;209}210.content .mainbar img.fl {211 margin:4px 16px 4px 0;212 float:left;213}214.content .mainbar .article {215 margin:0;216 padding:16px 24px 24px 40px;217}218.content .sidebar {219 margin-top: 30px; 220 padding:0;221 float:right;222 width:300px;223 background: #61C0EC;224}225 226.content .sidebar h2 {227 color: #3291BD;228 font-weight: 700;229 letter-spacing: 1px;230}231 232.content .sidebar p {233 padding: 30px 0;234 border-top: 2px solid #fff;235 border-bottom: 2px solid #fff;236 color: #fff;237}238 239.content .sidebar .gadget {240 margin:0;241 padding: 10px 32px;242}243ul.sb_menu, ul.ex_menu {244 margin:0;245 padding:0;246 list-style:none;247 color:#959595;248}249ul.sb_menu li, ul.ex_menu li {250 margin:0;251}252ul.sb_menu li {253 padding:4px 0 4px 12px;254 width:220px;255}256ul.ex_menu li {257 padding:4px 0 8px 12px;258}259ul.sb_menu li a, ul.ex_menu li a {260 color:#fff;261 text-decoration:none;262 margin-left:-12px;263 padding-left:12px;264}265 266ul.sb_menu li a span {267 margin-right: 5px;268 transition: all 0.5s;269}270 271ul.sb_menu li a:hover {272 color: #fff;273 274}275 276ul.sb_menu li a:hover span {277 margin-right: 10px;278}279 280ul.ex_menu li a:hover {281 color:#49b6e9;282}283ul.sb_menu li a:hover {284 text-decoration:none;285}286ul.ex_menu li a:hover {287 text-decoration:none;288}289.content p.date {290 margin:4px 0;291 padding:0;292 float:left;293 width:136px;294 color:#61c0ec;295 font-size:18px;296 line-height:1.2em;297 text-align:center;298 text-transform:uppercase;299}300.content p.date span {301 display:block;302 padding:12px 0;303 float:left;304 width:72px;305 font-size:50px;306 color:#fff;307 background-color:#61c0ec;308}309.content p.pages {310 padding:0 24px 0 40px;311 font-size:11px;312 color:#959595;313}314.content p.pages span, .content p.pages a:hover {315 padding:5px 10px;316 color:#fff;317 background-color:#49b6e9;318}319.content p.pages a {320 padding:5px 10px;321 color:#fff;322 background-color:#bdbdbd;323 text-decoration:none;324}325.content .mainbar .comment {326 margin:0;327 padding:16px 0 0 0;328}329.content .mainbar .comment img.userpic {330 border:1px solid #dedede;331 margin:10px 16px 0 0;332 padding:0;333 float:left;334}335.fbg {336 background-color:#61c0ec;337}338.fbg_resize {339 padding:24px 40px;340 color:#fff;341}342.fbg a {343 color:#fff;344}345.fbg h2 {346 color:#fff;347}348.fbg img {349 padding:4px;350 border:1px solid #cfd2d4;351 background-color:#fff;352}353.fbg .col {354 margin:0;355 float:left;356}357.fbg .c1 {358 padding:0 16px 0 0;359 width:266px;360}361.fbg .c2 {362 padding:0 16px;363 width:300px;364}365.fbg .c3 {366 padding:0 0 0 16px;367 width:260px;368}369.fbg .c1 img {370 margin:8px;371}372.fbg .c3 img {373 margin:8px 16px 4px 0;374 float:left;375}376.footer {377 background: #3D9CC8;378}379.footer_resize {380 margin:0 auto;381 padding:24px 40px;382 width:890px;383}384.footer p {385 margin:0;386 padding:4px 0;387 line-height:normal;388 color: #fff;389}390.footer a {391 color:#fff;392 padding:inherit;393 text-decoration:underline;394}395.footer a:hover {396 text-decoration:none;397}398.footer .lf {399 float:left;400}401.footer .rf {402 float:right;403}404ol {405 list-style:none;406}407ol li {408 clear:both;409}410ol li label {411 display:block;412 margin:0;413 padding:16px 0 0 0;414}415ol li input.text {416 width:480px;417 border:1px solid #c0c0c0;418 margin:2px 0;419 padding:5px 2px;420 height:16px;421 background-color:#fff;422}423ol li textarea {424 width:480px;425 border:1px solid #c0c0c0;426 margin:2px 0;427 padding:2px;428 background-color:#fff;429}430ol li .send {431 margin:16px 0 0 0;432}433 434.article h1 {435 font-size: 40px;436 color: #323a3f;437 line-height: 1.2;438 margin: 0 0 28px 0;439 text-align: left;440}441 442.article h2 {443 margin: 20px 0 10px 0;444 font-size: 36px;445 line-height: 1.5;446}447 448.article p {449 font-weight: 300;450 line-height: 1.5;451 margin: 0 0 10px 0;452}453 454.article ul { list-style: disc; }455 456.article ol { list-style: decimal}457 458.article ul,459.article ol { padding: 8px 0 20px 30px; }460 461.article ul li,462.article ol li {463 margin: 10px 0;464 line-height: 1.5;465}466 467.mainbar.inner_page {468 margin-left: 15%; 469}470 471.mainbar.inner_page .article {472 padding-left: 0;473 padding-right: 0;474}475 476.bot_lg {477 display: block;478 width: 100%;479 margin: 30px 0;480}481 482.bot_lg .bot_md {483 float: right;484 width: 50%;485}486 487.bot_lg .bot_md ul {488 list-style: none;489 padding-left: 10px;490 margin: 0;491}492 493.bot_lg .bot_md ul li {494 margin: 5px 0;495}496 497.bot_lg .bot_md ul li a:hover {498 text-decoration: none;499}500 </style>501 <title>502 Need To Complete A Great Scholarship Essay?503 </title>504 <meta content="Scholarship providers look for a piece that will captivate and attract their attention. Make sure your essay is the one that will hook their attention." name="description">505 <meta content="text/html; charset=utf-8" http-equiv="content-type">506 </head>507 <body style="margin:0;">508 <div class="main">509 <div class="header" style="background: rgb(229, 229, 229);">510 <div class="header_resize">511 <div class="logo">512 <p>513 Montone514 <small>515 . info516 </small>517 </p>518 </div>519 <div class="menu_nav">520 <ul id="nav">521 <li class="active" style="border-left: 1px solid rgb(255, 255, 255);">522 <a>523 Home524 </a>525 </li>526 <li style="border-left: 1px solid rgb(255, 255, 255);">527 <a>528 Writing Aid529 </a>530 <ul class="submenu">531 <li style="border-left: 1px solid rgb(255, 255, 255);">532 <a>533 Essay tips: Shakespeare534 </a>535 </li>536 <li style="border-left: 1px solid rgb(255, 255, 255);">537 <a>538 Symbolism in Great Gatsby539 </a>540 </li>541 <li style="border-left: 1px solid rgb(255, 255, 255);">542 <a>543 Ideas on Harry Potter544 </a>545 </li>546 </ul>547 </li>548 <li style="border-left: 1px solid rgb(255, 255, 255);">549 <a>550 Purchasing essays551 </a>552 <ul class="submenu">553 <li style="border-left: 1px solid rgb(255, 255, 255);">554 <a>555 Quality matters556 </a>557 </li>558 <li style="border-left: 1px solid rgb(255, 255, 255);">559 <a>560 Reasonable prices561 </a>562 </li>563 </ul>564 </li>565 <li style="border-left: 1px solid rgb(255, 255, 255);">566 <a>567 Vital hints568 </a>569 <ul class="submenu">570 <li style="border-left: 1px solid rgb(255, 255, 255);">571 <a>572 Proper essay structure573 </a>574 </li>575 <li style="border-left: 1px solid rgb(255, 255, 255);">576 <a>577 Writing a reflective essay578 </a>579 </li>580 <li style="border-left: 1px solid rgb(255, 255, 255);">581 <a>582 Visual analysis essay583 </a>584 </li>585 </ul>586 </li>587 </ul>588 </div>589 <div class="clr">590 </div>591 </div>592 </div>593 <div class="content">594 <div class="content_resize">595 <div class="mainbar inner_page">596 <div class="article">597 <h1>598 A Foolproof Formula For a Great Scholarship Essay599 </h1>600 <p>601 Making your602 <a>603 best scholarship essays604 </a>605 stand out from others can be a challenging task for the students. Some of the foolproof tips on how to make you essay outshine the rest include:606 </p>607 <ol>608 <li>609 Understanding the theme and questions610 </li>611 <p>612 Before writing the composition, a student should go through the questions keenly to figure out what is needed. Most of the students will copy and paste essays without going into details to find out whether the scholarship providers are interested in class work, diversity or other activities.613 </p>614 <li>615 Prior planning616 </li>617 <p>618 The earlier you start planning, the better the chances of writing an excellent piece. As a student you should take your time and do a thorough research.619 </p>620 <li>621 Be passionate and enthusiastic622 </li>623 <p>624 The main aim for writing the piece is to persuade the scholarship provider that you should be given a chance. Ensure that you make adequate clarifications to your points to show that you are passionate about what you are doing.625 </p>626 <li>627 Proofread your work628 </li>629 <p>630 It is prudent to have your work checked by an editor once you are through, this may be a parent, teacher or a friend. Sometimes it is not possible to see our mistakes, having your work edited provides a better chance for detection of grammatical errors or irrelevant sentences.631 </p>632 </ol>633 </div>634 <div class="bot_lg">635 <div style="clear: both;">636 </div>637 </div>638 </div>639 <div class="clr">640 </div>641 </div>642 </div>643 <div class="footer">644 <div class="footer_resize">645 <p class="lf">646 2023 ©647 <a>648 montone.info649 </a>650 </p>651 <div class="clr">652 </div>653 </div>654 </div>655 </div>656 #657 </body>658</html>659