Spaces:

ybjeong
/

leaderboard_kr_static

Running

File size: 19,000 Bytes

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>🏅 Korean AI leaderboard</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

		<style>
    body {
        font-family: "Noto Sans KR", "Malgun Gothic", "맑은 고딕", Dotum, "돋움", sans-serif;
        margin: 0;
        padding: 0;
        /*background-color: #f4f4f4;*/
        color: #333;
		margin-left: 10%;
		margin-right: 10%;
    }
    .header {
        background-color: #fff;
        /*box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/
        padding: 20px;
    }
    .content {
        /*margin: 20px;*/
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        /*box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/
    }

	.table-task-list tbody tr.selected {
		background-color: #e9ecef !important; 
	}

    .table-task-list, .table-task-detail {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #e5e7eb;
        margin-top: 20px; /* 두 테이블 사이에 공백 추가 */
    }

    .table-task-list thead, .table-task-detail thead {
        background-color: white;
        color: black;
        font-weight: bold;
		text-align: left;
    }

    .table-task-list td{
        border-top: none;
        border-bottom: none;
        border-left: 1px solid #e5e7eb;
        padding: 8px;
        text-align: left;
    }

    .table-task-list td:last-child{
        border-right: 1px solid #e5e7eb;
    }

    .table-task-list tbody tr:hover{
        background-color: #f1f1f1;
        cursor: pointer;
    }

    .table-task-list tbody tr:nth-child(odd){
        background-color: #f9fafb;
    }

    .table-task-list tbody tr:nth-child(even){
        background-color: white;
    }

    .no-border{
    	border-top: 0px !important;
    }

    .table-task-detail thead tr th{
		padding:20px 10px;
		text-align: center;
		border-left: 1px solid #ddd;
    	border-bottom: 1px solid #ddd;
	}

    .table-task-detail thead{
    	color:#111;
    	background-color: #f6f6f6;
    	border-left: 1px solid #ddd;
    	border-top: 1px solid #292f38;
    }
    .table-task-detail td{
    	color: #111;
    	padding:20px 10px;
    	text-align: center;
    	border-left: 1px solid #ddd;
    	border-top: 1px solid #ddd;
    	max-width: 300px;
    }

    .tabs {
        display: flex;
        margin-bottom: 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .tab-link {
        font-size: 20px;
        padding: 10px 20px;
        color: darkgray;
        background-color: #fff;
        border: 1px solid #e5e7eb;
        border-bottom: none;
        border-radius: 5px 5px 0 0;
        margin-right: 5px;
        cursor: pointer;
        position: relative;
        transition: color 0.3s, background-color 0.3s;
    }

    .tab-link.active {
        color: black;
        z-index: 1;
        margin-bottom: -1px;
    }

    .tab-content {
        border: 1px solid #e5e7eb;
        border-top: none;
        padding: 10px;
        position: relative;
    }

    .tab-link:hover {
        color: black;
    }

	.notice-task-name{
		margin: 0px 0px 15px 0px;
	}

	.notice-task-period{
		font-weight: 500;
		font-size:20px;
	}

	.custom-hr {
		border: none;
		height: 1px;
		background-color: #e5e7eb;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.circle-list {
        list-style-type: circle;
		margin-left: -20px;
    }
	#header_title{
		text-align: center;
	}
	#header_content{
		font-size:15px;
	 }
	.detail-div
	{margin-left:2%;}
	.task-notice-div{
	}
	.notice-task-info{
		margin-top:30px;
	}
	a:link, a:visited, a:hover, a:active {
    	color: #1d4ed8; 
	}
	.toggle-button{
		cursor:pointer;
		background-color: white;
		border:1px solid #ccc;
		padding:5px 8px;
		margin: 0px 10px 0px 0px;
	}
	.fas{
		color:#3fb9ae;
	}
	.rank-class{
		text-align: left !important;
	}
	.table-div{
		height: 200px;
		overflow: auto;
	}
	.custom-list {
        list-style-type: none; /* 기본 목록 스타일 제거 */
        padding-left: 0; /* 왼쪽 패딩 제거 */
    }
    .custom-list > li:before {
        content: counter(item) ") "; /* 번호와 괄호를 추가 */
        counter-increment: item; /* 번호 증가 */
    }
    .custom-list {
        counter-reset: item; /* 목록 시작 시 카운터 리셋 */
    }
    .sub-list {
        list-style: none; /* 하위 목록 스타일 제거 */
        padding-left: 20px; /* 하위 목록 왼쪽 패딩 추가 */
    }
    .sub-list li:before {
        content: "- "; /* 하이픈 추가 */
    }
</style>
	</head>
	<body>
		<div class="header">
			<div id="header_title"><h2>🏅 Korean AI Malpyeong leaderboard</h2></div>
				<br><br>
				<ul class="circle-list">
				    <li>Korean AI Malpyeong Leaderboard(인공지능(AI)말평)는 국립국어원의 한국어 능력 평가 체계입니다.</li><br><br>
				    <li>인공지능(AI)말평에서 '2024 인공지능의 한국어 능력 평가' 경진 대회를 개최합니다.<br>
				        <ol class="custom-list"><br>
				            <li>주제: 인공지능, 대화의 맥락을 읽고 핵심을 요약하다</li><br>
				            <li>평가 과제:<br>
				                <ul class="sub-list"><br>
				                    <li>대화 맥락 추론: 발화의 맥락을 정확하게 추론한 문장을 선택하는 과제</li><br>
				                    <li>일상 대화 요약: 다자간 대화에서 주제별 요약문을 생성하는 과제</li><br>
				                </ul>
				            </li>
				            <li>접수 기간: 2024. 7. 1. (월) ~ 2024. 8. 23. (금)</li><br>
				            <li>제출 방법: <a href="https://kli.korean.go.kr/benchmark/home.do">국립국어원 인공지능(AI)말평</a>에서 제출</li>
				        </ol>
				    </li>
				    점수, 상 관련
💯🥇🥈🥉🏅🎖🏆
책 관련
📔📕📖📗📘📙📚📓📒📃📜📄📑📰🧾📝📋
펜 관련
✍✏✒🖋🖊🖌🖍
인물 관련
🧐
👩‍🎓👨‍🎓
👩‍🏫👨‍🏫
👩‍💻👨‍💻
코딩 관련
💻🖥
목적 관련
🏁🏳🏴🚩
이외 활용 가능
💬🔈🔉🔊📢📣🔔

				</ul>
			</div>
		</div>
		<div class="content">
			<div class="tabs">
				<div class="tab-link active" id="title-progress">📝 진행 중 과제</div>
				<div class="tab-link" id="title-past">📝 지난 과제</div>
			</div>
			<div class="tab tab-content" id = "task-progress">
				<div class="table-div">
					<table id = "table-progress" class="table-task-list">
						<thead>
							<tr>
								<td>No</td>
								<td>과제명</td>
								<td>과제 분류</td>
								<td>과제 기간</td>
								<td>과제 상태</td>
							</tr>
						</thead>	
						<tbody>
						</tbody>
					</table>
				</div>
				<div id="hr-area-progress"></div>
				<div class="detail-div">

					<h1 class= "notice-task-name" id= "notice-task-name-progress"></h1>
					<span class= "notice-task-period" id= "notice-task-period-progress"></span>

					<div id= "table-progress-detail-title"></div>
					<div id="table-progress-detail-info"></div>
					<table id = "table-progress-detail" class="table-task-detail" style="display:none;">
						<thead>
							<tr>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>

					<div id="task-progress-notice-div" class= "task-notice-div">
						<div class= "notice-task-info"></div>
					</div>
				</div>
			</div>

			<div class="tab tab-content" id= "task-past" style="display:none;">
				<div class="table-div">
					<table id = "table-past" class="table-task-list">
						<thead>
							<tr>
								<td>No</td>
								<td>과제명</td>
								<td>과제 분류</td>
								<td>과제 기간</td>
								<td>과제 상태</td>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
				<div id= "hr-area-past"></div>
				<div class="detail-div">

					<h1 class= "notice-task-name" id= "notice-task-name-past"></h1>
					<span class= "notice-task-period" id= "notice-task-period-past"></span>

					<div id= "table-past-detail-title"></div>
					<div id="table-past-detail-info"></div>
					<table id = "table-past-detail" class="table-task-detail" style="display:none;">
						<thead>
							<tr>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>

					<div  id="task-past-notice-div" class= "task-notice-div">
						<h1 class= "notice-task-name"></h1>
						<span class= "notice-task-period"></span>
						<div class= "notice-task-info"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
        var taskOrdtmStatusCdMap = {
            TEMP_STOR: "임시 저장",
            REG_COMP: "등록 완료",
            PUB_COMP: "공고 완료",
            OPER_ING: "과제 운영 중",
            OPER_END: "과제 종료",
            OPER_WAIT: "운영자 확인 대기",
            SUB_END: "제출 대기",
            OKAY_ING: "승인 요청 중",
            OKAY_END: "승인 완료",
            OKAY_FAIL: "제출 반려",
            RE_OKAY_ING: "재승인 요청 중",
            RE_OKAY_FAIL: "재승인 반려",
            DELETE: "삭제"
        };

        var taskOrdtmTyCdMap = {
            PRER: "사전 공개",
            CPTHB: "경진 대회",
            ORDTM: "상시 과제",
            ACADEMCON: "학술 대회",
            TRIRUN: "시범 운영"
        };

		now_task = "progress"

		$(document).ready(function() {
			getRow(now_task);

			$('.tab-link').click(function () {
				var selectedTab = $(this).attr('id').split('-')[1];
				now_task = selectedTab;
				$('.tab-link').removeClass('active');
				$(this).addClass('active');

				$('.tab').hide();
				getRow(now_task);
			});

			 $('.table-task-list tbody').on('click', 'tr', function() {
				$('.table-task-list tr').removeClass('selected');
				$(this).addClass('selected');
			});
		});

		function getRow(checked_task){
			postdata = {"checked_progress":checked_task}
            var clCd = (now_task === "progress") ? "ING_TASK" : "END_TASK";
            var url = "https://kli.korean.go.kr/benchmark/taskOrdtm/useTaskOrdtmListData.do?clCd="+clCd+"&siteType=USERLIST&partInYN=N"
            $.ajax({
				type: 'GET',
                url: url,
                dataType: 'JSON',
                contentType: "application/json; charset=utf-8",
                success: function(response) {
                    var tableBody = (checked_task === "progress") ? $('#table-progress tbody') : $('#table-past tbody');
                    tableBody.empty(); // 기존 내용을 비웁니다.
                    var rowNum = 0
                    response.forEach(function(item) {
                        rowNum = rowNum + 1
                        var row = $('<tr>').attr('data-taskid', item['taskOrdtmId']);
                        // var row = $('<tr>');
                        row.append($('<td>').text(rowNum)); // No
                        row.append($('<td>').text(item['taskOrdtmNm'])); // 과제명
                        row.append($('<td>').text(taskOrdtmTyCdMap[item['taskOrdtmTyCd']])); // 과제 분류(사전공개 등)
                        row.append($('<td>').text(item['taskOrdtmBgngDt'] + " - " + item['taskOrdtmEndDt'])); // 과제 기간
                        row.append($('<td>').text(taskOrdtmStatusCdMap[item['taskOrdtmStatusCd']])); // 과제 상태 (사전공개중 등)
                        tableBody.append(row);

                        // 클릭 이벤트 추가
                        row.on('click', function() {
                            $('tr').removeClass('selected');
                            $(this).addClass('selected');
                            var taskId = $(this).data('taskid'); // data-taskid 속성에서 과제 식별 ID 가져오기
                            TaskRowClicked(taskId); // 과제 식별 ID를 인자로 넘겨주면서 함수 실행
                        });
                    });
                    $('#task-' + now_task).show(); 
                },
                error: function(request, status, error) {
                    alert('ajax 통신 실패');
                    alert(error);
                }
             })
		}
		function decodeHtml(html) {
		    var txt = document.createElement("textarea");
		    txt.innerHTML = html;
		    return txt.value;
		}

		function TaskRowClicked(taskId) {
			$.ajax({
				// type: 'POST',
				type: 'GET',
				url: 'https://kli.korean.go.kr/benchmark/taskOrdtm/taskLeaderBoardData.do?taskOrdtmId='+taskId,
				dataType: 'JSON',
				contentType: "application/json",
				success: function(response) {

					var hrArea = now_task === "progress" ? $('#hr-area-progress') : $('#hr-area-past');
					hrArea.empty();
					hrArea.html("<br><br><hr class=\"custom-hr\"><br>");
                
                
					//task에 대한 정보
					var noticeDetail = now_task === "progress" ? $('#task-progress-notice-div') : $('#task-past-notice-div');
					var taskNameDiv = ""
					var taskPeriodDiv = ""
					if (now_task == "progress"){
						taskNameDiv = $('#notice-task-name-progress');
						taskPeriodDiv = $('#notice-task-period-progress');
					}
					else{
						taskNameDiv = $('#notice-task-name-past');
						taskPeriodDiv = $('#notice-task-period-past');	
					}
					var taskInfoDiv = noticeDetail.find('.notice-task-info');
                
					taskNameDiv.empty();
					taskPeriodDiv.empty();
					taskInfoDiv.empty();
                
					var formattedTaskInfo = response.taskOrdtmInfo.description;
					formattedTaskInfo = decodeHtml(formattedTaskInfo)
                
					taskNameDiv.html(response.taskOrdtmInfo.name);
					taskPeriodDiv.html(response.taskOrdtmInfo.taskOrdtmBgngDt + " - " + response.taskOrdtmInfo.taskOrdtmEndDt);
					if (formattedTaskInfo != null){

						taskInfoDiv.html(formattedTaskInfo);
					}
					else{
						taskInfoDiv.html("과제 개요가 존재하지 않습니다.");	
					}

					var tableTitle = now_task === "progress" ? $('#table-progress-detail-title') : $('#table-past-detail-title');
					tableTitle.empty();
					// tableTitle.html("<br><br><hr class=\"custom-hr\"><br><h1>순위표</h1><br><br>");
					tableTitle.html("<br><br><span style='font-size:18pt; font-weight:bold; font-family: /'나눔고딕코딩, NanumGothicCoding, sans-serif/' '><br>순위표<br></span><br><br>");

					var tableDetail = now_task === "progress" ? $('#table-progress-detail') : $('#table-past-detail');
					var thead = tableDetail.find('thead');
					var tbody = tableDetail.find('tbody');
                
					tableDetail.show(); 
					tableDetail.css("display", "table"); 
                
					// 헤더를 업데이트
					thead.empty(); 
					var headerRow = $('<tr>');
					

					if (response.leaderboard != null) {
		                var leaderboard = response.leaderboard;

		                //헤더 세팅
		                var detailKeys = leaderboard[0].taskOrdtmModels[0].taskOrdtmScore.taskOrdtmItemScores[0].taskOrdtmItemIdxScores.map(function(item) {
		                    return item.taskOrdtmItemIdx.idxNm;
		                });
		                var headers = ["Rank", "Team", "Model Name", "Evaluation Score"].concat(detailKeys, "Submit Date");
		                var headerRow = $('<tr>');
		                headers.forEach(function(headerTitle) {
		                    headerRow.append($('<th>').text(headerTitle));
		                });

		                thead.append(headerRow);
		                tbody.empty();

		                var rank = 0;

		                leaderboard.forEach(function (team) {
			                rank += 1;
			                var models = team.taskOrdtmModels;
			                var teamClass = 'team-' + team.teamNo;

		                    models.forEach(function (model, modelIndex) {
			                    var row = $('<tr>').addClass(teamClass);
			                    if (modelIndex === 0) {
					                var toggleButton = $('<button>').addClass('toggle-button');
					                toggleButton.append('<i class="fas fa-chevron-down"></i>');  // Use FontAwesome icon
					                row.append($('<td>').addClass('rank-class').append(toggleButton).append($('<span>').text(rank)));
					                row.append($('<td>').text(team.teamNm));
					            } else {
					                row.append($('<td>').addClass('no-border').text(''));
					                row.append($('<td>').addClass('no-border').text(''));
					            }

		                        // Model name
		                        row.append($('<td>').text(decodeHtml(model.modelNm)));

		                        // Evaluation score
		                        row.append($('<td>').text(parseFloat(model.score).toFixed(7)).css('color', '#ee3a49'));

		                        // Detail scores
		                        var scores = model.taskOrdtmScore.taskOrdtmItemScores[0].taskOrdtmItemIdxScores;
		                        detailKeys.forEach(function (key) {
		                        	var scoreDetail = scores.find(s => s.taskOrdtmItemIdx.idxNm === key);
		                            var score = scoreDetail ? parseFloat(scoreDetail.score).toFixed(7) : 'N/A';
		                            row.append($('<td>').text(score));
		                        });

		                        var submitDate = new Date(model.sbmsnDt);
		                        var formattedDate = submitDate.getFullYear() + '.' +
		                            ('0' + (submitDate.getMonth() + 1)).slice(-2) + '.' +
		                            ('0' + submitDate.getDate()).slice(-2) + '. ' +
		                            ('0' + submitDate.getHours()).slice(-2) + ':' +
		                            ('0' + submitDate.getMinutes()).slice(-2);
		                        row.append($('<td>').text(formattedDate));

		                        tbody.append(row);

		                        if (modelIndex !== 0) {
			                        row.hide(); 
			                    }
		                    });

		                    $('.' + teamClass + ' .toggle-button').click(function() {
					            var icon = $(this).find('i');
					            var isExpanded = icon.hasClass('fa-chevron-down');
					            icon.toggleClass('fa-chevron-down', !isExpanded).toggleClass('fa-chevron-up', isExpanded);
					            $('.' + teamClass + ':not(:first)').toggle();
					        });
		                });
		            }
		            //아직 순위표가 없는 경우
		            else{
		            	var tableInfoDiv = now_task === "progress" ? $('#table-progress-detail-info') : $('#table-past-detail-info');
		            	tableInfoDiv.html("등록된 순위가 없습니다.")
		            }
					
				},
				error: function(xhr, status, error) {
					alert('Error: ' + error.message);
				}
			});
		}
	</script>
</html>