|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>{{ model_name }}</title> |
|
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css"> |
|
|
|
<style> |
|
body { |
|
background-color: #f8f9fa; |
|
font-family: 'Arial', sans-serif; |
|
} |
|
.container { |
|
max-width: 1200px; |
|
margin: auto; |
|
padding: 20px; |
|
background: #fff; |
|
border-radius: 8px; |
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1); |
|
} |
|
h1 { |
|
color: #333; |
|
text-align: center; |
|
} |
|
.model-name { |
|
font-size: 24px; |
|
font-weight: bold; |
|
text-align: center; |
|
margin-top: 40px; |
|
margin-bottom: 40px; |
|
padding: 20px; |
|
background-color: #610b5d; |
|
color: #fff; |
|
border-radius: 15px; |
|
} |
|
.image-section { |
|
text-align: center; |
|
margin-top: 40px; |
|
} |
|
.image-section h2 { |
|
font-size: 30px; |
|
margin-bottom: 20px; |
|
} |
|
.image-section p { |
|
margin: auto; |
|
padding-left: 150px; |
|
padding-right: 150px; |
|
margin-bottom: 20px; |
|
text-align: left; |
|
text-indent: 2em; |
|
} |
|
.image-container { |
|
width: 100%; |
|
margin-bottom: 40px; |
|
} |
|
.image-container img { |
|
max-width: 100%; |
|
height: auto; |
|
display: block; |
|
margin: auto; |
|
border: 1px solid #dee2e6; |
|
border-radius: 8px; |
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1); |
|
} |
|
.matrix-image-container img { |
|
max-width: 50%; |
|
height: auto; |
|
display: block; |
|
margin: auto; |
|
border: 1px solid #dee2e6; |
|
border-radius: 8px; |
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1); |
|
} |
|
.back-button { |
|
text-align: center; |
|
margin-top: 20px; |
|
} |
|
.custom-button { |
|
background-color: #610b5d; |
|
color: #fff; |
|
border-radius: 15px; |
|
padding: 10px 20px; |
|
font-size: 18px; |
|
text-decoration: none; |
|
} |
|
.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="model-name">{{ model_name }}</div> |
|
<div class="image-section"> |
|
<h2>Structure</h2> |
|
<p> |
|
This image shows the circular value structure projected on a 2D plane. |
|
This was done by computing the intercorrelations between different values this space was then reduces with a SVD based approach and varimax rotation (`FactorAnalysis` object from `scikit-learn`). |
|
The theoretical order is shown in the top left figure. |
|
The distance is computed as the average distance of each value to it's rank in the theoretical order. |
|
The minimal distance with the theoretical order in the clockwise and counter-clockwise direction was taken as the final distance. |
|
</p> |
|
<div class="image-container"> |
|
<a href="{{ url_for('static', filename='figures/' + model_name + '/structure.svg') }}" target="_blank"> |
|
<img src="{{ url_for('static', filename='figures/' + model_name + '/structure.svg') }}" alt="Structure"> |
|
</a> |
|
</div> |
|
</div> |
|
<div class="image-section"> |
|
<h2>Pairwise Rank-Order stability</h2> |
|
<p> |
|
This image shows the Rank-Order stability between each pair of context chunks. |
|
Rank-Order stability is computed by ordering the personas based on their expression of some value, |
|
and then computing the correlation between their orders in two different context chunks. |
|
The stability estimates for the ten values are then averaged to get the final Rank-Order stability measure. |
|
Refer to our <a href="https://arxiv.org/abs/2402.14846">paper</a> for details. |
|
</p> |
|
<div class="matrix-image-container"> |
|
<a href="{{ url_for('static', filename='figures/' + model_name + '/matrix.svg') }}" target="_blank"> |
|
<img src="{{ url_for('static', filename='figures/' + model_name + '/matrix.svg') }}" alt="Matrix" > |
|
</a> |
|
</div> |
|
</div> |
|
<div class="image-section"> |
|
<h2>Visualizing the order of simulated perosonas</h2> |
|
<p> |
|
This image visualizes the order of personas in each context chunk and for each values. |
|
For each value (row), the personas are ordered on the x-axis by their expression of this value in the `no_conv` setting (gray). |
|
Therefore, the Rank-Order stability between the `no_conv` chunk and some chunk corresponds to the extent to which the curve is increasing in that chunks. |
|
(Only some personas are marked on the x-axis for clarity). |
|
</p> |
|
<div class="image-container"> |
|
<a href="{{ url_for('static', filename='figures/' + model_name + '/ranks.svg') }}" target="_blank"> |
|
<img src="{{ url_for('static', filename='figures/' + model_name + '/ranks.svg') }}" alt="Ranks"> |
|
</a> |
|
</div> |
|
</div> |
|
<div class="back-button"> |
|
<a href="{{ url_for('index') }}" class="custom-button mt-3">Back</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script> |
|
</body> |
|
</html> |
|
|
