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.7kdownloads

root2141.html

2141.html51 linesDownload Raw Back to root

1<html>2 <head>3  <style>4   @font-face {5  font-family: 'Open Sans';6  font-style: normal;7  font-weight: 400;8  font-stretch: normal;9  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');10}11 12 13 14        body.holdingpage-main{background:url(/images/brands/menai/menai_bridge_background.jpg) no-repeat center center fixed;background-size:cover;font-family:"Arial", sans-serif;text-align:center;color:#fff;margin:0;}15        svg{max-height:40px;}16        h1{text-shadow:0px 2px 1px #000;font-size:1.2rem;}17        p{font-size:1rem;text-shadow:0px 2px 1px #000;}18        a{color:#FFF;font-weight:bold;text-decoration:none;text-shadow:0px 1px 1px #000;}19        a:hover{color:#185ea2;}20        .outer{position:relative;height:100%;width:100%;background-color:rgba(0,0,0,0.3);}21        .middle{position:absolute;top:50%;left:50%;width:90%;transform:translateY(-50%) translateX(-50%);}22        .inner{margin-left:auto;margin-right:auto;max-width:1000px;text-align:center;}23        @media only screen and (min-width: 768px){24            h1{font-size:2rem;text-shadow:0px 2px 1px #000;}25            p{font-size:1.3rem;}26        }27  </style>28 </head>29 <body class="holdingpage-main">30  <div class="outer">31   <div class="middle">32    <div class="inner">33     <h1>34      Explore North Wales Coming Soon!35     </h1>36     <p>37      Explore North Wales will offer a host of handpicked local information. Discover a wealth of things to see and do, local events, great places to eat and drink and so many places to visit.38     </p>39     <p>40      Team Menai Holidays41     </p>42     <br>43     <a style="color:white;">44      Visit our Website45     </a>46    </div>47   </div>48  </div>49 </body>50</html>51