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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">2<html xmlns="">3 <head>4 <style>5 @charset "utf-8";6/* CSS Document */7 8p{9 font-family: Verdana, sans-serif;10 font-size:11px;11 color: #000000;12 line-height: 12px;13 padding: 0px;14 padding-right: 0px;15 text-align: left;16}17.glamtext {18 font-family: verdana, sans-serif;19 font-size: 11px;20 font-style: normal;21 line-height: 18px;22 font-weight: normal;23 color: #000000;24 padding-right: 15px;25 text-align: left;26 text-decoration: none;27}28.glamtext-bold {29 font-family: verdana, sans-serif;30 font-size: 11px;31 font-style: normal;32 line-height: 18px;33 font-weight: bold;34 text-decoration: none;35}36 37.glamtextcenter {38 font-family: verdana, sans-serif;39 font-size: 11px;40 line-height: 18px;41 color: #000000;42 text-decoration: none;43 text-align: center;44 font-weight: normal;45}46 47 48 49.bold {50 font-family: Verdana, sans-serif;51 font-size: 11px;52 line-height: 18px;53 font-weight: bold;54 color: #990000;55}56.footer {57 font-family: Verdana, sans-serif;58 font-size: 10px;59 font-style: normal;60 line-height: normal;61 font-weight: normal;62 color: #666666;63 text-decoration: none;64}65 66 67.navigation{68 font-family: Verdana, sans-serif;69 font-size: 12px;70 font-style: normal;71 font-weight: bold;72 color: #003366;73 text-decoration: none;74 display: block;75 padding: 12px;76 width: 170px;77}78 79.faq-text{80 font-family: Verdana, sans-serif;81 font-size: 12px;82 font-style: normal;83 font-weight: bold;84 color: #003366;85}86 87 88.retired-text{89 font-family: Verdana, sans-serif;90 font-size: 24px;91 font-style: normal;92 font-weight: bold;93 color: #003366;94}95 96.navigation:hover{97 font-family: Verdana, sans-serif;98 font-size: 12px;99 font-style: normal;100 font-weight: bold;101 color: #003366;102 text-decoration: none;103 background-color: #CCCCCC;104 display: block;105 padding: 12px;106 width: 170px;107}108.title {109 font-family: verdana, sans-serif;110 font-size: 11px;111 font-style: normal;112 font-weight: bold;113 color: #003366;114 text-decoration: none;115 line-height: 12px;116 text-align: center;117}118.ptitle {119 font-family: verdana, sans-serif;120 font-size: 12px;121 font-style: normal;122 line-height: 18px;123 font-weight: bold;124 font-variant: normal;125 color: #003366;126 text-decoration: none;127 text-align: center;128}129.bullets {130 font-family: verdana, sans-serif;131 font-size: 10px;132 font-style: normal;133 line-height: 13px;134 font-weight: normal;135 color: #000000;136 text-decoration: none;137 list-style-type: disc;138 padding-left: 0px;139 text-align: left;140 list-style-position: outside;141 text-indent: 0px;142}143.faq {144 font-family: verdana, sans-serif;145 font-size: 11px;146 line-height: 25px;147 font-weight: bold;148 color: #003366;149 text-decoration: none;150 text-align: left;151}152.faq:hover {153 font-family: verdana, sans-serif;154 font-size: 11px;155 line-height: 25px;156 font-weight: bold;157 color: #003366;158 text-decoration: underline;159 text-align: left;160}161.backtotop {162 font-family: verdana, sans-serif;163 font-size: 9px;164 font-style: normal;165 font-weight: normal;166 color: #003366;167 text-decoration: none;168}169.backtotop:hover {170 font-family: verdana, sans-serif;171 font-size: 9px;172 font-style: normal;173 font-weight: normal;174 color: #003366;175 text-decoration: underline;176}177.bold-header {178 font-family: Verdana, sans-serif;179 color: #990000;180 font-size: 14px;181 line-height: 18px;182 font-weight: bold;183 text-decoration: none;184}185.url {186 font-family: verdana, sans-serif;187 font-size: 11px;188 line-height: 15px;189 font-weight: normal;190 color: #003366;191 text-decoration: none;192 text-align: left;193}194 195.url:hover {196 font-family: verdana, sans-serif;197 font-size: 11px;198 line-height: 15px;199 font-weight: normal;200 color: #003366;201 text-decoration: underline;202 text-align: left;203}204.dealerlist {205 font-family: verdana, sans-serif;206}207.dealerlist:hover {208 font-family: verdana, sans-serif;209 background-color: #F8F8F8;210}211 </style>212 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">213 <title>214 Welcome to Chambrer.com215 </title>216 </head>217 <body>218 <div align="center">219 <table border="0" cellpadding="0" cellspacing="0" width="1000">220 <tbody>221 <tr>222 <td>223 <a>224 <img border="0" height="128" src="rick.jpg" width="1000">225 </a>226 </td>227 </tr>228 </tbody>229 </table>230 <table background="images/background.gif" border="0" cellpadding="10" cellspacing="10" width="1000">231 <tbody>232 <tr>233 <td height="0" valign="top" width="212">234 <div align="left">235 <a class="navigation">236 Home237 </a>238 <a class="navigation">239 Wine Bars240 </a>241 <a class="navigation">242 Wine Cellars & Coolers243 </a>244 <a class="navigation">245 Beer Dispensers246 </a>247 <a class="navigation">248 FAQ & Support249 </a>250 <a class="navigation">251 Contact Us252 </a>253 </div>254 </td>255 <td valign="top" width="718">256 <div align="left">257 <table align="center" border="0" cellpadding="5" cellspacing="5" width="718">258 <tbody>259 <tr>260 <td>261 <div align="center">262 <a id="top" name="top">263 <img height="52" src="rick.jpg" width="478">264 </a>265 </div>266 <div align="center">267 <span class="glamtextcenter">268 <br>269 Customer Support: 1-[PHONE REDACTED]270 <br>271 <a>272 [EMAIL REDACTED]273 </a>274 </span>275 </div>276 <p>277 <a class="faq" target="_self">278 Q: Where can I buy a Chambrer Wine Cellar?279 </a>280 <br>281 <a class="faq" target="_self">282 Q: Do the Chambrer Wine Cellars have a compressor?283 </a>284 <br>285 <a class="faq" target="_self">286 Q: Do the Wine Cellars contain compressed gasses like a regular refrigerator?287 </a>288 <br>289 <a class="faq" target="_self">290 Q: Do the Chambrer Wine Cellars use a large amount of energy?291 </a>292 <br>293 <a class="faq" target="_self">294 Q: Why does the temperature display flash when I adjust the temperature using the (+) or (-) or (preset) buttons?295 </a>296 <br>297 <a class="faq" target="_self">298 Q: What does a non-blinking display mean?299 </a>300 <br>301 <a class="faq" target="_self">302 Q: Is it normal for the fan to be always running?303 </a>304 <br>305 <a class="faq" target="_self">306 Q: The unit keeps on turning on and off every couple of minutes. Why?307 </a>308 <br>309 <a class="faq" target="_self">310 Q: If the light bulb burns out, is it replaceable?311 </a>312 <br>313 <a class="faq" target="_self">314 Q: Can I recess my Chambrer Wine Cellar into a cupboard?315 </a>316 <br>317 <a class="faq" target="_self">318 Q: What is the operating temperature of the Chambrer Wine Cellar?319 </a>320 <br>321 <a class="faq" target="_self">322 Q: Do I have to clean my Chambrer Wine Cellar?323 </a>324 <br>325 <a class="faq" target="_self">326 Q: Should I clean the outside fans of my Chambrer Wine Cellar?327 </a>328 <br>329 <a class="faq" target="_self">330 Q: How do you clean the outside fans of my Chambrer Wine Cellar?331 </a>332 <br>333 <a class="faq" target="_self">334 Q: How often should I clean the outside fans of my Chambrer Wine Cellar?335 </a>336 <br>337 <br>338 <br>339 </p>340 </td>341 </tr>342 <tr>343 <td bgcolor="#f0f0f0">344 <p class="glamtext-bold">345 <a id="wherebuy" name="wherebuy">346 </a>347 Q: Where can I buy a Chambrer Wine Cellar?348 </p>349 <p class="glamtext">350 A: Please351 <a>352 Contact us.353 </a>354 </p>355 <p>356 <a class="backtotop" target="_self">357 Back to top358 </a>359 </p>360 </td>361 </tr>362 <tr>363 <td>364 <p class="glamtext-bold">365 <a id="compressor" name="compressor">366 </a>367 Q: Do the Chambrer Wine Cellars have a compressor?368 </p>369 <p class="glamtext">370 A: No, there is no compressor inside the wine cellars. They use thermal-electrics to cool the interior using a Peltier System.371 </p>372 <p>373 <a class="backtotop" target="_self">374 Back to top375 </a>376 </p>377 </td>378 </tr>379 </tbody>380 </table>381 </div>382 </td>383 </tr>384 </tbody>385 </table>386 <table background="images/bottom.gif" border="0" cellpadding="0" cellspacing="0" width="1000">387 <tbody>388 <tr>389 <td class="footer" height="34" valign="top" width="240">390 <div align="center">391 </div>392 </td>393 <td class="footer" valign="top" width="260">394 <div align="center">395 <a class="footer">396 Privacy Policy397 </a>398 </div>399 </td>400 <td class="footer" height="34" valign="top" width="270">401 <div align="left">402 <a class="footer">403 Terms & Conditions404 </a>405 </div>406 </td>407 <td height="34" valign="top" width="230">408 <p align="center" class="footer">409 © Product Specialties Inc. 2009410 </p>411 </td>412 </tr>413 </tbody>414 </table>415 </div>416 </body>417</html>418