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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">2<html xmlns="">3 <head>4 <style>5 /*6Design by Free CSS Templates7http://www.freecsstemplates.org8Released for free under a Creative Commons Attribution 2.5 License9*/10 11/* Elements */12 13 {background-color: green; }14 15body {16 margin: 20px 0;17 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;18 font-size: 12px;19 color: #333333;20}21body {22 background-color: #FFF;23}24h1 {25}26 27h2, h3, h4, h5, h6 {28 color: #2582A4;29}30 31p, ol, ul {32 text-align: justify;33}34 35strong {36 font-weight: bold;37 color: #808080;38}39 40a {41 color: #87A019;42}43 44a:hover {45 text-decoration: none;46 color: #2582A4;47}48 49.box {50 margin-bottom: 0;51 padding-bottom: 0;52 background: url(images/img07.gif) repeat-x left bottom;53}54 55.bottom {56 display: block;57 margin-bottom: 0;58 padding-bottom: 10px;59 background: url(images/img08.gif) no-repeat left bottom;60}61 62.image {63 float: left;64 margin: 3px 0 0 0;65 padding: 0;66}67 68.indent {69 margin-left: 125px;70}71 72/* Header */73 74#header {75 width: 928px;76 height: 37px;77 margin: 0 auto;78 background: #BECF74 url(images/img01.gif) repeat-x;79 border-bottom: 3px solid #FFFFFF;80}81 82/* Menu */83 84#menu {85 float: left;86 width: 735px;87 height: 37px;88 margin: 0;89 padding: 0 0 0 10px;90 list-style: none;91 background: url(images/img02.gif) no-repeat;92}93 94#menu li {95 display: inline;96}97 98#menu a {99 display: block;100 float: left;101 height: 27px;102 text-transform: none;103 text-decoration: none;104 font-size: 12.5px;105 font-weight: bolder;106 color: #FFFFFF;107 padding-top: 10px;108 padding-right: 9px;109 padding-bottom: 0px;110 padding-left: 10px;111}112 113#menu a:hover {114 background: #A4B74C url(images/img04.gif) repeat-x;115}116 117/* Search */118 119#search {120 float: right;121 height: 28px;122 margin: 0;123 padding: 9px 25px 0 0;124 background: url(images/img03.gif) no-repeat right top;125}126 127#search fieldset {128 display: inline;129 margin: 0;130 padding: 0;131 border: none;132}133 134#input1 {135 width: 90px;136 padding: 2px 5px;137 background: #FFFFFF;138 border: none;139}140 141#input2 {142 height: 20px;143 background: #87C4DB;144 border: none;145 text-transform: lowercase;146 font-size: 10px;147 font-weight: bold;148 color: #FFFFFF;149}150 151/* Content */152 153#content {154 width: 928px;155 margin: 0 auto;156}157 158#colOne {159 float: left;160 width: 238px;161 background: url(images/img05.gif) repeat-x;162}163 164#colOne h3 {165 padding: 0 20px;166}167 168#colOne ul {169 margin-left: 0;170 padding-left: 20px;171 padding-right: 20px;172 list-style: none;173}174 175#colOne li {176 padding: 5px 0;177 border-top: 1px solid #EFEFEF;178}179 180#colOne li.first {181 border: none;182}183 184#colTwo {185 float: right;186 width: 617px;187 padding: 30px 40px 0 30px;188 background: url(images/img09.gif) repeat-x;189}190 191#colTwo h2 {192 margin-top: 0;193 font-size: 26px;194}195 196#colTwo h3 {197 margin-bottom: 0;198 font-size: 18px;199}200 201#colTwo h4 {202 margin-top: 0;203 font-size: 11px;204 font-weight: normal;205}206 207#colTwo .box {208 margin: 0 -30px 30px -20px;209 padding: 0 30px 0 20px;210}211 212#colTwo .bottom {213 margin: 0 0 20px -20px;214 padding: 0 0 20px 20px;215}216 217/* Logo */218 219#logo {220 height: 150px;221 background: url(images/img06.gif) no-repeat;222}223 224#logo h1, #logo h2, #logo a {225 margin: 0;226 padding: 0;227 text-decoration: none;228 text-transform: lowercase;229 text-align: center;230 color: #FFFFFF;231}232 233#logo h1 {234 padding-top: 25px;235 font-size: 34px;236}237 238#logo h2 {239 margin-top: -5px;240 font-size: 12px;241}242 243/* Footer */244 245#footer {246 clear: both;247 width: 928px;248 margin: 0 auto;249 padding-top: 40px;250 background: url(images/img11.gif) repeat-x;251}252 253#footer p {254 margin: 0;255 text-align: center;256 font-size: 12px;257}258 </style>259 <title>260 Centre for Obesity Support - We operate Bariatric Surgery, Gastric Bypass Surgery, Laparoscopic surgery in India.261 </title>262 <meta content="Bariatric Surgery in India, Gastric Bypass Surgery, Medical Tourism in India, Laparoscopic surgery in India, Weight loss surgery, Anti Obesity surgery, Gastric Banding, Lap Sleeve Gastrectomy, Bariatric Surgeons in India, Metabolic surgery, Diabetic Surgery" name="keywords">263 <meta content="The most suitable option for morbid obesity today is Bariatric surgery which along with weight loss manages the coexisting problems like diabetes, hypertension, arthritis other co-morbid conditions associated with the morbid obesity. However, the overall care of patients undergoing Bariatric Surgery requires a multidisciplinary program which addresses both perioperative care & long term management. Hence we believe in providing a more holistic approach with an overall team management inclusive of a Physician, Anaesthetist, Nutritionist, Endocrinologist & a Counselor to achieve optimum results. We also believe that Obesity and its treatment requires tremendous support, support that goes beyond the boundaries of what we as doctors can provide. Hence we have initiated an obesity support group called Center for Obesity Support." name="description">264 <meta content="Amit Chawla" name="author">265 <meta content="obesenomore.org" name="copyright">266 <meta content="Global" name="distribution">267 <meta content="All" name="robots">268 <meta content="General" name="rating">269 <style type="text/css">270 <!--271.style1 {color: #87A019}272.style3 {color: #2582A4}273.style6 {font-size: 10px}274body,td,th {275 font-size: 12px;276 color: #333333;277}278.style7 {font-size: 9px}279.style8 {color: #87A019; font-size: 9pt; }280.style9 {font-size: 9pt}281-->282 </style>283 </head>284 <body>285 <div id="header">286 <ul id="menu">287 <li>288 <a accesskey="1" title>289 Home290 </a>291 </li>292 <li>293 <a accesskey="2" title>294 About Us295 </a>296 </li>297 <li>298 <a accesskey="3" title>299 Where To Begin300 </a>301 </li>302 <li>303 <a accesskey="4" title>304 Bariatrics305 </a>306 </li>307 </ul>308 <form action="JavaScript:OnSearchSubmit()" id="search" name="form_search">309 <fieldset>310 <input name="sw" size="12" type="text">311 <input id="input2" name="input2" type="submit" value="Search">312 </fieldset>313 </form>314 </div>315 <div id="content">316 <div id="colOne">317 <div id="logo">318 <h1>319 <img alt="Obese no More" height="81" src="rick.jpg" width="213">320 </h1>321 </div>322 <div class="box">323 <h3>324 About Us325 </h3>326 <ul class="bottom">327 <li class="style1">328 <img alt height="8" src="rick.jpg" width="8">329 330 <span class="style7">331 <span class="style9">332 <a>333 About COS334 </a>335 </span>336 </span>337 </li>338 <li class="style8">339 <img alt height="8" src="rick.jpg" width="8">340 341 <a>342 Mission Statement343 </a>344 </li>345 <li class="style8">346 <img alt height="8" src="rick.jpg" width="8">347 348 <a>349 Vision Statement350 </a>351 </li>352 <li class="style8">353 <img alt height="8" src="rick.jpg" width="8">354 355 <a>356 About Dr. Lakdawala357 </a>358 </li>359 </ul>360 </div>361 </div>362 <div id="colTwo">363 <h2>364 <span class="style6">365 Welcome to Obesenomore.org366 </span>367 <img alt height="130" src="rick.jpg" width="576">368 </h2>369 <div class="box">370 <table align="right" border="0" width="200">371 <tbody>372 <tr>373 <td>374 <a>375 + Larger Font376 </a>377 |378 <a>379 + Smaller Font380 </a>381 </td>382 </tr>383 </tbody>384 </table>385 <h3>386 About Cos387 </h3>388 <p align="justify">389 Morbid obesity may kill but living with it is no easy task either. Anyone suffering from morbid obesity is not only vulnerable to various co-morbidities like diabetes, High blood pressure / Heart disease, Osteoarthritis, Sleep apnea, Respiratory problems and others but may also suffer from depression, peer teasing and other equally disturbing problems.390 </p>391 <p align="justify">392 It is this lack of knowledge and understanding that prompted Dr. Muffazal Lakdawala, a renowned surgeon of Bariatrics (Surgery for Morbid Obesity) in some of the leading hospitals like Dr. L. H. Hiranandani Hospital, Saiffee Hospital, Lilavati Hospital etc. to launch Centre for Obesity Support (COS).393 </p>394 <p align="justify">395 Dr Lakdawala has successfully operated on patients suffering from morbid obesity. With the support of his colleagues and patients he has brought together the Centre for Obesity Support (COS).396 </p>397 <p align="justify">398 This unique forum will also provide an opportunity for patients to come together and share their experiences, provide information and encourage their peers on how to fight their battle with Morbid Obesity.399 </p>400 <p class="bottom">401 402 </p>403 </div>404 </div>405 </div>406 <div id="footer">407 <p>408 <a>409 Home410 </a>411 <span class="style3">412 |413 </span>414 <a>415 Contact us416 </a>417 <span class="style3">418 |419 </span>420 <a>421 Site map422 </a>423 <br>424 All rights reserved by Centre for Obesity Support425 <br>426 Designed and Developed by427 <a target="_new">428 CodesandDesigns429 </a>430 </p>431 </div>432 </body>433</html>434