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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">2<html xmlns="">3 <head>4 <style>5 /* == Reset == */6 7/* == Generic styles ======== */8body {font:62.5% "Times New Roman", Times, serif; color:#444;min-width:940px;}9 10h1 {margin:0;}11h1 {font-size:3em; margin-bottom:0.666667em; line-height:1.333333em;}12h2 {font-size:2em; margin-bottom:.25em; line-height:1em;}13h3 {font-size:2em; margin-bottom:.25em; line-height:1em;}14 15/* Links */16a:link {color:#888;}17a:visited {color:#999;}18a:hover {color:#777;}19a:active {color:#777;}20 21h3 a {text-decoration:none;}22 23/* Reusable classes */24.hide {text-indent: -1000em; width: 0; height: 0; overflow: hidden;}25 26.navigation {list-style:none; margin: 2em 0 0;}27 .navigation li {display:inline;}28 .navigation a {text-decoration:none;}29 #footer .navigation li {font-size:1.5em;}30 31.item-pagination {overflow:hidden;width:512px; margin-bottom:1.5em;border-top:1px solid #ccc; padding-top:1.5em;}32.item-pagination li.previous {display:block;float:left; width:48%;}33.item-pagination li.next {float:right; display:block;width: 48%; text-align:right}34 35textarea {width:378px; height:312px;float:right;}36legend {display:none;}37fieldset {display:block; clear:both;}38label {font-size:1.5em;}39.label {font-size:1.5em;}40.inputs {overflow:hidden;zoom:1;}41.field {border-bottom:1px solid #ccc; padding:0.75em 0; overflow:hidden; width:512px;}42.field label {float:left; width: 114px;font-weight:normal;clear:left; }43.field .label {float:left; width: 114px;font-weight:normal;clear:left; }44.field .textinput, .field select {float:right; width: 378px;background:#fff;}45.field select {width: 382px;}46.field input {margin:0;margin-left:16px;}47input.submitinput {margin-top:1em;}48.radioinputs {display:block; margin-bottom:0.5em; overflow:hidden;}49.radioinputs label {display:block; float:left; width: 48%; clear:none;}50input#description {width: 378px; height: 312px;}51.search-entry select {margin-bottom:.5em;}52#primary #submit_search {margin:.5em 0;float:right;}53 54 55p {font-size:1.5em; line-height:1.33333em; margin-bottom:1.33333em;}56 57ul {list-style:none;font-size:1.5em; line-height:1.33333em;}58ol {list-style:lower-roman inside;font-size:1.5em; line-height:1.33333em;}59 60ul.items-list, ul.collections-list, ul.title-list {font-size:1em;}61 62 63.item-description, .element-text, .element-text-empty {font-size:1.5em; line-height:1.33333em; margin-bottom:1.33333em;}64.item-description p, .element-text p {font-size:1em; line-height:1.33333em; margin-bottom:1.33333em;}65 66.title-list li {font-size:1.5em; line-height:1.33333em; margin-bottom:1.33333em;}67 68em {font-style:italic;}69.element {margin-bottom:1.25em;}70 71textarea#rights {float:none; display:none;line-height:1.33333em;width: 512px; border:none; font:1.5em "Times New Roman",Times, serif;height:31em; color:#444;padding:0; margin:0;}72 73div.error {font-size:1.5em; line-height:1.33333em; margin:1.33333em 0;}74 75/* Microformats */76.hTagcloud {margin-top:2em;}77.hTagcloud ul {list-style:none; margin-left:0; padding-left:0; line-height:1.8em;}78 .hTagcloud li {display:inline;margin-right:8px;}79 80 .popular {font-size:100%;}81 .v-popular {font-size:140%;}82 .vv-popular {font-size:180%;}83 .vvv-popular {font-size:220%;}84 .vvvv-popular {font-size:260%;}85 .vvvvv-popular {font-size:300%;}86 .vvvvvv-popular {font-size:320%;}87 .vvvvvvv-popular {font-size:340%;}88 .vvvvvvvv-popular {font-size:360%;}89 90 .popular a, .popular a:visited {color: #714271;}91 .v-popular a, .v-popular a:visited {color: #714271;}92 .vv-popular a, .vv-popular a:visited {color: #714271;}93 .vvv-popular a, .vvv-popular a:visited {color: #636;}94 .vvvv-popular a, .vvvv-popular a:visited {color: #636;}95 .vvvvv-popular a, .vvvvv-popular a:visited {color: #5D2E5D;}96 .vvvvvv-popular a, .vvvvvv-popular a:visited {color: #5D2E5D;}97 .vvvvvvv-popular a, .vvvvvvv-popular a:visited {color: #5D2E5D;}98 .vvvvvvvv-popular a, .vvvvvvvv-popular a:visited {color: #5D2E5D;}99 100/* == Header == */101 102#header #site-title {margin-bottom:0; font-size:4em; margin-left:48px; padding:1em 0;}103 #header #site-title a {text-decoration:none;}104 #header {}105 106/* == Content == */107#content {background:#fff url("../images/horizontal-stripe.gif") top left repeat-x;padding:54px 0 48px 48px; overflow:hidden; zoom:1;}108 109 #search-wrap a {font-size:1.5em;margin-top:.25em;text-decoration:none;}110 #search-wrap {margin-bottom:2em;}111 #submit_search {margin-left:5px;}112 #submit_search_advanced {margin-top:5px;margin-bottom:5px;}113 114 115 #primary-nav {float:left; width:246px;}116 #primary-nav ul {margin:0;font-size:2em; line-height:1em;}117 #primary-nav li {display:block; width: 246px; margin-bottom:1em;}118 #primary-nav a {display:block; width: 246px; padding:0;}119 #primary-nav li.current a, #contribution #primary-nav li.nav-contribute-a-story-or-file a, #Tags #primary-nav li.nav-browse-contributions a, #items #primary-nav li.nav-browse-contributions a {color:#444;border-left:1em solid #444; padding-left:0.25em;}120 121 #primary {float:left; width: 512px; margin-left:60px;}122 123 #secondary-nav {margin-bottom:1em; border-bottom:1px solid #ccc;margin-bottom:0;padding:0.4em 0.5em; font-size:1.5em; }124 #secondary-nav li {padding:0.5em 0;}125 #secondary-nav a {padding:0.5em 1em 0.5em; color:#666;}126 #secondary-nav .current a{border-top:1px solid #ccc;background:#fff;color:#333; font-weight:bold;border-left:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #fff;}127 128 .pagination ul {text-align:right; line-height:1em; padding:0.5em; }129 .pagination li {display:inline; margin-left:1em; margin-bottom:0; padding:0.5em 0;}130 .top ul {border:1px solid #ccc; border-width:0 0 1px 0;}131 .bottom ul {/*margin-top:-1.3em;*/margin-bottom:0; }132 .pagination .next {border-left:1px solid #ccc; padding-left:1em;}133 .pagination .previous {border-right:1px solid #ccc; padding-right:1em;}134 135 .browse .item {overflow:hidden; border-top:1px solid #ccc;padding-top:2em;}136 .browse .item-img img {width:100px; height:100px; float:left; display:block; margin-bottom:2em; margin-right:2em; padding:6px; border:1px solid #ccc;}137 .tags li {display:inline;}138 .tags a {}139 140 #item-content img {padding:5px; border:1px solid #ccc; margin-bottom:2em;}141 142 #featured-item {overflow:hidden;}143 #featured-item img {width: 140px; height:140px; padding:8px; border:1px solid #ccc; margin-right:20px; margin-bottom:20px;float:left;}144 145 .items-list li {border-bottom:1px solid #ccc; margin-bottom:1.33333em;}146 147 .collection {border-top:1px solid #ccc;padding-top:1.33333em;}148 .collection .element {margin-bottom:0;}149 150 /* Exhibits browse */151 #exhibits .exhibit {border-top:1px solid #ccc; padding-top:2em;}152 153 154 155 .exhibit-section-nav {list-style:square;padding-left:20px;padding-bottom:10px;}156 .exhibit-section-nav li {font-size:1.5em;}157 .exhibit-page-nav {list-style:square;padding-left:40px;padding-bottom:10px;}158 .exhibit-page-nav li {font-size:1.5em;}159 160 161/* == Footer == */162#footer {clear:both; overflow:hidden; padding-top:2em; margin-top:2em; border-top:1px solid #ccc;width: 818px;}163 #footer p {float:left; width: 180px;}164 #footer ul {float:left; width:578px; margin:0 0 0 60px;text-align:right;}165 #footer ul li {margin-left:12px;}166 </style>167 <title>168 Harlem CORE | Browse Items169 </title>170 <!-- Meta -->171 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">172 <meta content="A brief introductory history of the New York-Harlem chapter of the Congress of Racial Equality (CORE)." name="description">173 <!-- Stylesheets -->174 <!-- JavaScripts -->175 <!-- Plugin Stuff -->176 </head>177 <body>178 <div id="wrap">179 <div id="header">180 <div id="site-title">181 <a>182 Harlem CORE183 </a>184 </div>185 </div>186 <div id="content">187 <div id="primary-nav">188 <div id="search-wrap">189 <h2>190 Search191 </h2>192 <form action="/omeka/items/browse" id="simple-search" method="get">193 <fieldset>194 <input class="textinput" id="search" name="search" type="text" value>195 <input id="submit_search" name="submit_search" type="submit" value="Search">196 </fieldset>197 </form>198 <a>199 Advanced Search200 </a>201 </div>202 <ul class="navigation">203 <li class="nav-browse-items current">204 <a>205 Browse Items206 </a>207 </li>208 <li class="nav-browse-collections">209 <a>210 Browse Collections211 </a>212 </li>213 <li class="nav-browse-exhibits">214 <a>215 Browse Exhibits216 </a>217 </li>218 </ul>219 </div>220 <div class="browse" id="primary">221 <h1>222 Browse Items (4 total)223 </h1>224 <ul class="navigation" id="secondary-nav">225 <li class="nav-browse-all current">226 <a>227 Browse All228 </a>229 </li>230 <li class="nav-browse-by-tag">231 <a>232 Browse by Tag233 </a>234 </li>235 </ul>236 <div class="pagination top">237 </div>238 <div class="item hentry">239 <div class="item-meta">240 <h3>241 <a class="permalink">242 1961 arrest photo for Gloria Bouknight as Freedom Rider243 </a>244 </h3>245 <div class="item-img">246 <a>247 <img alt="1961 arrest photo for Gloria Bouknight as Freedom Rider" height="300" src="rick.jpg" width="300">248 </a>249 </div>250 <div class="item-description">251 This is the 1961 arrest photo for CORE member Gloria Bouknight as a Freedom Rider in Jackson, Mississippi. Originally from the South, she lived in New York after the rides and was roommates with Sheila Michaels.252 </div>253 <div class="tags">254 <p>255 <strong>256 Tags:257 </strong>258 <a rel="tag">259 civil rights movement260 </a>261 ,262 <a rel="tag">263 congress of racial equality264 </a>265 ,266 <a rel="tag">267 CORE268 </a>269 ,270 <a rel="tag">271 freedom riders272 </a>273 ,274 <a rel="tag">275 gloria bouknight276 </a>277 ,278 <a rel="tag">279 non-violent direct action280 </a>281 </p>282 </div>283 </div>284 <!-- end class="item-meta" -->285 </div>286 <!-- end class="item hentry" -->287 <div class="item hentry">288 <div class="item-meta">289 <h3>290 <a class="permalink">291 New York CORE chairman Clarence Funnye with family and Genevieve Hughs292 </a>293 </h3>294 <div class="item-img">295 <a>296 <img alt="New York CORE chairman Clarence Funnye with family and Genevieve Hughs" height="300" src="rick.jpg" width="300">297 </a>298 </div>299 <div class="item-description">300 This is a photo of New York CORE chairman Clarence Funnye in the very early 1960's. He is pictured with his wife, son and Genevieve Hughes, one of the original Freedom Riders.301 <br>302 <br>303 The photo is of a housing demonstration in the Clinton Hill section…304 </div>305 <div class="tags">306 <p>307 <strong>308 Tags:309 </strong>310 <a rel="tag">311 clarence funnye312 </a>313 ,314 <a rel="tag">315 freedom riders316 </a>317 ,318 <a rel="tag">319 harlem core320 </a>321 ,322 <a rel="tag">323 new york city324 </a>325 ,326 <a rel="tag">327 new york core328 </a>329 </p>330 </div>331 </div>332 <!-- end class="item-meta" -->333 </div>334 <!-- end class="item hentry" -->335 <div class="item hentry">336 <div class="item-meta">337 <h3>338 <a class="permalink">339 1961 arrest photo for New York CORE member Travis Britt as Freedom Rider340 </a>341 </h3>342 <div class="item-img">343 <a>344 <img alt="1961 arrest photo for New York CORE member Travis Britt as Freedom Rider" height="300" src="rick.jpg" width="300">345 </a>346 </div>347 <div class="item-description">348 This is the 1961 arrest photo for New York CORE member Travis Britt as a Freedom Rider. He was one of the three principal investigators (along with Joanne Shane, who he was dating at the time) for the Freedom Highways project and participated in the…349 </div>350 <div class="tags">351 <p>352 <strong>353 Tags:354 </strong>355 <a rel="tag">356 arrests357 </a>358 ,359 <a rel="tag">360 civil rights movement361 </a>362 ,363 <a rel="tag">364 congress of racial equality365 </a>366 ,367 <a rel="tag">368 CORE369 </a>370 ,371 <a rel="tag">372 freedom highways373 </a>374 ,375 <a rel="tag">376 freedom riders377 </a>378 ,379 <a rel="tag">380 Freedom Rides381 </a>382 ,383 <a rel="tag">384 harlem core385 </a>386 ,387 <a rel="tag">388 route 40 freedom rides389 </a>390 </p>391 </div>392 </div>393 <!-- end class="item-meta" -->394 </div>395 <!-- end class="item hentry" -->396 <div class="item hentry">397 <div class="item-meta">398 <h3>399 <a class="permalink">400 1961 arrest photo for New York CORE member Mary Hamilton as Freedom Rider401 </a>402 </h3>403 <div class="item-img">404 <a>405 <img alt="1961 arrest photo for New York CORE member Mary Hamilton as Freedom Rider" height="300" src="rick.jpg" width="300">406 </a>407 </div>408 <div class="item-description">409 This is the 1961 arrest photo for New York CORE Mary Hamilton as a Freedom Rider in Jackson, Mississippi. At the time, she was 25 years old.410 <br>411 <br>412 A Black woman, she would joke that she was 'light enough to pass' in her oral history interview when…413 </div>414 <div class="tags">415 <p>416 <strong>417 Tags:418 </strong>419 <a rel="tag">420 arrests421 </a>422 ,423 <a rel="tag">424 congress of racial equality425 </a>426 ,427 <a rel="tag">428 CORE429 </a>430 ,431 <a rel="tag">432 freedom riders433 </a>434 ,435 <a rel="tag">436 Freedom Rides437 </a>438 ,439 <a rel="tag">440 harlem core441 </a>442 ,443 <a rel="tag">444 Mary Hamilton445 </a>446 ,447 <a rel="tag">448 route 40 freedom rides449 </a>450 </p>451 </div>452 </div>453 <!-- end class="item-meta" -->454 </div>455 <!-- end class="item hentry" -->456 <div class="pagination bottom">457 </div>458 </div>459 <!-- end primary -->460 <div id="footer">461 <p>462 Proudly powered by463 <a>464 Omeka465 </a>466 .467 </p>468 <ul class="navigation">469 <li class="nav-home">470 <a>471 Home472 </a>473 </li>474 <li class="nav-browse-items current">475 <a>476 Browse Items477 </a>478 </li>479 <li class="nav-browse-collections">480 <a>481 Browse Collections482 </a>483 </li>484 <li class="nav-browse-exhibits">485 <a>486 Browse Exhibits487 </a>488 </li>489 </ul>490 </div>491 <!-- end footer -->492 </div>493 <!-- end content -->494 </div>495 <!--end wrap-->496 </body>497</html>498