Datasetpublic
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.
sourceHugging Faceodc-byupdated 2y agoView on Hugging Face
6likes379downloads
rootg6.html
g6.html382 linesDownload Raw Back to root
1<html>2 <head>3  <style>4   body {5  background: #ffddee;6  font-family: Helvetica, Arial, sans-serif;7  font-size: 15px;8  margin: 0;9  text-align: center;10  overflow: hidden;11}12 13html,14body {15  height: 100%;16}17 18p {19  font-size: 22px;20  margin: 0;21  padding: 1em 0 0 0;22}23 24.coj-btn {25  align-items: center;26  background-color: #ffeef8;27  border: 1px solid transparent;28  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);29  color: #000;30  cursor: pointer;31  display: inline-flex;32  font-size: 1.5rem;33  height: 40px;34  justify-content: center;35  margin: 4px 5px;36  outline: 0;37  padding: 0;38  text-align: center;39  -moz-user-select: none;40  -ms-user-select: none;41  -webkit-user-select: none;42  user-select: none;43  vertical-align: middle;44  width: calc(16.66667% - 10px);45}46 47.coj-btn:focus {48  background-color: #b3cdff;49}50 51.spinning {52  animation: 2s spin infinite;53}54 55.hidden {56  display: none;57}58 59svg .face {60  fill: white;61}62 63.smile,64.frown {65  display: none;66}67 68.ducks .smile,69.ducks .frown {70  display: inline;71  stroke: none;72  fill: orange;73}74 75.mouth {76  stroke: black;77}78 79.red .face {80  fill: red;81}82 83.blue .face {84  fill: #8888ff;85}86 87.yellow .face {88  fill: yellow;89}90 91@keyframes spin {92  0% {93    transform: translate(0, 0) rotate(0deg);94  }95  50% {96    transform: translate(1em, -1em) rotate(360deg);97  }98  100% {99    transform: translate(0, 0) rotate(0deg);100  }101}102 103.bouncing {104  animation: bounce 2s infinite;105  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);106}107 108@keyframes bounce {109  0% {110    transform: scale(1, 1) translateY(0);111  }112  10% {113    transform: scale(1.1, 0.9) translateY(0);114  }115  30% {116    transform: scale(0.9, 1.1) translateY(-50px);117  }118  50% {119    transform: scale(1.05, 0.95) translateY(0);120  }121  57% {122    transform: scale(1, 1) translateY(-5px);123  }124  64% {125    transform: scale(1, 1) translateY(0);126  }127  100% {128    transform: scale(1, 1) translateY(0);129  }130}131 132h1 {133  font-size: 2em;134  font-variant: small-caps;135  text-align: center;136  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);137  color: white;138  margin: 0;139  cursor: pointer;140}141 142.back,143.forward {144  font-size: 25px;145  position: fixed;146  top: 0;147  width: 25px;148  cursor: pointer;149}150 151.back {152  left: 0;153}154 155.forward {156  right: 0;157}158 159.level-display {160  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);161  background: #ffeef8;162  padding: 5px;163  margin: 0;164  text-align: center;165  display: none;166}167 168.number-bar {169  position: fixed;170  bottom: 1rem;171  left: 0;172  right: 0;173  display: none;174}175 176.number-bar .desc {177  display: none;178}179 180li {181  padding: 10px 5px;182  list-style: none;183  cursor: pointer;184  margin: 7px;185  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);186  border-radius: 5px;187  background: #ffeef8;188}189 190ul {191  margin: 0;192  padding: 0;193}194 195svg {196  height: 14vmax;197  width: 14vmax;198}199 200@media (min-width: 768px) {201  .coj-btn {202    height: 60px;203    width: 60px;204  }205 206  .number-bar .desc {207    display: block;208    font-size: 14px;209    opacity: 0.7;210    padding-top: 0.25rem;211  }212}213 214/*some vmax/vh elements get crazy at hi-res, cap their size.*/215@media screen and (min-width: 1024px) {216  svg {217    height: 160px;218    width: 140px;219  }220}221 222#forkongithub a {223  background: #000;224  color: #fff;225  text-decoration: none;226  font-family: arial, sans-serif;227  text-align: center;228  font-weight: bold;229  padding: 5px 40px;230  font-size: 1rem;231  line-height: 2rem;232  position: relative;233  transition: 0.5s;234}235#forkongithub a:hover {236  background: #c11;237  color: #fff;238}239#forkongithub a::before,240#forkongithub a::after {241  content: '';242  width: 100%;243  display: block;244  position: absolute;245  top: 1px;246  left: 0;247  height: 1px;248  background: #fff;249}250#forkongithub a::after {251  bottom: 1px;252  top: auto;253}254@media screen and (min-width: 800px) {255  #forkongithub {256    position: absolute;257    display: block;258    top: 0;259    right: 0;260    width: 200px;261    overflow: hidden;262    height: 200px;263    z-index: 9999;264  }265  #forkongithub a {266    width: 200px;267    position: absolute;268    top: 60px;269    right: -60px;270    transform: rotate(45deg);271    -webkit-transform: rotate(45deg);272    -ms-transform: rotate(45deg);273    -moz-transform: rotate(45deg);274    -o-transform: rotate(45deg);275    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);276  }277}278 279ellipse.face {280  stroke: #ff88dd;281}282.circle ellipse.face {283  stroke: lightgreen;284  stroke-width: 10px;285}286  </style>287  <meta content="width=device-width, initial-scale=1" name="viewport">288  <title>289   贾斯纳的猫:一个适于四岁儿童益智游戏290  </title>291 </head>292 <body>293  <div class="back" onclick="set_level(Math.max(0,cur_level-1))">294   &larr;295  </div>296  <div class="forward" onclick="set_level(Math.min(7,cur_level+1))">297   &rarr;298  </div>299  <h1 onclick="window.location.reload()">300   贾斯纳的猫301  </h1>302  <div class="level-display">303   关卡:304   <span class="level-number">305   </span>306  </div>307  <div class="number-bar">308   <div class="number-line">309    <button class="coj-btn" onclick="submit(0)" type="button">310     0311    </button>312    <button class="coj-btn" onclick="submit(1)" type="button">313     1314    </button>315    <button class="coj-btn" onclick="submit(2)" type="button">316     2317    </button>318    <button class="coj-btn" onclick="submit(3)" type="button">319     3320    </button>321    <button class="coj-btn" onclick="submit(4)" type="button">322     4323    </button>324    <button class="coj-btn" onclick="submit(5)" type="button">325     5326    </button>327    <button class="coj-btn" onclick="submit(6)" type="button">328     6329    </button>330    <button class="coj-btn" onclick="submit(7)" type="button">331     7332    </button>333    <button class="coj-btn" onclick="submit(8)" type="button">334     8335    </button>336    <button class="coj-btn" onclick="submit(9)" type="button">337     9338    </button>339   </div>340   <div class="desc">341    要回答问题，请轻触上面的数字或使用键盘。342   </div>343  </div>344  <p>345  </p>346  <span id="forkongithub">347   <a>348    Fork me on GitHub349   </a>350  </span>351  <div class="instructions">352   <b>353    游戏介绍:354   </b>355   <br>356   <br>357   适于儿童玩的逻辑游戏。358   <b>359    警告：游戏会大声朗读题目（因为小孩子有可能看不懂问题描述），所以请检查你的设备音量。360   </b>361   选择一个关卡362   <br>363   <br>364   <ul>365    <li onclick="set_level(0)">366     0. 初出茅庐367    </li>368    <li onclick="set_level(1)">369     1. 小试牛刀370    </li>371    <li onclick="set_level(2)">372     2. 崭露头角373    </li>374    <li onclick="set_level(3)">375     3. 得心应手376    </li>377   </ul>378  </div>379  <br>380 </body>381</html>382