Datasetpublic
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.
sourceHugging Faceodc-byupdated 3y agoView on Hugging Face
22likes1.8kdownloads
root9725.html
9725.html214 linesDownload Raw Back to root
1<!DOCTYPE html>2<html>3 <head>4  <style>5   body {6    margin: 60px auto;7    width: 70%;8}9nav ul, footer ul {10    font-family:'Helvetica', 'Arial', 'Sans-Serif';11    padding: 0px;12    list-style: none;13    font-weight: bold;14}15nav ul li, footer ul li {16    display: inline;17    margin-right: 20px;18}19a {20    text-decoration: none;21    color: #999;22}23a:hover {24    text-decoration: underline;25}26h1 {27    font-size: 3em;28    font-family:'Helvetica', 'Arial', 'Sans-Serif';29}30p {31    font-size: 1.5em;32    line-height: 1.4em;33    color: #333;34}35footer {36    border-top: 1px solid #d5d5d5;37    font-size: .8em;38}39 40ul.posts { 41    margin: 20px auto 40px; 42    font-size: 1.5em;43}44 45ul.posts li {46    list-style: none;47}48  </style>49  <title>50   About me51  </title>52  <!-- link to main stylesheet -->53  <style type="text/css">54   .MathJax_Hover_Frame {border-radius: .25em; -webkit-border-radius: .25em; -moz-border-radius: .25em; -khtml-border-radius: .25em; box-shadow: 0px 0px 15px #83A; -webkit-box-shadow: 0px 0px 15px #83A; -moz-box-shadow: 0px 0px 15px #83A; -khtml-box-shadow: 0px 0px 15px #83A; border: 1px solid #A6D ! important; display: inline-block; position: absolute}55.MathJax_Menu_Button .MathJax_Hover_Arrow {position: absolute; cursor: pointer; display: inline-block; border: 2px solid #AAA; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; font-family: 'Courier New',Courier; font-size: 9px; color: #F0F0F0}56.MathJax_Menu_Button .MathJax_Hover_Arrow span {display: block; background-color: #AAA; border: 1px solid; border-radius: 3px; line-height: 0; padding: 4px}57.MathJax_Hover_Arrow:hover {color: white!important; border: 2px solid #CCC!important}58.MathJax_Hover_Arrow:hover span {background-color: #CCC!important}59  </style>60  <style type="text/css">61   #MathJax_About {position: fixed; left: 50%; width: auto; text-align: center; border: 3px outset; padding: 1em 2em; background-color: #DDDDDD; color: black; cursor: default; font-family: message-box; font-size: 120%; font-style: normal; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; word-wrap: normal; white-space: nowrap; float: none; z-index: 201; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; box-shadow: 0px 10px 20px #808080; -webkit-box-shadow: 0px 10px 20px #808080; -moz-box-shadow: 0px 10px 20px #808080; -khtml-box-shadow: 0px 10px 20px #808080; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}62#MathJax_About.MathJax_MousePost {outline: none}63.MathJax_Menu {position: absolute; background-color: white; color: black; width: auto; padding: 5px 0px; border: 1px solid #CCCCCC; margin: 0; cursor: default; font: menu; text-align: left; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; word-wrap: normal; white-space: nowrap; float: none; z-index: 201; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; box-shadow: 0px 10px 20px #808080; -webkit-box-shadow: 0px 10px 20px #808080; -moz-box-shadow: 0px 10px 20px #808080; -khtml-box-shadow: 0px 10px 20px #808080; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}64.MathJax_MenuItem {padding: 1px 2em; background: transparent}65.MathJax_MenuArrow {position: absolute; right: .5em; padding-top: .25em; color: #666666; font-size: .75em}66.MathJax_MenuActive .MathJax_MenuArrow {color: white}67.MathJax_MenuArrow.RTL {left: .5em; right: auto}68.MathJax_MenuCheck {position: absolute; left: .7em}69.MathJax_MenuCheck.RTL {right: .7em; left: auto}70.MathJax_MenuRadioCheck {position: absolute; left: .7em}71.MathJax_MenuRadioCheck.RTL {right: .7em; left: auto}72.MathJax_MenuLabel {padding: 1px 2em 3px 1.33em; font-style: italic}73.MathJax_MenuRule {border-top: 1px solid #DDDDDD; margin: 4px 3px}74.MathJax_MenuDisabled {color: GrayText}75.MathJax_MenuActive {background-color: #606872; color: white}76.MathJax_MenuDisabled:focus, .MathJax_MenuLabel:focus {background-color: #E8E8E8}77.MathJax_ContextMenu:focus {outline: none}78.MathJax_ContextMenu .MathJax_MenuItem:focus {outline: none}79#MathJax_AboutClose {top: .2em; right: .2em}80.MathJax_Menu .MathJax_MenuClose {top: -10px; left: -10px}81.MathJax_MenuClose {position: absolute; cursor: pointer; display: inline-block; border: 2px solid #AAA; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -khtml-border-radius: 18px; font-family: 'Courier New',Courier; font-size: 24px; color: #F0F0F0}82.MathJax_MenuClose span {display: block; background-color: #AAA; border: 1.5px solid; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -khtml-border-radius: 18px; line-height: 0; padding: 8px 0 6px}83.MathJax_MenuClose:hover {color: white!important; border: 2px solid #CCC!important}84.MathJax_MenuClose:hover span {background-color: #CCC!important}85.MathJax_MenuClose:hover:focus {outline: none}86  </style>87  <style type="text/css">88   .MathJax_Preview .MJXf-math {color: inherit!important}89  </style>90  <style type="text/css">91   .MJX_Assistive_MathML {position: absolute!important; top: 0; left: 0; clip: rect(1px, 1px, 1px, 1px); padding: 1px 0 0 0!important; border: 0!important; height: 1px!important; width: 1px!important; overflow: hidden!important; display: block!important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}92.MJX_Assistive_MathML.MJX_Assistive_MathML_Block {width: 100%!important}93  </style>94  <style type="text/css">95   #MathJax_Zoom {position: absolute; background-color: #F0F0F0; overflow: auto; display: block; z-index: 301; padding: .5em; border: 1px solid black; margin: 0; font-weight: normal; font-style: normal; text-align: left; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; word-wrap: normal; white-space: nowrap; float: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; box-shadow: 5px 5px 15px #AAAAAA; -webkit-box-shadow: 5px 5px 15px #AAAAAA; -moz-box-shadow: 5px 5px 15px #AAAAAA; -khtml-box-shadow: 5px 5px 15px #AAAAAA; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}96#MathJax_ZoomOverlay {position: absolute; left: 0; top: 0; z-index: 300; display: inline-block; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background-color: white; opacity: 0; filter: alpha(opacity=0)}97#MathJax_ZoomFrame {position: relative; display: inline-block; height: 0; width: 0}98#MathJax_ZoomEventTrap {position: absolute; left: 0; top: 0; z-index: 302; display: inline-block; border: 0; padding: 0; margin: 0; background-color: white; opacity: 0; filter: alpha(opacity=0)}99  </style>100  <style type="text/css">101   .MathJax_Preview {color: #888}102#MathJax_Message {position: fixed; left: 1px; bottom: 2px; background-color: #E6E6E6; border: 1px solid #959595; margin: 0px; padding: 2px 8px; z-index: 102; color: black; font-size: 80%; width: auto; white-space: nowrap}103#MathJax_MSIE_Frame {position: absolute; top: 0; left: 0; width: 0px; z-index: 101; border: 0px; margin: 0px; padding: 0px}104.MathJax_Error {color: #CC0000; font-style: italic}105  </style>106  <style type="text/css">107   .MJXp-script {font-size: .8em}108.MJXp-right {-webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right}109.MJXp-bold {font-weight: bold}110.MJXp-italic {font-style: italic}111.MJXp-scr {font-family: MathJax_Script,'Times New Roman',Times,STIXGeneral,serif}112.MJXp-frak {font-family: MathJax_Fraktur,'Times New Roman',Times,STIXGeneral,serif}113.MJXp-sf {font-family: MathJax_SansSerif,'Times New Roman',Times,STIXGeneral,serif}114.MJXp-cal {font-family: MathJax_Caligraphic,'Times New Roman',Times,STIXGeneral,serif}115.MJXp-mono {font-family: MathJax_Typewriter,'Times New Roman',Times,STIXGeneral,serif}116.MJXp-largeop {font-size: 150%}117.MJXp-largeop.MJXp-int {vertical-align: -.2em}118.MJXp-math {display: inline-block; line-height: 1.2; text-indent: 0; font-family: 'Times New Roman',Times,STIXGeneral,serif; white-space: nowrap; border-collapse: collapse}119.MJXp-display {display: block; text-align: center; margin: 1em 0}120.MJXp-math span {display: inline-block}121.MJXp-box {display: block!important; text-align: center}122.MJXp-box:after {content: " "}123.MJXp-rule {display: block!important; margin-top: .1em}124.MJXp-char {display: block!important}125.MJXp-mo {margin: 0 .15em}126.MJXp-mfrac {margin: 0 .125em; vertical-align: .25em}127.MJXp-denom {display: inline-table!important; width: 100%}128.MJXp-denom > * {display: table-row!important}129.MJXp-surd {vertical-align: top}130.MJXp-surd > * {display: block!important}131.MJXp-script-box > *  {display: table!important; height: 50%}132.MJXp-script-box > * > * {display: table-cell!important; vertical-align: top}133.MJXp-script-box > *:last-child > * {vertical-align: bottom}134.MJXp-script-box > * > * > * {display: block!important}135.MJXp-mphantom {visibility: hidden}136.MJXp-munderover {display: inline-table!important}137.MJXp-over {display: inline-block!important; text-align: center}138.MJXp-over > * {display: block!important}139.MJXp-munderover > * {display: table-row!important}140.MJXp-mtable {vertical-align: .25em; margin: 0 .125em}141.MJXp-mtable > * {display: inline-table!important; vertical-align: middle}142.MJXp-mtr {display: table-row!important}143.MJXp-mtd {display: table-cell!important; text-align: center; padding: .5em 0 0 .5em}144.MJXp-mtr > .MJXp-mtd:first-child {padding-left: 0}145.MJXp-mtr:first-child > .MJXp-mtd {padding-top: 0}146.MJXp-mlabeledtr {display: table-row!important}147.MJXp-mlabeledtr > .MJXp-mtd:first-child {padding-left: 0}148.MJXp-mlabeledtr:first-child > .MJXp-mtd {padding-top: 0}149.MJXp-merror {background-color: #FFFF88; color: #CC0000; border: 1px solid #CC0000; padding: 1px 3px; font-style: normal; font-size: 90%}150.MJXp-scale0 {-webkit-transform: scaleX(.0); -moz-transform: scaleX(.0); -ms-transform: scaleX(.0); -o-transform: scaleX(.0); transform: scaleX(.0)}151.MJXp-scale1 {-webkit-transform: scaleX(.1); -moz-transform: scaleX(.1); -ms-transform: scaleX(.1); -o-transform: scaleX(.1); transform: scaleX(.1)}152.MJXp-scale2 {-webkit-transform: scaleX(.2); -moz-transform: scaleX(.2); -ms-transform: scaleX(.2); -o-transform: scaleX(.2); transform: scaleX(.2)}153.MJXp-scale3 {-webkit-transform: scaleX(.3); -moz-transform: scaleX(.3); -ms-transform: scaleX(.3); -o-transform: scaleX(.3); transform: scaleX(.3)}154.MJXp-scale4 {-webkit-transform: scaleX(.4); -moz-transform: scaleX(.4); -ms-transform: scaleX(.4); -o-transform: scaleX(.4); transform: scaleX(.4)}155.MJXp-scale5 {-webkit-transform: scaleX(.5); -moz-transform: scaleX(.5); -ms-transform: scaleX(.5); -o-transform: scaleX(.5); transform: scaleX(.5)}156.MJXp-scale6 {-webkit-transform: scaleX(.6); -moz-transform: scaleX(.6); -ms-transform: scaleX(.6); -o-transform: scaleX(.6); transform: scaleX(.6)}157.MJXp-scale7 {-webkit-transform: scaleX(.7); -moz-transform: scaleX(.7); -ms-transform: scaleX(.7); -o-transform: scaleX(.7); transform: scaleX(.7)}158.MJXp-scale8 {-webkit-transform: scaleX(.8); -moz-transform: scaleX(.8); -ms-transform: scaleX(.8); -o-transform: scaleX(.8); transform: scaleX(.8)}159.MJXp-scale9 {-webkit-transform: scaleX(.9); -moz-transform: scaleX(.9); -ms-transform: scaleX(.9); -o-transform: scaleX(.9); transform: scaleX(.9)}160.MathJax_PHTML .noError {vertical-align: ; font-size: 90%; text-align: left; color: black; padding: 1px 3px; border: 1px solid}161  </style>162  <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">163 </head>164 <body>165  <div id="MathJax_Message" style="display: none;">166  </div>167  <nav>168   <ul>169    <li>170     <a>171      Papers172     </a>173    </li>174    <li>175     <a>176      About177     </a>178    </li>179    <li>180     <a>181      CV182     </a>183    </li>184   </ul>185  </nav>186  <div class="container">187   <h1>188    About me189   </h1>190   <p>191    I'm [NAME REDACTED], an economics Ph.D. candidate and recent J.D. graduate at the University of Michigan.192   </p>193   <p>194    My primary research goal is to inform legal practices to improve outcomes after contact with the criminal justice system and to reduce the disparities the legal system generates. I am particularly focused on the relationship between the criminal justice system and employment.195   </p>196  </div>197  <!-- /.container -->198  <footer>199   <ul>200    <li>201     <a>202      email203     </a>204    </li>205    <li>206     <a>207      github.com/benpyle208     </a>209    </li>210   </ul>211  </footer>212 </body>213</html>214