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 Strict//EN" "">2<html xmlns="">3 <head>4 <style>5 @font-face {6 font-family: 'Arvo';7 font-style: normal;8 font-weight: 400;9 src: url(http://fonts.gstatic.com/s/arvo/v22/tDbD2oWUg0MKqScQ6A.ttf) format('truetype');10}11 12 13 14 15/*16Design by Free CSS Templates17http://www.freecsstemplates.org18Released for free under a Creative Commons Attribution 2.5 License19*/20 21body {22 margin: 0;23 padding: 0;24 background: #C0C9D8 url(images/img01.jpg) repeat-x;25 font-family: Arial, Helvetica, sans-serif;26 font-size: 14px;27 color: #181B20;28}29 30h1, h2, h3 {31 margin: 0;32 padding: 0;33 font-family: 'Arvo', serif;34 font-weight: normal;35 color: #2E9F13;36}37 38h1 {39 font-size: 2em;40}41 42h2 {43 font-size: 2.4em;44}45 46h3 {47 font-size: 1.6em;48}49 50p, ul, ol {51 margin-top: 0;52 line-height: 180%;53}54 55ul, ol {56}57 58a {59 color: #3333FF;60}61 62a:hover {63 text-decoration: none;64}65 66img.border {67 border: 6px solid #EEE7DF;68}69 70img.alignleft {71 float: left;72 margin-right: 25px;73}74 75img.alignright {76 float: right;77}78 79img.aligncenter {80 margin: 0px auto;81}82 83#wrapper {84 margin: 0 auto;85 padding: 0;86 background: url(images/img03.gif) no-repeat center top;87}88 89/* Header */90 91#header-wrapper {92 height: 240px;93}94 95#header {96 width: 960px;97 height: 240px;98 margin: 0 auto;99}100 101/* Logo */102 103#logo {104 width: 980px;105 height: 100px;106 margin: 0px auto;107 padding: 80px 0px 0px 0px;108 color: #e3ebfe;109}110 111#logo h1, #logo p {112 display: block;113 margin: 0;114 padding: 0;115}116 117#logo h1 {118 margin: 0px;119 letter-spacing: -1px;120 text-align: center;121 text-transform: uppercase;122 font-size: 54px;123 font-weight: bold;124 color: #e3ebfe;125}126 127#logo h1 a {128 color: #e3ebfe;129}130 131#logo p {132 text-align: center;133 font-family: 'Arvo', serif;134 font-size: 20px;135}136 137#logo a {138 border: none;139 background: none;140 text-decoration: underline;141 color: #e3ebfe;142}143 144/* Search */145 146#search {147 float: right;148 width: 280px;149 height: 100px;150 padding: 0;151}152 153#search form {154 height: 41px;155 margin: 0;156 padding: 60px 0 0 30px;157}158 159#search fieldset {160 margin: 0;161 padding: 0;162 border: none;163}164 165#search-text {166 width: 195px;167 padding: 6px 10px;168 border: none;169 background: #e3ebfe;170 text-transform: lowercase;171 font: normal 11px Arial, Helvetica, sans-serif;172 color: #7F7F81;173}174 175#search-submit {176 display: none;177}178 179/* Menu */180 181#menu {182 width: 940px;183 height: 76px;184 margin: 0px auto;185 padding: 20px 20px 0px 20px;186 background: #e3ebfe url(images/img02.jpg) no-repeat left top;187}188 189#menu ul {190 margin: 0;191 padding: 0px 0px 0px 0px;192 list-style: none;193 line-height: normal;194}195 196#menu li {197 float: left;198}199 200#menu a {201 display: block;202 float: left;203 height: 56px;204 margin: 0px;205 padding: 0px 30px 0px 30px;206 line-height: 56px;207 letter-spacing: -1px;208 text-decoration: underline;209 text-transform: uppercase;210 font-family: 'Arvo', serif;211 font-size: 14px;212 font-weight: normal;213 color: #B5B5B5;214 border: none;215}216 217#menu .current_page_item a {218 background: url(images/img03.jpg) repeat-x left top;219 color: #e3ebfe;220}221 222#menu a:hover {223 text-decoration: none;224 color: #e3ebfe;225}226 227/* Page */228 229#page {230 width: 980px;231 margin: 0 auto;232 padding: 0;233 background-color: #e3ebfe;234}235 236#page-bgtop {237}238 239#page-bgbtm {240 margin: 0px;241 padding: 40px 30px 0px 30px;242}243 244/* Content */245 246#content {247 float: left;248 width: 590px;249 padding: 0px 0px 0px 0px;250}251 252.post {253 clear: both;254 padding-bottom: 10px;255}256 257.post .title {258 padding-top: 10px;259 letter-spacing: -2px;260}261 262.post .title a {263 color: #1A1A1A;264 border: none;265}266 267.post .meta {268 padding-bottom: 10px;269 text-align: left;270 font-family: Arial, Helvetica, sans-serif;271 font-size: 11px;272 font-style: italic;273}274 275.post .meta a {276}277 278.post .entry {279 text-align: justify;280 margin-bottom: 25px;281 padding: 10px 0px 0px 0px;282}283 284.links {285 display: block;286 width: 96px;287 padding: 2px 0px 2px 0px;288 background: #A53602;289 text-align: center;290 text-transform: uppercase;291 font-size: 10px;292 color: #e3ebfe;293}294 295/* Sidebar */296 297#sidebar {298 float: right;299 width: 280px;300 padding: 0px 0px 0px 0px;301}302 303#sidebar ul {304 margin: 0;305 padding: 0;306 list-style: none;307}308 309#sidebar li {310 margin: 0;311 padding: 0;312}313 314#sidebar li ul {315 margin: 0px 15px;316 padding-bottom: 30px;317}318 319#sidebar li li {320 padding-left: 20px;321 line-height: 35px;322 background: url(images/img07.jpg) no-repeat left 14px;323}324 325#sidebar li li span {326 display: block;327 margin-top: -20px;328 padding: 0;329 font-size: 11px;330 font-style: italic;331}332 333#sidebar h2 {334 height: 38px;335 margin-bottom: 20px;336 padding: 12px 0 0 15px;337 border-bottom: 1px solid #B6BFD0;338 letter-spacing: -1px;339 font-size: 24px;340 color: #1A1A1A;341}342 343#sidebar p {344 margin: 0 0px;345 padding: 0px 20px 20px 20px;346 text-align: justify;347}348 349#sidebar a {350 text-decoration: underline351}352 353#sidebar a:hover {354 text-decoration: none;355}356 357/* Calendar */358 359#calendar {360}361 362#calendar_wrap {363 padding: 20px;364}365 366#calendar table {367 width: 100%;368}369 370#calendar tbody td {371 text-align: center;372}373 374#calendar #next {375 text-align: right;376}377 378/* Footer */379 380#footer {381 width: 960px;382 height: 55px;383 margin: 0px auto 40px auto;384 border-top: 1px solid #B6BFD0;385 font-family: Arial, Helvetica, sans-serif;386}387 388#footer p {389 margin: 0;390 padding-top: 18px;391 line-height: normal;392 text-align: center;393 color: #576475;394}395 396#footer a {397 color: #576475;398}399 </style>400 <!--401Design by Free CSS Templates402http://www.freecsstemplates.org403Released for free under a Creative Commons Attribution 2.5 License404 405Name : GradientBlack 406Description: A two-column, fixed-width design with dark color scheme.407Version : 1.0408Released : 20111121409 410-->411 <meta content name="keywords">412 <meta content name="description">413 <meta content="text/html; charset=utf-8" http-equiv="content-type">414 <title>415 Workshop on Intersection Types and Related Systems 2012416 </title>417 </head>418 <body>419 <div id="wrapper">420 <div id="header-wrapper">421 <div id="header">422 <div id="logo">423 <h1>424 <a>425 ITRS 2012426 </a>427 </h1>428 <p>429 Sixth Workshop on Intersection Types and Related Systems 2012430 </p>431 </div>432 </div>433 </div>434 <!-- end #header -->435 <div id="menu">436 <ul>437 <li>438 <a>439 Homepage440 </a>441 </li>442 <li class="current_page_item">443 <a>444 Call for445 papers446 </a>447 </li>448 <li>449 <a>450 Program committee451 </a>452 </li>453 <li>454 <a>455 Program456 </a>457 </li>458 </ul>459 </div>460 <!-- end #menu -->461 <div id="page">462 <div id="page-bgtop">463 <div id="page-bgbtm">464 <div id="content_full">465 <div class="post">466 <div class="entry">467 <p>468 ITRS4692010 workshop aims to bring together researchers working on both the470theory and practical applications of systems based on intersection471types and related approaches.472 </p>473 <h3 style="color: rgb(204, 0, 0);">474 475 <img align="right" alt="update" src="rick.jpg" style="width: 80px; height: 80px;">476 IMPORTANT DATES477 <br>478 </h3>479 <br style="font-family: Computer Modern;">480 <ul style="font-family: Computer Modern;">481 <li>482 Title and brief abstract description: April 19th483 </li>484 <li>485 Full extended-abstract (in PDF) submission: April 21th486 </li>487 <li>488 Author notification: May 12489 <br>490 </li>491 <li>492 <span style="color: red;">493 Abstract, final version due: June 10494 </span>495 </li>496 </ul>497 <h3 style="color: rgb(204, 0, 0);">498 SUBMISSION499 </h3>500 <h4>501 The submission is in502 <span style="color: red;">503 two stages504 </span>505 .506 </h4>507 <p style="text-align: left;">508 (1)509 <strong>510 Before the workshop511 </strong>512 ,513authors are514invited to submit an extended abstract (approximatively 3-5 pages, max.51510 pages) in PDF format:516go to the 517 <a title="EASYCHAIR">518 EASYCHAIR-ITRS2012519 </a>520 and follow521the instruction there. Submissions must be prepared in LaTeX using the522EPTCS macro package (523 <a class="moz-txt-link-freetext">524 http://style.eptcs.org/525 </a>526 ).527 <br>528 Accepted papers will be presented at the workshop and included in the529preliminary proceedings, which will made available in electronic form.530 <br>531 (2)532 <strong>533 After the workshop534 </strong>535 , authors of accepted papers536will be invited to537submit full versions, which will be referred for inclusion in final538post-proceedings. We will publish539 <span style="font-weight: bold; color: red;">540 post-proceedings541 </span>542 in543 <strong>544 Electronic545Proceedings in Theoretical546Computer Science547 </strong>548 (549 <a title="EPTCS">550 EPTCS551 </a>552 ).553Submissions must be prepared in LaTeX using the EPTCS macro package (554 <a class="moz-txt-link-freetext">555 http://style.eptcs.org/556 </a>557 ).558 </p>559 <h3 style="color: rgb(204, 0, 0);">560 TOPICS561 </h3>562 <p>563 Possible topics for submitted papers include, but are not limited564to:565 </p>566 <ul>567 <li>568 Formal properties of systems with intersection types.569 </li>570 <li>571 Results for related systems, such as union types, refinement572types, or singleton types.573 </li>574 <li>575 Applications to lambda calculus and similar systems.576 </li>577 <li>578 Applications to pi-calculus and similar systems.579 </li>580 </ul>581 <br>582 <h3 style="color: rgb(204, 0, 0);">583 PROGRAM COMMITTEE584 </h3>585 <ul>586 <li>587 <a>588 Stéphane589Lengrand590 </a>591 (École Polytechnique)592 </li>593 <li>594 <a>595 Koji596Nakazawa597 </a>598 (Kyoto Univ.)599 </li>600 <li>601 <a>602 Luke Ong603 </a>604 (Oxford605Univ.)606 </li>607 <li>608 <a>609 Luca Paolini610 </a>611 (Univ. Torino), chair612 <br>613 </li>614 </ul>615 <h3 style="color: rgb(204, 0, 0);">616 INFORMATION617 </h3>618 <p>619 For further information, please contact620 <br>621 Luca Paolini622 <br>623 Email:624 <a class="moz-txt-link-abbreviated">625 [EMAIL REDACTED]626 </a>627 </p>628 </div>629 </div>630 <div style="clear: both;">631 632 </div>633 </div>634 <!-- end #content -->635 <div style="clear: both;">636 637 </div>638 </div>639 </div>640 </div>641 <!-- end #page -->642 </div>643 <div id="footer">644 <p>645 Site by646 <a>647 Mauro Piccolo648 </a>649 ;650CSS by651 <a>652 CSS Templates653 </a>654 .655 </p>656 </div>657 <!-- end #footer -->658 </body>659</html>660