Datasetpublic

SALT-NLP/Design2Code

This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing 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 dataset in the huggingface format 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. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.

sourceHugging Faceodc-byupdated 3y agoView on Hugging Face

22likes1.8kdownloads

root3497.html

3497.html290 linesDownload Raw Back to root

1<!DOCTYPE html>2<html lang="en">3 <head>4  <style>5   html {6  overflow-y: scroll7}8:root {9  --bgcolor: white;10  --fontcolor: #444;11  --linkcolor: #00e;12  --visitedcolor: #551a8b;13  --precolor: #fff;14  --prebgcolor: #000;15}16@media (prefers-color-scheme: dark) {17  :root {18     --bgcolor: black;19     --fontcolor: white;20     --linkcolor: rgb(63, 137, 187);21     --visitedcolor: #ae5ee0;22     --precolor: #fff;23     --prebgcolor: #383838;24  }25}26body {27  color: var(--fontcolor);28  background: var(--bgcolor);29}30a {31  text-decoration: underline;32}33a:hover {34  text-decoration: underline;35}36a:link {37  color: var(--linkcolor);38}39a:visited {40  color: var(--visitedcolor);41}42a:active {43  color: var(--visitedcolor);44}45h1,h2,h3 {46  line-height: 1.2;47}48p > code {49  color: var(--precolor);50  background: var(--prebgcolor);51  padding: 2px;52}53pre {54  color: var(--precolor);55  background: var(--prebgcolor);56  padding: 24px;57  overflow-x: auto;58}59article {60  padding: 5px 0;61}62.center  {63  display: block;64  margin-left: auto;65  margin-right: auto;66  width: 100%;67}68img {69  display: block;70  max-width: 100%;71  height: auto;72}73figcaption {74  color: #888;75  font: 12px/1.5 monospace;76  text-align: center;77}78figure {79  margin: auto;80}81 82hr {83  display: block;84  margin-top: 1em;85  margin-bottom: 1em;86  margin-left: auto;87  margin-right: auto;88  border-style: inset;89  border-width: 0.6px;90  color: rgb(192, 192, 192);91}92 93 94@font-face {95  font-family: 'Iosevka';96  src: local('Iosevka'),97    url('/fonts/iosevka-regular.woff2') format("woff2");98  font-weight: normal;99  font-style: normal;100}101@font-face {102  font-family: 'Iosevka';103  src: local('Iosevka'),104    url('/fonts/iosevka-bold.woff2') format("woff2");105  font-weight: bold;106  font-style: bold;107}108@font-face {109  font-family: 'Iosevka';110  src: local('Iosevka'),111    url('/fonts/iosevka-oblique.woff2') format("woff2");112  font-weight: italic;113  font-style: italic;114}115 116 117 118body {119  font-family: Iosevka, monospace;120  max-width: 750px;121  margin: 0 auto;122  padding: 10px;123}124#brand {125  display: flex;126  flex-direction: column;127  align-items: center;128  text-align: center;129}130#brand a {131  color: var(--visitedcolor);132  text-decoration: none;133}134#brand h1, #brand h3 {135  margin: 0;136}137#brand h1 {138  font-size: 30px;139}140#brand h3 {141  font-size: 20px;142  font-weight: normal;143}144#brand .icon {145  height: 46px;146}147footer {148  margin-top: 30px;149}150header nav {151  margin: 15px 0;152  text-align: center;153}154 155/* Medium devices (tablets, 768px and up) */156@media (min-width: 768px) {157  body {158    margin-top: 25px;159  }160  #brand {161 162    text-align: unset;163  }164  #brand .text {165    margin-left: 10px;166  }167  #brand h1 {168    font-size: 45px;169  }170  #brand h3 {171    font-size: 25px;172  }173}174#postsByDate  {175  list-style: none;176}177#postsByDate .date {178  width: 60px;179}180#postsByDate div, #postsInOneGroup div {181  display: inline-block;182}183#terms {184  list-style: none;185}186#terms .term {187  background-color: #ddd;188  border-radius: 10px;189  display: inline-block;190  margin: 2px;191  padding: 8px;192}193  </style>194  <meta charset="utf-8">195  <meta content="width=device-width, initial-scale=1" name="viewport">196  <meta content="Everything about HP Calculators" name="description">197  <title>198   Algebraic Entry Mode (ALG) | Educalc.net199  </title>200  <meta content="#da532c" name="msapplication-TileColor">201  <meta content="#ffffff" name="theme-color">202 </head>203 <body>204  <header>205   <div id="brand">206    <a class="icon-link">207     <img class="icon" src="rick.jpg">208    </a>209   </div>210   <nav>211    <a>212     <b>213      Educalc.net214     </b>215    </a>216    |217    <a>218     <b>219      Category220     </b>221    </a>222    |223    <a>224     <b>225      Tag226     </b>227    </a>228    |229    <a>230     <b>231      Search232     </b>233    </a>234    |235    <a>236     <b>237      Find238     </b>239    </a>240    |241    <a>242     <b>243      About244     </b>245    </a>246   </nav>247   <hr>248  </header>249  <div id="content">250   <main>251    <p>252     On most HP calculators model that has dual mode, the algebraic annunciators and keys are labeled as ALG.253    </p>254    <p>255     This is the name of the mathematic notation used on all non-RPN calculators where you enter a mathematic equation like this: 1+3*(3+(2-5)/3). In algebraic mode, parentheses and order of operations are extremely important.256    </p>257    <p>258     The algebraic mode of operation uses the following hierarchy:259    </p>260    <p>261     1. Parentheses262    </p>263    <p>264     2. Exponents265    </p>266    <p>267     3. Multiplication and Division268    </p>269    <p>270     4. Addition and Subtraction271    </p>272   </main>273  </div>274  <footer>275   <hr>276   <p align="center" class="copyright">277    <small>278     Copyright &copy; 2022279    Educalc.net.280    This work is licensed under the281     <a>282      CC BY-SA 4.0283     </a>284     license.285    </small>286   </p>287  </footer>288 </body>289</html>290