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>2<html dir="ltr" lang="en">3 <head>4 <style>5 /*6HTML 5 Template Name: Basic 727File: Layout CSS8Author: OS Templates9Author URI: http://www.os-templates.com/10Licence: <a >Website Template Licence</a>11*/12 13body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#FFFFFF; background-color:#1E1E1E;}14 15.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}16.clear{display:block; width:100%; clear:both;}17html[xmlns] .clear{display:block;}18* html .clear{height:1%;}19 20a{outline:none; text-decoration:none;}21 22code{font-weight:normal; font-style:normal; font-family:Georgia, "Times New Roman", Times, serif;}23 24.fl_left{float:left;}25.fl_right{float:right;}26 27img{margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}28.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D6D6D6; text-align:center;}29.imgl{float:left; margin:0 15px 15px 0; clear:left;}30.imgr{float:right; margin:0 0 15px 15px; clear:right;}31 32/*----------------------------------------------HTML 5 Overrides-------------------------------------*/33 34address, article, aside, figcaption, figure, footer, header, nav, section{display:block; margin:0; padding:0;}35 36q{display:block; padding:0 10px 8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}37q:before{content:' '; font-size:26px;}38q:after{content:' '; font-size:26px; line-height:0;}39 40/* ----------------------------------------------Wrapper-------------------------------------*/41 42div.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left;}43 44.row1, .row1 a{color:#C0BAB6; background-color:#333333;}45.row2{color:#979797; background-color:#FFFFFF;}46.row2 a{color:#FF9900; background-color:#FFFFFF;}47.row3, .row3 a{color:#FFFFFF; background-color:#1E1E1E;}48 49/*----------------------------------------------Generalise-------------------------------------*/50 51#header, #container, #footer{display:block; margin:0 auto; width:960px;}52 53nav ul{margin:0; padding:0; list-style:none;}54 55h1, h2, h3, h4, h5, h6{margin:0; padding:0; font-size:20px; font-weight:normal; font-style:normal; line-height:normal;}56 57/*----------------------------------------------Header-------------------------------------*/58 59#header, #header a{color:#C0BAB6; background-color:#333333;}60 61#header #hgroup{float:left; padding:20px 0;}62#header #hgroup h1, #header #hgroup h2{}63#header #hgroup h1{font-size:36px;}64#header #hgroup h2{font-size:13px;}65 66#header nav{float:right; padding:20px 0;}67#header nav ul{margin-top:20px;}68#header nav li{display:inline; margin-right:15px; text-transform:uppercase;}69#header nav li.last{margin-right:0;}70#header nav a{color:#C0BAB6; background-color:#333333;}71#header nav a:hover{color:#FF9900; background-color:#333333;}72 73/*----------------------------------------------Content Area-------------------------------------*/74 75#container{padding:30px 0;}76#container section{margin:0 0 30px 0;}77#container section.last{margin:0;}78#container .more{text-align:right; text-transform:uppercase; font-size:smaller; font-weight:bold;}79 80/* ------Left Column-----*/81 82#container #left_column{float:left; width:280px;}83#container #left_column h2.title{margin-bottom:20px;}84 85#container #left_column nav{display:block; width:100%; margin-bottom:30px;}86#container #left_column nav ul{margin:0; padding:0; list-style:none;}87#container #left_column nav li{margin:0 0 3px 0; padding:0;}88#container #left_column nav li.last{margin-bottom:0;}89#container #left_column nav a{display:block; margin:0; padding:5px 10px 5px 20px; color:#666666; background:url("../images/orange_file.gif") no-repeat 10px center #FFFFFF; text-decoration:none; border-bottom:1px dotted #666666;}90#container #left_column nav a:hover{color:#FF9900; background-color:#FFFFFF;}91 92/* ------Main Content-----*/93 94#container #content{float:right; width:630px;}95 96#container #content section article{}97#container #content section article h2{text-transform:uppercase;}98#container #content section article address{font-size:10px; font-style:normal;}99#container #content section article time{font-size:10px;}100#container #content section article .tags{display:block; padding:5px; color:#979797; background-color:#ECECEC; font-style:italic;}101#container #content section article .tags a{color:#FF9900; background-color:#ECECEC;}102 103#container #content #services{}104#container #content #services ul{margin:0; padding:0; list-style:none;}105#container #content #services ul li{display:block; width:300px;}106#container #content #services ul li.odd{float:left;}107#container #content #services ul li.even{float:right;}108#container #content #services ul li img{width:290px; height:100px; margin:0 0 15px 0; padding:4px; border:1px solid #666666;}109 110/*----------------------------------------------Footer-------------------------------------*/111 112#footer{}113#footer p{margin:0; padding:20px 0;}114 </style>115 <meta content="Famous Quotes Online offers famous quotes from elijah germain." name="description">116 <title>117 Famous Quotes Online - elijah germain118 </title>119 <meta charset="utf-8">120 <!--[if lt IE 9]><![endif]-->121 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">122 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">123 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">124 </head>125 <body>126 <div class="wrapper row1">127 <header class="clear" id="header">128 <div id="hgroup">129 <h1>130 <a>131 Famous Quotes132 </a>133 </h1>134 <h2>135 the ultimate source for popular quotes136 </h2>137 </div>138 <nav>139 <ul>140 <li>141 <a>142 Home143 </a>144 </li>145 <li>146 <a>147 Quotes About Love148 </a>149 </li>150 <li>151 <a>152 Inspirational Quotes153 </a>154 </li>155 <li>156 <a>157 Friends158 </a>159 </li>160 </ul>161 </nav>162 <div class="clear">163 </div>164 </header>165 </div>166 <!-- content -->167 <div class="wrapper row2" style="height: auto !important;">168 <div id="container" style="height: auto !important;">169 <!-- content body -->170 <aside id="left_column">171 <h2 class="title">172 Categories173 </h2>174 <nav>175 <ul>176 <li>177 <a>178 age179 </a>180 </li>181 <li>182 <a>183 anger184 </a>185 </li>186 <li>187 <a>188 architecture189 </a>190 </li>191 <li>192 <a>193 art194 </a>195 </li>196 </ul>197 </nav>198 </aside>199 <div id="content" style="height: auto !important;">200 <section style="height: auto !important;">201 <article>202 <h2>203 Famous Quotes from ...204 </h2>205 <p class="tags">206 elijah germain207 </p>208 </article>209 <article style="height: auto !important;">210 <ul>211 <li>212 Money is not the root of all evil, it is the devious intentions behind the beholder...213 <a>214 elijah germain215 </a>216 {217 <b>218 <a>219 view220 </a>221 </b>222 }223 </li>224 <li>225 There's no need to fear, I feared for you before you took your first breath, there is no need to suffer, I paid your debt, all I ask in return is that you celebrate your existence by demonstrating true love of self through others and when I call for your return I shall acknowledge all of your endeavors.226 <a>227 elijah germain228 </a>229 {230 <b>231 <a>232 view233 </a>234 </b>235 }236 </li>237 <li>238 Without the darkness the light would be lonely, without hate, true love could never be tangible, without death we'd lead a life full of repetitive misery, and without family we'd fail to exist....239 <a>240 elijah germain241 </a>242 {243 <b>244 <a>245 view246 </a>247 </b>248 }249 </li>250 </ul>251 <br>252 <center>253 <!-- Famous Quotes Online -->254 <ins class="adsbygoogle" data-ad-client="ca-pub-2795894132657717" data-ad-format="auto" data-ad-slot="[PHONE REDACTED]" data-adsbygoogle-status="done" style="display: block; height: 280px;">255 <div aria-label="Advertisement" id="aswift_0_host" style="border: none; height: 280px; width: 630px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block; overflow: visible;" tabindex="0" title="Advertisement">256 </div>257 </ins>258 </center>259 <br>260 <br>261 <br>262 <br>263 <br>264 </article>265 </section>266 <section class="last clear" id="services">267 </section>268 </div>269 <!-- / content body -->270 <div class="clear">271 </div>272 </div>273 </div>274 <!-- footer -->275 <div class="wrapper row3">276 <footer id="footer">277 <p class="fl_left">278 <a>279 Famous Quotes Online280 </a>281 is Copyright © 2012 - 2022. - All Rights Reserved.282 </p>283 <p class="fl_right">284 Free Inspirational Quotes285 </p>286 <div class="clear">287 </div>288 </footer>289 </div>290 <ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: none !important;">291 <div aria-label="Advertisement" id="aswift_1_host" style="border: none; height: 0px; width: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;" tabindex="0" title="Advertisement">292 </div>293 </ins>294 </body>295</html>296