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 UninstallGuard(卸载守护者) - forbid removing Apps - TheBigBoss.org - iPhone software, apps, games, accesories, ringtones, themes, reviews321 </title>322 <base target="_blank">323 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">324 <meta content="A page about iPhone Software." name="description">325 <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0" name="viewport">326 </head>327 <body>328 <panel>329 <fieldset id="description" style="clear:both">330 <label>331 Description332 </label>333 <div>334 Uninstall Guard can be able to forbid the Apps to be uninstalled. So avoid the Apps you care about (like Facebook, WhatsApp, Line, Pokemon GO, WeChat, Messenger), deleted by children, others or by incorrect operations.335 <br>336 <br>337 卸载守护者，能够设定应用不可卸载。从而避免你关心的应用（微信、支付宝、抖音等），被小孩、他人或误操作而删除。338 <br>339 <br>340 <div style="text-align:center;">341 <a style="display:block; color:inherit !important;" target="_new">342 <img src="rick.jpg" width="268">343 </a>344 </div>345 <div style="text-align:center;">346 <a style="display:block; color:inherit !important;" target="_new">347 <img src="rick.jpg" width="268">348 </a>349 </div>350 <div style="text-align:center;">351 <a style="display:block; color:inherit !important;" target="_new">352 <img src="rick.jpg" width="268">353 </a>354 </div>355 <br>356 See larger Screenshots below..357 </div>358 </fieldset>359 <fieldset>360 <a class="button" target="_new">361 View All Screenshots362 </a>363 </fieldset>364 </panel>365 <center>366 Advertisements367 </center>368 <br>369 <panel>370 <fieldset style="clear:both">371 <label>372 What's New373 </label>374 <div>375 - supporting rootless.376 </div>377 </fieldset>378 </panel>379 <panel>380 <fieldset style="clear:both">381 <label>382 Information383 </label>384 <div>385 <table border="0" class="information" cols="2">386 <tbody>387 <tr>388 <td class="key">389 Updated390 </td>391 <td class="detail">392 May 16, 2023393 </td>394 </tr>395 <tr>396 <td class="key">397 License398 </td>399 <td class="detail">400 Free Package401 </td>402 </tr>403 </tbody>404 </table>405 </div>406 </fieldset>407 <fieldset style="clear:both">408 <a class="button">409 More Packages from Developer410 </a>411 </fieldset>412 <!--413 <fieldset style="clear:both">414 <a class="button" >Advertise in Cydia</a>415 </fieldset>416 417-->418 </panel>419 <panel>420 <fieldset style="clear:both">421 <a class="button">422 Submit Your Tweak or App423 </a>424 </fieldset>425 <fieldset style="clear:both">426 <a class="button">427 Follow @BigBoss on Twitter428 </a>429 </fieldset>430 </panel>431 <center>432 <a>433 Terms and Conditions434 </a>435 </center>436 <br>437 <center>438 Advertisements439 </center>440 <br>441 </body>442</html>443