Refactor: Move inline styles from Python/HTML to CSS file

app.py

@@ -415,23 +415,12 @@ def restart_space():
 def create_title_html():
     """Function for title HTML."""
     return """
-    <div style="display: flex; align-items: center; position: relative; width: 100%; height: 60px; padding: 10px 0;">
-        <h1 style="
-            margin: 0 auto; 
-            font-weight: 900; 
-            font-size: 2.5em; 
-            letter-spacing: 2px; 
-            text-transform: uppercase; 
-            background: linear-gradient(90deg, #1f77b4, #00c6ff); 
-            -webkit-background-clip: text; 
-            -webkit-text-fill-color: transparent; 
-            text-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-        ">
+    <div class="title-header">
+        <h1 class="title-text">
             EVALITA-LLM Leaderboard
         </h1>
-        <a href="https://huggingface.co/spaces/mii-llm/open_ita_llm_leaderboard" target="_blank" 
-           style="position: absolute; right: 0; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #1f77b4; font-weight: 600;">
-            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#1f77b4" viewBox="0 0 24 24">
+        <a href="https://huggingface.co/spaces/mii-llm/open_ita_llm_leaderboard" target="_blank" class="title-link">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                 <path d="M3.9 12a5 5 0 0 1 7.07-7.07l1.41 1.41-1.41 1.41-1.42-1.42a3 3 0 1 0 4.24 4.24l3.54-3.54a5 5 0 0 1-7.07 7.07l-1.41-1.41 1.41-1.41 1.42 1.42z"/>
                 <path d="M20.1 12a5 5 0 0 1-7.07 7.07l-1.41-1.41 1.41-1.41 1.42 1.42a3 3 0 1 0-4.24-4.24l-3.54 3.54a5 5 0 0 1 7.07-7.07l1.41 1.41-1.41 1.41-1.42-1.42z"/>
             </svg>
@@ -508,64 +497,25 @@ def create_gradio_interface():
                     # Labels dei campi affiancate
 
                     with gr.Row():
-                        # Labels dei campi affiancate
                         gr.HTML(f"""
-                        <div style="
-                            display: flex; justify-content: flex-start; width: 100%; gap: 5px;
-                        ">
-                            <div style="
-                                border: 2px solid #1f77b4; border-radius: 8px; padding: 4px 8px;
-                                background-color: #f0f8ff; font-weight: bold; font-size: 12px;
-                                text-align: center;
-                                display: flex; align-items: center; justify-content: center;
-                                min-height: 28px; white-space: nowrap;
-                            " title="Total number of configurations (zero-shot and 5-few-shot) of the models evaluated in the leaderboard.">
+                        <div class="performance-metrics">
+                            <div class="metric-label" title="Total number of configurations (zero-shot and 5-few-shot) of the models evaluated in the leaderboard.">
                                 Models tested: {len(LEADERBOARD_DF)}
                             </div>
-                            <div style="
-                                border: 2px solid #1f77b4; border-radius: 8px; padding: 4px 8px;
-                                background-color: #f0f8ff; font-weight: bold; font-size: 12px;
-                                text-align: center;
-                                display: flex; align-items: center; justify-content: center;
-                                min-height: 28px; white-space: nowrap;
-                            " title="Average accuracy of the evaluated model">
+                            <div class="metric-label" title="Average accuracy of the evaluated models.">
                                 Avg combined perf.: {LEADERBOARD_DF['Avg. Comb. Perf. ⬆️'].mean():.2f}
                             </div>
-                            <div style="
-                                border: 2px solid #1f77b4; border-radius: 8px; padding: 4px 8px;
-                                background-color: #f0f8ff; font-weight: bold; font-size: 12px;
-                                text-align: center;
-                                display: flex; align-items: center; justify-content: center;
-                                min-height: 28px; white-space: nowrap;
-                            " title="Standard deviation of the evaluated models' performance.">
+                            <div class="metric-label" title="Standard deviation of the evaluated models' performance.">
                                 Std. Dev. {LEADERBOARD_DF['Avg. Comb. Perf. ⬆️'].std():.2f}
                             </div>
-                            <div style="
-                                border: 2px solid #1f77b4; border-radius: 8px; padding: 4px 8px;
-                                background-color: #f0f8ff; font-weight: bold; font-size: 12px;
-                                text-align: center;
-                                display: flex; align-items: center; justify-content: center;
-                                min-height: 28px; white-space: nowrap;
-                            " title="Best evaluated model.">
+                            <div class="metric-label" title="Best evaluated model.">
                                 Best model: {LEADERBOARD_DF.loc[LEADERBOARD_DF['Avg. Comb. Perf. ⬆️'].idxmax(), 'Model']}
                             </div>
-                            <div style="
-                                border: 2px solid #1f77b4; border-radius: 8px; padding: 4px 8px;
-                                background-color: #f0f8ff; font-weight: bold; font-size: 12px;
-                                text-align: center;
-                                display: flex; align-items: center; justify-content: center;
-                                min-height: 28px; white-space: nowrap;
-                            " title="Accuracy of the best evaluated model.">
+                            <div class="metric-label" title="Accuracy of the best evaluated model.">
                                 Best model accuracy: {LEADERBOARD_DF.loc[LEADERBOARD_DF['Avg. Comb. Perf. ⬆️'].idxmax(), 'Avg. Comb. Perf. ⬆️']:.2f}
                             </div>
-                            <div style="
-                                border: 2px solid #1f77b4; border-radius: 8px; padding: 4px 8px;
-                                background-color: #f0f8ff; font-weight: bold; font-size: 12px;
-                                text-align: center;
-                                display: flex; align-items: center; justify-content: center;
-                                min-height: 28px; white-space: nowrap;
-                            " title="Maximum achievable accuracy based on the highest performance for each task by any model in the leaderboard.">
-                                Theoretical max: {theoretical_max_combined_perf:.2f}
+                            <div class="metric-label" title="Maximum achievable accuracy based on the highest performance for each task by any model in the leaderboard.">
+                                Ideal model: {theoretical_max_combined_perf:.2f}
                             </div>
                         </div>
                         """)

src/display/css_html_js.py

@@ -1,5 +1,67 @@
 custom_css = """
 
+/* Title header styles */
+.title-header {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%;
+    height: 60px;
+    padding: 10px 0;
+}
+
+.title-text {
+    margin: 0 auto;
+    font-weight: 900;
+    font-size: 2.5em;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    background: linear-gradient(90deg, #1f77b4, #00c6ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 2px 2px 8px rgba(0,0,0,0.2);
+}
+
+.title-link {
+    position: absolute;
+    right: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    text-decoration: none;
+    color: #1f77b4;
+    font-weight: 600;
+}
+
+.title-link svg {
+    width: 22px;
+    height: 22px;
+    fill: #1f77b4;
+}
+
+/* Performance metrics labels */
+.performance-metrics {
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    gap: 5px;
+}
+
+.metric-label {
+    border: 2px solid #1f77b4;
+    border-radius: 8px;
+    padding: 4px 8px;
+    background-color: #f0f8ff;
+    font-weight: bold;
+    font-size: 12px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 28px;
+    white-space: nowrap;
+}
+
 .markdown-text {
     font-size: 16px !important;
 }
@@ -120,3 +182,4 @@ get_window_url_params = """
     }
     """
 
+