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 lang="en-US">3 <head>4 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">5 <meta content="width=device-width, initial-scale=1.0" name="viewport">6 <meta content="#222" name="theme-color">7 <meta content="Interactive notes for algebra based physics." name="description">8 <meta content="Ross [Name Redacted]" name="author">9 <meta content="Interactive notes for algebra based physics." property="og:description">10 <meta content="Physics Notes" property="og:title">11 <meta content="Physics Notes" name="twitter:title">12 <meta content="Interactive notes for algebra based physics." name="twitter:description">13 <title>14 Mr. [Name Redacted]15 </title>16 </head>17 <body>18 <style>19 20:root {21 --bg-color: #333;22 --def-color: #d3e6f1;23 --def-accent-color: #abc;24 --link-color: #08c;25}26 27/************Reset**************/28* {29 box-sizing: border-box;30}31 32html,33body,34div,35object,36iframe,37fieldset {38 margin: 0;39 padding: 0;40 border: 0;41}42 43ul {44 list-style: none;45 margin: 0;46 padding: 0;47}48 49table {50 border-collapse: collapse;51 border-spacing: 0;52}53 54header,55article,56figure {57 display: block;58}59 60svg:not(:root) {61 overflow: hidden;62}63 64/************End Reset**************/65 66body {67 font-family: "Roboto", "Helvetica Neue", "Arial", sans-serif;68 font-size: 105%;69 color: #333;70 line-height: 1.5;71 overflow-x: hidden;72}73 74article {75 padding: 10px;76 margin: 0 auto;77 max-width: 605px;78}79 80/* nav {81 margin: 0;82 max-width: 100%;83 position: fixed;84 left: 10px;85}86 87 88@media screen and (max-width: 900px) {89 nav {90 display: none;91 }92} */93 94h1,95h2,96h3 {97 font-weight: 400;98}99 100button {101 font-family: "Roboto", "Helvetica Neue", "Arial", sans-serif;102 font-size: 1em;103 margin: 0.3em;104}105 106input {107 font-family: Monaco, monospace;108 font-size: 90%;109 border: 10px;110 margin: 0.2em;111 width: 80px;112}113 114input[type="number"] {115 background-color: #eee;116}117 118input[type="text"] {119 background-color: #eee;120}121 122input:focus {123 outline: 0;124}125 126input[type="range"] {127 height: 12px;128}129 130input[type=range]::-moz-focus-outer {131 border: 0;132}133 134a {135 text-decoration: none;136 color: var(--link-color);137}138 139a:hover {140 text-decoration: underline;141 /* color: #000; */142}143 144summary {145 cursor: pointer;146 outline: none;147}148 149hr {150 border: 0;151 border-bottom: 1px solid #aaa;152}153 154::selection {155 color: white;156 background-color: var(--link-color);157}158 159pre {160 overflow-x: auto;161 background-color: #eee;162}163 164table {165 margin: 5px auto;166 border-collapse: collapse;167 border: 1px solid #eee;168 width: 100%;169}170 171tr:hover {172 background-color: #f4f4f4;173}174 175th,176td {177 text-align: center;178 border: 1px solid #eee;179 padding: 0.25rem;180 border-collapse: collapse;181}182 183th {184 background-color: #444;185 color: #fff;186}187 188canvas,189.SVG-shadow {190 margin: 0px;191 box-shadow: 2px 2px 8px #aaa;192 border-radius: 5px;193 user-select: none;194}195 196.no-shadow {197 box-shadow: none;198 border-radius: 0px;199}200 201.book-cover {202 box-shadow: 3px 3px 10px #666;203 margin: 20px auto;204 display: block;205 border-radius: 3px;206}207 208.underlined {209 /* text-transform: uppercase; */210 color: #000;211 margin-top: 6em;212 margin-bottom: 0em;213 border-bottom: 1px solid #aaa;214 font-weight: 300;215 font-size: 1.75em;216 word-spacing: 2px;217}218 219.underlined-small {220 color: #000;221 margin-top: 2.5em;222 margin-bottom: 0em;223 border-bottom: 1px solid #aaa;224 font-weight: 300;225 font-size: 1.3em;226}227 228.center {229 text-align: center;230 padding: 0;231 margin: auto;232 display: block;233}234 235.on-edge {236 margin-left: -1em;237 margin-right: -1em;238}239 240.definition {241 color: #000;242 background-color: var(--def-color);243 padding: 1em;244 margin: 1em 0em 1em 0em;245 border-radius: 1em;246 line-height: 1.6;247 font-size: 110%;248}249 250.definition em {251 color: #888;252 font-weight: 300;253}254 255.derive {256 color: #111;257 background-color: #eee;258 padding: 1em;259 border-radius: 1em;260}261 262.example {263 margin: 8em 0em 8em 0em;264}265 266.example-small {267 margin: 3em 0em 3em 0em;268}269 270.details {271 margin: 0;272 padding: 1em;273 background-color: #eee;274 border-radius: 15px;275}276 277.katex {278 font-size: 1.5em;279}280 281/* Grid with auto placement ______________________________________*/282.listing {283 list-style: none;284 display: grid;285 grid-gap: 20px;286 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));287}288 289.listing li {290 display: flex;291 flex-direction: column;292}293 294 295@media screen and (max-width: 500px) {296 .listing {297 grid-column-gap: 15px;298 grid-row-gap: 15px;299 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));300 /* font-size: 90%; */301 }302}303 304 305/* flex grid thirds _________________________________*/306 307.flex-grid-thirds {308 display: flex;309}310 311.col {312 flex: 1;313}314 315@media (max-width: 500px) {316 .flex-grid-thirds {317 display: block;318 }319}320 321/* Header setup_________________________________*/322header {323 background-color: var(--bg-color);324 padding: 5px 0px;325 text-align: center;326 width: 100%;327 margin: 0 auto;328 /* max-width: 585px; */329 /* border-bottom: 2px solid #000; */330}331 332header h1 {333 font-size: 50px;334 font-weight: 300;335 letter-spacing: 1px;336 margin: 0;337 color: #fff;338 /* font-family: "Times New Roman", Times, serif; */339}340 341header h1 a {342 color: #fff;343 text-decoration: none;344}345 346header h1 a:hover,347.back a:hover {348 color: #ccc;349 text-decoration: none;350}351 352header p {353 color: #fff;354}355 356/* footer setup_________________________________*/357footer {358 margin-top: 4em;359 padding: 1.3em;360 text-align: center;361 background-color: #333;362 font-size: 25px;363}364 365footer a {366 color: #fff;367}368 369.back {370 text-align: center;371 padding: 1em;372 margin: 6em 0em 0em 0em;373 width: 100%;374 background-color: var(--bg-color);375}376 377.back a {378 /* background-color: #222; */379 font-size: 1.3em;380 color: #fff;381 padding: 0.3em 1em;382 border-radius: 1em;383}384 385@media screen and (min-width: 650px) {386 .col-group {387 overflow: hidden;388 }389 390 .col-group>div {391 float: left;392 width: 50%;393 }394}395 396.show-on-mobile {397 display: none;398}399 400/* responsive media rules for mobile________________________________ */401@media screen and (max-width: 650px) {402 403 .col-group>div {404 padding-bottom: 20px;405 }406 407 header h1 {408 font-size: 38px;409 margin: 0px 10px;410 letter-spacing: 1px;411 }412 413 .definition {414 padding: 10px;415 font-size: 100%;416 }417 418 .on-edge {419 margin-left: -10px;420 margin-right: -10px;421 }422 423 .katex {424 font-size: 1.3em;425 }426 427 canvas {428 max-width: 100%;429 height: auto;430 }431 432 .hide-on-mobile {433 display: none;434 }435 436 .show-on-mobile {437 display: block;438 }439}440 441 442 header {443 text-align: center;444 border: none;445 }446 447 .title {448 font-size: 70px;449 font-weight: 100;450 }451 452 .underlined {453 margin-top: 4em;454 }455 </style>456 <header>457 <h1 class="title">458 Mr. [Name Redacted]459 </h1>460 </header>461 <article>462 <h2 class="underlined">463 Physics -464 <a>465 course notes466 </a>467 </h2>468 <p>469 Physics is a lab science with a math focus. We use physical relationships to predict and shape our surroundings.470 </p>471 <details>472 <summary>473 About Physics474 </summary>475 <p>476 <strong>477 Physics is science.478 </strong>479 Physicists build mathematical models that approximate how matter and energy change over time.480 </p>481 <p>482 <strong>483 Physics advances technology.484 </strong>485 Physics explains how electromagnetic waves encode information from a cell phone, how electricity in a computer chip is controlled by transistors, how a speaker produces sound with magnets, and how GPS calculates position.486 </p>487 <p>488 <strong>489 Physics guides engineering.490 </strong>491 A knowledge of physics allows engineers to predict how their projects will behave. Physics helps them design, tinker, and experiment.492 </p>493 <p>494 <strong>495 Physics speaks with math.496 </strong>497 Math is the language physics uses to understand and communicate the nature of our universe.498 </p>499 </details>500 <!-- <details>501 <summary>Course Materials</summary>502 <p>503 An organized notebook/binder and a scientific calculator is required. I'm flexible about most other details, but I recommend:504 </p>505 <p>506 <strong>graph paper:</strong> for graphing, charts, free body diagrams, circuit diagrams, ...507 <br> <strong>scientific calculator:</strong> <a >TI-30XIIS</a> is cheap and works well.508 <br> <strong>pen or pencil:</strong> I like <a href='https://www.amazon.com/dp/B00092RJX0/_encoding=UTF8?coliid=I17A6WSIFV5AG6&colid=26R4C03G1WG78'>these</a> colored pens.509 <br> <strong>highlighter</strong>510 </p>511 </details> -->512 <details>513 <summary>514 Student Files515 </summary>516 <p>517 physics518 <a>519 this week520 </a>521 <!-- <br> -->522 <!-- physics NWC+ <a >this week</a> -->523 </p>524 <p>525 physics526 <a>527 syllabus528 </a>529 </p>530 </details>531 <h2 class="underlined">532 Computer Science -533 <a>534 Syllabus535 </a>536 </h2>537 <p>538 This class focuses on learning computer science through projects. We build browser based projects using JavaScript.539 </p>540 <h2 class="underlined">541 Contact542 </h2>543 <p>544 If you were absent, check in after class to see what you missed. If you need to make up an assignment, or have any questions come by my room after school.545 </p>546 <p>547 r[Name Redacted]@newwestcharter.org548 </p>549 <h2 class="underlined">550 Projects551 </h2>552 <p>553 <a>554 Photos:555 </a>556 classroom science experiments557 <br>558 <a>559 Electronics:560 </a>561 soldering circuits and programming Arduinos562 <br>563 <a>564 Codepen:565 </a>566 small HTML / CSS / JavaScript projects567 <br>568 <br>569 <a>570 n-gon:571 </a>572 physics based JavaScript game573 <!-- <br> <a >planetesimals:</a> asteroids remake with annoying physics -->574 </p>575 <h1 class="underlined">576 About Me577 </h1>578 <p>579 I graduated from University of Georgia with a B.S. in physics and astronomy.580 </p>581 <p>582 I nerd out on: books, hiking, soccer, science, coding, Arduino, biking to work583 </p>584 <img alt="ross 2020" class="center" src="rick.jpg" style="border-radius: 8px;" width="125">585 </article>586 <br>587 <br>588 <br>589 <br>590 </body>591</html>592