Datasetpublic

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.

sourceHugging Faceodc-byupdated 3y agoView on Hugging Face

22likes1.8kdownloads

root5755.html

5755.html477 linesDownload Raw Back to root

1<!DOCTYPE html>2<html>3 <head>4  <style>5   body {6  -ms-text-size-adjust: 100%;7  -webkit-text-size-adjust: 100%;8  line-height: 1.5;9  color: #24292e;10  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;11  font-size: 16px;12  line-height: 1.5;13  word-wrap: break-word;14  box-sizing: border-box;15  min-width: 200px;16  max-width: 980px;17  margin: 0 auto;18  padding: 45px;19}20 21@media (max-width: 767px) {22  body {23    padding: 15px;24  }25}26 27details {28  display: block;29}30 31summary {32  display: list-item;33}34 35a {36  background-color: initial;37}38 39a:active,40  a:hover {41  outline-width: 0;42}43 44strong {45  font-weight: inherit;46  font-weight: bolder;47}48 49h1 {50  font-size: 2em;51  margin: .67em 0;52}53 54img {55  border-style: none;56}57 58code,59  kbd,60  pre {61  font-family: monospace,monospace;62  font-size: 1em;63}64 65hr {66  box-sizing: initial;67  height: 0;68  overflow: visible;69}70 71input {72  font: inherit;73  margin: 0;74}75 76input {77  overflow: visible;78}79 80[type=checkbox] {81  box-sizing: border-box;82  padding: 0;83}84 85* {86  box-sizing: border-box;87}88 89input {90  font-family: inherit;91  font-size: inherit;92  line-height: inherit;93}94 95a {96  color: #0366d6;97  text-decoration: none;98}99 100a:hover {101  text-decoration: underline;102}103 104strong {105  font-weight: 600;106}107 108hr {109  margin: 15px 0;110  overflow: hidden;111  background: transparent;112  border: 0;113  border-bottom: 1px solid #dfe2e5;114}115 116hr:after,117  hr:before {118  display: table;119  content: "";120}121 122hr:after {123  clear: both;124}125 126table {127  border-spacing: 0;128  border-collapse: collapse;129}130 131td,132  th {133  padding: 0;134}135 136details summary {137  cursor: pointer;138}139 140h1,141  h2,142  h3,143  h4,144  h5,145  h6 {146  margin-top: 0;147  margin-bottom: 0;148}149 150h1 {151  font-size: 32px;152}153 154h1,155  h2 {156  font-weight: 600;157}158 159h2 {160  font-size: 24px;161}162 163h3 {164  font-size: 20px;165}166 167h3,168  h4 {169  font-weight: 600;170}171 172h4 {173  font-size: 16px;174}175 176h5 {177  font-size: 14px;178}179 180h5,181  h6 {182  font-weight: 600;183}184 185h6 {186  font-size: 12px;187}188 189p {190  margin-top: 0;191  margin-bottom: 10px;192}193 194blockquote {195  margin: 0;196}197 198ol,199  ul {200  padding-left: 0;201  margin-top: 0;202  margin-bottom: 0;203}204 205ol ol,206  ul ol {207  list-style-type: lower-roman;208}209 210ol ol ol,211  ol ul ol,212  ul ol ol,213  ul ul ol {214  list-style-type: lower-alpha;215}216 217dd {218  margin-left: 0;219}220 221code,222  pre {223  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;224  font-size: 12px;225}226 227pre {228  margin-top: 0;229  margin-bottom: 0;230}231 232input::-webkit-inner-spin-button,233  input::-webkit-outer-spin-button {234  margin: 0;235  -webkit-appearance: none;236  appearance: none;237}238 239:checked+.radio-label {240  position: relative;241  z-index: 1;242  border-color: #0366d6;243}244 245.border {246  border: 1px solid #e1e4e8!important;247}248 249body:after,250  body:before {251  display: table;252  content: "";253}254 255body:after {256  clear: both;257}258 259body>:first-child {260  margin-top: 0!important;261}262 263body>:last-child {264  margin-bottom: 0!important;265}266 267a:not([href]) {268  color: inherit;269  text-decoration: none;270}271 272blockquote,273  details,274  dl,275  ol,276  p,277  pre,278  table,279  ul {280  margin-top: 0;281  margin-bottom: 16px;282}283 284blockquote {285  padding: 0 1em;286  color: #6a737d;287  border-left: .25em solid #dfe2e5;288}289 290blockquote>:first-child {291  margin-top: 0;292}293 294blockquote>:last-child {295  margin-bottom: 0;296}297 298h1,299  h2,300  h3,301  h4,302  h5,303  h6 {304  margin-top: 24px;305  margin-bottom: 16px;306  font-weight: 600;307  line-height: 1.25;308}309 310h1 {311  font-size: 2em;312}313 314h1,315  h2 {316  padding-bottom: .3em;317  border-bottom: 1px solid #eaecef;318}319 320h2 {321  font-size: 1.5em;322}323 324h3 {325  font-size: 1.25em;326}327 328h4 {329  font-size: 1em;330}331 332h5 {333  font-size: .875em;334}335 336h6 {337  font-size: .85em;338  color: #6a737d;339}340 341ol,342  ul {343  padding-left: 2em;344}345 346ol ol,347  ol ul,348  ul ol,349  ul ul {350  margin-top: 0;351  margin-bottom: 0;352}353 354li {355  word-wrap: break-all;356}357 358li>p {359  margin-top: 16px;360}361 362li+li {363  margin-top: .25em;364}365 366dl {367  padding: 0;368}369 370dl dt {371  padding: 0;372  margin-top: 16px;373  font-size: 1em;374  font-style: italic;375  font-weight: 600;376}377 378dl dd {379  padding: 0 16px;380  margin-bottom: 16px;381}382 383table {384  display: block;385  width: 100%;386  overflow: auto;387}388 389table th {390  font-weight: 600;391}392 393table td,394  table th {395  padding: 6px 13px;396  border: 1px solid #dfe2e5;397}398 399table tr {400  background-color: #fff;401  border-top: 1px solid #c6cbd1;402}403 404table tr:nth-child(2n) {405  background-color: #f6f8fa;406}407 408img {409  max-width: 100%;410  box-sizing: initial;411  background-color: #fff;412}413 414img[align=right] {415  padding-left: 20px;416}417 418img[align=left] {419  padding-right: 20px;420}421  </style>422  <meta charset="utf-8">423  <title>424   Rainchasers UK Whitewater Kayaking425  </title>426  <meta content="width=device-width,initial-scale=1.0" name="viewport">427 </head>428 <body>429  <h2>430   Rainchasers431  </h2>432  <p>433   A collection of kayaking or canoeing whitewater adventures in the UK to 434     browse, search, and favourite in the hope of weekend rain. Gauge levels 435     calibrated to the specific runs are included to allow you to judge the 436     likely paddling conditions.437  </p>438  <section style="text-align: center;">439   <a style="display: block;">440    <img alt="Get it on Google Play" src="rick.jpg" style="width: 280px;">441   </a>442   <a style="display: block;">443    <img alt="Download on the App Store" src="rick.jpg" style="border-radius: 13px; width: 250px; height: 83px;">444   </a>445  </section>446  <img alt="Rainchasers app on a phone" src="rick.jpg">447  <h2>448   Currently Includes...449  </h2>450  <ul>451   <li>452    <a>453     Cilau Aeron to Aberaeron (Aeron)454    </a>455   </li>456   <li>457    <a>458     Llangeitho to Ciliau Aeron (Aeron)459    </a>460   </li>461   <li>462    <a>463     Blaengwynfi/Cymmer to Pontrhydyfen (Afan)464    </a>465   </li>466   <li>467    <a>468     Pontrhydyfen to Aberavon (Afan)469    </a>470   </li>471  </ul>472  <p>473   v1.1.5474  </p>475 </body>476</html>477