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 /* cyrillic-ext */6@font-face {7 font-family: 'Roboto';8 font-style: normal;9 font-weight: 700;10 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');11 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;12}13/* cyrillic */14@font-face {15 font-family: 'Roboto';16 font-style: normal;17 font-weight: 700;18 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');19 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;20}21/* greek-ext */22@font-face {23 font-family: 'Roboto';24 font-style: normal;25 font-weight: 700;26 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');27 unicode-range: U+1F00-1FFF;28}29/* greek */30@font-face {31 font-family: 'Roboto';32 font-style: normal;33 font-weight: 700;34 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');35 unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;36}37/* vietnamese */38@font-face {39 font-family: 'Roboto';40 font-style: normal;41 font-weight: 700;42 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');43 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;44}45/* latin-ext */46@font-face {47 font-family: 'Roboto';48 font-style: normal;49 font-weight: 700;50 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');51 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;52}53/* latin */54@font-face {55 font-family: 'Roboto';56 font-style: normal;57 font-weight: 700;58 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');59 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;60}61/* cyrillic-ext */62@font-face {63 font-family: 'Roboto';64 font-style: normal;65 font-weight: 900;66 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2) format('woff2');67 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;68}69/* cyrillic */70@font-face {71 font-family: 'Roboto';72 font-style: normal;73 font-weight: 900;74 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfABc4EsA.woff2) format('woff2');75 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;76}77/* greek-ext */78@font-face {79 font-family: 'Roboto';80 font-style: normal;81 font-weight: 900;82 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCBc4EsA.woff2) format('woff2');83 unicode-range: U+1F00-1FFF;84}85/* greek */86@font-face {87 font-family: 'Roboto';88 font-style: normal;89 font-weight: 900;90 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfBxc4EsA.woff2) format('woff2');91 unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;92}93/* vietnamese */94@font-face {95 font-family: 'Roboto';96 font-style: normal;97 font-weight: 900;98 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCxc4EsA.woff2) format('woff2');99 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;100}101/* latin-ext */102@font-face {103 font-family: 'Roboto';104 font-style: normal;105 font-weight: 900;106 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfChc4EsA.woff2) format('woff2');107 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;108}109/* latin */110@font-face {111 font-family: 'Roboto';112 font-style: normal;113 font-weight: 900;114 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2');115 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;116}117 118 119 120html{background:#eee}body{margin:0 auto 1em auto;padding:0 0 1em;font:1em/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;background:white;max-width:70em;border:2px solid #ddd;border-width:0 2px 2px 2px}h2,h3{font-family:Roboto, sans-serif;font-weight:700;line-height:1}h1{margin:0;padding:0.5em;text-align:center;font:900 45px/200px Roboto, sans-serif;background:#C6C5C0 url("/images/solution-tree.jpg") no-repeat center center;background-size:100%;text-shadow:2px 2px #ddd;height:200px}h1 a{text-decoration:none;color:inherit}.padded{padding:0 2em}.__slackin,.map{float:right}.__slackin{margin:0 0 1em 1em}.map{margin:1em}.box{border:2px solid #eed;overflow:auto;zoom:1;background:#ffe;padding:0 1em}121 </style>122 <meta charset="utf-8">123 <title>124 London Computation Club125 </title>126 </head>127 <body>128 <h1>129 <a>130 London Computation Club131 </a>132 </h1>133 <div class="padded">134 <section id="about">135 <p>136 The137 <b>138 London Computation Club139 </b>140 is a meet-up for people interested in one or more of the following:141 </p>142 <ul>143 <li>144 Reading145 <a>146 books147 </a>148 (perhaps one we wouldn’t ordinarily read on our own)149 </li>150 <li>151 Learning about computation, programming and programs in general152 </li>153 <li>154 Writing code (perhaps of a different sort than we’d do for “work”)155 </li>156 <li>157 Hanging out with other inquisitive people158 </li>159 </ul>160 <p>161 We organise the club via162 <a>163 Slack164 </a>165 so please join us there. Everyone is welcome to suggest a meeting topic, be it to166 <a>167 learn about algorithms by playing with trains168 </a>169 ,170 <a>171 showcase a side-project for solving complex problems172 </a>173 or174 <a>175 create an unbeatable noughts and crosses playing computer program together176 </a>177 .178 </p>179 <p>180 You can also follow us on181 <a>182 Twitter183 </a>184 , see code that we’ve produced on185 <a>186 GitHub187 </a>188 and write-ups of past meetings on189 <a>190 our wiki191 </a>192 .193 </p>194 </section>195 <section class="box" id="future-meetings">196 <h2>197 Future meetings198 </h2>199 <ul>200 <li>201 <a>202 Opt Art: Chapter 5203 </a>204 ,205 <time datetime="2023-08-30">206 6:30 PM-8:30 PM Wednesday 30th August 2023207 </time>208 <ul>209 <li>210 <a>211 Write-up212 </a>213 </li>214 </ul>215 </li>216 </ul>217 <p>218 Subscribe to219 <a>220 future meetings in iCal format221 </a>222 .223 </p>224 </section>225 <section id="code-of-conduct">226 <h2>227 Code of Conduct228 </h2>229 <p>230 It’s of primary importance that everyone who wants to participate feels safe and welcome. When participating in the London Computation Club, either online or offline, at the meeting itself or at the pub afterwards, we expect you to respect our231 <a>232 code of conduct233 </a>234 .235 </p>236 </section>237 <section id="books">238 <h2>239 Literature we’re reading240 </h2>241 <ul>242 <li>243 “244 <a>245 Opt Art246 </a>247 ”,248 249 Robert Bosch250 </li>251 </ul>252 <h2>253 Literature we’ve read254 </h2>255 <ul>256 <li>257 “258 <a>259 10 Technical Papers Every Programmer Should Read (At Least Twice)260 </a>261 ”,262 263 Michael Fogus264 </li>265 <li>266 “267 <a>268 Elements of Computing Systems (Building a Modern Computer from First Principles)269 </a>270 ”,271 272 Noam Nisan273 and274 275 276 Shimon Schocken277 278 (279 <a>280 buy on Blackwell's281 </a>282 )283 </li>284 <li>285 “286 <a>287 Physically Based Rendering: From Theory To Implementation288 </a>289 ”,290 291 Matt Pharr,292 293 294 Wenzel Jakob295 and296 297 298 Greg Humphreys299 300 (301 <a>302 buy on Blackwell's303 </a>304 )305 </li>306 <li>307 “308 <a>309 Reinforcement Learning: An Introduction310 </a>311 ”,312 313 Andrew Barto314 and315 316 317 Richard S. Sutton318 </li>319 </ul>320 <p>321 If you buy any books using the Blackwell's links, London Computation Club gets a little kickback via the Blackwell's affiliate programme. We use that kickback to buy copies of the books for our library, to assist members or potential members who otherwise wouldn’t be able to afford the book.322 </p>323 <p>324 </p>325 </section>326 <section id="contact">327 <h2>328 Contact us329 </h2>330 <ul>331 <li>332 <a>333 Slack334 </a>335 </li>336 <li>337 <a>338 Twitter339 </a>340 </li>341 <li>342 <a>343 GitHub344 </a>345 </li>346 <li>347 <a>348 Mailing list349 </a>350 (mostly unused now)351 </li>352 </ul>353 </section>354 <section id="acknowledgements">355 <h2>356 Acknowledgements357 </h2>358 <p>359 Thanks to the following companies for providing office space and copies of books for the club to read.360 </p>361 <ul>362 <li>363 <a>364 Altmetric365 </a>366 </li>367 <li>368 <a>369 FutureLearn370 </a>371 </li>372 <li>373 <a>374 Geckoboard375 </a>376 </li>377 <li>378 <a>379 Go Free Range380 </a>381 </li>382 </ul>383 </section>384 <section id="past-meetings">385 <h2>386 Past meetings387 </h2>388 <ul>389 <li>390 <a>391 Opt Art: Chapter 4392 </a>393 ,394 <time datetime="2023-07-10">395 6:30 PM-8:30 PM Monday 10th July 2023396 </time>397 <ul>398 <li>399 <a>400 Write-up401 </a>402 </li>403 </ul>404 </li>405 <li>406 <a>407 Opt Art: Chapter 3408 </a>409 ,410 <time datetime="2023-06-20">411 6:30 PM-8:30 PM Tuesday 20th June 2023412 </time>413 <ul>414 <li>415 <a>416 Write-up417 </a>418 </li>419 </ul>420 </li>421 <li>422 <a>423 Opt Art: Chapters 1 and 2424 </a>425 ,426 <time datetime="2023-06-05">427 6:30 PM-8:30 PM Monday 5th June 2023428 </time>429 <ul>430 <li>431 <a>432 Write-up433 </a>434 </li>435 </ul>436 </li>437 <li>438 <a>439 What Next?440 </a>441 ,442 <time datetime="2023-05-09">443 6:30 PM-8:30 PM Tuesday 9th May 2023444 </time>445 <ul>446 <li>447 <a>448 Write-up449 </a>450 </li>451 </ul>452 </li>453 </ul>454 </section>455 </div>456 </body>457</html>458