UI Revamp (#6)

- updated UI look (7b4fde2268818d28e56e2694684830cab82626e5)
- more UI refinements (3a3e684dbbbffa8b3a76dcf6685e691747593c79)

.gitignore

@@ -1,16 +1,31 @@
-auto_evals/
-venv/
+# Python
 __pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+venv/
+.venv/
 .env
-.ipynb_checkpoints
-*ipynb
+
+# IDEs
 .vscode/
+.idea/
+*.swp
+*.swo
 
+# Jupyter
+.ipynb_checkpoints/
+*.ipynb
+
+# Project specific
 eval-queue/
 eval-results/
 eval-queue-bk/
 eval-results-bk/
 logs/
+auto_evals/
 
-
-*.pem
+# Other
+*.pem
+.DS_Store

Makefile

@@ -1,16 +1,8 @@
-.PHONY: style format
-
+.PHONY: style run
 
 style:
 	python -m black --line-length 119 .
-	python -m isort .
 	ruff check --fix .
 
-
-quality:
-	python -m black --check --line-length 119 .
-	python -m isort --check-only .
-	ruff check .
-
-make app:
+run:
 	gradio app.py

README.md

@@ -1,5 +1,5 @@
 ---
-title: Dna Benchmark
+title: DNA Benchmark
 emoji: 🥇
 colorFrom: green
 colorTo: indigo
@@ -7,40 +7,47 @@ sdk: gradio
 app_file: app.py
 pinned: true
 license: apache-2.0
-short_description: DNA Foundational Models leaderboard!
+short_description: DNA Foundational Models leaderboard
 sdk_version: 5.19.0
 ---
 
-# Start the configuration
+# DNA Benchmark Leaderboard
 
-Most of the variables to change for a default leaderboard are in `src/env.py` (replace the path for your leaderboard) and `src/about.py` (for tasks).
+A simple leaderboard for evaluating DNA foundational models on genomics tasks.
 
-Results files should have the following format and be stored as json files:
+## Configuration
+
+- `src/envs.py` - Configure repository paths and environment variables
+- `src/about.py` - Define tasks and leaderboard text
+- `src/display/utils.py` - Configure table columns and metrics
+
+## Results Format
+
+Results files should be stored as JSON with the following structure:
 ```json
 {
     "config": {
-        "model_dtype": "torch.float16", # or torch.bfloat16 or 8bit or 4bit
-        "model_name": "path of the model on the hub: org/model",
-        "model_sha": "revision on the hub",
+        "model_dtype": "torch.float16",
+        "model_name": "org/model",
+        "model_sha": "revision"
     },
     "results": {
         "task_name": {
-            "metric_name": score,
-        },
-        "task_name2": {
-            "metric_name": score,
+            "metric_name": score
         }
     }
 }
 ```
 
-Request files are created automatically by this tool.
+## Development
 
-If you encounter problem on the space, don't hesitate to restart it to remove the create eval-queue, eval-queue-bk, eval-results and eval-results-bk created folder.
+```bash
+# Install dependencies
+pip install -r requirements.txt
 
-# Code logic for more complex edits
+# Run locally
+gradio app.py
 
-You'll find
-- the main table' columns names and properties in `src/display/utils.py`
-- the logic to read all results and request files, then convert them in dataframe lines, in `src/leaderboard/read_evals.py`, and `src/populate.py`
-- the logic to allow or filter submissions in `src/submission/submit.py` and `src/submission/check_validity.py`
+# Format code
+make style
+```

app.py

@@ -3,7 +3,7 @@ from apscheduler.schedulers.background import BackgroundScheduler
 from gradio_leaderboard import ColumnFilter, Leaderboard, SelectColumns
 from huggingface_hub import snapshot_download
 
-from src.about import CITATION_BUTTON_LABEL, CITATION_BUTTON_TEXT, INTRODUCTION_TEXT, LLM_BENCHMARKS_TEXT, TITLE
+from src.about import INTRODUCTION_TEXT, LLM_BENCHMARKS_TEXT, TITLE
 from src.display.css_html_js import custom_css
 from src.display.utils import BenchRawColumn, fields
 from src.envs import API, EVAL_RESULTS_PATH, REPO_ID, RESULTS_REPO, TOKEN
@@ -47,7 +47,6 @@ def init_leaderboard(dataframe):
             cant_deselect=[c.name for c in fields(BenchRawColumn) if c.never_hidden],
             label="Select Columns to Display:",
         ),
-        search_columns=[BenchRawColumn.model.name],
         filter_columns=[
             ColumnFilter(BenchRawColumn.task.name, type="checkboxgroup", label=BenchRawColumn.task.name),
             # ColumnFilter(BenchRawColumn.precision.name, type="checkboxgroup", label="Precision"),
@@ -74,9 +73,46 @@ def init_leaderboard(dataframe):
                 label="Select the Max Context Length (bp)",
             ),
         ],
+        search_columns=[BenchRawColumn.model.name],
     )
 
-demo = gr.Blocks(css=custom_css)
+# Create an elegant dark theme with custom colors for checkboxes and sliders
+theme = gr.themes.Soft(
+    primary_hue="violet",
+    secondary_hue="purple",
+    neutral_hue="slate",
+    spacing_size="md",
+    radius_size="lg",
+    text_size="md",
+    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
+).set(
+    checkbox_background_color_selected="*primary_600",
+    checkbox_border_color_selected="*primary_600",
+    checkbox_background_color_selected_dark="*primary_500",
+    checkbox_border_color_selected_dark="*primary_500",
+    slider_color="*primary_600",
+    slider_color_dark="*primary_500",
+    button_primary_background_fill="*primary_600",
+    button_primary_background_fill_hover="*primary_700",
+    button_primary_background_fill_dark="*primary_500",
+    button_primary_background_fill_hover_dark="*primary_600",
+)
+
+demo = gr.Blocks(
+    css=custom_css,
+    theme=theme,
+    js="""
+    () => {
+        const theme = localStorage.getItem('theme');
+        if (theme === null) {
+            localStorage.setItem('theme', 'dark');
+            document.body.classList.add('dark');
+        }
+    }
+    """,
+    title="DNA Benchmark",
+    head="<link rel='icon' href='data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><text y=\".9em\" font-size=\"90\">🧬</text></svg>'>"
+)
 with demo:
     gr.HTML(TITLE)
     gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
@@ -120,18 +156,8 @@ with demo:
         with gr.TabItem("📝 About", elem_id="llm-benchmark-about", id=2):
             gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
 
-    with gr.Row():
-        with gr.Accordion("📙 Citation", open=False):
-            citation_button = gr.Textbox(
-                value=CITATION_BUTTON_TEXT,
-                label=CITATION_BUTTON_LABEL,
-                lines=20,
-                elem_id="citation-button",
-                show_copy_button=True,
-            )
-
 scheduler = BackgroundScheduler()
 scheduler.add_job(restart_space, "interval", seconds=1800)
 scheduler.start()
 
-demo.queue(default_concurrency_limit=40).launch(share=True)
+demo.queue(default_concurrency_limit=40).launch(share=True)

pyproject.toml

@@ -1,13 +1,7 @@
 [tool.ruff]
-# Enable pycodestyle (`E`) and Pyflakes (`F`) codes by default.
 select = ["E", "F"]
-ignore = ["E501"] # line too long (black is taking care of this)
+ignore = ["E501"]
 line-length = 119
-fixable = ["A", "B", "C", "D", "E", "F", "G", "I", "N", "Q", "S", "T", "W", "ANN", "ARG", "BLE", "COM", "DJ", "DTZ", "EM", "ERA", "EXE", "FBT", "ICN", "INP", "ISC", "NPY", "PD", "PGH", "PIE", "PL", "PT", "PTH", "PYI", "RET", "RSE", "RUF", "SIM", "SLF", "TCH", "TID", "TRY", "UP", "YTT"]
-
-[tool.isort]
-profile = "black"
-line_length = 119
 
 [tool.black]
 line-length = 119

requirements.txt

@@ -1,18 +1,9 @@
 APScheduler
-black
 datasets
 gradio==5.41.0
 gradio[oauth]
 gradio_leaderboard==0.0.13
-gradio_client
 huggingface-hub>=0.18.0
 plotly>=5.0.0
-matplotlib
-numpy
 pandas
-python-dateutil
-tqdm
-transformers
-tokenizers>=0.15.0
-sentencepiece
-python_dotenv==1.1.0
+python-dotenv==1.1.0

src/about.py

@@ -9,66 +9,49 @@ class Task:
     col_name: str
 
 
-# Select your tasks here
-# ---------------------------------------------------
 class Tasks(Enum):
-    # task_key in the json file, metric_key in the json file, name to display in the leaderboard
     task0 = Task("anli_r1", "acc", "ANLI")
     task1 = Task("logiqa", "acc_norm", "LogiQA")
 
 
-NUM_FEWSHOT = 0  # Change with your few shot
-# ---------------------------------------------------
+NUM_FEWSHOT = 0
 
-
-# Your leaderboard name
-TITLE = """<h1 align="center" id="space-title">DNA Benchmark</h1>"""
-
-# What does your leaderboard evaluate?
-INTRODUCTION_TEXT = """
-Intro text
+TITLE = """
+<div style="text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 3rem 2rem; border-radius: 15px; margin-bottom: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
+    <h1 style="color: white; font-size: 3.5rem; margin: 0; font-weight: 800; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">
+        🧬 DNA Benchmark
+    </h1>
+    <p style="color: rgba(255,255,255,0.95); font-size: 1.3rem; margin-top: 1rem; font-weight: 300;">
+        Evaluating DNA Foundational Models Performance
+    </p>
+</div>
 """
 
-# Which evaluations are you running? how can people reproduce what you have?
-LLM_BENCHMARKS_TEXT = f"""
-##
-This leaderboard evaluates the performance of LLMs on various tasks.
-
-## Reproducibility
-To reproduce our results, here is the commands you can run:
-
+INTRODUCTION_TEXT = """
+<div style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); padding: 1.5rem; border-radius: 10px; border-left: 5px solid #667eea; margin-bottom: 1.5rem;">
+    <p style="font-size: 1.1rem; color: #2d3748; margin: 0; line-height: 1.6;">
+        Compare and analyze the performance of state-of-the-art DNA foundational models across various genomics tasks including histone modification, splicing, promoter identification, enhancer detection, and SNP classification.
+    </p>
+</div>
 """
 
-EVALUATION_QUEUE_TEXT = """
-## Some good practices before submitting a model
-
-### 1) Make sure you can load your model and tokenizer using AutoClasses:
-```python
-from transformers import AutoConfig, AutoModel, AutoTokenizer
-config = AutoConfig.from_pretrained("your model name", revision=revision)
-model = AutoModel.from_pretrained("your model name", revision=revision)
-tokenizer = AutoTokenizer.from_pretrained("your model name", revision=revision)
-```
-If this step fails, follow the error messages to debug your model before submitting it. It's likely your model has been improperly uploaded.
+LLM_BENCHMARKS_TEXT = """
+<div style="background: var(--background-fill-primary, #fff);">
 
-Note: make sure your model is public!
-Note: if your model needs `use_remote_code=True`, we do not support this option yet but we are working on adding it, stay posted!
+## 📊 About This Leaderboard
 
-### 2) Convert your model weights to [safetensors](https://huggingface.co/docs/safetensors/index)
-It's a new format for storing weights which is safer and faster to load and use. It will also allow us to add the number of parameters of your model to the `Extended Viewer`!
+This leaderboard provides comprehensive benchmarking of DNA foundational models across multiple genomics tasks:
 
-### 3) Make sure your model has an open license!
-This is a leaderboard for Open LLMs, and we'd love for as many people as possible to know they can use your model 🤗
+- **🧬 Histone Modifications**: H2AFZ, H3K27ac, H3K27me3, H3K36me3, H3K4me1/2/3, H3K9ac, H3K9me3, H4K20me1
+- **✂️ Splicing**: Donor sites, Acceptor sites, All splice sites
+- **📍 Promoter Identification**: TATA-containing, Non-TATA, All promoters
+- **🎯 Enhancer Detection**: Enhancer identification and classification
+- **🔬 SNP Classification**: eQTL causality, ClinVar pathogenic variants, OMIM pathogenic variants
 
-### 4) Fill up your model card
-When we add extra information about models to the leaderboard, it will be automatically taken from the model card
-
-## In case of model failure
-If your model is displayed in the `FAILED` category, its execution stopped.
-Make sure you have followed the above steps first.
-If everything is done, check you can launch the EleutherAIHarness on your model locally, using the above command without modifications (you can add `--limit` to limit the number of examples per task).
-"""
+### 📈 Key Metrics
+- **Accuracy**: Overall prediction accuracy
+- **MCC**: Matthews Correlation Coefficient
+- **Weighted F1**: F1-score weighted by class support
 
-CITATION_BUTTON_LABEL = "Copy the following snippet to cite these results"
-CITATION_BUTTON_TEXT = r"""
+</div>
 """

src/display/css_html_js.py

@@ -1,105 +1,64 @@
 custom_css = """
-
-.markdown-text {
-    font-size: 16px !important;
-}
-
-#models-to-add-text {
-    font-size: 18px !important;
-}
-
-#citation-button span {
-    font-size: 16px !important;
+.gradio-container {
+  max-width: 1400px !important;
+  margin: 0 auto !important;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
 }
 
-#citation-button textarea {
-    font-size: 16px !important;
+.markdown-text {
+  font-size: 16px !important;
+  line-height: 1.7 !important;
 }
 
-#citation-button > label > button {
-    margin: 6px;
-    transform: scale(1.3);
+body:not(.dark) .markdown-text {
+  color: #2d3748 !important;
 }
 
-#leaderboard-table {
-    margin-top: 15px
+body:not(.dark) .markdown-text h2 {
+  color: #667eea !important;
+  font-weight: 700 !important;
+  margin-top: 1.5rem !important;
+  margin-bottom: 1rem !important;
 }
 
-#leaderboard-table-lite {
-    margin-top: 15px
+/* Table: only font weights */
+table tbody td,
+table tbody th {
+  font-weight: 400 !important;
 }
-
-#search-bar-table-box > div:first-child {
-    background: none;
-    border: none;
+table thead th {
+  font-weight: 600 !important;
 }
- 
-#search-bar {
-    padding: 0px;
+"""
+custom_css = """
+.gradio-container {
+  max-width: 1400px !important;
+  margin: 0 auto !important;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
 }
 
-/* Limit the width of the first AutoEvalColumn so that names don't expand too much */
-#leaderboard-table td:nth-child(2),
-#leaderboard-table th:nth-child(2) {
-    max-width: 400px;
-    overflow: auto;
-    white-space: nowrap;
+.markdown-text {
+  font-size: 16px !important;
+  line-height: 1.7 !important;
 }
 
-.tab-buttons button {
-    font-size: 20px;
+body:not(.dark) .markdown-text {
+  color: #2d3748 !important;
 }
 
-#scale-logo {
-    border-style: none !important;
-    box-shadow: none;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 600px;
+body:not(.dark) .markdown-text h2 {
+  color: #667eea !important;
+  font-weight: 700 !important;
+  margin-top: 1.5rem !important;
+  margin-bottom: 1rem !important;
 }
 
-#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;
+/* Table: only font weights */
+table tbody td,
+table tbody th {
+  font-weight: 400 !important;
 }
-#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
+table thead th {
+  font-weight: 600 !important;
 }
 """
-
-get_window_url_params = """
-    function(url_params) {
-        const params = new URLSearchParams(window.location.search);
-        url_params = Object.fromEntries(params);
-        return url_params;
-    }
-    """

src/display/plotting.py

@@ -1,8 +1,17 @@
 import plotly.express as px
+import plotly.graph_objects as go
 import pandas as pd
 
 METRICS_FOR_PLOTS = ["Accuracy", "MCC", "Weighted F1"]
 
+# Color scheme matching the UI theme
+COLORS = {
+    'primary': '#667eea',
+    'secondary': '#764ba2',
+    'accent': '#F97316',
+    'gradient': ['#667eea', '#764ba2', '#F97316', '#06b6d4', '#10b981']
+}
+
 def extract_mean_std(col):
     if isinstance(col, str) and '±' in col:
         try:
@@ -45,7 +54,7 @@ def make_model_all_datasets_wrapper(leaderboard_df):
 
 def plot_metric_bar_all_datasets(df, model, metric, orientation="v"):
     df = df.copy()
-    df = df[df['Model'] == model] 
+    df = df[df['Model'] == model]
 
     y_col = f"{metric}_mean"
     std_col = f"{metric}_std"
@@ -62,12 +71,13 @@ def plot_metric_bar_all_datasets(df, model, metric, orientation="v"):
         df,
         x=x_axis,
         y=y_axis,
-        color='Dataset Name', 
+        color='Dataset Name',
         orientation=orientation,
         text_auto=".2f",
         labels={y_col: metric, "Task": "Task"},
         title=f"{metric} for {model} across all datasets",
         height=height,
+        color_discrete_sequence=COLORS['gradient']
     )
 
     if orientation == "h":
@@ -96,20 +106,25 @@ def plot_metric_bar_all_datasets(df, model, metric, orientation="v"):
             'x': 0.5,
             'xanchor': 'center',
             'yanchor': 'top',
-            'font': dict(size=20),
-            'pad': dict(t=0, b=0),
+            'font': dict(size=22, color='#2d3748', family='Inter, sans-serif'),
+            'pad': dict(t=20, b=10),
         },
-        margin=dict(t=10, b=100, l=150, r=10),
+        margin=dict(t=80, b=100, l=150, r=10),
+        plot_bgcolor='rgba(0,0,0,0)',
+        paper_bgcolor='white',
+        font=dict(family='Inter, sans-serif', color='#2d3748'),
     )
 
     if orientation == "h":
-        layout_args["xaxis"] = dict(range=[0, 1])
+        layout_args["xaxis"] = dict(range=[0, 1], gridcolor='#e2e8f0')
         layout_args["yaxis_tickfont_size"] = 10
+        layout_args["yaxis"] = dict(gridcolor='#e2e8f0')
     else:
-        layout_args["yaxis"] = dict(range=[0, 1])
+        layout_args["yaxis"] = dict(range=[0, 1], gridcolor='#e2e8f0')
+        layout_args["xaxis"] = dict(gridcolor='#e2e8f0')
 
     fig.update_layout(**layout_args)
-    
+
     return fig
 
 def plot_metric_bar(df, group_by, filter_col, filter_val, dataset, metric, orientation="v"):
@@ -155,7 +170,9 @@ def plot_metric_bar(df, group_by, filter_col, filter_val, dataset, metric, orien
         )
 
     fig.update_traces(
-        marker_color="#F97316",
+        marker_color=COLORS['primary'],
+        marker_line_color=COLORS['secondary'],
+        marker_line_width=1.5,
         hovertemplate=hovertemplate,
         customdata=df[[std_col]].values
     )
@@ -166,18 +183,23 @@ def plot_metric_bar(df, group_by, filter_col, filter_val, dataset, metric, orien
             'x': 0.5,
             'xanchor': 'center',
             'yanchor': 'top',
-            'font': dict(size=20),
-            'pad': dict(t=0, b=0),
+            'font': dict(size=22, color='#2d3748', family='Inter, sans-serif'),
+            'pad': dict(t=20, b=10),
         },
-        margin=dict(t=10, b=100, l=150, r=10),
+        margin=dict(t=80, b=100, l=150, r=10),
+        plot_bgcolor='rgba(0,0,0,0)',
+        paper_bgcolor='white',
+        font=dict(family='Inter, sans-serif', color='#2d3748'),
     )
 
     if orientation == "h":
-        layout_args["xaxis"] = dict(range=[0, 1])
+        layout_args["xaxis"] = dict(range=[0, 1], gridcolor='#e2e8f0')
         layout_args["yaxis_tickfont_size"] = 10
+        layout_args["yaxis"] = dict(gridcolor='#e2e8f0')
     else:
-        layout_args["yaxis"] = dict(range=[0, 1])
+        layout_args["yaxis"] = dict(range=[0, 1], gridcolor='#e2e8f0')
+        layout_args["xaxis"] = dict(gridcolor='#e2e8f0')
 
     fig.update_layout(**layout_args)
-    
+
     return fig