SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA 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 "easy" version of the Design2Code testset 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.
6379
1<!DOCTYPE html>2<html lang="ko">3 <head>4 <style>5 6body {7 font-family: "Noto Sherif KR", sans-serif !important;8 background: #ffffff;9 background-color: #ffffff;10 border-style: none;11 margin: auto;12 max-width: 750px;13 word-break: keep-all;14}15 16.noti {17 font-size: small;18 color: black;19 background-color: rgb(234, 234, 234);20 padding: 15px;21 margin-top: 15px;22 line-height: 160%;23}24 25header {26 margin-left: 3px;27 margin-right: 3px;28 margin-top: 5px;29 margin-bottom: 15px;30 padding: 15px;31 color: #0042A1;32}33 34header a {35 text-decoration: none;36}37 38header .title {39 font-weight: bold;40 font-size: x-large;41 color: #0042A1;42 43 /* border-left-width: 5px;44 border-left-style: solid;45 border-left-color: #0042A1;46 padding-left: 10px; */47}48 49header img.logo {50 margin-right: 1px;51 width: 38px;52 height: 38px;53 vertical-align: middle;54 transform: translate(0px, -3px);55}56 57header img.title {58 margin-right: 1px;59 width: 128px;60 /* height: 28px; */61 vertical-align: middle;62 transform: translate(0px, -3px);63 background-color: #193B82;64 padding: 3px;65 border-radius: 3px;66}67 68 69header .subtitle {70 font-weight: bold;71 font-size: medium;72 color: rgb(99, 99, 99);73}74 75header .charnum {76 font-weight: bolder;77 font-size: x-large;78 color: #F8D548;79 -webkit-text-stroke: 1px black;80}81 82nav {83 margin-top: 5px;84 margin-bottom: 5px;85 line-height: 180%; 86}87 88nav img {89 width: 20px;90 opacity: 0.75;91}92 93nav .sections {94 margin-bottom: 10px;95 text-align: center;96 text-align: center;97 98 width: 100%;99 border-radius: 5px;100 101 font-weight: bold;102 font-size: large;103}104 105nav .sections div {106 107 position: relative;108 display: inline-block;109 110 margin-left: 5px;111 margin-right: 5px;112 padding: 5px;113 width: 40%;114 text-align: center;115 116 transition: 0.25s;117}118 119nav .section_selected {120 color: white;121 /* background-color: rgb(99, 99, 99); */122 background-color: rgb(69, 69, 69);123 124 box-shadow: 2px 2px 2px 2px lightgray;125 border-radius: 10px;126 127 /* transform: translate(0px, -2px); */128}129 130nav .section_selected:hover {131 transform: translate(0px, -3px);132}133 134nav .section_normal {135 color: rgb(68, 68, 68);136 /* transform: translate(0px, 2px); */137 138 border-color: #F3F3F4;139 border-radius: 10px;140 border-width: 1px;141 border-style: solid;142}143 144 145nav .section_normal:hover {146 color: black;147 transform: translate(0px, -3px);148 149 box-shadow: 2px 2px 2px 2px lightgray;150 border-radius: 10px;151}152 153#tags {154 clear: both;155 /* margin-top: 25px; */156 /* white-space: nowrap;157 overflow: auto; */158 margin: 5px;159}160 161#tags button {162 position: relative;163 display: inline-block;164 border: none;165 padding: 8px 10px 8px 10px;166 text-decoration: none;167 font-size: medium;168 transition: 0.25s;169 margin: 4px 4px 4px 4px;170 171 border-radius: 50vh;172}173 174.tag {175 color: #3982C1;176 background-color: #F2F9FE;177}178 179.tag:hover {180 color: #2C679D;181 background-color: #E3F1FD;182 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);183}184 185.tag_special {186 font-weight: bold;187 color: rgb(255, 0, 242);188 background-color: rgb(247, 247, 247);189}190 191.tag_special:hover {192 color: black;193 background-color: darkgray;194 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);195}196 197.tag_selected {198 background-color: #00A0E2;199 color: white;200 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);201}202 203#pledges_message {204 text-align: center;205 padding-top: 100px;206 padding-bottom: 100px;207 font-size: x-large;208 font-weight: normal;209 color: rgb(68, 68, 68);210 line-height: 200%;211}212 213#pledges_message span {214 color: #00A0E2;215 font-weight: bolder;216 font-size: xx-large;217}218 219.pledge {220 margin: 15px;221 background-color: white;222 box-shadow: 0 5px 5px #F3F3F4;223 border-radius: 15px;224 border-color: #F3F3F4;225 border-width: 1px;226 border-style: solid;227 transition: 0.25s;228}229 230.pledge:hover {231 background-color: #E3F1FD;232}233 234.pledge_expandable {235 padding: 5px;236 margin: 5px;237}238 239.pledge_intro {240 padding: 10px;241 margin: 5px;242}243 244.pledge_poster {245 float: inline-start;246 width: 50px;247}248 249.pledge_poster img {250 width: 50px;251 height: 50px;252 border-radius: 5px;253}254 255.pledge_text {256 padding-left: 15px;257 padding-right: 15px;258 text-align: center;259}260 261.pledge_location {262 color: #0B68B3;263 font-size: x-large;264 font-weight: bold;265}266 267.pledge_title {268 margin-bottom: 5px;269 color: black;270 font-size: x-large;271 font-weight: bold;272}273 274.pledge_description {275 margin-top: 15px; 276 font-size: large;277 line-height: 150%;278 color: rgb(112, 110, 110); 279}280 281.pledge_more {282 text-align: center;283}284 285.pledge_more img {286 width: 20px;287 height: 20px;288 opacity: 0.55;289}290 291.links {292 display: none;293 transition: 0.25s;294}295 296.link_website {297 margin-top: 20px;298 margin-bottom: 20px;299 margin-left: 0px;300 margin-right: 0px;301 padding-top: 15px;302 padding-bottom: 15px;303}304 305.link_website a {306 text-decoration: none;307 color: white;308 background-color:#0B68B3;309 padding: 15px;310 margin: 20px;311 border-radius: 10px;312 line-height: 180%;313}314 315.link_website a img {316 width: 15px;317 margin-left: 10px;318 margin-right: 5px;319}320 321.links div {322 text-align: center;323 margin-top: 15px;324 margin-bottom: 15px;325}326 327.links img {328 width: 100%;329 max-width: 950px;330}331 332.links iframe {333 width: 100%;334 max-width: 950px;335 height: 320px;336}337 338.pledge_fold {339 text-align: center;340 padding-top: 10px;341 padding-bottom: 10px;342}343 344.pledge_fold img {345 width: 15px;346 opacity: 0.35;347 margin-right: 5px;348}349 350#pledges_gotop {351 text-align: center;352 margin: 35px 15px 35px 15px ;353 padding: 10px;354 border-width: 1px;355 border-style: dotted;356 border-color: lightgray;357 transition: 0.25s;358 color: #00A0E2;359}360 361#pledges_gotop:hover {362 background-color: #E3F1FD;363}364 365#pledges_gotop img {366 width: 35px;367 opacity: 0.45;368}369 370#pledges_gotop_tags {371 margin-top: 30px;372 color: rgb(112, 110, 110);373 font-size: small;374 line-height: 150%;375}376 377footer {378 text-align: center;379 margin-top: 15px;380 margin-bottom: 15px;381 padding-left: 20px;382 padding-right: 15px;383 font-size: small;384 385 color: rgb(112, 112, 112);386}387 388footer h4 {389 margin-top: 15px;390}391 392footer a {393 color: rgb(112, 112, 112);394}395 396footer a:hover {397 font-weight: bold;398}399 400footer .sharing {401 text-align: center;402 margin: 5px;403}404 405footer .sharing img {406 padding:15px;407 width: 32px;408}409 410footer .credit img {411 width: 90%;412 max-width: 120px;413 /* border-radius: 50%; */414 margin-top: 15px;415}416 417footer .creators {418 width: 100%;419 420}421 422footer .creator {423 vertical-align: top;424 position: relative;425 display: inline-block;426 width: 40%;427}428 429footer .name {430 font-weight: bold;431 font-size: large;432}433 434footer .thanks {435 clear: both;436}437 438 439footer .credit a {440 text-decoration: none;441}442 443footer .credit {444 margin-bottom: 25px;445}446 </style>447 <meta charset="utf-8">448 <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">449 <meta content="#FFFFFF" name="theme-color">450 <meta content="이재명 후보의 공약을 관심주제에 맞추어 보여드립니다" name="description">451 <meta content="공약한판정리" property="og:title">452 <meta content="이재명 후보의 공약을 관심주제에 맞추어 보여드립니다" property="og:description">453 <meta content="" property="og:image">454 <title>455 제20대 대통령선거 공약한판정리 기호1번 이재명456 </title>457 <!-- Global site tag (gtag.js) - Google Analytics -->458 </head>459 <body>460 <header id="header" onclick="reloadPage();">461 <div class="title">462 <img alt="이재명" class="logo" src="rick.jpg">463 <img alt="공약한판정리" class="title" src="rick.jpg">464 <span class="subtitle">465 제20대 대통령선거466 </span>467 <span class="subtitle">468 기호469 <span class="charnum">470 1471 </span>472 번 이재명473 </span>474 </div>475 </header>476 <nav>477 <div class="sections">478 <div class="section_selected" id="section_0" onclick="selectSection(0);">479 관심분야480 </div>481 <div class="section_normal" id="section_1" onclick="selectSection(1);">482 우리지역483 </div>484 </div>485 <div id="tags">486 <button class="tag" onclick="selectTag('건강')">487 건강488 </button>489 <button class="tag" onclick="selectTag('남성')">490 남성491 </button>492 <button class="tag" onclick="selectTag('노후')">493 노후494 </button>495 <button class="tag" onclick="selectTag('농수산')">496 농수산497 </button>498 <button class="tag" onclick="selectTag('반려동물')">499 반려동물500 </button>501 <button class="tag" onclick="selectTag('부동산')">502 부동산503 </button>504 <button class="tag" onclick="selectTag('산업')">505 산업506 </button>507 <button class="tag" onclick="selectTag('생활편의')">508 생활편의509 </button>510 <button class="tag" onclick="selectTag('세금')">511 세금512 </button>513 <button class="tag" onclick="selectTag('안전')">514 안전515 </button>516 <button class="tag" onclick="selectTag('여성')">517 여성518 </button>519 <button class="tag" onclick="selectTag('육아')">520 육아521 </button>522 <button class="tag" onclick="selectTag('장애인')">523 장애인524 </button>525 <button class="tag" onclick="selectTag('정의')">526 정의527 </button>528 <button class="tag" onclick="selectTag('지역균형')">529 지역균형530 </button>531 <button class="tag" onclick="selectTag('청년')">532 청년533 </button>534 <button class="tag" onclick="selectTag('취업노동')">535 취업노동536 </button>537 <button class="tag" onclick="selectTag('투자')">538 투자539 </button>540 <button class="tag" onclick="selectTag('학업')">541 학업542 </button>543 <button class="tag" onclick="selectTag('환경')">544 환경545 </button>546 <button class="tag" onclick="selectTag('휴식')">547 휴식548 </button>549 </div>550 </nav>551 <main>552 <div id="pledges_message">553 “나의554 <span>555 [ ]556 </span>557 를 위한 약속”558 </div>559 <div id="pledges">560 </div>561 <div id="pledges_gotop" onclick="moveToTop();">562 <div>563 <img alt="위로 화살표" src="rick.jpg">564 </div>565 <div id="gotop_message">566 관심분야를 선택하세요567 </div>568 <div id="pledges_gotop_tags">569 <span>570 #건강571 <span>572 #남성573 <span>574 #노후575 <span>576 #농수산577 <span>578 #반려동물579 <span>580 #부동산581 <span>582 #산업583 <span>584 #생활편의585 <span>586 #세금587 <span>588 #안전589 <span>590 #여성591 <span>592 #육아593 <span>594 #장애인595 <span>596 #정의597 <span>598 #지역균형599 <span>600 #청년601 <span>602 #취업노동603 <span>604 #투자605 <span>606 #학업607 <span>608 #환경609 <span>610 #휴식611 </span>612 </span>613 </span>614 </span>615 </span>616 </span>617 </span>618 </span>619 </span>620 </span>621 </span>622 </span>623 </span>624 </span>625 </span>626 </span>627 </span>628 </span>629 </span>630 </span>631 </span>632 </div>633 </div>634 </main>635 <footer>636 <div class="sharing">637 <a onclick="shareFacebook()">638 <img alt="페이스북으로 공유하기" src="rick.jpg">639 </a>640 <a onclick="shareKakaoTalk()">641 <img alt="카카오톡으로 공유하기" src="rick.jpg">642 </a>643 <a onclick="shareTelegram()">644 <img alt="텔레그램으로 공유하기" src="rick.jpg">645 </a>646 <a onclick="shareLink()">647 <img alt="웹사이트 주소 공유하기" src="rick.jpg">648 </a>649 </div>650 <div>651 이 웹사이트는 공개된 정보를 사용합니다. 652 오픈된 소스 확인 및 제안은653 <a rel="noopener noreferrer" target="_blank">654 GitHub 저장소655 </a>656 를 확인하세요.657 </div>658 <div class="credit">659 <h4>660 개인 프로젝트로 만든 웹사이트입니다.661 </h4>662 <div class="creators">663 <div class="creator">664 <a rel="noopener noreferrer" target="_blank">665 <div>666 <img alt="김윤이 사진" src="rick.jpg">667 </div>668 <div class="name">669 김윤이670 </div>671 <div>672 더불어민주당1호 국가인재영입673 </div>674 <div>675 (주)뉴로어소시에이츠 CEO676 </div>677 </a>678 </div>679 <div class="creator">680 <a rel="noopener noreferrer" target="_blank">681 <div>682 <img alt="박종욱 사진" src="rick.jpg">683 <br>684 </div>685 <div class="name">686 박종욱687 </div>688 <div>689 클리앙 닉네임 얼음폭탄690 </div>691 <div>692 (주)뉴로어소시에이츠 CTO693 </div>694 </a>695 </div>696 </div>697 </div>698 <div class="thanks">699 <a>700 나를위해이재명.com701 </a>702 주소를 연결해주신 703 디씨인사이드 이재명 갤러리의 도메인 님께 감사드립니다.704 </div>705 <div>706 <h4>707 참고자료708 </h4>709 <div>710 <a>711 더불어민주당 이재명 후보 공약 목록(백업)712 </a>713 ·714 <a>715 재명이네 마을 공약센터(백업)716 </a>717 ·718 <a>719 이재명 후보 페이스북720 </a>721 ·722 <a>723 이재명 후보 블로그724 </a>725 ·726 <a>727 이재명 후보 유튜브728 </a>729 ·730 <a>731 재명이네 소극장 유튜브732 </a>733 ·734 <a>735 더불어민주당 유튜브736 </a>737 ·738 <a>739 정철 카피라이터 페이스북740 </a>741 </div>742 <div>743 <h4>744 문의745 </h4>746 <a>747 [Email Redacted]748 </a>749 </div>750 </div>751 <article class="noti">752 2022년 3월 9일, 제20대 대통령선거가 치뤄졌습니다. 753 이재명 후보의 공약들은 이곳에 기록으로 남겨둡니다. 754 그동안 공약한판정리에 좋은 의견을 주신 분들과, 755 여기 정보들을 통해 소중한 한 표를 결정하신 모든 분들께 감사드립니다.756 </article>757 </footer>758 </body>759</html>760