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>2<html lang="en">3 <head>4 <style>5 body {margin:0;padding:0;word-wrap:break-word;}6img {border:none;}7input {border:1px solid black;border-radius:2px;padding:0;}8input[type=image] { border: none; }9textarea {border:1px solid black;padding:0;}10* {box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-ms-box-sizing:content-box;}11a:link {color:#905f35;text-decoration:none;}12a:active {color:#905f35;text-decoration:none;}13a:hover {color:#905f35;text-decoration:none;}14a:visited {color:#905f35;text-decoration:none;}15.DefaultParagraph { text-align:left;margin:0px;text-indent:0.0px;line-height:1px;font-family:"Verdana", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;font-variant:normal;font-size:16.0px;vertical-align:0; }16.Body { text-align:left;margin:0px 0px 12px;text-indent:0.0px;line-height:1px;font-family:"Verdana", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;font-variant:normal;font-size:16.0px;vertical-align:0; }17.Normal { text-align:left;margin:0px;text-indent:0.0px;line-height:1px;font-family:"Verdana", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;font-variant:normal;font-size:16.0px;vertical-align:0; }18 </style>19 <meta charset="utf-8">20 <title>21 BALTIC22 </title>23 <meta content="Serif WebPlus X8" name="generator">24 <meta content="width=1095" name="viewport">25 <style type="text/css">26 .C-1 { line-height:18.00px;font-family:"Verdana", sans-serif;font-style:normal;font-weight:700;color:#54361c;background-color:transparent;text-decoration:none;font-variant:normal;font-size:16.0px;vertical-align:0; }27 .C-2 { line-height:18.00px;font-family:"Verdana", sans-serif;font-style:italic;font-weight:700;color:#54361c;background-color:transparent;text-decoration:none;font-variant:normal;font-size:16.0px;vertical-align:0; }28 @font-face { font-family: 'Algerian'; src: url('wpscripts/wp0fd02d29.ttf'); }29 .P-1 { text-align:center;line-height:1px;font-family:"Algerian", serif;font-style:normal;font-weight:normal;color:#54361c;background-color:transparent;font-variant:normal;font-size:64.0px;vertical-align:0; }30 .C-3 { line-height:84.00px;font-family:"Algerian", serif;font-style:normal;font-weight:normal;color:#54361c;background-color:transparent;text-decoration:none;font-variant:normal;font-size:64.0px;vertical-align:0; }31 .C-4 { line-height:18.00px;font-family:"Verdana", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:16.0px;vertical-align:0; }32 .C-5 { line-height:18.00px;font-family:"Verdana", sans-serif;font-style:normal;font-weight:700;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:16.0px;vertical-align:0; }33 .C-6 { line-height:18.00px;font-family:"Courier New", monospace;font-style:normal;font-weight:700;color:#54361c;background-color:transparent;text-decoration:none;font-variant:normal;font-size:16.0px;vertical-align:0; }34 .C-7 { line-height:18.00px;font-family:"Courier New", monospace;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:16.0px;vertical-align:0; }35 .OBJ-1,.OBJ-1:link,.OBJ-1:visited { background-image:url('wpimages/wp5d629358_06.png');background-repeat:no-repeat;background-position:0px 0px;text-decoration:none;display:block;position:absolute; }36 .OBJ-1:hover { background-position:0px -180px; }37 .OBJ-1:active,a:link.OBJ-1.Activated,a:link.OBJ-1.Down,a:visited.OBJ-1.Activated,a:visited.OBJ-1.Down,.OBJ-1.Activated,.OBJ-1.Down { background-position:0px -90px; }38 .OBJ-1.Disabled,a:link.OBJ-1.Disabled,a:visited.OBJ-1.Disabled,a:hover.OBJ-1.Disabled,a:active.OBJ-1.Disabled { background-position:0px -270px; }39 .OBJ-1:focus { outline-style:none; }40 button.OBJ-1 { background-color:transparent;border:none 0px;padding:0;display:inline-block;cursor:pointer; }41 button.OBJ-1:disabled { pointer-events:none; }42 .OBJ-1.Inline { display:inline-block;position:relative;line-height:normal; }43 .OBJ-1 span,.OBJ-1:link span,.OBJ-1:visited span { color:#e6d1a6;font-family:Verdana,sans-serif;font-weight:bold;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:23px;top:33px;width:168px;height:26px;line-height:26px;font-size:21px;display:block;position:absolute;cursor:pointer; }44 .OBJ-1:active span,a:link.OBJ-1.Activated span,a:link.OBJ-1.Down span,a:visited.OBJ-1.Activated span,a:visited.OBJ-1.Down span,.OBJ-1.Activated span,.OBJ-1.Down span { color:#54361c; }45 .OBJ-1.Disabled span,a:link.OBJ-1.Disabled span,a:visited.OBJ-1.Disabled span,a:hover.OBJ-1.Disabled span,a:active.OBJ-1.Disabled span { color:#ffffff; }46 .OBJ-2 { line-height:90px; }47 .OBJ-3,.OBJ-3:link,.OBJ-3:visited { background-image:url('wpimages/wpa263b1ff_06.png');background-repeat:no-repeat;background-position:0px 0px;text-decoration:none;display:block;position:absolute; }48 .OBJ-3:hover { background-position:0px -132px; }49 .OBJ-3:active,a:link.OBJ-3.Activated,a:link.OBJ-3.Down,a:visited.OBJ-3.Activated,a:visited.OBJ-3.Down,.OBJ-3.Activated,.OBJ-3.Down { background-position:0px -66px; }50 .OBJ-3.Disabled,a:link.OBJ-3.Disabled,a:visited.OBJ-3.Disabled,a:hover.OBJ-3.Disabled,a:active.OBJ-3.Disabled { background-position:0px -198px; }51 .OBJ-3:focus { outline-style:none; }52 button.OBJ-3 { background-color:transparent;border:none 0px;padding:0;display:inline-block;cursor:pointer; }53 button.OBJ-3:disabled { pointer-events:none; }54 .OBJ-3.Inline { display:inline-block;position:relative;line-height:normal; }55 .OBJ-3 span,.OBJ-3:link span,.OBJ-3:visited span { color:#ffffff;font-family:Algerian,serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:17px;top:24px;width:98px;height:19px;line-height:19px;font-size:15px;display:block;position:absolute;cursor:pointer; }56 .OBJ-4 { line-height:66px; }57 </style>58 </head>59 <body style="height:1044px;background:url('wpimages/wpaf053299_06.jpg') repeat scroll center top transparent;">60 <div id="divMain" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:1095px;height:1044px;">61 <img alt src="rick.jpg" style="position:absolute;left:25px;top:513px;width:335px;height:190px;">62 <div style="position:absolute;left:12px;top:724px;width:919px;height:15px;overflow:hidden;">63 <p class="Body">64 <span class="C-1">65 BALTIC -66 <wbr>67 Photo: Frank Pichardo Collection68 </span>69 </p>70 </div>71 <div style="position:absolute;left:27px;top:755px;width:1052px;height:92px;overflow:hidden;">72 <p class="Body">73 <span class="C-1">74 Built by Harlan & Wolff Limited, Belfast, Northern Ireland, 1904.75 <wbr>76 New York service. Largest ship afloat, 1904-77 <wbr>78 05. Troopship during World War I. Scrapped in 1933.79 </span>80 </p>81 </div>82 <div style="position:absolute;left:43px;top:864px;width:888px;height:69px;overflow:hidden;">83 <p class="Body">84 <span class="C-2">85 Source: The Statue of Liberty-86 <wbr>87 Ellis Island Foundation. American Family Immigration History Center88 </span>89 </p>90 </div>91 <div style="position:absolute;left:20px;top:11px;width:1069px;height:84px;overflow:hidden;">92 <p class="Body P-1">93 <span class="C-3">94 BALTIC95 </span>96 </p>97 </div>98 <div style="position:absolute;left:19px;top:304px;width:1025px;height:195px;overflow:hidden;">99 <p class="Normal">100 <span class="C-4">101 <br>102 </span>103 </p>104 <p class="Body">105 <span class="C-1">106 I107 <span class="C-5">108 D# NAME BIRTH DATE BIRTH PLACE DEATH DATE DEATH PLACE109 </span>110 </span>111 </p>112 <p class="Body">113 <span class="C-6">114 1115 <span class="C-7">116 231 WIEST, Friedrich Karl 6 Jul 1881 Rohrbach, Kherson, Russia 27 Feb 1957 Fresno, Calif.117 </span>118 </span>119 </p>120 <p class="Body">121 <span class="C-7">122 1230 CROISSANT, Katherina 25 May 1882 Rohrbach, Russia 5 Mar 1944 Dinuba, Tulare, Calif.123 </span>124 </p>125 <p class="Body">126 <span class="C-7">127 1236 WIEST, Lydia 13 Feb 1906 Friedrichsfeld, Russia128 </span>129 </p>130 <p class="Body">131 <span class="C-7">132 1237 WIEST, Friedrich 17 Apr 1907 Friedrichsfeld, Russia 15 Jan 1996 Fresno, California133 </span>134 </p>135 </div>136 <div style="position:absolute;left:81px;top:193px;width:932px;height:98px;">137 <a class="OBJ-1 ActiveButton OBJ-2" id="nav_69_B1" style="display:block;position:absolute;left:147px;top:0px;width:213px;height:90px;">138 <span>139 WEB MENU140 </span>141 </a>142 <a class="OBJ-1 ActiveButton OBJ-2" id="nav_69_B2" style="display:block;position:absolute;left:360px;top:0px;width:213px;height:90px;">143 <span>144 MASTER LIST145 </span>146 </a>147 <a class="OBJ-1 ActiveButton OBJ-2" id="nav_69_B3" style="display:block;position:absolute;left:573px;top:0px;width:213px;height:90px;">148 <span>149 MANIFEST150 </span>151 </a>152 </div>153 <div style="position:absolute;left:223px;top:109px;width:663px;height:66px;">154 <a class="OBJ-3 ActiveButton OBJ-4" id="nav_54_B1" style="display:block;position:absolute;left:201px;top:0px;width:131px;height:66px;">155 <span>156 Up157 </span>158 </a>159 <a class="OBJ-3 ActiveButton OBJ-4" id="nav_54_B2" style="display:block;position:absolute;left:332px;top:0px;width:131px;height:66px;">160 <span>161 Next162 </span>163 </a>164 </div>165 </div>166 </body>167</html>168