SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA 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 "easy" version of the Design2Code testset 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.
6379
1<!DOCTYPE html>2<html>3 <head>4 <style>5 /*******************************************************************************6Slate Theme for GitHub Pages7by Jason Costello, @jsncostello8*******************************************************************************/9 10 11/*******************************************************************************12MeyerWeb Reset13*******************************************************************************/14 15html, body, div, span, applet, object, iframe,16h1, h2, h3, h4, h5, h6, p, blockquote, pre,17a, abbr, acronym, address, big, cite, code,18del, dfn, em, img, ins, kbd, q, s, samp,19small, strike, strong, sub, sup, tt, var,20b, u, i, center,21dl, dt, dd, ol, ul, li,22fieldset, form, label, legend,23table, caption, tbody, tfoot, thead, tr, th, td,24article, aside, canvas, details, embed,25figure, figcaption, footer, header, hgroup,26menu, nav, output, ruby, section, summary,27time, mark, audio, video {28 margin: 0;29 padding: 0;30 border: 0;31 font: inherit;32 vertical-align: baseline;33}34 35/* HTML5 display-role reset for older browsers */36article, aside, details, figcaption, figure,37footer, header, hgroup, menu, nav, section {38 display: block;39}40 41ol, ul {42 list-style: none;43}44 45 46table {47 border-collapse: collapse;48 border-spacing: 0;49}50 51 52/*******************************************************************************53Theme Styles54*******************************************************************************/55 56body {57 box-sizing: border-box;58 color:#373737;59 background: #212121;60 font-size: 14px;61 font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;62 line-height: 1.5;63 -webkit-font-smoothing: antialiased;64}65 66h1, h2, h3, h4, h5, h6 {67 margin: 10px 0;68 font-weight: 700;69 color:#222222;70 font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;71 letter-spacing: -1px;72}73 74 75h1 {76 font-size: 36px;77 font-weight: 700;78}79 80h2 {81 padding-bottom: 10px;82 font-size: 15px;83 background: url('../images/bg_hr.png') repeat-x bottom;84}85 86h3 {87 font-size: 24px;88}89 90h4 {91 font-size: 21px;92}93 94h5 {95 font-size: 18px;96}97 98h6 {99 font-size: 16px;100}101 102p {103 margin: 10px 0 15px 0;104}105 106footer p {107 color: #f2f2f2;108}109 110::selection {111 color: #0a043c;112 background: #d3e0ea;113}114 115a {116 text-decoration: none;117 color: #007edf;118 text-shadow: none;119 120 transition: color 0.5s ease;121 transition: text-shadow 0.5s ease;122 -webkit-transition: color 0.5s ease;123 -webkit-transition: text-shadow 0.5s ease;124 -moz-transition: color 0.5s ease;125 -moz-transition: text-shadow 0.5s ease;126 -o-transition: color 0.5s ease;127 -o-transition: text-shadow 0.5s ease;128 -ms-transition: color 0.5s ease;129 -ms-transition: text-shadow 0.5s ease;130}131 132a:hover, a:focus {text-decoration: underline;}133 134footer a {135 color: #F2F2F2;136 text-decoration: underline;137}138 139em {140 font-style: italic;141}142 143strong {144 font-weight: bold;145}146 147img {148 position: relative;149 margin: 0 auto;150 max-width: 739px;151 padding: 5px;152 margin: 10px 0 10px 0;153 border: 1px solid #ebebeb;154 155 box-shadow: 0 0 5px #ebebeb;156 -webkit-box-shadow: 0 0 5px #ebebeb;157 -moz-box-shadow: 0 0 5px #ebebeb;158 -o-box-shadow: 0 0 5px #ebebeb;159 -ms-box-shadow: 0 0 5px #ebebeb;160}161 162p img {163 display: inline;164 margin: 0;165 padding: 0;166 vertical-align: middle;167 text-align: center;168 border: none;169}170 171pre, code {172 width: 100%;173 color: #222;174 background-color: #fff;175 176 font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;177 font-size: 14px;178 179 border-radius: 2px;180 -moz-border-radius: 2px;181 -webkit-border-radius: 2px;182}183 184pre {185 width: 100%;186 padding: 10px;187 box-shadow: 0 0 10px rgba(0,0,0,.1);188 overflow: auto;189}190 191code {192 padding: 3px;193 margin: 0 3px;194 box-shadow: 0 0 10px rgba(0,0,0,.1);195}196 197pre code {198 display: block;199 box-shadow: none;200}201 202blockquote {203 color: #666;204 margin-bottom: 20px;205 padding: 0 0 0 20px;206 border-left: 3px solid #bbb;207}208 209 210ul, ol, dl {211 margin-bottom: 15px212}213 214ul {215 list-style: inside;216 padding-left: 20px;217}218 219ol {220 list-style: decimal inside;221 padding-left: 20px;222}223 224dl dt {225 font-weight: bold;226}227 228dl dd {229 padding-left: 20px;230 font-style: italic;231}232 233dl p {234 padding-left: 20px;235 font-style: italic;236}237 238hr {239 height: 1px;240 margin-bottom: 5px;241 border: none;242 background: url('../images/bg_hr.png') repeat-x center;243}244 245 246table {247 border: 1px solid #373737;248 margin-bottom: 20px;249 text-align: left;250 }251 252th {253 font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;254 padding: 10px;255 background: #373737;256 color: #fff;257 }258 259td {260 padding: 10px;261 border: 1px solid #373737;262 }263 264form {265 background: #f2f2f2;266 padding: 20px;267}268 269/*******************************************************************************270Full-Width Styles271*******************************************************************************/272 273.outer {274 width: 100%;275}276 277.inner {278 position: relative;279 max-width: 80%;280 padding: 20px 10px;281 margin: 0 auto;282}283 284#forkme_banner {285 display: block;286 position: absolute;287 top:0;288 right: 10px;289 z-index: 10;290 font-family: Arial;291 font-size: 15px;292 padding: 10px 50px 10px 10px;293 color: #fff;294 background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%;295 font-weight: 700;296 box-shadow: 0 0 10px rgba(0,0,0,.5);297 border-bottom-left-radius: 2px;298 border-bottom-right-radius: 2px;299}300 301#forkme_banner:hover {302 -webkit-box-shadow: 0px 1px 3px #1a73e8;303 -moz-box-shadow: 0px 1px 3px #1a73e8;304 box-shadow: 0px 1px 3px #1a73e8;305}306 307#header_wrap {308 background: #212121;309 background: -moz-linear-gradient(top, #373737, #212121);310 background: -webkit-linear-gradient(top, #373737, #212121);311 background: -ms-linear-gradient(top, #373737, #212121);312 background: -o-linear-gradient(top, #373737, #212121);313 background: linear-gradient(top, #373737, #212121);314}315 316#header_wrap .inner {317 padding: 50px 10px 10px 10px;318}319 320#project_title {321 margin: 0;322 color: #fff;323 font-family: Arial;324 font-size: 32px;325 font-weight: 700;326 text-shadow: #111 0px 0px 10px;327}328 329#project_tagline {330 color: #fff;331 font-size: 18px;332 font-weight: 300;333 background: none;334 font-family: Arial;335 text-shadow: #111 0px 0px 10px;336}337 338#downloads {339 position: absolute;340 width: 210px;341 z-index: 10;342 bottom: -40px;343 right: 0;344 height: 70px;345 background: url('../images/icon_download.png') no-repeat 0% 90%;346}347 348.zip_download_link {349 display: block;350 float: right;351 width: 90px;352 height:70px;353 text-indent: -5000px;354 overflow: hidden;355 background: url(../images/sprite_download.png) no-repeat bottom left;356}357 358.tar_download_link {359 display: block;360 float: right;361 width: 90px;362 height:70px;363 text-indent: -5000px;364 overflow: hidden;365 background: url(../images/sprite_download.png) no-repeat bottom right;366 margin-left: 10px;367}368 369.zip_download_link:hover {370 background: url(../images/sprite_download.png) no-repeat top left;371}372 373.tar_download_link:hover {374 background: url(../images/sprite_download.png) no-repeat top right;375}376 377#main_content_wrap {378 background: #ffffff;379 border-top: 1px solid #111;380 border-bottom: 1px solid #111;381}382 383#main_content {384 padding-top: 40px;385}386 387#footer_wrap {388 background: #212121;389}390 391 392 393/*******************************************************************************394Small Device Styles395*******************************************************************************/396 397@media screen and (max-width: 480px) {398 399 body {400 font-size:14px;401 }402 403 #downloads {404 display: none;405 }406 407 .inner {408 min-width: 320px;409 max-width: 480px;410 }411 412 #project_title {413 font-size: 32px;414 }415 416 h1 {417 font-size: 18px;418 }419 420 h2 {421 font-size: 14px;422 }423 424 h3 {425 font-size: 21px;426 }427 428 h4 {429 font-size: 18px;430 }431 432 h5 {433 font-size: 14px;434 }435 436 h6 {437 font-size: 12px;438 }439 440 code, pre {441 min-width: 320px;442 max-width: 480px;443 font-size: 11px;444 }445 446}447 </style>448 <meta charset="utf-8">449 <meta content="chrome=1" http-equiv="X-UA-Compatible">450 <meta content="Hadoopecosystemtable.github.io : This page is a summary to keep the track of Hadoop related project, and relevant projects around Big Data scene focused on the open source, free software enviroment." name="description">451 <title>452 The Hadoop Ecosystem Table453 </title>454 </head>455 <body>456 <!-- HEADER -->457 <div class="outer" id="header_wrap">458 <header class="inner">459 <a id="forkme_banner">460 Fork Me on GitHub461 </a>462 <h1 id="project_title">463 The Hadoop Ecosystem Table464 </h1>465 <h2 id="project_tagline">466 This page is a summary to keep the track of Hadoop related projects, focused on FLOSS environment.467 </h2>468 </header>469 </div>470 <!-- MAIN CONTENT -->471 <div class="outer" id="main_content_wrap">472 <section class="inner" id="main_content">473 <!-- THE TABLE -->474 <table class="example3">475 <!-- -->476 <!-- Distributed Filesystem -->477 <!-- -->478 <tbody>479 <tr>480 <th colspan="3" style="text-align: center;">481 Distributed Filesystem482 </th>483 </tr>484 <tr>485 <td width="30%">486 Apache HDFS487 </td>488 <td>489 The Hadoop Distributed File System (HDFS) offers a way to store large files across490 multiple machines. Hadoop and HDFS was derived from Google File System (GFS) paper.491 </td>492 <td width="20%">493 <a target="_blank">494 1. hadoop.apache.org495 </a>496 <br>497 <a target="_blank">498 2. Google FileSystem - GFS Paper499 </a>500 <br>501 <a target="_blank">502 3. Cloudera Why HDFS503 </a>504 <br>505 <a target="_blank">506 4. Hortonworks Why HDFS507 </a>508 </td>509 </tr>510 <tr>511 <td width="20%">512 Red Hat GlusterFS513 </td>514 <td>515 GlusterFS is a scale-out network-attached storage file system. GlusterFS was516 developed originally by Gluster, Inc., then by Red Hat, Inc., after their517 purchase of Gluster in 2011.518 </td>519 <td width="20%">520 <a target="_blank">521 1. www.gluster.org522 </a>523 <br>524 <a target="_blank">525 2. Red Hat Hadoop Plugin526 </a>527 </td>528 </tr>529 <tr>530 <td width="20%">531 Quantcast File System QFS532 </td>533 <td>534 QFS is an open-source distributed file system software package for535 large-scale MapReduce or other batch-processing workloads. It was536 designed as an alternative to Apache Hadoop’s HDFS, intended to deliver537 better performance and cost-efficiency for large-scale processing clusters.538 It is written in C++ and has fixed-footprint memory management. QFS uses539 Reed-Solomon error correction as method for assuring reliable access to data.540 <br>541 Reed–Solomon coding is very widely used in mass storage systems to correct the burst542 errors associated with media defects. Rather than storing three full versions of543 each file like HDFS, resulting in the need for three times more storage, QFS544 only needs 1.5x the raw capacity because it stripes data across nine different disk drives.545 </td>546 <td width="20%">547 <a target="_blank">548 1. QFS site549 </a>550 <br>551 <a target="_blank">552 2. GitHub QFS553 </a>554 <br>555 <a target="_blank">556 3. HADOOP-8885557 </a>558 </td>559 </tr>560 <!-- -->561 <!-- Distributed Programming-->562 <!-- -->563 <!-- -->564 <!-- NoSQL ecosystem -->565 <!-- -->566 <!-- -->567 <!-- NoSQL: Graph Data Model -->568 <!-- -->569 <!-- -->570 <!-- NewSQL ecosystem -->571 <!-- -->572 <!-- -->573 <!-- Data Ingestion Tools -->574 <!-- -->575 <!-- -->576 <!-- Machine Learning tools -->577 <!-- -->578 <!-- -->579 <!-- Benchmarking and QA tools -->580 <!-- -->581 <!-- -->582 <!-- Development Framework -->583 <!-- -->584 </tbody>585 </table>586 </section>587 </div>588 <!-- FOOTER -->589 <div class="outer" id="footer_wrap">590 <footer class="inner">591 <p>592 Published with593 <a target="_blank">594 GitHub Pages595 </a>596 by597 <a target="_blank">598 [Name Redacted]599 </a>600 , and601 <a target="_blank">602 contributors603 </a>604 </p>605 </footer>606 </div>607 </body>608</html>609