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 HTML 4.01 Transitional//EN">2<html lang="en">3 <head>4 <style>5 /*6Theme Name: WP MagaPress7Theme URI: http://patrick.bloggles.info/wpthemes/8Description: <strong>Screen: 800X600+</strong><br />Left sidebar and 2 column fixed width based WP-Andreas01, widgets ready, related post included.9Version: 20.0710Author: Patrick Chia11Author URI: http://patrick.bloggles.info/12*/13 14/* Body */15*{margin:0; padding:0;}16body{background:#f4f4f4 url(img/bg.gif) top center repeat-y; color:#000; 17font-family:Verdana,Tahoma,Arial,Sans-Serif;18font-size:75%;}19h1{color:#993300; font-size: 1.6em;}20h2{color:#993300; font-size: 0.85em;}21td{font-size: 0.9em;}22#wrap{background-color:#ffffff; color:#000; margin:0 auto; width:760px;}23 24/* Links */25a{background-color:inherit; color:#993300; font-weight:normal; text-decoration:underline;}26a:hover{background-color:inherit; color:#996600; font-weight:normal; text-decoration:underline;}27a img{border:0;}28 29/* Header */30#header{margin:10px 0 0;}31#header h1{background-color:inherit; float:left; font-size:2em; letter-spacing:-1px; margin:0 0 10px; width:350px;}32#header h1 a{background-color:inherit; text-decoration:none;}33#header p{background-color:inherit; color:#808080; float:right; font-size:1.1em; font-weight:bold; line-height:1.3em; margin:6px 0 0; text-align:right; width:400px;}34#frontphoto{margin:0 0 15px;text-align:right}35 36/* Sidebars */37#leftside{clear:left; float:left; line-height:1.4em; margin:0 0 5px; width:140px;}38#extras{line-height:1.4em; margin:0 0 5px; width:140px;}39#leftside p, #leftside ul, #leftside div.textwidget, #extras p, #extras ul, #extras div.textwidget{font-size:0.9em; margin:0 0 18px;}40#leftside li, #extras li{line-height:1.2em; list-style:none; margin:0 0 6px;}41#leftside ul ul, #extras ul ul{margin:6px 0 0 10px;}42#leftside ul ul li, #extras ul ul li{margin:0 0 4px;}43#leftside ul ul li a, #extras ul ul li a{font-weight:normal;}44#leftside ul.linklist, #extras ul.linklist{font-size:1em;}45#leftside ul.linklist ul, #extras ul.linklist ul{margin:0 0 18px;}46#leftside ul.linklist ul li a, #extras ul.linklist ul li a{font-weight:bold;}47#leftside h2, #leftside ul.linklist li h2, #leftside h3, #extras h2, #extras ul.linklist li h2, #extras h3{background-color:inherit; color:#505050; font-size:1.2em; margin:0 0 10px;}48#leftside label, #extras label{display:none;}49 50/* Main menu */51ul.page{list-style:none; margin:0 0 18px; width:140px;}52ul.page li{display:inline; line-height:1.4em; width:140px;}53ul.page li a{background-color:#f4f4f4; border-left:4px solid #cccccc; color:#505050; float:left; font-weight:bold; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:130px;}54ul.page li a:hover, ul.page li.current_page_item a{background-color:#ffffcc; border-left:4px solid #993300; color:#505050;}55ul.page ul{font-size:0.9em;margin:0 0 0 15px;padding:0 0 5px;width:125px;}56ul.page ul a{padding:3px 1px 3px 5px;width:115px;}57ul.page ul ul{width:113px;}58ul.page ul ul a{width:100px;}59 60/* Content */61#content{border-left:1px solid #e0e0e0;border-right:1px solid #e0e0e0;line-height:1.6em;margin:0 150px 5px;padding:0 10px;}62#contentwide{border-left:1px solid #f0f0f0;line-height:1.6em;margin:0 0 5px 150px;padding:0 0 0 15px;}63#content h2,#contentwide h2{font-size:1.6em;margin:0 0 10px;}64#content h3,#contentwide h3{font-size:1.25em;margin:0 0 8px; color: #666;}65#content img,#contentwide img{border:1px solid #d0d0d0;float:left;margin:3px 10px 3px 0;}66#content ul,#contentwide ul,#content ol,#contentwide ol{margin:0 0 16px 20px;}67#content li,#contentwide li{padding:0 0 0 5px;}68#content ul ul,#contentwide ul ul,#content ol ol,#contentwide ol ol{margin:0 0 0 16px;}69 70/* Footer */71#footer{background-color:#ffffff;border-top:2px solid #e0e0e0;clear:both;color:#808080;font-size:1.1em;font-weight:normal;line-height:1.3em;margin:0 auto;padding:10px 0;text-align:center;width:760px;}72#footer p{margin:0;padding:0;}73#footer a{background-color:inherit;color:#808080;font-weight:normal;text-decoration:none;}74#footer a:hover{background-color:inherit;color:#505050;text-decoration:underline;}75 76/* Subpage menu */77#subpages{border-bottom:1px solid #e0e0e0;border-left:1px solid #e0e0e0;float:right;font-weight:bold;line-height:1.3em;margin:-5px 0 8px 15px;padding:0 0 10px 10px;width:190px;}78#subpages h2{font-size:1.2em;font-weight:bold;letter-spacing:-1px;line-height:1.3em;margin:0 0 12px;}79#subpages ul.submenu{line-height:1.4em;list-style:none; margin:0;}80#subpages ul.submenu li{display:inline; line-height:1.4em; width:180px; padding:0;}81#subpages ul.submenu li a{background-color:#f4f4f4;border-left:0px solid #cccccc;color:#505050;float:left;font-weight:bold;margin-bottom:5px;padding:3px 1px 3px 5px;text-decoration:none;width:180px;}82#subpages ul.submenu li ul{margin:0 0 5px 10px;width:170px;}83#subpages ul.submenu li ul li a{width:170px;}84#subpages ul.submenu li ul ul{margin:0 0 5px 10px;width:160px;}85#subpages ul.submenu li ul ul li a{width:160px;}86#subpages ul.submenu li ul ul ul{margin:0 0 5px 10px;width:150px;}87#subpages ul.submenu li ul ul ul li a{width:150px;}88#subpages ul.submenu li a:hover,#subpages ul.submenu li.current_page_item a{background-color:#ffffcc;border-left:0px solid #993300;color:#505050;}89#subpages ul.submenu li.current_page_item ul li a{background-color:#f4f4f4;border-left:0px solid #cccccc;color:#505050;}90 91/* Tags */92p,ul,ol{margin:0 0 16px;}93blockquote{border-left:0px solid #e0e0e0;margin:20px;padding:8px 8px 8px 15px;}94blockquote p{background-color:inherit;color:#505050;font-size:0.9em;line-height:1.3em;}95label{background-color:inherit;color:#606060;font-size:0.9em;font-weight:bold;}96table#wp-calendar{margin:0 0 18px;width:140px;}97 98/* Forms */99#s,#submit{background-color:#ffffff;border:1px solid #cccccc;color:#505050;font-size:0.9em;margin:0 0 16px;padding:4px;width:130px;}100#author,#email,#url,#comment{border:1px solid #cccccc;font-family:Verdana,Tahoma,Arial,Sans-Serif;font-size:1em;margin:0;padding:4px;}101#commentsection{margin-top: 10px; margin-left:15px 0 0;}102#commentsection p{margin:0 0 6px; }103 104/* Float fix */105.contenttext{overflow:hidden;}106* html .contenttext{height:1px;overflow:visible;}107* html .contenttext p{overflow:hidden;width:99%;}108 109/* Various classes */110.left{border:1px solid #cccccc;float:left;margin:10px 15px 10px 0;}111.right{border:1px solid #cccccc;float:right;margin:10px 0 5px 10px;}112.center{border:1px solid #aaaaaa;margin:5px auto 12px;text-align:center;}113.textright{text-align:right;}114.small{font-size:0.8em;}115.bold{font-weight:bold;}116.hide{display:none;}117.post{margin:0 0 25px;}118.postinfo{background-color:#f4f4f4;border-left:0px solid #cccccc;color:#606060;font-size:0.9em;font-weight:bold;line-height:1.5em;margin:1px 0 40px;padding:8px 5px 8px 8px; margin-bottom: 10px;}119.comment{background-color:#f4f4f4;border-left:0px solid #cccccc;color:#606060;margin:0 0 10px;padding:8px 5px 0 8px;}120.comment p.commenthead{line-height:1.6em;}121.comment p{font-size:0.9em;line-height:1.3em;margin:0 0 6px;padding-bottom:5px;}122.navigation{display:block;margin:10px 0;padding:0 0 15px;text-align:center;}123.navigation p{margin:0;padding:0;}124.prevlink{margin-right:20px;}125.nextlink{margin-left:20px;}126 127.gen1 { margin-left: 8px; }128.gen2 { margin-left: 16px; }129.gen3 { margin-left: 24px; }130.gen4 { margin-left: 32px; }131.gen5 { margin-left: 40px; }132.gen6 { margin-left: 48px; }133.gen7 { margin-left: 56px; }134.gen8 { margin-left: 64px; }135.name { color: #993300; }136.dob, .dod { font-style: italic; }137li.alt p { font-style: italic; }138dl { margin-left: 1em; margin-bottom: 1em;}139dd { font-size:0.95em; }140dt { font-weight:bold; }141#kaywamobilizer { padding: 0px; }142 143 144 145BODY, P, LI, DD, DT {146 font-family: verdana, arial, sans-serif;147 font-size: 10pt;148 margin-left: 0px;149 margin-top: 0px;150 SCROLLBAR-FACE-COLOR: #999999;151 SCROLLBAR-TRACK-COLOR: #cccccc;152 SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;153 SCROLLBAR-SHADOW-COLOR: #ffffee;154 SCROLLBAR-3DLIGHT-COLOR: #999999;155 SCROLLBAR-ARROW-COLOR: #cccc99;156 SCROLLBAR-DARKSHADOW-COLOR: #444444;157 }158 159BODY {160 margin-top: 5px;161 margin-right: 5px;162 margin-left: 10px;163}164 165BLOCKQUOTE {166 margin-left: 10px;167 text-indent: 5px;168 font-style: italic;169}170 171TABLE.index {172 margin-left: 15px;173}174 175.calendar_day {176 color: #333333;177 font-size: 7pt;178}179 180TD.key {181 font-family: verdana, arial, sans-serif;182 font-weight: bold;183 color: #333333;184}185 186 187TD.even {188 padding: 2px;189 background: #ffffff;190}191 192TD.odd {193 padding: 2px;194 background: #ffffbb;195}196 197IMG.content {198 border-style: solid;199 border-color: #666666;200 border-width: thin;201 }202 203.logheader {204 font-family: verdana, arial, sans-serif;205 font-size: 10pt;206 color: #cccccc;207 background: #666666;208 padding: 0px;209 border-width: thin;210 border-style: solid;211 border-color: #666666;212 width: 100%;213 }214 215.menu {216 color: #666666;217 font-size: 8pt;218 margin-left: 3px;219 }220 221.intro {222 font-family: verdana, arial, sans-serif;223 color: #333;224 /* color: #003333; */225 background: #eec;226 /* background: #99cccc; */227 /* background: #ffcc66; */228 /* border: 1px dashed #999; */229 padding: 5px;230 /* border-width: thin;231 border-style: solid;232 border-color: #633;233 border-left: thin solid #aaa;234 border-top: thin solid #aaa; */235 236 /* border-color: #ff9900; */237 width: 100%;238 }239 240small.title {241 color:#333366;242 font-size: 8pt;243}244 245.panelGeek {246 padding: 2px;247 /* border:1px solid #999; 248 background: #eee; */249}250 251.panelMain {252 padding: 5px;253 border: 1px dashed #ccc; 254 background: #ffffee;255}256 257.panelPersonal {258 /* padding: 0px;259 border:1px dashed #999; */260 background: #fff;261}262 263.panelCalendar {264 padding: 2px;265 margin-right: 5px;266 margin-left: 0px;267 border:1px dashed #999999;268 background: #eeeeee;269}270 271.sitetitle {272 color:#666666;273 font-family: verdana, helv, arial, sans-serif;274 font-size: 18px;275 letter-spacing: 3px;276 font-weight: bold;277 margin-left: 12px;278 margin-top: 10px;279 margin-bottom: 10px;280 }281 282pre.title {283 color:#666666;284}285 286pre.highlighted {287 background: #eeeeee;288}289 290 291A {292 color: #6666aa;293 font-weight: normal;294}295 296A:hover {297 background: #dddddd;298 font-weight: normal;299}300 301A:visited {302 color: #660033;303 font-weight: normal;304}305 306A.sidebar {307 margin-left: 8px;308 margin-right: 3px;309}310 311P {312 margin-top: 5px;313 margin-bottom: 10px;314}315 316CODE { 317 color: #003300;318 background: #efffef;319 }320 321DL {322 MARGIN-LEFT: 15px;323 }324 325DT {326 font-weight: bold;327 color: #333333;328 margin-top: 10px;329 }330 331TD {332 font-size: 9pt;333 }334 335TH {336 font-size: 9pt;337 background: #ffcc99;338 color: #663300;339 }340 341H1, H2, H3, H4 { 342 font-weight: bold;343 color:#666666;344 font-family: verdana, helv, arial, sans-serif;345}346 347 348H1 {349 font-size: 18px;350 margin-top: 0px;351 margin-bottom: 12px;352 }353 354H2 {355 font-size: 11pt;356 margin-top: 10px;357 margin-bottom: 7px;358 }359 360H3 {361 font-size: 12px;362 margin-top: 5px;363 margin-bottom: 7px;364 }365 366H4 {367 font-size: 11px;368 margin-top: 10px;369 margin-bottom: 5px;370 }371 372UL.tight {373 margin-top: 0px;374 margin-left: 10px;375 }376 377 378.indent {379 MARGIN-LEFT: 20px;380 }381 382.code {383 MARGIN-LEFT: 20px;384 color: #003300;385 background: #efffef;386 }387 388.codesmall {389 MARGIN-LEFT: 20px;390 color: #003300;391 background: #efffef;392 font-size: 9pt;393 }394 395.contents {396 font-size: 8pt;397 background: #efffef;398 border-color: #cccccc;399 margin: 0px;400 color: #666666;401 }402 403 404 405 406.leftcol { 407 color: #ffffff;408 }409 410 411 412 413TABLE.seealso {414 background: #eeeeee;415 color: #666666;416 border-width: thin;417 border-style: solid;418 border-color: #333333;419 border-left: thin solid #cccccc;420 border-top: thin solid #cccccc;421 }422 423.banner {424 color: #cccccc;425 border-width: 2px;426 /* border-width: thin; */427 border-style: solid;428 border-color: #333333;429 border-left: thin solid #cccccc;430 border-top: thin solid #cccccc;431 }432 433TABLE.contents {434 background: #efffef;435 margin: 0px;436 color: #666666;437 border-width: thin;438 border-style: solid;439 border-color: #333333;440 border-left: thin solid #cccccc;441 border-top: thin solid #cccccc;442 }443 444.seealso {445 font-size: 8pt;446 background: #eeeeee;447 color: #666666;448 }449 450.smintro {451 color: #ffffff;452 background: #aaaaaa;453 margin-left: 0px;454 padding: 5px;455 border-width: 1px;456 border-style: solid;457 border-color: #666666;458 }459 460.bodyimage {461 border-width: 1px;462 border-style: solid;463 border-color: #ffcc99;464 }465 466.tableform {467 color: #ffffff;468 background: #cccccc;469 margin-bottom: 15px470 }471 472TABLE.data {473 color: #333;474 background: #eee;475 border: thin solid #ccc;476 }477 478TD.tabledata {479 background: #ffffff;480}481 482.blogrollLinkedText {483 margin-left: 8px;484 margin-right: 3px;485 font-size: 8pt;486}487 488.blogrollText {489 color: #666666;490 font-size: 8pt;491 margin-left: 3px;492 font-weight: bold;493 }494 495.itemtitle {496 font-size: 1.1em;497 font-weight: bold;498 margin-bottom: 1.2em;499 margin-top: 0px;500 padding: 0.3em;501 background: #eeeeee;502}503 504 505 .generation {506 margin-left: 1em;507 }508 509 .name {510 font-weight: bold;511 }512 513 .dob {514 padding-left: 0.5em;515 }516 517 .dod {518 padding-left: 0.5em;519 }520 521 .spouse {522 padding-left: 0.5em;523 text-decoration: italic;524 }525 526 .gen1, .gen2, .gen3, .gen4, .gen5, .gen6, .gen7, .gen8 {527 margin-left: 0.5em;528 margin-top: 1em;529 width: 400;530 border: thin #999999;531 }532 533 .gen1 { background-color: #ccccff; }534 .gen2 { background-color: #ccccee; }535 .gen3 { background-color: #ccccdd; }536 .gen4 { background-color: #cccccc; }537 .gen5 { background-color: #ccccbb; }538 .gen6 { background-color: #ccccaa; }539 .gen7 { background-color: #cccc99; }540 .gen8 { background-color: #cccc88; }541 </style>542 <title>543 Webmaster: Master of What?544 </title>545 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">546 <meta content name="description">547 <meta content name="keywords">548 </head>549 <body alink="#008000" background bgcolor="#ffffff" link="#0000FF" text="#000000" vlink="#800080">550 <div id="wrap">551 <div id="header">552 <h1>553 <a>554 DeeKnow’s Grotto555 </a>556 </h1>557 <p>558 <strong>559 </strong>560 </p>561 </div>562 <div id="leftside">563 <div align="center">564 <a>565 <img alt="DeeKnows Homepage" border="0" height="83" src="rick.jpg" title="Go to the Home page" width="64">566 </a>567 </div>568 <h2 class="hide">569 Main menu:570 </h2>571 <ul class="page">572 <li class="page_item current_page_item">573 <a>574 Home575 </a>576 </li>577 <li class="page_item">578 <a title="About">579 About580 </a>581 </li>582 <li class="page_item current_page_item">583 <a>584 Wiki585 </a>586 </li>587 </ul>588 <div id="extras">589 <h2>590 Site search591 </h2>592 <form action="/index.php" id="searchform" method="get">593 <div>594 <label for="s">595 Search for:596 </label>597 <input id="s" name="s" size="14" type="text" value>598 <input id="searchsubmit" type="hidden" value="Search">599 </div>600 </form>601 <p class="menu">602 <strong>603 Contents:604 </strong>605 <br>606 <a class="sidebar" title="DeeKnow's Dynamic Dyno">607 Dyno608 </a>609 <br>610 <a class="sidebar" title="What the hell is Zope">611 Zope612 </a>613 <br>614 <a class="sidebar" title="list of funny Spam I've received lately">615 Spam616 </a>617 <br>618 <a class="sidebar" title="Maori Processes and Protocols">619 Mäori620 </a>621 <br>622 <a class="sidebar" title="A timeline of events in Israel">623 Israel624 </a>625 <br>626 <a class="sidebar" title="Travel and Holiday notes">627 Travel628 </a>629 <br>630 <a class="sidebar" title="Some photos from this years Ski trip">631 Skiing632 </a>633 <br>634 <a class="sidebar" title="Results of a 'what are your beliefs' survey">635 Beliefs636 </a>637 <br>638 <a class="sidebar" title="Index of my Photos">639 Photos640 </a>641 <br>642 <a class="sidebar" title="Bits and pieces of Wisdom">643 Wisdom644 </a>645 <br>646 <a class="sidebar" title="Amazon Wishlist - go on, buy me something!">647 WishList648 </a>649 <br>650 <a class="sidebar" title="Some notes on end-of-days prophecy">651 Prophecy652 </a>653 <br>654 <a class="sidebar" title="DeeKnows WebCam">655 WebCam656 </a>657 <br>658 <a class="sidebar" title="Photos from the Tongariro Crossing">659 Tongariro660 </a>661 <br>662 <a class="sidebar" title="Notes, Links and Piccies re MS Flightsimulator">663 Flight-sim664 </a>665 <br>666 <a class="sidebar" title="Stuff about my current bike, and the ones I'd like to buy">667 Motorbike668 </a>669 <br>670 <a class="sidebar" title="My Technial Web News Blog">671 Tech Stuff672 </a>673 <br>674 <a class="sidebar" title="Various entertaining morsels">675 Funny Shit676 </a>677 <br>678 <a class="sidebar" title="Photos from my trip to Hong Kong in 2001">679 Hong Kong680 </a>681 <br>682 <a class="sidebar" title="Notes about the PS2 games I own">683 PlayStation2684 </a>685 <br>686 <a class="sidebar" title="Timeline of events surrounding the Freemasons, and the Crusades">687 Freemasonry688 </a>689 <br>690 <a class="sidebar" title="Stuff about the role of 'webmaster'">691 Webmastering692 </a>693 <br>694 <a class="sidebar" title="Some scary photos of dodgy hair-dos">695 Haircuts from Hell696 </a>697 <!-- <br><a class="sidebar" href='/notes/tech/'>Tech Notes</a>698<br><a class="sidebar" href='/notes/a'>Other Notes</a> -->699 </p>700 <!--701 <p class='menu'><strong>Wot I'm Reading:</strong>702 <br><a class="sidebar" >Biggie</a>703 <br><a class="sidebar" title="English language edition of Russian paper">Pravda</a>704 <br><a class="sidebar" >All Africa</a>705 <br><a class="sidebar" >MemePool</a>706 <br><a class="sidebar" >The Onion</a>707 <br><a class="sidebar" >Planet PS2</a>708 <br><a class="sidebar" title="Christian Science Monitor">CS Monitor</a>709 <br><a class="sidebar" >Space Daily</a>710 <br><a class="sidebar" >Islam-Online</a>711 <br><a class="sidebar" >Google News</a>712 <br><a class="sidebar" >Cycling News</a>713 <br><a class="sidebar" >Palestine Daily</a>714 <br><a class="sidebar" title="Sydney Morning Herald">Sydney M. Herald</a>715 <br><a class="sidebar" >The Smoking Gun</a>716 <br><br><a class="sidebar" >more..>></a>717 </p>718-->719 </div>720 </div>721 <div id="frontphoto">722 <img alt="DeeKnow’s Grotto" height="175" src="rick.jpg" width="590">723 </div>724 <div id="contentwide">725 <h1>726 Webmaster: Master of What?727 </h1>728 <p class="intro">729 The name means different things to different people and the role varies greatly between organisations of various types and sizes. Ask two people and you'll get three opinions, it really is something of a grey area.730 </p>731 <p>732 If you have a web server installed on your computer at home, and you installed your O/S and web server yourself, and you perform backups, design and build your own web sites, then technically, you are a webmaster. Although you are master of a fairly small domain.733 </p>734 <p>735 Large organisations such as Hospitals, Government Departments, Big Corporates or Universities often run many web servers which store thousands of web pages for many clients with different needs. In organisations of this scale there is a need to split web design and management roles amongst multiple people who may be formed into a736 <a>737 web team738 </a>739 with a dedicated Webmaster740 </p>741 <p>742 In such a web team, the Webmaster is able to better focus on the Web service and servers and surrounding technologies and leave the other roles to the respective specialists in their areas, but the webmaster's responsibilities will often overlap with those of the other team members.743 </p>744 <p>745 In smaller organisations a dedicated webmaster would be a luxury. This is where the role and your talents are generally spread the furtherst and where a webmaster must truely be a jack-of-all-trades possibly absorbing many of the other roles normally filled by a746 <a>747 web team748 </a>749 in a larger organisation.750 </p>751 <p>752 Often, if required to be involved on smaller web projects, a web master may be project manager, spec writer, programmer, administrator as well as being a kind of mediator or liasion between the client and other project staff such as graphic artists an DBA's.753 </p>754 </div>755 </div>756 </body>757</html>758