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 body {margin:0; font-family:Georgia, "Times New Roman", Times, serif; background:url(images/head_bckg.jpg) repeat-x center top #000000;}6 7a {color:#FDC605; text-decoration:none;}8a:hover {9 text-decoration:underline;10 color: #D6D6D6;11}12h1 {13 font-size:24px;14 font-weight:normal;15 color:#FDC605;16 margin:15px 0 10px 0;17}18h2 {font-size:20px; font-weight:normal; margin:10px 0;}19img {border:none;}20br {line-height:10px;}21 22#container {width:1000px; margin:0 auto;}23 24#logo {margin:39px 30px 0px 30px; height:40px;}25#logo a {color:#EDECEC; text-decoration:none; font-size:24px; text-transform:uppercase; background:url(images/logo.gif) no-repeat; padding:4px 0 0 50px; float:left;}26 27#menu {padding-right:30px; height:56px;}28#menu ul {padding:0; margin:0; float:right;}29#menu li {float:left; list-style:none;}30#menu a {display:block; width:126px; height:50px; font-size:11px; text-decoration:none; color:#ABABAB; text-align:center; background:url(images/menu_deact.gif) no-repeat; padding-top:6px;}31#menu a:hover, #menu a.active {background:url(images/menu_act.gif) no-repeat; color:#180202;}32 33#main {color:#D6D6D6; font-size:11px; line-height:16px;}34 35#main ul {padding:0; margin:10px 0;}36#main li {margin-left:20px;}37#main img {border:6px solid #FFFFFF; margin:0 5px;}38#main img:hover {border-color:#D6D6D6;}39 40#text_top {padding:0 30px 20px 30px; font-size:12px;}41 42#text_bottom {background:url(images/main_bckg.jpg) repeat-x #919191; width:940px; float:left; padding:30px 30px;}43 44#first_col {width:420px; float:left; margin-right:40px;}45#first_col h2 {color:#ff6f08; border-bottom:1px solid #5d5d5d; padding-bottom:10px;}46 47#third_col {48 width:440px;49 float:left;50 color: #D6D6D6;51}52#third_col h2 {53 color:#ff6f08;54 border-bottom:1px solid #5d5d5d;55 padding-bottom:10px;56 text-align: center;57}58 59#footer {clear:both; height:50px; background:url(images/footer_bckg.jpg) no-repeat; color:#ffffff; font-size:11px;}60#footer_left {float:left; padding:16px 0 0 30px;}61#footer_right {float:right; padding:16px 30px 0 0;}62 63 64 65#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}66#lightbox img{ width: auto; height: auto;}67#lightbox a img{ border: none; }68 69#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }70#imageContainer{ padding: 10px; }71 72#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }73#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }74#imageContainer>#hoverNav{ left: 0;}75#hoverNav a{ outline: none;}76 77#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }78#prevLink { left: 0; float: left;}79#nextLink { right: 0; float: right;}80#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }81#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }82 83#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }84 85#imageData{ padding:0 10px; color: #666; }86#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 87#imageData #caption{ font-weight: bold; }88#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } 89#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} 90 91#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }92 </style>93 <!-- Beginning of PHP code -->94 <!-- End of PHP code -->95 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">96 <title>97 GlycoFragwork by COL Group98 </title>99 </head>100 <body>101 <div id="container">102 <!-- header -->103 <div id="logo">104 <a>105 GlycoFragwork106 </a>107 </div>108 <div id="menu">109 <ul>110 <li>111 <a class="active">112 home113 </a>114 </li>115 <li>116 <a>117 download118 </a>119 </li>120 </ul>121 </div>122 <!--end header -->123 <!-- main -->124 <div id="main">125 <div id="text_top">126 <h1>127 Welcome to GlycoFragwork128 </h1>129 <p>130 GlycoFragwork analyzes 131 multiple pre-aligned LC-MS/MS datasets, and reports a list (termed as a 'glycomap') of 132 identified intact glycopeptides with their mass, elution time and abundance133 </p>134 <p>135 Currently, it can be executed on Windows XP, Vista, 7 with .net framework 2.0 installed.136 </p>137 </div>138 <center>139 <div id="first_col">140 <h2>141 NEWS142 </h2>143 <p>144 2013.03.23 First release version to public.145 <font color="#FFFF00">146 NEW!!147 </font>148 </p>149 <h2>150 CONTACT151 </h2>152 <p>153 Advisor: 154 <a target="_new">155 Haixu Tang156 </a>157 <br>158 Email: hatang at indiana.edu159 </p>160 <p>161 <a target="_new">162 Anoop Mayampurath163 </a>164 <br>165 Email: anmmayam at indiana.edu166 </p>167 <p>168 <a target="_new">169 Chuan-Yih Yu170 </a>171 172 <br>173 Email: chuyu at indiana.edu174 </p>175 </div>176 <div id="third_col">177 <h2>178 Current Version179 </h2>180 <p>181 <a>182 Version 0.9183 </a>184 </p>185 <h2>186 187 </h2>188 <h2>189 Funding190 </h2>191 <p>192 This work is supported by NSF grant DBI-0642897, 1R01GM093322-03 and a student fellowship from Persistent Systems.193 </p>194 </div>195 </center>196 <div id="text_bottom">197 </div>198 </div>199 <!-- end main -->200 <!-- footer -->201 <div id="footer">202 <div id="footer_left">203 © Copyright 2009 COL Group, Indiana University204 </div>205 <div id="footer_right">206 <!-- Please do not change or delete these links. Read the license! Thanks. :-) -->207 <a>208 Web design209 </a>210 released by211 <a>212 Flash Gallery213 </a>214 </div>215 </div>216 <!-- end footer -->217 </div>218 <div id="overlay" style="display: none;">219 </div>220 <div id="lightbox" style="display: none;">221 <div id="outerImageContainer" style="width: 250px; height: 250px;">222 <div id="imageContainer">223 <img id="lightboxImage">224 <div id="hoverNav">225 <a id="prevLink">226 </a>227 <a id="nextLink">228 </a>229 </div>230 <div id="loading">231 <a id="loadingLink">232 <img src="rick.jpg">233 </a>234 </div>235 </div>236 </div>237 <div id="imageDataContainer">238 <div id="imageData">239 <div id="imageDetails">240 <span id="caption">241 </span>242 <span id="numberDisplay">243 </span>244 </div>245 <div id="bottomNav">246 <a id="bottomNavClose">247 <img src="rick.jpg">248 </a>249 </div>250 </div>251 </div>252 </div>253 </body>254</html>255