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 lang="en-US">3 <head>4 <style>5 /*! normalize.css v3.0.2 | MIT License | git.io/normalize */@import url("");html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.highlight table td{padding:5px}.highlight table pre{margin:0}.highlight .cm{color:#999988;font-style:italic}.highlight .cp{color:#999999;font-weight:bold}.highlight .c1{color:#999988;font-style:italic}.highlight .cs{color:#999999;font-weight:bold;font-style:italic}.highlight .c,.highlight .cd{color:#999988;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .gd{color:#000000;background-color:#ffdddd}.highlight .ge{color:#000000;font-style:italic}.highlight .gr{color:#aa0000}.highlight .gh{color:#999999}.highlight .gi{color:#000000;background-color:#ddffdd}.highlight .go{color:#888888}.highlight .gp{color:#555555}.highlight .gs{font-weight:bold}.highlight .gu{color:#aaaaaa}.highlight .gt{color:#aa0000}.highlight .kc{color:#000000;font-weight:bold}.highlight .kd{color:#000000;font-weight:bold}.highlight .kn{color:#000000;font-weight:bold}.highlight .kp{color:#000000;font-weight:bold}.highlight .kr{color:#000000;font-weight:bold}.highlight .kt{color:#445588;font-weight:bold}.highlight .k,.highlight .kv{color:#000000;font-weight:bold}.highlight .mf{color:#009999}.highlight .mh{color:#009999}.highlight .il{color:#009999}.highlight .mi{color:#009999}.highlight .mo{color:#009999}.highlight .m,.highlight .mb,.highlight .mx{color:#009999}.highlight .sb{color:#d14}.highlight .sc{color:#d14}.highlight .sd{color:#d14}.highlight .s2{color:#d14}.highlight .se{color:#d14}.highlight .sh{color:#d14}.highlight .si{color:#d14}.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .s{color:#d14}.highlight .na{color:#008080}.highlight .bp{color:#999999}.highlight .nb{color:#0086B3}.highlight .nc{color:#445588;font-weight:bold}.highlight .no{color:#008080}.highlight .nd{color:#3c5d5d;font-weight:bold}.highlight .ni{color:#800080}.highlight .ne{color:#990000;font-weight:bold}.highlight .nf{color:#990000;font-weight:bold}.highlight .nl{color:#990000;font-weight:bold}.highlight .nn{color:#555555}.highlight .nt{color:#000080}.highlight .vc{color:#008080}.highlight .vg{color:#008080}.highlight .vi{color:#008080}.highlight .nv{color:#008080}.highlight .ow{color:#000000;font-weight:bold}.highlight .o{color:#000000;font-weight:bold}.highlight .w{color:#bbbbbb}.highlight{background-color:#f8f8f8}*{box-sizing:border-box}body{padding:0;margin:0;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:16px;line-height:1.5;color:#606c71}#skip-to-content{height:1px;width:1px;position:absolute;overflow:hidden;top:-10px}#skip-to-content:focus{position:fixed;top:10px;left:10px;height:auto;width:auto;background:#e19447;outline:thick solid #e19447}a{color:#1e6bb8;text-decoration:none}a:hover{text-decoration:underline}.btn{display:inline-block;margin-bottom:1rem;color:rgba(255,255,255,0.7);background-color:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);border-style:solid;border-width:1px;border-radius:0.3rem;transition:color 0.2s, background-color 0.2s, border-color 0.2s}.btn:hover{color:rgba(255,255,255,0.8);text-decoration:none;background-color:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3)}.btn+.btn{margin-left:1rem}@media screen and (min-width: 64em){.btn{padding:0.75rem 1rem}}@media screen and (min-width: 42em) and (max-width: 64em){.btn{padding:0.6rem 0.9rem;font-size:0.9rem}}@media screen and (max-width: 42em){.btn{display:block;width:100%;padding:0.75rem;font-size:0.9rem}.btn+.btn{margin-top:1rem;margin-left:0}}.page-header{color:#fff;text-align:center;background-color:#159957;background-image:linear-gradient(120deg, #155799, #159957)}@media screen and (min-width: 64em){.page-header{padding:5rem 6rem}}@media screen and (min-width: 42em) and (max-width: 64em){.page-header{padding:3rem 4rem}}@media screen and (max-width: 42em){.page-header{padding:2rem 1rem}}.project-name{margin-top:0;margin-bottom:0.1rem}@media screen and (min-width: 64em){.project-name{font-size:3.25rem}}@media screen and (min-width: 42em) and (max-width: 64em){.project-name{font-size:2.25rem}}@media screen and (max-width: 42em){.project-name{font-size:1.75rem}}.project-tagline{margin-bottom:2rem;font-weight:normal;opacity:0.7}@media screen and (min-width: 64em){.project-tagline{font-size:1.25rem}}@media screen and (min-width: 42em) and (max-width: 64em){.project-tagline{font-size:1.15rem}}@media screen and (max-width: 42em){.project-tagline{font-size:1rem}}.main-content{word-wrap:break-word}.main-content :first-child{margin-top:0}@media screen and (min-width: 64em){.main-content{max-width:64rem;padding:2rem 6rem;margin:0 auto;font-size:1.1rem}}@media screen and (min-width: 42em) and (max-width: 64em){.main-content{padding:2rem 4rem;font-size:1.1rem}}@media screen and (max-width: 42em){.main-content{padding:2rem 1rem;font-size:1rem}}.main-content kbd{background-color:#fafbfc;border:1px solid #c6cbd1;border-bottom-color:#959da5;border-radius:3px;box-shadow:inset 0 -1px 0 #959da5;color:#444d56;display:inline-block;font-size:11px;line-height:10px;padding:3px 5px;vertical-align:middle}.main-content img{max-width:100%}.main-content h1,.main-content h2,.main-content h3,.main-content h4,.main-content h5,.main-content h6{margin-top:2rem;margin-bottom:1rem;font-weight:normal;color:#159957}.main-content p{margin-bottom:1em}.main-content code{padding:2px 4px;font-family:Consolas, "Liberation Mono", Menlo, Courier, monospace;font-size:0.9rem;color:#567482;background-color:#f3f6fa;border-radius:0.3rem}.main-content pre{padding:0.8rem;margin-top:0;margin-bottom:1rem;font:1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;color:#567482;word-wrap:normal;background-color:#f3f6fa;border:solid 1px #dce6f0;border-radius:0.3rem}.main-content pre>code{padding:0;margin:0;font-size:0.9rem;color:#567482;word-break:normal;white-space:pre;background:transparent;border:0}.main-content .highlight{margin-bottom:1rem}.main-content .highlight pre{margin-bottom:0;word-break:normal}.main-content .highlight pre,.main-content pre{padding:0.8rem;overflow:auto;font-size:0.9rem;line-height:1.45;border-radius:0.3rem;-webkit-overflow-scrolling:touch}.main-content pre code,.main-content pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.main-content pre code:before,.main-content pre code:after,.main-content pre tt:before,.main-content pre tt:after{content:normal}.main-content ul,.main-content ol{margin-top:0}.main-content blockquote{padding:0 1rem;margin-left:0;color:#819198;border-left:0.3rem solid #dce6f0}.main-content blockquote>:first-child{margin-top:0}.main-content blockquote>:last-child{margin-bottom:0}.main-content table{display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all;-webkit-overflow-scrolling:touch}.main-content table th{font-weight:bold}.main-content table th,.main-content table td{padding:0.5rem 1rem;border:1px solid #e9ebec}.main-content dl{padding:0}.main-content dl dt{padding:0;margin-top:1rem;font-size:1rem;font-weight:bold}.main-content dl dd{padding:0;margin-bottom:1rem}.main-content hr{height:2px;padding:0;margin:1rem 0;background-color:#eff0f1;border:0}.site-footer{padding-top:2rem;margin-top:2rem;border-top:solid 1px #eff0f1}@media screen and (min-width: 64em){.site-footer{font-size:1rem}}@media screen and (min-width: 42em) and (max-width: 64em){.site-footer{font-size:1rem}}@media screen and (max-width: 42em){.site-footer{font-size:0.9rem}}.site-footer-owner{display:block;font-weight:bold}.site-footer-credits{color:#819198}6 </style>7 <meta charset="utf-8">8 <!-- Begin Jekyll SEO tag v2.8.0 -->9 <title>10 PRIME-RE | Open resource exchange platform for non-human primate neuroimaging11 </title>12 <meta content="Jekyll v3.9.5" name="generator">13 <meta content="PRIME-RE" property="og:title">14 <meta content="en_US" property="og:locale">15 <meta content="Open resource exchange platform for non-human primate neuroimaging" name="description">16 <meta content="Open resource exchange platform for non-human primate neuroimaging" property="og:description">17 <meta content="" property="og:url">18 <meta content="PRIME-RE" property="og:site_name">19 <meta content="website" property="og:type">20 <meta content="summary" name="twitter:card">21 <meta content="PRIME-RE" property="twitter:title">22 <!-- End Jekyll SEO tag -->23 <meta content="width=device-width, initial-scale=1" name="viewport">24 <meta content="#157878" name="theme-color">25 <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">26 <!-- Global site tag (gtag.js) - Google Analytics -->27 <meta content="KkVThAZEdaN5a8vVsPqrWxSh81Py9jhgPDgOMnxid1Y" name="google-site-verification">28 </head>29 <body>30 <!-- <a id="skip-to-content" >Skip to the content.</a> -->31 <header class="page-header" role="banner">32 <!--<h1 class="project-name">PRIME-RE</h1>-->33 <!--<h2 class="project-tagline">Open resource exchange platform for non-human primate neuroimaging</h2>-->34 <!--<h1 class="project-name">PRIME-RE</h1>-->35 <img alt="PRIME-RE" class="project-name" height="300" img src="rick.jpg">36 <h2 class="project-tagline">37 An open resource exchange platform for non-human primate neuroimaging38 </h2>39 <nav class="main-nav">40 <a class="btn">41 Home42 </a>43 <a class="btn">44 Resources45 </a>46 <!--<a class="btn" target="_blank">Wiki</a>-->47 <a class="btn">48 Tutorials49 </a>50 <a class="btn">51 Contribute52 </a>53 <a class="btn">54 Community55 </a>56 <a class="btn" target="_blank">57 Discuss58 </a>59 <a class="btn">60 Contact61 </a>62 </nav>63 </header>64 <main class="main-content" id="content" role="main">65 <h1 id="prime-re">66 PRIME-RE67 </h1>68 <p>69 Welcome to the PRIMatE Resource Exchange (PRIME-RE), a community-driven resource exchange platform for non-human primate neuroimaging. Read more about this initiative in the70 <a>71 accompanying72 <em>73 NeuroImage74 </em>75 publication76 </a>77 and please consider citing the paper if this resource has been useful.78 </p>79 <p>80 The preprocessing and analysis of nonhuman primate (NHP) magnetic resonance imaging (MRI) data presents some unique challenges.81 <a target="_blank">82 PRIME-DE consortium83 </a>84 . We strongly encourage you to85 <a>86 contribute87 </a>88 your workflows and pipelines.89 </p>90 <p>91 In 2021, the consortium behind92 <a target="_blank">93 PRIME-DE94 </a>95 (data) and96 <a>97 PRIME-RE98 </a>99 (resources) rebranded their initiative as PRIME-DRE, the100 <em>101 Primate Data & Resource Exchange102 </em>103 . In 2024, leadership of PRIME-DRE was restructured into a104 <a>105 steering committee and senior advisory committee106 </a>107 .108 </p>109 <h3 id="open-science">110 Open science111 </h3>112 <p>113 Our goal is to accelerate reproducible discovery, minimise redundant efforts and maximise efficiency by allowing the community to curate relevant resources, disseminate and encourage open science, and strengthen communication in the research community. We aim at making NHP resources open and114 <a>115 FAIR116 </a>117 , and support the adoption of the118 <a target="_blank">119 Brain Imaging Data Structure (BIDS)120 </a>121 and122 <a target="_blank">123 code development best practices124 </a>125 , such as version control, testing, and continuous integration.126 </p>127 <h3 id="how-to-contribute-">128 How to contribute ?129 </h3>130 <p>131 Send new content by using132 <a>133 this issue template134 </a>135 . You can also join our communication channel on the Brainhack Community via136 <a target="_blank">137 PRIME-RE Mattermost-channel138 </a>139 . If you want to discuss the Primate Data Exchange in general, join on140 <a target="_blank">141 PRIME-DE Mattermost-channel142 </a>143 . Suggest a new feature or pitch an idea for the PRIME-RE platform144 <a>145 here146 </a>147 , ask a general question or start a discussion148 <a>149 here150 </a>151 , or check the open Issues and Discussions152 <a>153 here154 </a>155 .156 </p>157 <p>158 Also check out the brand new159 <a>160 PRIME-DRE Brainweb161 </a>162 .163 <br>164 <a>165 <img alt="PRIME-DRE_Brainweb" src="rick.jpg">166 </a>167 </p>168 <h3 id="wiki">169 Wiki170 </h3>171 <p>172 A173 <a target="_blank">174 wiki175 </a>176 have been set up to share knowledge about NHP MRI acquisition and image processing. Anyone can share knowledge and experience (problems with solutions, fixes, tricks…) after requesting access.177 </p>178 <h3 id="resources">179 Resources180 </h3>181 <p>182 The PRIME-RE collection of resources is organized in several categories. If you feel like something is missing or erroneously categorized, don’t hesitate to contact us.183 </p>184 <ul>185 <li>186 <a>187 Templates & atlases188 </a>189 </li>190 <li>191 Pipelines192 <ul>193 <li>194 <a>195 General analysis196 </a>197 </li>198 <li>199 <a>200 Structural analysis201 </a>202 </li>203 <li>204 <a>205 Functional analysis206 </a>207 </li>208 <li>209 <a>210 Diffusion analysis211 </a>212 </li>213 </ul>214 </li>215 <li>216 <a>217 Data sharing218 </a>219 </li>220 <li>221 <a>222 Software packages223 </a>224 </li>225 </ul>226 <h3 id="contact--collaborate">227 Contact & Collaborate228 </h3>229 <p>230 This website is intended to be a meeting place for the NHP neuroimaging community. You can find some of the latest tools, methods, and data repositories here, but we hope you will also find international colleagues here, discover mutual interests and start new collaborations.231 </p>232 <ul>233 <li>234 You can contact the people behind PRIME-RE by writing a235 <a>236 GitHub Issue237 </a>238 .239 </li>240 <li>241 You can start a discussion about PRIME-RE or one of the tools on the242 <a target="_blank">243 Discussions site244 </a>245 .246 </li>247 <li>248 You can contact developers of a shared resource through the contact links that are listed with the resources.249 </li>250 <li>251 To ask a question or discuss an issue with NHP-MRI researchers, you can open send a message to the252 <a target="_blank">253 NHP-MRI mailing list254 </a>255 .256 </li>257 </ul>258 <footer class="site-footer">259 <span class="site-footer-credits">260 PRIME-RE is an initiative of the261 <a target="_blank">262 PRIME-DE consortium263 </a>264 . PRIME-RE on265 <a target="_blank">266 <img alt="GitHub" src="rick.jpg">267 </a>268 . Follow us on269 <a target="_blank">270 <img alt="Twitter" src="rick.jpg">271 </a>272 </span>273 </footer>274 </main>275 </body>276</html>277