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 * {6 margin: 0;7 padding: 0;8}9 10body {11 margin: 20px 0;12 background: url(images/pattern.png) repeat;13 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;14 font-size: 15px;15 color: #7F7772;16}17 18h1, h2, h3 {19 font-weight: normal;20 color: #3B3B3B;21}22 23h1 { font-size: 182%; }24h2 { font-size: 122%; }25h3 { font-size: 100%; }26 27p, ul, ol {28 margin-bottom: 20px;29 line-height: 167%;30 font-size: 85%;31}32 33a:link {34 color: #828266;35}36 37a:hover {38 text-decoration: none;39 color: #d88e76;40}41 42.side-title {43 font-size: 24px;44padding: 10px 0;45}46 47#heading {48 width: 900px;49 height: 80px;50 margin: 0 auto;51 background-color: #d88e76;52}53 54#logotype {55 float: left;56 width: 240px;57 margin-left: 20px;58}59 60#logotype .logo {61 padding-top: 20px;62 text-align: center;63}64 65#logotype .logo a {66 font-weight: normal;67 font-size: 24px; 68 color: #f3efdf;69}70 71#logotype span {72 text-align: center;73 text-transform: uppercase;74 font-size: 8px;75 color: #d9dfbe;76}77 78#logotype span a {79 color: #d9dfbe;80}81 82#logotype a {83 text-decoration: none;84}85 86#navigation {87 88 width: 530px;89}90 91#navigation ul {92 margin: 0;93 padding: 0;94 list-style: none;95 float: right;96 background-color: #ffffffa8;97}98 99#navigation li {100 display: inline;101}102 103#navigation a {104 display: block;105 float: left;106 height: 50px;107 padding: 30px 25px 0 25px;108 border-left: 1px dashed #d9dfbe;109 color: #4f3035;110 text-decoration: none;111 font-size: 114%;112}113 114#navigation a:hover {115 color: #f3efdf;116}117 118#spl {119 width: 900px;120 height: 415px;121 margin: 0 auto;122 background: url(images/img3.jpg) no-repeat;123}124 125#spl p {126 float: right;127 width: 460px;128 height: 70px;129 margin: 0;130 padding: 110px 20px 0 50px;131 text-align: right;132 font-size: 136%;133 font-weight: bold;134 color: #ED2024;135}136 137#paging {138 width: 900px;139 margin: 0 auto;140 position: relative;141 overflow: hidden;142 background: #fff;143}144 145#paging h1, #paging h2 {146 margin-bottom: 20px;147}148 149#inner {150 float: left;151 width: 620px;152 padding: 20px;153}154 155#inner ol, #inner ul {156 margin-left: 3em;157}158 159#side {160 float: left;161 width: 200px;162 padding: 20px;163}164 165#side h2 {166 padding-top: 6px;167 font-weight: bold;168}169 170#side ul {171 margin: 0;172 padding: 0;173 list-style: none;174}175 176#side li {177 margin: 0 0 20px 0;178 padding: 0 0 20px 0;179 border-bottom: 1px dashed #CCCCCC;180}181 182#side h3 {183 height: 17px;184 padding: 0 10px;185 background: #d9dfbe;186 color: #fff;187}188 189#footing {190 clear: both;191 width: 900px;192 height: 50px;193 margin: 0 auto;194 padding-top: 10px;195 border-top: 5px solid #d88e76;196 background: #9a454a;197}198 199#footing p {200 padding: 0;201 line-height: normal;202 font-size: 77%;203 color: #f3efdf204}205 206#footing a {color: #f8f5ed}207 208#legal {209 float: left;210 margin-left: 20px;211}212 213#links {214 float: right;215 margin-right: 20px;216}217 218 219.popup { width:270px; display:none; background: rgba(56,39,34,0.7); position:absolute; margin:80px 0px 0px 22px; padding: 15px; z-index: 1000;}220.popup ul { margin:0!important; padding: 0px!important; float: none!important; text-align: center!important;}221.popup ul li { margin:5px 0px!important; padding: 0px!important; float: none!important; display:block!important;}222.popup ul li a {223 display: block;224 float: none!important;225 height: auto!important;226 padding: 0px!important;227 border-left: none!important;228 color: #f3efdf!important;229 text-decoration: none;230 font-size: 124%!important;231}232.popup ul li a:hover {color: #fff!important; text-decoration: underline!important;}233 234 235.popup2 { width:270px; display:none; background: rgba(56,39,34,0.7); position:absolute; margin:80px 0px 0px 117px; padding: 15px; z-index: 1000;}236.popup2 ul { margin:0!important; padding: 0px!important; float: none!important; text-align: center!important;}237.popup2 ul li { margin:5px 0px!important; padding: 0px!important; float: none!important; display:block!important;}238.popup2 ul li a {239 display: block;240 float: none!important;241 height: auto!important;242 padding: 0px!important;243 border-left: none!important;244 color: #f3efdf!important;245 text-decoration: none;246 font-size: 124%!important;247}248.popup2 ul li a:hover {color: #fff!important; text-decoration: underline!important;}249 </style>250 <meta content="text/html; charset=utf-8" http-equiv="content-type">251 <title>252 Where To Look For A Sample Of A Personal Response Paper253 </title>254 <meta content="Personal response essay examples can be found in many places, but not all of them are reliable. These suggestions may com in handy is you need a sample." name="description">255 </head>256 <body style>257 <!-- Header -->258 <div id="heading">259 <div id="logotype">260 <div class="logo">261 <a>262 celiacaroarteducation.com263 </a>264 <span>265 easy tips for freshmen: writing an academic essay266 </span>267 </div>268 <div id="navigation">269 <ul>270 <li>271 <a>272 Find help273 </a>274 </li>275 <li>276 <a>277 Perfect paper278 </a>279 </li>280 <li>281 <a class="menulink">282 Writing hints283 </a>284 <div class="popup">285 <ul>286 <li>287 <a>288 Crafting an informative paper289 </a>290 </li>291 <li>292 <a>293 Argumentative law essay outline294 </a>295 </li>296 <li>297 <a>298 Comparative essay tricks299 </a>300 </li>301 <li>302 <a>303 Good essay writing services304 </a>305 </li>306 </ul>307 </div>308 </li>309 <li>310 <a class="menulink2">311 Essay topics312 </a>313 <div class="popup2">314 <ul>315 <li>316 <a>317 Argumentative topics for high school318 </a>319 </li>320 <li>321 <a>322 Fahrenheit 451 topics323 </a>324 </li>325 <li>326 <a>327 Winning analytical essay topics328 </a>329 </li>330 <li>331 <a>332 Picking up good essay topics333 </a>334 </li>335 </ul>336 </div>337 </li>338 </ul>339 </div>340 </div>341 <!-- end of header -->342 <!-- Inner -->343 <div id="paging">344 <div id="inner">345 <h1>346 Where To Look For An Example Of A Personal Response Essay347 </h1>348 <p>349 Writing any type of paper should be preceded by reading enough samples of that kind of paper. The content of a Personal Response Essay depends on the personal view of the author.350 </p>351 <ul>352 <li>353 <b>354 Response355 </b>356 - It is about how you respond to a particular piece of literature.357 </li>358 <br>359 <li>360 <b>361 Personal experience362 </b>363 - Another characteristic of the personal response paper is to add experience similar to the one discussed in the paper but it happened to you. In other words, to relate the paper to your own world.364 </li>365 </ul>366 <p>367 In order to be able to write this type of a paper, you should read several examples, but the question is: Where to find samples of personal response paper? There are several places to look for:368 </p>369 <ol>370 <li>371 School library372 </li>373 <br>374 <li>375 Ask for your tutor/ teacher376 </li>377 <br>378 <li>379 The Internet380 </li>381 </ol>382 <h3>383 School library384 </h3>385 <p>386 This is the place where you can find reliable papers. School library is a good source of papers, that are probably reviewed by teachers, and that’s why they are reliable.387 </p>388 <p>389 Look for a book with samples, or only samples by other students, they will be really helpful.390 </p>391 <h3>392 Ask your tutor/ teacher393 </h3>394 <p>395 This is a good advice, but not all teachers and tutors are willing to give you a sample paper. They will give you some advice regarding the structure, but as long as you don’t see a finished work, it will be abstract to you, unless you are good at writing and meet your teacher’s/ tutor’s expectations without reading any samples.396 </p>397 <h3>398 The Internet399 </h3>400 <p>401 This is probably the least reliable source, but you can find a lot of essays there. Consider only pages of universities and schools.402 </p>403 <p>404 No matter the source you choose, it is important for you to start from your teacher/ tutor, then continue with your school library and leave the Internet last. You will definitely find good samples this way.405 </p>406 </div>407 <div id="side">408 <div class="side-title">409 Online Help410 </div>411 <p>412 Stuck with your essay? Order custom written essay at413 <a target="_blank">414 iBuyEssay.com415 </a>416 - professional essay writing service.417 </p>418 <div class="side-title">419 Writing Tips420 </div>421 <ul>422 <li>423 <a target="blank">424 Thesis editing help425 </a>426 </li>427 <li class="buy-essays-online">428 <a title="Great Advice On How To Buy Essays Online With No Trouble">429 The best way to buy essays online430 </a>431 </li>432 <li class="improve-paper-writing-skills">433 <a title="Seven Great Suggestions To Improve Paper Writing Skills">434 7 ways to improve writing skills435 </a>436 </li>437 <li class="essay-writing-service">438 <a title="Finding A Top-Level Essay Writing Service: A Simple Guide">439 Selecting an essay writing service440 </a>441 </li>442 </ul>443 </div>444 </div>445 <!-- end of inner -->446 <!-- footer -->447 <div id="footing">448 <p id="legal">449 2023 © CeliacaroArtEducation.com. All Rights Reserved.450 </p>451 <p id="links">452 writing advice | for students453 </p>454 </div>455 </div>456 </body>457</html>458