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
root3928.html
3928.html204 linesDownload Raw Back to root
1<!DOCTYPE html>2<html amp amp-version="2310201815000" class="i-amphtml-singledoc i-amphtml-standalone" i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate itemscope="itemscope" itemtype="" lang="id" transformed="self;v=1">3 <head>4  <style>5  </style>6  <style amp-runtime>7   html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y pinch-zoom;touch-action:pan-y pinch-zoom}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#000!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,0.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom],amp-script[sandboxed]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}8/*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill),body noscript>*{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}body noscript>*{position:absolute!important;width:100%;height:100%;z-index:2}body noscript{display:inline!important}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block;line-height:normal}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}amp-img[i-amphtml-ssr]:not(.i-amphtml-element)>[placeholder]{z-index:auto}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-layout-size-defined>[overflow]{position:absolute}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-story{visibility:hidden!important}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}@media (min-width:1px){:where(amp-accordion>section)>:first-child{margin:0;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}:where(amp-accordion>section)>:last-child{margin:0}}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important}9/*# sourceURL=/css/ampshared.css*/10  </style>11  <meta charset="utf-8">12  <meta content="width=device-width, initial-scale=1.0" name="viewport">13  <title>14   Istana168👉Live Draw SGP Today - Togel SGP Most Update15  </title>16  <meta content="Don't miss result togel sgp today with most update live draw! istana168 give you discount and big prize every time you bet togel sgp." name="description">17  <meta content="togel singapore, data sgp, pengeluaran sgp, live draw sgp, data keluaran sgp, result sgp live." name="keywords">18  <meta content="oMsCHY3qNcj68hrwDFgottATgd_Hjwdx96kf6ZWu96Y" name="google-site-verification">19  <meta content="index, follow" name="robots">20  <meta content="id_ID" name="geo.region">21  <meta content="index,follow" name="googlebot">22  <meta content="id" name="geo.country">23  <meta content="Id-ID" name="language">24  <meta content="global" name="distribution">25  <meta content="Indonesia" name="geo.placename">26  <meta content="istana168" name="author">27  <meta content="istana168" name="publisher">28  <meta content="Istana168👉Live Draw SGP Today - Togel SGP Most Update" property="og:title">29  <meta content="" property="og:url">30  <meta content="website" property="og:type">31  <meta content="id_ID" property="og:locale">32  <meta content="en_ID" property="og:locale:alternate">33  <meta content="istana168 togel sgp" property="og:site_name">34  <meta content="" property="og:image">35  <meta content="Don't miss result togel sgp today with most update live draw! istana168 give you discount and big prize every time you bet togel sgp." property="og:image:alt">36  <meta content="summary_large_image" name="twitter:card">37  <meta content="@istana168" name="twitter:site">38  <meta content="@istana168" name="twitter:creator">39  <meta content="" name="twitter:domain">40  <meta content="SLOT GACOR istana168" name="twitter:title">41  <meta content="Don't miss result togel sgp today with most update live draw! istana168 give you discount and big prize every time you bet togel sgp." name="twitter:description">42  <meta content="" name="twitter:image">43  <style amp-boilerplate>44   body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}45  </style>46  <noscript>47   <style amp-boilerplate>48    body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}49   </style>50  </noscript>51  <style amp-custom>52   * {53     margin: 0;54     padding: 0;55     box-sizing: border-box;56     font-family: 'Poppins', sans-serif;57 }58  59 body {60     width: 100%;61     min-height: 100vh;62     background-image: url(img/abc.gif);63     background-position: center;64     background-size: cover;65     display: flex;66     justify-content: center;67     align-items: center;68 }69 70 .container {71     width: 400px;72     min-height: 400px;73     background: #29272b;74     opacity: 0.9;75     border-radius: 20px;76     box-shadow: 0 0 5px rgba(0,0,0,.3);77     padding: 40px 30px;78 }79  80 .container .login-text {81     color: #111;82     font-weight: 500;83     font-size: 1.1rem;84     text-align: center;85     margin-bottom: 20px;86     display: block;87     text-transform: capitalize;88 }89  90 .container .login-username .input-group {91     width: 100%;92     height: 50px;93     margin-bottom: 25px;94 }95  96 .container .login-username .input-group input {97     width: 100%;98     height: 100%;99     border: 2px solid #e7e7e7;100     padding: 15px 20px;101     font-size: 1rem;102     border-radius: 30px;103     background: white;104     outline: none;105     transition: .3s;106 }107  108 .container .login-username .input-group input:focus, .container .login-email .input-group input:valid {109     border-color: #fed59b;110 }111  112 .container .login-username .input-group .btn {113     display: block;114     width: 100%;115     padding: 15px 20px;116     text-align: center;117     border: none;118     background: #bd6c2a;119     outline: none;120     border-radius: 30px;121     font-size: 1.2rem;122     color: #FFF;123     cursor: pointer;124     transition: .3s;125 }126  127 .container .login-username .input-group .btn:hover {128     transform: translateY(-5px);129     background: #e7a85c;130 }131  132 .login-register-text {133     color: #111;134     font-weight: 600;135 }136  137 .login-register-text a {138     text-decoration: none;139     color: #e7a85c;140 }141  142 .container-logout {143     width: 500px;144     min-height: 200px;145     background: #FFF;146     border-radius: 5px;147     box-shadow: 0 0 5px rgba(0,0,0,.3);148     padding: 40px 30px;149 }150  151 .container-logout .login-username .input-group .btn {152     display: block;153     width: 100%;154     padding: 15px 20px;155     text-align: center;156     border: none;157     background: #e7a85c;158     outline: none;159     border-radius: 30px;160     font-size: 1.2rem;161     color: #FFF;162     cursor: pointer;163     transition: .3s;164     margin-top: 20px;165 }166  167 .container-logout .login-username .input-group .btn:hover {168     transform: translateY(-5px);169     background: #e7a85c;170 }171  172 @media (max-width: 430px) {173     .container {174         width: 300px;175     }176 }177  </style>178 </head>179 <body class="amp-mode-mouse" style="opacity: 1; visibility: visible; animation: auto ease 0s 1 normal none running none;">180  <div class="container">181   <div class="login-username">182    <p class="login-text" style="font-size: 2rem; font-weight: 800; color: white;">183     TOGEL SGP ISTANA168184    </p>185    <div class="input-group">186     <a class="btn" style="text-decoration: none;">187      Login188     </a>189    </div>190    <div class="input-group">191     <a class="btn" style="text-decoration: none;">192      Daftar193     </a>194    </div>195    <div>196     <a>197      <img src="rick.jpg" style="width: 100%;">198     </a>199    </div>200   </div>201  </div>202 </body>203</html>204