Datasetpublic

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.

sourceHugging Faceodc-byupdated 3y agoView on Hugging Face

22likes1.8kdownloads

root4405.html

4405.html115 linesDownload Raw Back to root

1<html>2 <head>3  <style>4   body {5        font-family: ProximaNova;6        font-size: 15px;7        font-style: normal;8        font-stretch: normal;9        line-height: 1;10        letter-spacing: normal;11        margin: 0;12      }13 14      .button {15        border-radius: 3px;16        background-color: #0069ff;17        color: #ffffff;18        display: flex;19        flex-direction: column;20        height: 48px;21        justify-content: center;22        text-decoration: none;23        width: 148px;24      }25 26      .content {27        align-items: center;28        border: solid 2px #f1f1f1;29        border-radius: 3px;30        display: flex;31        flex-direction: column;32        margin: 32px auto;33        padding: 32px;34        text-align: center;35        width: 960px;36      }37      38      .content_min {39        align-items: center;40        border: solid 2px #f3f3f3;41        background-color: #fdfdfd;42        border-radius: 3px;43        display: flex;44        flex-direction: column;45        margin: 8px auto;46        padding: 8px;47        text-align: center;48        width: 860px;49      }50 51      .copyright {52        color: #99999999;53        font-size: 13px;54        margin-left: 10px;55      }56 57      .description {58        color: #676767;59      }60 61      .empty-access {62        height: 220px;63        margin-bottom: -20px;64      }65 66      .header {67        align-items: center;68        display: flex;69        margin: 15px;70      }71 72      .logo {73        height: 30px;74        color: #999999;75        width: 30px;76      }77 78      .title {79        font-family: ProximaNova;80        font-size: 21px;81        font-weight: 600;82        color: #444444;83      }84  </style>85 </head>86 <body>87  <div class="header">88   <div class="copyright">89    &copy; 2023 DigitalOcean, LLC. All rights reserved.90   </div>91  </div>92  <div class="content">93   <h1 class="title">94    Your LEMP stack was successfully installed, SSH into the droplet to start using it.95   </h1>96   <div class="content_min">97    <p class="description">98     See the LEMP 1-Click Quickstart guide for detailed assistance.99    </p>100    <a class="button">101     Quickstart Guide102    </a>103   </div>104   <div class="content_min">105    <p class="description">106     Problem? Submit a question to our Q&amp;A platform and get help from the community.107    </p>108    <a class="button">109     Ask a Question110    </a>111   </div>112  </div>113 </body>114</html>115