Datasetpublic

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.

sourceHugging Faceodc-byupdated 3y agoView on Hugging Face

22likes1.8kdownloads

root1895.html

1895.html160 linesDownload Raw Back to root

1<!DOCTYPE html>2<html lang="en">3 <head>4  <style>5   @font-face {6    font-family : main;7    font-weight : bold;8    src: url('fonts/LiberationSerif-Regular-webfont.eot');9    src: url('fonts/LiberationSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),10         url('fonts/LiberationSerif-Regular-webfont.woff') format('woff'),11         url('fonts/LiberationSerif-Regular-webfont.ttf') format('truetype'),12         url('fonts/LiberationSerif-Regular-webfont.svg#liberation_serifregular') format('svg');13    font-weight: normal;14    font-style: normal;15}16 17@font-face {18    font-family : mordscript;19    src: url('fonts/bilboswashcaps-regular-webfont.eot');20    src: url('fonts/bilboswashcaps-regular-webfont.eot?#iefix') format('embedded-opentype'),21         url('fonts/bilboswashcaps-regular-webfont.woff') format('woff'),22         url('fonts/bilboswashcaps-regular-webfont.ttf') format('truetype'),23         url('fonts/bilboswashcaps-regular-webfont.svg#bilbo_swash_capsregular') format('svg');24    font-weight: bold;25    font-style: normal;    }    26 27* {margin:0; padding:0}28 29p, h1, h2 {30    margin-top:0.25em;31}32 33div[role] {34    margin-top:1.25em;35}36 37body {38    background-color: black; 39    color : #999; 40    font-size: 26px;41    font-family: main, sans-serif;42}43h1, h2, h3, h4, h5, h6, a {44    font-family: mordscript, cursive; 45    color: crimson;46}47a {48    text-decoration : none;49}50#site-title h1 {51    margin-bottom : 0;52}53#site-description { 54    margin : 0 auto;55    font-size : 20px;56}57div[role~=header] {58    border-bottom: thick solid #3C3C3C;59}60div[role~=main] {61}62div[role~=main] p:last-child {63    text-align:right; 64    font-variant: small-caps;65}66@media (min-width: 980px) {67    div[role] {68        width:980px; 69        margin-left: auto;70        margin-right: auto;71    }72}73@media (min-width: 500px) and (max-width: 979px) {74    div[role] {75        margin: 1em;76    }77}78 79@media (max-width: 499px) {80    div[role] {81        margin: 0.5em;82    }83}84 85div[role~=navigation] {86    position:relative87}88#before {89    float:left90}91#after {92    float:right93}94  </style>95  <meta charset="utf-8">96  <meta content="width=device-width, initial-scale=1.0" name="viewport">97  <title>98   Mord Carrot clan99  </title>100 </head>101 <body>102  <div role="header">103   <div id="site-title">104    <h1>105     <a rel="home" title="Mord Blog">106      Mord Blog107     </a>108    </h1>109    <p id="site-description">110     I am Mord. I serve my lord Kord with my greatsword.111    </p>112   </div>113  </div>114  <div role="main">115   <h2>116    Carrot clan117   </h2>118   <p>119    As we walked, Air and Wander told us fantastic tales of the great dwarven carrot clan. They dig deep for gems and other stuff.120   </p>121   <p>122    All Grins is apparently not from carrots. He from Hardly Grins.123   </p>124   <p>125    For Napkin is getting a little frisky with wolf Low Show. I think For Napkin is a little bored with us.126   </p>127   <p>128    We not have any more drink. And while a wolf is nice and all, not so much a dragon, me thinks.129   </p>130   <p>131    We had to go single file along a path. Then Barrel and Air stopped.132   </p>133   <p>134    Well, guard refused to let Pitter go. Me stay with Pitter to the bitter end.135   </p>136   <p>137    I asked if he wanted to wrestle. He got this glint in his eye.138   </p>139   <p>140    I see our people approach with a rather tallish dwarf. He looks important.141   </p>142   <p>143    Mords of Wisdom: People not welcome their enemy's people.144   </p>145  </div>146  <div role="navigation">147   <div id="before">148    <a>149     &mapstoleft; A new day, a new strength150    </a>151   </div>152   <div id="after">153    <a>154     A Brick Cometh &mapsto;155    </a>156   </div>157  </div>158 </body>159</html>160