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>2<html lang="en">3 <head>4 <style>5 html, body, div, span, applet, object, iframe,6h1, h2, h3, h4, h5, h6, p, blockquote, pre,7a, abbr, acronym, address, big, cite, code,8del, dfn, em, font, img, ins, kbd, q, s, samp,9small, strike, strong, sub, sup, tt, var,10b, u, i, center,11dl, dt, dd, ol, ul, li,12fieldset, form, label, legend,13table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}14ol, ul{list-style:none;}15blockquote, q{quotes:none;}16:focus{outline:0;}17ins{text-decoration:none;}18del{text-decoration:line-through;}19table{border-collapse:collapse;border-spacing:0;}20body{font:12px/18px 'Palatino Linotype', 'Times New Roman', Times, serif;width:100%;background:#333;}21a{color:#0062c8;outline:none;text-decoration:none;}22a:hover{text-decoration:underline;}23p{margin:0 0 18px}24img{border:none;}25input{vertical-align:middle;}26#wrapper{margin:0 auto;background:#fff;}27#header{height:auto;border-bottom:1px dashed #389fff;}28#header h1{font-size:2.0em;line-height:1.3em;color:#990000;padding:10px 0px 7px 0px;}29#header p{font-size:1.2em;color:#000;padding-left:20px;}30.lg0{float:left;margin:0 1em 0 0;}31#middle{height:1%;}32#middle:after{content:'';clear:both;display:table;}33#container{width:100%;}34#content{border-left:1px dashed #389fff;}35#content h2,h3{font-size:1.5em;color:#990000;padding:0px 0px 20px 0px;}36#content p,form{font-size:1.2em;color:#000;width:auto;}37.descf ul{font-size:1.2em;color:#000;padding:0 0 0.5em;width:auto;}38.descf{display:inline-block;}39.descf p{margin-bottom:0.5em;}40.descf li{}41#content iframe{}42#content object, embed{background:#eee;}43.banner{margin:20px 0;overflow:hidden;height:auto;text-align:center;border:1px solid #ccc;}44.swf{padding:0px 0px 20px 0px;background:#fff;margin:auto;}45#gm_cont,#s,#sc{z-index:999;}46#swfs{background:#fff;padding:0px 0px 0px 0px;}47.cb{content:'';clear:both;}48.fsmode{padding:4px;text-align:center;background-color:#eee;font-size:1.2em;color:#999;border-top:1px solid orange;border-bottom:1px solid orange;}49.thmb{float:left;margin:0 1em 0.8em 0;padding:0px 0px 5px 0px;width:131px;height:141px;overflow:hidden;text-align:center;}50.thmb img{margin-bottom:1px;border-radius:16px;}51.thmb a{font-size:1.1em;line-height:1.1em;}52.hr_b{width:auto;height:26px;line-height:26px;background:#fff url(/img/bg_hr_b.png);margin-top:4px;color:#fff;}53.hr_b a{font-size:1.2em;color:#fff;margin-left:24px;}54.hr_b span{font-size:1.2em;color:#fff;margin-left:24px;}55.hr_g{width:auto;height:26px;line-height:26px;background:#fff url(/img/bg_hr_g.png);margin-top:4px;color:#fff;}56.hr_g a{font-size:1.2em;color:#fff;margin-left:24px;}57.hr_g span{font-size:1.2em;color:#fff;margin-left:24px;}58.hr_r{width:auto;height:26px;line-height:26px;background:#fff url(/img/bg_hr_r.png);margin-top:4px;color:#fff;}59.hr_r a{font-size:1.2em;color:#fff;margin-left:24px;}60.hr_r span{font-size:1.2em;color:#fff;margin-left:24px;}61.lnks{position:relative;font-size:1.3em;line-height:26px;display:inline-block;top:-26px;left:165px;}62#sideLeft{background:#fff;}63#sideLeft a{font-size:1.1em;line-height:1.1em;}64#sideLeft ul{font-size:1.1em;}65#sideLeft li{padding-bottom:0.8em;}66#footer{min-height:35px;padding:15px 15px 0px 0px;border-bottom:3px solid #e2f1ff;border-top:1px dashed #389fff;}67#footer p{font-size:1.0em;line-height:1.3em;color:#000;padding-left:20px;}68.lg1{float:left;margin:0 10px 0 0;}69.cnt{float:right;margin:0 0 0 10px;width:70px;}70.cnt img{float:right;}71@media screen and (min-width:1065px){#header{padding:5px 20px 5px 0px;}72#wrapper{width:1042px;border-left:3px solid #e2f1ff;}73#middle{border-left:200px solid #fff;position:relative;}74#container{float:left;overflow:hidden;margin-right:-100%;}75#content{padding:20px;}76#sideLeft{float:left;width:160px;position:relative;left:-200px;padding:20px 20px 20px 0;}77#sideLeft ul{padding-left:20px;}78#content object, embed{width:800px;height:600px;}79#swfs{width:800px;height:600px;}80#content iframe{width:800px;height:600px;}81}82@media screen and (max-width:1064px){#header{padding:5px 15px 5px 0px;}83#wrapper{width:100%;min-width:260px;}84#content{padding:15px;}85#sideLeft{padding:0 15px 15px 0;}86#sideLeft ul{padding-left:15px;float:left;width:18%;}87#content object, embed{width:100%;height:90vh;}88#swfs{width:100%;height:auto;}89#content iframe{width:100%;height:90vh;}90}91@media screen and (max-width:800px){#sideLeft ul{width:22%;}92}93@media screen and (max-width:640px){#sideLeft ul{width:30%;}94}95@media screen and (max-width:480px){#sideLeft ul{width:43%;}96.lnks{top:0;left:20px;margin:15px 0;}97}98 </style>99 <meta content="text/html; charset=utf-8" http-equiv="content-type">100 <title>101 ZOOM - play online free102 </title>103 <meta content="You must use the cannon to collect the same balls in the group. Gathered, a group of three or more balls of the burst, and disappears." name="description">104 <meta content="width=device-width, initial-scale=1" name="viewport">105 <meta content="Zoom, zuma" name="keywords">106 <meta content="Min2win" name="author">107 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">108 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">109 <style media="screen" type="text/css">110 #swfs {visibility:hidden}111 </style>112 </head>113 <body>114 <div id="wrapper" style="height: auto !important;">115 <div id="header">116 <a title="FREE ONLINE GAMES">117 <img alt="FREE ONLINE GAMES" class="lg0" height="100" src="rick.jpg" width="110">118 </a>119 <h1>120 ZOOM121 </h1>122 <p>123 You can find this game in Zuma section, where also located a number of similar free online games. Read how to play, rules and features below and get ready to start.124 </p>125 </div>126 <div id="middle" style="height: auto !important;">127 <div id="container" style="height: auto !important;">128 <div id="content" style="height: auto !important;">129 <h2>130 RULES AND FEATURES131 </h2>132 <div class="descf">133 <p>134 The game Zuma, not having appeared in 2004 and immediately gained popularity among the many fans of the game Balls. The idea is simple and yet original.135 </p>136 <p>137 The Problem is that firing out of a cannon ball of a certain color to get them in the group of balls of the same color. Getting a group of three or more balls of the group of bursts and disappears, giving the player points.138 </p>139 <p>140 For a full understanding of the process, we recommend you to watch the video141 <a (watch play title="How" to video) zuma>142 how to play Zuma143 </a>144 .145 </p>146 </div>147 <div class="banner">148 <!-- ORG_top_game -->149 <ins class="adsbygoogle" data-ad-client="ca-pub-6476682684031179" data-ad-format="auto" data-ad-slot="[PHONE REDACTED]" data-adsbygoogle-status="done" style="display: block; height: 280px;">150 <div aria-label="Advertisement" id="aswift_0_host" style="border: none; height: 280px; width: 799px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block; overflow: visible;" tabindex="0" title="Advertisement">151 </div>152 </ins>153 </div>154 <div class="fsmode" id="s">155 <a onclick="$('#gm_cont > object').height($('#gm_cont > object').height() + 30)" title="Increase size">156 ( + )157 </a>158 •159 <a onclick="$('#gm_cont > object').height($('#gm_cont > object').height() - 30)" title="Decrease size">160 ( – )161 </a>162 •163 <a onclick="$('#gm_cont > object').css({'height':'600px','width':'800px'})" title="Set original size">164 (800x600)165 </a>166 •167 <a onclick="window.open('/swfs/833.swf', '_blank');" title="Full screen mode (game opens in new window)">168 Full screen169 </a>170 </div>171 <div class="swf" id="gm_cont">172 <!--googleoff: index-->173 <!--noindex-->174 <ruffle-object data="/swfs/833.swf" height="100%" id="swfs" style="visibility: visible;" type="application/x-shockwave-flash" width="100%">175 <param name="allowScriptAccess" value="sameDomain">176 <param name="allowNetworking" value="all">177 <param name="base" value="/swfs/">178 </ruffle-object>179 <!--/noindex-->180 <!--googleon: index-->181 </div>182 <p>183 You can play the game184 <b>185 ZOOM186 </b>187 online 24 hours a day for free.188 <br>189 <br>190 </p>191 <h3>192 RELATED GAMES193 </h3>194 <div class="thmb">195 <a title="BALLS">196 <img alt="Game BALLS" height="100" src="rick.jpg" width="100">197 <br>198 BALLS199 </a>200 </div>201 <div class="thmb">202 <a title="BEADS AND HONEY">203 <img alt="Game BEADS AND HONEY" height="100" src="rick.jpg" width="100">204 <br>205 BEADS AND HONEY206 </a>207 </div>208 <div class="thmb">209 <a title="PIG ZUMA">210 <img alt="Game PIG ZUMA" height="100" src="rick.jpg" width="100">211 <br>212 PIG ZUMA213 </a>214 </div>215 <div class="thmb">216 <a title="ZUMA-ZUMA">217 <img alt="Game ZUMA-ZUMA" height="100" src="rick.jpg" width="100">218 <br>219 ZUMA-ZUMA220 </a>221 </div>222 <div class="thmb">223 <a title="ZUMA BALLS">224 <img alt="Game ZUMA BALLS" height="100" src="rick.jpg" width="100">225 <br>226 ZUMA BALLS227 </a>228 </div>229 <div class="thmb">230 <a title="DIGITAL ZOOM">231 <img alt="Game DIGITAL ZOOM" height="100" src="rick.jpg" width="100">232 <br>233 DIGITAL ZOOM234 </a>235 </div>236 <div class="thmb">237 <a title="INDIAN ZUMA">238 <img alt="Game INDIAN ZUMA" height="100" src="rick.jpg" width="100">239 <br>240 INDIAN ZUMA241 </a>242 </div>243 <div class="thmb">244 <a title="ZUMA DELUXE">245 <img alt="Game ZUMA DELUXE" height="100" src="rick.jpg" width="100">246 <br>247 ZUMA DELUXE248 </a>249 </div>250 <div class="cb">251 </div>252 <div class="hr_b">253 <a title="All games">254 All games255 </a>256 </div>257 <div class="lnks">258 <a title="All Zuma">259 Zuma260 </a>261 </div>262 <p>263 </p>264 <h3>265 NEW ZUMA266 </h3>267 <div class="thmb">268 <a title="ZOOM GARY">269 <img alt="ZOOM GARY" height="100" src="rick.jpg" width="100">270 <br>271 ZOOM GARY272 </a>273 </div>274 <div class="thmb">275 <a title="ZOOM WITH THE WIZARD">276 <img alt="ZOOM WITH THE WIZARD" height="100" src="rick.jpg" width="100">277 <br>278 ZOOM WITH THE WIZARD279 </a>280 </div>281 <div class="thmb">282 <a title="ZUMA LEGEND JUNGLE">283 <img alt="ZUMA LEGEND JUNGLE" height="100" src="rick.jpg" width="100">284 <br>285 ZUMA LEGEND JUNGLE286 </a>287 </div>288 <div class="thmb">289 <a title="SAVE BIRDS OR ZUMA IN THE CELLS">290 <img alt="SAVE BIRDS OR ZUMA IN THE CELLS" height="100" src="rick.jpg" width="100">291 <br>292 SAVE BIRDS OR ZUMA IN THE CELLS293 </a>294 </div>295 <div class="thmb">296 <a title="SEARCH ITEMS: PACIFIC CITY">297 <img alt="SEARCH ITEMS: PACIFIC CITY" height="100" src="rick.jpg" width="100">298 <br>299 SEARCH ITEMS: PACIFIC CITY300 </a>301 </div>302 <div class="cb">303 </div>304 <div class="hr_g">305 <a title="All new games">306 New games307 </a>308 </div>309 <div class="lnks">310 <a title="New Zuma">311 Zuma312 </a>313 </div>314 <p>315 </p>316 <h3>317 TOP ZUMA318 </h3>319 <div class="thmb">320 <a title="ZUMA TOTEMIA">321 <img alt="ZUMA TOTEMIA" height="100" src="rick.jpg" width="100">322 <br>323 ZUMA TOTEMIA324 </a>325 </div>326 <div class="thmb">327 <a title="ZUMA DELUXE">328 <img alt="ZUMA DELUXE" height="100" src="rick.jpg" width="100">329 <br>330 ZUMA DELUXE331 </a>332 </div>333 <div class="thmb">334 <a title="ZUMA LEGEND JUNGLE">335 <img alt="ZUMA LEGEND JUNGLE" height="100" src="rick.jpg" width="100">336 <br>337 ZUMA LEGEND JUNGLE338 </a>339 </div>340 <div class="thmb">341 <a title="ZUMA FOR FREE">342 <img alt="ZUMA FOR FREE" height="100" src="rick.jpg" width="100">343 <br>344 ZUMA FOR FREE345 </a>346 </div>347 <div class="thmb">348 <a title="INDIAN ZUMA">349 <img alt="INDIAN ZUMA" height="100" src="rick.jpg" width="100">350 <br>351 INDIAN ZUMA352 </a>353 </div>354 <div class="cb">355 </div>356 <div class="hr_r">357 <a title="All TOP games">358 TOP games359 </a>360 </div>361 <div class="lnks">362 <a title="TOP Zuma">363 Zuma364 </a>365 </div>366 </div>367 </div>368 <div class="sidebar" id="sideLeft">369 <div id="menu">370 <ul>371 <li>372 <a title="Play Angry Birds">373 Angry Birds374 </a>375 </li>376 <li>377 <a title="Play Animals Care">378 Animals Care379 </a>380 </li>381 <li>382 <a title="Play Balls">383 Balls384 </a>385 </li>386 <li>387 <a title="Play Billiards">388 Billiards389 </a>390 </li>391 </ul>392 <ul>393 <li>394 <a title="Play Cooking">395 Cooking396 </a>397 </li>398 <li>399 <a title="Play Divination">400 Divination401 </a>402 </li>403 <li>404 <a title="Play Dress Up And Hairstyle">405 Dress Up And Hairstyle406 </a>407 </li>408 <li>409 <a title="Play Fighting">410 Fighting411 </a>412 </li>413 </ul>414 <ul>415 <li>416 <a title="Play Jokes And Cartoons">417 Jokes And Cartoons418 </a>419 </li>420 <li>421 <a title="Play Kids Games">422 Kids Games423 </a>424 </li>425 <li>426 <a title="Play Logical Games">427 Logical Games428 </a>429 </li>430 <li>431 <a title="Play Mahjongs">432 Mahjongs433 </a>434 </li>435 </ul>436 <ul>437 <li>438 <a title="Play Quests">439 Quests440 </a>441 </li>442 <li>443 <a title="Play Races">444 Races445 </a>446 </li>447 <li>448 <a title="Play Rpgs And Arcades">449 Rpgs And Arcades450 </a>451 </li>452 <li>453 <a title="Play Search Items">454 Search Items455 </a>456 </li>457 </ul>458 <ul>459 <li>460 <a title="Play Tetris">461 Tetris462 </a>463 </li>464 <li>465 <a title="Play Three In A Row">466 Three In A Row467 </a>468 </li>469 <li>470 <a title="Play Trucks">471 Trucks472 </a>473 </li>474 <li>475 <a title="Play Two Player Games">476 Two Player Games477 </a>478 </li>479 </ul>480 </div>481 <div class="cb">482 </div>483 </div>484 </div>485 <div id="footer">486 <img alt="Min2win" class="lg1" height="31" src="rick.jpg" width="50">487 <div class="cnt">488 </div>489 <p>490 <a title="Free Online Games">491 Free Online Games492 </a>493 .494 </p>495 </div>496 </div>497 <ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: none !important;">498 <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">499 </div>500 </ins>501 </body>502</html>503