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>3 <head>4 <style>5 html{margin:0;padding:0;height:100%}body{margin:0;padding:0;height:100%;color:#3B3B3B;background:#EEEEEE}#page{max-width:800px;background:white;margin:0 auto;padding:0;min-height:100%}.bannerbox{font-family:"Source Sans Pro","Open Sans","Helvetica Neue","Arial",sans-serif;font-weight:600;background:rgba(87,117,128,0.8);font-size:180%;letter-spacing:2px;padding:.8em;color:white;text-transform:uppercase}@media screen and (min-width: 600px){#topbanner{position:absolute;top:10%;left:0}}@media screen and (max-width: 600px){#topbanner{position:relative}}#content{width:90%;margin:1em auto;line-height:140%;font-family:"Calendas Plus","Crimson Text","Hoefler Text","Georgia",serif}h1{font-family:"Source Sans Pro","Open Sans","Helvetica Neue","Arial",sans-serif;margin-top:1em;margin-bottom:.8em;line-height:110%}h2{font-family:"Source Sans Pro","Open Sans","Helvetica Neue","Arial",sans-serif;margin-top:1.8em;margin-bottom:.5em}h3{font-family:"Source Sans Pro","Open Sans","Helvetica Neue","Arial",sans-serif;margin-bottom:0em}p{margin-top:.5em}a{color:#8AB9D1;text-decoration:none}.dateLabel{font-family:"Source Sans Pro","Open Sans","Helvetica Neue","Arial",sans-serif;color:#D9D9D9;text-transform:uppercase;font-weight:700;font-size:70%;padding-left:1em;float:right}ul{list-style-type:square}ul,ol{padding-left:2em}li{padding:.3em 0}.tbl{display:table}.tbl>div{display:table-row}.tbl>div>div{display:table-cell;padding:.3em}pre,code{border:1px solid #e8e8e8;background-color:#FCFCFF}code{padding:1px 5px}pre{padding:8px 12px}pre>code{border:0;padding-right:0;padding-left:0}.commaseplist{padding:0px;display:inline;list-style:none}.commaseplist li{display:inline}.commaseplist li:after{content:", "}.commaseplist li:last-child:after{content:""}blockquote{background:#F0F0F0;padding:.2em 1.5em;border-left:.5em solid #8AB9D1}.figureText{margin:0px auto;width:70%;font-size:80%;color:grey;text-align:center;font-style:italic}dt{font-family:"Source Sans Pro","Open Sans","Helvetica Neue","Arial",sans-serif;font-weight:bold}.highlight{background:#fff}.highlight .c{color:#998;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k{font-weight:bold}.highlight .o{font-weight:bold}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:bold}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#999;font-weight:bold;font-style:italic}.highlight .gd{color:#000;background-color:#fdd}.highlight .gd .x{color:#000;background-color:#faa}.highlight .ge{font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000;background-color:#dfd}.highlight .gi .x{color:#000;background-color:#afa}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:bold}.highlight .gu{color:#aaa}.highlight .gt{color:#a00}.highlight .kc{font-weight:bold}.highlight .kd{font-weight:bold}.highlight .kp{font-weight:bold}.highlight .kr{font-weight:bold}.highlight .kt{color:#458;font-weight:bold}.highlight .m{color:#099}.highlight .s{color:#d14}.highlight .na{color:teal}.highlight .nb{color:#0086B3}.highlight .nc{color:#458;font-weight:bold}.highlight .no{color:teal}.highlight .ni{color:purple}.highlight .ne{color:#900;font-weight:bold}.highlight .nf{color:#900;font-weight:bold}.highlight .nn{color:#555}.highlight .nt{color:navy}.highlight .nv{color:teal}.highlight .ow{font-weight:bold}.highlight .w{color:#bbb}.highlight .mf{color:#099}.highlight .mh{color:#099}.highlight .mi{color:#099}.highlight .mo{color:#099}.highlight .sb{color:#d14}.highlight .sc{color:#d14}.highlight .sd{color:#d14}.highlight .s2{color:#d14}.highlight .se{color:#d14}.highlight .sh{color:#d14}.highlight .si{color:#d14}.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc{color:teal}.highlight .vg{color:teal}.highlight .vi{color:teal}.highlight .il{color:#099}6 </style>7 <meta charset="utf-8">8 <meta content="IE=edge" http-equiv="X-UA-Compatible">9 <meta content="width=device-width, initial-scale=1" name="viewport">10 <title>11 Password Constraint Puzzler12 </title>13 <meta content="I was creating a Java snippet for password generation for programming.guide and stumbled across a fun puzzler. Suppose you have the following scenario:" name="description">14 <!-- Global site tag (gtag.js) - Google Analytics -->15 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">16 </head>17 <body>18 <div id="page">19 <div style="position: relative;">20 <div class="bannerbox" id="topbanner">21 Andreas Lundblad22 </div>23 <img src="rick.jpg" style="width: 100%; display: block;">24 </div>25 <div id="content">26 <div class="post">27 <header class="post-header">28 <div class="dateLabel">29 Dec 11, 201630 </div>31 <h1 class="post-title">32 Password Constraint Puzzler33 </h1>34 </header>35 <article>36 <p>37 I was creating a Java snippet for password generation for38 <a>39 programming.guide40 </a>41 and stumbled across a fun puzzler. Suppose you have the following scenario:42 </p>43 <blockquote>44 <p>45 You’re a user trying to register a new account. The site says that the password must be at least 8 characters, so you enter46 <code class="language-plaintext highlighter-rouge">47 "qurcoehx"48 </code>49 . The site responds with50 </p>51 <p>52 53 <em>54 <font style="color: red">55 Password must contain at least 1 digit56 </font>57 </em>58 </p>59 <p>60 You’re lazy and don’t want to type more characters than necessary, so you stick to 8 characters and replace the61 <code class="language-plaintext highlighter-rouge">62 c63 </code>64 with a65 <code class="language-plaintext highlighter-rouge">66 767 </code>68 :69 <code class="language-plaintext highlighter-rouge">70 "qur7oehx"71 </code>72 . The site accepts the password.73 </p>74 </blockquote>75 <p>76 <strong>77 The puzzler78 </strong>79 : Is the second version “safer” than the first version? Or, put differently: Are there more 8 character passwords with exactly 1 digit, than there are 8 character passwords with only letters?80 </p>81 <p>82 On one hand you can reason…83 </p>84 <p>85 86 <em>87 a mix of characters and digits must be better than just characters88 </em>89 </p>90 <p>91 …but on the other hand…92 </p>93 <p>94 95 <em>96 being forced to ‘downgrade’ a letter to a digit must surely be bad.97 </em>98 </p>99 <p>100 So which one is it?101 </p>102 <p>103 Let’s first focus on lower case character. Without a digit, there are 26104 <sup>105 8106 </sup>107 8 character passwords. When forced to include a digit, we have:108 </p>109 <ul>110 <li>111 a 7 letter password (26112 <sup>113 7114 </sup>115 choices),116 </li>117 <li>118 1 digit (10 choices), and119 </li>120 <li>121 a digit position (8 choices)122 </li>123 </ul>124 <p>125 We see that 26126 <sup>127 7128 </sup>129 ×10×8 is greater than 26130 <sup>131 8132 </sup>133 , so replacing a character with a digit actually helps. What “saves” us here, intuitively, is the fact that the digit has many possible positions.134 </p>135 <p>136 If we simplify the inequality by dividing both sides with 26137 <sup>138 7139 </sup>140 , we get141 </p>142 <p>143 10×8 > 26144 </p>145 <p>146 In other words, inserting a digit is better as long as147 </p>148 <p>149 10×[number of digit positions] > [number of letters].150 </p>151 <p>152 Even with just 2 characters we’re better off “downgrading” one of them from a letter to a digit.153 </p>154 <p>155 If we on the other hand consider upper case letters as well, i.e. 52 alternatives, we need more than ⌊52/10⌋ = 5 characters for the downgrade to make sense.156 </p>157 <p>158 <strong>159 Conclusion160 </strong>161 : The tongue in cheek security analysis here is, as long as you have a reasonable long password, it’s an improvement to replace a letter with a digit.162 </p>163 </article>164 </div>165 </div>166 167 <!-- To make sure #page goes all the way to the bottom. https://stackoverflow.com/questions/6470715 -->168 </div>169 </body>170</html>171