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 /*@import url("eminf_colors.css");*/6 7body{8 width:1020px;9 margin:0px auto;10}11 12.title{13 margin:20px 0px 40px 0px;14 font-family: arial, verdana, sans-serif;15 line-height:44px;16 text-align:left;17 color: rgb(90, 90, 90);18 background-color:transparent;19}20 21/*Left Margin*/22.lpane{23 float:left;24 width:280px;25}26 27/*Main Page*/28.rpane{29 margin-left:280px;30 font:normal normal normal 12px/24px verdana, arial, sans-serif;31 text-align:left;32}33 34/* Start of Footer */35.footer{36 clear:left;37 margin:40px 0px 20px 0px;38 font:normal small-caps normal 10px/48px verdana, arial, sans-serif;39 letter-spacing:2px;40 text-align-left;41}42 43.ltext{44 text-align:left;45}46 47.rtext{48 float:right;49 text-align:right; 50}51/* End of Footer */52 53/* Start of Logo */54.logo{55 margin:20px auto auto 20px;56 text-align:left;57 font:normal normal normal 10px/14px arial, verdana, sans-serif;58 color:#B8860B;59}60 61.logo a:link, .logo a:visited, .logo a:hover, .logo a:active {text-decoration:none; background-color:transparent;}62.logo a:hover, .logo a:active {color:red;}63 64.eminfshort{65 font:normal normal bold 28px/28px "times new roman", serif;66}67 68.eminflong{ 69 letter-spacing:4px;70} 71 72/* End of Logo */73 74/*Menu Start*/75.menufrm{76 margin:60px 20px 0px 0px;77}78 79.menu_content{80 margin:0px 20px 15px 0px; 81}82 83.menucaption_sel{84 85 margin-top:0px;86 font:normal normal bolder 11px/33px arial, verdana, sans-serif;87 letter-spacing:2px;88 text-align:left;89 color:rgb(68, 68, 68);90}91 92.menucaption{93 font:normal normal bolder 11px/26px arial, verdana, sans-serif;94 letter-spacing:2px;95 text-align:left;96 color:rgb(68, 68, 68);97 background-color:transparent;98}99 100.menucaption a:link, .menucaption a:visited, .menucaption a:hover, .menucaption a:active{101 text-decoration:none; 102 color:rgb(68, 68, 68); 103 background-color:transparent;104}105 106.menucaption a:hover, .menucaption a:active{107 text-decoration:none;108 color:red;109 background-color:transparent;110}111 112ul{113 margin:0px 0px 5px 0px;114 padding-left:6px;115 text-align:left;116 list-style-type:none;117}118 119li{120 padding:5px 0px 5px 0px;121 font:normal normal normal 10px/10px verdana, arial, sans-serif;122 font:normal normal normal 10px/10px;123 letter-spacing:2px;124}125 126li a:link, li a:active, li a:visited, a:hover{127 text-decoration:none;128 color:black;129 background-color:transparent;130}131 132li a:hover, a:active{133 color:red;134}135 136li a:hover:after{137 content:"\261A";138}139 140/*Menu End*/141 142 143.pdfview{144 width:180px;145 margin:40px 10px 20px auto;146 font:normal normal normal 9px/16px verdana, arial, sans-serif;147 text-align:left;148 color:#8B0000;149}150 151.pdfview img{152 float:left;153 margin-right:10px;154 margin-left:10px;155 border:none;156}157 158.pdfview a:link, .pdfview a:visited, .pdfview a:hover, .pdfview a:active{text-decoration:none;}159.pdfview a:link, .pdfview a:visited{color:#8B0000;}160.pdfview a:hover, .pdfview a:active{color:red;}161 162.subtitle{163 margin:20px auto auto 20px;164 font:normal normal bold 11px/16px verdana, arial, sans-serif;165 text-align:left;166}167 168.bullet{169 margin-right:5px;170}171 172.par{173 margin:10px 0px 0px 20px;174 text-align:left;175 color: black;176}177 178.par a:link{text-decoration:underline;}179.par a:visited, .par a:hover, .par a:active{text-decoration:none;}180.par a:link, .par a:visited{color:gray;}181.par a:hover, .par a:active{color:red;}182 183.code{184 margin:0px 0px 0px 20px;185 text-align:left;186 color:black; 187}188 189 190 191 192 193 194 195 196.footer, .menu_content{197 border-top:1px dotted #B8860B;198}199 200.title, .menu_content{201 border-bottom:1px dotted #B8860B;202}203 204.footer, .subtitle, .logo a, .logo a:visited, .sublogo, .sublogo1{205 color:#B8860B;206}207 208 209 210/*stylesheet start*/211/* This stylesheet is shared by ustemps.xml and ustempreg.xml*/212 213/*The menu on top of the page (content is php uphated)*/214.menubar{215 margin:20px auto 20px 0px;216}217 218.rtts_menuitem{219 padding-right:20px;220 color:#B8860B;221}222 223.rtts_menuitem a:link, .rtts_menuitem a:visited{224 color:#B8860B;225}226 227.rtts_menuitem a:hover, .rtts_menuitem a:active{228 color:red;229}230/*end of menubar*/231 232/*section title bullet*/233.bullet{234 display:none;235}236 237.subtitle{238 margin-top:30px;239 margin-left:0px;240}241 242/*Text start*/243/*It overrides the par def. in eminf.css*/244.par{245 width:740px;246 margin: 20px auto 0px auto;247 font:normal normal normal 12px/24px verdana, arial, sans-serif;248 text-align:justify;249 color:black; 250 background-color:transparent;251}252/*link is specified in eminf.css*/253/*Text End*/254 255/*Table related styles*/256table{257 width:740px;258 margin:30px 0px 0px 0px;259 color:black;260 background-color:white;261 border-collapse:collapse;262 border:1px dotted #800000;263}264 265caption{266 padding-top:20px;267 padding-bottom:20px;268 font:normal small-caps normal 10px/18px arial, verdana, sans-serif;269 border:1px dotted #800000;270}271/*Highlight in caption*/272.b{273 padding-left:1px;274 padding-right:0px;275 color:black;276 background-color:#afeeee; 277}278 279.r{280 padding-left:0px;281 padding-right:1px;282 color:black;283 background-color:#ffa07a; 284}285 286.w{287 padding-right:1px;288 padding-left:1px;289 color:black;290 background-color:#ffffff; 291}292 293th, td, tr{294 border:1px dotted #800000;295}296 297th{298 text-align:center;299 font-size:10px;300 color:black;301 background-color:#f5deb3; 302}303 304/*For numbered rows*/305.nbr{306 width:4px;307 text-align:right;308 padding-right:1px;309 font-weight:normal;310}311 312/*For row descriptor*/313.rd{314 width:120px;315 text-align:left;316 padding-left:2px;317}318 319.highlight{320 background-color:#f0ffff; 321}322 323td{324 width:60px;325 padding:5px 0px 5px 0px;326 text-align:center;327 font:normal normal normal 10px/16px arial, verdana, sans-serif;328}329 330/* Endof Table Stylesheet*/331 332/*list of items in summary stats page*/333.itinerary{334 list-style-type:square;335 margin:20px auto 20px 10px;336}337 338.item{339 letter-spacing:normal;340 font:normal normal normal 12px/16px verdana, arial, sans-serif;341}342 343/*bar & raw average plot*/ 344.imgfrm{345 padding:20px auto 20px 20px;346}347 348/*regression line plot*/349.imagefrml, .imagefrmr{350 width:340px;351}352 353.imagefrml{354 float:left;355 margin-left:20px;356}357 358.imagefrmr{359 float:right;360}361 362/*stylesheet end*/363 </style>364 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">365 <meta content="en-us" name="language">366 <title>367 Recent Temperature Trends in Ottawa, Ontario368 </title>369 <meta content="Jaroslav Mohapl" name="author">370 <meta content="Jaroslav Mohapl & Dana Mohapl" name="copyright">371 <meta content="Summary statistics of daily average temperatures observed in Ottawa, Ontario." name="description">372 <meta content="Research, education, resource." name="classification">373 <meta content="daily temperatures, temperature changes, confidence interval, environmental monitoring" name="keyphrases">374 <meta content="temperature, forecasting, monitoring, environment" name="keywords">375 </head>376 <body>377 <h3 class="title">378 Recent Temperature Trends in Ottawa, Ontario379 </h3>380 <div class="lpane">381 <div class="logo">382 <span class="eminfshort">383 <a>384 EmInf385 </a>386 <br>387 </span>388 <span class="eminflong">389 Empirical and Inferential390 </span>391 <br>392 <span class="eminflong">393 Interpretations394 </span>395 </div>396 <dl class="menufrm">397 <dt class="menucaption_sel">398 ✘Temperature Trends399 </dt>400 <dd class="menu_content">401 <ul>402 <li>403 404 <a>405 Recent Data406 </a>407 </li>408 <li>409 410 <a>411 Historical Data for USA412 </a>413 </li>414 </ul>415 </dd>416 <dt class="menucaption">417 418 <a>419 Sitemap420 </a>421 </dt>422 <dt class="menucaption">423 424 <a>425 HTML in a Nutshell426 </a>427 </dt>428 <dt class="menucaption">429 430 <a>431 CSS Overview432 </a>433 </dt>434 <dt class="menucaption">435 436 <a>437 JavaScript Examples438 </a>439 </dt>440 <dt class="menucaption">441 442 <a>443 Environmental Data Notes444 </a>445 </dt>446 <dt class="menucaption">447 448 <a>449 Statistics Notes450 </a>451 </dt>452 <dt class="menucaption">453 454 <a>455 Trips from Waterloo456 </a>457 </dt>458 <dt class="menucaption">459 460 <a>461 The Mennonite Country462 </a>463 </dt>464 <dt class="menucaption">465 466 <a>467 Archive468 </a>469 </dt>470 </dl>471 </div>472 <div class="rpane">473 <div class="menubar" xmlns:rtts="dayton:stats">474 <span class="rtts_menuitem">475 <a>476 Extrema477 </a>478 </span>479 <span class="rtts_menuitem">480 <a>481 Summary482 </a>483 </span>484 <span class="rtts_menuitem">485 <a>486 Monthly Summary487 </a>488 </span>489 <span class="rtts_menuitem">490 <a>491 Warming Trends492 </a>493 </span>494 <span class="rtts_menuitem">495 <a>496 Day Counts497 </a>498 </span>499 <span class="rtts_menuitem">500 <a>501 To Fahrenheit502 </a>503 </span>504 </div>505 <h4 class="subtitle">506 <img alt="bullet" class="bullet" src="rick.jpg">507 Temperature Trends in Ottawa, Ontario508 </h4>509 <p class="par">510 Average daily temperatures in Ottawa, Ontario, including 511 the lower and upper bounds of the 95% confidence interval.512 Due to the possibility of missing data, the actual513 <a>514 day counts515 </a>516 used in the average and confidence interval calculations are provided.517 The table is also offered in degrees of518 <a>519 Fahrenheit520 </a>521 .522 </p>523 <table>524 <caption>525 Average daily temperatures (C) for Ottawa, Ontario526 <br>527 <span class="b">528 Lower Bound529 </span>530 <span class="w">531 Average Temperature532 </span>533 <span class="r">534 Upper Bound535 </span>536 </caption>537 <tbody>538 <tr>539 <th>540 </th>541 <th>542 January543 </th>544 <th>545 February546 </th>547 <th>548 March549 </th>550 <th>551 April552 </th>553 <th>554 May555 </th>556 <th>557 June558 </th>559 <th>560 July561 </th>562 <th>563 August564 </th>565 <th>566 September567 </th>568 <th>569 October570 </th>571 <th>572 November573 </th>574 <th>575 December576 </th>577 </tr>578 <tr>579 <th class="nbr">580 1581 </th>582 <td>583 <span class="b">584 -12585 </span>586 <span class="w">587 -8588 </span>589 <span class="r">590 -4591 </span>592 </td>593 <td>594 <span class="b">595 -11596 </span>597 <span class="w">598 -8599 </span>600 <span class="r">601 -6602 </span>603 </td>604 <td>605 <span class="b">606 -7607 </span>608 <span class="w">609 -5610 </span>611 <span class="r">612 -2613 </span>614 </td>615 <td>616 <span class="b">617 2618 </span>619 <span class="w">620 4621 </span>622 <span class="r">623 6624 </span>625 </td>626 <td>627 <span class="b">628 10629 </span>630 <span class="w">631 12632 </span>633 <span class="r">634 15635 </span>636 </td>637 <td>638 <span class="b">639 15640 </span>641 <span class="w">642 17643 </span>644 <span class="r">645 19646 </span>647 </td>648 <td>649 <span class="b">650 19651 </span>652 <span class="w">653 20654 </span>655 <span class="r">656 22657 </span>658 </td>659 <td>660 <span class="b">661 21662 </span>663 <span class="w">664 22665 </span>666 <span class="r">667 24668 </span>669 </td>670 <td>671 <span class="b">672 18673 </span>674 <span class="w">675 19676 </span>677 <span class="r">678 21679 </span>680 </td>681 <td>682 <span class="b">683 10684 </span>685 <span class="w">686 12687 </span>688 <span class="r">689 14690 </span>691 </td>692 <td>693 <span class="b">694 4695 </span>696 <span class="w">697 6698 </span>699 <span class="r">700 8701 </span>702 </td>703 <td>704 <span class="b">705 -4706 </span>707 <span class="w">708 -1709 </span>710 <span class="r">711 2712 </span>713 </td>714 </tr>715 <tr class="highlight">716 <th class="nbr">717 2718 </th>719 <td>720 <span class="b">721 -12722 </span>723 <span class="w">724 -9725 </span>726 <span class="r">727 -6728 </span>729 </td>730 <td>731 <span class="b">732 -9733 </span>734 <span class="w">735 -7736 </span>737 <span class="r">738 -5739 </span>740 </td>741 <td>742 <span class="b">743 -6744 </span>745 <span class="w">746 -4747 </span>748 <span class="r">749 -2750 </span>751 </td>752 <td>753 <span class="b">754 2755 </span>756 <span class="w">757 4758 </span>759 <span class="r">760 6761 </span>762 </td>763 <td>764 <span class="b">765 9766 </span>767 <span class="w">768 12769 </span>770 <span class="r">771 14772 </span>773 </td>774 <td>775 <span class="b">776 15777 </span>778 <span class="w">779 17780 </span>781 <span class="r">782 19783 </span>784 </td>785 <td>786 <span class="b">787 19788 </span>789 <span class="w">790 20791 </span>792 <span class="r">793 22794 </span>795 </td>796 <td>797 <span class="b">798 21799 </span>800 <span class="w">801 22802 </span>803 <span class="r">804 24805 </span>806 </td>807 <td>808 <span class="b">809 17810 </span>811 <span class="w">812 18813 </span>814 <span class="r">815 20816 </span>817 </td>818 <td>819 <span class="b">820 9821 </span>822 <span class="w">823 12824 </span>825 <span class="r">826 14827 </span>828 </td>829 <td>830 <span class="b">831 3832 </span>833 <span class="w">834 5835 </span>836 <span class="r">837 7838 </span>839 </td>840 <td>841 <span class="b">842 -5843 </span>844 <span class="w">845 -2846 </span>847 <span class="r">848 1849 </span>850 </td>851 </tr>852 <tr>853 <th class="nbr">854 3855 </th>856 <td>857 <span class="b">858 -11859 </span>860 <span class="w">861 -8862 </span>863 <span class="r">864 -5865 </span>866 </td>867 <td>868 <span class="b">869 -11870 </span>871 <span class="w">872 -8873 </span>874 <span class="r">875 -5876 </span>877 </td>878 <td>879 <span class="b">880 -9881 </span>882 <span class="w">883 -6884 </span>885 <span class="r">886 -3887 </span>888 </td>889 <td>890 <span class="b">891 2892 </span>893 <span class="w">894 4895 </span>896 <span class="r">897 6898 </span>899 </td>900 <td>901 <span class="b">902 9903 </span>904 <span class="w">905 12906 </span>907 <span class="r">908 14909 </span>910 </td>911 <td>912 <span class="b">913 14914 </span>915 <span class="w">916 16917 </span>918 <span class="r">919 17920 </span>921 </td>922 <td>923 <span class="b">924 19925 </span>926 <span class="w">927 21928 </span>929 <span class="r">930 22931 </span>932 </td>933 <td>934 <span class="b">935 21936 </span>937 <span class="w">938 22939 </span>940 <span class="r">941 23942 </span>943 </td>944 <td>945 <span class="b">946 17947 </span>948 <span class="w">949 19950 </span>951 <span class="r">952 21953 </span>954 </td>955 <td>956 <span class="b">957 9958 </span>959 <span class="w">960 11961 </span>962 <span class="r">963 13964 </span>965 </td>966 <td>967 <span class="b">968 2969 </span>970 <span class="w">971 4972 </span>973 <span class="r">974 6975 </span>976 </td>977 <td>978 <span class="b">979 -6980 </span>981 <span class="w">982 -3983 </span>984 <span class="r">985 -0986 </span>987 </td>988 </tr>989 </tbody>990 </table>991 </div>992 <div class="footer">993 Dana & Jaroslav Mohapl994 <span class="rtext">995 Copyright © 2004 - 2023 by EmInf. All rights reserved.996 </span>997 </div>998 </body>999</html>1000