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
root15265.html
15265.html511 linesDownload Raw Back to root
1<html>2 <head>3  <title>4   The Pickled Mary | The Mason Jar5  </title>6  <meta content="width=device-width, initial-scale=1" name="viewport">7  <meta content="DocPad v6.78.4" name="generator">8  <style>9   h1, h2, h3, h4, h5, h6, p, body, a, img, ul, ol, blockquote, pre {10  margin: 0; padding: 0; border: 0;11}12 13body {14  font-family: 'Lora', serif;15  font-size: 21px;16  line-height: 1.52;17  background-color: #f8f8f8;18  text-rendering: optimizeLegibility;19}20 21.content-wrap {22  width: 38em;23  margin: 0 auto;24}25 26body, a {27  color: #171717;28}29 30a:hover {31  color: #8B2500;32  text-decoration: underline;33}34 35p {36  margin-bottom: 1.52em;37}38 39pre {40  font-size: 0.9em;41  overflow: auto;42  background: #fff;43  border: 1px dashed #d2d2d2;44  border-radius: 0.25em;45  margin-bottom: 1.8em;46  padding: 1em;47}48 49h1 {50  font-size: 2em;51}52 53h2 {54  font-size: 1.2em;55  font-weight: 400;56  line-height: 1.43;57  margin-bottom: 1.35em;58}59 60h2.description {61  font-size: 1.2em;62  font-style: italic;63  text-align: center;64  margin-top: -0.3em;65}66 67h3 {68  font-style: italic;69  text-align: center;70  font-weight: 400;71  font-size: 1.4em;72  margin-top: 1.8em;73  margin-bottom: 0.8em;74}75 76ol, ul {77  margin: 0 1.4em 1.4em 4em;78}79 80li {81  margin-bottom: 0.5em;82}83 84blockquote {85  margin: 1.2em 3em;86  padding-left: 1em;87  font-style: italic;88}89 90hr {91  border: 0;92  border-top: 1px dashed #d2d2d2;93  height: 0;94  margin: 1.6em 0;95}96 97/* page header */98 99.header {100  margin: 0 0 2em;101  background-color: #222;102}103 104.header h1 {105  font-size: 2.6em;106  text-align: center;107  font-weight: 700;108  padding: 0.5em 0;109  color: #fff;110}111 112.header img {113  height: 98px;114  width: 274px;115}116 117.header a, .header a:hover {118  text-decoration: none;119  color: #efefef;120}121 122.header .mixologist {123  font-size: 1em;124  font-style: italic;125  text-align: center;126  margin-top: -0.5em;127  padding-bottom: 2em;128  color: #fff;129}130 131.header .mixologist a {132  text-decoration: underline;133  color: #fff;134}135 136 137/* nav */138 139.site-header {140  color: #fff;141  height:64px;142  padding:10px 0;143  background-color: #000;144  border-bottom:1px dotted #ccc;145}146 147nav ul {148  font-size: .75em;149  text-align: center;150  list-style: none;151  margin:0;152  padding:0;153  background-color: #000;154}155 156 157nav li {158  display: inline-block;159  padding:22px 8px;160  text-transform: uppercase;161  margin:0;162}163 164nav li a {165  color: #fff;166  text-decoration: none;167  font-weight: bold;168}169 170nav li a:hover {171  color:#efefef;172}173 174/* navbar overrides */175 176.navbar a {177  text-decoration: underline;178}179 180/* content */181 182.content {183  float:left;184}185 186.main-copy {187  width:65%;188  float:left;189  font-size:.875em;190  padding-bottom: 60px;191}192 193.sidebar-lists {194  width: 25%;195  float: right;196  text-align: left;197  font-size: .675em;198}199 200.sidebar-description {201  text-align: left;202}203 204select {205  width:100%;206}207 208#latest {209  margin:0;210  text-align: left;211  list-style: none;212}213 214#directory {215  margin:0;216  text-align: center;217  list-style: none;218}219 220.prose-edit {221  font-size: .75em;222  text-align: center;223}224 225/* page footer */226 227footer {228  margin: 2.6em 0;229  border-top: 1px dashed #d2d2d2;230  clear:both;231}232 233footer .copy {234  text-align: center;235  font-size: 0.7em;236  font-style: italic;237  margin-top: 1em;238}239 240footer .copy, footer .copy a {241  color: #8e8e8e;242}243 244.disclaimer {245  font-variant: small-caps;246  text-transform: lowercase;247  font-weight: 400;248  text-rendering: auto;249  letter-spacing: 1px;250  margin: -28px auto 36px auto;251  background-color: #f8f8f8;252  width: 200px;253}254 255/* media queries */256 257@media screen and (min-width: 1600px) {258  body { font-size: 26px; }259    .disclaimer {260      margin: -33px auto 36px auto;261  }262}263 264@media screen and (max-width: 900px) {265  body { font-size: 18px; }266   .disclaimer {267      margin: -22px auto 36px auto;268  }269}270 271@media screen and (max-width: 500px) {272  .content-wrap {273    width: auto;274    padding: 0 1em;275  }276 277  .header {278    margin: 0 0 1.4em;279  }280 281  .header h1 {282    font-size: 1.6em;283  }284 285  .header img {286    height: 70px;287    width: 163px;288    margin: 0.5em 0;289  }290 291  .header .mixologist {292    padding-bottom: 1.4em;293}294 295  .site-header {296    height: 60px;297  }298 299  nav ul {300    margin:0 auto;301    text-align: center;302  }303 304  nav li {305    font-size: 12px;306  }307 308  .main-copy {309    width: 100%;310    float:none;311    font-size:.875em;312    padding-bottom: 0;313    text-align: center;314  }315 316  .sidebar-lists {317    width: 100%;318    float: none;319    text-align: center;320    font-size: .775em;321  }322 323  .sidebar-description {324    text-align: center;325}326 327  #latest {328    margin:0;329    text-align: center;330    list-style: none;331  }332 333  .disclaimer {334      margin: -23px auto 36px auto;335  }336 337}338 339 340 341@font-face {342  font-family: 'Lora';343  font-style: italic;344  font-weight: 400;345  src: url(http://fonts.gstatic.com/s/lora/v32/0QI8MX1D_JOuMw_hLdO6T2wV9KnW-MoFoq92mQ.ttf) format('truetype');346}347@font-face {348  font-family: 'Lora';349  font-style: italic;350  font-weight: 700;351  src: url(http://fonts.gstatic.com/s/lora/v32/0QI8MX1D_JOuMw_hLdO6T2wV9KnW-C0Coq92mQ.ttf) format('truetype');352}353@font-face {354  font-family: 'Lora';355  font-style: normal;356  font-weight: 400;357  src: url(http://fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787weuxJBkqg.ttf) format('truetype');358}359@font-face {360  font-family: 'Lora';361  font-style: normal;362  font-weight: 700;363  src: url(http://fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787z5vBJBkqg.ttf) format('truetype');364}365 366 367html.wait {368	cursor: wait !important;369	opacity: 0;370	transition: opacity 0.5s ease;371}372  </style>373 </head>374 <body>375  <div class="site-header">376   <nav role="navigation">377    <ul class="group">378     <li>379      <a>380       Home381      </a>382     </li>383     <li>384      <a>385       Cocktails386      </a>387     </li>388     <li>389      <a>390       Foods391      </a>392     </li>393     <li>394      <a>395       Extras396      </a>397     </li>398    </ul>399   </nav>400  </div>401  <header class="header">402   <h1 class="main-title">403    The Pickled Mary404   </h1>405   <h2 class="mixologist">406    Submitted by:407    <a>408     D. Keith Robinson409    </a>410   </h2>411  </header>412  <div class="content-wrap">413   <article>414    <p>415     [In Progress]. A spicy pickled take.416    </p>417    <h2 id="mix-ingredients">418     Mix Ingredients419    </h2>420    <ul>421     <li>422      Freshly seeded, stemmed and chopped peppers. 1 red bell, 1 green bell pepper and one anaheim chili.423     </li>424     <li>425      1/4 cup or so chopped garlic426     </li>427     <li>428      2 small tomatoes. Chopped into chunks429     </li>430     <li>431      4 oz tomato paste432     </li>433    </ul>434    <h2 id="mix-preparation">435     Mix Preparation436    </h2>437    <ul>438     <li>439      Chop the peppers, tomato and garlic into small chunks. Place them in large Dutch oven.440     </li>441     <li>442      Puree the veggies.443     </li>444     <li>445      (Optional if you want a thinner consistency.) Strain into a bowl or jar through sieve, pressing with a rubber spatula; discard solids.446     </li>447     <li>448      Add everything else. Puree a bit more.449     </li>450    </ul>451    <h2 id="the-pickled-mary">452     The Pickled Mary453    </h2>454    <ul>455     <li>456      Edge a large glass with salt.457     </li>458     <li>459      Pour in a shot or two of vodka (460      <a>461       Ursula cucumber vodka462      </a>463      is good). Strain if needed.464     </li>465     <li>466      Pour in the mix, fill about 2/3rds of the glass.467     </li>468     <li>469      Add ice. Be sure and leave some room in the glass.470     </li>471    </ul>472    <h2 id="notes">473     Notes474    </h2>475    <ul>476     <li>477      Cucumber juice can be hard to come by. Puree one or two large cucumbers with a bit of water and strain.478     </li>479     <li>480      If you don't strain the veggies it'll come out a bit thick. Almost smoothy like, but not chunky.481     </li>482     <li>483      If the mix is too thick, no worries, just add some water.484     </li>485     <li>486      You can play a bit of mix n' match with the peppers for variety.487     </li>488    </ul>489    <h2 id="experimentation-notes">490     Experimentation notes491    </h2>492    <ul>493     <li>494      More pickle juice?495     </li>496    </ul>497   </article>498   <footer class="footer">499    <section class="copy">500     <h4 class="disclaimer">501      The Mason Jar Project502     </h4>503     <p>504      Est. 2013 by D. Keith Robinson &amp; Chad Seeger505     </p>506    </section>507   </footer>508  </div>509 </body>510</html>511