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.7k
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">2<html lang="en" xmlns="">3 <head>4 <style>5 html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, abbr, em, img, strong, ol, ul, li, fieldset, form, label, input, select, textarea, legend, table, caption, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}6/* fix FORM issues */7input, select, textarea { border: solid 1px #3d3d3d; }8input:hover, input:focus, input:active, select:hover, select:focus, select:active, textarea:hover, textarea:focus, textarea:active { outline: solid 2px #000;}9input[type="checkbox"]:hover, input[type="checkbox"]:focus, input[type="checkbox"]:active, input[type="radio"]:hover, input[type="radio"]:focus, input[type="radio"]:active { outline: solid 3px #000;}10 11body { text-align: left; color: #000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 75%;} 12 13h3 { font-size: 1.75em; font-weight: bold;}14h4 { font-size: 1.5em;}15h5 { font-size: 1.333em;}16h6 { font-size: 1.25em;}17h1, h2, h3, h4, h5, h6 { letter-spacing: 1.5px;}18p, ul, ol, h1, h2, h3, h4, h5, h6 { line-height: 1.5em;}19p, ul, ol, h3, h4, h5, h6 { margin-bottom: 1em;}20ul ul, ol ol, ul ol, ol ul { margin-bottom: 0;}21p { font-size: 1em;}22li { line-height: 1.5em;}23a, a:visited, li { color: #000;font-size: 1em;}24a:visited, ul a:visited { color: #000; text-decoration: underline;}25a:focus, ul a:focus { color: #000; text-decoration: none;}26ol, ul { list-style: disc; margin-left: 1em;}27ol li li, ul li li { margin-left: 1em;}28ol li, ul a, ol li, ol a { line-height: 1.5em; letter-spacing: 1.2px; font-size: 1em;}29ul a, ol a { text-decoration: underline;}30 31#wrap { max-width:100%;} 32#main, #main_content, #navbar_b { width: 825px; min-width: 825px; /* width: expression(document.body.clientWidth > 825? "825px" : "auto"); */}33#main, #main_content { background: #fff; margin: 0 auto;}34#header { background-color: #ACC7FF; border-bottom: 1px solid #000;}35#hdr h1 { color: #000; font-size: 3em; line-height: 2em; text-align: center;}36#hdr h1 a { text-decoration: none;}37#hdr h2 { border-top: 1px solid #000; border-bottom: 1px solid #000; text-align: center; background: #BEFF9E; font-size: 1.5em; line-height: 2em; margin-bottom: .5em;}38#content { width: 475px; margin: 2em 0 2em 1.25em; padding: 1.5em 3em; float: left; vertical-align: top; border: 1px solid #ccc; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em;}39#sidebar { width: 170px; margin: 2em 3.5em 2em 0; padding: 1em; float: right; border: 1px solid #ccc; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em;}40#side_nav, #navbar { float: left;}41#footer { padding: 8px 0; clear: both; background: #BEFF9E; /* #BEFF9E */ border-top: 1px solid #000; border-bottom: 1px solid #000;}42.akey{text-decoration: underline;}43.bold { font-weight: bold;}44img { display: block;}45.inline {display: inline;}46 47/* form */48form { margin-bottom: 1.5em;}49#forms { float: left; vertical-align: top; margin: .83333em;} 50#forms p { margin: .8333em 0; line-height: 1.5em}51fieldset { padding: .4166em .8333em; margin: .8333em; border: 1px solid #ccc; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; width: 57.5em;} 52fieldset.inner { width: 54.1666em;} 53#forms input, #forms select, #forms textarea { margin-bottom: .75em;} 54form li { list-style:none;}55label { float: left; width: 15em; margin-right: .25em; text-align: right; padding: .25em; position: relative;}56legend { padding: .5em; margin: .25em; border: 0; font-size:1.25em;} 57.submit { margin: 1em auto;}58span.req { color: #f00; font-weight: bold;}59 60/* display directions/explainations of fields right of input */ 61label strong.msg1, label strong.msg2 { color: #888; font-size: .8em; font-style: normal; line-height: 2.5; position: absolute; top: 0;}62label strong.msg1 { right: -17.25em;}63label strong.msg2 { right: -33em;}64 65/* Used to create three columns for checkbox section */ 66.content1, .content2, .content3 { list-style: none; width: 17.0833em; margin: .4166em;}67.content1 label, .content2 label, .content3 label { float: left; width: 12em; margin-right: .25em; text-align: left; padding: 0 .25em;}68.content1, .content2, .content3 { float: left;}69 70/* skip nav */71.hide a, .hide a:hover, .hide a:visited, .search label, span.hide, em, p.hide { display: block; position: absolute; left: -10000px; top: auto; width: 100%; height: 3em; font-weight: bold; text-align: center; border-bottom: 1px solid #000;} 72.hide a:active, .hide a:focus { background: #BEFF9E; position: static; width: auto; height: auto; padding: 1em; margin: auto;}73 74/* misc */75#multiple_images img { display: inline; margin: 3px;}76.photo { padding: 5px;}77.photo_text { font-weight: bold; font-style: italic; font-size: 75%;}78.ltr1, .nbr1 { text-align: left;}79.ltr2, .nbr2 { text-align: center;}80.ltr3, .nbr3 { text-align: right;}81.em1 { font-weight: bold;}82.em2 { color: #F00;}83.em3, .italic { font-weight: italic;}84.alpha, .alpha a { padding: 0; font-size: 1.25em; line-height: 1.5em;}85.alpha { margin: 0 5% .75em 5%;}86.alpha a { margin: 0 .1667em .5em .1667em;}87.alpha a:hover, .alpha a:focus, .alpha a:active { text-decoration: none;}88.title { font-weight: bold;}89#content_t { width: 725px; margin: 12px;}90.stripe { background: #ddd;}91 92/* table */93table, th, td { border: 1px solid #000; padding: .25em .5em; font-size: 1em; line-height: 1.5em;}94table a:hover, table a:focus, table a:active { text-decoration: none;}95table { margin: 1em 0; border-collapse: collapse;}96th { background: #BEFF9E; text-align: center;}97.none a { text-decoration: none;}98caption { font-size: 1.5em; margin: .5em 0; }99 100/* search box */101.search form { float: left; margin-bottom:0; padding: .5em 0 .25em 1em;}102.search input { font-size: 1em;} 103 104/* horizontal navigation */105#navbar_h { width: 100%; float: left; border-bottom: 1px solid #000;}106#nav_h { float: right;}107ul#nav_h { font-size: 1em; font-weight: bold; list-style-type: none; margin-bottom: 0;}108ul#nav_h li { float: left; background: #ACC7FF; border-left: 1px solid #000;}109#nav_h a { float: left; display: block; color: #000; text-decoration: none; padding: .55em 1em; border-top: 1px solid #000;}110#nav_h a:hover, #nav_h a:focus, #nav_h a:active { background: #BEFF9E;}111 112/* vertical navigation */113#nav, #nav2 { margin: .25em 0; padding: .5em; display: block; float: left; width: 14em;}114#nav a, #nav2 a { width: 11em; font-size: 1em; line-height: 2em; padding: .5em;}115#nav a:link, #nav a:visited, #nav2 a:link, #nav2 a:visited { text-decoration: none;}116#nav a:hover, #nav a:focus, #nav a:active, #nav2 a:hover, #nav2 a:focus, #nav2 a:active { text-decoration: underline;}117#nav li, #nav2 li { list-style: none; font-size: .9127em; margin: .25em 0;}118 119/* bottom navigation */120#navbar_b { margin: 0 auto; }121#navbar_b p { text-align: center;}122#nav_b ul { margin:0; padding: 0;}123#nav_b li { display: inline; font-size: 1em; padding: 0 .25em;}124#nav_b a:hover, #nav_b a:focus, #nav_b a:active { text-decoration: none;}125 126/* print */127@media print {128 body { margin:0; padding: 0; text-align: left; color: #000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%;} 129 #hdr, .hide, #sidebar, #footer { display: none !important; } 130 #main, #wrap { border: 0;}131 #content { float: left; list-style: none; margin: 0; padding: 5px; width: 85%;} 132 #content a { color: #000;}133 #content ul a { margin: 0; padding: 0; line-height: 20px; letter-spacing: 1.2px; text-decoration: underline;}134 img { display: block;}135 #nav, #event_type, #details, #add_attendees, #running_events, #events_past, #attending_events, #email_attendees, #account_info { display: block;}136}137 </style>138 <title>139 Books John F Croston III would recommend - jfc iii140 </title>141 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">142 <meta content="en-us" http-equiv="Content-Language">143 <style type="text/css">144 <!--145 #books a { 146 border: 1px solid #ccc;147 border-radius: 1em;148 -moz-border-radius: 1em;149 -webkit-border-radius: 1em;150 padding-left: .75em;151 margin-left: -.40em;152 }153 .author {font-weight: bold;}154 -->155 </style>156 </head>157 <body>158 <div class="hide">159 <a>160 Skip to Main Content161 </a>162 </div>163 <div id="wrap">164 <div id="header">165 <div id="hdr" role="banner">166 <h1>167 <a>168 john f croston iii169 </a>170 </h1>171 <h2>172 “It’s only words and photos on the internet”173 </h2>174 </div>175 </div>176 <div id="main_content">177 <div id="sidebar">178 <ul id="nav" role="navigation">179 <li id="about">180 <a>181 About182 </a>183 </li>184 <li id="accessibility">185 <a>186 Accessibility187 </a>188 </li>189 <li id="blog">190 <a>191 Blog192 </a>193 </li>194 <li id="books">195 <a>196 Books197 </a>198 </li>199 </ul>200 <h3>201 Contact Info202 </h3>203 <ul id="nav2">204 <li>205 E-mail -206 <a class="email">207 [EMAIL REDACTED]208 </a>209 </li>210 <li>211 Twitter -212 <a class="note url">213 @jfc3214 </a>215 </li>216 <li class="tel">217 <span class="type">218 Cell219 </span>220 -221 <span class="value">222 [PHONE REDACTED]223 </span>224 </li>225 </ul>226 </div>227 <div id="content" role="main">228 <h3 id="maincontent" tabindex="-1">229 Book Recommendations230 </h3>231 <p>232 The following is a list of books I have read or purchased and not yet read and would recommend that you read if you have not done so already.233 </p>234 <p>235 <b>236 I have added Amazon affiliate program links to all these books.237 </b>238 </p>239 <h4>240 Highly Recommend241 </h4>242 <ul>243 <li>244 <p>245 <a>246 Don't Make Me Think: A Common Sense Approach to Web Usability247 </a>248 </p>249 <p>250 by:251 <a class="author">252 Steve Krug253 </a>254 </p>255 </li>256 <li>257 <p>258 <a>259 Web Form Design: Filling in the Blanks260 </a>261 </p>262 <p>263 by:264 <a class="author">265 Luke Wroblewski266 </a>267 </p>268 </li>269 <li>270 <p>271 <a>272 Getting Real: The smarter, faster, easier way to build a successful web Application273 </a>274 </p>275 <p>276 by:277 <a class="author">278 Jason Fried279 </a>280 </p>281 </li>282 <li>283 <p>284 <a>285 Soak Wash Rinse Spin286 </a>287 </p>288 <p>289 by:290 <a class="author">291 Tolleson Design292 </a>293 </p>294 </li>295 </ul>296 <h4>297 Recommended298 </h4>299 <ul>300 <li>301 <p>302 <a>303 Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)304 </a>305 </p>306 <p>307 by:308 <a class="author">309 Dan Cederholm310 </a>311 </p>312 </li>313 <li>314 <p>315 <a>316 Eric Meyer on CSS: Mastering the Language of Web Design317 </a>318 </p>319 <p>320 by:321 <a class="author">322 Eric Meyer323 </a>324 </p>325 </li>326 <li>327 <p>328 <a>329 Designing Web Usability330 </a>331 </p>332 <p>333 by:334 <a class="author">335 Jakob Nielsen336 </a>337 </p>338 </li>339 <li>340 <p>341 <a>342 The Art & Science of Web Design343 </a>344 </p>345 <p>346 by:347 <a class="author">348 Jeffrey Veen349 </a>350 </p>351 </li>352 </ul>353 <h5>354 Non-Technology Books355 </h5>356 <ul>357 <li>358 <p>359 <a>360 What Should I Do with My Life?: The True Story of People Who Answered the Ultimate Question361 </a>362 </p>363 <p>364 by:365 <a class="author">366 Bo Bronson367 </a>368 </p>369 </li>370 <li>371 <p>372 <a>373 Oz Clarke's New Essential Wine Book: An Indispensable Guide to Wines of the World374 </a>375 </p>376 <p>377 by:378 <a class="author">379 Oz Clarke380 </a>381 </p>382 </li>383 </ul>384 <h4>385 Currently Reading386 </h4>387 <p>388 The list of books below is books I am currently in the middle of or have not yet finished books.389 </p>390 <ul>391 <li>392 <p>393 <a>394 DOM Scripting: Web Design with JavaScript and the Document Object Model395 </a>396 </p>397 <p>398 by:399 <a class="author">400 Jeremy Keith401 </a>402 </p>403 </li>404 <li>405 <p>406 <a>407 The Design of Everyday Things408 </a>409 </p>410 <p>411 by:412 <a class="author">413 Donald A. Norman414 </a>415 </p>416 </li>417 <li>418 <p>419 <a>420 Train of Thoughts: Designing the Effective Web Experience (Voices)421 </a>422 </p>423 <p>424 by: John C. Lenker, Jr.425 </p>426 </li>427 <li>428 <p>429 <a>430 Speed Up Your Site: Web Site Optimization431 </a>432 </p>433 <p>434 by:435 <a class="author">436 Andrew B. King437 </a>438 </p>439 </li>440 </ul>441 <h4>442 Still to Read443 </h4>444 <p>445 The following is a list of books I have purchased and have not yet had the time to read.446 </p>447 <ul>448 <li>449 <p>450 <a>451 Just Ask: Integrating Accessibility Throughout Design452 </a>453 </p>454 <p>455 by:456 <a class="author">457 Shawn Lawton Henry458 </a>459 </p>460 </li>461 <li>462 <p>463 <a>464 Web Accessibility: Web Standards and Regulatory Compliance465 </a>466 </p>467 <p>468 by: multiple authors469 </p>470 </li>471 <li>472 <p>473 <a>474 Designing with Web Standards (3rd Edition)475 </a>476 </p>477 <p>478 by:479 <a class="author">480 Jeffrey Zeldman481 </a>482 </p>483 </li>484 <li>485 <p>486 <a>487 Universal Design for Web Applications: Web Applications That Reach Everyone488 </a>489 </p>490 <p>491 by:492 <a class="author">493 Wendy Chisholm494 </a>495 and496 <a class="author">497 Matt May498 </a>499 </p>500 </li>501 </ul>502 </div>503 </div>504 <div id="footer">505 <div id="navbar_b">506 <ul id="nav_b" role="navigation">507 <li>508 <a>509 About510 </a>511 </li>512 <li>513 <a>514 Accessibility515 </a>516 </li>517 <li>518 <a>519 Blog520 </a>521 </li>522 <li>523 <a>524 Books525 </a>526 </li>527 </ul>528 <p role="contentinfo">529 © 2007 - 2019530 <a>531 jfciii.com532 </a>533 </p>534 </div>535 </div>536 </div>537 </body>538</html>539