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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">2<html xmlns="">3 <head>4 <style>5 @charset "utf-8";6 7body 8{9 font: 100% Verdana, Arial, Helvetica, sans-serif;10 margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */11 padding: 0;12 text-align: center; /* this centres the container in IE 5. Text is then set to the left aligned default in the #container selector */13 color: #000000;14 background-color: #EEEEEE;15}16 17 18.microvectorclass #container 19{20 width: 80%;21 text-align: left; /* this overrides the text-align: center on the body element. */22 color: #FFFFFF;23 background-color: #FFFFFF;24 margin-top: 0;25 margin-right: auto;26 margin-bottom: 0;27 margin-left: auto;28 border: thin solid #000000;29}30 31 32.microvectorclass #container a:link{color: #CC0000; text-decoration: none; font-weight: bold;}33.microvectorclass #container a:visited{color: #CC0000;text-decoration: none; font-weight: bold;}34.microvectorclass #container a:hover{color: blue; text-decoration: underline; font-weight: bold;}35 36 37.microvectorclass #header 38{39 background-color: #FFFFFF;40 padding-top: 15px;41 padding-right: 10px;42 padding-bottom: 30px;43 padding-left: 20px;44 text-align: center;45}46 47.microvectorclass #titlebar 48{49 background-color: #DDDDDD;50 color: #000000;51 padding-top: 10px;52 padding-right: 10px;53 padding-bottom: 10px;54 padding-left: 20px;55 font-weight: bold;56 text-align: center;57}58 59.microvectorclass #titlebar h1 60{61 margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */62 padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */63 font-size: large;64}65 66 67 68.microvectorclass #mainContent 69{70 color: #000000;71 font-family: Verdana, Arial, Helvetica, sans-serif;72 font-size: small;73 background-color: #FFFFFF;74 padding-top: 25px;75 padding-right: 20px;76 padding-bottom: 25px;77 padding-left: 20px;78 border-top-style: none;79 border-right-style: none;80 border-bottom-style: none;81 border-left-style: none;82 text-align: justify;83}84 85 86 87.microvectorclass #mainContent h288{89 margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */90 padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */91 font-size: medium;92}93 94 95 96.microvectorclass #navbar 97{98 color: #000000;99 background-color: #DDDDDD;100 padding-top: 15px;101 padding-right: 0px;102 padding-bottom: 15px;103 padding-left: 0px;104 font-size: small;105 text-decoration: none;106 text-align: center;107} 108 109 110.microvectorclass #navbar p {111 margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */112 padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */113 text-align: center;114}115 116 117.microvectorclass #footer 118{119 color: #000000;120 background-color: #FFFFFF;121 padding-top: 10px;122 padding-right: 0px;123 padding-bottom: 10px;124 padding-left: 0px;125 font-size: x-small;126} 127 128 129.microvectorclass #footer p {130 margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */131 padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */132 text-align: center;133}134 </style>135 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">136 <meta content="finance sector computer services, information technology, computers, computing, communications, project finance, London, Microvector" name="keywords">137 <meta content name="description">138 <title>139 Microsoft Licensing Advisory and Software Search Service from Microvector140 </title>141 </head>142 <body class="microvectorclass">143 <div id="container">144 <div id="header">145 <noscript>146 </noscript>147 </div>148 <!-- end #header -->149 <div id="titlebar">150 <h1>151 Microsoft Licensing Advisory and Software Search Service152 </h1>153 </div>154 <!-- end #titlebar -->155 <div id="mainContent">156 <p>157 Do you find Microsoft's licensing structure confusing?158 </p>159 <p>160 As a Microsoft partner we will guide you through the complexities of Microsoft's licensing model, including End User Licence Agreements (EULA), Product Use Rights (PUR), Software Assurance, Client Access Licence (CAL), Volume Licensing and Volume Licence Keys (VLK), Medialess Licence Kit (MLK), Open Subscription Licence Agreements, Open Licence Agreements, Terminal Service, Premier Support and upgrade path availability for Windows XP Professional, Windows Vista Business, Windows Vista Enterprise, Windows Vista Ultimate, Microsoft Office 2003, Microsoft Office 2007, Windows Server 2003 Standard Edition, Windows Server 2003 Enterprise Edition, Windows Server 2003 Datacenter Edition, Windows Server 2003 Web Edition, Windows Storage Server 2003, Windows Storage Server 2003 R2, Windows Compute Cluster Server 2003 (CCS), Small Business Server 2000, Small Business Server 2003, Small Business Server 2003 R2, Small Business Server 2008, Exchange Server 2003, Exchange Server 2007, SQL Server 2005 and SQL Server 2008 in Workgroup, Standard, Enterprise and Developer Editions, SharePoint Server and Microsoft Terminal Server.161 </p>162 <p>163 We will advise you on the licence structure and upgrade path which best suits your needs.164 </p>165 <p>166 Unsure about which software package is right for you or unable to find software to fulfill your needs?167 </p>168 <p>169 Through our extensive software listings, we are able to offer a comprehensive and independent software research service for determining what software is the most appropriate for your needs and for your budget.170 </p>171 <p>172 If you would like to use our software research service please feel free to contact us.173 </p>174 </div>175 <!-- end #mainContent -->176 <div id="navbar">177 <p>178 <a>179 Home180 </a>181 182 <a>183 About184 </a>185 186 <a>187 Finance Clients188 </a>189 190 <a>191 Project Finance192 </a>193 194 <a>195 Charges196 </a>197 198 <a>199 Contact200 </a>201 </p>202 </div>203 <!-- end #navbar -->204 <div id="footer">205 <p>206 Copyright © Microvector Limited 2003-2008207 </p>208 </div>209 <!-- end #footer -->210 </div>211 <!-- end #container -->212 </body>213</html>214