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 <style>5 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {6 margin: 0;7 padding: 0;8 border: 0;9 font-size: 100%;10 font: inherit;11 vertical-align: baseline;12 text-decoration: none;13}14article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {15 display: block;16}17body {18 line-height: 1;19}20ol, ul {21 list-style: none;22}23blockquote, q {24 display: block;25 width: 500px;26 margin: 0 auto;27 text-align: left;28 position: relative;29 font-style: italic;30}31blockquote:before, blockquote:after, q:before, q:after {32 content: '"';33 content: none;34}35input, button {36 -webkit-appearance: none;37 border-radius: 0;38}39table {40 border-collapse: collapse;41 border-spacing: 0;42}43em, i {44 font-style: italic;45}46del {47 text-decoration: line-through;48}49strong, b {50 font-weight: bold;51}52ol {53 width: 600px;54 margin: 0 auto;55 text-align: left;56}57ol li {58 list-style-type: decimal;59}60ul {61 width: 600px;62 margin: 0 auto;63 text-align: left;64}65ul li {66 list-style: disc;67}68a {69 color: inherit;70 text-decoration: underline;71}72body, html {73 min-height: 100%;74 /*height: 100%;*/75}76body {77 background-color: #fff;78 color: #1b1f23;79 font-family: Helvetica Neue, Arial, sans-serif;80}81.wrap {82 width: 605px;83 margin: 100px auto 0;84 text-align: center;85}86.wrap h1 {87 font-size: 30px;88 font-weight: 700;89 margin: 0 0 90px;90}91.wrap h2 {92 font-size: 24px;93 font-weight: 400;94 line-height: 45px;95 margin: 0 0 80px;96}97.wrap h3 {98 font-size: 24px;99 font-weight: 400px;100 margin: 0 0 45px;101}102.wrap .author_link {103 margin-top: 15px;104 color: #616161;105 margin: 0 0 50px;106}107.wrap .author_link a {108 color: #000;109}110/**111 * COUNTDOWN112 **/113 114.wrap .countdown {115 margin: 0 0 85px;116}117.wrap .countdown span {118 font-size: 30px;119}120/**121 * SUBSCRIBE FORM122 **/123 124.wrap form.subscribe_form {125 width: 465px;126 margin: 0 0 75px;127 display: inline-block;128 border: 3px solid #e0e0e0;129 box-sizing: border-box;130}131.wrap form.subscribe_form input {132 margin: 0;133 outline: 0;134 border: 0;135 float: left;136 font-size: 18px;137 padding: 20px 25px;138 box-sizing: content-box;139}140.wrap form.subscribe_form input[type="text"] {141 width: 245px;142}143.wrap form.subscribe_form input[type="submit"] {144 background: #000;145 color: #fff;146 float: right;147 cursor: pointer;148 padding: 20px 30px;149 border-left: 3px solid #e0e0e0;150}151.wrap form.subscribe_form input[type="submit"]:hover {152 background: #fff;153 color: #000;154 border-left: 3px solid #e0e0e0;155}156.wrap form.subscribe_form input[type="submit"]:active {157 background: #1e1e1e;158 color: #fff;159}160.wrap form.subscribe_form .error {161 color: red;162}163.wrap form.subscribe_form label.error {164 display: none !important;165}166/**167 * LOGIN FORM168 **/169 170.wrap form.login_form {171 width: 100%;172 margin: 15px 0 0;173}174.wrap form.login_form input {175 display: inline-block;176 box-sizing: border-box;177 -moz-box-sizing: border-box;178 -webkit-box-sizing: border-box;179 border: 3px solid #E2E2E2;180 font-family: Helvetica Neue, Arial, sans-serif;181 font-size: 16px;182 margin: 0 10px 0 0;183 outline: 0;184 padding: 15px;185}186.wrap form.login_form input[type="submit"] {187 background: #000;188 color: #fff;189 margin: 0;190 border-color: #000;191 font-weight: bold;192 padding: 15px 30px;193 cursor: pointer;194}195.wrap form.login_form input[type="submit"]:active {196 position: relative;197 top: 1px;198}199/**200 * SOCIAL NETWORKS201 **/202 203.wrap .social {204 margin: 0 0 70px;205}206.wrap .social a {207 width: 22px;208 height: 22px;209 margin: 0 0 20px 55px;210 background-image: url('../images/icn_sprite.png');211 background-repeat: no-repeat;212 display: inline-block;213 text-indent: -999em;214}215.wrap .social a:first-of-type {216 margin: 0 0 20px 0;217}218.wrap .social .git {219 background-position: 0 0;220}221.wrap .social .fb {222 background-position: -240px 0;223}224.wrap .social .tw {225 background-position: -162px 0px;226}227.wrap .social .rss {228 background-position: -402px 0;229}230.wrap .social .mail {231 background-position: -560px 0;232}233.wrap .social .pin {234 background-position: -322px 0;235}236.wrap .social .dribbble {237 background-position: -82px 0;238}239.wrap .social .gplus {240 background-position: -486px 0;241}242.wrap .social .linkedin {243 background-position: -633px 0;244}245/**246 * CONTACT FORM247 **/248 249.wrap .contact_us {250 color: #000;251 border: 3px solid #000;252 font-size: 18px;253 padding: 15px 40px;254 display: inline-block;255 margin: 0 0 70px;256}257.wrap .contact_us:hover {258 background: #000;259 color: #fff;260}261.contact_us {262 text-decoration: none;263}264.contact {265 position: fixed;266 display: none;267 top: 0;268 bottom: 0;269 left: 0;270 right: 0;271 background: rgba(27, 31, 35, 0.95);272}273.contact label.error {274 color: red;275 float: left;276 font-size: 11px;277 padding-top: 10px;278}279.contact .form {280 width: 520px;281 text-align: center;282 padding: 40px;283 background: #f9f9f9;284 box-sizing: border-box;285 margin: 100px auto;286 transition: 0.2s transform ease-in-out;287}288.contact .form input, .contact .form textarea {289 padding: 15px 20px;290 margin: 0;291 outline: 0;292 width: 100%;293 background: #f9f9f9;294 border: 3px solid #e0e0e0;295 font-size: 18px;296 font-family: Helvetica Neue, Arial, sans-serif;297 box-sizing: border-box;298 resize: none;299}300.contact .form textarea {301 height: 175px;302 padding: 20px;303}304.contact .form input[type="text"]::-webkit-input-placeholder, .contact .form textarea::-webkit-input-placeholder {305 color: #dadada;306}307.contact .form input[type="text"]::-moz-input-placeholder, .contact .form textarea::-moz-input-placeholder {308 color: #dadada;309}310.contact .form input[type="text"]::-ms-input-placeholder, .contact .form textarea::-ms-input-placeholder {311 color: #dadada;312}313.contact .form .col {314 width: 205px;315 margin: 0 0 30px;316 display: inline-block;317 float: left;318}319.contact .form .col.last {320 float: right;321}322.contact .form .submit {323 margin: 30px 0 0;324 text-align: center;325 clear: left;326}327.contact .form .submit input {328 cursor: pointer;329 display: inline-block;330 background: #1b1f24;331 color: #fff;332 border: 0;333 padding: 20px 45px;334 width: auto;335}336/*======= MOVE ANIMATION =======*/337 338.contact .move_top {339 transform: perspective(1000px) translateY(-200px);340}341.contact .move_bottom {342 transform: perspective(1000px) translateY(0);343}344/*======= ZOOM ANIMATION =======*/345 346.contact .zoom {347 transform: perspective(1000px) scale(0.5);348 transition: 0.3s transform ease-in-out;349}350.contact .zoomed {351 transform: perspective(1000px) scale(1);352}353/*======= FOLD ANIMATION =======*/354 355.contact .fold {356 transform: perspective(1000px) rotateY(90deg);357}358.contact .unfold {359 transform: perspective(1000px) rotateY(0);360}361/**362 * EDITS WHEN HAVE BACKGROUND CLASS363 **/364 365.background {366 background: url('../images/backgrounds/bg1.jpg') no-repeat center top fixed;367 background-size: cover;368}369.background .countdown span {370 color: #fff;371}372.background form.subscribe_form input[type="submit"] {373 color: #000;374 background: #fff;375}376.background form.subscribe_form input[type="text"] {377 background: transparent;378 color: #fff;379}380.background form.subscribe_form input.error[type="text"] {381 color: red;382}383.background form.subscribe_form input[type="text"]::-webkit-input-placeholder {384 color: #fff;385}386.background form.subscribe_form input[type="text"]::-moz-input-placeholder {387 color: #fff;388}389.background form.subscribe_form input[type="text"]::-ms-input-placeholder {390 color: #fff;391}392.background .contact_us {393 color: #fff;394 border-color: #fff;395}396/**397 * MEDIA QUERIES (RESPONSIVE)398 **/399 400@media only screen and (max-width: 700px) {401 .wrap form.login_form {402 width: 80%;403 margin: 15px auto 0;404 }405 .wrap form.login_form input {406 width: 49%;407 margin: 0 2% 0 0;408 }409 .wrap form.login_form input[type="password"] {410 margin: 0;411 }412 .wrap form.login_form input[type="submit"] {413 width: 100%;414 margin: 15px 0 0;415 }416}417@media only screen and (max-width: 550px) {418 .wrap {419 width: 90%;420 margin: 50px auto 0;421 }422 .wrap h1 {423 margin: 0 0 50px;424 }425 .wrap h2, .wrap h3 {426 font-size: 18px;427 }428 .wrap form {429 box-sizing: border-box;430 width: 100%;431 }432 .wrap form input {433 box-sizing: border-box;434 }435 .wrap form input[type="text"], .wrap form input[type="submit"] {436 width: 100%;437 }438 .wrap .contact_us {439 margin: 0 0 50px;440 }441 .contact .form {442 width: 90%;443 }444 .contact .form p.col {445 width: 100%;446 }447 .contact .form input[type="submit"] {448 width: 100%;449 }450 .wrap form.login_form {451 width: 90%;452 }453 .wrap form.login_form input {454 width: 100%;455 margin: 0 0 10px 0;456 }457 .wrap form.login_form input[type="submit"] {458 margin: 10px 0 0;459 }460 ul, ol {461 width: 80%;462 }463 blockquote, q {464 width: 70%;465 }466}467 </style>468 <title>469 H&Iグローバルリサーチ（株）470 </title>471 <meta content="Designmodo" name="author">472 <meta content="MarketsandMarkets日本代理店 - " name="description">473 <meta content="Maintenance Mode" name="keywords">474 <meta content="index, follow" name="robots">475 </head>476 <body class="" style>477 <div class="wrap">478 <h1>479 H&Iグローバルリサーチ（株）480 </h1>481 <h2>482 当サイトはメインテナンス中です。483 <br>484 次のサイトをご利用ください。485 <br>486 <br>487 <a>488 https://www.marketreport.jp/489 </a>490 <br>491 <br>492 <a>493 https://www.globalresearch.co.jp/494 </a>495 </h2>496 </div>497 </body>498</html>499