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>3 <head>4 <style>5 @font-face {6 font-family: 'Open Sans';7 font-style: normal;8 font-weight: 300;9 font-stretch: normal;10 font-display: swap;11 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4n.ttf) format('truetype');12}13@font-face {14 font-family: 'Open Sans';15 font-style: normal;16 font-weight: 400;17 font-stretch: normal;18 font-display: swap;19 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf) format('truetype');20}21@font-face {22 font-family: 'Open Sans';23 font-style: normal;24 font-weight: 700;25 font-stretch: normal;26 font-display: swap;27 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf) format('truetype');28}29 30 31 32*{box-sizing:border-box}body,html{font-family:"Open Sans",sans-serif;font-size:16px;color:#333;padding:0;margin:0;line-height:1.5em}.container{width:100%;max-width:600px;margin-left:auto;margin-right:auto;padding:40px 12px 0 40px}a,a:active,a:hover,a:link,a:visited{color:#0086e3;text-decoration:none}.info{margin-bottom:40px;border-left:8px solid #6dcff6;padding:14px 0 14px 32px;margin-left:-40px}.links{margin-bottom:40px}h1.logo{width:180px;height:41px;background:url(/e9cd6e460181503349bf8472217976471e064cf1/logo.png);background-size:100%;text-indent:-999999px;margin:0;margin-bottom:20px}h2{font-size:16px;font-weight:400;margin:0;margin-bottom:.2em}p{margin:0;margin-bottom:1em}p:last-child{margin-bottom:0}ul{padding:0;margin:0;list-style-type:none}ul li{margin-bottom:1em}33 </style>34 <title>35 Heyevent.com36 </title>37 <meta content="width=device-width, initial-scale=1" name="viewport">38 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">39 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">40 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">41 </head>42 <body>43 <div class="container" style="height: auto !important;">44 <h1 class="logo">45 Heyevent46 </h1>47 <div class="info">48 <p>49 Heyevent was at one point the world's most popular event recommendation service with 600k+ registered users. We fetched events from Facebook and sent out weekly personal recommendations for upcoming events.50 </p>51 <p>52 Unfortunately, due to newly imposed limitations of the Facebook API, as well as expensive hosting costs and dwindling traffic, 53 we've had to close down Heyevent and move on to new projects. Below are links to some other projects.54 </p>55 </div>56 <div class="links">57 <ul>58 <li>59 <h2>60 <a>61 Roni62 </a>63 </h2>64 <p>65 A fun mobile word game for iOS and Android.66 </p>67 </li>68 <li>69 <h2>70 <a>71 Locust:72 </a>73 <a>74 Load testing tool75 </a>76 </h2>77 <p>78 Locust is a widely used load testing tool. It's also Open Source.79 </p>80 </li>81 <li>82 <h2>83 <a class="link">84 Heyman.info85 </a>86 </h2>87 <p>88 My personal website.89 </p>90 </li>91 <li>92 <h2>93 <a>94 Hotel Websites95 </a>96 </h2>97 <p>98 Comprehensive guides to the best99 <a>100 boutique hotels101 </a>102 ,103 <a>104 luxury hotels105 </a>106 ,107 <a>108 spa hotels109 </a>110 and111 <a>112 bed & breakfasts113 </a>114 around the world.115 </p>116 </li>117 </ul>118 </div>119 <div>120 <!-- Heyevent, Venue page, Top -->121 <ins class="adsbygoogle" data-ad-client="ca-pub-6357117255813211" data-ad-format="auto" data-ad-slot="[PHONE REDACTED]" data-adsbygoogle-status="done" data-full-width-responsive="true" style="display: block; height: 0px;">122 <div aria-label="Advertisement" id="aswift_1_host" style="border: none; height: 0px; width: 548px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block; overflow: hidden; opacity: 0;" tabindex="0" title="Advertisement">123 </div>124 </ins>125 </div>126 </div>127 <!-- Global site tag (gtag.js) - Google Analytics -->128 <ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: none !important;">129 <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">130 </div>131 </ins>132 </body>133</html>134