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-US">3 <head>4 <title>5 Video Conferencing, Web Conferencing, Online Meetings, Screen Sharing - Zoom6 </title>7 <!--customize landing page title-->8 <meta content="noindex" name="robots">9 <meta content="IE=edge,Chrome=1" http-equiv="X-UA-Compatible">10 <meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport">11 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">12 <meta content="origin-when-cross-origin" name="referrer">13 <meta content="zoom, zoom.us, video conferencing, video conference, online meetings, web meeting, video meeting, cloud meeting, cloud video, group video call, group video chat, screen share, application share, mobility, mobile collaboration, desktop share, video collaboration, group messaging" name="keywords">14 <meta content="Zoom unifies cloud video conferencing, simple online meetings, and cross platform group chat into one easy-to-use platform. Our solution offers the best video, audio, and screen-sharing experience across Zoom Rooms, Windows, Mac, iOS, Android, and H.323/SIP room systems." name="description">15 <style>16 html, body {17 margin: 0px;18 font-family: sans-serif;19 height: 100%20 }21 .container {22 display: table;23 height: 100%;24 width: 100%;25 background-image: url(""); /*customize background image*/26 background-size: cover;27 }28 .content-body {29 display: table-cell;30 vertical-align: middle;31 }32 a {33 text-decoration: none;34 color: #2470cc;35 }36 37 a:hover {38 text-decoration: none;39 }40 .content {41 /*customize position*/42 padding: 40px;43 max-width: 450px;44 margin-left: 45%;45 }46 h1 {47 padding-top: 20px;48 padding-bottom: 20px;49 font-weight: normal;50 }51 p {52 font-size: 17px;53 }54 .button {55 width: 80px;56 background-color: #2D8CFF; /*customize button color */57 border-color: #2D8CFF;58 padding: 12px 20px;59 display: inline-block;60 text-align: center;61 margin: 10px 0;62 transition: .3s ease;63 }64 .button:hover {65 background-color: rgb(45, 165, 255); /*customize button color */66 }67 .btn-text {68 color: white; /*customize button font color */69 font-size: 17px;70 }71 .made-with {72 padding-top: 15px;73 padding-bottom: 0;74 margin-bottom: 0;75 }76 .made-with a {77 text-decoration: underline;78 }79 .row > div {80 display: inline-block;81 vertical-align: middle;82 }83 .right {84 margin-left: 15px;85 }86 .right > span{87 display: block;88 }89 90 .zoom-logo {91 width: 140px;92 height: 31.5px;93 }94 .footer {95 display: table-row;96 height: 60px;97 text-align: center;98 background-color: rgba(255, 255, 255, 0.4);99 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);100 vertical-align: middle;101 }102 .footer a {103 padding-right: 40px;104 width: 99px;105 height: 19px;106 opacity: 0.6;107 font-size: 14px;108 font-weight: normal;109 font-style: normal;110 font-stretch: normal;111 line-height: normal;112 letter-spacing: normal;113 color: #232333 !important;114 line-height: 60px;115 }116 .footer a:hover, .footer a:active,.footer a:focus{117 text-decoration: underline;118 }119 120 @media screen and (max-width: 768px) {121 h1 {122 font-size: 27px;123 }124 .row {125 margin-bottom: 15px;126 }127 .row > div {128 display: block;129 }130 131 .footer {132 padding-bottom: 15px;133 height: 40px;134 }135 136 .footer a {137 display: block;138 width: 100%;139 height: inherit;140 padding-left: 0;141 padding-right: 0;142 }143 144 .content {145 margin: auto;146 }147 148 .content > div, .made-with {149 text-align: center;150 }151 }152 </style>153 </head>154 <body>155 <div class="container">156 <div aria-label="main content" class="content-body" role="main">157 <div class="HiddenText">158 <a id="the-main-content" tabindex="-1">159 </a>160 </div>161 <div class="content">162 <!--customize position-->163 <div class="row">164 <img alt="Zoom Logo" class="zoom-logo" src="rick.jpg">165 <!--customize company logo-->166 </div>167 <div class="row">168 <h1>169 Video Conferencing170 </h1>171 </div>172 <div class="row">173 <div class="left">174 <a class="button">175 <span class="btn-text">176 Join177 </span>178 </a>179 </div>180 <div class="right">181 <span>182 Connect to a meeting in progress183 </span>184 </div>185 </div>186 <div class="row">187 <div class="left">188 <a class="button">189 <span class="btn-text">190 Host191 </span>192 </a>193 </div>194 <div class="right">195 <span>196 Start a meeting197 </span>198 </div>199 </div>200 <div class="row">201 <div class="left">202 <a class="button">203 <span class="btn-text">204 Sign in205 </span>206 </a>207 </div>208 <div class="right">209 <span>210 Configure your account211 </span>212 </div>213 </div>214 <p class="made-with">215 Made with216 <a>217 Zoom218 </a>219 </p>220 </div>221 </div>222 <div class="footer">223 <a>224 Getting Started225 </a>226 <a>227 Download Client228 </a>229 <a target="_blank">230 Zoom Support231 </a>232 </div>233 </div>234 </body>235</html>236