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

root10414.html

10414.html109 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@font-face {15  font-family: 'Open Sans';16  font-style: normal;17  font-weight: 300;18  font-stretch: normal;19  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVc.ttf) format('truetype');20}21@font-face {22  font-family: 'Open Sans';23  font-style: normal;24  font-weight: 400;25  font-stretch: normal;26  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');27}28@font-face {29  font-family: 'Open Sans';30  font-style: normal;31  font-weight: 500;32  font-stretch: normal;33  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4gaVc.ttf) format('truetype');34}35@font-face {36  font-family: 'Open Sans';37  font-style: normal;38  font-weight: 600;39  font-stretch: normal;40  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4gaVc.ttf) format('truetype');41}42@font-face {43  font-family: 'Open Sans';44  font-style: normal;45  font-weight: 800;46  font-stretch: normal;47  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1x4gaVc.ttf) format('truetype');48}49  </style>50  <title>51   Coming Soon Page52  </title>53  <meta charset="utf-8">54  <meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">55  <style type="text/css">56   body {57			    margin: 0;58			    padding: 0;59			}60			.column1 {61			    background: #111;62			    width: 50%;63			    height: 100%;64			    float: left;65			}66			.column2 {67			    background: #690;68			    width: 50%;69			    height: 100%;70			    float: left;71			}72			.contents {73			    position: absolute;74			    top: 30%; color: #fff;75			    text-align: center;76			    margin: 0 auto;77			    width: 98%;78			    font-family: open sans;79			}80			.contents h3 {81                font-weight: 200;82                font-size: 26px;83                text-transform: uppercase;84                letter-spacing: 2px;85            }86			.title{text-transform: uppercase; font-size: 80px;}87  </style>88 </head>89 <body>90  <div class="column1">91  </div>92  <div class="column2">93  </div>94  <div class="contents">95   <h1 class="title">96    <span1>97     Global98    </span1>99    <span2>100     Jobs101    </span2>102   </h1>103   <h3>104    Hello, We will be right back very shortly.105   </h3>106  </div>107 </body>108</html>109