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 Transitional//EN" "">2<html xmlns="">3 <head>4 <style>5 /*6CSS Credit: http://www.templatemo.com/7*/8 9body {10 margin: 0;11 padding: 0;12 line-height: 1.5em;13 font-family: Verdana, Arial, san-serif;14 font-size: 11px;15 color: #787f8c;16 background: #ffffff;17}18 19a:link, a:visited { color: #0099CC; text-decoration:none;} 20a:active, a:hover { color: #006699; text-decoration: underline;}21 22p { margin: 0; padding: 0; text-align: justify;}23 24.cleaner {25 clear: both;26 width: 100%;27 height: 1px;28 font-size: 1px;29}30 31.cleaner_with_height {32 clear: both;33 width: 100%;34 height: 30px;35 font-size: 1px;36}37 38 39#templatemo_container{40 width: 960px;41 background: url(images/templatemo_main_bg.gif) repeat-y;42 margin: 0 auto;43 padding: 0px 10px;44}45 46#templatemo_header {47 font-size: 12px;48 width: 960px;49 height: 360px;50 background: url(images/templatemo_header_bg.jpg) top center no-repeat;51}52 53#templatemo_header #out_mission_section {54 float: left;55 width: 250px; /* padding 30 + */56 padding: 0px 15px;57 margin-top: 210px;58 margin-left: 30px;59}60 61#templatemo_header #daily_bible_verse_section {62 float: right;63 width: 250px; /* padding 30 + */64 padding: 0px 15px;65 margin-top: 210px;66 margin-right: 30px;67}68 69#daily_bible_verse_section #bible_verse {70 clear: both;71 padding-top: 5px;72 font-weight: bold;73}74 75/* menu */76#templatemo_menu {77 clear: both;78 width: 960px;79 height: 50px;80 background: url(images/templatemo_menu_bg.gif) repeat-x;81}82 83#templatemo_menu ul {84 text-align: center;85 margin: 0;86 padding: 12px 0 0 0;87 list-style: none;88}89 90#templatemo_menu ul li{91 text-align: center;92 display: inline;93}94 95#templatemo_menu ul li a{96 padding: 5px 25px;97 font-size: 12px;98 font-weight: bold;99 text-align: center;100 text-decoration: none;101 color: #4979af;102 border-right: 1px solid #d5d5d5; 103}104 105#templatemo_menu li a:hover, #templatemo_menu li .current{106 color: #1d2f53;107}108 109#templatemo_menu li .last{110 border-right: none;111}112 113/* end of menu */114 115/* content */116 117#templatemo_content {118 clear: both;119 width: 960px;120 height: 100%;121}122 123#templatemo_content #templatemo_left {124 float: left;125 width: 280px;126 margin-top: 20px;127 margin-left: 30px;128 padding: 0;129}130 131#templatemo_content #templatemo_right {132 float: right;133 width: 570px;134 margin-top: 30px;135 margin-right: 30px;136 padding: 0px 0px;137}138 139/* left column */140 141#templatemo_left #templatemo_news_section {142 clear: both;143 width: 280px;144}145 146#templatemo_news_section h1 {147 height: 30px; /* + 20 for padding top */148 padding: 20px 0 0 15px;149 margin-bottom: 30px;150 background: url(images/templatemo_news_title_bg.gif) bottom left no-repeat;151}152 153#templatemo_news_section .templatemo_news_box {154 margin: 0 15px 30px 15px;155}156.templatemo_news_box h2 {157 padding: 0px;158 margin: 0 0 10px 0;159 font-size: 14px;160 color: #0099CC;161}162 163.templatemo_news_box h3 {164 padding: 0px;165 margin: 0 0 2px 0;166 font-size: 11px;167 color: #0099CC;168}169 170#templatemo_left .left_col_section {171 padding: 0px;172 margin-bottom: 30px;173}174 175/* end of left column */176 177#templatemo_right .right_col_section {178 margin-bottom: 30px;179 padding: 0px;180}181 182.right_col_section h1 {183 padding: 0px;184 margin: 0px 0px 15px 0px;185 font-size: 22px;186 font-weight: normal;187 color: #0099CC;188}189 190.right_col_section h2 {191 padding: 0px;192 margin: 0px 0px 15px 0px;193 font-size: 18px;194 font-weight: bold;195 color: #0099CC;196}197 198.right_col_section h3 {199 font-size: 12px;200 font-weight: bold;201 margin: 0px;202 padding: 0px;203 color: #0099CC;204}205 206.right_col_section img {207 float: left;208 margin: 3px 15px 0 0;209 border: 5px solid #e4e4e4;210}211 212.right_col_section p{213 margin-bottom: 15px;214}215 216.right_col_section ul {217 margin: 15px 0;218 padding: 0 0 0 30px;219}220 221.right_col_section ul li {222 margin-bottom: 5px;223}224 225.right_col_section #welcome_title {226 height: 38px;227 background: url(images/templatemo_welcome.gif) top left no-repeat;228 margin-bottom: 20px;229}230 231.right_col_section .right_cleaner_with_10px {232 float: left;233 display: block;234 width: 10px;235 height: 100%;236 font-size: 1px;237}238 239.right_col_section .right_two_col {240 float: left;241 width: 280px;242}243 244.right_two_col img {245 float: none;246 margin-bottom: 10px;247}248 249.right_two_col p{250 margin-bottom: 5px;251}252 253/* end of content */254 255/* footer */256 257#templatemo_footer{258 clear: both;259 width: 960px;260 text-align: center;261 padding: 10px 0;262 background-color: #e3e3e3;263 border-top: 5px solid #dadada;264}265 </style>266 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">267 <title>268 Thebridge-pdx.org - Study numerology269 </title>270 <meta content="The main reason persons want to look at numerology is simply because it provides for explanations of things that are generally unexplainable. Did you ever attemptedto examine a situation which made no wisdom to you, and you simply couldn’t understand why it came about?" name="description">271 </head>272 <body>273 <div id="templatemo_container">274 <div id="templatemo_header">275 </div>276 <div id="templatemo_menu">277 </div>278 <div id="templatemo_content">279 <div id="templatemo_left">280 <div id="templatemo_news_section">281 <h1>282 Thebridge-pdx283 </h1>284 <div class="templatemo_news_box">285 <ul>286 <li>287 <a>288 Home289 </a>290 </li>291 <li>292 <a>293 Articles archive294 </a>295 </li>296 <li>297 <a>298 Biblical Numerology Number 13299 </a>300 </li>301 <li>302 <a>303 Healthy living304 </a>305 </li>306 </ul>307 </div>308 </div>309 </div>310 <div id="templatemo_right">311 <div class="right_col_section">312 <h1>313 Study numerology314 </h1>315 <div id="mainContent">316 <p>317 A lot of people wonder the key reason why they need to study numerology. All things considered, it isn’t in truth the most methodically verified principle and there's a plethora of folks that think it is all facetious, on the other hand, there's a lot of intriguing information and facts and concepts that you'll be able to learn loads from when you're looking at numerology.318 </p>319 <p>320 The main reason persons want to look at numerology is simply because it provides for explanations of things that are generally unexplainable. Did you ever attemptedto examine a situation which made no wisdom to you, and you simply couldn’t understand why it came about?321 </p>322 <p>323 Yet another thing that would be amazing with regards to numerology is the fact is that it motivates to make inquiries. Much too often, people just agree to the data it seems told without the need of questioning it.324 </p>325 <p>326 Numerology is a thing that you can definitely dedicate at the least a while taking a look at. Frequently, persons read about something such as numerology and so they instantly discount it as being a scam as well which makes no wisdom.327 </p>328 </div>329 <p>330 Recent articles:331 </p>332 <ul>333 <li>334 <a>335 Biblical Numerology numbers336 </a>337 </li>338 <li>339 <a>340 Life path numerology341 </a>342 </li>343 <li>344 <a>345 Numerology calculator346 </a>347 </li>348 <li>349 <a>350 Study numerology351 </a>352 </li>353 </ul>354 </div>355 <div class="cleaner_with_height">356 357 </div>358 </div>359 </div>360 <div id="templatemo_footer">361 © thebridge-pdx.org362 </div>363 </div>364 </body>365</html>366