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.7k
1<!DOCTYPE html>2<html>3 <head>4 <style>5 </style>6 <meta charset="utf-8">7 <title>8 thelodgeonamherstisland.com is connected with Mailchimp9 </title>10 <meta content="Mailchimp domain page for thelodgeonamherstisland.com" name="description">11 <meta content="width=device-width, initial-scale=1.0" name="viewport">12 <meta content="thelodgeonamherstisland.com is connected with Mailchimp" property="og:title">13 <meta content property="og:type">14 <meta content="" property="og:url">15 <meta content="" property="og:image">16 <style type="text/css">17 @font-face {18 font-family: 'Means Web';19 src:20 url('https://static.mailchimpsites.com/fonts/means/Means-Light-Web.woff2') format('woff2'),21 url('https://static.mailchimpsites.com/fonts/Means-Light-Web.woff') format('woff');22 font-weight: 300;23 font-display: fallback;24 }25 26 @font-face {27 font-family: 'Graphik Web';28 src: url('https://static.mailchimpsites.com/fonts/graphik/Graphik-Regular-Web.eot');29 src:30 url('https://static.mailchimpsites.com/fonts/graphik/Graphik-Regular-Web.eot?#iefix') format('embedded-opentype'),31 url('https://static.mailchimpsites.com/fonts/graphik/Graphik-Regular-Web.woff2') format('woff2'),32 url('https://static.mailchimpsites.com/fonts/graphik/Graphik-Regular-Web.woff') format('woff');33 font-weight: 400;34 font-style: normal;35 font-stretch: normal;36 }37 38 @font-face {39 font-family: 'Graphik Web';40 src: url('https://static.mailchimpsites.com/fonts/graphik/Graphik-Medium-Web.eot');41 src:42 url('https://static.mailchimpsites.com/fonts/graphik/Graphik-Medium-Web.eot?#iefix') format('embedded-opentype'),43 url('https://static.mailchimpsites.com/fonts/graphik/Graphik-Medium-Web.woff2') format('woff2'),44 url('https://static.mailchimpsites.com/fonts/graphik/Graphik-Medium-Web.woff') format('woff');45 font-weight: 500;46 font-style: normal;47 font-stretch: normal;48 }49 50 *,51 *::before,52 *::after {53 -moz-box-sizing: border-box;54 -webkit-box-sizing: border-box;55 box-sizing: border-box;56 }57 html, body {58 min-height: 100%;59 width: 100%;60 margin: 0;61 padding: 0;62 border: 0;63 }64 body {65 font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;66 -webkit-font-smoothing: antialiased;67 -moz-osx-font-smoothing: grayscale;68 -webkit-text-size-adjust: 100%;69 -ms-text-size-adjust: 100%;70 font-size: 1.6rem;71 line-height: 1.5;72 text-rendering: optimizelegibility;73 vertical-align: baseline;74 75 }76 .container {77 display: flex;78 flex-direction: column;79 justify-content: center;80 }81 82 h1 {83 font-family: "Means Web", Georgia, Times, "Times New Roman", serif;84 font-size: 40px;85 line-height: 1;86 margin: 0;87 font-weight: 300;88 }89 90 p {91 font-style: normal;92 font-weight: 300;93 font-size: 24px;94 line-height: 1.2;95 margin: 0;96 padding: 24px 0 30px 0;97 }98 99 .format {100 display: flex;101 flex-direction: column;102 max-width: 1300px;103 justify-content: center;104 flex: 1 1 auto;105 align-items: center;106 align-self: center;107 }108 109 .format > div {110 flex: 1;111 max-width: 635px;112 word-break: break-word;113 }114 115 .headingAndDescription {116 padding: 0 36px;117 }118 119 .gifContainer {120 margin-left: 10%;121 }122 123 .gif {124 text-align: center;125 width: 100%;126 }127 128 .logo {129 width: 162px;130 height: 45px;131 margin: 24px 24px 60px 24px;132 }133 134 .button {135 display: inline-flex;136 border: 1px solid transparent;137 border-radius: 2px;138 align-items: center;139 justify-content: center;140 font-weight: 500;141 font-size: 14px;142 line-height: 14px;143 white-space: nowrap;144 padding: 16px 32px;145 user-select: none;146 font-family: "Graphik Web", Helvetica, Arial, Verdana, sans-serif, bold;147 font-weight: bold;148 text-transform: capitalize;149 text-align: center;150 color: #FFFFFF;151 background: #007c89;152 cursor: pointer;153 text-decoration: none;154 }155 156 @media only screen and (min-width: 960px) {157 .container {158 height: 100vh;159 padding: 16px;160 overflow: hidden;161 }162 .logo {163 margin-bottom: 0;164 }165 h1 {166 font-size: 48px;167 }168 .format {169 flex-direction: row;170 padding-right: 0;171 }172 .headingAndDescription {173 padding-right: 0;174 }175 .gif {176 width: 522px;177 height: 522px;178 }179 }180 181 @media only screen and (min-width: 1200px) {182 .container {183 margin: 0 auto;184 }185 .headingAndDescription {186 padding: 0;187 }188 .gifContainer {189 margin-left: 0;190 margin-right: -15%;191 }192 }193 </style>194 </head>195 <body style="background-color:#FBEECA">196 <div class="container">197 <a class="logo" title="Mailchimp">198 <img alt="Mailchimp logo" height="100%" src="rick.jpg" width="100%">199 </a>200 <div class="format">201 <div class="headingAndDescription">202 <h1>203 thelodgeonamherstisland.com is connected with Mailchimp204 </h1>205 <p>206 Put your catchiest ideas online with your own domain.207 </p>208 <a class="button" role="button">209 Find Your Domain210 </a>211 </div>212 <div class="gifContainer">213 <img class="gif" height="100%" src="rick.jpg" width="100%">214 </div>215 </div>216 </div>217 </body>218</html>219