File size: 6,272 Bytes
146b688 f7e9cda 9355489 ca60da9 146b688 b42419d 146b688 f7e9cda ca60da9 f7e9cda 146b688 9355489 146b688 f7e9cda 146b688 ca60da9 f7e9cda 146b688 f7e9cda 146b688 f7e9cda 146b688 b42419d 891eeb1 b42419d ca60da9 b42419d ca60da9 b42419d ca60da9 b42419d 146b688 9355489 146b688 ca60da9 b42419d 891eeb1 b42419d 891eeb1 146b688 9355489 146b688 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stick To Your Role! Leaderboard</title>
<!-- Include Bootstrap CSS for styling -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css">
<!-- Include DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
<!-- Custom CSS for additional styling -->
<style>
body {
background-color: #f8f9fa;
font-family: 'Arial', sans-serif;
}
.container {
max-width: 1200px; /* Limit the width of the container */
margin: auto; /* Center the container */
padding: 15px; /* Add some padding */
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
h2 {
color: #333;
margin-top: 30px;
text-align: center;
}
.table-responsive {
margin-top: 20px;
}
table {
border-collapse: separate;
border-spacing: 0;
font-size: 12px; /* Reduce the font size */
width: 100%;
border: none; /* Remove any default border */
}
table thead th {
background-color: #610b5d;
color: white;
border: 1px solid #dee2e6;
text-align: left;
}
table tbody tr {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
table tbody tr:hover {
background-color: #f1f1f1;
}
table td, table th {
padding: 5px; /* Reduce padding */
border: 1px solid #dee2e6;
}
table th:first-child {
border-top-left-radius: 10px;
}
table th:last-child {
border-top-right-radius: 10px;
}
.section{
padding-left: 150px;
padding-right: 150px;
text-align: left;
}
.citation-section {
margin-top: 5px;
text-align: center;
}
.citation-box {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 10px;
margin-top: 5px;
font-size: 15px;
text-align: left;
font-family: 'Courier New', Courier, monospace;
white-space: pre;
}
.image-container {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 40px;
}
.image-container a {
flex: 1;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: auto;
}
.about-button {
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
.custom-button {
background-color: #610b5d;
color: #fff; /* Set white text color */
border-radius: 15px; /* Rounded edges */
padding: 10px 20px; /* Padding for the button */
font-size: 18px; /* Increase font size */
text-decoration: none; /* Remove underline */
}
.custom-button:hover {
background-color: #812b7d;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<h1 class="mt-5">Stick To Your Role! Leaderboard</h1>
<div class="table-responsive">
<!-- Render the table HTML here -->
{{ table_html|safe }}
</div>
<div class="image-container">
<a href="{{ url_for('static', filename='figures/cardinal.svg') }}" target="_blank">
<img src="{{ url_for('static', filename='figures/cardinal.svg') }}" alt="Cardinal">
</a>
<a href="{{ url_for('static', filename='figures/ordinal.svg') }}" target="_blank">
<img src="{{ url_for('static', filename='figures/ordinal.svg') }}" alt="Ordinal">
</a>
</div>
<div class="about-button">
<a href="{{ url_for('about') }}" class="custom-button mt-3">Learn More About This Project</a>
</div>
<div class="citation-section">
<p>If you found this project useful, please cite our related paper:</p>
<div class="citation-box" id="citation-text">
@article{kovavc2024stick,
title={Stick to your Role! Stability of Personal Values Expressed in Large Language Models},
author={Kova{\v{c}}, Grgur and Portelas, R{\'e}my and Sawayama, Masataka and Dominey, Peter Ford and Oudeyer, Pierre-Yves},
journal={arXiv preprint arXiv:2402.14846},
year={2024}
}
</div>
</div>
</div>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<!-- Include DataTables JS -->
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<!-- Initialize DataTables -->
<script>
$(document).ready(function() {
const table = $('table').DataTable({
"paging": false,
"info": false,
"columnDefs": [
{ "orderable": false, "targets": 0 },
{ "searchable": false, "targets": 0 }
],
"order": [[ 2, 'desc' ]],
"drawCallback": function(settings) {
var api = this.api();
api.column(0, {order:'applied'}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}
});
});
</script>
</body>
</html>
|