SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing 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 dataset in the huggingface format 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. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html>3 <head>4 <meta charset="utf-8">5 <title>6 [NAME REDACTED]7 </title>8 <meta content="width=device-width, initial-scale=1" name="viewport">9 <style>10 @font-face {11 font-family: 'Computer Modern Serif';12 src: url('./font/cmunrm.eot');13 src: url('./font/cmunrm.eot?#iefix') format('embedded-opentype'),14 url('./font/cmunrm.woff') format('woff'),15 url('./font/cmunrm.ttf') format('truetype'),16 url('./font/cmunrm.svg#cmunrm') format('svg');17 font-weight: normal;18 font-style: normal;19}20 21@font-face {22 font-family: 'Computer Modern Serif';23 src: url('./font/cmunbx.eot');24 src: url('./font/cmunbx.eot?#iefix') format('embedded-opentype'),25 url('./font/cmunbx.woff') format('woff'),26 url('./font/cmunbx.ttf') format('truetype'),27 url('./font/cmunbx.svg#cmunbx') format('svg');28 font-weight: bold;29 font-style: normal;30}31 32 33@font-face {34 font-family: 'Computer Modern Serif';35 src: url('./font/cmunti.eot');36 src: url('./font/cmunti.eot?#iefix') format('embedded-opentype'),37 url('./font/cmunti.woff') format('woff'),38 url('./font/cmunti.ttf') format('truetype'),39 url('./font/cmunti.svg#cmunti') format('svg');40 font-weight: normal;41 font-style: italic;42}43 44@font-face {45 font-family: 'Computer Modern Serif';46 src: url('./font/cmunbi.eot');47 src: url('./font/cmunbi.eot?#iefix') format('embedded-opentype'),48 url('./font/cmunbi.woff') format('woff'),49 url('./font/cmunbi.ttf') format('truetype'),50 url('./font/cmunbi.svg#cmunbi') format('svg');51 font-weight: bold;52 font-style: italic;53}54 55body {56 color: #333;57 font-family: "Computer Modern Serif", Serif;58}59body::before,60body::after {61 content: "";62 top: 0;63 left: 0;64 bottom: 0;65 right: 0;66 position: absolute;67 z-index: -1;68}69body::before {70 opacity: 0.2;71 background: url('./pattern-min.jpg') top left repeat-x;72}73body::after {74 background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 100%);75}76 77.right {78 background: rgba(100,100,100, 0.05);79}80.right h1,81.right h2 {82 font-style: italic;83 font-weight: bold;84}85.left h3 {86 font-style: italic;87 font-weight: bold;88}89.description {90 text-align: justify;91 font-size: 0.9rem;92 margin-top: 1rem;93}94 95.left {96 text-align: right;97}98 99.left a,100.headerMetadata a {101 color: #333;102 text-decoration: none;103}104.left li > a {105 display: block;106 text-decoration: underline;107}108.left a:hover,109.headerMetadata a:hover {110 color: #888;111}112 113.metadata {114 color: #555;115}116.headerMetadata {117 font-style: italic;118}119 120.insetshadow,121.insetshadow--small {122 color: #333;123 letter-spacing: .1em;124}125 126.insetshadow {127 text-shadow: 2px 2px 0px #d5d5d5,128 4px 4px 0px rgba(0, 0, 0, 0.2);129}130.insetshadow--small {131 text-shadow: 1px 1px 0px #d5d5d5,132 2px 2px 0px rgba(0, 0, 0, 0.2);133}134 135.attribution {136 font-size: 0.7rem;137 font-style: italic;138 color: #999;139}140.attribution a {141 color: #999;142 text-decoration: none;143}144 145 146 147 html{box-sizing:border-box}*,:before,:after{box-sizing:inherit;margin:0;padding:0}html,body{min-height:100%;font-size:18px}body{display:flex;flex-direction:row-reverse;align-items:stretch;position:relative}.left,.right{flex:1 0 auto;max-width:50%;padding:15rem 1.5rem 7rem}.right h1,.right h2{font-size:2.7rem}.left h3{font-size:1.5rem;padding-top:1.3rem}.description{max-width:400px}.left{font-size:1rem}.left > div{width:100%;float:right;clear:both}.left li{list-style:none;margin:.6rem 0 1.4rem}.metadata{font-size:.8rem}.headerMetadata{font-size:1.25rem}.attribution{position:absolute;right:0;bottom:0}@media (max-width: 620px){body{flex-direction:column}.left,.right{text-align:right;padding:2rem 1.5rem;max-width:100%}.headerMetadata{font-size:1rem}.right h1{font-size:2em}.description{display:none}}148 </style>149 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">150 </head>151 <body>152 <header class="right">153 <h1 class="insetshadow">154 [NAME REDACTED]155 </h1>156 <p class="headerMetadata insetshadow--small">157 <a>158 Blog159 </a>160 •161 <a>162 Twitter163 </a>164 •165 <a>166 Github167 </a>168 •169 <a>170 E-mail171 </a>172 </p>173 <p class="description">174 Open Source developer, aspiring technical speaker, programming enthusiast and avid internet surfer. Maintainer of Omniscient.js/immstruct, organizer of meetup and Norwegian Podcast host.175 </p>176 </header>177 <div class="left">178 <div class="podcast">179 <h3>180 Monthly Podcasts181 </h3>182 <ol>183 <li>184 <a>185 BartJS Podcast: Host for monthly podcast186 </a>187 <p class="metadata">188 <small>189 (Norwegian)190 </small>191 <span class="place">192 <a>193 BartJS194 </a>195 </span>196 •197 <span class="year">198 2015-199 </span>200 </p>201 </li>202 </ol>203 </div>204 <div class="youtube">205 <h3>206 Weekly Video Series207 </h3>208 <ol>209 <li>210 <a>211 Kodesnutt.io: YouTube Channel212 </a>213 <p class="metadata">214 <small>215 (Norwegian)216 </small>217 <span class="place">218 <a>219 kodesnutt.io220 </a>221 </span>222 •223 <span class="year">224 2016-225 </span>226 </p>227 </li>228 </ol>229 </div>230 <div class="presentations">231 <h3>232 Video Presentations233 </h3>234 <ol>235 <li>236 <p>237 Breaking the Fourth Wall With JavaScript238 </p>239 <p class="metadata">240 <a>241 Video242 </a>243 –244 <span class="place">245 <a>246 Trondheim Developer Conference247 </a>248 </span>249 •250 <span class="year">251 2016252 </span>253 </p>254 <p class="metadata">255 <a>256 Video257 </a>258 –259 <span class="place">260 <a>261 Web Rebels262 </a>263 </span>264 •265 <span class="year">266 2016267 </span>268 </p>269 </li>270 <li>271 <a>272 Frontend Anno 2016: Exploration and Iteration273 </a>274 <p class="metadata">275 <small>276 (Norwegian)277 </small>278 <span class="place">279 <a>280 JavaZone281 </a>282 </span>283 •284 <span class="year">285 2016286 </span>287 </p>288 </li>289 <li>290 <a>291 Frontend Anno 2016: Exploration and Iteration292 </a>293 <p class="metadata">294 <small>295 (Norwegian)296 </small>297 <span class="place">298 <a>299 BEKK Open Fagdag300 </a>301 </span>302 •303 <span class="year">304 2016305 </span>306 </p>307 </li>308 <li>309 <a>310 Functional UIs and Unidirectional Dataflow311 </a>312 <p class="metadata">313 <span class="place">314 <a>315 JSConf Budapest316 </a>317 </span>318 •319 <span class="year">320 2015321 </span>322 </p>323 </li>324 </ol>325 </div>326 <div class="projects">327 <h3>328 Open Source Projects329 </h3>330 <ol>331 <li>332 <a>333 Omniscient.js334 </a>335 <p class="metadata">336 Functional library for React337 </p>338 </li>339 <li>340 <a>341 Immstruct342 </a>343 <p class="metadata">344 Cursor based immutable data structures with history345 </p>346 </li>347 <li>348 <a>349 node-notifier350 </a>351 <p class="metadata">352 Sending native notifications, cross platform.353 </p>354 </li>355 <li>356 <a>357 proxy-fun358 </a>359 <p class="metadata">360 Collection of learning resources for JavaScript Proxy.361 </p>362 </li>363 </ol>364 </div>365 <div class="publications">366 <h3>367 Publications368 </h3>369 <ol>370 <li>371 <a>372 Functional UI and Components as Higher Order Functions373 </a>374 <p class="metadata">375 <span class="place">376 <a>377 RisingStack378 </a>379 </span>380 •381 <span class="year">382 2015383 </span>384 </p>385 </li>386 <li>387 <a>388 ES2015 (ES6) Features Commonly Used with Functional Style React389 </a>390 <p class="metadata">391 <span class="place">392 <a>393 open.bekk.no394 </a>395 </span>396 •397 <span class="year">398 2015399 </span>400 </p>401 </li>402 <li>403 <a>404 Scaling Frontend Build Steps By Necessity405 </a>406 <p class="metadata">407 <span class="place">408 <a>409 open.bekk.no410 </a>411 </span>412 •413 <span class="year">414 2015415 </span>416 </p>417 </li>418 <li>419 <a>420 Easier UI Reasoning with Unidirectional Dataflow and Immutable Data421 </a>422 <p class="metadata">423 <span class="place">424 <a>425 open.bekk.no426 </a>427 </span>428 •429 <span class="year">430 2014431 </span>432 </p>433 </li>434 </ol>435 </div>436 <div class="presentations">437 <h3>438 Slide Presentation439 </h3>440 <ol>441 <li>442 <a>443 Skalere frontendbygg etter behov444 </a>445 <p class="metadata">446 <small>447 (Norwegian)448 </small>449 <span class="place">450 <a>451 BEKK Fagdag452 </a>453 </span>454 •455 <span class="year">456 2015457 </span>458 </p>459 </li>460 <li>461 <a>462 Functional UIs463 </a>464 <p class="metadata">465 <span class="place">466 <a>467 BEKK Fagdag468 </a>469 </span>470 •471 <span class="year">472 2015473 </span>474 </p>475 </li>476 <li>477 <a>478 Making a479 <code>480 clapper481 </code>482 using Web Audio API483 </a>484 <p class="metadata">485 <span class="place">486 <a>487 NTNU488 </a>489 </span>490 •491 <span class="year">492 2015493 </span>494 </p>495 </li>496 <li>497 <a>498 ECMAScript 6: Destructuring499 </a>500 <p class="metadata">501 <span class="place">502 <a>503 BartJS504 </a>505 </span>506 •507 <span class="year">508 2014509 </span>510 </p>511 </li>512 </ol>513 </div>514 </div>515 <footer class="attribution">516 <p>517 Header image by518 <a>519 Paul Cross520 </a>521 </p>522 </footer>523 </body>524</html>525