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 <meta charset="utf-8">5 <meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport">6 <meta content="en" name="content-language">7 <style>8 body{background-color:#f0f0f0;color:#222;font:normal 100% Arial,Helvetica,sans-serif;margin:auto;}9a{text-decoration:none;font-weight:bold;}10.hrf a{border-radius:10px;background-color:#FF0080;font-size:30px;color:#FFF;display:block;float:left;padding:2px 0 5px;margin:12px 0px 3px 5px;width:39px;text-align:center;}11.src a{background-image: url(http://dreaminterpretation.dedikmi.com/img/fin1.png);background-repeat: no-repeat;border-radius:10px;background-color:#FF0080;float:left;padding:2px 0 38px;margin:12px 0px 1px 5px;width:39px;}12.home{margin:0 auto;max-width:1200px;}13.r{min-width:300px;min-height:280px;}14.cols{overflow:auto;max-height:700px;float:left;margin:3px;}15.col{float:left;max-width:339px}16.header a{width:100%;display:inline-block;font-size:50px;padding:5px 0 5px;text-align:center;color:#e0dfdc;background-color:#3498DB;text-shadow:2px 4px 3px rgba(0,0,0,0.9);}17.footer{background-color:#3498DB;width:100%;text-align:center;padding:7px;color:#FFFFFF;font-size:15px;}18.footer span{color:#FF0080;}19.ly{width:100%;display:inline-block;}.ly ul.list li a{width:100%;display:inline-block;color:#212F3C;}20.ly ul.list li{width:90%;height:25px;display:inline-block;padding:5px 5% 2px;border-top:1px solid #e4e4e4;}21h1{color:#FF0080;font-size:30px;}hr{clear:both;}22 </style>23 <meta content="" property="og:image">24 <title>25 Fechtdegen Dream Meaning Fechtdegen in Dream islam Interpretation26 </title>27 <meta content="Fechtdegen Dream Dictionary Fechtdegen in Dream Meaning" name="description">28 <meta content="Fechtdegen, dream dictionary, dream, dream interpretation, dream meaning" name="keywords">29 <meta content="Fechtdegen Dream Meaning Fechtdegen in Dream islam Interpretation" property="og:title">30 <meta content="Fechtdegen Dream Meaning Fechtdegen in Dream islam Interpretation" property="og:description">31 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">32 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">33 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">34 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">35 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">36 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">37 </head>38 <body>39 <div class="home">40 <div class="header">41 <a>42 Dream Interpretation Home43 </a>44 </div>45 <div class="ly">46 <div class="src">47 <a>48 </a>49 </div>50 <div class="hrf">51 <a>52 A53 </a>54 <a>55 B56 </a>57 <a>58 C59 </a>60 <a>61 D62 </a>63 <a>64 E65 </a>66 <a>67 F68 </a>69 <a>70 G71 </a>72 <a>73 H74 </a>75 <a>76 I77 </a>78 <a>79 J80 </a>81 <a>82 K83 </a>84 <a>85 L86 </a>87 <a>88 M89 </a>90 <a>91 N92 </a>93 <a>94 O95 </a>96 <a>97 P98 </a>99 <a>100 Q101 </a>102 <a>103 R104 </a>105 <a>106 S107 </a>108 <a>109 T110 </a>111 <a>112 U113 </a>114 <a>115 V116 </a>117 <a>118 W119 </a>120 <a>121 X122 </a>123 <a>124 Y125 </a>126 <a>127 Z128 </a>129 </div>130 <hr>131 <div class="r">132 <ins class="adsbygoogle" data-ad-client="ca-pub-8663394073606293" data-ad-format="auto" data-ad-slot="[PHONE REDACTED]" data-adsbygoogle-status="done" data-full-width-responsive="true" style="display: block; height: 280px;">133 <div id="aswift_1_host" style="border: none; height: 280px; width: 1200px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;">134 </div>135 </ins>136 </div>137 <div class="cols">138 <h1>139 <strong>140 Dream Fechtdegen Dream Meaning Fechtdegen Dream Interpretation Fechtdegen in Dream Islam141 </strong>142 </h1>143 <div class="post-content">144 <p>145 Popular:146(arab).:147see or in the hand hold: you will have to fight with some obstacles.148 </p>149 </div>150 <br>151 Lookup dream dictionary, dream symbols, dream meanings. The Online Guide To Dream Interpretation interpret your dreams, Fechtdegen dream dictionary analysis, Fechtdegen symbols, Fechtdegen meanings, dream encyclopedia, islamic dream interpretation, dream views Fechtdegen spiritual meanings of dreams.152 <h3>153 If you want to take a gift written t-shirt and glass from Follow us on social media154 </h3>155 </div>156 <div class="r">157 <ins class="adsbygoogle" data-ad-client="ca-pub-8663394073606293" data-ad-format="auto" data-ad-slot="[PHONE REDACTED]" data-adsbygoogle-status="done" data-full-width-responsive="true" style="display: block; height: 280px;">158 <div id="aswift_2_host" style="border: none; height: 280px; width: 1200px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;">159 </div>160 </ins>161 </div>162 </div>163 <div class="footer">164 <p>165 Dream166 <span>167 Interpretation168 </span>169 </p>170 <p>171 © Copyright 2014 Dedikmi.com172 </p>173 <br>174 <a>175 <img alt="dmca" height="25" src="rick.jpg" width="100">176 </a>177 </div>178 </div>179 <ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: none !important;">180 <div id="aswift_0_host" style="border: none; height: 0px; width: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;">181 </div>182 </ins>183 </body>184</html>185