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="zh-CN">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 About [Name Redacted] | [Name Redacted] @ GitHub13 </title>14 <meta content="Jekyll v3.9.2" name="generator">15 <meta content="About [Name Redacted]" property="og:title">16 <meta content="zh_CN" property="og:locale">17 <meta content="[Name Redacted]’s Profile Page at GitHub" name="description">18 <meta content="[Name Redacted]’s Profile Page at GitHub" property="og:description">19 <meta content="" property="og:url">20 <meta content="[Name Redacted] @ GitHub" property="og:site_name">21 <meta content="website" property="og:type">22 <meta content="summary" name="twitter:card">23 <meta content="About [Name Redacted]" 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 <!-- Global site tag (gtag.js) - Google Analytics -->31 <!-- You can set your favicon here -->32 <!-- end custom head snippets -->33 </head>34 <body>35 <div class="wrapper">36 <header>37 <h1>38 <a>39 [Name Redacted] @ GitHub40 </a>41 </h1>42 <img alt="Logo" src="rick.jpg">43 <p>44 [Name Redacted]'s Profile Page at GitHub45 </p>46 <p class="view">47 <a>48 View My GitHub Profile49 </a>50 </p>51 </header>52 <section>53 <h2 id="about-[Name Redacted]">54 About55 <strong>56 [Name Redacted]57 </strong>58 </h2>59 <p>60 Visit My Homepage61 <strong>62 @63 </strong>64 <strong>65 <a>66 [Name Redacted].Net67 </a>68 </strong>69 (70 <em>71 🐽🎱 Powered By72 <strong>73 Hugo74 </strong>75 in76 <strong>77 Chinese78 </strong>79 .80 </em>81 )82 </p>83 <p>84 More85 <strong>86 Contact87 </strong>88 info 📬89 <strong>90 @91 </strong>92 <a title="About [Name Redacted]">93 About [Name Redacted].Net94 </a>95 </p>96 <div class="language-json highlighter-rouge">97 <div class="highlight">98 <pre class="highlight"><code><span class="p">{</span><span class="w">99 </span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"[Name Redacted]"</span><span class="p">,</span><span class="w">100 </span><span class="nl">"company"</span><span class="p">:</span><span class="w"> </span><span class="s2">"[Name Redacted] dot Net"</span><span class="p">,</span><span class="w">101 </span><span class="nl">"blog"</span><span class="p">:</span><span class="w"> </span><span class="s2">""</span><span class="p">,</span><span class="w">102 </span><span class="nl">"location"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Nanjing,China"</span><span class="p">,</span><span class="w">103 </span><span class="nl">"bio"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Blogger @ [Name Redacted].Net"</span><span class="p">,</span><span class="w">104 </span><span class="nl">"created_at"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2014-06-04T12:52:00Z"</span><span class="w">105</span><span class="p">}</span><span class="w">106</span></code></pre>107 </div>108 </div>109 <h3 id="out-of-date-sites">110 <em>111 Out of Date112 </em>113 Sites114 </h3>115 <p>116 <a>117 [Name Redacted].COM118 </a>119 (120 <em>121 <strong>122 Without123 </strong>124 Maintenance 🚧 , Ready for125 <strong>126 Sell127 </strong>128 .129 </em>130 )131 </p>132 <h3 id="哥林多前书-134-8-cunpss-神">133 哥林多前书 13:4-8 CUNPSS-神134 </h3>135 <blockquote>136 <p>137 爱是恒久忍耐，又有恩慈；138 </p>139 <p>140 爱是不嫉妒；爱是不自夸，不张狂，不做害羞的事，不求自己的益处，不轻易发怒，不计算人的恶，不喜欢不义，只喜欢真理；141 </p>142 <p>143 凡事包容，凡事相信，凡事盼望，凡事忍耐。144 </p>145 <p>146 爱是永不止息。先知讲道之能终必归于无有；说方言之能终必停止；知识也终必归于无有。147 </p>148 </blockquote>149 </section>150 <footer>151 <p>152 <small>153 Hosted on GitHub Pages — Theme by154 <a>155 orderedlist156 </a>157 </small>158 </p>159 <p>160 <small>161 © 2022, [Name Redacted] @ GitHub |162 <a>163 Edit on GitHub164 </a>165 </small>166 </p>167 </footer>168 </div>169 </body>170</html>171