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/* CSS Document */7 8body {padding: 0px; margin: 0 0 0 0; font-family:Trebuchet, Arial, Helvetica, sans-serif; background-color:#fff; font-size:14px;}9 10a {outline: 0;}11 12hr { display: block; height: 1px;13 border: 0; border-top: 1px solid #1d4c9a;14 margin: 1em 0; padding: 0; }15 16table, td, th {17 border-collapse: collapse;18 border: 1px solid black;19 text-align: left;20 padding: 5px;21 width: auto;22}23 24#bodylist {margin-left: 10px; padding-left: 10px; line-height: 20px; font-weight:normal;}25 26A:link {text-decoration: none; color:#1d4c9a; font-weight: bold;}27A:visited {text-decoration: none; color:#1d4c9a;}28A:active {text-decoration: none; color:#1d4c9a; }29A:hover {text-decoration: none; color: #e7463d; }30 31.topbarlink a:link {color: #1d4c9a;} 32.topbarlink a:visited {color: #1d4c9a;}33.topbarlink a:hover {color: #6294c1;}34.topbarlink a:active {color: #1d4c9a}35 36.footerlink a:link {color: #fff; font-weight: normal;} 37.footerlink a:visited {color: #fff;}38.footerlink a:hover {color: #e7463d;}39.footerlink a:active {color: #fff}40 41H1{font-size:24px; color: #1d4c9a; font-weight: bold; font-family: Trebuchet, Arial, Helvetica, sans-serif; display:inline;}42H2{font-size:20px; color: #1d4c9a; font-weight: bold; font-family: Trebuchet, Arial, Helvetica, sans-serif; display:inline;}43H3{font-size:18px; color: #1d4c9a; font-weight: bold; font-family: Trebuchet, Arial, Helvetica, sans-serif; display:inline;}44H4{font-size:16px; color: #1d4c9a; font-weight: bold; font-family: Trebuchet, Arial, Helvetica, sans-serif; display:inline;}45H5{font-size:14px; color: #1d4c9a; font-weight: bold; font-family: Trebuchet, Arial, Helvetica, sans-serif; display:inline;}46H6{font-size:12px; color: #1d4c9a; font-weight: bold; font-family: Trebuchet, Arial, Helvetica, sans-serif; display:inline;}47 48 49 50#header-cont{width:100%; position:fixed; top:0px; z-index: 1; background-color:#fff; border-bottom: solid 2px #ccc;}51 52#header{margin:0px auto; width:1000px; height:100px; padding: 0 10px 0 10px;}53 54#logo{width:250px; height:87px; float: left; margin: 10px; 0 0 10px}55 56#navbar57{ height: auto; margin-top:40px; margin-left: 30px; width:auto; clear:none; float: left;}58 59#nav-list ul {list-style:none; margin:0; padding:0;}60 61#nav-list p, ul {padding: 0; margin: 0; }62 63#nav-list li {display:block;float:left;padding:0 5px 0 5px;text-align:left; clear:none; border-right: solid 1px #1d4c9a;}64 65#nav-list li a {display:block; padding: 8px 10px 8px 10px; height:auto; color:#1d4c9a; text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bold;}66 67#nav-list li a:hover, li a:focus, li a:active {font-family:Arial, Helvetica, sans-serif; text-decoration:none; color: #6294c1;}68 69#content {70 background-image: url("images/paper.jpg");71 width:1000px;72 height: auto;73 min-height:450px;74 margin: 102px auto 0px auto;75 font-family:Arial, Helvetica, sans-serif;76 font-size:15px;77 color:#666;78 overflow: hidden;79 }80 81#home-content {82 background-image: url("images/paper.jpg");83 width:1000px;84 height: auto;85 min-height:450px;86 margin: 102px auto 0px auto;87 font-family:Arial, Helvetica, sans-serif;88 font-size:15px;89 color:#666;90 overflow: hidden;91 }92 93#textbox1 {94 width: 960px;95 margin: 20px 20px 10px 20px;96 overflow: hidden;97 }98 99#home-textbox1 {100 101 width: 1000px;102 height: 200px;103 }104 105#home-textbox2 {106 background-image: url("images/home-banner.jpg");107 background-size: 1000px 200px;108 background-repeat: no-repeat;109 float:left;110 margin: 0;111 color: #fff;112 font-size: 30px;113 font-weight: bold;114 width: 1000px;115 height: 200px;116 }117 118 119#home-heading {120 margin: 30px 0 0 30px;121}122 123 124#home-textbox-cont {125 float:left;126 margin: 10px 0px 20px 20px;127 width: 960px;128 height: 210px;129 background: #CCC;130 opacity:0.9;131 }132 133#home-textbox3 {134 float:left;135 margin: 20px 0px 20px 20px;136 color: #1d4d9a;137 font-size: 20px;138 width: 960px;139 height: auto;140 } 141 142#home-textbox4 {143 float:left;144 margin: 20px 0px 0px 20px;145 padding-right: 18px;146 color: #1d4d9a;147 font-size: 12px;148 width: 200px;149 height: auto;150 min-height: 170px;151 border-right: solid 1px #1d4c9a;152 } 153 154 155 156 157.curved { -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}158 159#footer-cont{width:100%; height: 100px; background-color:#1d4c9a; border-top: solid 2px #1d4c9a;}160 161#footer{margin:auto; width:960px; padding: 0 20px 0 20px; background-color:#1d4c9a; height: 100px;162-moz-border-bottom-right-radius:10px;163-moz-border-bottom-left-radius:10px;164-webkit-border-bottom-left-radius:10px;165-webkit-border-bottom-right-radius:10px;166-khtml-border-bottom-left-radius:10px;167-khtml-border-bottom-right-radius:10px;168border-bottom-left-radius:10px;169border-bottom-right-radius:10px;170 171}172 173#attorney-pics{174width:180px;175height: auto;176text-align:center;177float:left;178margin-right: 15px;179font-size: 12px;180 181}182 183#footerleftcol{float:left; width: auto; height: auto; margin-top:30px; font-size:12px; color:#ffffff; text-align:left;}184 185#footercontact{float:right; width: auto; height: auto; margin-top:20px; font-size:14px; color:#fff; text-align:right;}186 </style>187 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">188 <title>189 Alchemie IP - UK Chartered and European Patent Attorneys190 </title>191 <meta content="telephone=no" name="format-detection">192 <meta content name="description">193 <meta content name="author">194 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">195 </head>196 <body>197 <div id="header-cont">198 <div id="header">199 <div id="logo">200 <a>201 <img alt height="87" src="rick.jpg" style="border-width: 0px;" width="250">202 </a>203 </div>204 <div id="navbar">205 <ul id="nav-list">206 <li style="padding-left: 0;">207 <a>208 HOME209 </a>210 </li>211 <li>212 <a>213 ABOUT214 </a>215 </li>216 <li>217 <a>218 OUR APPROACH219 </a>220 </li>221 <li>222 <a>223 ATTORNEYS224 </a>225 </li>226 </ul>227 </div>228 </div>229 </div>230 <div id="content">231 <img height="200" src="rick.jpg" style="border-width: 0px;" width="1000">232 <div id="textbox1">233 <h1>234 Our Clients235 </h1>236 <p>237 We work for a broad range of clients which include individuals, small and medium enterprises, start-up companies, universities and multi-national companies. These clients are based in the UK and overseas.238 </p>239 <p>240 We also provide a consultancy service to other firms of patent attorneys and to industrial IP departments to assist you when over-stretched (e.g. single or multiple assignments, maternity and/or paternity leave cover, and periods of recruitment).241 </p>242 </div>243 </div>244 <div id="footer">245 <div id="footerleftcol">246 <span class="footerlink">247 <a>248 Legal Notices249 </a>250 </span>251 <br>252 <span class="footerlink">253 <a>254 Privacy Notice255 </a>256 </span>257 <br>258 © Alchemie IP Ltd 2018 - all rights reserved.259 </div>260 <div id="footercontact">261 <div style="height:auto; margin-bottom: 5px; margin-top: 10px;">262 <strong>263 T: Cardiff [PHONE REDACTED]264 </strong>265 </div>266 <!-- <div style="height:auto; margin-bottom: 5px;"><strong>M: 07814915452</strong></div> -->267 <div style="height:auto; margin-bottom: 5px;">268 <span class="footerlink">269 <a>270 E: [EMAIL REDACTED]271 </a>272 </span>273 </div>274 </div>275 </div>276 </body>277</html>278