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 <meta charset="utf-8">5 <meta content="width=device-width, initial-scale=1.0" name="viewport">6 <title>7 [NAME REDACTED] - Software Engineer8 </title>9 <meta content="Patrick Brosset's resume, work experience and education. Senior web developer skilled in many disciplines, ranging from building high-traffic dynamic websites to architecting complex web applications for professional users, as well as team leading." name="description">10 <meta content="Patrick Brosset" name="author">11 <style>12 body {13 font-family: Georgia, sans-serif;14 line-height: 1.5em;15 color: #333;16 background: #eee;17 }18 19 a {20 color: rgb(14, 175, 228);21 }22 23 a:hover {24 background: rgb(14, 175, 228);25 color: white;26 text-decoration: none;27 }28 29 .container {30 margin: 2em auto;31 padding: 2em;32 box-sizing: border-box;33 max-width: 700px;34 min-width: 400px;35 background: white;36 box-shadow: 0 0 5px #ccc;37 border-radius: 5px;38 position: relative;39 }40 41 h1 {42 font-weight: normal;43 font-size: 3em;44 margin: 0 0 .5em 0;45 letter-spacing: -.05em;46 line-height: 1em;47 width: 50%;48 }49 50 aside {51 position: absolute;52 top: 2em;53 right: 2em;54 width: 50%;55 }56 57 aside a {58 display: block;59 text-align: right;60 float: right;61 clear: right;62 margin-right: 25px;63 position: relative;64 }65 66 aside a::after {67 content: "";68 display: block;69 position: absolute;70 background-repeat: no-repeat;71 background-position: center;72 width: 20px;73 height: 20px;74 top: 2px;75 right: -25px;76 }77 78 aside a.twitter::after {79 background-image: url(twitter.png);80 }81 82 aside a.linkedin::after {83 background-image: url(linkedin.png);84 }85 86 aside a.github::after {87 background-image: url(github.png);88 }89 90 article {91 padding: 0 0 1.5em 1em;92 border-left: 1px dotted rgb(14, 175, 228);93 }94 95 article:last-child {96 padding-bottom: 0;97 }98 99 article h2 {100 font-weight: normal;101 font-size: 1.4em;102 margin: 0;103 position: relative;104 }105 106 article h2::before {107 content: "";108 display: block;109 position: absolute;110 left: -1em;111 top: .3em;112 width: .5em;113 height: .5em;114 border-radius: 50%;115 box-sizing: border-box;116 border: .15em solid rgb(14, 175, 228);117 background: white;118 }119 120 article h3 {121 font-weight: normal;122 font-size: .9em;123 color: #777;124 margin: 0;125 }126 127 article .content {128 margin-top: 1.5em;129 }130 131 article .content p {132 margin: 0;133 }134 </style>135 </head>136 <body>137 <div class="container" role="main">138 <h1>139 [NAME REDACTED]140 </h1>141 <aside>142 <a class="twitter" target="blank">143 [TWITTER REDACTED]144 </a>145 <a class="github" target="blank">146 [GITHUB REDACTED]147 </a>148 <a class="linkedin" target="blank">149 [LINKEDIN REDACTED]150 </a>151 </aside>152 <article>153 <h2>154 Engineer Manager155 </h2>156 <h3>157 <a target="blank">158 Mozilla159 </a>160 , France, May 2015 » Now161 </h3>162 <div class="content">163 <p>164 Managing a part of the Firefox developer tools engineering team and owner of the Inspector tool.165 </p>166 </div>167 </article>168 <article>169 <h2>170 Senior Development Engineer171 </h2>172 <h3>173 <a target="blank">174 Mozilla175 </a>176 , France, August 2013 » May 2015177 </h3>178 <div class="content">179 <p>180 Working on the Firefox developer tools, in charge of the HTML/CSS inspector part.181 </p>182 </div>183 </article>184 <article>185 <h2>186 Senior Web Development Engineer187 </h2>188 <h3>189 <a target="blank">190 Amadeus191 </a>192 , France, July 2012 » August 2013193 </h3>194 <div class="content">195 <p>196 Working on the next generation mission-critical HTML5 user interfaces for the Airport IT industry.197 <br>198 Targetting modern browsers using HTML5, CSS3 and client-side templating.199 </p>200 </div>201 </article>202 <article>203 <h2>204 Team Leader205 </h2>206 <h3>207 <a target="blank">208 Amadeus209 </a>210 , France, June 2009 » July 2012211 </h3>212 <div class="content">213 <p>214 In charge of the team developing the Amadeus215 <a target="blank">216 aria templates217 </a>218 web user interface framework.219 <br>220 Team focused on delivering a fast, reliable and scalable software that enables professional ajax-based web applications to be built.221 <br>222 I helped create the team, put processes in place (introduced SCRUM methodology) and I managed it for about 3 years to make it the official Amadeus UI framework, used by hundreds within the company, and now also open sourced.223 </p>224 </div>225 </article>226 <article>227 <h2>228 Web Development Engineer229 </h2>230 <h3>231 <a target="blank">232 Amadeus233 </a>234 , France, January 2008 » May 2009235 </h3>236 <div class="content">237 <p>238 Using a variety of technologies from Java/J2EE to Ajax, Javascript, HTML and CSS, I participated in the design/architecture, development and maintenance of the Amadeus' client/server framework.239 <br>240 Helping and training other development teams using the framework to implement web applications for travel agencies and airlines.241 <br>242 During that experience, I also worked on one of Amadeus' airlines retail sites engine, primarily focused on improving the Javascript and CSS layers of the application.243 </p>244 </div>245 </article>246 <article>247 <h2>248 Web Development Engineer249 </h2>250 <h3>251 <a target="blank">252 Astek253 </a>254 , France, July 2006 » January 2008255 </h3>256 <div class="content">257 <p>258 Software engineer contracting for Amadeus, working on259 <a target="blank">260 aircanada.com261 </a>262 .263 <br>264 Implemented and maintained several of the booking pages, implementing mockups provided by the customer, and especially helping on the CSS part.265 </p>266 </div>267 </article>268 <article>269 <h2>270 Web Designer/Developer271 </h2>272 <h3>273 <a target="blank">274 Zoe Communications275 </a>276 , New Zealand, June 2004 » February 2006277 </h3>278 <div class="content">279 <p>280 Web developer and designer for small to medium size New Zealand companies.281 <br>282 Responsible for the complete design phase, from early meetings with clients, to mockup proposals and final working HTML versions.283 <br>284 Development of the site using PHP/MySQL and an internal CMS.285 </p>286 </div>287 </article>288 </div>289 </body>290</html>291