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 html {6 background-color: #2e0f4d;7 color: #eeeeee;8 text-align: center;9 font-family: monospace;10 font-size: 16px;11 line-height: 150%;12}13 14body {15 margin: 0;16}17 18nav {19 background-color: #462d7d;20 display: flex;21 flex-wrap: wrap;22 justify-content: center;23 padding: 0.5em;24}25 26nav a {27 color: #fff;28 margin: 0em 1em;29}30 31h1 {32 font-size: 30px;33}34 35h2 {36 font-size: 24px;37 margin: 1em 0 .2em 0;38}39 40section {41 margin: 1em auto 3em auto;42 padding: 0 0.5em;43 max-width: 800px;44 text-align: left;45}46 47video {48 max-width: 100%;49}50 51p {52 margin: 1em 0;53}54 55a {56 color: #f9a1f1;57}58 59dt {60 font-weight: bold;61}62 63table {64 width: 100%;65}66 67table tr:nth-child(odd) {68 background-color: rgba(255, 255, 255, 0.1);69}70 71footer {72 margin: 3em auto 1em auto;73}74 </style>75 <meta charset="utf-8">76 <meta content="width=device-width, initial-scale=1" name="viewport">77 <meta content="telephone=no" name="format-detection">78 <title>79 ICFP Contest 202180 </title>81 </head>82 <body>83 <nav>84 <a>85 ICFPC202186 </a>87 <a>88 Portal89 </a>90 <a>91 Scoreboard92 </a>93 <a>94 Rules95 </a>96 <a>97 Specification98 </a>99 <a>100 FAQ101 </a>102 <a>103 Prizes104 </a>105 <a>106 Writeups107 </a>108 <a>109 About110 </a>111 </nav>112 <h1>113 ICFP Contest 2021114 </h1>115 <p>116 ICFP Contest 2021 took place 12:00 PM Friday 9 July - 12:00 PM Monday 12 July UTC.117 </p>118 <img alt="ICFP Contest 2021" src="rick.jpg" style="width: 80%; max-width: 200px">119 <br>120 <section>121 <h2 id="018-contest-presentation-video">122 Contest Presentation Video123 </h2>124 <strong>125 Tue, 31 August 12:00 UTC126 </strong>127 <p>128 You can now watch the contest presentation video right here or129 <a>130 on YouTube131 </a>132 .133 </p>134 </section>135 <section>136 <h2 id="017-final-results">137 Final Results, Winners Announced138 </h2>139 <strong>140 Wed, 25 August 13:30 UTC141 </strong>142 <p>143 We have announced the winners at the144 <a>145 ICFP 2021 Conference146 </a>147 .148 </p>149 <dl>150 <dt>151 First prize: RGBTeam152 </dt>153 <dd>154 <i>155 C++ and Rust156 </i>157 are the programming tools of choice for discriminating hackers.158 </dd>159 <dt>160 Second prize: Unagi161 </dt>162 <dd>163 <i>164 Rust165 </i>166 is a fine programming tool for many applications.167 </dd>168 <dt>169 Third prize: Special Weekend170 </dt>171 <dd>172 <i>173 Rust, TypeScript and Go174 </i>175 are also not too shabby.176 </dd>177 <dt>178 Winner of the lightning division: Special Weekend179 </dt>180 <dd>181 <i>182 Rust, TypeScript and Go183 </i>184 are very suitable for rapid prototyping.185 </dd>186 <dt>187 Judges' prize: manarimo188 </dt>189 <dd>190 <i>191 manarimo192 </i>193 are an extremely cool bunch of hackers.194 </dd>195 </dl>196 <p>197 The scoreboards for the198 <a>199 full division200 </a>201 and202 <a>203 lightning division204 </a>205 have been updated206 as well with the complete rankings.207 </p>208 <p>209 We will provide a link to the video recording of the programming contest210 report as soon we have it. Congratulations to the winners, and thanks211 again to everyone who took part!212 </p>213 </section>214 <section>215 <h2 id="016-code-open-sourced">216 Contest Code Open Sourced217 </h2>218 <strong>219 Fri, 30 July 17:45 UTC220 </strong>221 <p>222 We're excited to announce that we have open sourced the code that we used to223 put together the contest under the BSD3 license.224 </p>225 <p>226 You can find the code alongside the source for this website227 <a>228 in229 this repository230 </a>231 .232 </p>233 </section>234 <section>235 <h2 id="015-winners-notified">236 Contest winners notified237 </h2>238 <strong>239 Wed, 28 July 17:54 UTC240 </strong>241 <p>242 We've sent e-mails notifying the winners. The final scoreboard will be243 reavealed and the winners will be announced at the ICFP conference on August 23-25, 2021.244 </p>245 </section>246 <section>247 <h2 id="014-post-contest-update">248 Partial scoreboard, poses.live future and Team Writeups249 </h2>250 <strong>251 Tue, 13 July 21:00 UTC252 </strong>253 <p>254 The255 <a>256 final scoreboard for the lightning and the full257 division is now available258 </a>259 . Teams with 0 points are not shown, and the top260 15 teams in both rounds have been randomly shuffled, and their score hidden to261 keep some intrigue. We will get in touch with the winners soon.262 </p>263 <p>264 Some teams have already posted interesting writeups on how they approached265 the problem. We started collecting these266 <a>267 here268 </a>269 .270 </p>271 <p>272 Several people have asked what will happen to the273 <a>274 poses.live275 </a>276 website now that the contest277 is over. Since there is some interest in keeping it around, the organisers278 will move this to a smaller instance on a personal server. All data from279 the contest will be wiped, and teams will have to re-register on this new280 instance if they want to continue trying it out. There will be significant281 downtime this week as we move it.282 </p>283 <p>284 We will also release source code of the portal and judge after the contest285 presentation at ICFP 2021. Thanks again to everyone for taking part in this!286 </p>287 <div style="text-align: center">288 <img src="rick.jpg" style="max-width: 300px; margin: 0 auto">289 </div>290 </section>291 <section>292 <h2 id="013-contest-end">293 It's over!294 </h2>295 <strong>296 Mon, 12 July 12:00 UTC297 </strong>298 <p>299 The ICFP Contest is over for this year!300 </p>301 <p>302 We would like to thank all teams for particating, and we hope people had a303 lot of fun implementing UIs and solvers for the problem, regardless of how304 well they did on the scoreboard.305 </p>306 <p>307 The308 <a>309 poses.live310 </a>311 server will remain up for a312 bit more. If you want to qualify for prizes,313 <strong>314 don't forget to upload315 your source code on your team profile page316 </strong>317 within the next 12 hours.318 </p>319 <p>320 The winners of the contest will be announced at the321 <a>322 2021 International Conference on323 Functional Programming324 </a>325 , taking place Sun 22 - Fri 27 August.326 </p>327 </section>328 <section>329 <h2 id="012-spec">330 Minor clarification in specification331 </h2>332 <strong>333 Sun, 11 July 19:45 UTC334 </strong>335 <p>336 We added a clarification to the WALLHACK bonus in the337 <a>338 the specification339 </a>340 .341 </p>342 </section>343 <section>344 <h2 id="011-spec">345 Final bonus added, new problems added346 </h2>347 <strong>348 Sun, 11 July 12:00 UTC349 </strong>350 <p>351 We have now extended352 <a>353 the specification354 </a>355 with356a last bonus. We have also added new problems, and added bonuses to existing problems.357This is the last modification to the specification that will be made, barring unforeseen errors.358 </p>359 <p>360 We will freeze the scoreboard on Mon, 12 July at 11:00 UTC.361 </p>362 <p>363 Participants must submit their source code to be elligible for prizes. This can be done via the team profile page in the portal.364 </p>365 </section>366 <section>367 <h2 id="010-spec">368 Added WALLHACK bonus to spec, more problems added369 </h2>370 <strong>371 Sun, 11 July 00:00 UTC372 </strong>373 <p>374 We added a new type of bonus to375 <a>376 the specification377 </a>378 . We've also added new problems379 and added new bonuses to the existing problems.380 </p>381 </section>382 <section>383 <h2 id="009-spec">384 Correction in GLOBALIST specification385 </h2>386 <strong>387 Sat, 10 July 14:13 UTC388 </strong>389 <p>390 We fixed a naming inconsistency in the definition of the GLOBALIST bonus in391 <a>392 the specification393 </a>394 .395 </p>396 </section>397 <section>398 <h2 id="008-spec">399 Bonuses added to spec, new problems added400 </h2>401 <strong>402 Sat, 10 July 12:00 UTC403 </strong>404 <p>405 The Lightning Division (first 24 hours of the contest) has now ended. We406 hope everyone had fun so far!407 </p>408 <p>409 We have now extended410 <a>411 the specification412 </a>413 with414 <em>415 bonuses416 </em>417 , which allow you gain certain advantages in other problems.418 </p>419 <p>420 We have also added 10 new problems to421 <a>422 poses.live423 </a>424 .425 </p>426 <p>427 The scoreboard will remain frozen for another half hour, until 12:30 UTC.428 </p>429 </section>430 <section>431 <h2 id="007-spec">432 New problems added, HTTP API addition433 </h2>434 <strong>435 Sat, 10 July 00:00 UTC436 </strong>437 <p>438 We have added 19 new problems to439 <a>440 poses.live441 </a>442 .443 </p>444 <p>445 We would like to remind everyone that the Lightning Division ends in twelve446 hours on Sat, 10 July 12:00 (noon) UTC.447 </p>448 <p>449 To keep things exciting, we will freeze the scoreboard temporarily on450 Sat, 10 July from 11:30 to 12:30 UTC. We've also limited the scoreboard to451 teams with at least one valid solution.452 </p>453 <p>454 Additionally, we have updated455 <a>456 the457 specification458 </a>459 with a new API endpoint to obtain some information about460 submitted poses.461 </p>462 </section>463 <section>464 <h2 id="006-spec">465 ICFPC2021 has started466 </h2>467 <strong>468 Fri, 09 July 12:00 UTC469 </strong>470 <p>471 Welcome to ICFPC2021!472 </p>473 <p>474 We have published a first version of475 <a>476 the specification477 </a>478 .479 </p>480 <p>481 Teams can register, submit solutions and view the current scoreboard at482 our web portal located at483 <a>484 poses.live485 </a>486 .487 </p>488 <p>489 Good luck, and have fun!490 </p>491 </section>492 <section>493 <h2 id="005-psa">494 PSA495 </h2>496 <strong>497 Fri, 09 July 08:49 UTC498 </strong>499 <p>500 ta.jvfblvbi501 <br>502 Te6XDacTWXn503 </p>504 </section>505 <section>506 <h2 id="004-psa">507 PSA508 </h2>509 <strong>510 Thu, 08 July 16:30 UTC511 </strong>512 <p>513 vbtib.lafvj514 <br>515 KE7ZFnZQ59D516 </p>517 </section>518 <section>519 <h2 id="003-clothing">520 PSA521 </h2>522 <strong>523 Wed, 07 July 15:36 UTC524 </strong>525 <p>526 We strongly recommend participants this year to wear waterproof clothing and527 leave their phone in a locker.528 </p>529 </section>530 <section>531 <h2 id="002-atom-feed">532 Atom Feed533 </h2>534 <strong>535 Mon, 05 July 09:52 UTC536 </strong>537 <p>538 An atom feed is539 <a>540 now available for contest updates541 </a>542 .543 </p>544 </section>545 <section>546 <h2 id="001-discord-server">547 Discord Server548 </h2>549 <strong>550 Sun, 04 July 20:00 UTC551 </strong>552 <p>553 We have set up a Discord server for participants to communicate and554 socialise during the contest.555 <a>556 You can join the server here557 </a>558 .559 Please note that we use the560 <a>561 Berlin Code of Conduct562 </a>563 .564 This website remains the single source of truth for the contest and all565 announcements will be posted here.566 </p>567 </section>568 <footer>569 Copyright © ICFPC2021 Organisers |570 <a>571 Code of Conduct572 </a>573 |574 <a>575 @icfpcontest2021576 </a>577 |578 55d97f9579 </footer>580 </body>581</html>582