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.7k
1<!DOCTYPE html>2<html lang="en">3 <head>4 <style>5 /* Copyright 1999-2017. Parallels IP Holdings GmbH. All Rights Reserved. */6html {7 overflow-y: scroll;8 color: #000;9 font: 400 62.5%/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;10 -webkit-text-size-adjust: 100%;11 -ms-text-size-adjust: 100%;12 -webkit-tap-highlight-color: transparent;13}14body,15html {16 height: 100%;17 min-height: 100%;18}19body {20 margin: 0;21 font-size: 1.3rem;22 background: #fff;23 color: #000;24}25a {26 cursor: pointer;27 text-decoration: none;28 color: #2498e3;29 background-color: transparent;30}31a:active,32a:hover {33 text-decoration: underline;34 color: #188dd9;35 outline: 0;36}37h1,38h2 {39 margin: 0 0 0.5rem;40 color: #444;41 font-weight: 400;42 line-height: 1;43}44h1 { font-size: 2.4rem; }45h2 { font-size: 3.6rem; }46.error-code {47 color: #f47755;48 font-size: 8rem;49 line-height: 1;50}51p { margin: 1.2rem 0; }52p.lead {53 font-size: 1.6rem;54 color: #4f5a64;55}56hr {57 box-sizing: content-box;58 height: 0;59 margin: 2.4rem 0;60 border: 0;61 border-top: 1px solid #ddd;62}63.page {64 display: -webkit-box;65 display: -ms-flexbox;66 display: flex;67 min-height: 100vh;68}69.page:before {70 display: block;71 content: '';72 -webkit-box-flex: 0;73 -ms-flex: 0 1 474px;74 flex: 0 1 474px;75 background: #38444f url(server.svg) 50% 6em no-repeat;76 background-size: 44% auto;77}78.main {79 -webkit-box-flex: 1;80 -ms-flex: 1 1 70%;81 flex: 1 1 70%;82 box-sizing: border-box;83 padding: 10rem 5rem 5rem;84 min-height: 100vh;85}86.error-description {87 -webkit-box-flex: 1;88 -ms-flex: 1;89 flex: 1;90}91.help-actions a {92 display: inline-block;93 border: 2px solid #23a7de;94 margin: 0 0.5rem 0.5rem 0;95 padding: 0.5rem 1rem;96 text-decoration: none;97 -webkit-transition: 0.25s ease;98 transition: 0.25s ease;99}100.help-actions a:hover {101 text-decoration: none;102 background: #23a7de;103 color: #fff;104}105@media (max-width:959px) {106 .page:before {107 -ms-flex-preferred-size: 400px;108 flex-basis: 400px;109 background-position: 50% 4rem;110 }111 .main { padding: 5rem; }112}113@media (max-width: 769px) {114 .page {115 -webkit-box-orient: vertical;116 -webkit-box-direction: normal;117 -ms-flex-direction: column;118 flex-direction: column;119 }120 .page:before {121 -ms-flex-preferred-size: 250px;122 flex-basis: 250px;123 background-position: 5rem -4.8rem;124 background-size: 166px auto;125 }126 .main { /* for IE 11 */127 min-height: 0;128 -webkit-box-flex: 0;129 -ms-flex: none;130 flex: none;131 }132}133@media (max-width: 479px) {134 h2 { font-size: 3rem; }135 .main { padding: 3rem; }136}137 </style>138 <meta charset="utf-8">139 <meta content="ie=edge" http-equiv="x-ua-compatible">140 <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">141 <title>142 503 Service Temporarily Unavailable143 </title>144 </head>145 <body>146 <div class="page">147 <div class="main">148 <h1>149 Server Error150 </h1>151 <div class="error-code">152 503153 </div>154 <h2>155 Service Temporarily Unavailable156 </h2>157 <p class="lead">158 The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.159 </p>160 <hr>161 <p>162 That's what you can do163 </p>164 <div class="help-actions">165 <a>166 Reload Page167 </a>168 <a>169 Back to Previous Page170 </a>171 <a>172 Home Page173 </a>174 </div>175 </div>176 </div>177 </body>178</html>179