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.7k
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">2<html>3 <head>4 <style>5 /* CSS Document */6 7HTML, BODY {8 padding-top: 0px;9 color: #444444;10}11 12a {13 color: #009fe3;14}15 16 a img {17 border: 0px;18 }19 20 a:visited {21 color: #008ECA;22 }23 24#topdomain {25 width: 543px;26 height: 40px;27 margin: auto;28 font-family: Tahoma, Geneva, sans-serif;29 font-size: 16px;30 text-align: center;31 padding-top: 10px;32}33 34#wrapper {35 width: 524px;36 margin: auto;37 margin-top: 10px;38 -webkit-box-shadow: 0px 0px 40px rgba(50, 50, 50, 0.3);39 -moz-box-shadow: 0px 0px 40px rgba(50, 50, 50, 0.3);40 box-shadow: 0px 0px 40px rgba(50, 50, 50, 0.3);41}42 43UL {44 font-family: Tahoma, Geneva, sans-serif;45 font-size: 17px;46}47 48LI {49 list-style-type: none;50 margin: 8px;51 margin-left: 3px;52}53 54UL LI::before {55 content: "\2022";56 color: #009fe3;57 font-weight: bold;58 display: inline-block;59 width: 1em;60 margin-left: -1em;61}62 63SUP {64 font-size: 8px;65}66 67 68#contact {69 background-color: #EAEAEA;70 width: 89.5%;71 position: absolute;72 bottom: 14px;73 left: 13px;74 padding-left: 15px;75 padding-right: 15px;76 padding-top: 5px;77 padding-bottom: 5px;78 font-family: Tahoma, Geneva, sans-serif;79 font-size: 17px;80 line-height: 150%;81}82 83 84.holdertable {85 width: 524px;86 height: 660px;87 position: relative;88 background-color: #FFFFFF;89}90 91.holdertable_header {92 height: 75px;93}94 95.holdertable_image {96 border: 0px97}98 99.holdertable_content {100 border-bottom: 0px solid #aab1bb;101 border-left: 0px solid #aab1bb;102 border-right: 0px solid #aab1bb;103 background-image: url(/Content/cont_back.png);104 background-repeat: no-repeat;105}106 107 108.font14 {109 font-size: 14px;110}111 </style>112 <title>113 Domain Registered at Safenames114 </title>115 </head>116 <body>117 <div id="topdomain">118 sportexecutive.dk119 </div>120 <div id="wrapper">121 <table border="0" cellpadding="0" cellspacing="0" class="holdertable" width="524">122 <tbody>123 <tr>124 <td class="holdertable_header">125 <a>126 <img alt="Safenames" class="holdertable_image" height="75" src="rick.jpg" width="524">127 </a>128 </td>129 </tr>130 <tr>131 <td class="holdertable_content">132 <br>133 <br>134 <br>135 <ul>136 <li>137 Domain Registration in over 1,400 different extensions138 </li>139 <li>140 Enterprise Domain Management since 1999141 </li>142 <li>143 Mark Protect144 <sup>145 TM146 </sup>147 Online Brand Monitoring and Enforcement148 </li>149 <li>150 Domain Consultancy and Strategy151 </li>152 </ul>153 <div id="contact">154 Please visit155 <a>156 <b>157 www.safenames.net158 </b>159 </a>160 for more information.161 <br>162 <span class="font14">163 Europe, Middle East and Africa: [PHONE REDACTED]164 <br>165 USA, Canada & South America: [PHONE REDACTED]166 <br>167 Australia & Asia-Pacific: [PHONE REDACTED]168 </span>169 </div>170 </td>171 </tr>172 </tbody>173 </table>174 </div>175 </body>176</html>177