CoolFace
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.7kdownloads
root13879.html
13879.html611 linesDownload Raw Back to root
1<html>2 <head>3  <style>4  </style>5  <title>6   Julie's Quality Crafts - hand made placemats, hot pads, napkins, runners and more.7  </title>8  <meta content="Hand made placemats, hot pads, napkins, runners and more." name="description">9  <meta content="hand made, placemats, hot pads, napkins, runners, table cloths" name="keywords">10 </head>11 <body alink="#FF0000" bgcolor="#FFFFFF" link="A007FF" text="#000000" vlink="#996600">12  <center>13   <img alt="Julie's Quality Crafts" height="122" src="rick.jpg" width="417">14   <center>15    <p>16     <font face="Impress BT, Arial, Helvetica" size="+1">17      <b>18       PO Box 22419       <br>20       Stillwater, MN 21 225508223       <br>24       E-Mail:25       <a>26        [EMAIL REDACTED]27       </a>28      </b>29     </font>30    </p>31    <p>32     <font face="Impress BT, Arial, Helvetica" size="5">33      <a>34       Back To The 35 36Showcase37      </a>38     </font>39    </p>40   </center>41   <p>42    <font face="Impress BT, Arial, Helvetica" size="5">43     <a>44      Back To Julie's Quality Crafts45     </a>46    </font>47   </p>48   <p>49    <table border="0" cellpadding="0" cellspacing="0" width="90%">50     <tbody>51      <tr>52       <td align="left" bgcolor="#FFFFFF">53        Place mats, table runners and table rounds are 2-sided so you can pick a different fabric for each side or pick the front side and we will match the other side for you.54        <b>55         Click on any sample below to see a larger version.56        </b>57       </td>58      </tr>59     </tbody>60    </table>61    <br>62    <table border="4" cellpadding="6" cellspacing="3" width="90%">63     <tbody>64      <tr>65       <td align="center" bgcolor="#000000">66        <a target="new window">67         <img height="72" src="rick.jpg" width="108">68        </a>69        <br>70        <font color="#FFFFFF">71         Swatch #172        </font>73       </td>74       <td align="center" bgcolor="#000000">75        <a target="new window">76         <img height="72" src="rick.jpg" width="108">77        </a>78        <br>79        <font color="#FFFFFF">80         Swatch #281        </font>82       </td>83       <td align="center" bgcolor="#000000">84        <a target="new window">85         <img height="72" src="rick.jpg" width="108">86        </a>87        <br>88        <font color="#FFFFFF">89         Swatch #390        </font>91       </td>92       <td align="center" bgcolor="#000000">93        <a target="new window">94         <img height="72" src="rick.jpg" width="108">95        </a>96        <br>97        <font color="#FFFFFF">98         Swatch #499        </font>100       </td>101       <td align="center" bgcolor="#000000">102        <a target="new window">103         <img height="72" src="rick.jpg" width="108">104        </a>105        <br>106        <font color="#FFFFFF">107         Swatch #5108        </font>109       </td>110      </tr>111     </tbody>112    </table>113    <br>114    <table border="4" cellpadding="6" cellspacing="3" width="90%">115     <tbody>116      <tr>117       <td align="center" bgcolor="#000000">118        <a target="new window">119         <img height="72" src="rick.jpg" width="108">120        </a>121        <br>122        <font color="#FFFFFF">123         Swatch #6124        </font>125       </td>126       <td align="center" bgcolor="#000000">127        <a target="new window">128         <img height="72" src="rick.jpg" width="108">129        </a>130        <br>131        <font color="#FFFFFF">132         Swatch #7133        </font>134       </td>135       <td align="center" bgcolor="#000000">136        <a target="new window">137         <img height="72" src="rick.jpg" width="108">138        </a>139        <br>140        <font color="#FFFFFF">141         Swatch #8142        </font>143       </td>144       <td align="center" bgcolor="#000000">145        <a target="new window">146         <img height="72" src="rick.jpg" width="108">147        </a>148        <br>149        <font color="#FFFFFF">150         Swatch #9151        </font>152       </td>153       <td align="center" bgcolor="#000000">154        <a target="new window">155         <img height="72" src="rick.jpg" width="108">156        </a>157        <br>158        <font color="#FFFFFF">159         Swatch #10160        </font>161       </td>162      </tr>163     </tbody>164    </table>165    <br>166    <table border="4" cellpadding="6" cellspacing="3" width="90%">167     <tbody>168      <tr>169       <td align="center" bgcolor="#000000">170        <a target="new window">171         <img height="72" src="rick.jpg" width="108">172        </a>173        <br>174        <font color="#FFFFFF">175         Swatch #11176        </font>177       </td>178       <td align="center" bgcolor="#000000">179        <a target="new window">180         <img height="72" src="rick.jpg" width="108">181        </a>182        <br>183        <font color="#FFFFFF">184         Swatch #12185        </font>186       </td>187       <td align="center" bgcolor="#000000">188        <a target="new window">189         <img height="72" src="rick.jpg" width="108">190        </a>191        <br>192        <font color="#FFFFFF">193         Swatch #13194        </font>195       </td>196       <td align="center" bgcolor="#000000">197        <a target="new window">198         <img height="72" src="rick.jpg" width="108">199        </a>200        <br>201        <font color="#FFFFFF">202         Swatch #14203        </font>204       </td>205       <td align="center" bgcolor="#000000">206        <a target="new window">207         <img height="72" src="rick.jpg" width="108">208        </a>209        <br>210        <font color="#FFFFFF">211         Swatch #15212        </font>213       </td>214      </tr>215     </tbody>216    </table>217    <br>218    <table border="4" cellpadding="6" cellspacing="3" width="90%">219     <tbody>220      <tr>221       <td align="center" bgcolor="#000000">222        <a target="new window">223         <img height="72" src="rick.jpg" width="108">224        </a>225        <br>226        <font color="#FFFFFF">227         Swatch #16228        </font>229       </td>230       <td align="center" bgcolor="#000000">231        <a target="new window">232         <img height="72" src="rick.jpg" width="108">233        </a>234        <br>235        <font color="#FFFFFF">236         Swatch #17237        </font>238       </td>239       <td align="center" bgcolor="#000000">240        <a target="new window">241         <img height="72" src="rick.jpg" width="108">242        </a>243        <br>244        <font color="#FFFFFF">245         Swatch #18246        </font>247       </td>248       <td align="center" bgcolor="#000000">249        <a target="new window">250         <img height="72" src="rick.jpg" width="108">251        </a>252        <br>253        <font color="#FFFFFF">254         Swatch #19255        </font>256       </td>257       <td align="center" bgcolor="#000000">258        <a target="new window">259         <img height="72" src="rick.jpg" width="108">260        </a>261        <br>262        <font color="#FFFFFF">263         Swatch #20264        </font>265       </td>266      </tr>267     </tbody>268    </table>269    <br>270    <table border="4" cellpadding="6" cellspacing="3" width="90%">271     <tbody>272      <tr>273       <td align="center" bgcolor="#000000">274        <a target="new window">275         <img height="72" src="rick.jpg" width="108">276        </a>277        <br>278        <font color="#FFFFFF">279         Swatch #21280        </font>281       </td>282       <td align="center" bgcolor="#000000">283        <a target="new window">284         <img height="72" src="rick.jpg" width="108">285        </a>286        <br>287        <font color="#FFFFFF">288         Swatch #22289        </font>290       </td>291       <td align="center" bgcolor="#000000">292        <a target="new window">293         <img height="72" src="rick.jpg" width="108">294        </a>295        <br>296        <font color="#FFFFFF">297         Swatch #23298        </font>299       </td>300       <td align="center" bgcolor="#000000">301        <a target="new window">302         <img height="72" src="rick.jpg" width="108">303        </a>304        <br>305        <font color="#FFFFFF">306         Swatch #24307        </font>308       </td>309       <td align="center" bgcolor="#000000">310        <a target="new window">311         <img height="72" src="rick.jpg" width="108">312        </a>313        <br>314        <font color="#FFFFFF">315         Swatch #25316        </font>317       </td>318      </tr>319     </tbody>320    </table>321    <br>322    <table border="4" cellpadding="6" cellspacing="3" width="90%">323     <tbody>324      <tr>325       <td align="center" bgcolor="#000000">326        <a target="new window">327         <img height="72" src="rick.jpg" width="108">328        </a>329        <br>330        <font color="#FFFFFF">331         Swatch #26332        </font>333       </td>334       <td align="center" bgcolor="#000000">335        <a target="new window">336         <img height="72" src="rick.jpg" width="108">337        </a>338        <br>339        <font color="#FFFFFF">340         Swatch #27341        </font>342       </td>343       <td align="center" bgcolor="#000000">344        <a target="new window">345         <img height="72" src="rick.jpg" width="108">346        </a>347        <br>348        <font color="#FFFFFF">349         Swatch #28350        </font>351       </td>352       <td align="center" bgcolor="#000000">353        <a target="new window">354         <img height="72" src="rick.jpg" width="108">355        </a>356        <br>357        <font color="#FFFFFF">358         Swatch #29359        </font>360       </td>361       <td align="center" bgcolor="#000000">362        <a target="new window">363         <img height="72" src="rick.jpg" width="108">364        </a>365        <br>366        <font color="#FFFFFF">367         Swatch #30368        </font>369       </td>370      </tr>371     </tbody>372    </table>373    <br>374    <table border="4" cellpadding="6" cellspacing="3" width="90%">375     <tbody>376      <tr>377       <td align="center" bgcolor="#000000">378        <a target="new window">379         <img height="72" src="rick.jpg" width="108">380        </a>381        <br>382        <font color="#FFFFFF">383         Swatch #31384        </font>385       </td>386       <td align="center" bgcolor="#000000">387        <a target="new window">388         <img height="72" src="rick.jpg" width="108">389        </a>390        <br>391        <font color="#FFFFFF">392         Swatch #32393        </font>394       </td>395       <td align="center" bgcolor="#000000">396        <a target="new window">397         <img height="72" src="rick.jpg" width="108">398        </a>399        <br>400        <font color="#FFFFFF">401         Swatch #33402        </font>403       </td>404       <td align="center" bgcolor="#000000">405        <a target="new window">406         <img height="72" src="rick.jpg" width="108">407        </a>408        <br>409        <font color="#FFFFFF">410         Swatch #34411        </font>412       </td>413       <td align="center" bgcolor="#000000">414        <a target="new window">415         <img height="72" src="rick.jpg" width="108">416        </a>417        <br>418        <font color="#FFFFFF">419         Swatch #35420        </font>421       </td>422      </tr>423     </tbody>424    </table>425    <br>426    <table border="4" cellpadding="6" cellspacing="3" width="90%">427     <tbody>428      <tr>429       <td align="center" bgcolor="#000000">430        <a target="new window">431         <img height="72" src="rick.jpg" width="108">432        </a>433        <br>434        <font color="#FFFFFF">435         Swatch #36436        </font>437       </td>438       <td align="center" bgcolor="#000000">439        <a target="new window">440         <img height="72" src="rick.jpg" width="108">441        </a>442        <br>443        <font color="#FFFFFF">444         Swatch #37445        </font>446       </td>447       <td align="center" bgcolor="#000000">448        <a target="new window">449         <img height="72" src="rick.jpg" width="108">450        </a>451        <br>452        <font color="#FFFFFF">453         Swatch #38454        </font>455       </td>456       <td align="center" bgcolor="#000000">457        <a target="new window">458         <img height="72" src="rick.jpg" width="108">459        </a>460        <br>461        <font color="#FFFFFF">462         Swatch #39463        </font>464       </td>465       <td align="center" bgcolor="#000000">466        <a target="new window">467         <img height="72" src="rick.jpg" width="108">468        </a>469        <br>470        <font color="#FFFFFF">471         Swatch #40472        </font>473       </td>474      </tr>475     </tbody>476    </table>477    <br>478    <table border="4" cellpadding="6" cellspacing="3" width="90%">479     <tbody>480      <tr>481       <td align="center" bgcolor="#000000">482        <a target="new window">483         <img height="72" src="rick.jpg" width="108">484        </a>485        <br>486        <font color="#FFFFFF">487         Swatch #41488        </font>489       </td>490       <td align="center" bgcolor="#000000">491        <a target="new window">492         <img height="72" src="rick.jpg" width="108">493        </a>494        <br>495        <font color="#FFFFFF">496         Swatch #42497        </font>498       </td>499       <td align="center" bgcolor="#000000">500        <a target="new window">501         <img height="72" src="rick.jpg" width="108">502        </a>503        <br>504        <font color="#FFFFFF">505         Swatch #43506        </font>507       </td>508       <td align="center" bgcolor="#000000">509        <a target="new window">510         <img height="72" src="rick.jpg" width="108">511        </a>512        <br>513        <font color="#FFFFFF">514         Swatch #44515        </font>516       </td>517       <td align="center" bgcolor="#000000">518        <a target="new window">519         <img height="72" src="rick.jpg" width="108">520        </a>521        <br>522        <font color="#FFFFFF">523         Swatch #45524        </font>525       </td>526      </tr>527     </tbody>528    </table>529    <br>530    <table border="4" cellpadding="6" cellspacing="3" width="90%">531     <tbody>532      <tr>533       <td align="center" bgcolor="#000000">534        <a target="new window">535         <img height="72" src="rick.jpg" width="108">536        </a>537        <br>538        <font color="#FFFFFF">539         Swatch #46540        </font>541       </td>542       <td align="center" bgcolor="#000000">543        <a target="new window">544         <img height="72" src="rick.jpg" width="108">545        </a>546        <br>547        <font color="#FFFFFF">548         Swatch #47549        </font>550       </td>551       <td align="center" bgcolor="#000000">552        <a target="new window">553         <img height="72" src="rick.jpg" width="108">554        </a>555        <br>556        <font color="#FFFFFF">557         Swatch #48558        </font>559       </td>560       <td align="center" bgcolor="#000000">561        <a target="new window">562         <img height="72" src="rick.jpg" width="108">563        </a>564        <br>565        <font color="#FFFFFF">566         Swatch #49567        </font>568       </td>569       <td align="center" bgcolor="#000000">570        <a target="new window">571         <img height="72" src="rick.jpg" width="108">572        </a>573        <br>574        <font color="#FFFFFF">575         Swatch #50576        </font>577       </td>578      </tr>579     </tbody>580    </table>581    <br>582    <table border="4" cellpadding="6" cellspacing="3" width="90%">583     <tbody>584      <tr>585       <td align="center" bgcolor="#000000">586        <a target="new window">587         <img height="72" src="rick.jpg" width="108">588        </a>589        <br>590        <font color="#FFFFFF">591         Swatch #51592        </font>593       </td>594       <td align="center" bgcolor="#000000">595        <a target="new window">596         <img height="72" src="rick.jpg" width="108">597        </a>598        <br>599        <font color="#FFFFFF">600         Swatch #52601        </font>602       </td>603      </tr>604     </tbody>605    </table>606    <br>607   </p>608  </center>609 </body>610</html>611