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 XHTML 1.0 Transitional//EN" "">2<html xmlns="">3 <head>4 <style>5 .standardText {6 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;7}8.centerText {9 text-align: center;10}11a{12 color: #CD2928;13}14a:visited{15 color: #CD2928;16}17a:hover{18 color: #CD2928;19}20 21 22.headerPhotographers {23 font-size: 72pt;24 letter-spacing: 1px;25 color: #CD2928;26 position: relative;27 top: 0px;28 margin: 0px auto;29 width: 700px;30 left: 0px;31 top: -1px32}33.headerSeattle {34 font-size: 24pt;35 letter-spacing: 2px;36 color: #CD2928;37 position: absolute;38 top: 20px;39 margin: 0px auto;40 width: 100px;41 visibility:hidden;42}43.headerContainer{44 45 height: 150px;46 margin: 0 auto;47 width: 700px;48}49.headerLinks{50 color: #CD2928;51 letter-spacing: 3px;52 margin-top: -22px;53 text-align: right;54 width: 100%;55}56.headerLinkText {57 color: #CD2928;58}59 </style>60 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">61 <title>62 Rocktographers: Concert and Music Photographers63 </title>64 <style type="text/css">65 .auto-style1 {66 text-align: center;67}68.auto-style13 {69 text-align: center;70 font-size: x-large;71 font-family: Arial, Helvetica, sans-serif;72 letter-spacing: 3px;73}74.auto-style14 {75 font-family: Arial, Helvetica, sans-serif;76 font-size: medium;77 letter-spacing: 2px;78}79.auto-style15 {80 font-size: medium;81 font-family: Arial, Helvetica, sans-serif;82 text-align: left;83}84 </style>85 </head>86 <body class="standardText">87 <div class="headerContainer">88 <div class="headerPhotographers" style="left: 0px; top: -1px">89 <strong>90 rocktographers91 </strong>92 </div>93 <div class="headerSeattle">94 <strong>95 SEATTLE96 </strong>97 </div>98 <div class="headerLinks">99 <a class="headerLinkText">100 gallery101 </a>102 |103 <a class="headerLinkText">104 bios105 </a>106 |107 <a class="headerLinkText">108 about109 </a>110 </div>111 </div>112 <p class="auto-style13">113 <strong>114 Mat Hayward115 </strong>116 </p>117 <p class="auto-style1">118 </p>119 <table style="width: 700px; margin-left:auto; margin-right:auto;">120 <tbody>121 <tr>122 <td style="width: 300px" valign="top">123 <img height="375" src="rick.jpg" width="250">124 </td>125 <td class="auto-style15" style="width: 400px" valign="top">126 Mat Hayward started the Rocktographer group with an event in 2012 as a way to shine the spotlight on the incredibly talented group of photographers in the Seattle area.127 <a>128 Getty Images129 </a>130 ,131 <a>132 107.7 The End133 </a>134 , 135 and Seattle Music Insider. Mat has been passionate about music his 136 entire life but sadly was born with virtually no rythym. As a result, he 137 turned to his other passion...photography. Mat's work has been published 138 in many major media outlets including an image featured by Rolling Stone 139 Magazine as one of the140 <a>141 Top 40 concert photos of 2013142 </a>143 .144 <br>145 <br>146 Mat has always been a rocker at heart with his favorite bands being Jane's Addiction and Nine Inch Nails.147 </td>148 </tr>149 </tbody>150 </table>151 <div class="auto-style1">152 <br>153 <span class="auto-style14">154 <a>155 <strong>156 www.mathaywardphoto.com157 </strong>158 </a>159 </span>160 </div>161 <p>162 </p>163 </body>164</html>165