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 xmlns="">3 <head>4 <style>5 @charset "utf-8";6/* CSS Document */7 8 9 10html, body {11 height: 100%;12}13 14body {15 margin: 0;16 padding: 0;17 line-height: 1.5em;18 font-family: Tahoma, Geneva, sans-serif;19 font-size: 14px;20 color: #333;21 background: #ffffff;22}23 24a:link, a:visited { color: #0066CC; text-decoration: underline; font-weight: normal; } 25a:active, a:hover { color: #009900; text-decoration: none; }26 27p {28 margin: 0px;29 padding: 0 20px 0 0;30 text-align: justify;31}32 33 34 35.fl { float: left; }36.fr { float: right }37 38#header_wrapper {39 width: 100%;40 height: 125px;41 margin: 0 auto;42}43 44#header {45 width: 900px;46 padding-left:50px;47 height: 172px;48 padding: 0 10px;49 margin: 0 auto;50}51 52#content_wrapper {53 clear: both;54 width: 100%;55 height: 20px;56 margin: 0 auto;57}58 59#content {60 width: 900px;61 margin: 0 auto;62 padding: 40px 0px 20px 0;63}64 65.section_w180 {66 width: 200px;67}68 69.section_w260 {70 width: 235px;71}72 73.section_w600 {74 width: 700px;75}76 77 78wrapper {79 min-height: 100%;80 clear: both;81 margin: 0 auto -4em;82}83 84 85#footer_wrapper {86 min-height: 100%;87 clear: both;88 width: 100%;89 margin: 0 auto;90}91 92#footer {93 width: 900px;94 height: 10px;95 padding: 5px 10px 0 10px;96 margin: 0 auto;97 text-align: center;98 color: #ffffff;99}100 101.path {102 height: 4em;103}104 105 106 107@charset "UTF-8";108 109/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */110 111/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */112 113/*******************************************************************************114 115 LAYOUT INFORMATION: describes box model, positioning, z-order116 117 *******************************************************************************/118 119/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */120ul.MenuBarVertical121{122 margin: 0;123 padding: 0;124 list-style-type: none;125 font-size: 100%;126 cursor: default;127 width: 12em;128}129/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */130ul.MenuBarActive131{132 z-index: 1000;133}134/* Menu item containers, position children relative to this container and are same fixed width as parent */135ul.MenuBarVertical li136{137 margin: 0;138 padding: 0;139 list-style-type: none;140 font-size: 100%;141 position: relative;142 text-align: left;143 cursor: pointer;144 width: 12em;145}146/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */147ul.MenuBarVertical ul148{149 margin: -5% 0 0 95%;150 padding: 0;151 list-style-type: none;152 font-size: 100%;153 position: absolute;154 z-index: 1020;155 cursor: default;156 width: 12.2em;157 left: -1000em;158 top: 0;159}160/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */161ul.MenuBarVertical ul.MenuBarSubmenuVisible162{163 left: 0;164}165/* Menu item containers are same fixed width as parent */166ul.MenuBarVertical ul li167{168 width: 12.2em;169}170 171/*******************************************************************************172 173 DESIGN INFORMATION: describes color scheme, borders, fonts174 175 *******************************************************************************/176 177/* Outermost menu container has borders on all sides */178ul.MenuBarVertical179{180 border: 1px solid #CCC;181}182/* Submenu containers have borders on all sides */183ul.MenuBarVertical ul184{185 border: 1px solid #CCC;186}187/* Menu items are a light gray block with padding and no text decoration */188ul.MenuBarVertical a189{190 display: block;191 cursor: pointer;192 background-color: #EEE;193 padding: 0.5em 0.75em;194 /*color: #333;*/195 text-decoration: none;196}197/* Menu items that have mouse over or focus have a blue background and white text */198ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus199{200 /*background-color: #33C;201 color: #FFF;*/202}203/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */204ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible205{206 /*background-color: #33C;207 color: #FFF;*/208}209 210/*******************************************************************************211 212 SUBMENU INDICATION: styles if there is a submenu under a given menu item213 214 *******************************************************************************/215 216/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */217ul.MenuBarVertical a.MenuBarItemSubmenu218{219 background-image: url(SpryMenuBarRight.gif);220 background-repeat: no-repeat;221 background-position: 95% 50%;222}223 224/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */225ul.MenuBarVertical a.MenuBarItemSubmenuHover226{227 background-image: url(SpryMenuBarRightHover.gif);228 background-repeat: no-repeat;229 background-position: 95% 50%;230}231 232/*******************************************************************************233 234 BROWSER HACKS: the hacks below should not be changed unless you are an expert235 236 *******************************************************************************/237 238/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */239ul.MenuBarVertical iframe240{241 position: absolute;242 z-index: 1010;243 filter:alpha(opacity:0.1);244}245/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */246@media screen, projection247{248 ul.MenuBarVertical li.MenuBarItemIE249 {250 display: inline;251 float: left;252 background: #FFF;253 }254}255 </style>256 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">257 <meta content="differential, designs, differential designs, net, differential designs net, web solutions, local businesses, web, solutions, local, businesses, virginia, newport news, hampton roads, newport, news, hampton, roads, web designs, Luis Mercado, [EMAIL REDACTED]" name="keywords">258 <meta content name="description">259 <title>260 Differential Designs - Web Solutions for Local Businesses261 </title>262 </head>263 <body>264 <div id="wrapper">265 <div id="content">266 <table width="100%">267 <tbody>268 <tr>269 <td>270 <img height="37" src="rick.jpg" width="557">271 <br>272 273 274Web Solutions for Local Businesses275 </td>276 <td align="left" width="150">277 <img src="rick.jpg" width="110">278 </td>279 <td align="right">280 Luis R. Mercado281 <br>282 <a>283 [EMAIL REDACTED]284 </a>285 </td>286 </tr>287 </tbody>288 </table>289 </div>290 <center>291 <img height="75" src="rick.jpg" width="900">292 </center>293 </div>294 <div id="content" style="height:2000px">295 <div class="section_w180 fl">296 <ul class="MenuBarVertical" id="MenuBar1">297 <li>298 <a>299 Home300 </a>301 </li>302 <li>303 <a>304 Services and Rates305 </a>306 </li>307 <li>308 <a class="MenuBarItemSubmenu">309 Past Projects310 </a>311 <ul>312 <li>313 <a class="MenuBarItemSubmenu">314 Websites315 </a>316 <ul>317 <li>318 <a>319 ECPL320 </a>321 </li>322 <li>323 <a>324 Red Rock Lounge325 </a>326 </li>327 </ul>328 </li>329 <li>330 <a>331 Database Management332 </a>333 </li>334 <li>335 <a>336 Simulations337 </a>338 </li>339 </ul>340 </li>341 <li>342 <a>343 About Us344 </a>345 </li>346 </ul>347 <br>348 </div>349 <div class="section_w600 fr">350 <h1>351 Past Projects352 </h1>353 <table border="0" cellpadding="15px">354 <tbody>355 <tr>356 <td>357 <p>358 <strong>359 Action Issues360 </strong>361 <font size="-2">362 (launched Mar. 17, 2012)363 </font>364 Action Issues will provide information about the issues that are most important to Americans.365 </p>366 </td>367 <td>368 <a target="_new">369 <img border="1" src="rick.jpg" width="302">370 </a>371 </td>372 </tr>373 <tr>374 <td>375 <p>376 <strong>377 HAPPEX Collaboration378 </strong>379 <font size="-2">380 (launched Mar. 8, 2012)381 </font>382 My dissertation work was in the field of particle physics.383 </p>384 </td>385 <td>386 <a target="_new">387 <img border="1" src="rick.jpg" width="302">388 </a>389 </td>390 </tr>391 <tr>392 <td>393 <p>394 <strong>395 East Coast Poker League, Inc.396 </strong>397 <font size="-2">398 (latest version launched Jan. 2, 2012)399 </font>400 For the new year, we wanted to create an update that would make the interface as user friendly as possible.401 </p>402 </td>403 <td>404 <a target="_new">405 <img border="1" src="rick.jpg" width="302">406 </a>407 </td>408 </tr>409 <tr>410 <td>411 <p>412 <strong>413 Somos Amigos414 </strong>415 <font size="-2">416 (launched July 29, 2011)417 </font>418 This website was created within 24 hours for a Spanish instructor in Amherst, MA.419 </p>420 </td>421 <td align="center">422 <a target="_new">423 <img border="1" height="159" src="rick.jpg" width="302">424 </a>425 </td>426 </tr>427 </tbody>428 </table>429 </div>430 </div>431 <div class="footer">432 <hr>433 <center>434 <span>435 <a>436 Home437 </a>438 |439 <a>440 Services441 </a>442 |443 <a>444 Past Projects445 </a>446 |447 <a>448 About Us449 </a>450 </span>451 <br>452 Copyright © 2013 Differential Designs, Net453 </center>454 <hr>455 <hr>456 </div>457 </body>458</html>459