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 Strict//EN" "">2<html>3 <head>4 <style>5 /* ----------------------------------------------------------------------------6 7 Ruby on Rails8 Stylesheet for http://rubyonrails.org9 10 1. General HTML elements11 2. General classes12 3. General structure13 1. header14 2. Content15 3. Sidebar16 4. Sitewide elements 17 1. Introduction boxes18 2. Navigation19 5. Elements for specific areas20 1. Weblog21 2. Reference documentation 22 3. Trac "integration"23 24---------------------------------------------------------------------------- */25 26* {27 margin: 0;28 padding: 0; 29}30 31body { 32 color: #333333;33 34 background-color: #FFFFFF;35 background-image: url(../images/header_background.png);36 background-repeat: repeat-x;37 background-position: 0 -25px;38 39 font-size: 80%;40 font-family: verdana, helvetica, arial, sans-serif;41 line-height: 1.6em;42 43 /* Center in IE5.5 */44 text-align: center;45}46 47code {48 font-size: 1.2em;49}50 51h1 {52 margin-bottom: 0.5em;53 font-size: 2em;54 font-weight: normal;55 letter-spacing: -0.04em;56}57 58h2 {59 margin-top: 1em;60 margin-bottom: 0.5em;61 font-size: 1.5em;62 font-weight: normal;63 letter-spacing: -0.04em;64}65 66h3 {67 margin-top: 1em;68 margin-bottom: 0.5em;69 font-size: 1.2em;70 font-weight: normal;71 letter-spacing: -0.06em;72 font-weight: bold;73}74 75iframe {76 border: none;77}78 79img {80 border: none;81}82 83p {84 margin-bottom: 1em;85}86 87a:link {88 color: #BB2233;89}90 91a:visited {92 color: #991122;93}94 95a:hover {96 color: #CC2233;97 background-color: #EEEEEE;98}99 100a:active {101}102 103small {104 color: #AAAAAA;105}106 107 108ul {109 margin-top: 1em;110 margin-bottom: 1em;111 list-style-type: none;112}113 114ul li {115 margin-left: 0.5em;116 padding-left: 1em;117 118 background-image: url(../images/bullet.gif);119 background-repeat: no-repeat;120 background-position: 0 0.55em;121}122 123ol {124 margin-left: 1em;125 padding-left: 1em;126}127 128ol li {129 margin-left: 0.5em;130 padding-left: 0.5em;131}132 133input, textarea, select {134 font-family: verdana, helvetica, arial, sans-serif;135 font-size: 1em;136 padding: 0.2em;137 border: 1px solid #888888;138}139 140input:focus, textarea:focus, select:focus {141 border-color: #333333;142}143 144blockquote {145 font-style: italic;146 padding-left: 2em;147 color: #888888;148 margin-bottom: 1em;149}150 151q {152 font-style: italic;153}154 155pre {156 background-color: #eeeeee;157 margin-bottom: 1em;158 padding: 1em;159 font-size: 1em;160}161 162table {163 font-size: 1em;164}165 166table td {167 padding: 0 1em 0 0;168 vertical-align: top;169}170 171table tr td:first-child {172 padding-left: 0;173}174 175/* ----------------------------------------------------------------------------176 Structure177---------------------------------------------------------------------------- */178 179div#container {180 position: relative;181 width: 90%;182 max-width: 720px; 183 184 margin-top: 10px;185 margin-left: auto;186 margin-right: auto;187 padding-bottom: 10px;188 189 font-size: 1em;190 191 /* Don't center text, only div#container */192 text-align: left;193}194 195div#header {196 /* This height controls the vertical position of #content and #sidebar */197 height: 160px;198 /* overflow: hidden;*/199}200 201div#header h1 {202 height: 70px;203 204 margin: 0;205 margin-left: 170px;206 padding: 0;207 /* Move the text out of the way */208 margin-top: 1em;209 color: #f9eaaf;210 font-weight: bold;211 text-align: right;212 /*text-indent: -5000px;*/213}214 215div#logo {216 float: left;217 width: 110px;218 height: 140px;219 margin-right: 31px;220 margin-top: -10px;221 margin-left: -40px;222}223 224div#content {225 position: absolute;226 left: 140px;227}228 229/* Fix the IE only 3pixel jog - documented at http://www.positioniseverything.net/articles/hollyhack.html#haslayout \*/230* html #content {231 height: 1px;232}233/* End hide from IE5-mac */234 235div.sidebar {236 font-size: 0.8em;237 line-height: 1.6em;238}239 240div.sidebar#left {241 float: left;242 width: 140px;243 244 margin-top: -4px;245}246 247div.sidebar h2 {248 margin: 0;249 250 font-size: 1.1em;251 font-weight: bold;252}253 254div.sidebar ul {255 margin-top: 0;256 margin-bottom: 1em;257 margin-left: 1em;258 padding: 0;259}260 261div.sidebar ul li {262 margin: 0 0 0.2em 0;263 padding: 0;264 265 line-height: 1.3em;266 267 background-image: none;268}269 270div.sidebar ul li a {271 display: block;272 width: 110px;273 padding: 0.2em 0;274}275 276div.sidebar ul li a:hover {277}278 279div.sidebar#right {280 float: right;281 margin-bottom: 1em;282 padding: 1em;283 background-color: #D6DFE8;284}285address {286 white-space: pre;287 margin-left: 1em;288 font-style: normal;289}290 291/* ----------------------------------------------------------------------------292 Specific site-wide elements293---------------------------------------------------------------------------- */294 295/* Introduction boxes */296 297.introduction {298 margin-bottom: 1em;299 padding: 1em;300 301 font-size: 1.3em;302 line-height: 1.6em;303 background-color: #D6DFE8;304 305 -moz-border-radius-bottomright: 1em;306}307 308.introduction p {309 margin-bottom: 0;310}311 312/* Navigation */313 314ul#navMain {315 height: 42px;316 margin-left: 200px;317 padding: 0px 0 0 0;318 319 list-style-type: none; 320}321 322ul#navMain li {323 display: inline;324 background-image: none; 325 margin: 0;326 padding: 0;327}328 329ul#navMain li {330 border-left: 1px solid #000000;331}332 333ul#navMain li.first-child {334 /* Wouldn't it be nice if IE was up-to-date with the rest of the world so we could skip 335 superfluous classes like this? */336 border-left: none; 337}338 339ul#navMain li a { 340 padding: 0.2em 0.5em 0.2em 0.8em; 341 text-decoration: none;342}343 344ul#navMain li.first-child a {345 /* Wouldn't it be nice if IE was up-to-date with the rest of the world? */346 padding-left: 0;347}348 349ul#navMain li a:hover { 350 text-decoration: underline;351 background-color: transparent;352}353 354/* ----------------------------------------------------------------------------355 Elements for specific areas356---------------------------------------------------------------------------- */357 358/* 1. Weblog */359 360.blogEntry {361 margin-bottom: 2em;362}363 364.blogEntry h2 {365 margin-top: 0;366 margin-bottom: 0;367}368 369.blogEntry h2 a {370 color: black;371 text-decoration: none;372}373 374.blogEntry h2 a:hover {375 color: black;376 text-decoration: underline;377 background-color: white;378}379 380p.metaData {381 color: #999999;382 font-size: 0.9em;383}384 385div.comments {386 padding: 0.5em 1em; 387 margin-bottom: 1em;388 389 background-color: #EEEEEE;390 391 -moz-border-radius-topleft: 1em;392 -moz-border-radius-bottomright: 1em;393}394 395.comments textarea {396 width: 99%;397 height: 15em;398}399 400ol#commentList li {401 font-weight: bold;402}403 404ol#commentList li p {405 font-weight: normal;406}407 408ol#commentList li .metaData {409 color: #333333;410 font-size: 1em;411 font-weight: bold;412}413 414 415/* 2. Reference documentation */416 417#api #sidebar {418 display: none;419 width: 0;420}421 422#api #content {423 width: 100%;424 height: 800px;425 426 margin-left: 0;427}428 429#api #logo {430 width: 80px;431 height: 86px;432 433 margin-right: 0;434}435 436#api #logo img {437 height: 84px;438}439 440#api {441 /* The header is smaller on the reference page, move the background up so the menu is in the 442 proper place still */443 padding-bottom: 0;444 margin-bottom: 0;445 background-position: 0 -70px;446}447 448#api #header {449 height: 84px;450 margin: 0;451 overflow: hidden;452}453 454#api #header h1 {455 height: 24px;456 457 margin-top: 2px;458 margin-left: 0;459 460 background-image: none;461 462 text-indent: 0;463 font-size: 1.5em;464 font-weight: bold;465 466}467#api #container {468 max-width: 100%;469}470 471 472/* 3. Trac "integration" */473 474/* 4. About / frontpage */475 476table.get_started {477 /* Center the table */478 margin-left: auto;479 margin-right: auto;480}481 482table.get_started td {483 line-height: 1.4em;484 text-align: center;485 margin: 1em;486}487 488table.get_started td h3 {489 margin: 0;490 font-size: 1em; 491 font-weight: normal;492 font-style: italic;493}494 495table.frameworks td {496 width: 30%;497 padding: 0.5em;498}499 500 501 502/* Mark the current page */503body#home a.home,504body#debian a.debian,505body#links a.links,506body#software a.software, body#software a.software-main,507body#software-kde-apt a.software, body#software-kde-apt a.kde-apt,508body#software-birds a.software, body#software-birds a.birds {509 font-weight: bold;510}511 </style>512 <title>513 Lapinot's - Software514 </title>515 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">516 </head>517 <body id="software">518 <div id="container">519 <div id="header">520 <h1>521 Lapinot's home page522 </h1>523 <ul id="navMain">524 <li class="first-child">525 <a class="home">526 Home527 </a>528 </li>529 <li>530 <a class="debian">531 Debian532 </a>533 </li>534 <li>535 <a class="software">536 Software537 </a>538 </li>539 <li>540 <a class="links">541 Links542 </a>543 </li>544 </ul>545 </div>546 <div class="sidebar" id="left">547 <h2>548 Projects549 </h2>550 <ul>551 <li>552 <a class="software-main">553 Autobuild554 </a>555 </li>556 <li>557 <a class="birds">558 Birds559 </a>560 </li>561 <li>562 <a class="software-main">563 Karamba theme564 </a>565 </li>566 <li>567 <a class="kde-apt">568 KDE/APT569 </a>570 </li>571 </ul>572 </div>573 <div id="content">574 <h1>575 Projects576 </h1>577 <h2>578 <a>579 KDE/APT580 </a>581 </h2>582 <p>583 KDE/APT is made of two software packages: KIO/APT and KPkgManager. The first one gives584 access to585 <tt>586 apt-cache587 </tt>588 -like functionalities in589 <a>590 Konqueror591 </a>592 .593 The second allows very simple package management: install, remove and update/upgrade. It is 594 designed to provide a simple but lightweight tool for everyday use while more complete tools595 like aptitude are still necessary sometimes.596 </p>597 <h2>598 <a>599 Bird flock simulation600 </a>601 </h2>602 <p>603 An OpenGL-based bird flock simulation604 </p>605 <h2>606 Karamba theme607 </h2>608 <p>609 For people like me who like to have the KasBar and gkrellm for monitoring,610 I adapted the smooth theme for Karamba to make it thiner.611 Just check612 <a>613 a small screenshot614 </a>615 (320x200) and616 <a>617 a wider one618 </a>619 (1024x768).620 </p>621 <p>622 You can download it623 <a>624 here625 </a>626 .627 The theme file is doudou.theme. Be warned that I didn't adapt all the modules628 that are available.629 </p>630 <h2 id="autobuild">631 <a>632 Autobuild633 </a>634 (on RubyForge)635 </h2>636 A ruby-based autobuilder. Look at637 <a>638 the readme639 </a>640 too.641 </div>642 <!-- content -->643 </div>644 <!-- container -->645 </body>646</html>647