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 Transitional//EN" "">2<html xmlns="">3 <head>4 <style>5 @font-face {6 font-family: 'Neuton';7 font-style: italic;8 font-weight: 400;9 src: url(https://fonts.gstatic.com/s/neuton/v22/UMBRrPtMoH62xUZCyrg4Wio.ttf) format('truetype');10}11 12 13 14@charset "utf-8";15/* CSS Document */16p {17 color: #000;18}19h1 {20 color: #990033;21}22h2 {23 color: #990033;24}25h3 {26 color: #990033;27}28#content #top {29 width: 980px;30 height: 150px;31 background-color: #FFF;32}33#content #menu {34 height: 50px;35 width: 980px;36 background-color: #990033;37}38#content #picture {39 height: 368px;40 width: 980px;41 background-image: url(image/welcomeimage.jpg);42 background-repeat: no-repeat;43}44#content #line {45 margin: 0;46 padding: 0;47 height: 5px;48 width: 100%;49 background-color: #990033;50}51#content #text {52 height: auto;53 width: 980px;54 background-color: #FFF;55}56#content #footer {57 height: 30px;58 width: 980px;59 background-color: #990033;60}61#content #text {62 background-color: #FFF;63}64#content #text #full {65 float: left;66 width: 840px;67 background-color: #FFF;68 margin: 0px;69 padding-top: 25px;70 padding-right: 20px;71 padding-bottom: 25px;72 padding-left: 70px;73 text-align: justify;74 color: #333333;75}76#content #text #left {77 float: left;78 width: 580px;79 background-color: #FFF;80 margin: 0px;81 padding-top: 25px;82 padding-right: 20px;83 padding-bottom: 25px;84 padding-left: 70px;85 text-align: justify;86 color: #333333;87}88#content #text #right {89 float: right;90 width: 250px;91 background-color: #FFF;92 margin: 0px;93 padding-top: 25px;94 padding-right: 15px;95 padding-bottom: 0px;96 padding-left: 15px;97 height: 100%;98 bottom: 10px;99}100#content .clear {101 clear: both;102}103#content #menu a {104 position:relative;105 float: left;106 color: #FFF;107 margin-right: 13px;108 margin-left: 13px;109 font-size: 20px;110 margin-top: 0px;111 text-decoration: none;112 margin-bottom: 0px;113 line-height: 50px;114 padding-top: 0px;115 padding-right: 30px;116 padding-bottom: 0px;117 padding-left: 30px;118}119#content #menu a:hover {120 background-color: #B3003A;121 border-right-width: 1px;122 border-left-width: 1px;123 border-right-style: solid;124 border-left-style: solid;125 border-right-color: #FFF;126 border-left-color: #FFF;127 margin-right: 12px;128 margin-left: 12px;129}130#content #menu a.active {131 background-color: #B3003A;132 border-right-width: 1px;133 border-left-width: 1px;134 border-right-style: solid;135 border-left-style: solid;136 border-right-color: #FFF;137 border-left-color: #FFF;138 margin-right: 12px;139 margin-left: 12px;140}141#menuback {142 z-index:9;143 position:fixed;144 top:0;145 left:0;146 width:100%;147 height:100%;148 background-color:transparent;149 display:none;150}151#content #menu #menusub {152 display:none;153 position:absolute;154 border:1px solid #FFFFFF;155 z-index:10;156}157#content #menu #menusub a{158 position:relative;159 clear:both;160 margin: 0 0px;161 padding: 0 0px;162 border: 0px none;163 background-color: #990033;164 165}166#content #menu #menusub a:hover {167 background-color: #B3003A;168}169#content #menu #menusub a span{170 display: block;171 padding: 0 20px;172 width:150px;173}174.sel {175 text-decoration: underline;176}177body {178 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;179 color: #990033;180 background-color: #EEE;181 margin: 0;182 padding: 0;183}184#content #picturetherapy {185 height: 368px;186 width: 980px;187 background-image: url(image/therapyimage.jpg);188 background-repeat: no-repeat;189}190#content #pictureabout {191 height: 368px;192 width: 980px;193 background-image: url(image/aboutimage.jpg);194 background-repeat: no-repeat;195}196#content #picturefees {197 height: 368px;198 width: 980px;199 background-image: url(image/feesimage.jpg);200 background-repeat: no-repeat;201}202#content #picturecontact {203 height: 368px;204 width: 980px;205 background-image: url(image/contactimage.jpg);206 background-repeat: no-repeat;207}208#content #pictureissues {209 height: 368px;210 width: 980px;211 background-image: url(image/issuesimage.jpg);212 background-repeat: no-repeat;213}214#content {215 width: 980px;216 margin: 0 auto;217 background-color: #FFF;218 box-shadow: 0px 0px 20px #C8C8C8;219}220#content #menu a div {221 height: 50px;222 width: 100%;223}224#content #text #left p {225 padding-bottom: 20px;226 color: #333333;227}228#content #top #logo {229 background-image: url(image/logo.gif);230 background-repeat: no-repeat;231 height: 120px;232 width: 120px;233 margin: 15px;234 float: left;235}236#content #top #header {237 font-family: 'Neuton', serif;238 height: 120px;239 width: 650px;240 float: left;241 font-size: 20px;242 margin-top: 15px;243 margin-right: 0px;244 margin-bottom: 15px;245 margin-left: 0px;246}247#content #top #header h1 {248 font-size: 29px;249 letter-spacing: 2px;250 margin-top: 7px;251 margin-bottom: 5px;252}253#content #top #header p {254 position: relative;255 font-size: 17px;256 letter-spacing: 4px;257 margin-top: 10px;258 margin-bottom: 5px;259}260#content #top #header p:before {261 position: absolute;262 content: '';263 left: 0;264 right: 0;265 top: -6px;266 height: 1px;267 background-color: #990033;268}269.header_content {270 padding-left: 50px;271 max-width: 470px;272}273 274#content #top #call {275 background-image: url(image/call.gif);276 background-repeat: no-repeat;277 height: 120px;278 width: 280px;279 float: left;280 margin-top: 15px;281 margin-right: 0px;282 margin-bottom: 15px;283 margin-left: 0px;284 float: left;285}286#content #text #right #sidetop {287 height: 300px;288}289#content #text #left p strong {290 color: #990033;291}292#content #text #left ul li {293 color: #990033;294}295#content #text #left ol li {296 color: #990033;297}298#content #text #left ul li span {299 color: #333;300}301#content #text #left ol li span {302 color: #333;303}304#content #text #right p strong span {305 color: #333;306}307#content #text #left table tr td span {308 color: #990033;309}310#content #text #right #sidetop p a {311 color: #000;312 text-decoration: none;313}314#content #text #left table tr td {315 padding-bottom: 0px;316 padding-top: 0px;317 padding-right: 0px;318 padding-left: 0px;319}320#content #text #left table tr td p {321 margin: 0px;322 padding: 0px;323 padding-bottom: 20px;324 font-size: 16px;325}326#content #text #left table tr td p a {327 color: #000;328 text-decoration: none;329}330 </style>331 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">332 <title>333 Dr Emma Ostrovskaya334 </title>335 </head>336 <body>337 <div id="content">338 <div id="line">339 </div>340 <div id="top">341 <div id="header">342 <div class="header_content">343 <h1>344 Dr Emma Ostrovskaya BSc, DCouns345 </h1>346 <p>347 Counselling Psychology & Existential Therapy Adults, Couples &348 Children349 </p>350 </div>351 </div>352 <div id="call">353 </div>354 </div>355 <div id="menu">356 <a>357 <span>358 Welcome359 </span>360 </a>361 <a>362 <span>363 Therapy364 </span>365 </a>366 <div id="menusub" style="left: 339.203px; top: 205px;">367 <a>368 <span>369 Existential370 </span>371 </a>372 <a>373 <span>374 Focusing375 </span>376 </a>377 <a>378 <span>379 Trauma Work380 </span>381 </a>382 <a>383 <span>384 Mindfulness385 </span>386 </a>387 </div>388 <a>389 <span>390 About Emma391 </span>392 </a>393 <a>394 <span class="sel">395 Issues396 </span>397 </a>398 <a>399 <span>400 Fees401 </span>402 </a>403 <a>404 <span>405 Contact406 </span>407 </a>408 </div>409 <div id="pictureissues">410 </div>411 <div id="line">412 </div>413 <div id="text">414 <div id="left">415 <h2>416 Issues417 </h2>418 <p>419 I work with the variety of conditions long-standing and recently420 onset.421 <br>422 Areas of counselling I work with:423 </p>424 <ul>425 <li>426 <span>427 Abuse428 </span>429 </li>430 <li>431 <span>432 Addiction433 </span>434 </li>435 <li>436 <span>437 Anger Management438 </span>439 </li>440 <li>441 <span>442 Anxiety443 </span>444 </li>445 </ul>446 <p>447 Often several issues will be present at the same time. At the initial448 consultation we will explore the current issues and your personal449 background, and will establish the focus of the therapy.450 </p>451 </div>452 <div id="right">453 <div id="sidetop">454 <h2>455 Contact456 </h2>457 <p>458 Tel:459 <br>460 <span>461 [PHONE REDACTED]462 </span>463 </p>464 <p>465 Email:466 <br>467 <a>468 [EMAIL REDACTED]469 <br>470 @gmail.com471 </a>472 </p>473 </div>474 </div>475 </div>476 <div class="clear">477 </div>478 <div id="footer">479 </div>480 </div>481 </body>482</html>483