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.
221.8k
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">2<html>3 <head>4 <style>5 BODY {6 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;7 font-size: 10pt;8 background: #091C59;9}10 11TABLE {12 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;13 font-size: 10pt;14}15 16H1 {17 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;18 font-size: 12pt;19 font-weight: bold;20 margin-top: 22px;21 margin-bottom: 0pt;22 margin-left: 20px;23 margin-right: 20px;24}25 26H2 {27 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;28 font-size: 10pt;29 margin-top: 18px;30 margin-bottom: 0;31 margin-left: 20px;32 margin-right: 20px;33}34 35A:LINK{36 color: #091C59;37}38 39A:ACTIVE {40 color: White;41}42 43A:VISITED {44 color: #091C59;45}46 47A:HOVER {48 background-color: #091C59;49 color: White;50}51 52 53.text-h { font-size: 12pt; font-weight: bold; margin-top: 22px; margin-bottom: 22px; margin-left: 20px; margin-right: 20px }54 55.text-0 { margin-top: 0; margin-bottom: 0; margin-left: 20px; margin-right: 20px }56.text-05 { margin-top: 4px; margin-bottom: 0; margin-left: 20px; margin-right: 20px }57.text-1 { margin-top: 8px; margin-bottom: 0; margin-left: 20px; margin-right: 20px }58.text-2 { margin-top: 16px; margin-bottom: 0; margin-left: 20px; margin-right: 20px }59 60.text-0e { margin-top: 0; margin-bottom: 0; margin-left: 32px; margin-right: 20px }61.text-0ee { margin-top: 0; margin-bottom: 0; margin-left: 48px; margin-right: 20px }62.text-05e { margin-top: 4px; margin-bottom: 0; margin-left: 32px; margin-right: 20px }63.text-1e { margin-top: 8px; margin-bottom: 0; margin-left: 32px; margin-right: 20px }64.text-2e { margin-top: 16px; margin-bottom: 0; margin-left: 32px; margin-right: 20px }65 66.list { font-size: 9pt; margin-top: 3px; margin-bottom: 0; margin-left: 32px; text-indent: -12px; margin-right: 20px }67 68.button { margin-left: 20px; margin-right: 0px }69.button-1 { margin-left: 20px; margin-right: 0px; margin-top: 19px }70 </style>71 <title>72 William Thomas Beckford73 </title>74 <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible">75 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">76 <meta content="en" http-equiv="Content-Language">77 <meta content="The Dunyazad Digital Library - William Thomas Beckford" name="description">78 <meta content="William Thomas Beckford, Vathek, download, PDF, e-book, ebook" name="keywords">79 <meta content="index, follow" name="robots">80 </head>81 <body>82 <p align="center">83 84 </p>85 <table align="center" bgcolor="#FFFDF5" border="0" cellpadding="0" cellspacing="0" width="680">86 <tbody>87 <tr>88 <td colspan="2" valign="top" width="680">89 <p class="button" style="margin-top:16px; margin-bottom:16px">90 <a onmouseout="show('link-0','../ddl.jpg')" onmouseover="show('link-0','../ddl-b.jpg')">91 <img alt="The Dunyazad Digital Library" border="0" height="52" name="link-0" src="rick.jpg" width="640">92 </a>93 </p>94 </td>95 </tr>96 <tr>97 <td valign="top" width="80">98 <p class="button-1">99 <a onmouseout="show('link-1','../nav-a-1.jpg')" onmouseover="show('link-1','../nav-b-1.jpg')">100 <img alt="About the Library" border="0" height="32" name="link-1" src="rick.jpg" width="34">101 </a>102 </p>103 <p class="button">104 <a onmouseout="show('link-2','../nav-a-2.jpg')" onmouseover="show('link-2','../nav-b-2.jpg')">105 <img alt="The Reading Room" border="0" height="32" name="link-2" src="rick.jpg" width="34">106 </a>107 </p>108 <p class="button">109 <a onmouseout="show('link-5','../nav-a-5.gif')" onmouseover="show('link-5','../nav-b-5.gif')">110 <img alt="The Audio Wing" border="0" height="32" name="link-5" src="rick.jpg" width="34">111 </a>112 </p>113 <p class="button">114 <a onmouseout="show('link-3','../nav-a-3.jpg')" onmouseover="show('link-3','../nav-b-3.jpg')">115 <img alt="Support the Library" border="0" height="32" name="link-3" src="rick.jpg" width="34">116 </a>117 </p>118 <p class="button">119 <a onmouseout="show('link-4','../nav-a-4.jpg')" onmouseover="show('link-4','../nav-b-4.jpg')">120 <img alt="Other Stuff ..." border="0" height="32" name="link-4" src="rick.jpg" width="34">121 </a>122 </p>123 </td>124 <td valign="top" width="600">125 <h1>126 William Thomas Beckford127 </h1>128 <h2>129 Vathek130 </h2>131 <p class="text-1e">132 <a target="_blank">133 Download PDF file134 </a>135 – release 1.0a – 117 pages136 </p>137 <p class="text-0e">138 <a target="_blank">139 Download plain text file140 </a>141 – release 1.0a142 </p>143 <p class="text-0e">144 <a target="_blank">145 Download ePub file146 </a>147 – release 1.0a148 </p>149 <p class="text-2">150 <i>151 Vathek152 </i>153 is a nightmarish and hilarious 18th century mock-“Arabian Nights” satirical tour de force fantasy tale, that, despite its brevity,154 stands out as one of the most intriguing and most influential examples of early Gothic fiction.155 </p>156 <p class="text-2">157 <img alt="---" border="0" height="2" src="rick.jpg" width="100%">158 </p>159 <h2>160 About the Author161 </h2>162 <p class="text-1">163 William Thomas Beckford, one of England’s most notorious excentrics of his time, was born in London in 1760, into an immensely rich family. His father William Beckford, twice Lord Mayor of London, had made his vast fortune mostly from slave-labor plantations in Jamaica; William Thomas inherited it at the age of ten.164 </p>165 <p class="text-1">166 Beckford kept spending money lavishly on buidling projects and art, but his income decreased and he was forced to sell not only large parts of his art collection,167 but also Fonthill Abbey, which, by the way, collapsed shortly afterwards. He then commissioned another extravagant building, Lansdown Tower (now Beckford’s Tower) in Bath,168 where he died in 1844, and next to which, as had been his wish, he lies buried — it is now open to the public as a museum.169 </p>170 <p class="text-1">171 Of his literary works, Vathek has remained by far the best known and most influential one. Beckford wrote Vathek 1782 in French, and had it translated into English172 by Samuel Henley; both the English translation, and a few months later the French original, were published in 1786.173 </p>174 <p class="text-2">175 <img alt="---" border="0" height="2" src="rick.jpg" width="100%">176 </p>177 <p class="text-2">178 <a>179 Back to the Reading Room180 </a>181 </p>182 <p class="text-1">183 184 </p>185 </td>186 </tr>187 </tbody>188 </table>189 <p>190 191 </p>192 </body>193</html>194