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 @font-face{font-family:'Noto Sans';font-weight:400;font-style:normal;src:url("../fonts/Noto-Sans-regular/Noto-Sans-regular.eot");src:url("../fonts/Noto-Sans-regular/Noto-Sans-regular.eot?#iefix") format("embedded-opentype"),local("Noto Sans"),local("Noto-Sans-regular"),url("../fonts/Noto-Sans-regular/Noto-Sans-regular.woff2") format("woff2"),url("../fonts/Noto-Sans-regular/Noto-Sans-regular.woff") format("woff"),url("../fonts/Noto-Sans-regular/Noto-Sans-regular.ttf") format("truetype"),url("../fonts/Noto-Sans-regular/Noto-Sans-regular.svg#NotoSans") format("svg")}@font-face{font-family:'Noto Sans';font-weight:700;font-style:normal;src:url("../fonts/Noto-Sans-700/Noto-Sans-700.eot");src:url("../fonts/Noto-Sans-700/Noto-Sans-700.eot?#iefix") format("embedded-opentype"),local("Noto Sans Bold"),local("Noto-Sans-700"),url("../fonts/Noto-Sans-700/Noto-Sans-700.woff2") format("woff2"),url("../fonts/Noto-Sans-700/Noto-Sans-700.woff") format("woff"),url("../fonts/Noto-Sans-700/Noto-Sans-700.ttf") format("truetype"),url("../fonts/Noto-Sans-700/Noto-Sans-700.svg#NotoSans") format("svg")}@font-face{font-family:'Noto Sans';font-weight:400;font-style:italic;src:url("../fonts/Noto-Sans-italic/Noto-Sans-italic.eot");src:url("../fonts/Noto-Sans-italic/Noto-Sans-italic.eot?#iefix") format("embedded-opentype"),local("Noto Sans Italic"),local("Noto-Sans-italic"),url("../fonts/Noto-Sans-italic/Noto-Sans-italic.woff2") format("woff2"),url("../fonts/Noto-Sans-italic/Noto-Sans-italic.woff") format("woff"),url("../fonts/Noto-Sans-italic/Noto-Sans-italic.ttf") format("truetype"),url("../fonts/Noto-Sans-italic/Noto-Sans-italic.svg#NotoSans") format("svg")}@font-face{font-family:'Noto Sans';font-weight:700;font-style:italic;src:url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot");src:url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot?#iefix") format("embedded-opentype"),local("Noto Sans Bold Italic"),local("Noto-Sans-700italic"),url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff2") format("woff2"),url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff") format("woff"),url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.ttf") format("truetype"),url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg#NotoSans") format("svg")}.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}body{background-color:#fff;padding:50px;font:14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;color:#727272;font-weight:400}h1,h2,h3,h4,h5,h6{color:#222;margin:0 0 20px}p,ul,ol,table,pre,dl{margin:0 0 20px}h1,h2,h3{line-height:1.1}h1{font-size:28px}h2{color:#393939}h3,h4,h5,h6{color:#494949}a{color:#267CB9;text-decoration:none}a:hover,a:focus{color:#069;font-weight:bold}a small{font-size:11px;color:#777;margin-top:-0.3em;display:block}a:hover small{color:#777}.wrapper{width:860px;margin:0 auto}blockquote{border-left:1px solid #e5e5e5;margin:0;padding:0 0 0 20px;font-style:italic}code,pre{font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;color:#333}pre{padding:8px 15px;background:#f8f8f8;border-radius:5px;border:1px solid #e5e5e5;overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:5px 10px;border-bottom:1px solid #e5e5e5}dt{color:#444;font-weight:700}th{color:#444}img{max-width:100%}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}header{width:270px;float:left;position:fixed;-webkit-font-smoothing:subpixel-antialiased}ul.downloads{list-style:none;height:40px;padding:0;background:#f4f4f4;border-radius:5px;border:1px solid #e0e0e0;width:270px}.downloads li{width:89px;float:left;border-right:1px solid #e0e0e0;height:40px}.downloads li:first-child a{border-radius:5px 0 0 5px}.downloads li:last-child a{border-radius:0 5px 5px 0}.downloads a{line-height:1;font-size:11px;color:#676767;display:block;text-align:center;padding-top:6px;height:34px}.downloads a:hover,.downloads a:focus{color:#675C5C;font-weight:bold}.downloads ul a:active{background-color:#f0f0f0}strong{color:#222;font-weight:700}.downloads li+li+li{border-right:none;width:89px}.downloads a strong{font-size:14px;display:block;color:#222}section{width:500px;float:right;padding-bottom:50px}small{font-size:11px}hr{border:0;background:#e5e5e5;height:1px;margin:0 0 20px}footer{width:270px;float:left;position:fixed;bottom:50px;-webkit-font-smoothing:subpixel-antialiased}@media print, screen and (max-width: 960px){div.wrapper{width:auto;margin:0}header,section,footer{float:none;position:static;width:auto}header{padding-right:320px}section{border:1px solid #e5e5e5;border-width:1px 0;padding:20px 0;margin:0 0 20px}header a small{display:inline}header ul{position:absolute;right:50px;top:52px}}@media print, screen and (max-width: 720px){body{word-wrap:break-word}header{padding:0}header ul,header p.view{position:static}pre,code{word-wrap:normal}}@media print, screen and (max-width: 480px){body{padding:15px}.downloads{width:99%}.downloads li,.downloads li+li+li{width:33%}}@media print{body{padding:0.4in;font-size:12pt;color:#444}}6 </style>7 <meta charset="utf-8">8 <meta content="IE=edge" http-equiv="X-UA-Compatible">9 <meta content="width=device-width, initial-scale=1" name="viewport">10 <!-- Begin Jekyll SEO tag v2.8.0 -->11 <title>12 WGS Extract (WGSE.bio) | WGS Extract Development Team13 </title>14 <meta content="Jekyll v3.10.0" name="generator">15 <meta content="WGS Extract (WGSE.bio)" property="og:title">16 <meta content="en_US" property="og:locale">17 <meta content="WGS Extract WWW home" name="description">18 <meta content="WGS Extract WWW home" property="og:description">19 <meta content="" property="og:url">20 <meta content="WGS Extract Development Team" property="og:site_name">21 <meta content="website" property="og:type">22 <meta content="summary" name="twitter:card">23 <meta content="WGS Extract (WGSE.bio)" property="twitter:title">24 <!-- End Jekyll SEO tag -->25 <!--[if lt IE 9]>26 27 <![endif]-->28 <!-- start custom head snippets, customize with your own _includes/head-custom.html file -->29 <!-- Setup Google Analytics -->30 <!-- You can set your favicon here -->31 <!-- link rel="shortcut icon" type="image/x-icon" -->32 <!-- end custom head snippets -->33 </head>34 <body>35 <div class="wrapper">36 <header>37 <h1>38 <a>39 WGS Extract Development Team40 </a>41 </h1>42 <p>43 WGS Extract WWW home44 </p>45 <p class="view">46 <a>47 View My GitHub Profile48 </a>49 </p>50 </header>51 <section>52 <h1 id="wgs-extract--wgsebio">53 WGS Extract (WGSE.bio)54 </h1>55 <p>56 is a desktop tool for verifying, analyzing and manipulating your57 <strong>58 Personal 30x59 <a>60 WGS61 </a>62 test63 </strong>64 result. It can also be used with any human genome based65 <a>66 BAM or CRAM67 </a>68 file including69 <a>70 WES71 </a>72 and Y-only test results.73 </p>74 <p>75 <strong>76 WGS Extract77 </strong>78 <strong>79 User Manual80 </strong>81 :82 <a>83 v4 User Manual84 </a>85 (Google Doc)86 </p>87 <p>88 <strong>89 Latest Releases90 </strong>91 you can install on the92 <a>93 supported platforms94 </a>95 are:96 </p>97 <table>98 <thead>99 <tr>100 <th style="text-align: left">101 Track102 </th>103 <th style="text-align: center">104 Version105 </th>106 <th style="text-align: center">107 Date108 </th>109 <th style="text-align: center">110 md5 hash signature111 </th>112 </tr>113 </thead>114 <tbody>115 <tr>116 <td style="text-align: left">117 <strong>118 <a>119 BETA v4120 </a>121 </strong>122 </td>123 <td style="text-align: center">124 44.5125 </td>126 <td style="text-align: center">127 13 Jun 2024128 </td>129 <td style="text-align: center">130 fbe59361caaf8cdb6f23df16a249c552131 </td>132 </tr>133 <tr>134 <td style="text-align: left">135 <strong>136 <a>137 ALPHA v4138 </a>139 </strong>140 </td>141 <td style="text-align: center">142 44.6143 </td>144 <td style="text-align: center">145 20 Jun 2024146 </td>147 <td style="text-align: center">148 c3c6a283dec9fa0dce66a6210adfb04d149 </td>150 </tr>151 <tr>152 <td style="text-align: left">153 <strong>154 <a>155 Dev(eloper) v4+156 </a>157 </strong>158 </td>159 <td style="text-align: center">160 44.9161 </td>162 <td style="text-align: center">163 30 Sep 2024164 </td>165 <td style="text-align: center">166 f69b432ef8ebe2364b7c66283bc314bb167 </td>168 </tr>169 </tbody>170 </table>171 <p>172 These are just the installer scripts.173 <strong>174 Installation Section175 </strong>176 in the177 <a>178 user manual179 </a>180 for details about installing on your platform. See the181 <strong>182 v4 Release Notes183 </strong>184 in the installation directory for more information about the updates in the current release.185 <a>186 hashes to verify the Installer you download187 </a>188 .189 </p>190 <blockquote>191 <ul>192 <li>193 With MacOS Sonoma 14.5 and later, Apple MacOS regressed and turned off allowing unsigned apps to be downloaded and run from outside their store.194 <code class="language-plaintext highlighter-rouge">195 sudo spctl --master-disable196 </code>197 . For older releases, the first time you run the app, follow the Ctrl-Click process from before as described in the manual.198 </li>199 <li>200 With MacOS Sequoia 15.0 they have permanently removed the “anywhere” option completely.201 <strong>202 “Install_macos.command” was blocked to protect your Mac.203 </strong>204 with a button next to it that says “Open Anyway”.205 </li>206 <li>207 Ubuntu 24, MacOS 14 and MacOS 15 require release 44.6 or later.208 </li>209 </ul>210 </blockquote>211 <p>212 This tool is geared toward the needs of213 <a>214 genetic genealogy215 </a>216 and217 <a>218 Ancient DNA219 </a>220 (aDNA) studies but can be helpful for those looking into health-releated uses of221 <a>222 WGS223 </a>224 tests. The225 <strong>226 personal, sub-$500, Direct-to-Consumer (DTC), 30x Whole Genome Sequence (227 <a>228 WGS229 </a>230 ) tests231 </strong>232 are delivered with basic data files and reports. This tool serves to bridge the gap between the233 <a>234 WGS data files235 </a>236 delivered and the present day237 <a>238 genetic genealogy community tools239 </a>240 . Many health analysis sites accept the microarray and VCF files generated by this tool.241 </p>242 <blockquote>243 <p>244 Still waiting for your245 <a>246 WGS247 </a>248 test results?249 <a>250 International Genome Sample Resource (1K Genome archive)251 </a>252 for253 <a>254 BAM or CRAM255 </a>256 files that you can download and play with to learn the tool while waiting for your results.257 </p>258 </blockquote>259 <p>260 This tool is designed to be a simple, push-button manipulation of261 <a>262 WGS files263 </a>264 from any source.265 <a>266 UseGalaxy267 </a>268 ).269 </p>270 <p>271 <a>272 Dante Labs273 </a>274 ,275 <a>276 Nebula Genomics277 </a>278 ,279 <a>280 Sequencing281 </a>282 , and283 <a>284 YSEQ285 </a>286 are test results most commonly used with this tool.287 <a>288 Full Genomes Corp289 </a>290 ,291 <a>292 GeneDX293 </a>294 ,295 <a>296 Sano Genetics297 </a>298 and299 <a>300 Veritas (historical)301 </a>302 are other test providers whose output is processed here. These are all results from303 <a>304 Illumina305 </a>306 and307 <a>308 MGI309 </a>310 next generation sequencers (311 <a>312 NGS313 </a>314 ). Results from315 <a>316 Oxford Nanopore317 </a>318 and319 <a>320 PacBio HiFi CCS321 </a>322 third generation, long-read sequencers can also be used; as can323 <a>324 FamilyTreeDNA325 </a>326 ’s BigY output. (This is not an endorsement of any company or service; simply reporting what is commonly used with the tool.)327 </p>328 <blockquote>329 <p>330 The tool acronym is331 <strong>332 WGSE333 </strong>334 and pronounced as “wig-see”. We encourage that use in conversation.335 </p>336 </blockquote>337 <p>338 We encourage the use of the Facebook group339 <a>340 Personal WGS341 </a>342 for discussions on how to make use of your343 <strong>344 personal, sub-$500, DTC 30x WGS test345 </strong>346 results.347 <a>348 Bioinformatics for Newbies349 </a>350 . We also maintain a number of351 <a>352 corrollary documents353 </a>354 .355 </p>356 <p>357 User issues, if not brought up in the358 <a>359 Personal WGS360 </a>361 Facebook group, should be raised in the local362 <a>363 user issues section of this GitHub site364 </a>365 . The issues section is preferred so code bugs, use limitations and suggested improvements can be tracked within the development project.366 </p>367 <p>368 There is a separate Facebook group for369 <a>370 WGSE Developers and Alpha testers371 </a>372 where bleeding edge issues are discussed and tested before wider availability. Developer’s should visit the main GitHub373 <a>374 WGS Extract Developers Code Repository375 </a>376 as well. Development issues, Alpha code bugs and limitations should be raised in the377 <a>378 development issues section379 </a>380 so they are tracked till resolved in a release.381 <strong>382 Program383 </strong>384 folder for the385 <strong>386 Python387 </strong>388 source files.389 </p>390 <p>391 There is a separate Reference Genome Library manager that can be run to check and update the library. The392 <strong>393 WGSE394 </strong>395 program will check and determine when it needs a genome and prompt you to install any missing file then.396 </p>397 <p>398 v4 entered Alpha on 1 April 2022 and was formally Beta released on 6th November 2022. v5 entered pre-Developer mode release on 10 March 2023 and had a first real release in July then Nov 2023. Old releases are documented in the399 <a>400 historical release section401 </a>402 . (v5’s release in Dev has been delayed.)403 </p>404 <p>405 The tool home page is406 <a>407 WGSE.bio408 </a>409 . With the developers and delivery platform using410 <a>411 WGSE.io412 </a>413 (note the slight difference; they will cross reference each other). Currently, both point to this page located at414 <a>415 https://WGSExtract.github.io/416 </a>417 .418 </p>419 <h1 id="supported-platforms">420 Supported Platforms421 </h1>422 <p>423 64 bit OS and processor platforms tested as part of the release process are:424 </p>425 <ul>426 <li>427 Microsoft Windows 10 and 11 on Intel and AMD 64 bit processors using Cygwin64 and soon Msys2 packages for the bioinformatic tools. WSLG in Win11 with a Linux Desktop (not server) can be used to install the Ubuntu or Linux release of this tool.428 </li>429 <li>430 Apple MacOS 11 (Big Sur), 12 (Monterrey), 13 (Ventura), 14 (Sonoma) and 15 (Sequoia) on Intel and Apple M1/M2 processors. (note: We rely on Macports which has dropped support for Catalina and earlier already)431 </li>432 <li>433 Ubuntu Linux LTS 20.04, 22.04 and 24.04. We recommend 24.04 to get the latest Samtools release.434 </li>435 <li>436 Any Linux by using Conda (actually micromamba and bioconda). This will soon deprecate the Ubuntu only installer and is the preferred Linux install method.437 </li>438 </ul>439 <p>440 The tool has the potential to be a simple install in a441 <a>442 BioConda environment443 </a>444 as it is mostly just a445 <a>446 Python package447 </a>448 .449 </p>450 <h1 id="thanks">451 Thanks452 </h1>453 <ul>454 <li>455 To the456 <a>457 JetBrains / PyCharm community458 </a>459 for the support of a Pro developers license for this and other open-source projects460 </li>461 <li>462 To the463 <a>464 Github community465 </a>466 for their free support to open source projects like this one467 </li>468 </ul>469 <h1 id="windows-release-users">470 Windows Release Users471 </h1>472 <p>473 Some have downloaded the474 <strong>475 WGS Extract476 </strong>477 tool solely to gain access to the MS Windows native executables of the Bioinformatic Tools we include. You can use these Bioinformatic tools independent of the478 <strong>479 WGS Extract480 </strong>481 program.482 <strong>483 WGSE484 </strong>485 release, just delete everything except the cygwin64 folder and adjust your path for wherever you move the folder. For those using the new Msys2 release, it is the msys2/usr/bin and msys2/ucrt64/bin folders; respectively.486 </p>487 <p>488 Since v4, this is a full, BASE environment of Cygwin64 that is captured as of the stated release date.489 <strong>490 WGSE491 </strong>492 .493 </p>494 <p>495 Windows 11496 <strong>497 WSLG498 </strong>499 with Ubuntu Linux Desktop (not server) can be used to install and run500 <strong>501 WGS Extract502 </strong>503 . You have to tune504 <strong>505 WSLG506 </strong>507 parameters to get effective use of your disk space, CPU cores and memory under WSLG.508 </p>509 </section>510 <footer>511 <p>512 <small>513 Hosted on GitHub Pages — Theme by514 <a>515 orderedlist516 </a>517 </small>518 </p>519 </footer>520 </div>521 </body>522</html>523