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 lang="en">3 <head>4 <meta content="text/html;charset=utf-8" http-equiv="Content-Type">5 <meta content="Tim Sellers" name="author">6 <meta content="Tim Sellers" name="copyright">7 <meta content="width=device-width, initial-scale=1.0" name="viewport">8 <title>9 timsellers.net/blog : archived post page10 </title>11 <style>12 /*Box with the form elements*/13div.blogkbox14 {15 background-color: #ffffff;16 font-size:11px;17 border: 0px;18 padding-top: 5px;19 padding-left: 5px;20 padding-right: 5px;21 padding-bottom: 5px;22 margin: 20px 2px 2px 2px;23 overflow:hidden;24}25/*Box around the comments*/26div.blogkcomments27 {28 border-bottom: 0px; thin dotted #999;29 font-size:11px;30 margin: 15px 2px 15px 2px;31 padding-top: 5px;32 padding-left: 5px;33 padding-right: 5px;34 padding-bottom: 5px;35 overflow:hidden;36 }37 38 39/*Box around the last comments*/ 40.blogkcommentsrecent41 {42 border: 0px43 font-size:11px;44 margin-bottom: 10px;45 padding-top: 5px;46 padding-left: 0px;47 padding-right: 0px;48 padding-bottom: 5px;49 text-align:left;50 overflow:hidden;51 }52 53 54 55 56span.blogkommlinks57 {58 /*empty for special link effect*/59 }60 61div.blogkLinks62 {63 /*64 text-align:center;65 margin: 20px 2px 11px 2px;66 feel free to adjust the [hide comments]-link67 */68 }69 70 71/*72 now handling tableless forms73 you don't have to edit from here 74 this goes back to an article at75 http://www.alistapart.com/articles/practicalcss/ 76 describing a code concept by eric meyer.77 78*/79 80div.blogkrow81 {82 clear: both;83 padding-top: 5px;84 padding-left: 5px;85 padding-right: 5px;86 padding-bottom: 5px;87 font-size: 11px;88 text-align:left;89 overflow:hidden;90 }91 92 93 94 95 96 97body {padding:0; margin:0; border:0; background:#ffffff; color:#333366; font-family:"Courier New", Courier, monospace; font-size:1em; line-height:140%;}98 99a:link {color:#0000ff; text-decoration:underline;}100a:visited {color:#0000ff; text-decoration:none;}101a:hover {color:#ff4a00; text-decoration:none;}102 103h1 {font-size:160%; font-weight:bold; color:#ff4a00; text-align:center;}104h2 {font-size:110%; font-weight:bold; color:#ff4a00;}105h3 {font-size:100%; font-weight:bold; color:#ff4a00; text-align:center;}106 107div#topbar {margin:0; padding:2px; font-size:small; text-align:center; color:black; background-color:#F0F0F0; border:0; border-bottom:1px solid;}108div#mainarea {max-width:780px; margin:auto; border:0; padding:10px;}109.small {font-family:verdana,sans-serif; font-size:small;}110.blogbody {}111 </style>112 </head>113 <body>114 <div id="topbar">115 timsellers.net - archive (blog post)|116 <a>117 blog home118 </a>119 |120 <a>121 main index122 </a>123 </div>124 <div id="mainarea">125 <h1>126 timsellers.net/blog127 </h1>128 <h3>129 Part of me wants to break down barriers, set people free and make the world a better place. A bigger part of me wants to sit on the sofa, drink tea and play through old Nintendo games.130 </h3>131 <p style="text-align:center;">132 - - - o O o - - -133 <br>134 135 </p>136 <div class="blogbody">137 <a id="72">138 </a>139 <h2>140 29/09/08 : September141 </h2>142 <p>143 In some ways, September - the oddest month of the year - is a bit depressing. Summer is over, the days are shorter and the mornings colder.144 </p>145 <p>146 On the other hand, it's still usually warm and sunny in the daytime (especially at the moment) and the freshness of the air is quite pleasant after the heat of summer (not that there was much in the way of heat this year). And the leaves' swansong of colour is nice to see before the bleakness of winter.147 </p>148 <p>149 It feels like a time for fresh starts - far more so than in January, which really is a depressing time of year - so I'm going to keep myself busy sorting out my jumbled mess of websites out (which was actually one of my resolutions at the beginning of the year).150 </p>151 <p style="text-align: center; font-family: verdana,sans-serif; font-size: 12px;">152 <img alt="autumn" height="508" src="rick.jpg" style="border: 1px dotted rgb(170, 170, 204); margin: 10px; padding: 5px;" width="400">153 <br>154 My garden, pleasant early autumn day155 </p>156 <div class="small">157 <br>158 Posted by Tim at 23:53159[160 <a>161 permalink162 </a>163 ]164 <br>165 Categories:166 <a>167 Family and general life168 </a>169 <br>170 Comments171 <a id="bk_72">172 </a>173 <span class="blogkommlink">174 [175 <a class="blogkommlink">176 hide comments177 </a>178 ]179 </span>180 <form action="/blog/archives/2008/09/entry_72.php?show_id=72#add_72" method="post" name="comm">181 <p style="color:red;">182 New comments disabled due to spam183 </p>184 <!--185<a name="add_72"></a>186 <div class="blogkbox">187 <div class="blogkrow">188 <strong>Add comment here</strong><br/>189 name:<br /><input type="text" name="comm_name" value="" size="20" tabindex="1" maxlength="60"/>190 </div>191 <div class="blogkrow">192 email:<br /><input type="text" name="comm_e_mail" value="" size="20" tabindex="2" maxlength="60"/>193 </div>194 <div class="blogkrow">195 website:<br /><input type="text" name="comm_website" value="http://" size="20" maxlength="60" tabindex="3" />196 </div>197 <div class="blogkrow">198 spam-protection, please enter code:<br />199 <img src="rick.jpg" class="captcha" alt="captcha, sorry" title="please reload page if you can not read"/>200<br /><input type="text" name="captcha_input" value="" size="5" tabindex="4" maxlength="5"/>201 </div>202 <div class="blogkrow">203 comment:<br />204 <textarea name="comm_eintrag_raw" rows="10" cols="19" tabindex="4"></textarea>205 <br/>206 <input type="submit" name="button" value="post" />207 <input type="submit" name="button" value="preview"/><br/>208 </div>209 <div class="blogkrow">210 <input type="checkbox" name="rem" value="1" checked="checked"/>remember me<br/><input type="checkbox" name="notify_comment" value="1S" />request email if someone adds comments<br/> <div>Your email will not be published<br />211 html is not permitted </div>212 </div>213 </div>214 <div><a ><< home</a></div>215 </form>216-->217 <p>218 219 </p>220 </form>221 </div>222 </div>223 <div style="text-align:center; font-weight:bold;">224 <p class="small">225 [ 226 <a>227 Previous post228 </a>229 | 230 <a>231 Home232 </a>233 | 234 <a>235 Archive index236 </a>237 238| 239 <a>240 Next post241 </a>242 ]243 </p>244 </div>245 </div>246 <!-- statcounter code (project index/gallery 4221109 blog 4221039 winston 4221060 steiner 4221080) -->247 <noscript>248 <div class="statcounter">249 <a class="statcounter" title="web counter">250 <img alt="web counter" class="statcounter" src="rick.jpg">251 </a>252 </div>253 </noscript>254 <!-- End of StatCounter Code -->255 </body>256</html>257