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">3 <head>4 <style>5 body {6 width: 100%;7 display: flex;8 justify-content: center;9 margin: 32px 0;10}11 12main {13 position: relative;14}15 16.header-image {17 transform: scaleX(-1);18 width: 100%;19}20 21.event-image {22 max-width: 488px; 23}24 25.header {26 display: grid;27 grid-template-columns: auto 1fr;28}29 30#hanging-noguchi {31 margin-top: -15px;32 margin-left: -15px;33}34 35#akari-noguchi {36 float:right;37 margin-top: -40px;38}39 40.lamp {41 width: 80px;42 background-color: transparent;43 cursor: pointer;44}45 46.lamp:hover {47 animation: jiggle 0.5s ease-in-out;48}49 50.lamp.clicked {51 filter: brightness(1.2) saturate(1.6)52 drop-shadow(0px 0px 50px rgba(247, 220, 156, 0.85));53}54 55@keyframes jiggle {56 0% {57 transform: rotate(0deg);58 }59 25% {60 transform: rotate(7deg);61 }62 50% {63 transform: rotate(0deg);64 }65 66% {66 transform: rotate(-5deg);67 }68 100% {69 transform: rotate(0deg);70 }71}72 73main {74 width: 100%;75 max-width: 488px;76}77 78h2 {79 display: flex;80 margin-block-start: 1.75em;81}82 83h2:after {84 content: '';85 flex: 1;86 margin: auto .5em;87 height: 0;88 border-top: dotted #ccc 1px;89}90 91table {92 width: 100%;93}94section {95 position: relative;96}97 98td:last-child {99 text-align: right;100}101.cat{102 position: absolute;103 top: -10px;104 right: 0px;105 width: 48px;106}107 108/* Moving marquee that freeze on hover */109.marquee-y {110 position: fixed;111 width: 100%;112 height: 100%;113 pointer-events: none;114 z-index: 100;115}116 117.marquee-inner {118 background-color: rgb(250, 177, 104);119 width: fit-content;120 font-size: 1.15rem;121 text-align: center;122 padding: 8px 12px;123 pointer-events: auto;124}125 126/* Produces images on hover for each event heading */127.image-container {128 position: relative;129 text-align: center;130}131 132.event-heading, &:visited {133 color: inherit;134 text-decoration: underline;135 text-decoration-style: wavy;136 text-decoration-color: rgb(250, 177, 104);137 text-decoration-line: underline;138 text-decoration-thickness: .05em;139 text-underline-offset: .25em;140 cursor: cell;141}142 143.event-heading:hover {144 color: blue;145 text-decoration-color: blue;146 transition: 160ms linear all;147}148 149.event-image {150 position: absolute;151 display: none;152 left: 10em;153 bottom: 1em;154 width: auto;155 height: auto;156 border-radius: 100%;157}158 159/* No horizontal overflow on mobile */160@media (max-width: 600px) {161 main {162 padding: 0 16px;163 }164 165 .event-image {166 bottom: 4rem;167 left: 0;168 right: 0;169 margin: auto;170 width: 100%;171 }172}173 174 175 176@charset "UTF-8";.__playhtml-can-move{cursor:grab;transition:transform .15s;will-change:transform}.__playhtml-can-move.cursordown{cursor:grabbing}.__playhtml-can-spin{cursor:grab;transition:transform .25s;will-change:transform}.__playhtml-can-spin.cursordown{cursor:grabbing}.__playhtml-can-grow{cursor:pointer;transition:transform .25s;will-change:transform}.__playhtml-can-toggle,.__playhtml-can-draw{cursor:pointer}.__playhtml-can-draw .__playhtml-draw-container{position:relative;width:100%;height:100%;cursor:none}.__playhtml-can-draw .__playhtml-draw-container canvas{position:absolute;top:0;left:0;cursor:url("data:image/svg+xml;utf8,") 16 0,auto}body .__playhtml-element.editing:nth-child(2n){animation-name:jiggle1;animation-iteration-count:infinite;transform-origin:50% 10%;animation-duration:.25s;animation-delay:var(--jiggle-delay)}body .__playhtml-element.editing:nth-child(2n-1){animation-name:jiggle2;animation-iteration-count:infinite;animation-direction:alternate;transform-origin:30% 5%;animation-duration:.45s;animation-delay:var(--jiggle-delay)}@keyframes jiggle1{0%{transform:rotate(-1deg);animation-timing-function:ease-in}50%{transform:rotate(1.5deg);animation-timing-function:ease-out}}@keyframes jiggle2{0%{transform:rotate(1deg);animation-timing-function:ease-in}50%{transform:rotate(-1.5deg);animation-timing-function:ease-out}}177 178 179 180#cursor-chat-layer{position:absolute;width:100%;height:100%;z-index:10;overflow:hidden;pointer-events:none;top:0px;left:0px}#cursor-chat-layer .cursor>svg{position:absolute;top:-17.5px;left:-17.5px;width:35px;height:35px}#cursor-chat-layer .cursor{transition:opacity 1s ease}#cursor-chat-layer .stale,#cursor-chat-layer .new{visibility:hidden}#cursor-chat-layer .expiring{opacity:0}#cursor-chat-layer .cursor>p,#cursor-chat-layer #cursor-chat-box{display:inline-block;margin-top:1rem;margin-left:.5rem;padding:.6rem 1rem;position:absolute;border-radius:0 20px 20px;border:2px solid #00000011;box-shadow:7px 15px 36px 4px #0000001a;max-width:250px;font-family:sans-serif;overflow-wrap:anywhere;font-size:1rem;min-height:calc(1rem + 4px)}#cursor-chat-layer #cursor-chat-box{display:none}#cursor-chat-layer .chat{transition:opacity .5s ease,visibility .5s ease;opacity:0;visibility:hidden}#cursor-chat-layer .chat.show{visibility:visible;opacity:1}181 </style>182 <meta charset="utf-8">183 <meta content="IE=edge" http-equiv="X-UA-Compatible">184 <meta content="width=device-width, initial-scale=1.0" name="viewport">185 <title>186 Demos & Chill187 </title>188 </head>189 <body>190 <marquee behavior="alternate" class="marquee-y" direction="down" onmouseout="this.start();" onmouseover="this.stop();">191 <marquee behavior="alternate" class="marquee-x" onmouseout="this.start();" onmouseover="this.stop();">192 <div class="marquee-inner">193 Demos & Chill 9 coming soon!194 </div>195 </marquee>196 </marquee>197 <main>198 <div class="header">199 <img alt="a transparent cutout of a hanging Noguchi lamp." can-toggle class="lamp" id="hanging-noguchi" src="rick.jpg">200 <img alt="stick figures demo'ing" class="header-image" src="rick.jpg">201 </div>202 <h1>203 Demos & Chill204 </h1>205 <img alt="a transparent cutout of the Noguchi Akari lamp." can-toggle class="lamp" id="akari-noguchi" src="rick.jpg">206 <p>207 Is a small event series put on by a group of friends,208 once-a-month-or-two-ish, where people come show off cool stuff they've209 made.210 </p>211 <section>212 <img alt="cute cat!" class="cat" src="rick.jpg">213 <a class="event-heading" data-heading="Demos from event 8">214 <h2>215 Demos from event 8216 </h2>217 <div class="image-container">218 <img alt="Images from event 8" class="event-image" src="rick.jpg">219 </div>220 </a>221 <table>222 <tbody>223 <tr>224 <td>225 Smart watch for chess ranking226 </td>227 <td>228 [Name Redacted]229 </td>230 </tr>231 <tr>232 <td>233 Miegakura related stuff234 </td>235 <td>236 [Name Redacted]237 </td>238 </tr>239 <tr>240 <td>241 AI Drawn Card deck242 </td>243 <td>244 [Name Redacted]245 </td>246 </tr>247 <tr>248 <td>249 How to make film with AI250 </td>251 <td>252 [Name Redacted]253 </td>254 </tr>255 </tbody>256 </table>257 </section>258 <section>259 <img alt="cute cat!" class="cat" src="rick.jpg">260 <a class="event-heading" data-heading="Demos from event 7">261 <h2>262 Demos from event 7263 </h2>264 <div class="image-container">265 <img alt="Images from event 7" class="event-image" src="rick.jpg">266 </div>267 </a>268 <table>269 <tbody>270 <tr>271 <td>272 Circuit Sculpture273 </td>274 <td>275 [Name Redacted]276 </td>277 </tr>278 <tr>279 <td>280 3D Medley281 </td>282 <td>283 [Name Redacted]284 </td>285 </tr>286 <tr>287 <td>288 Dreams of Vision OS289 </td>290 <td>291 [Name Redacted]292 </td>293 </tr>294 <tr>295 <td>296 Dissecting magic eyes297 </td>298 <td>299 [Name Redacted]300 </td>301 </tr>302 </tbody>303 </table>304 </section>305 <section>306 <img alt="cute cat!" class="cat" src="rick.jpg">307 <a class="event-heading" data-heading="Demos from event 6">308 <h2>309 Demos from event 6310 </h2>311 <div class="image-container">312 <img alt="Images from event 6" class="event-image" src="rick.jpg">313 </div>314 </a>315 <table>316 <tbody>317 <tr>318 <td>319 Slices of a book320 </td>321 <td>322 Andy Matuschak & Derrek Chow323 </td>324 </tr>325 <tr>326 <td>327 Retro horror game328 </td>329 <td>330 [Name Redacted]331 </td>332 </tr>333 <tr>334 <td>335 Stochastic parrot336 </td>337 <td>338 [Name Redacted]339 </td>340 </tr>341 <tr>342 <td>343 AI Super Smash Coach344 </td>345 <td>346 [Name Redacted]347 </td>348 </tr>349 </tbody>350 </table>351 </section>352 <section>353 <img alt="cute cat!" class="cat" src="rick.jpg">354 <a class="event-heading" data-heading="Demos from event 5">355 <h2>356 Demos from event 5357 </h2>358 <div class="image-container">359 <img alt="Images from event 5" class="event-image" src="rick.jpg">360 </div>361 </a>362 <table>363 <tbody>364 <tr>365 <td>366 Prayer App367 </td>368 <td>369 [Name Redacted]370 </td>371 </tr>372 <tr>373 <td>374 The making of Orion375 </td>376 <td>377 [Name Redacted]378 </td>379 </tr>380 <tr>381 <td>382 Super wide interfaces 2383 </td>384 <td>385 [Name Redacted]386 </td>387 </tr>388 <tr>389 <td>390 New interfaces for dynamic images over text391 </td>392 <td>393 [Name Redacted]394 </td>395 </tr>396 </tbody>397 </table>398 </section>399 <section>400 <img alt="cute cat!" class="cat" src="rick.jpg">401 <a class="event-heading" data-heading="Demos from event 4">402 <h2>403 Demos from event 4404 </h2>405 <div class="image-container">406 <img alt="Images from event 4" class="event-image" src="rick.jpg">407 </div>408 </a>409 <table>410 <tbody>411 <tr>412 <td>413 Figma computer414 </td>415 <td>416 [Name Redacted]417 </td>418 </tr>419 <tr>420 <td>421 playhtml422 </td>423 <td>424 [Name Redacted]425 </td>426 </tr>427 <tr>428 <td>429 Buffo - a documentary430 </td>431 <td>432 [Name Redacted]433 </td>434 </tr>435 <tr>436 <td>437 Tamagotchi spongey438 </td>439 <td>440 [Name Redacted]441 </td>442 </tr>443 </tbody>444 </table>445 </section>446 <section>447 <img alt="cute cat!" class="cat" src="rick.jpg">448 <a class="event-heading" data-heading="Demos from event 3">449 <h2>450 Demos from event 3451 </h2>452 <div class="image-container">453 <img alt="Images from event 3" class="event-image" src="rick.jpg">454 </div>455 </a>456 <table>457 <tbody>458 <tr>459 <td>460 Light and shadow interfaces461 </td>462 <td>463 [Name Redacted]464 </td>465 </tr>466 <tr>467 <td>468 Reverse engineering chatgpt469 </td>470 <td>471 [Name Redacted]472 </td>473 </tr>474 <tr>475 <td>476 Silly pet game477 </td>478 <td>479 [Name Redacted]480 </td>481 </tr>482 <tr>483 <td>484 AI quilt485 </td>486 <td>487 [Name Redacted]488 </td>489 </tr>490 </tbody>491 </table>492 </section>493 <section>494 <img alt="cute cat!" class="cat" src="rick.jpg">495 <a class="event-heading" data-heading="Demos from event 2">496 <h2>497 Demos from event 2498 </h2>499 <div class="image-container">500 <img alt="Images from event 2" class="event-image" src="rick.jpg">501 </div>502 </a>503 <table>504 <tbody>505 <tr>506 <td>507 Playbit508 </td>509 <td>510 [Name Redacted]511 </td>512 </tr>513 <tr>514 <td>515 A Personal Journaling App516 </td>517 <td>518 [Name Redacted]519 </td>520 </tr>521 <tr>522 <td>523 Reprocessing524 </td>525 <td>526 [Name Redacted]527 </td>528 </tr>529 <tr>530 <td>531 Shaders & CSS532 </td>533 <td>534 [Name Redacted]535 </td>536 </tr>537 </tbody>538 </table>539 </section>540 <section>541 <img alt="cute cat!" class="cat" src="rick.jpg">542 <a class="event-heading" data-heading="Demos from event 1">543 <h2>544 Demos from event 1545 </h2>546 <div class="image-container">547 <img alt="Images from event 1" class="event-image" src="rick.jpg">548 </div>549 </a>550 <table>551 <tbody>552 <tr>553 <td>554 Documentary555 </td>556 <td>557 [Name Redacted]558 </td>559 </tr>560 <tr>561 <td>562 Poetry Camera563 </td>564 <td>565 [Name Redacted]566 </td>567 </tr>568 <tr>569 <td>570 A Farsi Typeface571 </td>572 <td>573 [Name Redacted]574 </td>575 </tr>576 <tr>577 <td>578 Super Wide Interfaces579 </td>580 <td>581 [Name Redacted]582 </td>583 </tr>584 </tbody>585 </table>586 </section>587 <footer>588 <p>589 ---590 </p>591 <p>592 Does this design offend your eyes?593 <a>594 Edit me!595 </a>596 </p>597 <p>598 Would you like to sponsor the event?599 <a>600 DM me!601 </a>602 </p>603 </footer>604 </main>605 <div id="cursor-chat-layer">606 <input id="cursor-chat-box" type="text">607 </div>608 <!-- install playhtml -->609 <!-- install cursor chat -->610 </body>611</html>612