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 lang="en">3 <head>4 <meta charset="utf-8">5 <meta content="width=device-width, initial-scale=1.0" name="viewport">6 <meta content="ie=edge" http-equiv="X-UA-Compatible">7 <title>8 Marc&Andre9 </title>10 </head>11 <body>12 <style>13 14@font-face {15 font-family: 'Museo Sans Cyrl';16 src: url('../fonts/MuseoSansCyrl-500.woff2') format('woff2'),17 url('../fonts/MuseoSansCyrl-500.woff') format('woff');18 font-weight: normal;19 font-style: normal;20 font-display: swap;21}22 23@font-face {24 font-family: 'Museo Sans Cyrl';25 src: url('../fonts/MuseoSansCyrl-300.woff2') format('woff2'),26 url('../fonts/MuseoSansCyrl-300.woff') format('woff');27 font-weight: 300;28 font-style: normal;29 font-display: swap;30}31 32/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}33 34*,35*::before,36*::after {37 -webkit-box-sizing: border-box;38 -moz-box-sizing: border-box;39 box-sizing: border-box;40}41 42html {43 width: 100%;44 height: 100%;45 font-size: 10px;46}47 48body {49 width: 100%;50 min-width: 320px;51 height: 100%;52 font-family: Roboto, Arial, sans-serif;53 font-weight: 400;54 font-size: 2rem;55 line-height: 1.2;56 letter-spacing: 0.127em;57 color: #fff;58 background: #000;59}60 61@media (min-width: 641px) and (max-width: 1240px) {62 body {63 font-size: 1.6rem;64 }65}66 67@media (max-width: 640px) {68 body {69 font-size: 1.4rem;70 }71}72 73.world-swimwear-lingerie {74 display: -webkit-box;75 display: -webkit-flex;76 display: -moz-box;77 display: -ms-flexbox;78 display: flex;79 -webkit-box-pack: end;80 -webkit-justify-content: flex-end;81 -moz-box-pack: end;82 -ms-flex-pack: end;83 justify-content: flex-end;84 -webkit-box-align: start;85 -webkit-align-items: flex-start;86 -moz-box-align: start;87 -ms-flex-align: start;88 align-items: flex-start;89 height: 100%;90 text-align: center;91 background: #000 no-repeat center top;92 -moz-background-size: cover;93 background-size: cover;94}95 96.world-swimwear-lingerie__container {97 display: -webkit-box;98 display: -webkit-flex;99 display: -moz-box;100 display: -ms-flexbox;101 display: flex;102 -webkit-box-pack: start;103 -webkit-justify-content: flex-start;104 -moz-box-pack: start;105 -ms-flex-pack: start;106 justify-content: flex-start;107 -webkit-box-align: center;108 -webkit-align-items: center;109 -moz-box-align: center;110 -ms-flex-align: center;111 align-items: center;112 padding: 25px;113 width: 45.8%;114 height: 100%;115 overflow: auto;116}117 118@media (max-width: 768px), (max-aspect-ratio: 1.099) {119 .world-swimwear-lingerie__container {120 -webkit-box-pack: center;121 -webkit-justify-content: center;122 -moz-box-pack: center;123 -ms-flex-pack: center;124 justify-content: center;125 -webkit-box-align: center;126 -webkit-align-items: center;127 -moz-box-align: center;128 -ms-flex-align: center;129 align-items: center;130 width: 100%;131 }132}133 134@media (min-width: 769px) and (orientation: landscape) and (min-aspect-ratio: 1.3) {135 .world-swimwear-lingerie__container {136 width: 45.8%;137 }138}139 140@media (min-width: 769px) and (orientation: landscape) and (min-aspect-ratio: 1.3) and (max-aspect-ratio: 1.8) {141 .world-swimwear-lingerie__container {142 min-width: 480px;143 }144}145 146.world-swimwear-lingerie__content {147 max-width: 100%;148}149 150@media (min-width: 769px) and (orientation: landscape) and (max-aspect-ratio: 1.6) {151 .world-swimwear-lingerie__content {152 margin-bottom: -webkit-calc(100vh * 150 / 720);153 margin-bottom: -moz-calc(100vh * 150 / 720);154 margin-bottom: calc(100vh * 150 / 720);155 }156}157 158@media (min-width: 769px) and (orientation: landscape) and (min-aspect-ratio: 1.60001) {159 .world-swimwear-lingerie__content {160 margin-bottom: -webkit-calc((100vh * 150 / 720) - (720 * (100vw / 1280) - 100vh));161 margin-bottom: -moz-calc((100vh * 150 / 720) - (720 * (100vw / 1280) - 100vh));162 margin-bottom: calc((100vh * 150 / 720) - (720 * (100vw / 1280) - 100vh));163 }164}165 166@media (max-width: 768px), (max-aspect-ratio: 1.099) {167 .world-swimwear-lingerie__content {168 margin-bottom: 0;169 }170}171 172.world-swimwear-lingerie__title {173 position: relative;174 margin: 0;175 padding: 0 0 17px;176 font-style: normal;177 font-size: 2.2rem;178 font-weight: 400;179 letter-spacing: 0.127em;180 text-transform: uppercase;181 text-align: center;182}183 184@media (min-width: 641px) and (orientation: portrait) {185 .world-swimwear-lingerie__title {186 font-size: 3rem;187 }188}189 190@media (min-width: 769px) and (max-width: 1240px) and (orientation: landscape) and (max-aspect-ratio: 1.8) {191 .world-swimwear-lingerie__title {192 font-size: 3rem;193 }194}195 196@media (min-width: 1241px) and (orientation: landscape) {197 .world-swimwear-lingerie__title {198 font-size: 3.8rem;199 color: #ffffff;200 text-shadow: 1px 2px black;201 }202}203 204@media (max-width: 640px), (orientation: portrait) {205 .world-swimwear-lingerie__title br {206 display: none;207 }208}209 210.world-swimwear-lingerie__title::after {211 content: "";212 position: absolute;213 bottom: 0;214 left: 50%;215 margin-left: -43px;216 width: 86px;217 height: 1.5px;218 background: #bb9a66;219}220 221.world-swimwear-lingerie__subtitle {222 margin: 1.1em 0 1.75em;223 font-family: 'Museo Sans Cyrl', Roboto, Arial, sans-serif;224 color: #ffffff;225 text-shadow: 1px 2px black;226}227 228@media (min-width: 641px), (orientation: landscape) {229 .world-swimwear-lingerie__subtitle br {230 display: none;231 }232}233 234@media (max-width: 640px), (orientation: portrait) {235 .world-swimwear-lingerie__subtitle {236 margin-bottom: 6em;237 }238}239 240.world-swimwear-lingerie__btn {241 display: inline-block;242 vertical-align: middle;243 border: 0;244 outline: none;245 width: 293px;246 max-width: 100%;247 height: 53px;248 font: inherit;249 font-family: 'Museo Sans Cyrl', Roboto, Arial, sans-serif;250 line-height: 53px;251 text-decoration: none;252 text-align: center;253 text-transform: uppercase;254 color: #fff;255 background: #C3A471;256 -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);257 -moz-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);258 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);259 cursor: pointer;260 -webkit-transition: all 0.25s ease;261 -o-transition: all 0.25s ease;262 -moz-transition: all 0.25s ease;263 transition: all 0.25s ease;264}265 266@media (max-width: 640px), (orientation: portrait) {267 .world-swimwear-lingerie__btn {268 width: 182px;269 height: 44px;270 line-height: 44px;271 }272}273 274@media (max-width: 1240px) and (orientation: landscape) {275 .world-swimwear-lingerie__btn {276 width: 182px;277 height: 44px;278 line-height: 44px;279 }280}281 282.world-swimwear-lingerie__btn:hover {283 -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);284 -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);285 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);286}287 288.world-swimwear-lingerie__btn:active,289.world-swimwear-lingerie__btn:focus {290 outline: none;291 -webkit-box-shadow: none;292 -moz-box-shadow: none;293 box-shadow: none;294}295 296 297 298 .world-swimwear-lingerie {299 background-image: url(/dive/images/bg2.jpg);300 }301 @media(max-width: 428px) {302 .world-swimwear-lingerie {303 background-image: url(/dive/images/bg-small2.jpg);304 }305 }306 </style>307 <div class="world-swimwear-lingerie">308 <div class="world-swimwear-lingerie__container">309 <div class="world-swimwear-lingerie__content">310 <h1 class="world-swimwear-lingerie__title">311 DISCOVER A312 <br>313 FASCINATING WORLD OF314 <br>315 MARC & ANDRÉ316 <br>317 sWIMWEAR & LINGERIE!318 </h1>319 <div class="world-swimwear-lingerie__subtitle">320 take a deep breath321 <br>322 and…323 </div>324 <div class="world-swimwear-lingerie__button">325 <a class="world-swimwear-lingerie__btn">326 Dive327 </a>328 </div>329 </div>330 </div>331 </div>332 </body>333</html>334