Spaces:

ybjeong
/

leaderboard_kr_static

Running

App Files Files Community

leaderboard_kr_static / index.html

ybjeong

Update index.html

5979192 verified 5 months ago

raw

history blame contribute delete

19 kB

	<!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>