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

root1002.html

1002.html121 linesDownload Raw Back to root

1<!DOCTYPE html>2<html lang="en" xmlns="">3 <head>4  <meta charset="utf-8">5  <title>6   DisplayCabinets2Go - We Have Some Exciting News!7  </title>8  <style>9   body {10            font: 500 18px/1.5 'Open Sans', sans-serif;11        }12 13        h1 {14            font-size: 24px;15        }16 17        a {18            text-decoration: none;19            font-weight: bold;20        }21 22        img {23            max-width: 100%;24            height: auto;25        }26 27        * {28            box-sizing: border-box;29        }30 31        .btn-primary {32            font: 18px/1.43 'Open Sans', sans-serif;33            color: #fff;34            background: #343a40;35            border: 1px solid #343a40;36            border-radius: 4px;37            display: inline-block;38            padding: 6px 12px;39            margin-bottom: 0;40            cursor: pointer;41            user-select: none;42        }43 44            .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {45                background-color: #343a40;46                border-color: #343a40;47            }48 49        @media(min-width:576px) {50            .body-wrap {51                position: absolute;52                left: 50%;53                top: 50%;54                width: 100%;55                max-width: 788px;56                transform: translate(-50%, -50%);57            }58        }59 60        @media (max-width:575px) {61            .body-wrap {62                padding: 14px;63            }64        }65  </style>66 </head>67 <body>68  <div class="body-wrap">69   <div>70    <img alt="site-logo" height="50" id="site-logo" src="rick.jpg" style="width: 200px; margin-bottom: 30px; max-width: 100%; height: auto; " width="200">71    <h1>72     We Have Some Exciting News!73    </h1>74   </div>75   <div>76    <div class="content-wrap">77     <p>78      <strong class="site-name">79       DisplayCabinets2Go80      </strong>81      has joined the Displays2go family!82     </p>83     <p>84      Displays2go has all of the same industry-leading products you'd find on this site, and much more! We will continue to put you first with our responsive and dedicated customer service.85     </p>86    </div>87   </div>88   <div class="row" id="product-link-wrap" style="display: none; clear: both; margin-top: 20px;">89    <p>90     It looks like you were trying to view a product. Great news!91    </p>92    <p>93     <a class="btn-primary" href id="product-link">94      View this Product on Displays2go.com95     </a>96    </p>97   </div>98   <div>99    <p>100     Get to your favorite items right away by browsing a similar selection of products on Displays2go.com.101    </p>102    <p>103     <a class="btn-primary" id="category-link">104      Shop this Category on Displays2go.com105     </a>106    </p>107   </div>108   <div>109    <p>110     Need more information?111    </p>112    <p>113     <a class="btn-primary" id="faq-link">114      FAQs115     </a>116    </p>117   </div>118  </div>119 </body>120</html>121