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.7k
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">2<html xmlns="">3 <head>4 <style>5 /*6Design by Noelia Ruiz Rubio7*/8 9* {10 margin: 0;11 padding: 0;12}13 14body {15 background: #FFFFFF url(images/menu_gris.png) repeat-x;16 font-family: Verdana, Arial, Helvetica, sans-serif;17 font-size: 13px;18 color: #666666;19}20 21h1, h2 {22 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;23 font-weight: normal;24}25 26h1 {27 font-size: 210%;28 font-weight:bold;29}30 31h2 {32 font-size: 167%;33}34 35h3 {36 margin-bottom: 1em;37 text-transform: uppercase;38 font-size: 100%;39 color: #000000;40}41 42p, ul, ol {43 margin-bottom: 1.5em;44 line-height: 1.6em;45}46 47p {48}49 50ol {51}52 53ul {54 list-style: none;55}56 57ul li {58 padding-left: 10px;59 background: url(images/img16.gif) no-repeat 0px 10px;60}61 62a {63 color: #3490F8;64}65 66a:hover, a:active {67 text-decoration: none;68 color: #F89934;69}70 71a:visited {72 color: #666666;73}74 75img {76 border: none;77}78 79img.left {80 float: left;81 margin: 0 20px 10px 0;82}83 84img.right {85 float: right;86 margin: 0 0 10px 20px;87}88 89.byline {90 color: #CCCCCC;91}92 93.col-one {94 float: left;95}96 97.col-two {98 float: right;99}100 101.two-cols {102}103 104.two-cols .col-one, .two-cols .col-two {105 width: 250px;106}107 108/* Boxes */109 110 111.links-box {112 background: url(images/menu-marron.png) repeat-x;113}114 115.links-box .section {116 color: #FFFFFF;117}118 119.links-box .section b {120 display: block;121 height: 23px;122 padding: 7px 0 0 10px;123}124 125.links-box .content {126 padding: 20px;127}128 129.links-box .nueva-seccion {130 background:#C66145;131 color: #ffffcc;132}133 134.content-box {135 background: url(images/menu-azul.png) repeat-x;136}137 138.content-box .section {139 color: #FFFFFF;140}141 142.content-box .section b {143 display: block;144 height: 23px;145 padding: 7px 0 0 10px;146}147 148.content-box .content {149 padding: 20px;150}151 152.content-box .nueva-seccion {153 background:#ff0000;154 color: #ffffcc;155}156 157.content-box a {158 color: #3490F8;159}160 161 162/* Header */163 164#header {165 width: 800px;166 height: 100px;167 margin: 0 auto;168 padding-top: 10px;169}170 171/* Logo */172 173#logo {174 float: left;175 width: 800px;176}177 178#poli{float: right;179margin-top: 20px;}180#grc{float:left}181 182#logo h1, #logo h2 {183 float: left;184}185 186#logo h1 {187 padding-top: 30px;188 text-transform: lowercase;189 font-size: 34px;190 font-weight: normal;191}192 193#logo h2 {194 padding: 0px 0 0 0px;195 text-transform: uppercase;196 font-family: Verdana, Arial, Helvetica, sans-serif;197 font-size: 9px;198}199 200#logo a {201 text-decoration: none;202 color: #000000;203 bottom: middle;204}205 206/* Menu */207 208#menu {209 width: 800px;210 height: 30px;211 margin: 0 auto;212}213 214#menu ul {215 margin: 0;216 list-style: none;217 line-height: normal;218}219 220#menu li {221 display: block;222 float: left;223 margin-right: 1px;224 padding: 0;225 background: #FFFFFF;226}227 228#menu a {229 display: block;230 float: left;231 background: url(images/EsquinaBoton.png) no-repeat;232 text-decoration: none;233 color: #666666;234}235 236#menu a:hover {237 color: #1777B1;238}239 240#menu b {241 display: block;242 float: left;243 height: 23px;244 padding: 7px 20px 0 20px;245 background: url(images/EsquinaBotonB.png) no-repeat right top;246 cursor: hand; 247}248 249#menu li.active {250 background: #CFCECE url(images/img04.gif) repeat-x;251}252 253#menu li.active a {254 background: url(images/EsquinaBotonB.png) no-repeat right top;255 color: #C45A3C;256}257 258#menu li.active b {259 background: url(images/EsquinaBoton.png) no-repeat;260}261 262/* Page */263 264#page {265 width: 800px;266 margin: 0 auto;267 padding: 30px 0 0 0;268}269 270#page-alumni {271 width: 800px;272 margin: 0 auto;273}274 275/* Content */276 277#barra-derecha {278 float: right;279 width: 380px;280}281#barra-derecha-soft {282 float: right;283 width: 620px;284}285/* Feature */286 287#feature {288 margin-bottom: 20px;289}290 291/* Sidebar */292 293#barra-izquierda {294 float: left;295 width: 380px;296}297 298#barra-unica {299 float: center;300 width: 800px;301}302 303#barra-izquierda-soft {304 float: left;305 width: 180px;306}307 308#barra-izquierda .col-one {309 width: 200px;310}311 312#barra-izquierda .col-two {313 width: 200px;314}315 316/* Footer */317 318#footer {319 background: #DDDDDD;320 border-top: 1px solid #999999;321 border-bottom: 1px solid #999999;322 border-left: 1px solid #999999;323 border-right: 1px solid #999999;324 width: 800px;325 height: 30px;326 margin: 0 auto;327}328 329#footer p {330 margin: 0;331 text-align: center;332 font-size: 85%;333}334 </style>335 <meta content="application/xhtml+xml; charset=utf-8" http-equiv="content-type">336 <title>337 Grupo de Redes de Computadores338 </title>339 <meta content name="keywords">340 <meta content name="description">341 </head>342 <body>343 <div id="header">344 <div id="logo">345 <div id="grc">346 <a target="_self">347 <img alt="GRC" height="90" longdesc="Grupo de Redes de Computadores" src="rick.jpg">348 </a>349 </div>350 <div id="poli">351 <img alt="UPV" height="62" longdesc="Universidad Politecnica de Valencia" src="rick.jpg">352 </div>353 </div>354 </div>355 <div id="menu">356 <ul>357 <li>358 <a>359 <b>360 Home361 </b>362 </a>363 </li>364 <li class="active">365 <a>366 <b>367 Members368 </b>369 </a>370 </li>371 <li>372 <a>373 <b>374 Papers375 </b>376 </a>377 </li>378 <li>379 <a>380 <b>381 Projects382 </b>383 </a>384 </li>385 <!--386 <li><a ><b>Links</b></a></li>387-->388 </ul>389 </div>390 <div id="page">391 <!--- Informacion en la parte derecha -->392 <div id="barra-derecha">393 <div class="content-box" id="feature">394 <h2 class="section">395 <b>396 PhD Students397 </b>398 </h2>399 <div class="content">400 <ul>401 <li>402 Alicia Sepulveda Muñoz403 <br>404 (Advisor: José M. Cecilia, Carlos Periñán-Pascual)405 </li>406 <li>407 Daniel Hernández408 <br>409 (Advisor: José María Cecilia)410 </li>411 <li>412 Jamie Wubben413 <br>414 (Advisor: Carlos Tavares Calafate, Juan Carlos Cano)415 </li>416 <li>417 Juan José Franco Peñaranda418 <br>419 (Advisor: José M. Cecilia, Joaquín Lasheras)420 </li>421 </ul>422 <h2>423 <b>424 Master Students425 </b>426 </h2>427 <ul>428 <li>429 Cristian Villarroya430 <br>431 (Advisor: Juan Carlos Cano, Carlos Calafate)432 </li>433 <li>434 José Daniel Padrón435 <br>436 (Advisor: Carlos Calafate, Juan Carlos Cano)437 </li>438 <li>439 Julio José Fernández440 <br>441 (Advisor: José María Cecilia, Pietro Manzoni)442 </li>443 <li>444 Pedro Garcia445 <br>446 (Advisor: José María Cecilia, Pietro Manzoni)447 </li>448 </ul>449 </div>450 </div>451 </div>452 <!--- Informacion en la parte izquierda -->453 <div class="two-cols" id="barra-izquierda">454 <div class="content-box">455 <h2 class="section">456 <b>457 Faculty (UPV)458 </b>459 </h2>460 <div class="content">461 <ul>462 <li>463 <a>464 Pietro Manzoni [coordinator]465 </a>466 </li>467 <li>468 <a>469 Juan Carlos Cano470 </a>471 </li>472 <li>473 <a>474 Carlos Tavares Calafate475 </a>476 </li>477 <li>478 <a>479 Enrique Hernández480 </a>481 </li>482 </ul>483 </div>484 </div>485 <div class="content-box" id="feature">486 <h2 class="section">487 <b>488 Collaborators/Advisors489 </b>490 </h2>491 <div class="content">492 <ul>493 <li>494 <a target="_blank">495 C.K. Toh496 </a>497 (National Tsing Hua University Honor Chair Professor of EECS, TAIWAN, considered one of the fathers of mobile ad hoc networks)498 </li>499 <li>500 <a target="_blank">501 Edjair Mota502 </a>503 (Institute of Computing at the Federal University of Amazonas – UFAM, BRASIL)504 </li>505 <li>506 <a target="_blank">507 Francisco Martínez508 </a>509 (Universidad de Zaragoza, SPAIN)510 </li>511 <li>512 Piedad Garrido (Universidad de Zaragoza, SPAIN)513 </li>514 </ul>515 </div>516 </div>517 </div>518 <div style="clear: both;">519 520 </div>521 </div>522 <div id="page-alumni">523 <div class="content-box">524 <h2 class="section">525 <b>526 Alumni527 </b>528 </h2>529 <div class="content">530 <ul>531 <li>532 Francisco José Fabra Collado, "Flight coordination solutions for multirotor unmanned aerial vehicles", June 2020533 </li>534 <li>535 Jorge Zambrano, "Efficient Traffic Management in Urban Environments", September 2019536 </li>537 <li>538 Leonardo Javier Chancay García, "Evaluación y modelado de Redes Oportunistas", June 2019539 </li>540 <li>541 Subhadeep Patra, "Development and evaluation of smartphone-based ITS applications for vehicular networks", June 2019542 </li>543 </ul>544 </div>545 </div>546 </div>547 <div id="footer">548 <p id="pie">549 <a>550 [EMAIL REDACTED]551 </a>552 |553 Last update: January 15, 2020554 <!-- #EndDate -->555 </p>556 </div>557 </body>558</html>559