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

root395.html

395.html92 linesDownload Raw Back to root

1<html>2 <head>3  <style>4  </style>5  <!-- Global site tag (gtag.js) - Google Analytics -->6 </head>7 <body background="../flower_bg_2.png" link="#6C3483" vlink="#6C3483">8  <table border="0" width="100%">9   <tbody>10    <tr>11     <td bgcolor="#D8BFD8">12      <a>13       Root14      </a>15      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;16      <a>17       Practice18      </a>19      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20      <a>21       Wares22      </a>23      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;24      <a>25       Professional Bio26      </a>27      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;28     </td>29    </tr>30    <tr>31     <td>32      <table align="center" border="0" cellpadding="33" cellspacing="33" height="100%" valign="middle" width="90%">33       <tbody>34        <tr>35         <td align="center" bgcolor="#FF7F50" colspan="6" valign="middle">36          <font face="Lucida Console" size="4">37           <a>38            Beginner's Mind39           </a>40          </font>41          <br>42          <br>43          <font face="Arial" size="3">44           <i>45            After you have practiced for a while, you will realize that 46it is not possible to make rapid, extraordinary progress. Even 47though you try very hard, the progress you make is always 48little by little.49           </i>50          </font>51         </td>52        </tr>53        <tr>54         <td align="center" bgcolor="#D8BFD8" colspan="3" valign="middle">55          <font face="Lucida Console" size="4">56           <a>57            Breathing58           </a>59          </font>60          <br>61          <br>62          <font face="Arial" size="3">63           <i>64            If you say, "I breathe.", the "I" is extra.65            <br>66           </i>67          </font>68         </td>69         <td align="center" bgcolor="#D8BFD8" colspan="3" valign="middle">70          <font face="Lucida Console" size="4">71           <a>72            Sleeping73           </a>74          </font>75          <br>76          <br>77          <font face="Arial" size="3">78           <i>79            Sleeping is the best meditation.80           </i>81          </font>82         </td>83        </tr>84       </tbody>85      </table>86     </td>87    </tr>88   </tbody>89  </table>90 </body>91</html>92