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 xmlns="">3 <head>4 <style>5 @charset "utf-8";6 7html {8 overflow-y: scroll;9 } 10 11body {12 background-image: url(../Pictures/bg.png);13 background-repeat: repeat-y;14 background-position: center top;15 background-color: #363636;16 margin: 0px;17 padding: 0px;18 font-family: Verdana, Arial, Helvetica, sans-serif;19 font-size: 11px;20 } 21 22h1 {23 font: normal 20px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, Arial, Helvetica, sans-serif;24 color:#474143;25 text-transform:none;26 } 27h2 {28 color:#FF0000;29 font-family: Verdana, Arial, Helvetica, sans-serif;30 font-size: 20px;31 font-weight: normal;32 background-color: #000000;33 margin: 20px;34 text-align: center;35 padding: 10px;36 }37p {38 font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, Arial, Helvetica, sans-serif;39 color:#666666;40 line-height:20px;41 }42 43img {44 border:0;45 }46 47#left {48 float:left;49 width:275px;50 }51 52#right {53 float:left;54 width:275px;55 56 }57 58#frame {59 width: 830px;60 border-top-width: 1px;61 border-right-width-value: 1px;62 border-right-width-ltr-source: physical;63 border-right-width-rtl-source: physical;64 border-bottom-width: 1px;65 border-left-width-value: 1px;66 border-left-width-ltr-source: physical;67 border-left-width-rtl-source: physical;68 border-top-style: solid;69 border-right-style-value: solid;70 border-right-style-ltr-source: physical;71 border-right-style-rtl-source: physical;72 border-bottom-style: solid;73 border-left-style-value: solid;74 border-left-style-ltr-source: physical;75 border-left-style-rtl-source: physical;76 border-top-color: #666666;77 border-right-color-value: #666666;78 border-right-color-ltr-source: physical;79 border-right-color-rtl-source: physical;80 border-bottom-color: #666666;81 border-left-color-value: #666666;82 border-left-color-ltr-source: physical;83 border-left-color-rtl-source: physical;84 color: #ffffff;85 text-align: left;86 margin-top: 0em;87 margin-right: auto;88 margin-bottom: 0em;89 margin-left: auto;90 background-color: #CCCCCC;91 92 }93 94#top_image_home {95 width:830px;96 height:216px;97 background-image: url(../Pictures/header.png);98 background-repeat: no-repeat;99 background-position: top;100 margin: 0px;101 padding: 0px;102 background-color: #E7E2DA;103 }104 105#content {106 width:830px;107 float:left;108 xbackground:url(../images/main_bg.gif) top no-repeat;109 }110 111#content p {112 padding:10px 15px 5px 20px;113 line-height: 20px;114 }115 116#content h1 {117 padding:15px 25px 0 20px;118 }119#content_left {120 float:left;121 width: 530px;122 margin-top: 0px;123} 124 125#content_left img{126 border: 5px solid #FFFFFF;127 margin: 10px;128} 129 130#content_left a:link {131 color: #FFFFFF;132 border-bottom-width: thin;133 border-bottom-style: dotted;134 border-bottom-color: #F2C879;135 text-decoration: none;136}137#content_left a:hover {138 color: #999999;139 border-bottom-width: thin;140 border-bottom-style: dotted;141 border-bottom-color: #C43911;142 text-decoration: none;143}144#content_left a:visited {145 color: #FFFFFF;146 border-bottom-width: thin;147 border-bottom-style: dotted;148 border-bottom-color: #C43911;149 text-decoration: none;150}151 152#content_right {153 float:left;154 width: 299px;155 margin-top: 20px;156 border-right-width: 1px;157 border-right-style: solid;158 border-right-color: #FFFFFF;159} 160 161#content_right a:link {162 color: #FFFFFF;163 border-bottom-width: thin;164 border-bottom-style: dotted;165 border-bottom-color: #FF0000;166 text-decoration: none;167}168#content_right a:hover {169 color: #999999;170 border-bottom-width: thin;171 border-bottom-style: dotted;172 border-bottom-color: #FF0000;173 text-decoration: none;174}175#content_right a:visited {176 color: #FFFFFF;177 border-bottom-width: thin;178 border-bottom-style: dotted;179 border-bottom-color: #FF0000;180 text-decoration: none;181}182 183#content_right h1 {184 color: #FFFFFF;185 font-size: 16px;186 font-family: Verdana, Arial, Helvetica, sans-serif;187 background-repeat: repeat;188 height: 15px;189 line-height: 3px;190 background-color: #000000;191 margin-top: 0px;192 margin-right: 10px;193 margin-bottom: 0px;194 margin-left: 10px;195}196 197#content_right p {198 color: #FFFFFF;199 font-size: 12px;200 font-family: Verdana, Arial, Helvetica, sans-serif;201 background-repeat: repeat;202 background-color: #666666;203 margin-top: 0px;204 margin-right: 10px;205 margin-bottom: 10px;206 margin-left: 10px;207 padding-top: 10px;208 padding-right: 10px;209 padding-bottom: 10px;210 padding-left: 10px;211}212 213#copyright {214 width:828px;215 background-color:#000000;216 color:#E7E2DA;217 text-align:center;218 margin-bottom: 0px;219 background-image: url(../Pictures/footer.png);220 height: 20px;221 background-repeat: no-repeat;222 background-position: top;223 padding-top: 80px;224 padding-bottom: 2px;225 border-top-width: 2px;226 border-right-width: 1px;227 border-bottom-width: 1px;228 border-left-width: 1px;229 border-top-style: solid;230 border-right-style: solid;231 border-bottom-style: solid;232 border-left-style: solid;233 border-top-color: #000000;234 border-right-color: #CCCCCC;235 border-bottom-color: #CCCCCC;236 border-left-color: #CCCCCC;237 }238 239 240#copyright a:link {241 color: #CCCCCC;242 border-bottom-width: 1px;243 border-bottom-style: solid;244 border-bottom-color: #FFFFFF;245 text-decoration: none;246}247#copyright a:hover {248 color: #FFFFFF;249 border-bottom-width: thin;250 border-bottom-style: dotted;251 border-bottom-color: #FC3436;252 text-decoration: none;253}254#copyright a:visited {255 color: #CCCCCC;256 border-bottom-width: thin;257 border-bottom-style: solid;258 border-bottom-color: #FFFFFF;259 text-decoration: none;260}261 262a:link {263 color: #000000;264 border-bottom-width: 1px;265 border-bottom-style: solid;266 border-bottom-color: #000000;267 text-decoration: none;268}269a:hover {270 color: #CCCCCC;271 border-bottom-width: thin;272 border-bottom-style: dotted;273 border-bottom-color: #C43911;274 text-decoration: none;275}276a:visited {277 color: #000000;278 border-bottom-width: 1px;279 border-bottom-style: solid;280 border-bottom-color: #000000;281 text-decoration: none;282}283 284#minitabs {285 background-color: #E7E2DA;286 border-right-width: 1px;287 border-bottom-width: 1px;288 border-left-width: 1px;289 border-right-style: solid;290 border-bottom-style: solid;291 border-left-style: solid;292 border-right-color: #FFFFFF;293 border-bottom-color: #474143;294 border-left-color: #FFFFFF;295 padding-top: 0;296 padding-right: 15px;297 padding-bottom: 23px;298 padding-left: 70px;299 margin: 0;300}301 302#minitabs li {303 margin: 0;304 padding: 0;305 display: inline;306 list-style-type: none;307}308 309#minitabs a {310 float:left;311 line-height: 14px;312 font-weight: bold;313 margin: 0 40px 4px 50px;314 text-decoration: none;315 color: #A69E9D;316}317 318#minitabs a.active, #minitabs a:hover {319 padding-bottom: 2px;320 color: #474143;321 border-bottom-width: 4px;322 border-bottom-style: solid;323 border-bottom-color: #474143;324}325 326#terms {327 list-style-type:none;328}329 330#terms li {331 margin-bottom: 6px;332 border-bottom-width: 1px;333 border-bottom-style: solid;334 border-bottom-color: #000000;335 padding-top: 4px;336 padding-right: 50px;337 padding-bottom: 4px;338 padding-left: 50px;339}340 341#one {342 background:url(../Pictures/1.png) no-repeat 6px 50%;343}344 345#two {346 background:url(../Pictures/2.png) no-repeat 6px 50%;347}348 349#three {350 background:url(../Pictures/3.png) no-repeat 6px 50%;351}352 353#four {354 background:url(../Pictures/4.png) no-repeat 6px 50%;355}356 357#five {358 background:url(../Pictures/5.png) no-repeat 6px 50%;359}360 361#six {362 background:url(../Pictures/6.png) no-repeat 6px 50%;363}364 365#seven {366 background:url(../Pictures/7.png) no-repeat 6px 50%;367}368 369#eight {370 background:url(../Pictures/8.png) no-repeat 6px 50%;371}372 373#nine {374 background:url(../Pictures/9.png) no-repeat 6px 50%;375}376 377#ten {378 background:url(../Pictures/10.png) no-repeat 6px 50%;379}380 381#eleven {382 background:url(../Pictures/11.png) no-repeat 6px 50%;383}384 385#twelve {386 background:url(../Pictures/12.png) no-repeat 6px 50%;387}388 389#thirteen {390 background:url(../Pictures/13.png) no-repeat 6px 50%;391}392 393blockquote {394 width: 500px;395 text-align: center;396 margin: 0;397 font-family:Georgia, "Times New Roman", Times, serif;398 letter-spacing:-1px;399 line-height:1em;400 color:#555;401 background-image: url(../Pictures/blockquote_start.png);402 background-repeat: no-repeat;403 background-position: left top;404 padding: 0;405}406 407#quote {408 background:url(../Pictures/blockquote_end.png) no-repeat right bottom;409 margin-top: 0;410 margin-right: 0px;411 margin-bottom: 0;412 margin-left: 0;413 padding-top: 20px;414 padding-right: 5px;415 padding-bottom: 10px;416 padding-left: 5px;417}418 419form {420 width: 450px;421 margin-right: auto;422 margin-left: auto;423 background-color: #E7E2DA;424 padding: 20px;425 border: 1px solid #474143;426}427 </style>428 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">429 <meta content="stephen, hendrick, locksmith, lisburn, belfast" name="keywords">430 <meta content="Belfast & Lisburn Locksmiths - Quality Locksmith Service, Emergency Mobile Service" name="description">431 <title>432 Stephen A Hendrick Locksmiths | Honesty Integrity Discretion433 </title>434 </head>435 <body class="home">436 <div id="frame">437 <div id="top_image_home">438 </div>439 <!--Closes top_image-->440 <div id="content">441 <ul id="minitabs">442 <li>443 <a>444 Home445 </a>446 </li>447 <li>448 <a>449 Services/Testimonials450 </a>451 </li>452 <li>453 <a>454 Trusted Trades455 </a>456 </li>457 <li>458 <a>459 Contact460 </a>461 </li>462 </ul>463 <div id="content_left">464 <h2 align="left">465 24/7 Emergency Service - [PHONE REDACTED]466 </h2>467 <p align="center">468 <img alt="Pic1" height="300" id="r1" name="r1" src="rick.jpg" width="400">469 </p>470 <p>471 A complete Mobile Locksmith and Security service available to you472 <strong>473 24 hours a day, 7 days a week and 365 days a year474 </strong>475 . As a local476 <strong>477 independent478 </strong>479 business we operate within a 25 mile radius of Lisburn but can and will travel province wide under prior arrangement.480 <strong>481 We do not charge 'call out' fees482 </strong>483 <strong>484 and we do not charge by the hour.485 </strong>486 </p>487 <p>488 We have over 28 years experience in the Security Industry and a proven track record. Our Locksmiths are489 <strong>490 City & Guilds acredited491 </strong>492 in all Locksmith disciplines including493 <strong>494 Advanced Automotive495 </strong>496 .497 </p>498 <p>499 We are bound by500 <strong>501 ethical work practices502 </strong>503 , are504 <strong>505 security cleared506 </strong>507 ,508 <strong>509 vetted510 </strong>511 and carry512 <strong>513 Identity Cards514 </strong>515 . We also carry extensive516 <strong>517 public liability518 </strong>519 and520 <strong>521 trade522 </strong>523 insurance.524 </p>525 <p>526 We are passionate about our work and trade therefore can afford to deliver you a527 <strong>528 reliable529 </strong>530 ,531 <strong>532 prompt533 </strong>534 ,535 <strong>536 professional537 </strong>538 and539 <strong>540 courteous541 </strong>542 service which is second to none at a price you can afford.543 <strong>544 We are big enough to cope but small enough to care545 </strong>546 .547 <strong>548 Honesty549 </strong>550 ,551 <strong>552 Integrity553 </strong>554 and555 <strong>556 Discretion557 </strong>558 are not just words to us, they are our fundimental beliefs.559 </p>560 <p>561 We can assist you whether you are an562 <strong>563 Automotive564 </strong>565 ,566 <strong>567 Commercial568 </strong>569 ,570 <strong>571 Industrial572 </strong>573 ,574 <strong>575 Private576 </strong>577 or578 <strong>579 Residential580 </strong>581 customer. We use582 <strong>583 non-destructive584 </strong>585 entry techniques wherever possible, our materials are586 <strong>587 British Standard588 </strong>589 and conform to590 <strong>591 Insurance Company requirements592 </strong>593 . All materials and work carried out by us is594 <strong>595 guaranteed596 </strong>597 .598 </p>599 </div>600 <!--Closes content_left-->601 <div id="content_right">602 <h1>603 <strong>604 Services605 </strong>606 </h1>607 <p align="left">608 <img align="right" alt="Pics" height="100" src="rick.jpg" width="133">609 <br>610 We offer many, varied services...611 <br>612 <br>613 <br>614 <a>615 Click to Find out more616 </a>617 <br>618 </p>619 <h1>620 <strong>621 Get In Touch...622 </strong>623 </h1>624 <p align="left">625 The best way to get in touch is to ring us on:626 <br>627 <u>628 24 Hour Mobile -629 <strong>630 <a>631 [PHONE REDACTED]632 </a>633 </strong>634 </u>635 <br>636 <a>637 <strong>638 or click here to email us639 </strong>640 </a>641 </p>642 <h1>643 <strong>644 What We Don't Do645 </strong>646 ...647 </h1>648 <p align="left">649 * Charge call-out fees650 <br>651 * Charge rip-off prices652 <br>653 * Have uncertified locksmiths654 <br>655 * Use cheap and budget locks656 <br>657 * Have a catchy business name with a658 <br>659 confusing website660 <br>661 * Appear on rogue trader tv programs662 <br>663 </p>664 <h1>665 <strong>666 We are...667 </strong>668 </h1>669 <p align="left">670 We are a good, honest locksmith business providing support to the whole community 24 hours a day, 7 days a week.671 </p>672 </div>673 <!--Closes content_right-->674 </div>675 <!--Closes content-->676 <br clear="all">677 <br clear="all">678 <div id="copyright">679 © 2010680 <img alt="Unit 50 Logo" height="14" src="rick.jpg" width="14">681 <a>682 Unit 50 Design683 </a>684 All rights reserved.685 </div>686 <!--Closes Copyright-->687 </div>688 <!--Closes Frame-->689 </body>690</html>691