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 html {5 height: 100%;6}7 8body {9 font-family: Arial, sans-serif;10 font-size: 36px;11 color: #666;12 background-color: white;13 margin: 0;14 height: 100%;15 display: flex;16 flex-direction: column;17 align-items: center; 18}19 20section {21 display: flex;22 flex-direction: column;23 align-items: center;24}25 26ul {27 list-style-type: none;28 padding-left: 0;29 display: flex;30 flex-direction: column;31 align-items: center;32 margin-top: 2em;33}34 35li {36 margin-bottom: 0.8em;37}38 39a:link {40 color: #666;41 text-decoration: none;42}43 44a:visited {45 color: #666;46}47 48 49.media {50 display: flex;51 flex-wrap: wrap;52 max-width: 800px;53 justify-content: center;54}55 56li.pane {57 margin-bottom: 2em;58 background-color: hsl(35, 10%, 97%);59 padding-left: 1.2em;60 padding-right: 1.2em;61 padding-top: 1.2em;62 padding-bottom: 1.2em;63 margin-bottom: 2em;64 border: 1px solid #ddd;65 box-shadow: 2px 2px #e8e8e8; 66}67 68.entry-meta {69 color: hsl(341, 10%, 20%);70 font-weight: bold;71}72 73.media-caption {74 flex-grow: 1;75 font-size: larger;76 margin-top: 1em;77}78 79.text-caption {80 color: #000;81}82 83.time-stamp {84 margin-bottom: 1em; 85}86 87.pane video,img {88 border-left: 1px solid hsla(30, 14%, 67%, 0.5);89 width: 100%;90}91 92@media all and (max-width: 414px) {93 body {94 font-size: 12px;95 }96 97 .name {98 font-size: 1em;99 }100 .project {101 max-width: 320px;102 }103}104 </style>105 <title>106 Autocomplete Jokes107 </title>108 <meta content="width=device-width, initial-scale=1" name="viewport">109 </head>110 <body>111 <div class="annotation hidden warning">112 </div>113 <h1>114 Autocomplete Jokes115 </h1>116 <section class="media">117 <ul class="media-list">118 <li class="pane">119 <div class="time-stamp entry-meta">120 <a>121 <time datetime="2018-03-18T13:17:03.305Z">122 2018-3-18 09:17:03123 </time>124 </a>125 </div>126 <div class="text-caption">127 Knock knock! Who's there?128 </div>129 </li>130 <li class="pane">131 <div class="time-stamp entry-meta">132 <a>133 <time datetime="2018-03-18T10:17:03.076Z">134 2018-3-18 06:17:03135 </time>136 </a>137 </div>138 <div class="text-caption">139 Knock knock! Who's there?140 </div>141 </li>142 <li class="pane">143 <div class="time-stamp entry-meta">144 <a>145 <time datetime="2018-03-18T07:17:02.757Z">146 2018-3-18 03:17:02147 </time>148 </a>149 </div>150 <div class="text-caption">151 Knock knock! Who's there?152 </div>153 </li>154 <li class="pane">155 <div class="time-stamp entry-meta">156 <a>157 <time datetime="2018-03-18T04:17:02.800Z">158 2018-3-18 00:17:02159 </time>160 </a>161 </div>162 <div class="text-caption">163 Knock knock! Who's there?164 </div>165 </li>166 </ul>167 </section>168 <div class="previous-indexes">169 <a>170 6171 </a>172 |173 <a>174 5175 </a>176 |177 <a>178 4179 </a>180 |181 <a>182 3183 </a>184 |185 <a>186 2187 </a>188 |189 <a>190 1191 </a>192 |193 <a>194 0195 </a>196 </div>197 </body>198</html>199