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 /*6 * The Typekit service used to deliver this font or fonts for use on websites7 * is provided by Adobe and is subject to these Terms of Use8 * http://www.adobe.com/products/eulas/tou_typekit. For font license9 * information, see the list below.10 *11 * brandon-grotesque:12 * - http://typekit.com/eulas/000000000000000077359df613 *14 * © 2009-2023 Adobe Systems Incorporated. All Rights Reserved.15 */16/*{"last_published":"2023-04-10 11:24:06 UTC"}*/17 18 19@font-face {20font-family:"brandon-grotesque";21src:url("") format("woff2"),url("") format("woff"),url("") format("opentype");22font-display:auto;font-style:normal;font-weight:900;font-stretch:normal;23}24 25.tk-brandon-grotesque { font-family: "brandon-grotesque",sans-serif; }26 27 28 29*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}@media(prefers-color-scheme:light){.bg,.chroma{background-color:#f2f2f2}.chroma .err{background-color:#faa;color:#a00}.chroma .lnlinks{color:inherit;outline:none;text-decoration:none}.chroma .lntd{border:0;margin:0;padding:0;vertical-align:top}.chroma .lntable{border:0;border-spacing:0;margin:0;padding:0}.chroma .hl{background-color:#ffc}.chroma .ln,.chroma .lnt{color:#7f7f7f;margin-right:.4em;padding:0 .4em;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:pre}.chroma .line{display:flex}.chroma .k,.chroma .kc,.chroma .kd,.chroma .kn{color:#069;font-weight:700}.chroma .kp{color:#069}.chroma .kr{color:#069;font-weight:700}.chroma .kt{color:#078;font-weight:700}.chroma .na{color:#309}.chroma .nb{color:#366}.chroma .nc{color:#0a8;font-weight:700}.chroma .no{color:#360}.chroma .nd{color:#99f}.chroma .ni{color:#999;font-weight:700}.chroma .ne{color:#c00;font-weight:700}.chroma .nf{color:#c0f}.chroma .nl{color:#99f}.chroma .nn{color:#0cf;font-weight:700}.chroma .nt{color:#309;font-weight:700}.chroma .nv{color:#033}.chroma .dl,.chroma .s,.chroma .sa,.chroma .sb,.chroma .sc{color:#c30}.chroma .sd{color:#c30;font-style:italic}.chroma .s2{color:#c30}.chroma .se{color:#c30;font-weight:700}.chroma .sh{color:#c30}.chroma .si{color:#a00}.chroma .sx{color:#c30}.chroma .sr{color:#3aa}.chroma .s1{color:#c30}.chroma .ss{color:#fc3}.chroma .il,.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo{color:#f60}.chroma .o{color:#555}.chroma .ow{color:#000;font-weight:700}.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm,.chroma .cs{color:#09f;font-style:italic}.chroma .cs{font-weight:700}.chroma .cp,.chroma .cpf{color:#099}.chroma .gd{background-color:#fcc}.chroma .ge{font-style:italic}.chroma .gr{color:red}.chroma .gh{color:#030;font-weight:700}.chroma .gi{background-color:#cfc}.chroma .go{color:#aaa}.chroma .gp{color:#009}.chroma .gp,.chroma .gs,.chroma .gu{font-weight:700}.chroma .gu{color:#030}.chroma .gt{color:#9c6}.chroma .gl{text-decoration:underline}.chroma .w{color:#bbb}}@media(prefers-color-scheme:dark){.bg,.chroma{background-color:#0d1117;color:#c9d1d9}.chroma .err{color:#f85149}.chroma .lnlinks{color:inherit;outline:none;text-decoration:none}.chroma .lntd{border:0;margin:0;padding:0;vertical-align:top}.chroma .lntable{border:0;border-spacing:0;margin:0;padding:0}.chroma .hl{background-color:#ffc}.chroma .lnt{color:#64686c}.chroma .ln,.chroma .lnt{margin-right:.4em;padding:0 .4em;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:pre}.chroma .ln{color:#6e7681}.chroma .line{display:flex}.chroma .k{color:#ff7b72}.chroma .kc{color:#79c0ff}.chroma .kd,.chroma .kn{color:#ff7b72}.chroma .kp{color:#79c0ff}.chroma .kr,.chroma .kt{color:#ff7b72}.chroma .nc{color:#f0883e;font-weight:700}.chroma .no{color:#79c0ff;font-weight:700}.chroma .nd{color:#d2a8ff;font-weight:700}.chroma .ni{color:#ffa657}.chroma .ne{color:#f0883e;font-weight:700}.chroma .nf{color:#d2a8ff;font-weight:700}.chroma .nl{color:#79c0ff;font-weight:700}.chroma .nn{color:#ff7b72}.chroma .py{color:#79c0ff}.chroma .nt{color:#7ee787}.chroma .nv{color:#79c0ff}.chroma .l{color:#a5d6ff}.chroma .ld{color:#79c0ff}.chroma .s{color:#a5d6ff}.chroma .sa{color:#79c0ff}.chroma .sb,.chroma .sc{color:#a5d6ff}.chroma .dl{color:#79c0ff}.chroma .s2,.chroma .sd{color:#a5d6ff}.chroma .se,.chroma .sh{color:#79c0ff}.chroma .si,.chroma .sx{color:#a5d6ff}.chroma .sr{color:#79c0ff}.chroma .il,.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo,.chroma .s1,.chroma .ss{color:#a5d6ff}.chroma .o,.chroma .ow{color:#ff7b72;font-weight:700}.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm{color:#8b949e;font-style:italic}.chroma .cp,.chroma .cpf,.chroma .cs{color:#8b949e;font-style:italic;font-weight:700}.chroma .gd{background-color:#490202;color:#ffa198}.chroma .ge{font-style:italic}.chroma .gr{color:#ffa198}.chroma .gh{color:#79c0ff;font-weight:700}.chroma .gi{background-color:#0f5323;color:#56d364}.chroma .go,.chroma .gp{color:#8b949e}.chroma .gs{font-weight:700}.chroma .gu{color:#79c0ff}.chroma .gt{color:#ff7b72}.chroma .gl{text-decoration:underline}.chroma .w{color:#6e7681}}.littlefoot{--button-background-color:#949494;--button-text-color:#fff;--button-active-background-color:#3f3f3f;--button-active-text-color:#fff;--button-border-radius:8px;--button-border-radius:0.5rem;--button-height:16px;--button-height:1rem;--button-margin:0 1.6px;--button-margin:0 0.1rem;--button-padding:0 9.6px;--button-padding:0 0.6rem;--button-transition:background-color 0.25s ease,color 0.25s ease;--popover-background-color:#f5f5f5;--popover-text-color:#111;--popover-border:1px solid #949494;--popover-border-radius:8px;--popover-border-radius:0.5rem;--popover-max-height:15em;--popover-max-width:90%;--popover-horizontal-padding:22.4px;--popover-horizontal-padding:1.4rem;--popover-vertical-padding:9.6px;--popover-vertical-padding:0.6rem;--popover-shadow:0 0 8px rgba(0,0,0,.302);--popover-transform-origin:50% 0;--popover-transform:scale(0.1) translateZ(0);--popover-active-transform:scale(1) translateZ(0);--popover-transition:opacity 0.25s ease,transform 0.25s ease;--popover-width:22em;--popover-scroll-indicator-color:#3f3f3f;--popover-tooltip-size:8px;--popover-tooltip-size:0.5rem;position:relative}.littlefoot__button{background-color:var(--button-background-color);border:0;border:var(--button-border,0);border-radius:var(--button-border-radius);color:var(--button-text-color);cursor:pointer;display:inline-block;font-size:12px;font-size:var(--button-font-size,12px);font-size:.75rem;font-size:var(--button-font-size,.75rem);font-weight:400;font-weight:var(--button-font-weight,initial);height:var(--button-height);margin:var(--button-margin);padding:var(--button-padding);-webkit-text-decoration:none;text-decoration:none;transition:var(--button-transition);vertical-align:middle}.littlefoot__button.is-active,.littlefoot__button:active,.littlefoot__button:focus,.littlefoot__button:hover{background-color:var(--button-active-background-color);color:var(--button-active-text-color)}.littlefoot__button svg{float:left;height:4.8px;height:.3rem}.littlefoot__popover{border:var(--popover-border);border-radius:var(--popover-border-radius);box-shadow:var(--popover-shadow);margin:calc(var(--popover-tooltip-size) + var(--button-height))0;max-width:var(--popover-max-width);position:absolute;top:0;transform:var(--popover-transform);transform-origin:var(--popover-transform-origin);transition:var(--popover-transition);width:var(--popover-width);z-index:1}.littlefoot__popover.is-above{bottom:0;top:auto}.littlefoot__popover.is-active{transform:var(--popover-active-transform)}.littlefoot__wrapper{position:relative;z-index:1}.littlefoot__content,.littlefoot__wrapper{border-radius:var(--popover-border-radius)}.littlefoot__content{-webkit-overflow-scrolling:touch;background-color:var(--popover-background-color);color:var(--popover-text-color);font-family:initial;font-family:var(--popover-font-family,initial);font-size:medium;font-size:var(--popover-font-size,initial);font-style:normal;font-style:var(--popover-font-style,initial);font-weight:400;font-weight:var(--popover-font-weight,initial);line-height:normal;line-height:var(--popover-line-height,normal);max-height:var(--popover-max-height);overflow:auto;padding:var(--popover-vertical-padding)var(--popover-horizontal-padding)}.littlefoot__content img{max-width:100%}.littlefoot__content:focus{outline:none}.is-scrollable{--arrow-x:calc(var(--popover-horizontal-padding)*-1);--arrow-y:calc(var(--popover-vertical-padding)/2)}.is-scrollable .littlefoot__content:after{bottom:0;color:var(--popover-scroll-indicator-color);content:"\21E3";display:block;left:0;opacity:1;position:sticky;text-align:center;transform:translateX(var(--arrow-x))translateY(var(--arrow-y));transition:var(--popover-transition);width:var(--popover-horizontal-padding)}.is-scrollable.is-fully-scrolled .littlefoot__content:after{opacity:0}.littlefoot__tooltip{--tooltip-margin:calc(var(--popover-tooltip-size)*-1);background-color:var(--popover-background-color);border:var(--popover-border);box-shadow:var(--popover-shadow);height:calc(var(--popover-tooltip-size)*2);margin-left:var(--tooltip-margin);position:absolute;transform:rotate(45deg);width:calc(var(--popover-tooltip-size)*2)}.is-below .littlefoot__tooltip{top:var(--tooltip-margin)}.is-above .littlefoot__tooltip{bottom:var(--tooltip-margin)}@media(max-width:767px){.littlefoot__popover{border-radius:0;border-width:1px 0 0;bottom:0;left:0!important;margin:0;max-width:100%!important;position:fixed;right:0;top:auto;transform:translateY(100%);width:100%}.littlefoot__popover.is-active{transform:translateY(0)}.littlefoot__wrapper{border-radius:0;max-width:100%!important;transform:none}.littlefoot__tooltip{display:none}}@media not print{.littlefoot--print{display:none}}@media print{.littlefoot__button,.littlefoot__popover{display:none}}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}hr{border-top-width:1px;color:inherit;height:0}:root{--lightest-grey:#ececec;--light-grey:#b3b3b3;--mid-grey:#888;--dark-grey:#666;--smoke:#f2f2f2;--blue:#2980b9;--dark-blue:#20638f;--main-bg-color:#fcfcfc;--text-color:#2f353a;--link-color:var(--blue);--active-link-color:var(--dark-blue);--subheading-color:var(--mid-grey);--metadata-color:var(--light-grey);--blockquote-border-color:var(--lightest-grey);--code-background:var(--smoke);--footnote-border:var(--lightest-grey);--footer-color:var(--mid-grey);--logo-fill:var(--text-color)}@media(prefers-color-scheme:dark){:root{--main-bg-color:#181818;--text-color:#eee;--code-background:#2f353a;--link-color:#bb86fc;--active-link-color:#9d4cff}.littlefoot code,.littlefoot pre{background-color:var(--smoke)}}body{background-color:var(--main-bg-color);color:var(--text-color);padding:2em}a:link,a:visited{color:var(--link-color)}a:active,a:hover{color:var(--active-link-color)}h1,h2,h3,h4,h5{font-family:brandon-grotesque,sans-serif;font-weight:900}h1{font-size:1.8em;margin-bottom:0}h1 a:active,h1 a:hover,h1 a:link,h1 a:visited{color:var(--text-color);text-decoration:none}h1 a:hover{text-decoration:underline}figure h4{font-family:inherit;font-weight:400}figcaption,figure h4{font-style:italic}blockquote{border-left:4px solid var(--blockquote-border-color);margin-left:0;padding-left:1.1em}p{-webkit-margin-before:1em;-webkit-margin-after:1em;margin-block-end:1em;margin-block-start:1em}code,pre{background-color:var(--code-background)}sub,sup{position:static}.highlight pre{overflow-x:auto}figure{margin:1em 0}figure.half-wide img,img.half-wide{max-width:50%}figure.solid-border img{border:1px solid var(--text-color)}.logo{fill:var(--logo-fill);height:4em;width:4em}header[role=banner]{text-align:center}header[role=banner] h1{font-size:3em}header[role=banner] .subheading{color:var(--subheading-color);font-size:1.07em;font-style:italic;margin:.3em 0}nav{font-family:brandon-grotesque,sans-serif;font-size:1em;font-weight:900;margin:1.2em 0 3em;text-transform:uppercase}nav ul{margin:0;padding:0}nav ul li{display:inline-block;padding-right:1rem}nav ul li:last-child{padding-right:0}.page>header div{color:var(--subheading-color);padding-bottom:2em}.page>header h1{font-size:2.5em}.page>header p{margin-top:0}footer[role=contentinfo]{color:var(--footer-color);font-size:.9em;padding:2em 0}footer[role=contentinfo] p{margin-bottom:.7em}.icon-list a{display:inline-block;padding:0 .2em}.link-post h1{font-size:1.6em}.link-post h1 a:after{content:" ↬"}article .footnotes hr{border:1px dotted var(--footnote-border)}article .metadata{color:var(--metadata-color);font-size:.9em;font-style:italic;margin-top:.5em}article .metadata a:active,article .metadata a:hover,article .metadata a:link,article .metadata a:visited{color:var(--metadata-color);text-decoration:none}article .metadata a:hover{text-decoration:underline}article{margin-bottom:6em}.tag-meta{font-size:.8em}.tag-legend{color:var(--footer-color);font-size:.9em;font-style:italic;margin-top:.5em}.intro{font-size:1.2em;padding-bottom:2em}.two-column{-moz-column-count:2;column-count:2}.spaced-list li{padding:.2em 0}.book-list img{max-width:20em}@media only screen and (min-width:1024px){header[role=banner],main[role=main]{padding-left:10em;width:55em}header[role=banner]{text-align:left}}30 </style>31 <meta charset="utf-8">32 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">33 <title>34 A Map Tile Server on CentOS - Grizzlebit35 </title>36 <meta content="width=device-width,minimum-scale=1" name="viewport">37 <meta content name="description">38 <meta content="Ray Grasso" name="author">39 <meta content="Grizzlebit" property="og:site_name">40 <meta content="A Map Tile Server on CentOS - Grizzlebit" property="og:title">41 <meta content="article" property="og:type">42 <meta content="" property="og:image">43 <meta content="" name="twitter:image">44 <meta content="summary" name="twitter:card">45 <meta content="Grizzlebit" name="twitter:site">46 <meta content="A Map Tile Server on CentOS - Grizzlebit" name="twitter:title">47 <meta content="@grassdog" name="twitter:creator">48 </head>49 <body>50 <header role="banner">51 <div>52 </div>53 <h1>54 <a>55 Grizzlebit56 </a>57 </h1>58 <p class="subheading">59 Bytes that get stuck in your teeth.60 </p>61 <nav>62 <ul>63 <li>64 <a>65 Posts66 </a>67 </li>68 <li>69 <a>70 Links71 </a>72 </li>73 <li>74 <a>75 Tags76 </a>77 </li>78 <li>79 <a>80 Now81 </a>82 </li>83 </ul>84 </nav>85 </header>86 <main role="main">87 <div class="page">88 <article>89 <header class="full-post">90 <h1>91 <a>92 A Map Tile Server on CentOS93 </a>94 </h1>95 </header>96 <div>97 <p>98 Do you need to build a99 <a>100 map tile101 </a>102 server that uses103 <a>104 OpenStreetMap’s mod_tile105 </a>106 for CentOS 6.4? You’re in luck!107 </p>108 <p>109 <a>110 Halvard111 </a>112 and I put together113 <a>114 a set of Ansible playbooks115 </a>116 that builds one for you.117 </p>118 <p>119 Enjoy.120 </p>121 </div>122 <div class="metadata">123 <a>124 <time datetime="2015-03-18T09:37:00+08:00">125 Mar 18, 2015126 </time>127 </a>128 ∙129 <a>130 Programming131 </a>132 </div>133 </article>134 <nav class="pagination">135 <ul>136 <li>137 <a>138 More Posts139 </a>140 </li>141 </ul>142 </nav>143 </div>144 <footer role="contentinfo">145 <p>146 <a>147 Posts148 </a>149 •150 <a>151 Links152 </a>153 •154 <a>155 Tags156 </a>157 •158 <a>159 Now160 </a>161 •162 <a>163 About164 </a>165 •166 <a>167 Feeds168 </a>169 </p>170 <p class="icon-list">171 <a rel="me" title="Email">172 </a>173 <a rel="me" title="Mastodon">174 </a>175 <a rel="me" title="Bluesky">176 </a>177 <a rel="me" title="Threads">178 </a>179 <a rel="me" title="Github">180 </a>181 <a rel="me" title="Linkedin">182 </a>183 </p>184 <p>185 © 2004 – 2023186 <a>187 Ray Grasso188 </a>189 </p>190 </footer>191 </main>192 </body>193</html>194