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 img {6 height: 200px;7}8 9img#pic {10 float: right; 11 margin: 25px; 12 height: 276px13}14 15.tools-and-languages {16 column-count: 4;17}18 19.date {20 text-align: right;21}22 23.entry {24 padding-left: 6px;25 padding-right: 3px;26}27 28hr {29 margin-top: 50px;30 margin-bottom: 50px;31 margin-left: 10%;32 margin-right: 10%;33}34 35body {36 font-family: "serif";37 font-size: larger;38 background-color: #f7f7f8;39}40 41.content-interior {42 text-align: center;43}44 45.content-header {46 font-family: sans-serif;47 font-weight: 700;48}49 50.content-subheader {51 font-style: italic;52 padding-left: 20px;53}54 55pre {56 border: 4px dashed gray;57 padding: 10px 5px 10px 10px;58 font-size: 10pt;59 overflow-x: auto;60 overflow-y: auto;61 max-height: 400px;62}63 64.content-body {65 line-height: 1.2em;66}67 68.quote {69 padding-left: 5%;70 padding-right: 5%;71 margin-bottom: 0.5em;72 font-size: 12px;73}74 75.prime {76 margin-left: auto;77 margin-right: auto;78 margin-top: 20px;79 border: double gray;80 max-width: 690px;81 min-width: 300px;82 background-color: white;83}84 85li.menu_item {86 list-style-type:none;87 margin:0;88 padding-left:10px;89 padding-right:10px;90 display: inline;91 font: 16px monospace;92 text-align: center;93}94 95ul.navmenu {96 display: block;97 text-align: center;98 padding: 0px;99}100 101li.menu_item a{102 text-decoration: none;103}104 105li.menu_item a:hover{106 text-decoration: underline;107}108 109.secondary {110 margin: 10px;111}112 113.content_interior {114 margin-left: 3%;115 margin-right: 3%;116}117 118.content {119 margin: 0.5%;120 border: 1px solid grey;121}122 123a {124 color: inherit;125}126 127h2 {128 margin-bottom: 0;129}130 131a:visited {132 color: grey;133}134 135div.banner h2.titleheader a {136 color: inherit;137 text-decoration: none;138}139 140div.banner h2.titleheader a:visited {141 color: inherit;142 text-decoration: none;143}144 145.hideable {146 display: initial;147}148 149.hideable.hide {150 display: none;151}152 153.nesting_1 {154 position: relative;155 left: 20px;156}157 158@media screen and (max-width: 500px) {159 160 body {161 margin: 0;162 }163 164 .prime {165 margin-top: 0;166 border: none;167 }168 169 .secondary {170 margin: 0;171 }172 173 img#pic {174 height: 100px;175 }176 177 178 .tools-and-languages {179 column-count: 2;180 }181}182 183 @media print {184 185 input, label {186 display: none;187 }188 189 p, .company {190 break-inside: avoid-page; 191 }192 193 body {194 margin: 0;195 font-family: "serif";196 font-size: smaller;197 background-color: initial;198 }199 200 pre {201 border: none;202 padding: 0;203 font-size: inherit;204 overflow-x: inherit;205 overflow-y: inherit;206 max-height: initial;207 }208 209 .prime {210 margin-left: 0;211 margin-right:0;212 margin-top: 0;213 border: none;214 max-width: initial;215 min-width: initial;216 background-color: initial;217 }218 219 .secondary {220 margin: 0;221 }222 223 .content.banner, .content.nav {224 display: none;225 }226 227 .content-body {228 line-height: initial;229 }230 231 .content {232 margin: 0;233 border: none;234 }235 }236 </style>237 <title>238 Renomad239 </title>240 <meta content="width=device-width, initial-scale=1" name="viewport">241 <meta charset="utf-8">242 </head>243 <body>244 <div class="prime">245 <div class="secondary">246 <div class="content banner">247 <div class="content_interior">248 <h2 class="titleheader">249 <a>250 Renomad251 </a>252 </h2>253 </div>254 </div>255 <div class="content nav">256 <div class="content_interior">257 <nav>258 <ul class="navmenu">259 <li class="menu_item">260 <a class="typ_link">261 Blog262 </a>263 </li>264 <li class="menu_item">265 <a class="typ_link">266 Play267 </a>268 </li>269 <li class="menu_item">270 <a class="typ_link">271 Work272 </a>273 </li>274 <li class="menu_item">275 <a class="typ_link">276 Favorite posts277 </a>278 </li>279 </ul>280 </nav>281 </div>282 </div>283 <div class="content">284 <div class="content_interior">285 <!-- content goes here. this is the end of the header -->286 <div class="entry">287 <p class="content-header">288 A simple one-liner to create strong passwords.289 </p>290 <div class="date">291 June 7, 2017292 </div>293 <pre class="language-bash">tr -cd [:graph:] < /dev/urandom | fold -w75 | sed 's/[&<>"'']/l/g' | head -n10294</pre>295 <p class="content-body">296 </p>297 <pre>explanation:298 the first part, from "tr" to "unrandom", takes the random binary299 input from unrandom and deletes all input except the ascii300 characters that are printable (which comes from using the :graph:301 command).302 303 fold -w30304 Then we chop that down to just 75 characters, nearly filling a305 whole line.306 307 sed 's/ ...308 here we remove certain characters we don't want. Specifically, we309 don't want any characters that would need to be escaped in xml,310 because I store my passwords in xml format.311 312 head -n10313 Get 10 lines of random text.314 </pre>315 <p>316 </p>317 <!-- content ends here. Footer continues below -->318 </div>319 </div>320 <div class="content">321 <div class="content-interior">322 <p>323 Contact me at [EMAIL REDACTED]324 </p>325 </div>326 </div>327 </div>328 </div>329 </div>330 </body>331</html>332