Team Ai
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
22likes2.8kdownloads
14881.html85 linesDownload Raw Back to root
1<!DOCTYPE html>2<html>3 <head>4  <style>5   *{margin:0;padding:0;box-sizing:border-box}html{background-color:#39424e;font-family:didact gothic,sans serif;font-size:16px}body{font-size:16px;font-family:didact gothic,sans serif;color:#fff;line-height:2rem;letter-spacing:1.5px;text-shadow:none;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center;opacity:1}h1,h2,h3{margin-bottom:.5em;text-align:center;font-family:didact gothic,sans-serif;opacity:.6}li{opacity:.8}li a{opacity:.9}ul{list-style-type:none}p{display:inline;opacity:.8}a{color:#ccc;text-decoration:none;border-bottom:2px solid #ccc;-webkit-transition:.5s ease;transition:.5s ease}a:hover{color:#fff;font-style:none}a:active{color:#ccc}button{padding:20px;border:0;border-radius:5px;background:#fff}button:hover{box-shadow:5px 5px #111}hr{margin:1rem 0;background-color:transparent;width:50%;border-style:solid;border-width:1px;opacity:.3}.wrap{margin:0 auto;margin-top:6rem;width:45%}@media screen and (max-width:736px){.wrap{padding:1rem;width:100%}}.tag-container{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-pack:start;justify-content:flex-start;-webkit-box-align:center;align-items:center}.tag{background-color:transparent;position:relative;bottom:0}.section{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:start;align-items:flex-start}.bottom-menu{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;padding-top:3rem;text-align:center}.footer{width:100%;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;text-align:center;background-color:transparent;position:relative;bottom:0;padding:3rem 1rem;font-family:didact gothic,sans serif;font-size:1rem;line-height:1em;opacity:.8}.footer a{border-bottom:none;display:contents}#splash{margin:auto 0;height:100vh;width:45%;overflow:hidden}@media screen and (max-width:736px){#splash{width:90%}}.big-link{font-family:didact gothic,sans serif;font-size:3rem;font-weight:300;margin-bottom:2rem;line-height:1.5em}#title{margin-top:3rem;font-family:didact gothic,sans serif;font-size:2rem;line-height:3rem;margin-bottom:2rem}#content{margin:2rem 0;line-height:2em;letter-spacing:2px}#content div{width:100%;height:100%;margin-bottom:1em}#content h1,#content h2,#content h3{margin:1em 0;text-align:left}#content p{margin-bottom:1em;line-height:1.8;letter-spacing:1.5px;opacity:.8}#content .highlight{width:100%}#content pre{line-height:2rem;border-radius:3px;padding:1rem;overflow-x:auto;background-color:#000004;width:100%;margin-bottom:1em}#content pre>code{border:none}#content code{font-size:.9rem;font-family:source code pro,monospace;padding:.1rem;border-radius:3px;border:1px solid #ccc}#content img{width:100%;max-width:100%;display:block;margin:2rem auto;opacity:1}#content blockquote{background-color:#ccc;color:#39424e;padding:2rem;margin:2rem 1rem;border-radius:3px}#content blockquote a{color:#111}#content blockquote ul{margin-top:1rem}#content blockquote li{list-style:disc}#content table{width:100%;border-collapse:collapse;margin:1rem 0;overflow-x:auto}#content table th{font-size:.9rem}#content table td,#content table th{padding:2px 5px;text-align:center;border:1px solid #ccc}#content li{line-height:2;padding-left:.4rem}#content li:last-child{margin-bottom:1rem}#content ul{list-style:disc outside;padding-left:2rem}#content ol{list-style:decimal outside;padding-left:2rem}#content .gist{width:100%}#content .gist td,#content .gist th{text-align:left;border:0}#content .gist .gist-meta{background-color:transparent;color:#fff}#content .gist .gist-meta a{color:#fff}.tag{padding:.25em 0;margin-right:.5em;opacity:.6}.grid{display:grid;grid-gap:20px;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));grid-auto-rows:400px}@media screen and (max-width:736px){.grid{grid-template-columns:repeat(auto-fit,minmax(100%,1fr))}}.grid>div{background-color:transparent;overflow:hidden}.grid>div>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;opacity:1}.grid>div>a>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;opacity:1}.go-left{-webkit-box-pack:start;justify-content:flex-start;-webkit-box-align:start;align-items:flex-start}.go-right{-webkit-box-pack:end;justify-content:flex-end;-webkit-box-align:end;align-items:flex-end}.go-center{-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}6 7 8@font-face {9  font-family: 'Didact Gothic';10  font-style: normal;11  font-weight: 400;12  src: url(https://fonts.gstatic.com/s/didactgothic/v20/ahcfv8qz1zt6hCC5G4F_P4ASlUuYow.ttf) format('truetype');13}14  </style>15  <meta charset="utf-8">16  <meta content="chrome=1" http-equiv="X-UA-Compatible">17  <meta content="True" name="HandheldFriendly">18  <meta content="320" name="MobileOptimized">19  <meta content="width=device-width, initial-scale=1.0" name="viewport">20  <meta content="no-referrer" name="referrer">21  <title>22   Securing WebMail (if only just a little bit) - unflyingobject.com23  </title>24  <meta content="summary" name="twitter:card">25  <meta content="Securing WebMail (if only just a little bit)" name="twitter:title">26  <meta content="By default, the squirrelmail conf only allows plaintext, but you don't have to enable that just because of your webmail users. To fix it, just do:27sudo /etc/squirrelmail/config/config.pl28And set Server Settings &gt; Update IMAP Settings &gt; Authentication type &gt; cram-md5. There are a bunch of other useful settings there that should be checked as well. This must be mentioned in the docs as well." name="twitter:description">29  <meta content="Securing WebMail (if only just a little bit)" property="og:title">30  <meta content="By default, the squirrelmail conf only allows plaintext, but you don't have to enable that just because of your webmail users. To fix it, just do:31sudo /etc/squirrelmail/config/config.pl32And set Server Settings &gt; Update IMAP Settings &gt; Authentication type &gt; cram-md5. There are a bunch of other useful settings there that should be checked as well. This must be mentioned in the docs as well." property="og:description">33  <meta content="article" property="og:type">34  <meta content="" property="og:url">35  <meta content="2006-11-19T18:15:00+00:00" property="article:published_time">36  <meta content="2006-11-19T18:15:00+00:00" property="article:modified_time">37  <title>38   Securing WebMail (if only just a little bit)39  </title>40 </head>41 <body>42  <div class="wrap">43   <div class="section" id="title">44    Securing WebMail (if only just a little bit)45   </div>46   <div class="section" id="content">47    Sun Nov 19, 2006 &middot; 65 words48    <hr>49    <p>50     By default, the squirrelmail conf only allows plaintext, but you don't have to enable that just because of your webmail users. To fix it, just do:51    </p>52    <p>53     <code>54      sudo /etc/squirrelmail/config/config.pl55     </code>56    </p>57    <p>58     And set Server Settings &gt; Update IMAP Settings &gt; Authentication type &gt; cram-md5. There are a bunch of other useful settings there that should be checked as well.59    </p>60   </div>61   <div class="section bottom-menu">62    <hr>63    <p>64     <a>65      back66     </a>67     &middot;68     <a>69      essays70     </a>71     &middot;72     <a>73      credits74     </a>75     &middot;76     <a>77     </a>78    </p>79   </div>80   <div class="section footer">81   </div>82  </div>83 </body>84</html>85