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 lang="ja" xml:lang="ja" xmlns="">3 <head>4 <style>5 @charset "utf-8";6 7/* -------------------------------8 IE§ßp9------------------------------- */10.iepngfix {11 behavior: expression(IEPNGFIX.fix(this));12}13 14/* -------------------------------15 î{Ýè16------------------------------- */17html {18 height: 100%;19 overflow: scroll;20 margin:0;21}22body {23 margin:0;24 color: #333333;25 text-align: center;26 font-family: "Osaka","lr oSVbN",sans-serif;27}28a:link {29 text-decoration: underline;30 color: #004ca8;31}32a:visited {33 text-decoration: underline;34 color: #004ca8;35}36a:hover {37 text-decoration: none;38 color: #7faadd;39}40hr {41 display: none;42 clear: both;43}44#wrapper {45 width: 904px;46 margin: 0 auto;47 padding: 0;48}49span.red {50 color: #c60202;51}52.img_c {53 margin: 0 auto;54 text-align: center;55}56/* -------------------------------57 yahoo:yui58------------------------------- */59div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}60table{border-collapse:collapse;border-spacing:0;}61fieldset,img{border:0;}62address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}63caption,th{text-align:left;}64h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}65q:before,q:after{content:'';}66abbr,acronym {border:0;font-variant:normal;}67sup {vertical-align:text-top;}68sub {vertical-align:text-bottom;}69input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}70input,textarea,select{*font-size:100%;}71legend{color:#000;}72img {border: 0;}73 74/* -------------------------------75 Header76------------------------------- */77#header {78 position: relative;79 background: url("../images/head_bg2.jpg");80 width: 904px;81 height: 157px;82}83h1, .h1 {84 position: absolute;85 display: block;86 right: 2px;87 bottom: 0;88 width: 170px;89 height: 100px;90}91h1 a, .h1 a {92 display: block;93 width: 170px;94 height: 100px;95}96h1 a span, .h1 a span {97 display: none;98 width: 170px;99 height: 100px;100}101h2 {102 position: absolute;103 right: 15px;104 top: 5px;105 color: #000099;106 font-size: 12px;107}108#header #menu {109 position: absolute;110 right: 15px;111 top: 23px;112 color: #000099;113 font-size: 12px;114}115#header #menu li {116 float: left;117 list-style-type: none;118 padding: 0 0 0 8px;119}120#header a:link,121#header a:hover,122#header a:visited {123 color: #000099;124}125#header span {126 color: #999999;127}128/* -------------------------------129 Contents130------------------------------- */131#pagebody {132 float: left;133 background: url("../images/content_bg.jpg") repeat-y;134 margin: 0;135 padding: 5px 0;136}137.right {138 text-align: right;139 padding: 0 15px;140}141table {142 width: 99%;143 margin: 10px 0;144 border-collapse: collapse;145 border-spacing: 0;146 border: 1px #666666 solid;147 font-size: 12px;148}149th {150 width: 35%;151 color: #444444;152 background: #d7d7d7;153 border: 1px #666666 solid;154 padding: 10px 20px;155 font-weight: bold;156 /* white-space: nowrap; */157}158td {159 border: 1px #666666 solid;160 padding: 10px 20px;161}162 163/* -------------------------------164 Side Menu165------------------------------- */166#navigation {167 float: left;168 width: 218px;169 height: 610px;170 text-align: center;171 margin: 0;172 padding: 0;173 background: url("../images/side_menu_bg.jpg") no-repeat #0150ad;174}175#navigation #side_contact {176 background: url("../images/side_bn_bg.png") no-repeat;177 width: 203px;178 height: 141px;179 margin: 0 auto;180 padding: 6px 0 0 0;181 behavior:expression(IEPNGFIX.fix(this));182}183#navigation #side_contact img {184 margin: 1px 0;185 padding: 0;186}187#navigation #side_contact .btn {188 clear: both;189 width: 181px;190 height: 53px;191 margin: 2px 11px;192 padding: 0;193 background: url("../images/side_contact_btn.jpg") no-repeat;194}195#navigation #side_contact .btn li {196 float: left;197 list-style-type: none;198 margin: 0;199 padding: 0;200}201#navigation #side_contact .btn li a {202 float: left;203 display: block;204 margin: 0;205 padding: 0;206}207#navigation #side_contact .btn li a span {208display: none;209}210#navigation #side_contact .btn li.nav00 a {211 display: block;212 width: 181px;213 height: 53px;214}215#navigation #side_contact .btn li.nav00 a:hover {216 display: block;217 width: 181px;218 height: 53px;219 background: url("../images/side_contact_btn.jpg") -181px 0 no-repeat;220}221#navigation #side_menu {222 clear: both;223 width: 218px;224 height: 243px;225 margin: 10px 0;226 padding: 0;227 background: url("../images/menu.jpg") no-repeat;228}229#navigation #side_menu li {230 float: left;231 list-style-type: none;232 margin: 0;233 padding: 0;234}235#navigation #side_menu li a {236 float: left;237 display: block;238 margin: 0;239 padding: 0;240}241#navigation #side_menu li a span {242display: none;243}244#navigation #side_menu li.nav00 a {245 display: block;246 width: 218px;247 height: 41px;248}249#navigation #side_menu li.nav00 a:hover {250 display: block;251 width: 218px;252 height: 41px;253 background: url("../images/menu.jpg") -218px 0 no-repeat;254}255#navigation #side_menu li.nav01 a {256 display: block;257 width: 218px;258 height: 41px;259}260#navigation #side_menu li.nav01 a:hover {261 display: block;262 width: 218px;263 height: 41px;264 background: url("../images/menu.jpg") -218px -41px no-repeat;265}266#navigation #side_menu li.nav02 a {267 display: block;268 width: 218px;269 height: 40px;270}271#navigation #side_menu li.nav02 a:hover {272 display: block;273 width: 218px;274 height: 40px;275 background: url("../images/menu.jpg") -218px -82px no-repeat;276}277#navigation #side_menu li.nav03 a {278 display: block;279 width: 218px;280 height: 40px;281}282#navigation #side_menu li.nav03 a:hover {283 display: block;284 width: 218px;285 height: 40px;286 background: url("../images/menu.jpg") -218px -122px no-repeat;287}288#navigation #side_menu li.nav04 a {289 display: block;290 width: 218px;291 height: 41px;292}293#navigation #side_menu li.nav04 a:hover {294 display: block;295 width: 218px;296 height: 41px;297 background: url("../images/menu.jpg") -218px -162px no-repeat;298}299#navigation #side_menu li.nav05 a {300 display: block;301 width: 218px;302 height: 41px;303}304#navigation #side_menu li.nav05 a:hover {305 display: block;306 width: 218px;307 height: 41px;308 background: url("../images/menu.jpg") -218px -203px no-repeat;309}310#navigation .jupitergroup_menu {311 background: #ffffff;312 width: 203px;313 margin: 0 auto;314 padding: 1px 0 6px 0;315 font-size: 12px;316}317#navigation .jupitergroup_menu img {318 margin: 6px 0;319}320#navigation .jupitergroup_menu a {321 color: #333333;322}323 324/* -------------------------------325 Main Contents326------------------------------- */327#content {328 float: right;329 width: 682px;330 padding: 0;331 text-align: center;332 margin: 0 0 0 4px;333}334#content #main {335 width: 659px;336 margin: 0 auto;337 text-align: left;338 font-size: 12px;339 line-height: 19px;340}341#content #main p {342 margin: 15px 10px 15px 15px;343 text-align: left;344}345#content #main .konpo {346 margin: 5px 10px 15px 15px;347 text-align: left;348}349#content #main .konpo strong {350 margin: 5px 0 5px 0;351 text-align: left;352}353#content #main .konpo table {354 width: 95%;355 margin: 5px 0 15px 0;356 text-align: left;357}358#content #main .konpo th {359 width: 111px;360 background: #d7d7d7;361 border: 1px #666666 solid;362 padding: 10px 3px;363}364 365#content #main table.ice_tab {366 margin: 10px 0 15px 0;367 text-align: left;368 border: 1px #ffffff solid;369}370#content #main table.ice_tab th {371 margin: 0;372 padding: 2px 0;373 background: #327fdd;374 text-align: left;375 border: 1px #ffffff solid;376}377#content #main table.ice_tab td.w {378 margin: 0;379 padding: 3px;380 background: #ffffff;381 text-align: left;382 border: 1px #ffffff solid;383}384#content #main table.ice_tab td.g {385 margin: 0;386 padding: 3px;387 background: #d7d7d7;388 text-align: left;389 border: 1px #ffffff solid;390}391#content #main p span.blue {392 color: #1663c0;393 font-weight: bold;394}395#content #main p.page {396 margin: 5px 10px 15px 15px;397 text-align: left;398}399#content #main h4 {400 padding: 20px 0 10px 0;401 text-align: left;402}403#content #main h5 {404 padding: 5px 0 15px 5px;405 text-align: left;406}407#content #main h6 {408 padding: 10px 0 0 14px;409 text-align: left;410}411#content #main span.f_15 {412 font-size: 15px;413 font-weight: bold;414 text-align: left;415}416#content #main .notice {417 clear: both;418 margin: 20px 15px;419 padding: 10px 20px;420 text-align: left;421 background: #eeeeee;422 border: 1px #bbbbbb solid;423}424#content #main .notice .btn {425 clear: both;426 width: 588px;427 height: 47px;428 margin: 1px 0 5px 0;429 padding: 0;430 background: url("../images/handcarry_contact_btn.jpg") no-repeat;431}432#content #main .notice .btn li {433 float: left;434 list-style-type: none;435 margin: 0;436 padding: 0;437}438#content #main .notice .btn li a {439 float: left;440 display: block;441 margin: 0;442 padding: 0;443}444#content #main .notice .btn li a span {445display: none;446}447#content #main .notice .btn li.nav00 a {448 display: block;449 width: 588px;450 height: 47px;451}452#content #main .notice .btn li.nav00 a:hover {453 display: block;454 width: 588px;455 height: 47px;456 background: url("../images/handcarry_contact_btn.jpg") -588px 0 no-repeat;457}458#content #main .notice .fwdbtn {459 clear: both;460 width: 588px;461 height: 47px;462 margin: 1px 0 5px 0;463 padding: 0;464 background: url("../images/forwarding_contact_btn.jpg") no-repeat;465}466#content #main .notice .fwdbtn li {467 float: left;468 list-style-type: none;469 margin: 0;470 padding: 0;471}472#content #main .notice .fwdbtn li a {473 float: left;474 display: block;475 margin: 0;476 padding: 0;477}478#content #main .notice .fwdbtn li a span {479display: none;480}481#content #main .notice .fwdbtn li.nav00 a {482 display: block;483 width: 588px;484 height: 47px;485}486#content #main .notice .fwdbtn li.nav00 a:hover {487 display: block;488 width: 588px;489 height: 47px;490 background: url("../images/forwarding_contact_btn.jpg") -588px 0 no-repeat;491}492#content #main .notice_s {493 float: left;494 width: 275px;495 margin: 10px 8px;496 padding: 15px 15px;497 _padding: 15px;498 font-size: 12px;499 text-align: left;500 background: #e8e8e8;501}502#content #main dl.enkaku {503 float: left;504 width: 93%;505 margin: 15px;506 text-align: left;507}508#content #main dl.enkaku dt {509 float: left;510 width:18%;511 margin: 0 0 15px 0;512 line-height: 25px;513}514#content #main dl.enkaku dd {515 float: left;516 width:80%;517 margin: 0 0 15px 0;518 line-height: 25px;519}520#content #main ol {521 margin: 0 15px;522}523#content #main ol li {524 margin: 0 0 15px 30px;525 line-height: 22px;526}527#content #main #top_forwarding {528 float: left;529 width: 324px;530 height: 334px;531 margin: 10px 5px 0 0;532 text-align: left;533 background: url("../images/forwarding_bg.jpg");534}535#content #main #top_handcarry {536 float: left;537 width: 324px;538 height: 334px;539 margin: 10px 0 0 5px;540 text-align: left;541 background: url("../images/handcarry_bg.jpg");542}543#content #main #top_forwarding .top_content,544#content #main #top_handcarry .top_content {545 margin: 70px 15px 0 15px;546 font-size: 12px;547 line-height: 19px;548}549#content #main #top_forwarding h3,550#content #main #top_handcarry h3 {551 display: none;552}553#content #main #top_forwarding .top_content .top_contact {554 margin: 24px 0;555 text-align: center;556}557#content #main #top_handcarry .top_content .top_contact {558 margin: 10px 0;559 text-align: center;560}561#content #main #top_forwarding ul li,562#content #main #top_handcarry ul li {563 height: 47px;564 list-style-type: none;565 margin: 0;566 padding: 0;567}568#content #main #top_forwarding .btn {569 clear: both;570 width: 294px;571 height: 47px;572 margin: 10px 0;573 padding: 0;574 background: url("../images/forwarding_btn.jpg") no-repeat;575}576#content #main #top_handcarry .btn {577 clear: both;578 width: 294px;579 height: 94px;580 margin: 10px 0;581 padding: 0;582 background: url("../images/handcarry_btn.jpg") no-repeat;583}584#content #main #top_forwarding .btn li,585#content #main #top_handcarry .btn li {586 float: left;587 list-style-type: none;588 margin: 0;589 padding: 0;590}591#content #main #top_forwarding .btn li a,592#content #main #top_handcarry .btn li a {593 float: left;594 display: block;595 margin: 0;596 padding: 0;597}598#content #main #top_forwarding .btn li a span,599#content #main #top_handcarry .btn li a span {600display: none;601}602#content #main #top_forwarding .btn li.nav00 a,603#content #main #top_handcarry .btn li.nav00 a {604 display: block;605 width: 294px;606 height: 47px;607}608#content #main #top_forwarding .btn li.nav00 a:hover {609 display: block;610 width: 294px;611 height: 47px;612 background: url("../images/forwarding_btn.jpg") 0 -47px no-repeat;613}614#content #main #top_handcarry .btn li.nav00 a:hover {615 display: block;616 width: 294px;617 height: 47px;618 background: url("../images/handcarry_btn.jpg") -294px 0 no-repeat;619}620#content #main #top_handcarry .btn li.nav01 a {621 display: block;622 width: 294px;623 height: 47px;624}625#content #main #top_handcarry .btn li.nav01 a:hover {626 display: block;627 width: 294px;628 height: 47px;629 background: url("../images/handcarry_btn.jpg") -294px -47px no-repeat;630}631#content #main .photo {632 float: right;633 margin: 0 0 0 10px;634}635#content #main .profile {636 float: right;637 margin: 80px 0 0 10px;638}639#content #main .link_bnr {640 clear: both;641 padding: 15px 0 5px 0;642}643#content #main .link_bnr li {644 list-style-type: none;645 float: left;646 padding: 0;647 margin: 0 2px;648 width: 215px;649 font-size: 11px;650 line-height: 13px;651}652#content #main .link_bnr li a:link,653#content #main .link_bnr li a:visited {654 color: #333333;655}656#content #main .link_bnr li a:hover {657 color: #666666;658}659#content #main .link_bnr li img {660 margin: 0 0 3px 0;661}662#content #main .sitemap {663 list-style-type: none;664 margin: 15px;665 text-align: left;666}667#content #main .sitemap li {668 float: left;669 width: 30%;670 list-style-type: none;671 margin: 0 0 10px 0;672 padding: 0 0 0 10px;673 text-align: left;674 background: url("../images/mark.gif") no-repeat 0 3px;675}676#content #main .forwarding_txt {677 float: left;678 width: 440px;679 margin: 0 0 15px 0;680 padding: 0;681}682#content #main .forwarding_img {683 float: left;684 width: 215px;685 text-align: right;686 margin: 0;687 padding: 0;688}689.gototop {690 text-align: right;691 margin: 10px 5px 0 5px;692}693.top_bnr {694 float: left;695 margin: 10px 0;696}697/* -------------------------------698 Form699------------------------------- */700.input, textarea {701 border: 1px #b3b3b3 solid;702 background: #f0f0f0;703 padding: 3px 5px;704}705#content #main .form_btn {706 float: left;707 width: 98%;708 text-align: center;709 margin: 10px 0;710}711/* -------------------------------712 Footer713------------------------------- */714#footer {715 clear: both;716 width: 900px;717 margin-top: 15px;718 border-top: 1px #333333 solid;719}720#footer #foot_menu {721 float: left;722}723#footer #foot_menu li {724 float: left;725 margin: 0 5px 0 0;726 list-style-type: none;727 font-size: 12px;728 padding: 15px 0;729}730#footer a:link,731#footer a:visited {732 color: #333333;733}734#footer a:hover {735 color: #666666;736}737#footer #copyright {738 float: right;739 width: 338px;740 margin-top: 15px;741}742 743/* -------------------------------744 20110318_Add745------------------------------- */746.news {747 margin: 25px 0 10px 0;748 text-align: center;749 font-size: 14px;750 font-weight: bold;751}752.newspage {753 margin: 10px 10px 15px 15px;754 text-align: left;755}756.newspage h4 {757 margin: 0;758 font-size: 14px;759 color: #00489f;760 text-align: left;761 font-weight: bold;762}763.newspage dl {764 margin: 0;765 padding: 0;766 text-align: left;767}768.newspage dl dt {769 float: left;770 margin: 0;771 padding: 0;772 width: 150px;773}774.newspage .txt {775 margin: 0;776 padding: 0;777 text-align: left;778}779 </style>780 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">781 <meta content="text/javascript" http-equiv="Content-Script-Type">782 <meta content="text/css" http-equiv="Content-Style-Type">783 <title>784 サイトマップ｜フォワーディングとハンドキャリーのジュピター・ジャパン785 </title>786 <meta content name="author">787 <meta content name="description">788 <meta content name="keywords">789 <!--[if lt IE 7.]>790 791<![endif]-->792 </head>793 <body>794 <a id="top" name="top">795 </a>796 <div id="wrapper">797 <!-- ▼Header Start▼ -->798 <div id="header">799 <h1>800 <a>801 <span>802 ジュピター・ジャパン Jupiter Japan803 </span>804 </a>805 </h1>806 <div align="right">807 <img alt height="40" src="rick.jpg" width="40">808 809 <img alt height="30" src="rick.jpg" width="45">810 811 </div>812 <h2>813 <font color="red">814 --------------815 </font>816 <font color="black">817 国際物流のジュピター・ジャパン818 </font>819 <font color="red">820 --------------821 </font>822 ; 823 </h2>824 <ul id="menu">825 <li>826 <a>827 TOPページ828 </a>829 ｜830 </li>831 <li>832 <a>833 サイトマップ834 </a>835 ｜836 </li>837 <li>838 <a>839 Global Site (Eng)840 </a>841 </li>842 843 ; 844 </ul>845 </div>846 <!-- ▲Header End▲ -->847 <!-- ▼Content Start▼ -->848 <div id="pagebody">849 <!-- ▼Navigation Start▼ -->850 <div id="navigation">851 <img alt="ジャピターは品質を徹底的に追及します" height="156" src="rick.jpg" width="212">852 <!-- ▼Side Menu Start▼ -->853 <div id="side_menu">854 <ul>855 <li class="nav00">856 <a>857 <span>858 フォワーディング859 </span>860 </a>861 </li>862 <li class="nav01">863 <a>864 <span>865 ハンドキャリー866 </span>867 </a>868 </li>869 <li class="nav02">870 <a>871 <span>872 会社概要873 </span>874 </a>875 </li>876 <li class="nav03">877 <a>878 <span>879 ジュピターグループ880 </span>881 </a>882 </li>883 </ul>884 </div>885 <div class="jupitergroup_menu">886 <img alt="Jupiter Group" height="110" src="rick.jpg" width="189">887 <br>888 ジュピター・ジャパンは889 <br>890 「891 <a>892 Jupiter Group893 </a>894 」の一員です895 </div>896 <!-- ▲Side Menu End▲ -->897 </div>898 <!-- ▲Navigation End▲ -->899 <!-- ▼Content Start▼ -->900 <div id="content">901 <div id="main">902 <h3>903 <img alt="お知らせ" height="28" src="rick.jpg" width="658">904 </h3>905 <div class="newspage">906 <h4>907 第三者割当による増資のお知らせ908 </h4>909 <div class="txt">910 本日ジュピタージャパン株式会社の親会社であるJupiter Global Limited は新株の発行、および、三菱倉庫株式会社を引受先とする第三者割当増資を決定しました。911 <br>912 <br>913 Jupiter グループは、高品質な総合ロジスティックサービスを提供する三菱倉庫の海上貨物輸送サービスや3PL にかかわるノウハウも取り入れながら商品力を強化し、お客さまに、より良いサービスをご提供してまいります。914 <br>915 <br>916 なおJupiter グループは引き続きJAL グループであることに変更はありません。またJupiter グループは今後も高品質なサービスのご提供をお約束いたします。917 <br>918 <br>919 Jupiter グループは皆様のご期待に沿えますよう全力を尽くす所存です。引き続きご愛顧を賜りますよう宜しくお願い申し上げます。920 <br>921 <br>922 2011年7月29日923 </div>924 <br>925 <h4>926 Increase capital for business expansion927 </h4>928 <div class="txt">929 Dear Valued Customers,930 <br>931 <br>932 We are pleased to inform you that Jupiter Global Limited has decided today to increase capital through the issuance of new shares to Mitsubishi Logistics Corporation (MLC) - Japan’s largest warehousing company and a world-renowned global logistics provider, enabling us to accelerate our business expansion in the logistics business field.933 <br>934 <br>935 Through cooperation with MLC, Jupiter group will be able to provide new logistics services to our customers with an even wider range of solutions such as advanced ocean freight services or third party logistics functions.936 <br>937 <br>938 Jupiter Global Limited will remain a subsidiary of the JAL, and we hereby pledge to continue providing our Valued Customers with the highest quality logistics services.939 <br>940 <br>941 We appreciate your continuous patronage and support.942 <br>943 <br>944 29th July 2011945 </div>946 </div>947 </div>948 <br>949 </div>950 <!-- ▲Content Start▲ -->951 </div>952 <img alt height="15" src="rick.jpg" width="904">953 <div class="gototop">954 <a>955 <img alt="PAGE TOP" height="11" src="rick.jpg" width="69">956 </a>957 </div>958 <!-- ▲Content End▲ -->959 <!-- ▼Footer Start▼ -->960 <div id="footer">961 <ul id="foot_menu">962 <li>963 <a>964 >965 <font color="#ff0000">966 個人情報の取り扱いについて967 </font>968 </a>969 </li>970 </ul>971 <div id="copyright">972 <img alt="COPYRIGHT (c) Jupiter Japan All RIGHTS RESERVED." height="12" src="rick.jpg" width="338">973 </div>974 </div>975 <!-- ▲Footer End▲ -->976 </div>977 </body>978</html>979