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" prefix="og: http://ogp.me/ns#">3 <head>4 <style>5 @font-face{font-family:FontAwesomeWeb;src:url(fonts/fontawesome-webfont.eot?v=4.7.0);src:url(fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'),url(fonts/fontawesome-webfont.woff2?v=4.7.0) format('woff2'),url(fonts/fontawesome-webfont.woff?v=4.7.0) format('woff'),url(fonts/fontawesome-webfont.ttf?v=4.7.0) format('truetype'),url(fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format('svg');font-weight:400;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesomeWeb,FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{color:#333;background:#fff;font-size:15px;font-family:Arial,sans-serif;padding:0;margin:0;display:flex;min-height:100vh;flex-direction:column}p{font-size:15px;margin:20px 0}ul li{margin-bottom:4px}.column ul{padding-left:0}.center{text-align:center}.clear:after,.column-row:after{content:"";display:table;clear:both}a{color:#039;text-decoration:none}a:hover{text-decoration:underline}.button,a.button{color:#fff;background:#39c;font-size:15px;font-family:Meiryo,Osaka,Arial,sans-serif;text-decoration:none;border:none;font-weight:700;display:inline-block;padding:6px 12px;margin:3px;cursor:pointer;outline:0}.button:hover,a.button:hover{background:#28b}header{color:#fff;background:url(images/main-alpha.png) no-repeat 15px 50% #39c;padding:20px 20px 20px 130px;position:relative;overflow:hidden}#home-link:before{content:"";position:absolute;height:100px;width:100px;left:14px;top:50%;margin-top:-50px}header h1{font-size:32px}header h1 a{color:#fff}h2{margin:30px 0 0 0}a#fork-me{color:#fff;background:#333;font-size:16px;font-weight:700;text-align:center;text-transform:uppercase;text-decoration:none;line-height:30px;height:30px;width:200px;transform:rotate(45deg);position:absolute;right:-55px;top:30px;transition-property:color,background;transition-duration:.3s}a#fork-me:hover{color:#333;background:#fff}#main-paragraph{max-width:1000px;margin:20px auto}#content{flex:1 0 auto}.content-block{max-width:1200px;margin:0 auto;padding:30px}a.anchor{color:#666;font-family:FontAwesomeWeb,FontAwesome;font-size:16px;font-weight:400;text-decoration:none;text-align:center;vertical-align:middle;display:inline-block;width:25px;margin:0 0 0 -25px}.anchor-icon{display:inline-block;transform:rotate(-45deg);visibility:hidden}h1:hover .anchor-icon,h2:hover .anchor-icon,h3:hover .anchor-icon,h4:hover .anchor-icon,h5:hover .anchor-icon,h6:hover .anchor-icon{visibility:visible}.title{color:#333;font-size:28px;margin:20px 0}.title-desc{font-size:16px}.title-med{font-size:18px;margin:10px 0}.section-title{color:#39c;font-size:24px;border-bottom:2px solid #39c;margin:0;padding-bottom:6px}.sub-title{font-size:18px;margin:16px 0}#main-logo{height:150px;width:150px}.column{float:left;width:32.5%;margin-right:1%}.column:last-child{margin-right:0;width:33%}.column li{list-style-type:none;position:relative;margin-bottom:6px;padding-left:13px}.column li:before{content:"• ";font-size:16px;position:absolute;left:3px}.columns-2>div{width:50%;margin:0 0 25px 0;float:left}footer{color:#fff;background:#333;padding:15px}footer a{color:#ccc}footer a:hover{color:#fff}footer ul{list-style-type:none;margin:0;padding:0}footer li{float:left}footer li:before{content:"•";display:inline-block;margin:0 5px;vertical-align:middle}footer li:first-child:before{display:none}.footer-left{float:left}.footer-right{float:right}@media (max-width:1200px){.content-block{padding:30px 0}h2,h3,h4,h5,h6,p,ul{padding:0 6px}a.anchor{margin:0 0 0 -5px}.center a.anchor{margin:0 0 0 -25px}}@media (max-width:820px){header{padding:100px 0 0 0;text-align:center;background-position:50% 10px}header h1{font-size:24px}#home-link:before{content:"";position:absolute;height:100px;width:100px;top:60px;left:50%;margin-left:-50px}.column,.column:last-child{width:100%;margin:0 0 30px 0;float:none}.columns-2>div{float:none;width:100%}}6 </style>7 <title>8 [Name Redacted]'s GitHub Pages9 </title>10 <meta content="[Name Redacted]'s GitHub Pages" name="title">11 <meta content="[Name Redacted]'s GitHub Pages" name="twitter:title">12 <meta content="[Name Redacted]'s GitHub Pages" property="og:title">13 <meta content="[Name Redacted] is a self-taught web developer and translator with a passion for learning and teaching the Japanese language." name="description">14 <meta content="[Name Redacted] is a self-taught web developer and translator with a passion for learning and teaching the Japanese language." property="og:description">15 <meta content="[Name Redacted], [Name Redacted], [Name Redacted], GitHub Pages" lang="en" name="keywords">16 <meta content="en" name="language">17 <meta charset="utf-8">18 <meta content="width=device-width, initial-scale=1" name="viewport">19 <meta content="[Name Redacted].github.io" property="og:site_name">20 <meta content="" property="og:url">21 <meta content="website" property="og:type">22 <meta content="" property="og:image">23 <meta content="summary" name="twitter:card">24 <meta content="@[Name Redacted]C1995" name="twitter:creator">25 <meta content="a6Dkj3tZ7SEai-QbfbOI0M0Jb65Lp18nbY1Hl3LwOro" name="google-site-verification">26 </head>27 <body>28 <header>29 <h1 id="site-title">30 <a id="home-link">31 [Name Redacted]'s GitHub Pages32 </a>33 </h1>34 <a id="fork-me">35 Fork Me36 </a>37 </header>38 <div id="content">39 <div class="content-block center">40 <h2 class="title" id="main-title">41 <a class="anchor">42 <span class="anchor-icon">43 44 </span>45 </a>46 [Name Redacted]47 </h2>48 <img alt="main logo" id="main-logo" src="rick.jpg">49 <p id="main-paragraph">50 Greetings, and welcome to my GitHub page, I'm [Name Redacted]!51 <a>52 featured projects53 </a>54 below!55 </p>56 </div>57 <div class="content-block">58 <div class="column-row">59 <div class="column">60 <h2 class="section-title" id="main-experience">61 <a class="anchor">62 <span class="anchor-icon">63 64 </span>65 </a>66 Experience67 </h2>68 <ul>69 <li>70 HTML, CSS, JavaScript (10+ years), jQuery, Lua71 </li>72 <li>73 <a>74 Customer Support @ Forumotion75 </a>76 (3 years, volunteer)77 </li>78 <li>79 Graphic Design/Editing (10+ years)80 </li>81 <li>82 Translating [日本語83 <i class="fa">84 85 </i>86 EN] (3+ years)87 </li>88 </ul>89 </div>90 <div class="column">91 <h2 class="section-title" id="main-languages">92 <a class="anchor">93 <span class="anchor-icon">94 95 </span>96 </a>97 Languages98 </h2>99 <ul>100 <li>101 English, US (Native)102 </li>103 <li>104 Japanese (N3?, self-studying)105 </li>106 </ul>107 </div>108 <div class="column">109 <h2 class="section-title" id="main-hobbies">110 <a class="anchor">111 <span class="anchor-icon">112 113 </span>114 </a>115 Likes116 </h2>117 <ul>118 <li>119 Studying Japanese120 </li>121 <li>122 Translating123 </li>124 <li>125 Gaming126 </li>127 <li>128 Anime129 </li>130 </ul>131 </div>132 </div>133 <div class="column-row">134 <div class="column">135 <h2 class="section-title" id="main-contact">136 <a class="anchor">137 <span class="anchor-icon">138 139 </span>140 </a>141 Links/Contact142 </h2>143 <ul>144 <li>145 X (Twitter):146 <a>147 @[Name Redacted]C1995148 </a>149 </li>150 <li>151 GitHub:152 <a>153 [Name Redacted]154 </a>155 </li>156 <li>157 Reddit:158 <a>159 [Name Redacted]160 </a>161 </li>162 <li>163 Pixiv:164 <a>165 [Name Redacted]166 </a>167 </li>168 </ul>169 </div>170 <div class="column">171 <h2 class="section-title" id="main-tips">172 <a class="anchor">173 <span class="anchor-icon">174 175 </span>176 </a>177 Support178 </h2>179 <p class="center">180 If you would like to support my work, feel free to...181 </p>182 <ul>183 <li>184 <a>185 Buy me a coffee via Ko-fi186 </a>187 </li>188 <li>189 <a>190 Send me a tip via Paypal191 </a>192 </li>193 <li>194 Buy me a gift via Amazon:195 <a>196 US197 </a>198 |199 <a>200 JP201 </a>202 </li>203 <li>204 or just say thanks! (^_^)205 </li>206 </ul>207 </div>208 </div>209 </div>210 <div class="content-block center">211 <h2 class="title center" id="featured-projects">212 <a class="anchor">213 <span class="anchor-icon">214 215 </span>216 </a>217 Featured Projects218 </h2>219 <p>220 Below you'll find a collection of projects that I've worked on over the years!221 </p>222 </div>223 <div class="content-block">224 <div class="column-row">225 <div class="column">226 <h2 class="section-title" id="projects-websites">227 <a class="anchor">228 <span class="anchor-icon">229 230 </span>231 </a>232 Websites233 </h2>234 <ul>235 <li>236 <a>237 Genki Study Resources238 </a>239 <br>240 A website that offers resources for practicing what is taught in the Genki Japanese textbooks.241 </li>242 <li>243 <a>244 Tobira Study Resources245 </a>246 <br>247 A website that offers resources for practicing what is taught in Tobira: Gateway to Advanced Japanese.248 </li>249 <li>250 <a>251 Colloquial Kansai Dictionary252 </a>253 <br>254 A quick reference for the material taught in Colloquial Kansai Japanese.255 </li>256 <li>257 <a>258 Code Vein Builder259 </a>260 <br>261 A tool for creating and sharing Code Vein builds.262 </li>263 </ul>264 </div>265 <div class="column">266 <h2 class="section-title" id="projects-games">267 <a class="anchor">268 <span class="anchor-icon">269 270 </span>271 </a>272 Games273 </h2>274 <ul>275 <li>276 <a>277 Typing with Mishy278 </a>279 <br>280 A free typing practice game, starring Nihon Falcom's mascot, Mishy.281 </li>282 <li>283 <a>284 Tic-Tac-Toe285 </a>286 <br>287 A simple game of Tic-Tac-Toe in the browser.288 </li>289 <li>290 <a>291 Rock Paper Scissors292 </a>293 <br>294 A fun little game of rock-paper-scissors.295 </li>296 <li>297 <a>298 Browser Pong299 </a>300 <br>301 A simple game of pong built with HTML, CSS, and JS.302 </li>303 </ul>304 </div>305 <div class="column">306 <h2 class="section-title" id="projects-translation">307 <a class="anchor">308 <span class="anchor-icon">309 310 </span>311 </a>312 Translations313 </h2>314 <ul>315 <li>316 <a>317 Trails through Daybreak: Agnès' Style318 </a>319 <br>320 Free web manga based on Trails through Daybreak that follows the daily life of a Spriggan from Agnès' point of view.321 </li>322 <li>323 <a>324 Little Witch Nobeta Manga Translations325 </a>326 <br>327 I mostly handled the English typesetting for these since they're based on an existing script, however, I also edited and retranslated the script where necessary.328 </li>329 <li>330 <a>331 Falcom Sticker Translations332 </a>333 <br>334 LINE stickers by Nihon Falcom translated into English for others to use on messaging services.335 </li>336 <li>337 <a>338 Twitter Translations339 </a>340 <br>341 Various translations I did on Twitter for art, manga, etc.342 </li>343 </ul>344 </div>345 </div>346 <div class="column-row">347 <div class="column">348 <h2 class="section-title" id="projects-forumotion">349 <a class="anchor">350 <span class="anchor-icon">351 352 </span>353 </a>354 Forumotion355 </h2>356 <ul>357 <li>358 <a>359 Forumactif Support Design360 </a>361 <br>362 In the past I've assisted in the development of Forumactif's support forum design as "[Name Redacted]."363 </li>364 <li>365 <a>366 Forumactif Edge367 </a>368 <br>369 A free modern and responsive forum theme for Forumotion forums.370 </li>371 <li>372 <a>373 Forumactif Messenger374 </a>375 <br>376 Instant message application for Forumotion.377 </li>378 <li>379 <a>380 FM Design - Plugins381 </a>382 <br>383 My old forum which contains a vast collection of plugins and tutorials that I wrote for Forumotion over the years.384 </li>385 </ul>386 </div>387 <div class="column">388 <h2 class="section-title" id="projects-tools">389 <a class="anchor">390 <span class="anchor-icon">391 392 </span>393 </a>394 IDE Extensions395 </h2>396 <ul>397 <li>398 <a>399 brackets-rubify-text400 </a>401 <br>402 Rubify Text is a simple extension that wraps selected texts with <ruby> annotation tags to help make annotating Asian texts with furigana easier.403 </li>404 <li>405 <a>406 firefox-dark-ui407 </a>408 <br>409 A dark UI theme for Atom based on the old Firefox developer tools dark theme.410 </li>411 <li>412 <a>413 firefox-dark-syntax414 </a>415 <br>416 A dark syntax theme for Atom based on the old Firefox developer tools dark theme.417 </li>418 </ul>419 </div>420 <div class="column">421 <h2 class="section-title" id="projects-misc">422 <a class="anchor">423 <span class="anchor-icon">424 425 </span>426 </a>427 Miscellaneous428 </h2>429 <ul>430 <li>431 <a>432 Cunny Code433 </a>434 <br>435 The Cute and Funny Morse Code Tool.436 </li>437 <li>438 <a>439 Tio Plato is the Best440 </a>441 <br>442 A small webpage/slideshow dedicated to one of my favorite characters, Tio Plato.443 </li>444 <li>445 <a>446 Scroll Spider447 </a>448 <br>449 Scare the people on your website by having a spider scroll down the page for Halloween.450 </li>451 <li>452 <a>453 Rainstorm454 </a>455 <br>456 Rain in your browser to set your CPU on fire!457 </li>458 </ul>459 </div>460 </div>461 </div>462 </div>463 <footer class="clear">464 <ul class="footer-left">465 <li>466 <a>467 Home468 </a>469 </li>470 <li>471 <a>472 Privacy473 </a>474 </li>475 </ul>476 <ul class="footer-right">477 <li>478 Created by479 <a>480 [Name Redacted]481 </a>482 </li>483 </ul>484 </footer>485 </body>486</html>487