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.7kdownloads
root11707.html
11707.html244 linesDownload Raw Back to root
1<!DOCTYPE html>2<html class="uk-height-1-1">3 <head>4  <meta charset="utf-8">5  <meta content="noindex" name="robots">6  <meta content name="description">7  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">8  <meta content="10.20.150.6" name="a">9  <title>10   CX Journeys &vellip; Sign In11  </title>12 </head>13 <body class="uk-height-1-1">14  <div class="uk-vertical-align uk-text-center uk-height-1-1">15   <div class="uk-vertical-align-middle uk-width-large-2-6 uk-width-medium-5-6 uk-width-small-5-6">16    <div style="width: 300px; margin:30px auto 0 auto">17     <img class="uk-margin-bottom" id="logo" src="rick.jpg" width="100%">18    </div>19    <div class="" style="height: 30px;">20     &nbsp;21    </div>22    <form action="/login/login" autocomplete="off" class="uk-form" id="loginForm" method="POST" onsubmit="return setSubmitUrl(this);" style="width: 300px; margin: 0 auto;max-width: 100%">23     <div class="uk-form-row" data-uk-tooltip title="Email address">24      <input autofocus="true" class="uk-width-1-1 uk-form-large" id="username" name="username" placeholder="Email address" required type="email" value>25     </div>26     <div class="uk-form-row uk-form-password">27      <input class="uk-width-1-1 uk-form-large" id="password" name="password" placeholder="Password" required type="password">28     </div>29     <div id="recaptcha_element" style="text-align: center; min-height:15px">30     </div>31     <div class="d-flex-center" style="margin-top: 30px">32      <button class="uk-width-3-10 uk-button uk-button-medium" onclick="return trackSigninType('cooladata');" style="width: 225px;height: 48px;font-size: 20px; background-color:#4cd2c0" type="submit">33       Sign In34      </button>35     </div>36     <div class="d-flex-center" style="margin-top: 20px">37      <a>38       Reset password39      </a>40     </div>41     <div class="d-flex-center" style="margin-top:50px">42      <a class="d-flex-center" id="google-connect-link" onclick="return trackSigninType(this,'google');">43       <i>44       </i>45      </a>46     </div>47     <div style="margin-bottom:100px;margin-top:50px">48      <a>49       About Medallia Journey Analytics50      </a>51     </div>52    </form>53   </div>54  </div>55  <style>56   @font-face {57    font-family: 'HCo Gotham';58    src:local('?'),59    url(/assets/fonts/HCo_Gotham-normal-400.woff) format('woff');60    font-weight: 400;61    font-style: normal;62}63 64 65 66 67body, html {68    margin: 0;69    height: 100%;70}71html {72    --bg-blue: #4050C6;73    --border-grey: #ddd;74    --placeholder-grey: #999;75    --button-black: #444;76    font: 400 14px/20px 'HCo Gotham',Arial,sans-serif;77    font-family: 'HCo Gotham',Arial,sans-serif;78}79/* main container */80body > .uk-vertical-align {81    background-color: var(--bg-blue);82    color: #fff;83    height: 100%;84    padding: 2em;85    display: flex;86    justify-content: center;87    align-items: center;88    text-align: center;89    overflow: auto;90    border: 1px solid transparent;91    box-sizing: border-box;92}93body > .uk-vertical-align > div {94    max-height: 100%;95}96.uk-vertical-align a {97    color: inherit;98    text-decoration: none;99    margin: 3px 0;100}101.uk-vertical-align a:hover:not(.uk-button) {102    color: inherit;103    text-decoration: underline;104}105/* The input fields */106.uk-form-large {107    width: 100%;108    padding: 8px 6px;109    border: 1px solid var(--border-grey);110    border-radius: 4px;111    -webkit-appearance: none;112    font: inherit;113    box-sizing: border-box;114    outline: none;115}116.uk-form-large::placeholder {117    color: var(--placeholder-grey);118}119.uk-form-row {120    margin-top: 1em;121}122.uk-form-row:first-child {123    margin-top: 0;124}125/* The submit button */126#recaptcha_element + .uk-form-row {127    display: flex;128    justify-content: center;129}130.uk-button {131    font: inherit;132    border-radius: 4px;133    border: none;134    padding: 0 12px;135    color: var(--button-black);136    display: inline-block;137    vertical-align: middle;138    color: var(--button-black);139    line-height: 28px;140}141a.uk-button {142    color: var(--button-black);143}144#recaptcha_element {145    display: none;146}147/* RESET PASSWORD */148.uk-width-medium-5-6 {149    width: 600px;150    max-width: 100%;151}152.uk-text-small + .uk-form-row {153    margin: 0;154    height: 15px;155    border-bottom: 1px solid #fff;156}157.uk-width-medium-5-6 #logo {158    width: 256px;159}160.uk-width-medium-5-6 hr {161    display: none;162}163/* Forget your password? title */164.uk-width-medium-5-6 h3 {165    margin: 0;166    padding: 25px 0;167    font-size: 18px;168    border-top: 1px solid #fff;169    font-weight:400;170}171.uk-width-medium-5-6 h3 + div {172    display: none;173}174/* we will send you... message */175.uk-text-small {176    font-size: 11px;177}178/* back to login link */179[] {180    font-size: 14px;181}182/* send button */183[] + .uk-button {184    text-shadow: 0 1px 0 #fff;185    font-size: 14px;186    min-width: 180px;187}188 189 190.uk-alert {191    margin-bottom: 15px;192    padding: 10px;193    background: #ebf7fd;194    color: #2d7091;195    border: 1px solid rgba(45,112,145,.3);196    border-radius: 4px;197    text-shadow: 0 1px 0 #fff;198}199*+.uk-alert {200    margin-top: 15px;201}202.uk-alert.uk-alert-warning {203    background: #fffceb;204    color: #e28327;205    border-color: rgba(226,131,39,.3);206}207 208.d-flex-center {209    display: flex;210    justify-content: center;211    align-items: center;212}213 214#google-connect-link i{215    background-repeat: no-repeat;216    background-position: center;217    background: url('/assets/images/google/[EMAIL REDACTED]');218    width: 191px;219    height: 46px;220    display:inline-block;221    background-size: contain;222}223#google-connect-link i:hover {224    background: url("/assets/images/google/[EMAIL REDACTED]");225    background-size: contain;226}227 228 229    #recaptcha_element > div {margin: auto; width: 100%}230    #recaptcha_element {margin-top: 15px; margin-bottom: 15px; display: none}231    .g-recaptcha{        display: inline-block;        margin: 10px 0;    }232  </style>233  <!-- Google Code for Remarketing Tag -->234  <!--------------------------------------------------235Remarketing tags may not be associated with personally identifiable information or placed on pages related to sensitive categories. See more information and instructions on how to setup the tag on: http://google.com/ads/remarketingsetup236--------------------------------------------------->237  <noscript>238   <div style="display:inline;">239    <img alt height="1" src="rick.jpg" style="border-style:none;" width="1">240   </div>241  </noscript>242 </body>243</html>244