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>3 <head>4 <meta content="width=device-width, initial-scale=1" name="viewport">5 <title>6 Advertise your caravan with West Wales Caravans.7 </title>8 <meta canonical" content=" West Wales Caravans - advertise your caravan for rent9 10 <link rel=" name="description">11 <meta content="TRUE" name="MSSmartTagsPreventParsing">12 <meta content="e566474b37ba22f1" name="y_key">13 <meta content="AltaVista, AOL, Google, Yahoo, WebCrawler, Infoseek, Excite, HotBot, Lycos, LookSmart, UkIndex, UKPlus, MSN" name="SEARCH ENGINES">14 <meta content="general" name="rating">15 <meta content="DAILY" name="REVISIT-AFTER">16 <meta content="DAILY" name="UPDATED">17 <meta content="global" name="distribution">18 <meta content="index,follow" name="robots">19 <meta content="Rod Attrill - http://www.westwales-caravans.co.uk" name="author">20 <meta content="Copyright 2012 West Wales Caravans - All Rights Reserved." name="copyright">21 <meta content="K4+TerXdG2fyv/xRPJjY239UsBbwknHRZTlfKXfximU=" name="verify-v1">22 <style>23 body{24max-width: 900px;25margin: 10px auto !important;26padding: 10px;27float: none !important;28}29html {30font-family: "Lucida Sans", sans-serif;31}32 33html {34font-family: "Lucida Sans", sans-serif;35}36 37img {38 max-width: 100%;39 height: auto;40}41.header {42 43background-image: url('images_new/sky_bg.jpg');44color: black;45padding: 15px;46text-align: center47 48}49.button_blue {50background-color: #FFFFFF;51color: black;52border: 2px solid black;53 padding: 10px;54 border-radius: 15px;55font-size: 18px;56padding: 10px; 2px;57margin: 2px;58border: 1px solid #000000;59}60.button_blue {61box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);62}63 64.button:hover {65background-color: #B9D9FF;66}67.divwhite {68 display: inline-block;69 background-color: #FFF; 70 border-width: none;71 72 padding: 10px;73 text-align:center;74 }75 76 77.wrapper {78 position: relative;79 overflow: auto;80 background: #FFFFFF; }81#imagewithcaption {82float:left;83width: 250px;84text-align:center;85}86* SECTIONS */87.section {88 clear: both;89 padding: 10px;90 margin: 0px;91}92.info-div {93 float: left;94 width: 150px;95 margin: 0px 15px 5px 5px;96 padding: 5px;97 text-align: center;98}99 100.floating-box {101 display: inline-block;102 width: 350px;103 height: 250px;104 margin: 2px;105 padding: 0px;106 border: 1px solid #000000; 107 align: center; }108 109 #buttons {110 width: 750px;111align: center;112margin: auto;113padding: 5px;114 background-color: #FFF;115}116div.info {117 background-color: white;118 color: black;119 margin: 10px 0 10px 0;120 padding: 5px; 5px;121}122.footer {123background-image: url('images_new/sky_bg.jpg');124color: #ffffff;125text-align: center;126font-size: 12px;127padding: 15px;128}a:link {129text-decoration: none;130}131 </style>132 </head>133 <body bgproperties="fixed" style="background-color: rgb(245, 245, 220); background-image: url(images_new/background2.gif);">134 <div class="divwhite">135 <div class="header">136 <p align="center">137 <a name="top">138 </a>139 <img alt="Dolphin banner" border="0" height="57" src="rick.jpg" width="750">140 </p>141 <p align="center">142 143 <font color="#000080" size="4">144 Enquiries:145 </font>146 <font color="#2184B5">147 <font color="#000080" size="4">148 [PHONE REDACTED]149 <b>150 - 151 </b>152 email:153 </font>154 </font>155 <font color="#000080" size="4">156 [EMAIL REDACTED]157 </font>158 <font color="#2184B5">159 <font color="#000080" size="4">160 </font>161 <font color="#2184b5" size="3">162 <b>163 <br>164 <br>165 </b>166 <a>167 <button class="button button_blue">168 All Caravans169 </button>170 </a>171 <b>172 <a>173 <button class="button button_blue">174 Pet Friendly175 </button>176 </a>177 <a>178 <button class="button button_blue">179 Book Online180 </button>181 </a>182 <a>183 <button class="button button_blue">184 Cottages185 </button>186 </a>187 <a a target="_blank">188 <button class="button button_blue">189 New Quay190 </button>191 </a>192 </b>193 </font>194 </font>195 </p>196 </div>197 <font color="#2184B5">198 <font color="#2184b5" size="3">199 <b>200 </b>201 </font>202 </font>203 <font size="3">204 <p>205 <img alt="Advertising banner" border="0" height="261" src="rick.jpg" width="897">206 </p>207 </font>208 <font size="5">209 </font>210 <p>211 <font size="5">212 Advertise your Caravan213 </font>214 </p>215 <p style="text-align: left">216 Ads are displayed on our New Quay website -217 <a>218 www.newquay-westwales.co.uk219 </a>220 , 221and on222 <font size="3">223 the West Wales Caravans website.224 <br>225 <br>226 We only advertise caravans in West Wales at Quay West Caravan Park with private 227decking, or in nearby seafront locations.228 <br>229 <br>230 We are local. Our office is based in New Quay.231 <br>232 <br>233 <b>234 Advertising details235 </b>236 - no setup charge, no yearly fee, free photoshoot.237 </font>238 </p>239 <p style="text-align: left">240 <font size="3">241 Our office will take a deposit for your bookings by card online and then inform 242the guests how and when to send the balance of payment for the holiday directly 243to the owner.244 <br>245 <br>246 There is no set up charge or annual charge - just a low commission rate on 247bookings taken through this office.248 <br>249 <br>250 Owners are informed as soon as a booking is received.251 <br>252 <br>253 Your ad will include a photo gallery and description, a prices and availability 254calendar, updated as booked, a location map, link to terms and conditions, 255printable booking form, online booking form and online deposit payment facility 256through PayPal or card.257 </font>258 </p>259 <p style="text-align: left">260 Please call us on [PHONE REDACTED] with any questions.261 </p>262 <p>263 <font size="3">264 <br>265 <br>266 <br>267 <a>268 Click here for Terms and Conditions for advertisers269 </a>270 <br>271 <br>272 273 </font>274 </p>275 <font size="3">276 <div class="footer">277 <font color="#000000" size="3">278 <span>279 <font color="#0000FF" size="3">280 <p>281 <font color="#000000" size="3">282 <a>283 <button class="button_blue">284 Back to top of page285 </button>286 </a>287 <br>288 <br>289 [ADDRESS REDACTED] 290 call: [PHONE REDACTED]291 </font>292 </p>293 <p>294 <font color="#000000" size="3">295 <a>296 Advertise297 </a>298 I 299 <a>300 Owner info301 </a>302 I 303 <a target="_blank">304 New Quay305 </a>306 I 307 <a>308 Dolphins309 </a>310 I 311 <a target="_blank">312 Wildlife313 </a>314 I 315 <a target="_blank">316 Activities317 </a>318 I 319 <a target="_blank">320 Cottages321 </a>322 I 323 <a>324 Links325 </a>326 </font>327 </p>328 </font>329 </span>330 </font>331 <p>332 <b>333 </b>334 </p>335 <b>336 </b>337 </div>338 <b>339 <p>340 </p>341 </b>342 <b>343 </b>344 </font>345 </div>346 </body>347</html>348