SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA 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 "easy" version of the Design2Code testset 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.
6379
1<!DOCTYPE html>2<html>3 <head>4 <style>5 /* Austin Henley6 Bare bones CSS template7*/8 9body {10 font-family:Helvetica, sans-serif;11 margin:auto;12 padding:15px;13 margin-top:-20px;14 max-width:700px;15 font-size:16px;16 text-align:left;17 background-color:white;18 position:relative;19}20 21sup {22 font-size: x-small;23 line-height: 0.0;24}25 26sub {27 font-size: x-small;28} 29 30a {31 text-decoration:none;32}33 34li {35 margin:0.25em;36 font-size:96%;37}38 39h1 {40 margin-top:0.8em;41 margin-bottom:0.8em;42 font-size:1.5em;43}44 45h1.blogtitle {46 margin-bottom:0.0em;47}48 49h2 {50 margin-top:1.4em;51 margin-bottom:0.25em;52 font-size:1.35em;53}54 55h3, h4 {56 margin-top:1.4em;57 margin-bottom:0.25em;58}59 60hr {61 margin-top:0.75em;62 margin-bottom:0.75em;63}64 65td {66 border-bottom:2px solid #CCCCCC;67}68 69pre {70 overflow-x:auto;71}72 73p {74 line-height:1.15em;75 margin-bottom:1.15em;76}77 78ul {79 margin-bottom:1.35em;80}81 82blockquote {83 color: navy;84 text-align: center;85 font-style: italic;86 background: #dddddd;87 border-radius: 8px;88 margin: auto;89 margin-top: 1.4em;90 margin-bottom: 1.4em;91 padding: 0.6em 8px;92 width: 80%;93}94 95blockquote p {96 display: inline;97}98 99.dense p {100 margin-top:0.2em;101 margin-bottom:0em;102 line-height:1.3em;103}104 105.news li {106 font-size:90%;107}108 109.right {110 text-align:right;111 margin-right:40px;112}113 114.center {115 display: block;116 margin-left: auto;117 margin-right: auto;118 }119 120.card {121 padding: 12px;122}123 124.headshot {125 width: 172px;126 height: 200px; 127 margin: 0px 0px 0 0;128 border-radius: 10%;129 object-fit: cover; 130 object-position: 0% 8%;131}132 133.row {134 display: flex;135 flex-wrap: wrap;136}137 138.text-container {139 flex: 2;140 min-width: 250px;141 display: flex;142 flex-direction: column;143 justify-content: space-between;144}145 146.photo-container {147 flex-basis: 100px;148 margin: 20px 20px 10px 35px;149}150 151.links {152 margin-bottom: 1em;153}154 155/* For mobile */156@media only screen and (max-width: 540px) {157 .photo-container {158 margin-left: 0px;159 }160 161 .text-container {162 margin-top: -1em;163 }164 165 .links {166 margin-bottom: 0; 167 }168}169 </style>170 <title>171 [Name Redacted]172 </title>173 <meta charset="utf-8">174 <meta content="I work on AI + developer tools and blog my adventures." name="description">175 <meta content="[Name Redacted]" name="author">176 <meta content="width=device-width, initial-scale=1.0" name="viewport">177 <meta content="[Name Redacted] - I work on AI + dev tools" property="og:title">178 <meta content="I work on AI + developer tools and blog my adventures." property="og:description">179 <meta content="" property="og:image">180 <meta content="" property="og:url">181 <meta content="summary_large_image" name="twitter:card">182 </head>183 <body>184 <div class="card">185 <div class="row">186 <div class="photo-container">187 <img class="headshot" src="rick.jpg">188 </div>189 <div class="text-container">190 <div class="content">191 <h2 class="name-header">192 [Name Redacted]193 </h2>194 <p>195 Associate Teaching Professor196 <br>197 Software and Societal Systems Department198 <br>199 School of Computer Science200 <br>201 Carnegie Mellon University202 </p>203 </div>204 <div class="links">205 <a>206 [Email Redacted]207 </a>208 <br>209 <a>210 [Username Redacted]211 </a>212 <br>213 <a>214 [Github Redacted]215 </a>216 <br>217 </div>218 </div>219 </div>220 </div>221 <hr>222 <div style="text-align: center;">223 <a style="text-decoration: underline;">224 Home225 </a>226 |227 <a>228 Publications229 </a>230 |231 <a>232 Teaching233 </a>234 |235 <a>236 Blog237 </a>238 </div>239 <hr>240 <p>241 I'm a computer scientist working on AI and developer tools.242 <a>243 declined244 </a>245 the NSF CAREER Award,246 <a>247 taught248 </a>249 amazing students, built novel250 <a>251 tools252 </a>253 for code and data, went through a startup254 <a>255 acquisition256 </a>257 , and learned valuable258 <a>259 lessons260 </a>261 . I also spend a lot of time262 <a>263 writing264 </a>265 about my side projects.266 </p>267 <ul>268 <li>269 2024–270 <i>271 present272 </i>273 , Associate Teaching Professor, Carnegie Mellon University274 </li>275 <li>276 2023–2024, VP of Engineering, Swiftly277 </li>278 <li>279 2023, CTO, BYBE (280 <i>281 acquired282 </i>283 )284 </li>285 <li>286 2022–2023, Senior Researcher, Microsoft287 </li>288 </ul>289 <br>290 <br>291 </body>292</html>293