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<html>2 <head>3 <style>4 5.ios9-lightblue {color:#54C7FC;}6.ios9-blue {color:#0076FF;}7.ios9-darkpink {color:#FF2851;}8.ios9-red {color:#FF3824;}9.ios9-orange {color:#FF9600;}10.ios9-yellow {color:#FFCD00;}11.ios9-lightgreen {color:#44DB5E;}12.ios9-darkgray {color:#8E8E93;}13 14#unused-body {15margin-top:0px !important; padding-top:9px !important; -moz-box-shadow: inset 0 8px 6px -6px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 8px 6px -6px rgba(0,0,0,0.2); box-shadow: inset 0 8px 6px -6px rgba(0,0,0,0.2);16}17 18body {19 -webkit-text-size-adjust:none;20 -webkit-touch-callout:none;21 -webkit-user-select:text;22 -webkit-tap-highlight-color: rgba(0,0,0,0);23 margin: 9px auto;24 width: device-width;25 max-width: 414px !important;26 font-family: ".SFNSText-Medium", -apple-system, "Helvetica Neue", "Lucida Grande", -apple-system-font, system-ui, "SFProDisplay-Regular", "BlinkMacSystemFont", sans-serif;27 background-color: #efeff4;28 min-font-size: 13px;29 font-size: 13px;30 text-align:center;31}32 33body > panel {34 display: block;35 width: 100%;36 margin: 0;37 border:0;38 border-top: 1px solid #c8c7cc;39 border-bottom: 1px solid #c8c7cc;40 margin-top:9px;41 margin-bottom:9px;42 background-color: white;43 text-align:left;44}45 46body > panel > fieldset {47 display: block;48 padding: 0 15px;49 background-color: white;50 color: #666;51 line-height: 18px;52 border:0;53}54 55body > panel > fieldset+fieldset {56 margin-left:15px;57 padding-left: 0;58 border-top: 1px solid #c8c7cc;59}60 61body > panel > fieldset:last-child {62 padding-bottom:1px;63}64 65body > panel > fieldset.alert {66 font-weight: bold;67 font-size: 15px;68 padding-top: 14px;69 padding-bottom: 0px;70 text-align:center;71}72 73body > panel > fieldset.alert > div > a {74 display:block;75 width:100%;76}77 78body > panel > fieldset.alert > div > a:link, body > panel > fieldset.alert > div > a:visited {79 color:white;80 text-decoration:none;81}82 83body > panel > fieldset.warn {84 color: white;85 background-color: #ff3824;86}87 88body > panel > fieldset.okay {89 color: white;90 background-color: MediumSeaGreen;91}92 93body > panel > fieldset > label {94 font-size: 17px;95 display: block;96 color:black;97 position:relative;98 padding-top: 13.5px;99 padding-bottom: 14px;100}101 102body > panel > fieldset > label > a > img.icon,103body > panel > fieldset > div > img.icon {104 display:none;105}106 107body > panel > fieldset > div a:link, body > panel > fieldset > div a:visited {108 text-decoration:none;109 color: #0076ff;110}111 112body > panel > fieldset > div > p a:link, body > panel > fieldset > div > p a:visited {113 text-decoration:none;114 color: #0076ff;115}116 117body > panel > fieldset > label a:link, body > panel > fieldset > label a:visited {118 text-decoration:none;119 color: #0076ff;120}121 122body > panel > fieldset > a.button:link, body > panel > fieldset > a.button:visited {123 text-decoration:none;124 color: #0076ff;125}126 127body > panel > fieldset > a.button {128 display: block;129 width: 100%;130 padding-left: 0;131 padding-right: 0;132 font-size: 17px;133 display: block;134 color:black;135 position:relative;136 padding-top: 11.5px;137 padding-bottom: 12px;138 margin-top:2px;139 margin-bottom:2px;140 background-repeat: no-repeat;141 background-image: url(ios7-chevron.png);142 background-position: right;143}144 145@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {146 body > panel > fieldset > a.button {147 background-image: url([EMAIL REDACTED]);148 background-size:8px 13px;149 }150}151 152body > panel > fieldset > div {153padding-bottom: 14px;154}155 156body > panel > fieldset > div iframe {157 display:block;158 margin:8px auto;159 outline: solid rgba(204,204,204,0.3) 1px;160 outline-offset: 0px;161 zoom: 1.08;162 -moz-transform: scale(1.08);163}164 165body > panel > fieldset > div {166 margin-top:0px167 margin-bottom:8px;168}169 170body > panel > fieldset > div > p+p {171 margin-top:9px;172}173 174body > panel > fieldset > div img {175 outline: solid rgba(204,204,204,0.3) 1px;176 outline-offset: -1px;177 zoom: 1.05;178 -moz-transform: scale(1.05);179 margin:5px 2px180}181 182body > panel > fieldset > div * {183 font-size: inherit !important;184}185 186body > panel > fieldset > div > table.information {187 margin-left:34px;188}189 190body > panel > fieldset > div > table.information > tbody > tr > td {191 padding-bottom: 5px;192}193 194body > panel > fieldset > div > table.information > tbody > tr:last-child > td {195 padding-bottom: 0px;196}197 198body > panel > fieldset > div > table.information > tbody > tr > td.key {199 color:#999;200 padding-right:14px;201 text-align:right;202}203 204ul, ol {205 padding: 8px 18px;206}207 208 209 210 211 212div.header {213 display:none;214}215 216div.pic {217 display:none;218}219 220fieldset.black {221 display:none;222}223 224 225 226@keyframes screenshots {227 from {228 opacity: 0;229 -webkit-transform: translate(0, 200px);230 }231 to {232 opacity: 1;233 -webkit-transform: none;234 }235}236 237body.pinstripe {238 text-align:center;239 background-color: #e9e9ee !important;240 -webkit-animation-duration: .5s;241 -webkit-animation-fill-mode: both;242 -webkit-animation-name: screenshots;243}244 245body.pinstripe > panel{246 background:none !important;247 text-align:center;248 border:0;249}250 251body.pinstripe > panel > fieldset > div > p {252 text-align:left;253 margin:15px inherit;254}255 256 257 258body.pinstripe > panel > img{259 margin:8px 0;260 outline: solid rgba(204,204,204,0.3) 1px;261 outline-offset: -1px;262 zoom: 0.88;263 -moz-transform: scale(0.88);264 265}266 267body.pinstripe > panel > div#scroller {268 text-align:center !important;269}270 271body.pinstripe > panel > div#scroller > div.horizontal-scroll-area {272 width:320px !important;273 margin: 0 auto;274}275 276body.pinstripe > panel > div#scroller > div.horizontal-scroll-area > img {277 margin:8px 0;278}279 280body div.center {281 text-align:left;282 margin:15px;283}284 285@media (min-width: 375px) {286 body > panel > fieldset > div img{287 zoom: 1.25;288 -moz-transform: scale(1.25);289 }290 291 body > panel > fieldset > div iframe {292 zoom: 1.27;293 -moz-transform: scale(1.27);294 }295 296 body.pinstripe > panel > img {297 zoom: 1.05;298 -moz-transform: scale(1.05);299 }300}301 302@media (min-width: 414px) {303 body > panel > fieldset > div img{304 zoom: 1.38;305 -moz-transform: scale(1.38);306 }307 308 body > panel > fieldset > div iframe {309 zoom: 1.42;310 -moz-transform: scale(1.42);311 }312 313 body.pinstripe > panel > img {314 zoom: 1.18;315 -moz-transform: scale(1.18);316 }317}318 </style>319 <title>320 Signal Booster - TheBigBoss.org - iPhone software, apps, games, accesories, ringtones, themes, reviews321 </title>322 <base target="_blank">323 <meta content="" property="og:image">324 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">325 <meta content="A page about iPhone Software." name="description">326 <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0" name="viewport">327 </head>328 <body>329 <panel>330 <fieldset id="description" style="clear:both">331 <label>332 Description333 </label>334 <div>335 <p>336 Compatible with iOS 8 and up.337 <br>338 <br>339 Boost a weak signal with one touch!340 <br>341 Your iPhone's signal can get gradually weaker as it sits idle and moves through buildings.342 <br>343 This app resets your signal so that your iPhone will devote its resources to a new and stronger signal. It aims to give you the strongest possible voice/data signal at your current location.344 <br>345 <br>346 All with one touch!347 <br>348 Go for the best possible call quality and faster download times!349 <br>350 Save time re-starting your iPhone or fiddling with utilities. Boost a weak signal with one touch!351 <br>352 Top 5 on Blackberry and a great value!353 <br>354 </p>355 <p>356 </p>357 <div style="text-align:center">358 <a style="display:block; color:inherit !important;" target="_new">359 <a style="display:block; color:inherit !important;" target="_new">360 <img height"198" src="rick.jpg" width="132">361 <img height"198" src="rick.jpg" width="132">362 </a>363 </a>364 </div>365 <p>366 See larger Screenshots below..367 </p>368 </div>369 </fieldset>370 <fieldset>371 <a class="button" target="_new">372 View All Screenshots373 </a>374 </fieldset>375 </panel>376 <center>377 Advertisements378 </center>379 <br>380 <panel>381 <fieldset style="clear:both">382 <label>383 What's New384 </label>385 <div>386 iOS 8.4 support387 <br>388 iPhone 6/6+ screen size support389 <br>390 <!--391v 1.3<br>392Optimized for iOS 7<br>393Better display for iPhone 3gs, 4/4s, 5/5s<br>394Compatible with iOS 5, 6, or 7<br>395Shows gain in dBM from previous boost<br>396Faster performance<br>397 398 399v 1.2<br>400Signal Booster now shows the gain in signal dBm from your last boost<Br>401Faster performance<br>402-->403 </div>404 </fieldset>405 </panel>406 <panel>407 <fieldset style="clear:both">408 <label>409 Information410 </label>411 <div>412 <table border="0" class="information" cols="2">413 <tbody>414 <tr>415 <td class="key">416 Updated417 </td>418 <td class="detail">419 November 11, 2015420 </td>421 </tr>422 <tr>423 <td class="key">424 License425 </td>426 <td class="detail">427 Commercial Package428 </td>429 </tr>430 <tr>431 <td class="key">432 Suggested Price433 </td>434 <td class="detail">435 $ 0.99436 </td>437 </tr>438 </tbody>439 </table>440 </div>441 </fieldset>442 <fieldset style="clear:both">443 <a class="button">444 Developer Website445 </a>446 </fieldset>447 <fieldset style="clear:both">448 <a class="button">449 More Packages from Developer450 </a>451 </fieldset>452 <!--453 <fieldset style="clear:both">454 <a class="button" >Advertise in Cydia</a>455 </fieldset>456 457-->458 </panel>459 <panel>460 <fieldset style="clear:both">461 <a class="button">462 Submit Your Tweak or App463 </a>464 </fieldset>465 <fieldset style="clear:both">466 <a class="button">467 Follow @BigBoss on Twitter468 </a>469 </fieldset>470 </panel>471 <center>472 <a>473 Terms and Conditions474 </a>475 </center>476 <br>477 <center>478 Advertisements479 </center>480 <br>481 </body>482</html>483