Spaces:
Sleeping
Sleeping
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Summarization Arena Leaderboard</title> | |
<style> | |
.tooltip { | |
cursor: pointer; | |
color: blue; | |
text-decoration: underline; | |
} | |
table { | |
border-collapse: collapse; | |
width: 100%; | |
} | |
th, td { | |
border: 1px solid #ddd; | |
padding: 8px; | |
text-align: left; | |
} | |
th { | |
background-color: #f2f2f2; | |
} | |
#prompt-display { | |
display: none; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="leaderboard-container"></div> | |
<div id="prompt-display"> | |
<h2 id="prompt-title"></h2> | |
<pre id="prompt-content"></pre> | |
<button onclick="showLeaderboard()">Back to Leaderboard</button> | |
</div> | |
<script> | |
function sortBy(column) { | |
// This function will be implemented in Python and injected here | |
} | |
function showPrompt(id, prompt) { | |
document.getElementById('leaderboard-container').style.display = 'none'; | |
document.getElementById('prompt-display').style.display = 'block'; | |
document.getElementById('prompt-title').textContent = 'Prompt for ' + id; | |
document.getElementById('prompt-content').textContent = prompt; | |
} | |
function showLeaderboard() { | |
document.getElementById('leaderboard-container').style.display = 'block'; | |
document.getElementById('prompt-display').style.display = 'none'; | |
} | |
document.addEventListener('DOMContentLoaded', function() { | |
const leaderboardContainer = document.getElementById('leaderboard-container'); | |
leaderboardContainer.addEventListener('click', function(event) { | |
if (event.target.classList.contains('tooltip')) { | |
const id = event.target.getAttribute('data-id'); | |
const prompt = event.target.getAttribute('data-prompt'); | |
showPrompt(id, prompt); | |
} | |
}); | |
}); | |
</script> | |
</body> | |
</html> | |