SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA 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 "easy" version of the Design2Code testset 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.
6379
1<!DOCTYPE html>2<html>3 <head>4 <meta charset="utf-8">5 <title>6 Download GitHub directory7 </title>8 <meta content="width=device-width,initial-scale=1" name="viewport">9 <meta content="0AMR3lQZu5bzGS6wcqw1b9udtj7QCqRuDB-vQ52zylU" name="google-site-verification">10 </head>11 <body>12 <header>13 No content is hosted on this website. This is a tool to download files from a user-provided GitHub repository URL.14 </header>15 <main class="text-align-center">16 <h1>17 <a>18 download-directory • github • io19 </a>20 </h1>21 <form>22 <input autofocus id="url" name="url" placeholder="Paste GitHub.com folder URL + press Enter" size="38" type="url">23 </form>24 <footer class="text-align-center">25 <label for="info-toggle">26 info27 </label>28 +29 <input id="token-toggle" type="checkbox">30 <span>31 Enter32 <a target="_blank">33 your GitHub token34 </a>35 :36 <br>37 <input autocomplete="off" id="token" pattern="[\da-f]{40}|ghp_.+|gho_.+|github_pat_.+" placeholder="Token" required size="45">38 <br>39 Brought to you by the developers of40 <a target="_blank">41 Refined GitHub42 </a>43 </span>44 <label for="token-toggle">45 token46 </label>47 <input id="info-toggle" type="checkbox">48 <div class="info">49 <p>50 GitHub doesn’t let you download a single folder from a repo, which might be necessary when you just need a few files from a large repository.51 </p>52 <p>53 This tool will handle the download of all the files in a directory, in a single click, after you entered your token.54 </p>55 <p>56 The download starts automatically when you visit pass the link to the GitHub directory as57 <code>58 url59 </code>60 parameter, like:61 </p>62 <p>63 <a>64 <strong>65 download-directory.github.io66 </strong>67 <code>68 ?url=https://github.com/mrdoob/three.js/tree/dev/build69 </code>70 </a>71 </p>72 <p>73 You can also specify download filename by adding74 <code>75 filename76 </code>77 parameter, like:78 </p>79 <p>80 <a>81 <strong>82 download-directory.github.io83 </strong>84 <code>85 ?url=https://github.com/mrdoob/three.js/tree/dev/build&filename=three-js-build86 </code>87 </a>88 to save the file as89 <strong>90 three-js-build.zip91 </strong>92 .93 </p>94 </div>95 </footer>96 <pre class="status"></pre>97 </main>98 <a aria-label="View source on GitHub" class="github-corner">99 </a>100 <style>101 :root{--font-size:17px;--line-height:1.7;--light-green:#2c5700;--dark-green:#153d20;color-scheme:dark}*{box-sizing:border-box}html{font:var(--font-size)/var(--line-height)Roboto,sans-serif;background:linear-gradient(to bottom,var(--light-green),var(--dark-green))var(--light-green);color:#fff;word-break:break-word;min-width:320px;overflow-y:auto}body{background:radial-gradient(400px 100px at 50% 100px,#ffffff21,#ffffff0a,#fff0);border:.5px solid;border-bottom:none;flex-direction:column;min-height:100vh;margin:0;display:flex}a{color:inherit}main{flex-direction:column;flex-grow:1;margin:0 20px;padding-bottom:40px;display:flex;position:relative}main>*{margin:0 0 calc(var(--font-size)*var(--line-height))}main>:not(h2),footer>:not(input){width:100%;max-width:600px;margin-left:auto;margin-right:auto}img{max-width:100%;height:auto}h1{text-align:center;margin:7vh auto .5em;font-size:2.5em;line-height:1.1;max-width:none!important}h1 img{width:320px;margin:auto;display:block}h1 a{text-decoration:none}h1,h2,h3{font-family:roboto slab,serif;font-weight:300}h2{flex-direction:row;font-size:30px;display:flex}h2:before,h2:after{content:"";border-bottom:.5px solid;flex-grow:1;margin-bottom:1.2ex}h2:before{margin-right:20px}h2:after{margin-left:20px}textarea{tab-size:2;border:3px solid silver;border-radius:4px;padding:.2em;font-size:10px;line-height:1.1}input[type=text]{border:.5px solid;border-radius:4px}input::placeholder{color:#ffffff80}input[type=url],input[type=text],textarea{font:inherit;color:inherit;background:#153d2088;outline:none;width:100%;margin:0;padding:0 .3em}textarea:focus,input[type=text]:focus{background:var(--dark-green)}ol{padding-left:0;list-style:none}ul{padding-left:3.5em;list-style:none}ul li:before{content:"→ ";margin-left:-1.5em;position:absolute}.text-monospace{font-family:monospace!important}.text-pre{white-space:pre!important}.d-inline-block{display:inline-block!important}.text-align-center{text-align:center}.status:empty{display:none}.status strong:before{content:url(logo.ccca7fb1.svg) "\a ";white-space:pre;filter:invert()}input[type=url],#token{font:inherit;text-align:center;background-color:#ffffff1a;border:solid;border-radius:.5em;max-width:100%;margin:.5em 0;padding:.5em}a,label{cursor:pointer;text-decoration:underline}[type=checkbox]{visibility:hidden;position:absolute}[type=checkbox]:checked+*+*,[type=checkbox]:not(:checked)+*{display:none}#token:valid{color:var(--green);border:.1em solid}#token:invalid{border-color:#0000;outline:.3em solid #fe0}[name=url]{font-size:.6em}.info{margin-top:.5em}pre{text-align:left;max-height:100vh;padding:0 10px;font-size:10px;overflow:auto}pre div:first-child{white-space:pre-wrap;font-size:20px}header{text-align:center;background-color:#ffffff21;padding:3em}102/*# sourceMappingURL=index.0af9895b.css.map */103 104 105 106/* cyrillic-ext */107@font-face {108 font-family: 'Roboto';109 font-style: normal;110 font-weight: 400;111 font-display: swap;112 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');113 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;114}115/* cyrillic */116@font-face {117 font-family: 'Roboto';118 font-style: normal;119 font-weight: 400;120 font-display: swap;121 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');122 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;123}124/* greek-ext */125@font-face {126 font-family: 'Roboto';127 font-style: normal;128 font-weight: 400;129 font-display: swap;130 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');131 unicode-range: U+1F00-1FFF;132}133/* greek */134@font-face {135 font-family: 'Roboto';136 font-style: normal;137 font-weight: 400;138 font-display: swap;139 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');140 unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;141}142/* vietnamese */143@font-face {144 font-family: 'Roboto';145 font-style: normal;146 font-weight: 400;147 font-display: swap;148 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');149 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;150}151/* latin-ext */152@font-face {153 font-family: 'Roboto';154 font-style: normal;155 font-weight: 400;156 font-display: swap;157 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');158 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;159}160/* latin */161@font-face {162 font-family: 'Roboto';163 font-style: normal;164 font-weight: 400;165 font-display: swap;166 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');167 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;168}169/* cyrillic-ext */170@font-face {171 font-family: 'Roboto Slab';172 font-style: normal;173 font-weight: 300;174 font-display: swap;175 src: url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjo0oSmYmRjRdE.woff2) format('woff2');176 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;177}178/* cyrillic */179@font-face {180 font-family: 'Roboto Slab';181 font-style: normal;182 font-weight: 300;183 font-display: swap;184 src: url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjo0oSma2RjRdE.woff2) format('woff2');185 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;186}187/* greek-ext */188@font-face {189 font-family: 'Roboto Slab';190 font-style: normal;191 font-weight: 300;192 font-display: swap;193 src: url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjo0oSmY2RjRdE.woff2) format('woff2');194 unicode-range: U+1F00-1FFF;195}196/* greek */197@font-face {198 font-family: 'Roboto Slab';199 font-style: normal;200 font-weight: 300;201 font-display: swap;202 src: url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjo0oSmbGRjRdE.woff2) format('woff2');203 unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;204}205/* vietnamese */206@font-face {207 font-family: 'Roboto Slab';208 font-style: normal;209 font-weight: 300;210 font-display: swap;211 src: url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjo0oSmYGRjRdE.woff2) format('woff2');212 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;213}214/* latin-ext */215@font-face {216 font-family: 'Roboto Slab';217 font-style: normal;218 font-weight: 300;219 font-display: swap;220 src: url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjo0oSmYWRjRdE.woff2) format('woff2');221 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;222}223/* latin */224@font-face {225 font-family: 'Roboto Slab';226 font-style: normal;227 font-weight: 300;228 font-display: swap;229 src: url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjo0oSmb2Rj.woff2) format('woff2');230 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;231}232 233 234.github-corner:hover .octo-arm{animation:.56s ease-in-out octocat-wave}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (width<=500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:.56s ease-in-out octocat-wave}}235 </style>236 </body>237</html>238