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">3 <head>4 <style>5 /*6body {7 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";8 line-height: 1.5;9 color: rgb(36, 41, 47);10 font-size: 16px;11 line-height: 24px;12}13 14h1, h2 {15 font-weight: 600;16 border-bottom-color: rgb(216, 222, 228);17 border-bottom-style: solid;18 border-bottom-width: 1px;19 margin-top: 24px;20}21 22h1 {23 font-size: 32px;24 line-height: 40px;25 padding-bottom: 9.6px;26}27 28h2 {29 font-size: 24px;30 line-height: 30px;31 padding-bottom: 7.2px;32}33 34table {35 border-collapse: collapse;36 border-color: rgb(128, 128, 128);37}38 39table, tr {40 border-top: 1px solid hsla(210,18%,87%,1);41}42 43tbody {44 display: table-row-group;45 vertical-align: middle;46 border-color: inherit;47}48*/49 50 51body {52 box-sizing: border-box;53 min-width: 200px;54 max-width: 1110px;55 margin: 0 auto;56 padding: 45px;57}58 59@media (prefers-color-scheme: dark) {60 body {61 background-color: #0d1117;62 }63}64 65 66.github-fork-ribbon:before {67 background-color: #121612;68}69 70.banner-image {71 border-radius: 50px;72}73 </style>74 <!-- Google tag (gtag.js) -->75 <meta charset="utf-8">76 <title>77 Animated AI78 </title>79 <meta content="width=device-width, initial-scale=1.0" name="viewport">80 </head>81 <body>82 <article class="markdown-body">83 <h1>84 <div>85 <img class="banner-image" src="rick.jpg" width="100%">86 </div>87 </h1>88 <p>89 I'm creating animations and instructional videos about neural networks.90 Check out my91 <a>92 Patreon93 </a>94 and95 <a>96 YouTube channel97 </a>98 !99 </p>100 <h2>101 Convolution102 </h2>103 <h3>104 The Basic Algorithm105 </h3>106 Watch the companion YouTube video:107 <a>108 Fundamental Algorithm of Convolution in Neural Networks109 </a>110 .111 <img alt="The process of convolution in neural networks with a 3x3 kernel size" height="auto" src="rick.jpg" width="960">112 <h3>113 Padding114 </h3>115 Companion video:116 <a>117 Convolution Padding - Neural Networks118 </a>119 <table>120 <tbody>121 <tr>122 <td>123 <img alt="The process of convolution in neural networks with a 3x3 kernel size" height="auto" src="rick.jpg" width="480">124 </td>125 <td>126 <img alt="The process of convolution in neural networks with a 3x3 kernel size and a padding of 'SAME', i.e., 1 pixel on the top, bottom, left, and right." height="auto" src="rick.jpg" width="480">127 </td>128 </tr>129 <tr>130 <td>131 No Padding AKA "Valid"132 </td>133 <td>134 [1,1,1,1] Padding AKA "Same"135 </td>136 </tr>137 </tbody>138 </table>139 <h3>140 Stride141 </h3>142 Companion video:143 <a>144 Stride - Convolution in Neural Networks145 </a>146 <table>147 <thead>148 <tr>149 <th>150 Stride 1151 </th>152 <th>153 Stride 2154 </th>155 </tr>156 </thead>157 <tbody>158 <tr>159 <td>160 <img alt="The process of convolution in neural networks with a 3x3 kernel size" height="auto" src="rick.jpg" width="480">161 </td>162 <td>163 <img alt="The process of convolution in neural networks with a 3x3 kernel size and a stride of 2x2" height="auto" src="rick.jpg" width="480">164 </td>165 </tr>166 <tr>167 <td>168 No Padding AKA "Valid"; Stride of 1169 </td>170 <td>171 No Padding AKA "Valid"; Stride of 2172 </td>173 </tr>174 <tr>175 <td>176 <img height="auto" src="rick.jpg" width="480">177 </td>178 <td>179 <img alt="The process of convolution in neural networks with a 3x3 kernel size, a stride of 2x2, and a padding of 'SAME', i.e., 1 pixel on the top, bottom, left, and right." height="auto" src="rick.jpg" width="480">180 </td>181 </tr>182 </tbody>183 </table>184 <h3>185 Groups, Depthwise, and Depthwise-Separable186 </h3>187 Watch the companion YouTube video:188 <a>189 Groups, Depthwise, and Depthwise-Separable Convolution (Neural Networks)190 </a>191 .192 <table>193 <tbody>194 <tr>195 <td>196 <img alt="The process of convolution in neural networks with a 3x3 kernel size" height="auto" src="rick.jpg" width="480">197 </td>198 <td>199 <img alt="The process of convolution in neural networks with a 3x3 kernel size and 2 groups" height="auto" src="rick.jpg" width="480">200 </td>201 </tr>202 <tr>203 <td>204 1 Group205 </td>206 <td>207 2 Groups208 </td>209 </tr>210 <tr>211 <td>212 <img alt="The process of convolution in neural networks with a 3x3 kernel size and 8 groups making it a depthwise convolution" height="auto" src="rick.jpg" width="480">213 </td>214 <td>215 <img alt="A depthwise convolution layer followed by a pointwise convolution layer making the combined process a depthwise-separable convolution" height="auto" src="rick.jpg" width="480">216 </td>217 </tr>218 <tr>219 <td>220 Depthwise (8 Groups)221 </td>222 <td>223 Depthwise-separable (8 Groups followed by pointwise)224 </td>225 </tr>226 </tbody>227 </table>228 <h2 id="pixel-shuffle">229 Pixel Shuffle230 </h2>231 Watch the companion YouTube video:232 <a>233 Pixel Shuffle - Changing Resolution with Style234 </a>235 <h3>236 2x2 Block Size237 </h3>238 <table>239 <tbody>240 <tr>241 <td>242 <img alt="Pixel shuffle animation in neural networks with a block size of 2x2" height="auto" src="rick.jpg" width="480">243 </td>244 <td>245 <img alt="Pixel unshuffle animation in neural networks with a block size of 2x2" height="auto" src="rick.jpg" width="480">246 </td>247 </tr>248 <tr>249 <td>250 2x2 Pixel Shuffle251 </td>252 <td>253 2x2 Pixel Unshuffle254 </td>255 </tr>256 <tr>257 <td colspan="2">258 <img alt="Pixel shuffle and unshuffle in neural networks with a block size of 2x2 looping animation" height="auto" src="rick.jpg" width="960">259 </td>260 </tr>261 <tr>262 <td colspan="2">263 2x2 Pixel Shuffle/Unshuffle Loop264 </td>265 </tr>266 </tbody>267 </table>268 <h3>269 3x3 Block Size270 </h3>271 <table>272 <tbody>273 <tr>274 <td>275 <img alt="Pixel shuffle animation in neural networks with a block size of 3x3" height="auto" src="rick.jpg" width="480">276 </td>277 <td>278 <img alt="Pixel unshuffle animation in neural networks with a block size of 3x3" height="auto" src="rick.jpg" width="480">279 </td>280 </tr>281 <tr>282 <td>283 3x3 Pixel Shuffle284 </td>285 <td>286 3x3 Pixel Unshuffle287 </td>288 </tr>289 <tr>290 <td colspan="2">291 <img alt="Pixel shuffle and unshuffle in neural networks with a block size of 3x3 looping animation" height="auto" src="rick.jpg" width="960">292 </td>293 </tr>294 <tr>295 <td colspan="2">296 3x3 Pixel Shuffle/Unshuffle Loop297 </td>298 </tr>299 </tbody>300 </table>301 <h2>302 </h2>303 <p>304 Licensed under the305 <a>306 MIT License307 </a>308 </p>309 </article>310 </body>311</html>312