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 lang="en">3 <head>4 <style>5 </style>6 <meta charset="utf-8">7 <title>8 Dr Detail for Less9 </title>10 <meta content="never" name="referrer">11 <meta content="width=device-width, initial-scale=1" name="viewport">12 <style type="text/css">13 * { border:0; margin:0; padding:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }14 @font-face {15 font-family: 'ShopifySans';16 src: url('//cdn.shopify.com/shopify-marketing_assets/static/ShopifySans--light.woff2');17 font-style: normal;18 font-weight: 300;19 }20 21 @font-face {22 font-family: 'ShopifySans';23 src: url('//cdn.shopify.com/shopify-marketing_assets/static/ShopifySans--regular.woff');24 font-style: normal;25 font-weight: 400;26 }27 28 @font-face {29 font-family: 'ShopifySans';30 src: url('//cdn.shopify.com/shopify-marketing_assets/static/ShopifySans--medium.woff2');31 font-style: normal;32 font-weight: 500;33 }34 35 @font-face {36 font-family: 'ShopifySans';37 src: url('//cdn.shopify.com/shopify-marketing_assets/static/ShopifySans--bold.woff2');38 font-style: normal;39 font-weight: 700;40 }41 42 @font-face {43 font-family: 'ShopifySans';44 src: url('//cdn.shopify.com/shopify-marketing_assets/static/ShopifySans--black.woff2') format('woff2');45 font-style: normal;46 font-weight: 900;47 }48 49 html,body {50 height:100%;51 border:0;52 margin:0;53 padding:0;54 font-family: ShopifySans, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;55 font-size: 62.5%;56 -webkit-font-smoothing: antialiased;57 -moz-osx-font-smoothing: grayscale;58 text-size-adjust: 100%;59 text-rendering: optimizeLegibility;60 background:#fff;61 }62 body { min-height:100%; font-size:16px; line-height:22px; color: #212b36; }63 button {64 display: inline-block;65 padding: 1em 1.8125em;66 border-radius: 4px;67 font-family: ShopifySans, Helvetica, Arial, sans-serif;68 font-weight: 700;69 font-size: 1em;70 line-height: 1.133;71 -webkit-font-smoothing: antialiased;72 transition: 150ms ease;73 transition-property: background-color, border-color, box-shadow, color;74 text-align: center;75 -webkit-user-select: none;76 user-select: none;77 -webkit-appearance: none;78 -moz-appearance: none;79 appearance: none;80 cursor: pointer;81 box-shadow: 0 5px 15px 0 rgba(0,0,0,0.15);82 background-color: #008060;83 color: #ffffff;84 border-width: 1px;85 border-style: solid;86 border-color: transparent;87 margin: 1.5rem 0;88 }89 button:hover, button:focus { background-color: #004c3f; box-shadow: 0 5px 25px 0 rgba(0,0,0,0.25); }90 button:focus { box-shadow: 0 0 0.1875em 0.1875em rgba(0,128,96,0.5); text-decoration: none; outline: 0; }91 a { color:#479ccf; }92 h1,h2,h3,h4,h5,h6 { text-align:left; margin:0 0 1rem 0; color:#31373D; font-weight:700; }93 h1 { font-size:42px; line-height: 44px; font-weight: 500; }94 h2 { font-size:3.2rem; font-weight:300; line-height:30px; }95 h3 { font-size:17px; line-height:30px; position:relative; padding-bottom:18px; margin-bottom:22px; font-weight:400; }96 h3:after { content:""; position:absolute; left:0; bottom:0; height:2px; width:76px; background:#EAEAEA; }97 h4 { font-size:14px; margin-bottom:3px; }98 img { max-width:100%; }99 .logo { width: 117px; height: 34px; }100 li { margin-bottom:5px; }101 .wrapper {102 box-sizing: border-box;103 max-width: calc(410px + 4rem);104 min-height: calc(100vh - 5rem);105 margin: 0 auto;106 padding: 0 2rem;107 padding-top: 20vh;108 padding-bottom: 6rem;109 }110 .form-section { display: flex; flex-direction: column; flex-wrap: wrap; margin: -8px; -webkit-box-orient: vertical; -webkit-box-direction: normal; }111 .form-wrapper { box-sizing: border-box; margin: 0; display: flex; flex-direction: column; padding: 8px; -webkit-box-orient: vertical; -webkit-box-direction: normal; }112 .label-wrapper { align-items: baseline; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 -4px; }113 .label-wrapper label { font-size: 1.6rem; line-height: 2.4rem; margin-bottom: 0.4rem; }114 .label-wrapper > * { margin: 0 4px 4px 4px; }115 .description { color: #6c6c6c }116 117 .form-input {118 outline: none;119 max-height: 5.2rem;120 padding: 1.6rem;121 border-color: #8996a3;122 box-shadow: 0 0 0 0.1rem transparent;123 min-width: 75px;124 height: auto;125 margin: 0;126 border: 1px solid #c4cdd5;127 border-radius: 3px;128 text-transform: initial;129 letter-spacing: initial;130 box-sizing: border-box;131 display: block;132 width: 100%;133 transition: box-shadow 100ms cubic-bezier(0.64, 0, 0.35, 1),border-color 100ms cubic-bezier(0.64, 0, 0.35, 1),-webkit-box-shadow 100ms cubic-bezier(0.64, 0, 0.35, 1);134 }135 .form-input:focus { border-color: #108043; box-shadow: 0 0 0 0.1rem #108043; border: 1px solid #108043; margin-bottom: -0.1px; }136 .form-input.with-error { background-color: #fbeae5; border-color: #bf0711; }137 .form-input.with-error:focus { border: 1px solid #98050D; box-shadow: 0 0 0 0.1rem transparent; }138 139 .error-icon {140 align-self: start;141 -webkit-align-self: flex-start;142 flex-shrink: 0;143 width: 20px;144 height: 20px;145 margin-right: 4px;146 fill: #de3618;147 font-size: 1.5rem;148 }149 .error-message { color: #bf0711; font-size: 1.5rem; }150 .error-container { margin-top: 0.8rem; }151 152 .hero { margin-bottom:30px; width: 200px; }153 .content--block { position:relative; margin-bottom:32px; }154 .notification { display: inline-flex; }155 156 @media all and (min-width:500px) {157 .ico svg { width:40px; height:40px; margin-bottom:0; }158 .hero { margin-bottom:70px; }159 }160 161 @media (max-height: 1024px) and (max-width: 600px) {162 .wrapper {163 padding-top: 2rem;164 }165 }166 </style>167 </head>168 <body>169 <div class="wrapper">170 <div class="hero">171 </div>172 <div class="content">173 <div class="content--block">174 <h2>175 <b>176 Dr Detail for Less177 </b>178 </h2>179 <p class="description">180 This store is password protected. Use the password to enter the store.181 </p>182 </div>183 <div class="content--block">184 <form accept-charset="UTF-8" action="/password" data-remote="true" method="post">185 <input name="authenticity_token" type="hidden" value="n25nb8jKeCB3doxis8Nne7D4Oc1LG7DiqmNEPC6racgfNJUqDgpvQ7-ncXsz4AGqBdAyiP7eKL5g2WanPXTMQQ==">186 <div class="form-section">187 <div class="form-wrapper">188 <div class="label-wrapper">189 <label for="password">190 Enter store password191 </label>192 </div>193 <input autocomplete="nope" class="form-input" id="password" name="password" type="password">194 <div class="error-container">195 </div>196 </div>197 </div>198 <button type="submit">199 Enter200 </button>201 </form>202 </div>203 <div class="content--block">204 <div class="content--desc">205 <span>206 Are you the store owner?207 <a>208 Log in here209 </a>210 </span>211 </div>212 </div>213 </div>214 </div>215 </body>216</html>217