Update leaderboard UI

app.py

@@ -2,18 +2,15 @@ import fev
 import gradio as gr
 import pandas as pd
 
+from src import about
+from src.custom_html_js import custom_css
+from src.formatting import make_clickable_model
+
 # Load the CSV data into a pandas DataFrame
 df = pd.read_csv(
     "https://raw.githubusercontent.com/autogluon/fev/refs/heads/main/benchmarks/chronos_zeroshot/results/seasonal_naive.csv"
 )
 
-markdown_text = """
-This space hosts evaluation results for time series forecasting models.
-
-Benchmark definitions, implementations of models, as well as the evaluation results for individual tasks are available under https://github.com/autogluon/fev.
-
-Currently, the results in this space are a minimal proof of concept. Stay tuned for more benchmarks, results for new models and instructions on how to contribute your results.
-"""
 
 summary_urls = [
     "https://raw.githubusercontent.com/autogluon/fev/refs/heads/main/benchmarks/chronos_zeroshot/results/auto_arima.csv",
@@ -62,46 +59,38 @@ for metric in ["WQL", "MASE"]:
     format_dict = {}
     for col in lb.columns:
         format_dict[col] = "{:.3f}" if col != "Training corpus overlap (%)" else "{:.1%}"
-    leaderboards[metric] = highlight_zeroshot(lb.reset_index().style.format(format_dict))
-
-
-with gr.Blocks() as demo:
-    with gr.Tab("Chronos Benchmark II"):
-        gr.Markdown("""
-                    ## Chronos Benchmark II results
-
-                    This tab contains results for various forecasting models on the 28 datasets used in Benchmark II in the publication [Chronos: Learning the Language of Time Series](https://arxiv.org/abs/2403.07815).
-
-                    These datasets were used for zero-shot evaluation of Chronos models (i.e., Chronos models were not trained on these datasets), but some other models did include certain datasets in their training corpus.
-
-                    Each table contains the following information:
-
-                    * **Average relative error**: Geometric mean of the relative errors for each task. The relative error for each task is computed as `model_error / baseline_error`.
-                    * **Average rank**: Arithmetic mean of the ranks achieved by each model on each task.
-                    * **Median inference time (s)**: Median of the times required to make predictions for the entire dataset (in seconds).
-                    * **Training corpus overlap (%)**: Percentage of the datasets used in the benchmark that were included in the model's training corpus. Zero-shot models are highlighted in <span style="color:green; font-weight:bold;">green</span>.
-
-                    Lower values are better for all of the above metrics.
-
-                    Task definitions and the detailed results are available on [GitHub](https://github.com/autogluon/fev/tree/main/benchmarks/chronos_zeroshot). More information for the datasets is available in [Table 3 of the paper](https://arxiv.org/abs/2403.07815).
-
-                    """)
-        gr.Markdown("### Probabilistic forecast accuracy\nMeasured by Weighted Quantile Loss (WQL).")
-        gr.Dataframe(
-            value=leaderboards["WQL"],
-            datatype=["str", "number", "number", "number"],
-            interactive=False,
-        )
-
-        gr.Markdown("""### Point forecast accuracy\nMeasured by Mean Absolute Scaled Error (MASE).
-                    """)
-        gr.Dataframe(
-            value=leaderboards["MASE"],
-            interactive=False,
-        )
-
-    with gr.Tab("About"):
-        gr.Markdown(markdown_text)
+    lb = lb.reset_index()
+    lb["model_name"] = lb["model_name"].apply(make_clickable_model)
+    leaderboards[metric] = highlight_zeroshot(lb.style.format(format_dict))
+
+
+with gr.Blocks(css=custom_css) as demo:
+    gr.HTML(about.TITLE)
+    gr.Markdown(about.INTRODUCTION_TEXT, elem_classes="markdown-text")
+
+    with gr.Tabs(elem_classes="tab-buttons"):
+        with gr.Tab("🏅 Chronos Benchmark II", id=0):
+            with gr.Column():
+                gr.Markdown(about.CHRONOS_BENCHMARK, elem_classes="markdown-text")
+            with gr.Tabs():
+                with gr.Tab("📊 Probabilistic forecast (WQL)"):
+                    gr.Markdown("""Forecast accuracy measured by Weighted Quantile Loss.""")
+                    gr.Dataframe(
+                        value=leaderboards["WQL"],
+                        datatype=["markdown", "number", "number", "number"],
+                        interactive=False,
+                    )
+
+                with gr.Tab("📈 Point forecast (MASE)"):
+                    gr.Markdown("""Forecast accuracy measured by Mean Absolute Scaled Error.""")
+                    gr.Dataframe(
+                        value=leaderboards["MASE"],
+                        datatype=["markdown", "number", "number", "number"],
+                        interactive=False,
+                    )
+
+        with gr.Tab("📝 About", id=1):
+            gr.Markdown(about.ABOUT_LEADERBOARD)
 
 if __name__ == "__main__":
     demo.launch()

src/about.py

@@ -0,0 +1,50 @@
+TITLE = """<h1 align="center" id="space-title">Forecast evaluation leaderboard</h1>"""
+
+# What does your leaderboard evaluate?
+INTRODUCTION_TEXT = """
+This space hosts evaluation results for time series forecasting models.
+
+The results are obtained using [fev](https://github.com/autogluon/fev) - a lightweight library for evaluating time series forecasting models.
+"""
+
+ABOUT_LEADERBOARD = """
+## What is `fev`?
+
+[`fev`](https://github.com/autogluon/fev) is a lightweight wrapper around the 🤗 [`datasets`](https://huggingface.co/docs/datasets/en/index) library that makes it easy to benchmark time series forecasting models.
+
+For more information about `fev`, please check out [github.com/autogluon/fev](https://github.com/autogluon/fev).
+
+Currently, the results in this space are a minimal proof of concept. We plan to add new benchmark datasets and tasks in the future.
+
+## How is `fev` different from other benchmarking tools?
+Existing forecasting benchmarks usually fall into one of two categories:
+
+- Standalone datasets without any supporting infrastructure. These provide no guarantees that the results obtained by different users are comparable. For example, changing the start date or duration of the forecast horizon totally changes the meaning of the scores.
+- Bespoke end-to-end systems that combine models, datasets and forecasting tasks. Such packages usually come with lots of dependencies and assumptions, which makes extending or integrating these libraries into existing systems difficult.
+
+`fev` aims for the middle ground - it provides the core benchmarking functionality without introducing unnecessary constraints or bloated dependencies. The library supports point & probabilistic forecasting, different types of covariates, as well as all popular forecasting metrics.
+
+
+## Submitting your model
+For instructions on how to evaluate your model using `fev` and contribute your results to the leaderboard, please follow the [instructions in the GitHub repo](https://github.com/autogluon/fev/blob/main/docs/04-models.ipynb).
+"""
+
+CHRONOS_BENCHMARK = """
+## Chronos Benchmark II results
+
+This tab contains results for various forecasting models on the 28 datasets used in Benchmark II in the publication [Chronos: Learning the Language of Time Series](https://arxiv.org/abs/2403.07815).
+
+These datasets were used for zero-shot evaluation of Chronos models (i.e., Chronos models were not trained on these datasets), but some other models did include certain datasets in their training corpus.
+
+Each table contains the following information:
+
+* **Average relative error**: Geometric mean of the relative errors for each task. The relative error for each task is computed as `model_error / baseline_error`.
+* **Average rank**: Arithmetic mean of the ranks achieved by each model on each task.
+* **Median inference time (s)**: Median of the times required to make predictions for the entire dataset (in seconds).
+* **Training corpus overlap (%)**: Percentage of the datasets used in the benchmark that were included in the model's training corpus. Zero-shot models are highlighted in <span style="color:green; font-weight:bold;">green</span>.
+
+Lower values are better for all of the above metrics.
+
+Task definitions and the detailed results are available on [GitHub](https://github.com/autogluon/fev/tree/main/benchmarks/chronos_zeroshot). More information for the datasets is available in [Table 3 of the paper](https://arxiv.org/abs/2403.07815).
+
+"""

src/custom_html_js.py

@@ -0,0 +1,99 @@
+custom_css = """
+
+.markdown-text {
+    font-size: 20px !important;
+}
+
+.tab-buttons button {
+    font-size: 20px;
+}
+
+"""
+
+
+# #citation-button span {
+#     font-size: 16px !important;
+# }
+
+# #citation-button textarea {
+#     font-size: 16px !important;
+# }
+
+# #citation-button > label > button {
+#     margin: 6px;
+#     transform: scale(1.3);
+# }
+
+
+# #leaderboard-table-lite {
+#     margin-top: 15px
+# }
+
+# #search-bar-table-box > div:first-child {
+#     background: none;
+#     border: none;
+# }
+
+# #search-bar {
+#     padding: 0px;
+# }
+
+# /* Hides the final AutoEvalColumn */
+# #llm-benchmark-tab-table table td:last-child,
+# #llm-benchmark-tab-table table th:last-child {
+#     display: none;
+# }
+
+# /* Limit the width of the first AutoEvalColumn so that names don't expand too much */
+# table td:first-child,
+# table th:first-child {
+#     max-width: 400px;
+#     overflow: auto;
+#     white-space: nowrap;
+# }
+
+
+# #scale-logo {
+#     border-style: none !important;
+#     box-shadow: none;
+#     display: block;
+#     margin-left: auto;
+#     margin-right: auto;
+#     max-width: 600px;
+# }
+
+# #scale-logo .download {
+#     display: none;
+# }
+# #filter_type{
+#     border: 0;
+#     padding-left: 0;
+#     padding-top: 0;
+# }
+# #filter_type label {
+#     display: flex;
+# }
+# #filter_type label > span{
+#     margin-top: var(--spacing-lg);
+#     margin-right: 0.5em;
+# }
+# #filter_type label > .wrap{
+#     width: 103px;
+# }
+# #filter_type label > .wrap .wrap-inner{
+#     padding: 2px;
+# }
+# #filter_type label > .wrap .wrap-inner input{
+#     width: 1px
+# }
+# #filter-columns-type{
+#     border:0;
+#     padding:0.5;
+# }
+# #filter-columns-size{
+#     border:0;
+#     padding:0.5;
+# }
+# #box-filter > .form{
+#     border: 0
+# }

src/formatting.py

@@ -0,0 +1,28 @@
+def model_hyperlink(link, model_name):
+    return f'<a target="_blank" href="{link}" style="color: var(--link-text-color); text-decoration: underline;text-decoration-style: dotted;">{model_name}</a>'
+
+
+MODEL_URLS = {
+    "chronos_tiny": "amazon/chronos-t5-tiny",
+    "chronos_mini": "amazon/chronos-t5-mini",
+    "chronos_small": "amazon/chronos-t5-small",
+    "chronos_base": "amazon/chronos-t5-base",
+    "chronos_large": "amazon/chronos-t5-large",
+    "chronos_bolt_tiny": "amazon/chronos-bolt-tiny",
+    "chronos_bolt_mini": "amazon/chronos-bolt-mini",
+    "chronos_bolt_small": "amazon/chronos-bolt-small",
+    "chronos_bolt_base": "amazon/chronos-bolt-base",
+    "moirai_large": "Salesforce/moirai-1.1-R-large",
+    "moirai_base": "Salesforce/moirai-1.1-R-base",
+    "moirai_small": "Salesforce/moirai-1.1-R-small",
+    "timesfm": "google/timesfm-1.0-200m",
+}
+
+
+def make_clickable_model(model_name):
+    if model_name in MODEL_URLS:
+        model_path = MODEL_URLS.get(model_name)
+        link = f"https://huggingface.co/{model_path}"
+        return model_hyperlink(link, model_name)
+    else:
+        return model_name