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>2<html>3 <head>4 <style>5 </style>6 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">7 <meta content="width=device-width, initial-scale=1.0" name="viewport">8 <title>9 Grumpy Website10 </title>11 <style type="text/css">12 * { box-sizing: border-box; }13 14:root {15 --body-bg: #FFF;16 --body-fg: #000;17}18 19body {20 background-color: var(--body-bg);21 font-family: sans-serif;22 line-height: 140%;23 padding: 0.25em 1em;24 max-width: 652px; /* .post_img =>> 550px */25 margin: 0 auto;26 transition: transform 500ms ease-in-out;27}28 29.icon_rotate { width: 20px; height: 20px; display: inline-block; background: url("/static/rotate.svg"); margin: 5px 5px -5px -25px; } 30@media (max-width: 679px) {31 .icon_rotate { display: none; }32}33 34/* HEADER */35 36header { margin-bottom: 2em; display: flex; flex-direction: column; }37 38.title { margin-bottom: 10px; }39.title_back { position: absolute; margin-left: -1em; text-decoration: none; }40.title_back:hover { text-decoration: underline; }41 42body.anonymous #menu_page_new,43body.anonymous #menu_page_edit,44body.anonymous #menu_page_stats { display: none; }45 46.subtitle { margin: 0 0 10px 0.09em;47 -webkit-touch-callout: none;48 -webkit-user-select: none;49 -khtml-user-select: none;50 -moz-user-select: none;51 -ms-user-select: none;52 user-select: none; }53.subtitle > span { cursor: pointer; }54 55.menu { display: flex; border-bottom: 1px solid currentColor; gap: 1em; }56.menu > span, .menu > a { padding: 0.5em 0; display: block; }57.menu > .selected { padding-left: 1em; padding-right: 1em; border-top: 1px solid var(--body-fg); border-left: 1px solid var(--body-fg); border-right: 1px solid var(--body-fg); background: var(--body-bg); position: relative; top: 1px; }58.menu > .selected > span { position: relative; top: -1px; }59@media (max-width: 679px) {60 .wide { display: none; }61}62 63/* PAGE */64 65.page { margin-bottom: 2em; }66 67/* POST */68 69.post { display: flex; justify-content: flex-start; margin-bottom: 2em; }70.post_side { margin-right: 20px; min-width: 50px; }71@media (max-width: 399px) {72 .post_side { display: none; }73}74.post_avatar { width: 50px; height: 50px; }75 76.post_video_outer { position: relative; max-width: max-content; }77.post_img, .post_video { display: block; position: relative; }78.post_img, .post_video_outer { margin-bottom: 1em; }79.post_img-fix { display: block; background-size: 100%; }80.post_img-fix > img { position: absolute; height: 100%; }81.post_video,82.post_img-flex > img { display: block; max-width: 100%; height: auto; max-height: 500px; }83.post_img > img, .post_video_outer { border: 1px solid #eee; }84 85.post_author { font-weight: bold; }86.post_content { width: 100%; }87.post_body > p { margin: 0 0 1em 0; }88 89.post_meta_edit { float: right; color: #c3c; }90.post_meta_edit:hover { color: #d4d; }91body.anonymous .post_meta_edit { display: none; }92 93.controls { display: flex; justify-content: space-between; background-color: #eee; }94.controls > button { width: 24px; height: 24px; background-image: url(/static/controls.svg); border: none; background-color: transparent; cursor: pointer; }95button.paused { background-position: 0 0; }96button.paused:hover { background-position: -100% 0; }97button.playing { background-position: 0 -100%; }98button.playing:hover { background-position: -100% -100%; }99button.fullscreen { background-position: 0 -200%; }100button.fullscreen:hover { background-position: -100% -200%; }101 102@media (prefers-color-scheme: dark) {103 .post_img > img, .post_video_outer { border-color: #333; }104 .controls { background-color: #333; }105 106 button.paused { background-position: -200% 0; }107 button.paused:hover { background-position: -300% 0; }108 button.playing { background-position: -200% -100%; }109 button.playing:hover { background-position: -300% -100%; }110 button.fullscreen { background-position: -200% -200%; }111 button.fullscreen:hover { background-position: -300% -200%; }112}113 114/* PAGES */115 116.pages { display: flex; justify-content: flex-start; border-top: 1px solid currentColor; padding: 0.5em 0; }117.pages_title { width: 70px; padding: 0.5em 0; }118.pages_inner { width: 100%; display: flex; flex-wrap: wrap; }119.pages a, .pages span { text-align: center; padding: 0.5em 0.5em; }120.pages span.selected { font-weight: bold; }121 122@media (max-width: 679px) {123 .pages_title { display: none; }124 .pages a, .pages span { padding: 0.5em 0.25em; }125}126 127/* SEARCH */128 129form.search { margin: 0 0 2em 0; }130form.search > span { margin-right: 0; width: 70px; }131.search-results em { font-style: normal; background-color: #F4E3B4; padding: 0 1px; margin: 0 -1px; }132.no-results { margin: 2em 0 2em 70px; }133 134@media (prefers-color-scheme: dark) {135 .search-results em { background-color: #F7941F; }136}137 138/* FOOTER */139@keyframes rotating {140 from { transform: rotate(0deg); }141 to { transform: rotate(360deg); }142}143 144footer {145 padding: 1em 0 1em;146 border-top: 1px solid currentColor;147}148 149 150/* CSS Framework */151 152.relative { position: relative; }153 154.row { display: flex; }155.row > * { margin-right: 20px; }156.row > *:last-child { margin-right: 0; }157.row.left { justify-content: flex-start; }158.row.center { justify-content: center; }159.row.right { justify-content: flex-end; }160.row.top { align-items: flex-start; }161.row.middle { align-items: center; }162.row.bottom { align-items: flex-end; }163 164.column { display: flex; flex-direction: column; }165.column > * { margin-bottom: 20px; }166.column > *:last-child { margin-bottom: 0; }167.column.top { justify-content: flex-start; }168.column.middle { justify-content: center; }169.column.bottom { justify-content: flex-end; }170.column.left { align-items: flex-start; }171.column.center { align-items: center; }172.column.right { align-items: flex-end; }173 174.grow { flex: 1; }175.space-between { justify-content: space-between; }176button, .no-select { user-select: none; -webkit-user-select: none; }177.cursor-pointer { cursor: pointer; }178.cursor-default { cursor: default; }179 180.no-display { display: none; }181 182.stick-left { position: absolute; left: 0; }183.stick-right { position: absolute; right: 0; }184.stick-top { position: absolute; top: 0; }185.stick-bottom { position: absolute; bottom: 0; }186 187@media (prefers-color-scheme: dark) {188 :root {189 --body-bg: #2b2c2d;190 --body-fg: #FFF;191 }192 193 body { color: #FFF; }194 a { color: #8FC4EC; }195 a:visited { color: #BC84BC; }196 .title_new, .post_meta_edit { color: #e9e; }197 .icon_rotate { background-image: url("/static/rotate_dark.svg"); }198} 199 200/* FORMS */201 202textarea,203input[type=text], 204input[type=search], 205button { font: inherit; outline: none; }206 207.input { height: 36px; }208.input { position: relative; border: 0px solid #d5d1c9; }209.input:before { border-top: 1px solid #808080; border-right: 1px solid #D5D1C9; border-bottom: 1px solid #E5E1D9; border-left: 1px solid #808080; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }210.input:after { border-top: 1px solid #3d3d3d; border-right: 1px solid #D5D1C9; border-bottom: 1px solid #E5E1D9; border-left: 1px solid #3d3d3d; content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; z-index: 1; background: #FFF; }211.input.disabled:after { background: #f5f5f0; }212.input > textarea,213.input > input[type=text],214.input > input[type=search] { min-width: 100px; padding: 6px 6px 4px; background: transparent; border: none; height: 100%; width: 100%; margin: 0; position: absolute; z-index: 2; }215 216button { border: none; padding: 0; }217 218.btn { height: 36px; padding: 1px 30px 0; background: #D5D1C9; color: black; position: relative; border: 1px solid #000; }219.btn:before { border-top: 1px solid #FFF; border-left: 1px solid #FFF; border-right: 1px solid #3d3d3d; border-bottom: 1px solid #3d3d3d; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }220.btn:after { border-top: 1px solid #D5D1C9; border-left: 1px solid #D5D1C9; border-right: 1px solid #808080; border-bottom: 1px solid #808080; content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; }221.btn:not([disabled]):active { padding: 7px 29px 4px 31px; }222.btn:not([disabled]):active:before, .btn:not([disabled]):active:after { border: none; }223 224.btn[disabled] { color: #808080; text-shadow: 1px 1px 0 #FFF; border-color: #FFF; }225 226button.inline { background: none; color: #00F; border-bottom: 1px dotted #00F; cursor: pointer; }227button.inline:active { position: relative; top: 1px; }228 </style>229 </head>230 <body class="anonymous">231 <header>232 <h1 class="title">233 <a>234 Grumpy Website235 </a>236 </h1>237 <p class="subtitle">238 <span class="icon_rotate" onclick="body_rotate()">239 </span>240 <span class="subtitle-text">241 Would you like to save this file?242 </span>243 </p>244 <div class="menu">245 <a class="no-select selected" id="menu_page_index">246 <span>247 Home248 </span>249 </a>250 <a class="no-select" id="menu_page_search">251 <span>252 Search253 </span>254 </a>255 <a class="no-select" id="menu_page_subscribe">256 <span>257 Subscribe258 </span>259 </a>260 <a class="no-select" id="menu_page_suggest">261 <span>262 Suggest263 </span>264 </a>265 <a class="no-select" id="menu_page_about">266 <span>267 About268 </span>269 </a>270 <a class="no-select" id="menu_page_new">271 <span>272 +273 </span>274 </a>275 <a class="no-select" id="menu_page_stats">276 <span>277 Stats278 </span>279 </a>280 </div>281 </header>282 <div class="post" data-id="195">283 <div class="post_side">284 <img class="post_avatar" src="rick.jpg">285 </div>286 <div class="post_content">287 <a class="post_img post_img-flex" target="_blank">288 <img src="rick.jpg">289 </a>290 <div class="post_body">291 <p>292 <span class="post_author">293 nikitonsky:294 </span>295 organising stuff is a burden.296 </p>297 <p>298 In the case above I wanted to add a place to the bookmarks so it’ll be easier to find. But instead of just marking it with a small heart icon, app asks me if I want to create a new collection.299 </p>300 <p>301 So I roll with it and now I have to invent a name! What name should I choose?302 </p>303 <p>304 It’s not all that bad though. There were times when they asked you to create an account before you can create any marks.305 </p>306 </div>307 <p class="post_meta">308 December 27, 2017 //309 <a>310 Permalink311 </a>312 <a class="post_meta_edit">313 Edit314 </a>315 </p>316 </div>317 </div>318 <footer>319 <a>320 Nikita Prokopov321 </a>322 ,323 <a>324 Dmitrii Dimandt325 </a>326 ,327 <a>328 Rakhim Davletkaliyev329 </a>330 & contributors.331 </footer>332 </body>333</html>334