Adding submit model instructions and route

.gitignore

@@ -1,3 +1,4 @@
 .idea/
 __pycache__/*
-copy_data.sh
+copy_data.sh
+uploads/*

app.py

@@ -1,9 +1,21 @@
-from flask import Flask, render_template
+import os
 import pandas as pd
 import utils
+import base64
+import shutil
+import zipfile
+from flask import Flask, render_template, request, redirect, url_for
+from postmarker.core import PostmarkClient
+from werkzeug.utils import secure_filename
 
 app = Flask(__name__)
+app.config['UPLOAD_FOLDER'] = 'uploads'  # Directory where files will be stored
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+app.config['ALLOWED_EXTENSIONS'] = {'zip'}
 
+def allowed_file(filename):
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']
 
 @app.route('/')
 def index():
@@ -55,5 +67,66 @@ def model_detail(model_name):
 def about():
     return render_template('about.html')
 
+@app.route('/new_model')
+def new_model():
+    return render_template('new_model.html')
+
+@app.route('/model_submitted')
+def model_submitted():
+    return render_template('model_submitted.html')
+
+@app.route('/failed_submission')
+def failed_submission():
+    return render_template('failed_submission.html')
+
+
+@app.route('/submit_model', methods=['POST'])
+def submit_model():
+    model_name = request.form['model_name']
+    pull_request_link = request.form['pull_request_link']
+    email = request.form['email']
+    description = request.form['description']
+
+    # Handle ZIP file upload
+    if 'model_files' not in request.files:
+        return redirect(url_for('failed_submission'))
+
+    file = request.files['model_files']
+
+    if file and allowed_file(file.filename):
+        filename = secure_filename(file.filename)
+        file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(file_path)
+
+        # Read the file content and encode it in base64
+        with open(file_path, 'rb') as f:
+            file_content = base64.b64encode(f.read()).decode('ascii')
+
+        # Set up Postmark email client
+        postmark = PostmarkClient(server_token=os.getenv('POSTMARK_SERVER_API'))
+
+        # Send the email with the attachment
+        postmark.emails.send(
+            From='grgur.kovac@inria.fr',
+            To='grgur.kovac@inria.fr',
+            Subject=f'Stick to Your Role! Model Submission: {model_name}',
+            HtmlBody=f"""
+            <p><strong>Model Name:</strong> {model_name}</p>
+            <p><strong>Pull Request Link:</strong> {pull_request_link}</p>
+            <p><strong>Email:</strong> {email}</p>
+            <p><strong>Description:</strong> {description}</p>
+            """,
+            Attachments=[{
+                'Name': filename,
+                'Content': file_content,
+                'ContentType': 'application/zip'
+            }]
+        )
+    else:
+        return redirect(url_for('failed_submission'))
+
+    return redirect(url_for('model_submitted'))
+
+
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860, debug=True)

static/leaderboard.csv

@@ -1,18 +1,20 @@
 Model,Ordinal (Win rate),Cardinal (Score),RO Stability,Stress,Separability,CFI,SRMR,RMSEA
-phi-3-mini-128k-instruct,0.3387345679012346,0.4571976280473622,0.039299993295009855,0.281800547806919,0.963768115942029,0.7509527777777777,0.25489166666666674,0.22045000000000003
-phi-3-medium-128k-instruct,0.35108024691358025,0.46871557360419164,0.09692037989916814,0.2651981204439735,0.9975845410628019,0.6727694444444445,0.2984500000000001,0.2759472222222221
-Mistral-7B-Instruct-v0.1,0.20679012345679013,0.38323622857524176,0.027216280472015988,0.2829498135031582,0.995169082125604,0.500288888888889,0.45314444444444446,0.4191027777777777
-Mistral-7B-Instruct-v0.2,0.39814814814814814,0.4692343788574553,0.14417876497818388,0.265188983528973,1.0,0.5787944444444445,0.35010277777777776,0.3171083333333333
-Mistral-7B-Instruct-v0.3,0.2824074074074074,0.4168826678339619,0.07960539866974455,0.2742399030139009,0.9975845410628019,0.5231444444444444,0.4214972222222223,0.3914694444444443
-Mixtral-8x7B-Instruct-v0.1,0.4930555555555556,0.5307045793457128,0.21473356319081474,0.2624402608740656,1.0,0.6766166666666665,0.25611666666666666,0.24065277777777772
-Mixtral-8x22B-Instruct-v0.1,0.2924382716049383,0.41811429894732177,0.1414001940345544,0.2548838005881672,0.9654589371980676,0.45902777777777776,0.4849916666666666,0.4871833333333333
-command_r_plus,0.5879629629629629,0.6136142726835458,0.3429686514651868,0.23811982320641845,0.963768115942029,0.7772111111111112,0.17755277777777778,0.17465277777777777
-llama_3_8b_instruct,0.5007716049382716,0.5571604188191388,0.24527785038654715,0.245806400289881,0.961352657004831,0.7348277777777779,0.20952222222222228,0.20751944444444437
-llama_3_70b_instruct,0.7376543209876543,0.7573878472446817,0.607020698814379,0.18525883672204868,1.0,0.8298166666666668,0.10965277777777771,0.14649722222222217
-llama_3.1_8b_instruct,0.5671296296296297,0.6056589663453942,0.4295080949846363,0.22060228669473025,0.9710144927536233,0.6379333333333334,0.3225500000000001,0.3328972222222223
-llama_3.1_70b_instruct,0.7739197530864198,0.78874072958529,0.691365862744007,0.1709718847084183,0.9944444444444444,0.8203805555555554,0.14023055555555552,0.17041944444444446
-Qwen2-7B-Instruct,0.4529320987654321,0.5256131964101429,0.25108519506513916,0.25776537005719313,0.9855072463768116,0.6248583333333334,0.32358611111111113,0.3028361111111111
-Qwen2-72B-Instruct,0.6080246913580247,0.6858608495773215,0.6465993243020925,0.20297742879025626,0.9833333333333333,0.5559722222222221,0.3575638888888889,0.39241388888888884
-gpt-3.5-turbo-0125,0.23842592592592593,0.4028828123262879,0.08240359836763214,0.28728574920060357,1.0,0.4998916666666666,0.47583055555555553,0.4404444444444445
-gpt-4o-0513,0.7229938271604939,0.707844597747704,0.5122163952167618,0.19201420113771173,1.0,0.7998694444444445,0.14606111111111109,0.1400583333333334
-dummy,0.14814814814814814,0.3585809973377891,-0.009004148398032956,0.2928877637010999,1.0,0.5076361111111111,0.4973388888888889,0.4541638888888889
+phi-3-mini-128k-instruct,0.32853223593964337,0.4571976280473622,0.039299993295009855,0.281800547806919,0.963768115942029,0.7509527777777777,0.25489166666666674,0.22045000000000003
+phi-3-medium-128k-instruct,0.34224965706447186,0.46871557360419164,0.09692037989916814,0.2651981204439735,0.9975845410628019,0.6727694444444445,0.2984500000000001,0.2759472222222221
+Mistral-7B-Instruct-v0.1,0.19958847736625512,0.38323622857524176,0.027216280472015988,0.2829498135031582,0.995169082125604,0.500288888888889,0.45314444444444446,0.4191027777777777
+Mistral-7B-Instruct-v0.2,0.38545953360768176,0.4692343788574553,0.14417876497818388,0.265188983528973,1.0,0.5787944444444445,0.35010277777777776,0.3171083333333333
+Mistral-7B-Instruct-v0.3,0.2702331961591221,0.4168826678339619,0.07960539866974455,0.2742399030139009,0.9975845410628019,0.5231444444444444,0.4214972222222223,0.3914694444444443
+Mixtral-8x7B-Instruct-v0.1,0.4746227709190672,0.5307045793457128,0.21473356319081474,0.2624402608740656,1.0,0.6766166666666665,0.25611666666666666,0.24065277777777772
+Mixtral-8x22B-Instruct-v0.1,0.2791495198902606,0.41811429894732177,0.1414001940345544,0.2548838005881672,0.9654589371980676,0.45902777777777776,0.4849916666666666,0.4871833333333333
+command_r_plus,0.5761316872427983,0.6136142726835458,0.3429686514651868,0.23811982320641845,0.963768115942029,0.7772111111111112,0.17755277777777778,0.17465277777777777
+llama_3_8b_instruct,0.49108367626886146,0.5571604188191388,0.24527785038654715,0.245806400289881,0.961352657004831,0.7348277777777779,0.20952222222222228,0.20751944444444437
+llama_3_70b_instruct,0.718792866941015,0.7573878472446817,0.607020698814379,0.18525883672204868,1.0,0.8298166666666668,0.10965277777777771,0.14649722222222217
+llama_3.1_8b_instruct,0.5521262002743484,0.6056589663453942,0.4295080949846363,0.22060228669473025,0.9710144927536233,0.6379333333333334,0.3225500000000001,0.3328972222222223
+llama_3.1_70b_instruct,0.7517146776406035,0.78874072958529,0.691365862744007,0.1709718847084183,0.9944444444444444,0.8203805555555554,0.14023055555555552,0.17041944444444446
+Qwen2-7B-Instruct,0.4465020576131687,0.5256131964101429,0.25108519506513916,0.25776537005719313,0.9855072463768116,0.6248583333333334,0.32358611111111113,0.3028361111111111
+Qwen2-72B-Instruct,0.5802469135802469,0.6858608495773215,0.6465993243020925,0.20297742879025626,0.9833333333333333,0.5559722222222221,0.3575638888888889,0.39241388888888884
+gpt-3.5-turbo-0125,0.22565157750342937,0.4028828123262879,0.08240359836763214,0.28728574920060357,1.0,0.4998916666666666,0.47583055555555553,0.4404444444444445
+gpt-4o-0513,0.705761316872428,0.707844597747704,0.5122163952167618,0.19201420113771173,1.0,0.7998694444444445,0.14606111111111109,0.1400583333333334
+gpt-4o-mini-2024-07-18,0.37517146776406035,0.4740062039155729,0.13575309046266867,0.2707065266105181,1.0,0.6141777777777777,0.32648055555555555,0.29394722222222214
+Mistral-Large-Instruct-2407,0.7613168724279836,0.8046038845509005,0.7644582301049158,0.16944638941325085,0.994806763285024,0.7604888888888888,0.18767499999999993,0.21457222222222228
+dummy,0.14609053497942384,0.3585809973377891,-0.009004148398032956,0.2928877637010999,1.0,0.5076361111111111,0.4973388888888889,0.4541638888888889

templates/about.html

@@ -349,7 +349,7 @@ their expression of that value).
             </p>
         </div>
         <div class="back-button">
-            <a href="{{ url_for('index') }}" class="custom-button mt-3">Back</a>
+            <a href="{{ url_for('index') }}" class="custom-button mt-3">Main page</a>
         </div>
         <div class="citation-section">
             <p>If you found this project useful, please cite our related paper:</p>

templates/failed_submission.html

@@ -0,0 +1,221 @@
+<!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! About</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: 20px; /* 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: 14px; /* 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: 10px; /* 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-top: 19px;
+            text-align: left;
+        }
+
+        .section p {
+            padding-left: 150px;
+            padding-right: 150px;
+            text-indent: 2em;
+            margin: auto;
+            margin-bottom: 10px;
+            text-align: left;
+        }
+
+        .section ol, ul {
+            padding-left: 150px;
+            padding-right: 150px;
+            margin: auto;
+            margin-bottom: 20px;
+            margin-left: 50px;
+            text-align: left;
+            margin-top: 0px;
+        }
+
+        .citation-section {
+            width: 100%;
+            margin-top: 50px;
+            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-structure {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-bottom: 40px;
+            max-width: 70%; /* Adjust the width as needed */
+            margin: auto;
+        }
+
+        .image-container-structure a {
+            flex: 1;
+        }
+
+        .image-container-structure img {
+            max-width: 100%;
+            height: auto;
+            display: block;
+            margin: auto;
+        }
+
+        .image-container {
+            width: 100%;
+            margin-bottom: 40px;
+        }
+        .image-container #admin-questionnaire {
+            width: 50%;
+            height: auto;
+            display: block;
+            margin: auto;
+        }
+        .image-container #ro-image {
+            width: 70%;
+            height: auto;
+            display: block;
+            margin: auto;
+        }
+
+        .section-title {
+            font-size: 24px;
+            font-weight: bold;
+            text-align: center;
+            margin-bottom: 40px;
+            padding: 20px; /* Add padding for more margin around text */
+            background-color: #610b5d;
+            color: #fff; /* Ensure text is readable on dark background */
+            border-radius: 15px; /* Rounded edges */
+        }
+        .back-button {
+            text-align: center;
+            margin-top: 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="section">
+            <div class="section-title">There was an issue with your submission.</div>
+            <p>
+                Try again or contact us at <a href= "mailto: grgur.kovac@inria.fr">grgur.kovac@inria.fr</a>.
+            </p>
+            <div class="back-button">
+                <a href="{{ url_for('index') }}" class="custom-button mt-3">Main page</a>
+            </div>
+        </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>

templates/index.html

@@ -41,6 +41,14 @@
             text-align: left;
         }
 
+        ul {
+            margin: auto; /* Center the table */
+            margin-top: 20px;
+            margin-bottom: 10px;
+            max-width: 1000px; /* Adjust the width as needed */
+            text-align: left;
+        }
+
         .table-responsive {
             margin-top: 20px;
             max-width: 1000px; /* Adjust the width as needed */
@@ -195,8 +203,8 @@
             As proposed in our <a href="https://arxiv.org/abs/2402.14846">paper</a>,
             unwanted context-dependence should be seen as a <b>property of LLMs</b> - a dimension of LLM comparison (alongside others such as model size speed or expressed knowledge).
             This leaderboard aims to provide such a comparison and extends our paper with a more focused and elaborate experimental setup.
-            Standard benchmarks present MANY questions from the SAME MINIMAL contexts (e.g. multiple choice questions),
-            we present SAME questions from MANY different contexts.
+            Standard benchmarks present <b>MANY</b> questions from the <b>SAME MINIMAL contexts</b> (e.g. multiple choice questions),
+            we present <b>SAME</b> questions from <b>MANY different contexts</b>.
         </p>
         <div class="table-responsive main-table">
             <!-- Render the table HTML here -->
@@ -238,6 +246,9 @@
         <div class="about-button">
             <a href="{{ url_for('about') }}" class="custom-button mt-3">Learn More About This Project</a>
         </div>
+        <div class="about-button">
+            <a href="{{ url_for('new_model') }}" class="custom-button mt-3">Submit a model</a>
+        </div>
         <div class="citation-section">
             <p>
                 If you found this project useful, please cite our related paper,
@@ -253,6 +264,12 @@
 }
             </div>
         </div>
+        <ul>
+            <li>Contact: <a href="mailto: grgur.kovac@inria.fr">grgur.kovac@inria.fr</a></li>
+            <li>See the <a href="https://sites.google.com/view/llmvaluestability">Project website<a/></li>
+            <li>See the Flowers team <a href="http://developmentalsystems.org">blog</a> and <a href="https://flowers.inria.fr/">website</a></li>
+            <li>See Grgur's website and other projects: <a href="https://grgkovac.github.io/">https://grgkovac.github.io/</a></li>
+        </ul>
     </div>
 
     <!-- Include jQuery -->

templates/model_detail.html

@@ -140,7 +140,7 @@
             </div>
         </div>
         <div class="back-button">
-            <a href="{{ url_for('index') }}" class="custom-button mt-3">Back</a>
+            <a href="{{ url_for('index') }}" class="custom-button mt-3">Main page</a>
         </div>
     </div>
 

templates/model_submitted.html

@@ -0,0 +1,223 @@
+<!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! About</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: 20px; /* 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: 14px; /* 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: 10px; /* 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-top: 19px;
+            text-align: left;
+        }
+
+        .section p {
+            padding-left: 150px;
+            padding-right: 150px;
+            text-indent: 2em;
+            margin: auto;
+            margin-bottom: 10px;
+            text-align: left;
+        }
+
+        .section ol, ul {
+            padding-left: 150px;
+            padding-right: 150px;
+            margin: auto;
+            margin-bottom: 20px;
+            margin-left: 50px;
+            text-align: left;
+            margin-top: 0px;
+        }
+
+        .citation-section {
+            width: 100%;
+            margin-top: 50px;
+            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-structure {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-bottom: 40px;
+            max-width: 70%; /* Adjust the width as needed */
+            margin: auto;
+        }
+
+        .image-container-structure a {
+            flex: 1;
+        }
+
+        .image-container-structure img {
+            max-width: 100%;
+            height: auto;
+            display: block;
+            margin: auto;
+        }
+
+        .image-container {
+            width: 100%;
+            margin-bottom: 40px;
+        }
+        .image-container #admin-questionnaire {
+            width: 50%;
+            height: auto;
+            display: block;
+            margin: auto;
+        }
+        .image-container #ro-image {
+            width: 70%;
+            height: auto;
+            display: block;
+            margin: auto;
+        }
+
+        .section-title {
+            font-size: 24px;
+            font-weight: bold;
+            text-align: center;
+            margin-bottom: 40px;
+            padding: 20px; /* Add padding for more margin around text */
+            background-color: #610b5d;
+            color: #fff; /* Ensure text is readable on dark background */
+            border-radius: 15px; /* Rounded edges */
+        }
+        .back-button {
+            text-align: center;
+            margin-top: 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="section">
+            <div class="section-title">Thank you for submitting your model!</div>
+            <p>
+                We will get back to you to confirm the reception of the model.
+                If we do not get back to you in the period of two weeks please contact us at:
+                   <a href= "mailto: grgur.kovac@inria.fr">grgur.kovac@inria.fr</a>.
+            </p>
+            <div class="back-button">
+                <a href="{{ url_for('index') }}" class="custom-button mt-3">Main page</a>
+            </div>
+        </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>

templates/new_model.html

@@ -0,0 +1,312 @@
+<!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! About</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: 20px; /* 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;
+        }
+
+        .section {
+            padding-top: 19px;
+            text-align: left;
+        }
+
+        .section p {
+            padding-left: 150px;
+            padding-right: 150px;
+            text-indent: 2em;
+            margin: auto;
+            margin-bottom: 10px;
+            text-align: left;
+        }
+
+        .section ol, ul {
+            padding-left: 150px;
+            padding-right: 150px;
+            margin: auto;
+            margin-bottom: 20px;
+            margin-left: 50px;
+            text-align: left;
+            margin-top: 0px;
+        }
+
+        .citation-section {
+            width: 100%;
+            margin-top: 50px;
+            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-structure {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-bottom: 40px;
+            max-width: 70%; /* Adjust the width as needed */
+            margin: auto;
+        }
+
+        .image-container-structure a {
+            flex: 1;
+        }
+
+        .image-container-structure img {
+            max-width: 100%;
+            height: auto;
+            display: block;
+            margin: auto;
+        }
+
+        .image-container {
+            width: 100%;
+            margin-bottom: 40px;
+        }
+        .image-container #admin-questionnaire {
+            width: 50%;
+            height: auto;
+            display: block;
+            margin: auto;
+        }
+        .image-container #ro-image {
+            width: 70%;
+            height: auto;
+            display: block;
+            margin: auto;
+        }
+
+        .section-title {
+            font-size: 24px;
+            font-weight: bold;
+            text-align: center;
+            margin-bottom: 40px;
+            padding: 20px; /* Add padding for more margin around text */
+            background-color: #610b5d;
+            color: #fff; /* Ensure text is readable on dark background */
+            border-radius: 15px; /* Rounded edges */
+        }
+        .back-button {
+            text-align: center;
+            margin-top: 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;
+        }
+        .form-container {
+            max-width: 80%; /* Adjust as needed */
+            margin: 20px 100px; /* Center horizontally */
+            padding: 50px 150px;
+            text-align: center;
+            background-color: #f8f9fa;
+        }
+
+        .form-row {
+            max-width: 100%;
+            margin-bottom: 20px;
+            text-align: left;
+        }
+
+        .form-label {
+        }
+
+        .col-md-4 {
+            width: 100%
+        }
+        .col-md-8 {
+            width: 100%
+        }
+
+        .form-content {
+            margin-bottom: 15px;
+            min-width: 100%;
+        }
+        .form-content::placeholder {
+            color: #aaa;
+            font-style: italic;
+        }
+
+        .file-input {
+            margin-top: 10px;
+        }
+    </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="section">
+        <div id="evaluate_custom_model" class="section-title">Evaluate a custom model</div>
+        <p>
+            To evaluate a custom model you can use our <a href="https://gitlab.inria.fr/gkovac/value_stability">open-source code</a>.
+            If a model is in the huggingface transformers format (saved either localy or on the hub),
+            it can be simply added by adding a config file.
+            The model can then be evaluated as any other model.
+            To do so, follow the <a href="https://gitlab.inria.fr/gkovac/value_stability/-/blob/master/README.md?ref_type=heads#adding-a-new-model">instructions</a> in the README.md file.
+        </p>
+    </div>
+    <div class="section" id="paper">
+        <div class="section-title">Submit a custom model to the Stick To Your Role! Leaderboard</div>
+        <p>
+            If you want, your model can be to the Stick To Your Role! Leaderboard, as an unofficial submission.
+            A separate list of models containing both official and unofficial submissions will be created.
+            The procedure is as follows:
+        </p>
+        <ol>
+            <li>
+                <b> Add and evaluate your model </b> - Add your model as a config file as described <a href="{{ url_for('new_model', _anchor='evaluate_custom_model') }}">above</a>.
+                This procedure should result in 9 json files as such:
+                <code>`Leaderboard/results/stability_leaderboard/&lt;your_model_name&gt;/chunk_0_&lt;timestamp&gt;/results.json`</code>
+            </li>
+            <li>
+                <b> Submit the config file </b> - Create a pull request to our <a href="https://gitlab.inria.fr/gkovac/value_stability">repository</a> from a branch <code>"unofficial_model/&lt;your_model_name&gt;"</code>.
+                The pull request should ideally only add the config file in <code>`./models/leaderboard_configs`</code>.
+                If additional changes are needed, they should ideally be constrained to a new model class (see <a href="https://gitlab.inria.fr/gkovac/value_stability/-/blob/master/models/huggingfacemodel.py?ref_type=heads">huggingfacemodel.py</a> for reference).
+            <li>
+                <b> Submit the model results </b> - submit the *json files as a ZIP using the form below.
+                We will integrate the model's results on our side, and rerank models with yours included.
+            </li>
+        </ol>
+        <div class="form-container">
+            <form id="model-submission-form" method="POST" action="{{ url_for('submit_model') }}" enctype="multipart/form-data">
+                <div class="form-row row">
+                    <div class="col-md-4">
+                        <label for="model_name" class="form-label">Model Name:</label>
+                    </div>
+                    <div class="col-md-8">
+                        <input type="text" class="form-content" id="model_name" name="model_name" required>
+                    </div>
+                </div>
+                <div class="form-row row">
+                    <div class="col-md-4">
+                        <label for="pull_request_link" class="form-label">Pull Request Link:</label>
+                    </div>
+                    <div class="col-md-8">
+                        <input type="url" class="form-content" id="pull_request_link" name="pull_request_link" required>
+                    </div>
+                </div>
+                <div class="form-row row">
+                    <div class="col-md-4">
+                        <label for="email" class="form-label">Email:</label>
+                    </div>
+                    <div class="col-md-8">
+                        <input type="email" class="form-content" id="email" name="email" required>
+                    </div>
+                </div>
+                <div class="form-row row">
+                    <div class="col-md-4">
+                        <label for="description" class="form-label">Description:</label>
+                    </div>
+                    <div class="col-md-8">
+                        <textarea class="form-content" id="description" name="description" placeholder="Various details on the model training and architecture (e.g. dataset, model size, optimizer, etc.)" rows="3" required></textarea>
+                    </div>
+                </div>
+                <div class="form-row row">
+                    <div class="col-md-4">
+                        <label for="model_files" class="form-label">
+                            Upload the Model results directory as a ZIP file
+                            (<code>Leaderboard/results/stability_leaderboard/&lt;your_model_name&gt;</code>):
+                        </label>
+                    </div>
+                    <div class="col-md-8">
+                        <input type="file" id="model_files" name="model_files" class="file-input" accept=".zip" required>
+                        <small class="form-text text-muted">
+                            Please upload a ZIP file containing the results directory.
+                        </small>
+                    </div>
+                </div>
+                <button type="submit" class="btn custom-button mt-3">Submit</button>
+            </form>
+        </div>
+    </div>
+    <div class="back-button">
+        <a href="{{ url_for('index') }}" class="custom-button mt-3">Main page</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>