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 /*FiftySense stylesheet*/6body {7 margin: 0;8 padding: 0;9 font: medium/1.4em "trebuchet MS", lucida, arial, helvetica, sans-serif;10 color: #000;11 background : #669885;12 }13 14li {15 margin-bottom: .6em;16 }17 18a {19 color: #39F;20 text-decoration: none;21 }22 23.print {24 display: none;25 }26 27a:visited {28 color: #e9b662;29 text-decoration: none;30 }31 32a:hover {33 color: #a6684a;34 text-decoration: underline;35 }36 37#textsize {38 position: absolute;39 top: 145px;40 left: 5px;41 z-index: 200;42 }43 44#main {45 color: #000;46 position: relative;47 width: 950px;48 background: #f6ecb8;49 border: 1px solid white;50 margin: 0 auto 20px auto;51 padding: 0;52 }53 54#mainstuff {55 float: left;56 width: 730px;57 /*border: 1px solid red;*/58 display: inline;59 margin: 0;60 padding: 0;61 }62 63#rightside {64 float: right;65 width: 200px;66 position: absolute;67 top: 180px;68 left: 750px;69 background: #f6ecb8;70 border: none;71 margin: 0;72 }73 74#content {75 float: right;76 position: relative;77 width: 530px;78 margin: 0 2px 0 0;79 /*border: 1px solid green;*/80 padding-left: 2px;81 background: #f6ecb8;82 }83 84 85/*Left Navigation -----------*/86#nav {87 width: 150px;88 position: relative;89 margin: 40px 0 0 15px;90 padding: 0;91 text-align: right;92/*93 border: 1px solid white;94*/95 }96 97#nav ul {98 list-style: none;99 padding: 0;100 margin: 0;101 }102 103#nav ul li {104 font-family: verdana, lucida, arial, helvetica, sans-serif;105 font-size: medium;106 line-height: 1.2em;107 padding: 0 0 16px 0;108 margin: 0;109 }110 111#nav ul li a {112 text-decoration: none;113 font-weight: bold;114 color: #39f;115 padding: 12px 0 0 0;116 }117 118#nav ul li a:visited {119 text-decoration: none;120 color: #a6684a;121 background: transparent;122 }123 124#nav ul li a:hover {125 text-decoration: underline;126 color: #ccc;127 background: transparent;128 }129 130 131#subhead {132 clear: both;133 position: relative;134 padding: 15px 0 0 0;135 font-size: 1.5em;136 }137 138 139/*SubNav-------------------*/140#subnav {141 position: relative;142 /*border: 1px solid white;*/143 float: left;144 margin: 0 0 20px 0;145/*fixes IE6 bug*/146/* margin: 0 0 0 200px !important;147 margin: 0 0 0 100px; */148 padding: 0;149 font-weight: bold;150 width: 530px151 }152 153#subnav ul {154 position: relative;155 float: left;156 margin: 0;157 padding: 0;158 display: inline;159 }160 161#subnav li {162 /*border: 1px solid red;*/163 float: left;164 margin: 0;165 padding: 0;166 background: #f7e9b6;167 font-size: 1em;168 line-height: 1.4em;169 width: auto;170 list-style: none;171 }172 173#subnav li a {174 float: left;175 display: block;176 padding: 4px 8px;177 color: #333;178 text-decoration: none;179 border: 1px solid #9B8748;180 }181 182#subnav li a:hover {183 color: #333;184 padding: 4px 8px;185 text-decoration: underline;186 background: #fff;187 border: 1px solid #fff;188 }189/*EndSubNav---------------------------*/190 191 192/*menu page indication-----------------*/193#home a#linkhome,194#about a#linkabout,195#outdoors a#linkoutdoors,196#adventure a#linkadventure,197#health a#linkhealth,198#apparel a#linkapparel,199#orgs a#linkorgs,200#humor a#linkhumor,201#active a#linkactive,202#videos a#linkvideos,203#resources a#linkresources,204#reviews a#linkreviews,205#search a#linksearch,206#contact a#linkcontact {207/* color: #b86847;*/208 color: #e9ad9b;209 font-weight: bold;210 text-decoration: none;211 }212 213 214#home a#linkhome:hover,215#about a#linkabout:hover,216#outdoors a#linkoutdoors:hover,217#adventure a#linkadventure:hover,218#health a#linkhealth:hover,219#apparel a#linkapparel:hover,220#orgs a#linkorgs:hover,221#humor a#linkhumor:hover,222#active a#linkactive:hover,223#videos a#linkvideos:hover,224#resources a#linkresources:hover,225#reviews a#linkreviews:hover,226#search a#linksearch:hover,227#contact a#linkcontact:hover {228 color: #b86847;229 text-decoration: none;230 }231/*EndMenu page indication-----------------*/232 233 234/*SubMenu page indication-------------------*/235.walk a#linkwalk,236.hiking a#linkhiking,237.backpack a#linkbackpack,238.camp a#linkcamp,239.canoe a#linkcanoe,240.cycle a#linkcycle,241.alpine a#linkalpine,242.nordic a#linknordic,243.snowboard a#linksnowboard,244.golf a#linkgolf,245.advenstart a#linkadvenstart,246.advenplan a#linkadvenplan,247.advenpack a#linkadvenpack,248.adventrips a#linkadventrips,249.advenfit a#linkadvenfit250 {251 color: #666;252 font-weight: bold;253 background: white;254 border: 1px solid #fff;255 }256 257.walk a#linkwalk:hover,258.hiking a#linkhiking:hover,259.backpack a#linkbackpack:hover,260.camp a#linkcamp:hover,261.canoe a#linkcanoe:hover,262.cycle a#linkcycle:hover,263.alpine a#linkalpine:hover,264.nordic a#linknordic:hover,265.snowboard a#linksnowboard:hover,266.golf a#linkgolf:hover,267.advenstart a#linkadvenstart:hover,268.advenplan a#linkadvenplan:hover,269.advenpack a#linkadvenpack:hover,270.adventrips a#linkadventripshover,271.advenfit a#linkadvenfit:hover272 {273 color: #666;274 font-weight: bold;275 background: white;276 text-decoration: none;277 border: 1px solid #fff;278 }279/*EndMenu page indication--------------------*/280 281 282/*Tertiary Navigation----------------------*/283#nav3 {284 position: relative;285 /*border: 1px solid white;*/286 margin: 0 0 10px 0;287 padding: 0;288 text-align: right;289 font-size: .9em;290 }291 292#nav3 a {293 background: #fcecb5;294 border: 1px solid blue;295 padding: 4px 8px;296 margin-top: 4px;297 line-height: 1.8em;298 }299 300#nav3 a:visited {301 color: black;302 text-decoration: none;303 }304 305#nav3 a:hover {306 color: #994b27;307 308 text-decoration: underline;309 }310/*endTertiary Navigation----------------------*/311 312 313 314h1, h2, h3, h4, h5, h6 {315 font-family: verdana, lucida, arial, helvetica, sans-serif;316 font-weight: bold;317 color: #000;318 background: transparent;319 }320 321h1 {322 font-size: 175%;323 line-height: 120%;324 }325 326h2 {327 font-size: 120%;328 line-height: 110%;329 }330 331h3 {332 font-size: 110%;333 }334 335 336cite {337 display: block;338 margin: 0 0 20px 20px;339 }340 341strong {342 font-weight: bold;343 font-size: 1.2em;344 }345 346.blurb {347 border: 3px solid #666;348 padding: 4px;349 position: relative;350/* height: 180px;*/351 margin: 0 0 10px 0;352 }353 354.blurb img {355 float: left;356 position: relative;357 margin-right: 10px;358 }359 360.blurb p {361 float: none;362 margin-bottom: 20px;363 }364 365.blurb h2 {366 margin: 0 0 4px 0;367 padding: 0;368 }369 370.commumnity {371 position: absolute;372 top: 140px;373 left: 250px;374 z-index: 200;375 text-align: center;376 }377 378#footer {379 clear: both;380 position: relative;381 text-align: center;382 padding: 5px 0 5px 0;383 margin: 0 auto 4px auto;384 /*border: 1px solid white;*/385 386 }387 388#footer a {389 padding: 10px 0 10px 0;390 font: 16px arial, sans-serif;391 line-height: 18px;392 text-align: center;393 }394 395a .breadcrumbs {396 font-size: .9em;397 margin-top: -15px;398 margin-bottom: 10px;399 padding: 0;400 color: #000;401 /*border: 1px solid white;*/402 }403 404#breadcrumbs {405 font-size: .9em;406 margin-top: -15px;407 margin-bottom: 10px;408 padding: 0;409 color: black;410 /*border: 1px solid white;*/411 }412 413table {414 border: 1px solid black;415 }416td {417 border: 1px solid white;418 padding: 4px;419 }420 421 422/*FiftySense Print stylesheet*/423body {424 margin: 0;425 padding: 0;426 font: 18px/20px "trebuchet MS", lucida, arial, helvetica, sans-serif;427 color: #000;428 background : #fff;429 }430 431.screen {432 display: none;433 }434 435p .link {436 display: none;437 }438 439a {440 text-decoration: none;441 }442 443#main {444 position: relative;445 width: 950px;446 background: #fff;447 border: none;448 margin: 0 auto;449 padding: 0;450 }451 452#mainstuff {453 float: left;454 width: 730px;455/* border: 1px solid red;*/456 display: inline;457 margin: 0;458 padding: 0;459 }460 461 462#rightside {463 float: right;464 width: 205px;465 position: relative;466 background: #ccc;467 border: 1px solid #666;468 }469 470 471 472#content {473 position: relative;474 width: 530px;475 margin: 0 2px 0 0;476/* border: 1px solid green;*/477 padding-left: 20px;478 }479 480#nav {481 display: none;482 }483 484 485 486 487#subhead {488 clear: both;489 position: relative;490 padding: 15px 0 0 0;491 }492 493 494 495/*SubNav*/496#subnav {497 display: none;498 }499 500h1, h2, h3, h4, h5, h6 {501 font-family: verdana, lucida, arial, helvetica, sans-serif;502 font-weight: bold;503 color: #000;504 background: transparent;505 }506 507h1 {508 font-size: 175%;509 line-height: 155%;510 }511 512h2 {513 font-size: 120%;514 line-height: 110%;515 }516 517h3 {518 font-size: 110%;519 }520 521.commumnity {522 display: none;523 }524 525 526cite {527 display: block;528 margin: 0 0 20px 20px;529 }530 531strong {532 font-weight: bold;533 color: #000;534 font-size: 1.2em;535 }536 537#footer {538 clear: both;539 position: relative;540 text-align: center;541 padding: 5px 0 5px 0;542 margin: 10px auto 4px auto;543 }544 </style>545 <title>546 Ladakh - Adventure Travel For Active Boomers Over Fifty: FiftySense547 </title>548 <meta content="549We at Fiftysense believe that adventure travel can be more accessible, and the information from our website will show you how." name="description">550 <meta content="551over fifty552Adventure Travel553Small ship tours" name="keywords">554 <meta content="text/html; charset=utf-8" http-equiv="content-type">555 <meta content="mike gould" name="author">556 <!-- 557The FiftySense site was created with great care by558Mike Gould, in charge, MondoDyne Web Works559http://mondodyne.com560734 904 0659561started: 8-6-07-->562 </head>563 <body class="adventrips" id="adventure" onload="changeFontSize(readCookie('fontSize'));">564 <div id="main">565 <!-- Header -->566 <!-- Text resize -->567 <p id="textsize">568 Text Size:569 <a>570 ↑571 <span style="font-size: 1.2em">572 A573 </span>574 </a>575 <a>576 ↓577 <span style="font-size: .8em">578 A579 </span>580 </a>581 </p>582 <!-- EndText resize -->583 <!-- Header Print -->584 <div class="print">585 <img alt="Fifty Sense: Common Sense Ideas for Thriving after 50" height="150" src="rick.jpg" width="551">586 </div>587 <!-- Header Screen -->588 <div class="screen" style="position: relative; width: 951px; height: 179px; margin: 2px auto; text-align: center; background: #f6ecb8">589 <img alt="Fifty Sense: Common Sense Ideas for Thriving after 50" height="179" src="rick.jpg" width="951">590 </div>591 <!-- endHeader Screen -->592 <!-- SubNavigation -->593 <div id="subnav">594 <ul>595 <li>596 <a id="linkadvenstart">597 Getting Started598 </a>599 </li>600 <li>601 <a id="linkadvenplan">602 Planning Your Adventure603 </a>604 </li>605 <li>606 <a id="linkadvenfit">607 Fitness and skill608 </a>609 </li>610 <!-- 611<li><a id="linkadventrips">Trips</a></li>612 -->613 <li>614 <a id="linkadventips">615 Travel Tips616 </a>617 </li>618 </ul>619 </div>620 <!-- EndSubNavigation -->621 <!-- Mainstuff: Nav + Content -->622 <div id="mainstuff">623 <!--Content-->624 <div id="content">625 <!-- BreadCrumbs -->626 <p id="breadcrumbs">627 <a title="Go to FiftySense Homepage">628 HOME629 </a>630 >631 <a>632 Adventure Travel633 </a>634 > Ladakh635 </p>636 <!-- EndBreadCrumbs -->637 <h1>638 Trekking in Ladakh639 </h1>640 <p>641 In the past few years, Ladakh has become increasing more popular as an adventure travel destination. Because of the recent political problems in Nepal (which hopefully are now overcome), many travelers have sought the Himalayan region of Ladakh as an alternative trekking destination.642 </p>643 <p>644 The standard way to trek in Ladakh is to hire a guide as well as a couple horses and assistants to walk with you, making the trip much easier and hassle free. Because of the rough and dry terrain as well as extremely high altitudes, it is highly recommended that trekkers take advantage of these services in order to experience an enjoyable as well as safe trek in the Himalayas.645 </p>646 <p>647 One popular trek which takes you through the varied terrain of Ladakh is the Markha Valley trek. This trek will take you through green valleys, as well as over high altitude passes passing through moon-like desert landscape along the way.648 </p>649 <p>650 Because of the high altitudes and passes the best time of year to do this trek is from July to September. An easier trek to consider is the Sham trek from Liker to Khaltser.651 </p>652 Trekking in Ladakh is a once in a lifetime experience where you can not only challenge yourself physically, but also experience the amazing landscape and the vastly different Ladakhi culture along the way.653 <p>654 We hope you not only learn something new, but will also share your experiences with us.655 <a>656 email us657 </a>658 . If you add to our knowledge by sending us pictures, your story, information, and/or659 <a>660 product reviews661 </a>662 , you may even be selected for our weekly feature!663 </p>664 </div>665 <!--EndContent-->666 <!-- LeftNavigation -->667 <div id="nav">668 <ul>669 <li>670 <a style="font-size: 1.3em; padding: 1px 4px 2px 4px; border: 1px solid white;">671 Search672 </a>673 </li>674 <li>675 <a id="linkhome">676 HOME677 </a>678 </li>679 <li>680 <a>681 Sue's Column Sense682 </a>683 </li>684 <li>685 <a id="linkoutdoors">686 Outdoor687 <br>688 Activities689 </a>690 </li>691 </ul>692 </div>693 <!-- EndLeftNavigation -->694 </div>695 <!-- End Nav + Content -->696 <!-- 697<!~~ RightSide Ad Space ~~>698<div id="rightside">699<br /><br /><br /><br /><br /><br /><br /><br />700</div>701<!~~ EndRightSide Ad Space ~~>702 -->703 <div id="footer">704 <a>705 FiftySense.com706 </a>707 <br>708 <a>709 Email Us710 </a>711 <p>712 </p>713 <br>714 <span style="font-size: .8em;">715 Entire Contents ©2007-2022, FIFTYSENSE, LLC, All Rights Reserved716 </span>717 </div>718 </div>719 </body>720</html>721