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 html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn{font-style:italic}small{font-size:80%}img{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.container{display:flex;align-items:stretch;width:100%;margin:0 auto;padding:0;box-sizing:border-box}.column{padding:0 1rem;align-self:flex-start;flex:1}@media(min-width:400px){.container{width:100%;padding:0}}@media(min-width:550px){.container{width:95%}}html{font-size:62.5%}body{font-size:1.6em;line-height:1.6;font-weight:400;font-family:raleway,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif;color:#222}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:3.5rem;line-height:.8;letter-spacing:-.1rem}h2,h1.page_header{font-size:2.5rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:2.3rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem;border-bottom:1px solid #cecece}h6{font-size:1.6rem;line-height:1.6;letter-spacing:0}@media(min-width:550px){h1{font-size:3.5rem}h2,h1.page_header{font-size:2.5rem}h3{font-size:2.3rem}h4{font-size:2rem}h5{font-size:1.8rem}h6{font-size:1.6rem}}p{margin-top:0}a{text-decoration:none;color:#1eaedb}a:hover{text-decoration:underline;color:#0fa0ce}ul{list-style:none}ol{list-style:decimal inside}ol,ul{padding-left:0;margin-top:0}li{margin-bottom:.5rem}ul ul{margin:0 0 0 2.5rem}ul ul li{list-style:square}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid #e1e1e1}th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}input,textarea,select,fieldset{margin-bottom:1.5rem}pre,blockquote,dl,figure,table,p,ul,ol,form{margin-bottom:2.5rem}.container:after{content:"";display:table;clear:both}nav{padding:1rem 0;background:#eee;margin-bottom:1.5rem}nav h3{margin:0 0 0 1rem;display:inline-block}.hamburger{display:inline-block;background-color:transparent;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAyUlEQVR4nO3YwQqCQBSF4f9pInz5VHyusLR1LSxaCTdUvI3/B2d/5zoMckCSJEmSvs5ADdyB559nBNr3mcKH7xMMvnb66BLqBMNulSaygBKu/VyGyALGBIPuuoA2waBb5RJZQKmP4BU4RRbwWULDdGX2HnxpBqYvHz68JEk6tgrogAf7/8gszc99QAXcEgy+dsJ9QJdg2K0S6gNKuPZzsQ+ILMA+APsA+wBJknRc9gEJBl879gHYB9gH2AdEFmAfgH2AJEmSpMK9AOpaEdR/AakzAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-size:30px 24px;background-position:center center;border:none;margin:0;padding:0;width:18px;height:18px;cursor:pointer}h1 .sub{font-size:.6em;font-weight:100;display:inline-block}.contents,.article{padding-top:1rem}.contents{flex:0 200px;align-self:stretch;background:#eee;margin-right:1rem;font-size:1.4rem;display:none}li.group{list-style:none;margin-left:-1.7rem;padding-left:0;border-bottom:1px solid #cecece}#content-ad{display:block;margin-bottom:2.5rem;text-align:center;height:250px}#content-ad>div,#content-ad>iframe{margin:0 auto}.side-ad{flex:0 160px;align-self:stretch;min-height:600px;padding:6.5rem 0 0;margin:0 0 0 1rem;display:none}@media(min-width:1050px){.side-ad{flex:0 300px;display:block}}@media(min-width:750px){nav .hamburger{display:none}nav h3{margin:0}.contents{display:block}}.intra-nav{background:#4c4c4c;text-align:right;padding:.5rem 0;margin-top:2rem}.intra-nav a{color:#fff;text-decoration:none}#mainnav{background:#eee;font-size:1.4rem;padding:1rem;margin-top:-2rem;display:none}#mainnav h4{display:inline-block;margin-left:.5rem}footer{border-top:1px solid #eee;padding-top:1rem;margin:3rem 0;text-align:center;font-size:1.4rem}@media(min-width:750px){footer .column{padding:0}}.top-ad{margin-bottom:2rem;text-align:center}.top-ad>div{margin:0 auto}.resp-sharing-button__link,.resp-sharing-button__icon{display:inline-block}.resp-sharing-button__link{text-decoration:none;color:#fff;margin:.5em;font-size:1.2rem;line-height:1.2rem}.resp-sharing-button__link:hover{text-decoration:none;color:#fff}.resp-sharing-button{border-radius:5px;transition:25ms ease-out;padding:.5em .75em;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.resp-sharing-button__icon svg{width:1em;height:1em;margin-right:.4em;vertical-align:top}.resp-sharing-button__icon{stroke:#fff;fill:none}.resp-sharing-button__icon--solid,.resp-sharing-button__icon--solidcircle{fill:#fff;stroke:none}.resp-sharing-button--facebook{background-color:#3b5998}.resp-sharing-button--facebook:hover{background-color:#2d4373}.resp-sharing-button--facebook{background-color:#3b5998;border-color:#3b5998}.resp-sharing-button--facebook:hover,.resp-sharing-button--facebook:active{background-color:#2d4373;border-color:#2d4373}.resp-sharing-button--pinterest{background-color:#bd081c}.resp-sharing-button--pinterest:hover{background-color:#8c0615}.resp-sharing-button--pinterest{background-color:#bd081c;border-color:#bd081c}.resp-sharing-button--pinterest:hover,.resp-sharing-button--pinterest:active{background-color:#8c0615;border-color:#8c0615}img.responsive{width:100%;height:auto}blockquote{background:#f9f9f9;border-left:10px solid #ccc;margin:1.5em 10px;padding:.5em 10px;quotes:"â" "â" "â" "â"}blockquote p{display:inline}6 </style>7 <meta charset="utf-8">8 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">9 <title>10 Hamlet: Analysis of Act IV, Scene 5 | William Shakespeare11 </title>12 <meta content="Hamlet: Analysis of Act IV, Scene 5 | William Shakespeare" name="og:title">13 <meta content="Analysis of Act IV, Scene 5 of William Shakespeare's Hamlet." name="description">14 <meta content="website" name="og:type">15 <meta content="" name="og:image">16 <link rel="canonical">17 <meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport">18 <link media="all" rel="stylesheet">19 <link rel="apple-touch-icon" sizes="180x180">20 <link rel="icon" sizes="32x32" type="image/png">21 <link rel="icon" sizes="16x16" type="image/png">22 <link rel="manifest">23 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">24 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">25 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">26 </head>27 <body style>28 <nav>29 <div class="container">30 <div class="column">31 <span class="hamburger">32 </span>33 <h3>34 <a>35 Homework Online Study Guides36 </a>37 </h3>38 </div>39 </div>40 </nav>41 <div class="google-auto-placed" style="width: 100%; height: auto; clear: both; text-align: center;">42 <ins class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-9167951583052718" data-ad-format="auto" data-adsbygoogle-status="done" style="display: block; margin: 10px auto 15px; background-color: transparent; height: 280px;">43 <div aria-label="Advertisement" 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; overflow: visible;" tabindex="0" title="Advertisement">44 </div>45 </ins>46 </div>47 <section id="mainnav">48 <h4>49 Contents50 </h4>51 <ul>52 <li class="">53 <a>54 Home55 </a>56 </li>57 <li class="">58 <a>59 Plot Summaries & Analysis60 </a>61 <ul>62 <li class="group">63 Act I, Scene 164 </li>65 <li class="">66 <a>67 Summary68 </a>69 </li>70 <li class="">71 <a>72 Analysis73 </a>74 </li>75 <li class="group">76 Act I, Scene 277 </li>78 </ul>79 </li>80 <li class="">81 <a>82 Character Analysis83 </a>84 <ul>85 <li class="">86 <a>87 Hamlet88 </a>89 </li>90 <li class="">91 <a>92 Claudius93 </a>94 </li>95 <li class="">96 <a>97 Gertrude98 </a>99 </li>100 <li class="">101 <a>102 Laertes103 </a>104 </li>105 </ul>106 </li>107 <li class="">108 <a>109 Themes110 </a>111 </li>112 </ul>113 </section>114 <div class="content">115 <div class="container">116 <nav class="column contents">117 <h4>118 Contents119 </h4>120 <ul>121 <li class="">122 <a>123 Home124 </a>125 </li>126 <li class="">127 <a>128 Plot Summaries & Analysis129 </a>130 <ul>131 <li class="group">132 Act I, Scene 1133 </li>134 <li class="">135 <a>136 Summary137 </a>138 </li>139 <li class="">140 <a>141 Analysis142 </a>143 </li>144 <li class="group">145 Act I, Scene 2146 </li>147 </ul>148 </li>149 <li class="">150 <a>151 Character Analysis152 </a>153 <ul>154 <li class="">155 <a>156 Hamlet157 </a>158 </li>159 <li class="">160 <a>161 Claudius162 </a>163 </li>164 <li class="">165 <a>166 Gertrude167 </a>168 </li>169 <li class="">170 <a>171 Laertes172 </a>173 </li>174 </ul>175 </li>176 <li class="">177 <a>178 Themes179 </a>180 </li>181 </ul>182 </nav>183 <article class="column article">184 <h1 class="page_header">185 <strong>186 Hamlet Analysis of Act IV, Scene 5187 </strong>188 <br>189 by190William Shakespeare191 <br>192 </h1>193 <p>194 One of the key themes of Hamlet is the connection between the health of a nation and the state of its rulers. Claudius is rotten, and in this scene, we see that Denmark is starting to rot as well; there is civil unrest, mobs storming the castle, and echoes of revolt against the current king.195 </p>196 <p>197 Here, the difference between Laertes and Hamlet becomes most obvious. Each has a dead father to avenge; but while Laertes acts openly and with moral law on his side, Hamlet has failed to act and has forefeited any position as the “good guy” by killing Polonius.198 </p>199 <a aria-label="Share on Facebook" class="resp-sharing-button__link" rel="noopener" target="_blank">200 <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large">201 <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">202 </div>203 Share on Facebook204 </div>205 </a>206 <a aria-label="Share on Pinterest" class="resp-sharing-button__link" rel="noopener" target="_blank">207 <div class="resp-sharing-button resp-sharing-button--pinterest resp-sharing-button--large">208 <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">209 </div>210 Share on Pinterest211 </div>212 </a>213 <div class="intra-nav">214 <div class="container">215 <div class="column">216 <a class="btn btn-default pull-right">217 Next: Summary of Act IV, Scene 6 >>218 </a>219 </div>220 </div>221 </div>222 </article>223 </div>224 </div>225 <footer>226 <div class="container">227 <div class="column">228 <p>229 Copyright © 1998-2022.230 <a>231 Homework Online, Inc.232 </a>233 All Rights Reserved.234 <br>235 <a>236 Terms and Conditions of Use237 </a>238 |239 <a>240 Privacy Policy241 </a>242 <br>243 </p>244 </div>245 </div>246 </footer>247 <ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: none !important;">248 <div aria-label="Advertisement" 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;" tabindex="0" title="Advertisement">249 </div>250 </ins>251 </body>252</html>253