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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">2<html lang="en" xml:lang="en" xmlns="">3 <head>4 <style>5 html, body { margin: 0; padding: 0; background: #000; }6body { color: #666; background: #000; font: 12px/1.1 Verdana, sans-serif; }7 8a img { border: none; }9 10img { border: none; }11 12a {13 color: inherit;14 text-decoration: none;15}16 17a:link {18 color: #999; 19}20a:visited {21 color: #999;22}23 24.clear25{26 clear: both;27}28.center29{30 text-align: center;31}32.textBlock33{34 width: 450px;35}36 37.reviewTitle38{39 font-weight: bold;40}41 42.directions43{44 margin-bottom: 4px;45}46 47#pageWrapper48{49 margin: 48px auto;50 width: 915px;51 background: #fff;52}53 54#masthead55{56 padding: 14px 0;57 border-bottom: 1px solid #999;58 text-align: right;59 padding-right: 65px;60 font-size: 10px;61 color: #999;62}63 64#masthead a65{66 color: #999;67 text-decoration: none;68 margin: 0 8px;69 letter-spacing: 1.5px;70}71 72#content73{74 margin: 36px 80px 36px 10px;75 padding-top: 98px;76 background: url(/images/ytfa_new.png) no-repeat top right;77 color: #666;78}79 80#homepage81{82 color: #999;83 text-align: right;84 margin-top: -18px;85}86 87#homepageImage, #homepageCredit88{89 margin-right: 126px;90}91 92#homepageCredit, #artistpageCredit93{94 margin-top: 4px;95 font-size: 10px;96}97 98#sectionTitle99{100 color: #e83354;101 letter-spacing: 1px;102 margin-bottom: 8px;103}104 105#artistColumn106{107 width: 180px;108 float: right;109 position: relative;110 top: -30px;111}112#artistColumn #artistsList113{114 list-style: none;115 margin: 0;116 padding: 0;117}118#artistColumn #artistsList li119{120 margin: 0 0 8px 0;121 display: block;122}123 124#mainColumn125{126 margin: 0 210px 0 20px;127}128#mainColumn.artists129{130 margin-right: 250px;131 margin-bottom: 18px;132 text-align: right;133}134#mainColumn .artist135{136 margin-bottom: 18px;137}138 139ul.gallery {140 list-style: none;141 margin: 0;142 padding: 0;143 width: 600px;144}145ul.gallery li {146 float: left;147 /*display: inline; */148 width: 120px;149 height: 120px;150 margin: 0 30px 30px 0;151 text-align: center;152}153 154.copyright, #footer, #footer a155{156 color: #999;157}158 159#footer160{161 border-top: 1px solid #999;162 padding: 14px 0;163 text-align: right;164 padding-right: 65px;165 letter-spacing: 1.5px;166}167 168#footer span169{170 margin: 0 10px;171}172 173/* navigation */174 175#nav.home a.home,176#nav.current a.current,177#nav.artists a.artists,178#nav.about a.about,179#nav.reviews a.reviews,180#nav.contact a.contact181{182 color: #e83354;183}184 </style>185 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">186 <meta content="no" http-equiv="Imagetoolbar">187 <meta content="Contact « Yvette Torres Fine Art" name="title">188 <meta content="index, follow" name="robots">189 <meta content="en" name="language">190 <title>191 Contact « Yvette Torres Fine Art192 </title>193 </head>194 <body>195 <div id="pageWrapper">196 <div id="masthead">197 <div class="contact" id="nav">198 <a class="home">199 HOME200 </a>201 |202 <a class="current">203 CURRENT EXHIBITION204 </a>205 |206 <a class="artists">207 ARTISTS208 </a>209 |210 <a class="about">211 GALLERY212 </a>213 |214 <a class="reviews">215 REVIEWS216 </a>217 |218 <a class="contact">219 CONTACT220 </a>221 </div>222 </div>223 <!-- /masthead -->224 <div id="content">225 <div id="artistColumn">226 <div id="sectionTitle">227 CONTACT228 </div>229 </div>230 <div class="textBlock" id="mainColumn">231 <p>232 233 </p>234 <p>235 Email:236 <a>237 [EMAIL REDACTED]238 </a>239 [PHONE REDACTED] or [PHONE REDACTED]240 </p>241 <p>242 Business correspondence should be mailed to: PO Box 163, South Bristol, ME 04568243 </p>244 <p>245 Private showings are available by appointment throughout the year.246 </p>247 <p>248 The gallery does not accept unsolicited submissions.249 </p>250 </div>251 </div>252 <!-- /content -->253 <div id="footer">254 <span id="copyright">255 © 2005 - 2023 Yvette Torres Fine Art256 </span>257 <span id="emailLink">258 <a>259 [EMAIL REDACTED]260 </a>261 </span>262 <span id="phoneNumber">263 [PHONE REDACTED]264 </span>265 </div>266 </div>267 <!-- #pageWrapper -->268 <!-- appa -->269 </body>270</html>271