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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">2<html>3 <head>4 <style>5 </style>6 <meta content="text/html; charset=utf-8" http-equiv="content-type">7 <title>8 NSNorth9 </title>10 <style type="text/css">11 body {12 margin-top: 0px;13 margin-left: 0px;14 margin-right: 0px;15 background-color: #fff;16 font-size: 15px;17 font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;18 text-rendering: optimizeLegibility;19 }20 21 .main {22 margin-left: auto;23 margin-right: auto;24 max-width: 800px;25 padding-left: 10px;26 }27 28 .header {29 font-weight: bold;30 font-size: 2em;31 padding: 0px;32 padding-top: 20px;33 padding-bottom: 40px;34 padding-left: 120px;35 }36 37 .header a {38 color: #000;39 }40 41 .headerFoot {42 font-weight: normal;43 font-size: 13px;44 color: #999;45 }46 47 .date {48 color: #999;49 font-size: .8em;50 }51 52 .post {53 padding-bottom: 40px;54 color: #000;55 font-size: 15px;56 width: 660px;57 line-height: 1.3em;58 }59 60 .secondaryText {61 color: #777;62 }63 64 .secondaryTextSmall {65 color: #777;66 font-size: .85em;67 }68 69 70 .microPost {71 padding: 10px;72 margin-left: -10px;73 margin-right: -10px;74 font-size: 15px;75 width: 660px;76 77 margin-bottom: 20px;78 background: #fdfdfd;79 xborder: solid 1px #ddd;80 border-radius: 2px 25px 2px 2px;81 }82 83 .postTitle {84 font-size: 19px;85 font-weight: bold;86 padding-bottom: 0px;87 }88 89 90 .microPostTitle {91 font-weight: bold;92 }93 94 .microPostLink {95 padding-bottom: 0px;96 font-size: .8em;97 color: #aaa;98 }99 100 .microPostLink a {101 color: #ccc;102 }103 104 .postTitle a {105 color: #000;106 text-decoration: none;107 }108 109 .postTitle a:hover, .microPostTitle a:hover {110 color: #253253;111 text-decoration: underline;112 }113 114 115 .microPostLink a {116 text-decoration: none;117 }118 119 .microPostLink a:hover {120 text-decoration: underline;121 }122 123 124 #copyright {125 font-size: 9pt;126 color: #555;127 width: 660px;128 }129 130 .quote, blockquote {131 color: #222;132 background: #fbfbfb;133 border-left: solid 3px #235;134 135 padding-left: 15px;136 margin-bottom: -1.5em;137 margin: 0px;138 }139 140 .main a {141 color: #253253;142 text-decoration: solid;143 }144 145 146 .archiveMonthHeader {147 font-weight: bold;148 margin-top: 0px;149 margin-bottom: 0px;150 padding-bottom: 0px;151 }152 153 .archiveEntry {154 margin-top: 2px;155 margin-bottom: 2px;156 padding-left: 10px;157 }158 159 .archiveMonthEntry {160 margin-top: 0px;161 margin-bottom: 20px;162 }163 164 .commentsArea {165 color: #000;166 border-top: solid 1px #555;167 width: 660px;168 }169 170 #disqus_thread a {171 color: black;172 }173 174 .toc {175 position: absolute;176 padding-right: 10px;177 padding-top: 10px;178 max-width: 120px;179 text-align: right;180 line-height: 2.2em;181 font-size: .9em;182 display: block;183 }184 185 .toc a {186 color: #777;187 }188 189 code {190 color: rgb(215, 44, 64);191 background-color: rgb(247, 247, 249);192 /*border: solid 1px rgb(225, 225, 232);*/193 border-radius: 2px; 194 /* padding: 2px; */195 /* margin: 2px; */196 /*display: block; messes up inline things boo*/197 }198 199 pre {200 background-color: rgb(247, 247, 249);201 }202 203 204 .importDisclaimer {205 color: #999;206 }207 </style>208 </head>209 <body>210 <div class="main">211 <div class="header">212 <center>213 <a>214 <img border="0" height="128" src="rick.jpg" width="128">215 </a>216 <br>217 <a style="text-decoration: none;">218 The Shape of Everything219 </a>220 <br>221 <span class="headerFoot">222 A website mostly about Mac stuff, written by August "Gus" Mueller223 </span>224 </center>225 </div>226 <div class="toc">227 »228 <a>229 Acorn230 </a>231 <br>232 »233 <a>234 Retrobatch235 </a>236 <br>237 »238 <a rel="me">239 Mastodon240 </a>241 <br>242 <!--243 » <a >Twitter</a><br/>244 -->245 »246 <a>247 Micro.blog248 </a>249 <br>250 »251 <a>252 Instagram253 </a>254 <br>255 »256 <a>257 Github258 </a>259 <br>260 »261 <a>262 Maybe Pizza?263 </a>264 <br>265 »266 <a>267 Archives268 </a>269 <br>270 »271 <a>272 Feed273 </a>274 <br>275 »276 <a>277 Micro feed278 </a>279 <br>280 </div>281 <div style="margin-left: 120px">282 <div class="post">283 <div class="postTitle">284 <a>285 NSNorth286 </a>287 </div>288 <div class="date">289 January 12, 2013290 </div>291 <p>292 Registration for293 <a>294 NSNorth295 </a>296 (April 19-21) is open, and I'll be there participating as one of the speakers.297 </p>298 <blockquote>299 <p>300 "NSNorth is a three day single-track conference to bring together people in the areas of iOS, Mac, and web."301 </p>302 </blockquote>303 <p>304 It's new conference, but I've never had a bad time in Canada so it's got to be good. See ya there.305 </p>306 </div>307 </div>308 <div id="copyright" style="margin-left: 120px">309 <center>310 © August Mueller.311 </center>312 </div>313 </div>314 </body>315</html>316