Parity in functionality

Dockerfile

@@ -38,4 +38,4 @@ EXPOSE 7860
 WORKDIR /app
 
 # Command to run the application
-CMD ["/bin/bash", "-c", "conda run --no-capture-output -n omniseal-benchmark-backend gunicorn --chdir /app/backend -b 0.0.0.0:7860 app:app --reload"]
+CMD ["/bin/bash", "-c", "conda run --no-capture-output -n omniseal-benchmark-backend gunicorn --chdir /app/backend -b 0.0.0.0:7860 app:app --reload --reload-extra-file /app/frontend/dist/index.html --reload-engine=auto --workers=2 --timeout 120"]

README.md

@@ -10,37 +10,78 @@ short_description: POC development
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
-
 ## Docker Build Instructions
 
 ### Prerequisites
+
 - Docker installed on your system
 - Git repository cloned locally
 
-### Build Steps (no docker)
+### Build Steps (conda)
+
+1. Initialize conda environment
+
+```bash
+cd backend
+conda env create -f environment.yml -y
+```
+
+2. Build frontend (outputs html, js, css into frontend/dist)
 
-flask run --host=0.0.0.0 --port=7860 --reload
+```bash
+cd frontend
+npm install
+npm run build
+```
+
+3. Run backend server which serves built frontend files
+
+```bash
+gunicorn --chdir backend -b 0.0.0.0:7860 app:app --reload
+```
+
+4. Server will be running on `http://localhost:7860`
 
 ### Build Steps (Docker, huggingface)
 
 1. Navigate to the project directory:
-  ```bash
-  cd /path/to/omniseal_dev
-  ```
+
+```bash
+cd /path/to/omniseal_dev
+```
 
 2. Build the Docker image:
-  ```bash
-  docker build -t omniseal-benchmark .
-  ```
 
-  OR
-  ```bash
-  docker buildx build -t omniseal-benchmark .
-  ```
+```bash
+docker build -t omniseal-benchmark .
+```
+
+OR
+
+```bash
+docker buildx build -t omniseal-benchmark .
+```
+
+3. Run the container (this runs in auto-reload mode when you update python files in the backend directory). Note the -v argument make it so the backend could hot reload:
+
+```bash
+docker run -p 7860:7860 -v $(pwd)/backend:/app/backend omniseal-benchmark
+```
+
+4. Access the application at `http://localhost:7860`
+
+### Local Development
+
+When updating the backend, you can run it in whichever build steps above to take advantage of hot-reload so you don't have to restart the server.
+
+For the frontend to take advantage of hot reload:
+
+1. Create a `.env.local` file in the frontend directory. Set `VITE_API_SERVER_URL` to where your backend server is running. When running locally it will be `VITE_API_SERVER_URL=http://localhost:7860`. This overrides the configuration in `.env` so the frontend will connect with your backend URL of choice.
 
-3. Run the container (this runs in auto-reload mode when you update python files in the backend directory):
-  ```bash
-  docker run -p 7860:7860 -v $(pwd)/backend:/app/backend omniseal-benchmark
-  ```
+2. Run the development server with hot-reload:
 
-4. Access the application at `http://localhost:7860`
+```bash
+cd frontend
+npm install
+npm run dev
+```

backend/app.py

@@ -1,5 +1,5 @@
 from backend.chart import mk_variations
-from backend.examples import image_examples_tab
+from backend.examples import audio_examples_tab, image_examples_tab, video_examples_tab
 from flask import Flask, Response, send_from_directory
 from flask_cors import CORS
 import os
@@ -12,6 +12,8 @@ from tools import (
     get_old_format_dataframe,
 )  # Import your function
 import typing as tp
+import requests
+from urllib.parse import unquote
 
 
 logger = logging.getLogger(__name__)
@@ -36,7 +38,7 @@ def index():
 @app.route("/data/<path:filename>")
 def data_files(filename):
     """
-    Serve any csv or JSON file from the data directory.
+    Serves csv files from the data directory.
     """
     data_dir = os.path.join(os.path.dirname(__file__), "data")
     file_path = os.path.join(data_dir, filename)
@@ -44,35 +46,76 @@ def data_files(filename):
         df = pd.read_csv(file_path)
         logger.info(f"Processing file: {filename}")
         if filename.endswith("benchmark.csv"):
-            # If the file is a CSV, process it to get the leaderboard
             return get_leaderboard(df)
         elif filename.endswith("attacks_variations.csv"):
             return get_chart(df)
-        # return Response(json.dumps(result), mimetype="application/json")
-
-        # Unreachable code - this section will never execute
-        # output = StringIO()
-        # df.to_csv(output, index=False)
-        # return Response(output.getvalue(), mimetype="text/csv")
 
     return "File not found", 404
 
 
-@app.route("/examples/<path:filename>")
-def example_files(filename):
+@app.route("/examples/<path:type>")
+def example_files(type):
     """
     Serve example files from the examples directory.
     """
-    # examples_dir = os.path.join(os.path.dirname(__file__), "examples")
-    # file_path = os.path.join(examples_dir, filename)
-    # if os.path.isfile(file_path):
-    #     return send_from_directory(examples_dir, filename)
+
     abs_path = "https://dl.fbaipublicfiles.com/omnisealbench/"
 
-    result = image_examples_tab(abs_path)
-    return Response(json.dumps(result), mimetype="application/json")
+    # Switch based on the type parameter to call the appropriate tab function
+    if type == "image":
+        result = image_examples_tab(abs_path)
+        return Response(json.dumps(result), mimetype="application/json")
+    elif type == "audio":
+        # Assuming you'll create these functions
+        result = audio_examples_tab(abs_path)
+        return Response(json.dumps(result), mimetype="application/json")
+    elif type == "video":
+        # Assuming you'll create these functions
+        result = video_examples_tab(abs_path)
+        return Response(json.dumps(result), mimetype="application/json")
+    else:
+        return "Invalid example type", 400
+
+
+# Add a proxy endpoint to bypass CORS issues
+@app.route("/proxy/<path:url>")
+def proxy(url):
+    """
+    Proxy endpoint to fetch remote files and serve them to the frontend.
+    This helps bypass CORS restrictions on remote resources.
+    """
+    try:
+        # Decode the URL parameter
+        url = unquote(url)
 
-    return "File not found", 404
+        # Make sure we're only proxying from trusted domains for security
+        if not url.startswith("https://dl.fbaipublicfiles.com/"):
+            return {"error": "Only proxying from allowed domains is permitted"}, 403
+
+        response = requests.get(url, stream=True)
+
+        if response.status_code != 200:
+            return {"error": f"Failed to fetch from {url}"}, response.status_code
+
+        # Create a Flask Response with the same content type as the original
+        excluded_headers = [
+            "content-encoding",
+            "content-length",
+            "transfer-encoding",
+            "connection",
+        ]
+        headers = {
+            name: value
+            for name, value in response.headers.items()
+            if name.lower() not in excluded_headers
+        }
+
+        # Add CORS headers
+        headers["Access-Control-Allow-Origin"] = "*"
+
+        return Response(response.content, response.status_code, headers)
+    except Exception as e:
+        return {"error": str(e)}, 500
 
 
 def get_leaderboard(df):
@@ -138,7 +181,6 @@ def get_chart(df):
         # attacks_plot_metrics,
         # audio_attacks_with_variations,
     )
-    print(chart_data)
 
     return Response(json.dumps(chart_data), mimetype="application/json")
 

backend/examples.py

@@ -175,8 +175,13 @@ def build_infos(abs_path: Path, datatype: str, dataset_name: str, db_key: str):
 
                     files = [
                         {
-                            "url": f,
+                            "image_url": f,
                             "description": f"{n}\n{build_description(i, data_none, data_attack, quality_metrics)}",
+                            **(
+                                {"audio_url": f.replace(".png", ".wav")}
+                                if datatype == "audio" and f.endswith(".png")
+                                else {}
+                            ),
                         }
                         for i, (f, n) in enumerate(files)
                     ]
@@ -202,8 +207,6 @@ def image_examples_tab(abs_path: Path):
         db_key=db_key,
     )
 
-    print(image_infos)
-
     # First combo box (category selection)
     # model_choice = gr.Dropdown(
     #     choices=list(image_infos.keys()),
@@ -258,45 +261,47 @@ def video_examples_tab(abs_path: Path):
         db_key=db_key,
     )
 
+    return image_infos
+
     # First combo box (category selection)
-    model_choice = gr.Dropdown(
-        choices=list(image_infos.keys()),
-        label="Select a Model",
-        value=None,
-    )
+    # model_choice = gr.Dropdown(
+    #     choices=list(image_infos.keys()),
+    #     label="Select a Model",
+    #     value=None,
+    # )
     # Second combo box (subcategory selection)
     # Initialize with options from the first category by default
-    attack_choice = gr.Dropdown(
-        choices=list(image_infos["videoseal_0.0"].keys()),
-        label="Select an Attack",
-        value=None,
-    )
+    # attack_choice = gr.Dropdown(
+    #     choices=list(image_infos["videoseal_0.0"].keys()),
+    #     label="Select an Attack",
+    #     value=None,
+    # )
 
     # Gallery component to display images
-    gallery = gr.Gallery(
-        label="Video Gallery",
-        columns=4,
-        rows=1,
-    )
+    # gallery = gr.Gallery(
+    #     label="Video Gallery",
+    #     columns=4,
+    #     rows=1,
+    # )
 
     # Update options for the second combo box when the first one changes
-    def update_subcategories(selected_category):
-        values = list(image_infos[selected_category].keys())
-        values = [(v, v) for v in values]
-        attack_choice.choices = values
-        # return gr.Dropdown.update(choices=list(image_infos[selected_category].keys()))
+    # def update_subcategories(selected_category):
+    #     values = list(image_infos[selected_category].keys())
+    #     values = [(v, v) for v in values]
+    #     attack_choice.choices = values
+    #     # return gr.Dropdown.update(choices=list(image_infos[selected_category].keys()))
 
     # Function to load images based on selections from both combo boxes
-    def load_images(category, subcategory):
-        return image_infos.get(category, {}).get(subcategory, [])
+    # def load_images(category, subcategory):
+    #     return image_infos.get(category, {}).get(subcategory, [])
 
-    # Update gallery based on both combo box selections
-    model_choice.change(
-        fn=update_subcategories, inputs=model_choice, outputs=attack_choice
-    )
-    attack_choice.change(
-        fn=load_images, inputs=[model_choice, attack_choice], outputs=gallery
-    )
+    # # Update gallery based on both combo box selections
+    # model_choice.change(
+    #     fn=update_subcategories, inputs=model_choice, outputs=attack_choice
+    # )
+    # attack_choice.change(
+    #     fn=load_images, inputs=[model_choice, attack_choice], outputs=gallery
+    # )
 
 
 def audio_examples_tab(abs_path: Path):
@@ -311,12 +316,16 @@ def audio_examples_tab(abs_path: Path):
         db_key=db_key,
     )
 
+    return audio_infos
+
+    print(audio_infos)
+
     # First combo box (category selection)
-    model_choice = gr.Dropdown(
-        choices=list(audio_infos.keys()),
-        label="Select a Model",
-        value=None,
-    )
+    # model_choice = gr.Dropdown(
+    #     choices=list(audio_infos.keys()),
+    #     label="Select a Model",
+    #     value=None,
+    # )
     # Second combo box (subcategory selection)
     # Initialize with options from the first category by default
     attack_choice = gr.Dropdown(

frontend/package-lock.json

@@ -9,9 +9,11 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.0.0",
+        "@types/wavesurfer.js": "^6.0.12",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "recharts": "^2.9.0"
+        "recharts": "^2.9.0",
+        "wavesurfer.js": "^7.9.5"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.1.8",
@@ -21,7 +23,7 @@
         "@typescript-eslint/parser": "^7.7.0",
         "@vitejs/plugin-react": "^4.2.0",
         "autoprefixer": "^10.4.19",
-        "daisyui": "^4.10.2",
+        "daisyui": "^5.0.43",
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
         "tailwindcss": "^4.0.0",
@@ -1657,6 +1659,12 @@
       "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
       "license": "MIT"
     },
+    "node_modules/@types/debounce": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/debounce/-/debounce-1.2.4.tgz",
+      "integrity": "sha512-jBqiORIzKDOToaF63Fm//haOCHuwQuLa2202RK4MozpA6lh93eCBc+/8+wZn5OzjJt3ySdc+74SXWXB55Ewtyw==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
@@ -1685,6 +1693,15 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/wavesurfer.js": {
+      "version": "6.0.12",
+      "resolved": "https://registry.npmjs.org/@types/wavesurfer.js/-/wavesurfer.js-6.0.12.tgz",
+      "integrity": "sha512-oM9hYlPIVms4uwwoaGs9d0qp7Xk7IjSGkdwgmhUymVUIIilRfjtSQvoOgv4dpKiW0UozWRSyXfQqTobi0qWyCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/debounce": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.18.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz",
@@ -2108,16 +2125,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001721",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001721.tgz",
@@ -2228,46 +2235,12 @@
         "node": ">= 8"
       }
     },
-    "node_modules/css-selector-tokenizer": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
-      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "fastparse": "^1.1.2"
-      }
-    },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
-    "node_modules/culori": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
-      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      }
-    },
     "node_modules/d3-array": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
@@ -2390,23 +2363,13 @@
       }
     },
     "node_modules/daisyui": {
-      "version": "4.12.24",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.24.tgz",
-      "integrity": "sha512-JYg9fhQHOfXyLadrBrEqCDM6D5dWCSSiM6eTNCRrBRzx/VlOCrLS8eDfIw9RVvs64v2mJdLooKXY8EwQzoszAA==",
+      "version": "5.0.43",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.43.tgz",
+      "integrity": "sha512-2pshHJ73vetSpsbAyaOncGnNYL0mwvgseS1EWy1I9Qpw8D11OuBoDNIWrPIME4UFcq2xuff3A9x+eXbuFR9fUQ==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "css-selector-tokenizer": "^0.8",
-        "culori": "^3",
-        "picocolors": "^1",
-        "postcss-js": "^4"
-      },
-      "engines": {
-        "node": ">=16.9.0"
-      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/daisyui"
+        "url": "https://github.com/saadeghi/daisyui?sponsor=1"
       }
     },
     "node_modules/debug": {
@@ -2839,13 +2802,6 @@
       "license": "MIT",
       "peer": true
     },
-    "node_modules/fastparse": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
-      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/fastq": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -3898,26 +3854,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -4568,6 +4504,12 @@
         }
       }
     },
+    "node_modules/wavesurfer.js": {
+      "version": "7.9.5",
+      "resolved": "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-7.9.5.tgz",
+      "integrity": "sha512-ioOG9chuAn0bF2NYYKkZtaxjcQK/hFskLg8ViLYbJHhWPk1N5wWtuqVhqeh2ZWT2SK3t0E8UkD7lLDLuZQQaSA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

frontend/package.json

@@ -11,9 +11,11 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.0",
+    "@types/wavesurfer.js": "^6.0.12",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "recharts": "^2.9.0"
+    "recharts": "^2.9.0",
+    "wavesurfer.js": "^7.9.5"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.8",
@@ -23,11 +25,11 @@
     "@typescript-eslint/parser": "^7.7.0",
     "@vitejs/plugin-react": "^4.2.0",
     "autoprefixer": "^10.4.19",
-    "daisyui": "^4.10.2",
+    "daisyui": "^5.0.43",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.4.5",
     "vite": "^5.2.10"
   }
-}
+}

frontend/src/API.ts

@@ -1,5 +1,7 @@
 const VITE_API_SERVER_URL = import.meta.env.VITE_API_SERVER_URL || ''
 
+console.log(`API Server URL: ${VITE_API_SERVER_URL}`)
+
 class API {
   static async fetchIndex(): Promise<string> {
     const response = await fetch(VITE_API_SERVER_URL + '/')
@@ -8,8 +10,6 @@ class API {
   }
 
   static async fetchStaticFile(path: string): Promise<string> {
-    console.log(`Fetching static file: ${path}`)
-    console.log(`API Server URL: ${VITE_API_SERVER_URL}`)
     const response = await fetch(`${VITE_API_SERVER_URL}/${path}`)
     if (!response.ok) throw new Error(`Failed to fetch ${path}`)
     return response.text()
@@ -24,6 +24,11 @@ class API {
       return response.json()
     })
   }
+
+  // Add a method to fetch a resource via the proxy endpoint to bypass CORS issues
+  static getProxiedUrl(url: string): string {
+    return `${VITE_API_SERVER_URL}/proxy/${encodeURIComponent(url)}`
+  }
 }
 
 export default API

frontend/src/App.tsx

@@ -6,41 +6,79 @@ import Examples from './components/Examples'
 
 function App() {
   const file = 'voxpopuli_1k_audio'
-  const [activeTab, setActiveTab] = useState<'dataChart' | 'leaderboard' | 'examples'>('dataChart')
+  const [activeTab, setActiveTab] = useState<
+    'dataChart' | 'leaderboard' | 'imageExamples' | 'audioExamples' | 'videoExamples'
+  >('dataChart')
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-      <div className="card w-11/12 max-w-4xl bg-base-100 shadow-xl mb-8">
+    <div className="min-h-screen w-11/12 mx-auto">
+      <div className="card max-w-4xl bg-base-100">
         <div className="card-body">
           <h2 className="card-title">🥇 Omni Seal Bench Watermarking Leaderboard</h2>
-          <p>Simple proof of concept with Flask backend serving a React frontend.</p>
         </div>
       </div>
+      <div className="tabs tabs-border">
+        <input
+          type="radio"
+          name="my_tabs_6"
+          className="tab"
+          aria-label="Data Chart"
+          checked={activeTab === 'dataChart'}
+          onChange={() => setActiveTab('dataChart')}
+          defaultChecked
+        />
+        <div className="tab-content bg-base-100 border-base-300 p-6">
+          <DataChart file={file} />
+        </div>
 
-      <div className="tabs">
-        <a
-          className={`tab tab-bordered ${activeTab === 'dataChart' ? 'tab-active' : ''}`}
-          onClick={() => setActiveTab('dataChart')}
-        >
-          Data Chart
-        </a>
-        <a
-          className={`tab tab-bordered ${activeTab === 'leaderboard' ? 'tab-active' : ''}`}
-          onClick={() => setActiveTab('leaderboard')}
-        >
-          Leaderboard Table
-        </a>
-        <a
-          className={`tab tab-bordered ${activeTab === 'examples' ? 'tab-active' : ''}`}
-          onClick={() => setActiveTab('examples')}
-        >
-          Examples
-        </a>
-      </div>
+        <input
+          type="radio"
+          name="my_tabs_6"
+          className="tab"
+          aria-label="Leaderboard Table"
+          checked={activeTab === 'leaderboard'}
+          onChange={() => setActiveTab('leaderboard')}
+        />
+        <div className="tab-content bg-base-100 border-base-300 p-6">
+          <LeaderboardTable file={file} />
+        </div>
+
+        <input
+          type="radio"
+          name="my_tabs_6"
+          className="tab"
+          aria-label="Image Examples"
+          checked={activeTab === 'imageExamples'}
+          onChange={() => setActiveTab('imageExamples')}
+        />
+        <div className="tab-content bg-base-100 border-base-300 p-6">
+          <Examples fileType="image" />
+        </div>
 
-      {activeTab === 'dataChart' && <DataChart file={file} />}
-      {activeTab === 'leaderboard' && <LeaderboardTable file={file} />}
-      {activeTab === 'examples' && <Examples />}
+        <input
+          type="radio"
+          name="my_tabs_6"
+          className="tab"
+          aria-label="Audio Examples"
+          checked={activeTab === 'audioExamples'}
+          onChange={() => setActiveTab('audioExamples')}
+        />
+        <div className="tab-content bg-base-100 border-base-300 p-6">
+          <Examples fileType="audio" />
+        </div>
+
+        <input
+          type="radio"
+          name="my_tabs_6"
+          className="tab"
+          aria-label="Video Examples"
+          checked={activeTab === 'videoExamples'}
+          onChange={() => setActiveTab('videoExamples')}
+        />
+        <div className="tab-content bg-base-100 border-base-300 p-6">
+          <Examples fileType="video" />
+        </div>
+      </div>
     </div>
   )
 }

frontend/src/components/AudioPlayer.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from 'react'
+import WaveSurfer from 'wavesurfer.js'
+// @ts-ignore: No types for timeline.esm.js
+import TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline.esm.js'
+import API from '../API' // Correct import for the API class
+
+const AudioPlayer = ({ src }: { src: string }) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const wavesurferRef = useRef<WaveSurfer | null>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+
+  // Initialize WaveSurfer when component mounts
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    // Get proxied URL to bypass CORS
+    const proxiedUrl = API.getProxiedUrl(src)
+
+    // Create an instance of WaveSurfer
+    wavesurferRef.current = WaveSurfer.create({
+      container: containerRef.current,
+      waveColor: 'rgb(200, 0, 200)',
+      progressColor: 'rgb(100, 0, 100)',
+      url: proxiedUrl, // Use the proxied URL
+      minPxPerSec: 100,
+      plugins: [TimelinePlugin.create()],
+    })
+
+    // Play on click
+    wavesurferRef.current.on('interaction', () => {
+      wavesurferRef.current?.play()
+      setIsPlaying(true)
+    })
+
+    // Rewind to the beginning on finished playing
+    wavesurferRef.current.on('finish', () => {
+      wavesurferRef.current?.setTime(0)
+      setIsPlaying(false)
+    })
+
+    // Update playing state
+    wavesurferRef.current.on('play', () => setIsPlaying(true))
+    wavesurferRef.current.on('pause', () => setIsPlaying(false))
+
+    // Cleanup on unmount
+    return () => {
+      wavesurferRef.current?.destroy()
+    }
+  }, [src])
+
+  const handlePlayPause = () => {
+    wavesurferRef.current?.playPause()
+  }
+
+  return (
+    <div>
+      <div ref={containerRef} />
+      <button onClick={handlePlayPause}>{isPlaying ? 'Pause' : 'Play'}</button>
+    </div>
+  )
+}
+
+export default AudioPlayer

frontend/src/components/DataChart.tsx

@@ -20,7 +20,6 @@ interface Row {
   [key: string]: string | number
 }
 
-// MetricSelector Component
 const MetricSelector = ({
   metrics,
   selectedMetric,
@@ -31,28 +30,24 @@ const MetricSelector = ({
   onMetricChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
 }) => {
   return (
-    <div className="mb-4">
-      <label htmlFor="metric-selector" className="block text-sm font-medium text-gray-700">
-        Select Metric:
-      </label>
+    <fieldset className="fieldset mb-4">
+      <legend className="fieldset-legend">Metric</legend>
       <select
         id="metric-selector"
         value={selectedMetric || ''}
         onChange={onMetricChange}
-        className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"
+        className="select select-bordered w-full"
       >
-        <option value="">-- Select a Metric --</option>
         {[...metrics].map((metric) => (
           <option key={metric} value={metric}>
             {metric}
           </option>
         ))}
       </select>
-    </div>
+    </fieldset>
   )
 }
 
-// AttackSelector Component
 const AttackSelector = ({
   attacks,
   selectedAttack,
@@ -63,24 +58,21 @@ const AttackSelector = ({
   onAttackChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
 }) => {
   return (
-    <div className="mb-4">
-      <label htmlFor="attack-selector" className="block text-sm font-medium text-gray-700">
-        Select Attack:
-      </label>
+    <fieldset className="fieldset mb-4">
+      <legend className="fieldset-legend">Attack</legend>
       <select
         id="attack-selector"
         value={selectedAttack || ''}
         onChange={onAttackChange}
-        className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"
+        className="select select-bordered w-full"
       >
-        <option value="">-- Select an Attack --</option>
         {[...attacks].map((attack) => (
           <option key={attack} value={attack}>
             {attack}
           </option>
         ))}
       </select>
-    </div>
+    </fieldset>
   )
 }
 
@@ -133,23 +125,28 @@ const DataChart = ({ file }: DataChartProps) => {
     .sort((a, b) => (a.strength as number) - (b.strength as number))
 
   return (
-    <div className="w-11/12 max-w-4xl bg-white rounded shadow p-4 overflow-auto mb-8">
+    <div className="max-w-4xl rounded shadow p-4 overflow-auto mb-8">
       <h3 className="font-bold mb-2">Data Visualization</h3>
       {loading && <div>Loading...</div>}
       {error && <div className="text-red-500">{error}</div>}
       {!loading && !error && (
         <>
-          <MetricSelector
-            metrics={metrics}
-            selectedMetric={selectedMetric}
-            onMetricChange={handleMetricChange}
-          />
-
-          <AttackSelector
-            attacks={attacks}
-            selectedAttack={selectedAttack}
-            onAttackChange={handleAttackChange}
-          />
+          <div className="flex flex-col md:flex-row gap-4 mb-4">
+            <div className="w-full md:w-1/2">
+              <MetricSelector
+                metrics={metrics}
+                selectedMetric={selectedMetric}
+                onMetricChange={handleMetricChange}
+              />
+            </div>
+            <div className="w-full md:w-1/2">
+              <AttackSelector
+                attacks={attacks}
+                selectedAttack={selectedAttack}
+                onAttackChange={handleAttackChange}
+              />
+            </div>
+          </div>
 
           {chartData.length > 0 && (
             <div className="h-64 mb-4">
@@ -171,7 +168,7 @@ const DataChart = ({ file }: DataChartProps) => {
                       Math.max(...sortedChartData.map((item) => Number(item.strength))),
                     ]}
                     type="number"
-                    tickFormatter={(value) => value.toString()}
+                    tickFormatter={(value) => value.toFixed(3)}
                     label={{ value: 'Strength', position: 'insideBottomRight', offset: -5 }}
                   />
                   <YAxis
@@ -181,8 +178,16 @@ const DataChart = ({ file }: DataChartProps) => {
                       position: 'insideLeft',
                       style: { textAnchor: 'middle' },
                     }}
+                    tickFormatter={(value) => value.toFixed(3)}
+                  />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: '#2a303c',
+                      borderColor: '#374151',
+                      color: 'white',
+                    }}
+                    formatter={(value: number) => value.toFixed(3)}
                   />
-                  <Tooltip />
                   <Legend />
 
                   {(() => {
@@ -204,7 +209,6 @@ const DataChart = ({ file }: DataChartProps) => {
 
                     // Return a Line component for each model
                     return [...models].map((model, index) => {
-                      console.log(sortedChartData.filter((row) => row.model === model))
                       return (
                         <Line
                           key={model as string}

frontend/src/components/Examples.tsx

@@ -1,10 +1,21 @@
 import React, { useState, useEffect } from 'react'
 import API from '../API'
+import AudioPlayer from './AudioPlayer'
 
-const Examples = () => {
-  const [fileType, setFileType] = useState<'image' | 'audio' | 'video'>('image')
+interface ExamplesProps {
+  fileType: 'image' | 'audio' | 'video'
+}
+
+type ExamplesData = {
+  image_url: string
+  audio_url?: string
+  video_url?: string
+  description: string
+}
+
+const Examples = ({ fileType }: ExamplesProps) => {
   const [examples, setExamples] = useState<{
-    [model: string]: { [attack: string]: { url: string; description: string }[] }
+    [model: string]: { [attack: string]: ExamplesData[] }
   }>({})
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -16,8 +27,25 @@ const Examples = () => {
     setError(null)
     API.fetchExamplesByType(fileType)
       .then((data) => {
-        // data is a dictionary from {[model]: {[attack]: (url, description)}}
+        // data is a dictionary from {[model]: {[attack]: {image_url, audio_url, video_url, description}}}
         setExamples(data)
+
+        // get the first model and attack if available
+        const models = Object.keys(data)
+        if (models.length > 0) {
+          setSelectedModel(models[0])
+          const attacks = Object.keys(data[models[0]])
+          if (attacks.length > 0) {
+            setSelectedAttack(attacks[0]) // Set the first attack of the first model
+          } else {
+            setSelectedAttack(null) // No attacks available
+          }
+        } else {
+          setSelectedModel(null)
+          setSelectedAttack(null) // No models available
+        }
+
+        // Reset loading state
         setLoading(false)
       })
       .catch((err) => {
@@ -25,9 +53,6 @@ const Examples = () => {
         setLoading(false)
       })
   }, [fileType])
-  if (selectedModel && selectedAttack) {
-    console.log(examples[selectedModel][selectedAttack])
-  }
 
   // Define the Gallery component within this file
   const Gallery = ({
@@ -39,7 +64,9 @@ const Examples = () => {
     selectedModel: string
     selectedAttack: string
     examples: {
-      [model: string]: { [attack: string]: { url: string; description: string }[] }
+      [model: string]: {
+        [attack: string]: ExamplesData[]
+      }
     }
     fileType: 'image' | 'audio' | 'video'
   }) => {
@@ -47,16 +74,21 @@ const Examples = () => {
 
     return (
       <div className="example-display">
-        <h4>{selectedModel}</h4>
-        <h5>{selectedAttack}</h5>
         {exampleItems.map((item, index) => (
           <div key={index} className="example-item">
             <p>{item.description}</p>
             {fileType === 'image' && (
-              <img src={item.url} alt={item.description} className="example-image" />
+              <img src={item.image_url} alt={item.description} className="example-image" />
+            )}
+            {fileType === 'audio' && item.audio_url && (
+              <>
+                <AudioPlayer src={item.audio_url} />
+                <img src={item.image_url} alt={item.description} className="example-image" />
+              </>
+            )}
+            {fileType === 'video' && (
+              <video controls src={item.video_url} className="example-video" />
             )}
-            {fileType === 'audio' && <audio controls src={item.url} className="example-audio" />}
-            {fileType === 'video' && <video controls src={item.url} className="example-video" />}
           </div>
         ))}
       </div>
@@ -65,56 +97,39 @@ const Examples = () => {
 
   return (
     <div className="examples-container">
-      <h3>Examples</h3>
-      <div className="file-type-selector">
-        <label>
-          Select File Type:
-          <select
-            value={fileType}
-            onChange={(e) => setFileType(e.target.value as 'image' | 'audio' | 'video')}
-          >
-            <option value="image">Image</option>
-            <option value="audio">Audio</option>
-            <option value="video">Video</option>
-          </select>
-        </label>
-      </div>
-
-      <div className="model-selector">
-        <label>
-          Select Model:
+      <div className="selectors-container flex flex-col md:flex-row gap-4 mb-4">
+        <fieldset className="fieldset">
+          <legend className="fieldset-legend">Model</legend>
           <select
+            className="select select-bordered w-full"
             value={selectedModel || ''}
             onChange={(e) => setSelectedModel(e.target.value || null)}
           >
-            <option value="">-- Select a Model --</option>
             {Object.keys(examples).map((model) => (
               <option key={model} value={model}>
                 {model}
               </option>
             ))}
           </select>
-        </label>
-      </div>
+        </fieldset>
 
-      {selectedModel && (
-        <div className="attack-selector">
-          <label>
-            Select Attack:
+        {selectedModel && (
+          <fieldset className="fieldset">
+            <legend className="fieldset-legend">Attack</legend>
             <select
+              className="select select-bordered w-full"
               value={selectedAttack || ''}
               onChange={(e) => setSelectedAttack(e.target.value || null)}
             >
-              <option value="">-- Select an Attack --</option>
               {Object.keys(examples[selectedModel]).map((attack) => (
                 <option key={attack} value={attack}>
                   {attack}
                 </option>
               ))}
             </select>
-          </label>
-        </div>
-      )}
+          </fieldset>
+        )}
+      </div>
 
       {loading && <p>Loading files...</p>}
       {error && <p className="error">Error: {error}</p>}

frontend/src/components/LeaderboardFilter.tsx

@@ -0,0 +1,385 @@
+import React, { useState, useEffect } from 'react'
+
+interface Groups {
+  [group: string]: { [subgroup: string]: string[] }
+}
+
+interface FilterProps {
+  groups: Groups
+  selectedMetrics: Set<string>
+  setSelectedMetrics: (metrics: Set<string>) => void
+  defaultSelectedMetrics?: string[]
+}
+
+const LeaderboardFilter: React.FC<FilterProps> = ({
+  groups,
+  selectedMetrics,
+  setSelectedMetrics,
+  defaultSelectedMetrics,
+}) => {
+  const [openGroups, setOpenGroups] = useState<{ [key: string]: boolean }>({})
+  const [openSubGroups, setOpenSubGroups] = useState<{ [key: string]: { [key: string]: boolean } }>(
+    {}
+  )
+  const [searchTerm, setSearchTerm] = useState('')
+
+  // Initialize openGroups and openSubGroups based on defaultSelectedMetrics on page load
+  useEffect(() => {
+    if (!defaultSelectedMetrics) return
+
+    const initialOpenGroups: { [key: string]: boolean } = {}
+    const initialOpenSubGroups: { [key: string]: { [key: string]: boolean } } = {}
+
+    Object.entries(groups).forEach(([group, subGroups]) => {
+      let groupHasDefault = false
+      initialOpenSubGroups[group] = {}
+
+      Object.entries(subGroups).forEach(([subGroup, metrics]) => {
+        const hasDefault = metrics.some((metric) => defaultSelectedMetrics.includes(metric))
+        initialOpenSubGroups[group][subGroup] = hasDefault
+        if (hasDefault) groupHasDefault = true
+      })
+
+      initialOpenGroups[group] = groupHasDefault
+    })
+
+    setOpenGroups(initialOpenGroups)
+    setOpenSubGroups(initialOpenSubGroups)
+  }, [groups, defaultSelectedMetrics])
+
+  const toggleGroup = (group: string) => {
+    setOpenGroups((prev) => ({ ...prev, [group]: !prev[group] }))
+  }
+
+  const toggleSubGroup = (group: string, subGroup: string) => {
+    setOpenSubGroups((prev) => ({
+      ...prev,
+      [group]: {
+        ...prev[group],
+        [subGroup]: !prev[group]?.[subGroup],
+      },
+    }))
+  }
+
+  const selectAllInGroup = (group: string) => {
+    const newSet = new Set(selectedMetrics)
+    Object.entries(groups[group]).forEach(([subGroup, metrics]) => {
+      const filteredMetrics = searchTerm
+        ? metrics.filter((metric) => metric.toLowerCase().includes(searchTerm.toLowerCase()))
+        : metrics
+      filteredMetrics.forEach((metric) => newSet.add(metric))
+    })
+    setSelectedMetrics(newSet)
+    setOpenGroups((prev) => ({ ...prev, [group]: true }))
+    setOpenSubGroups((prev) => ({
+      ...prev,
+      [group]: Object.keys(groups[group]).reduce(
+        (acc, subGroup) => {
+          acc[subGroup] = true
+          return acc
+        },
+        {} as { [key: string]: boolean }
+      ),
+    }))
+  }
+
+  const deselectAllInGroup = (group: string) => {
+    const newSet = new Set(selectedMetrics)
+    Object.entries(groups[group]).forEach(([subGroup, metrics]) => {
+      const filteredMetrics = searchTerm
+        ? metrics.filter((metric) => metric.toLowerCase().includes(searchTerm.toLowerCase()))
+        : metrics
+      filteredMetrics.forEach((metric) => newSet.delete(metric))
+    })
+    setSelectedMetrics(newSet)
+    setOpenSubGroups((prev) => ({
+      ...prev,
+      [group]: Object.keys(prev[group] || {}).reduce(
+        (acc, subGroup) => {
+          acc[subGroup] = false
+          return acc
+        },
+        {} as { [key: string]: boolean }
+      ),
+    }))
+  }
+
+  const selectAllInSubGroup = (group: string, subGroup: string) => {
+    const newSet = new Set(selectedMetrics)
+    const filteredMetrics = searchTerm
+      ? groups[group][subGroup].filter((metric) =>
+          metric.toLowerCase().includes(searchTerm.toLowerCase())
+        )
+      : groups[group][subGroup]
+    filteredMetrics.forEach((metric) => newSet.add(metric))
+    setSelectedMetrics(newSet)
+    setOpenGroups((prev) => ({ ...prev, [group]: true }))
+    setOpenSubGroups((prev) => ({
+      ...prev,
+      [group]: {
+        ...(prev[group] || {}),
+        [subGroup]: true,
+      },
+    }))
+  }
+
+  const deselectAllInSubGroup = (group: string, subGroup: string) => {
+    const newSet = new Set(selectedMetrics)
+    const filteredMetrics = searchTerm
+      ? groups[group][subGroup].filter((metric) =>
+          metric.toLowerCase().includes(searchTerm.toLowerCase())
+        )
+      : groups[group][subGroup]
+    filteredMetrics.forEach((metric) => newSet.delete(metric))
+    setSelectedMetrics(newSet)
+    setOpenSubGroups((prev) => ({
+      ...prev,
+      [group]: {
+        ...(prev[group] || {}),
+        [subGroup]: false,
+      },
+    }))
+  }
+
+  const selectDefaultsInFilter = () => {
+    if (!defaultSelectedMetrics) return
+    setSelectedMetrics(new Set(defaultSelectedMetrics))
+    const openGroups: { [key: string]: boolean } = {}
+    const openSubGroups: { [key: string]: { [key: string]: boolean } } = {}
+    Object.entries(groups).forEach(([group, subGroups]) => {
+      let groupHasDefault = false
+      openSubGroups[group] = {}
+      Object.entries(subGroups).forEach(([subGroup, metrics]) => {
+        const hasDefault = metrics.some((metric) => defaultSelectedMetrics.includes(metric))
+        openSubGroups[group][subGroup] = hasDefault
+        if (hasDefault) groupHasDefault = true
+      })
+      openGroups[group] = groupHasDefault
+    })
+    setOpenGroups(openGroups)
+    setOpenSubGroups(openSubGroups)
+  }
+
+  const selectAllGlobal = () => {
+    const allMetrics = Object.values(groups)
+      .flatMap((subGroups) => Object.values(subGroups).flat())
+      .filter((metric) => !searchTerm || metric.toLowerCase().includes(searchTerm.toLowerCase()))
+    setSelectedMetrics(new Set(allMetrics))
+    const openGroups: { [key: string]: boolean } = {}
+    const openSubGroups: { [key: string]: { [key: string]: boolean } } = {}
+    Object.entries(groups).forEach(([group, subGroups]) => {
+      let groupHasVisible = false
+      openSubGroups[group] = {}
+      Object.entries(subGroups).forEach(([subGroup, metrics]) => {
+        const hasVisible = metrics.some(
+          (metric) => !searchTerm || metric.toLowerCase().includes(searchTerm.toLowerCase())
+        )
+        openSubGroups[group][subGroup] = hasVisible
+        if (hasVisible) groupHasVisible = true
+      })
+      openGroups[group] = groupHasVisible
+    })
+    setOpenGroups(openGroups)
+    setOpenSubGroups(openSubGroups)
+  }
+
+  const deselectAllGlobal = () => {
+    const newSet = new Set(selectedMetrics)
+    Object.values(groups)
+      .flatMap((subGroups) => Object.values(subGroups).flat())
+      .filter((metric) => !searchTerm || metric.toLowerCase().includes(searchTerm.toLowerCase()))
+      .forEach((metric) => newSet.delete(metric))
+    setSelectedMetrics(newSet)
+    // Collapse all groups and subgroups that have no visible metrics (matches)
+    const openGroups: { [key: string]: boolean } = {}
+    const openSubGroups: { [key: string]: { [key: string]: boolean } } = {}
+    Object.entries(groups).forEach(([group, subGroups]) => {
+      let groupHasVisible = false
+      openSubGroups[group] = {}
+      Object.entries(subGroups).forEach(([subGroup, metrics]) => {
+        const hasVisible = metrics.some(
+          (metric) => !searchTerm || metric.toLowerCase().includes(searchTerm.toLowerCase())
+        )
+        openSubGroups[group][subGroup] = false // always collapse
+        if (hasVisible) groupHasVisible = true
+      })
+      openGroups[group] = false // always collapse
+    })
+    setOpenGroups(openGroups)
+    setOpenSubGroups(openSubGroups)
+  }
+
+  return (
+    <div className="w-full mb-4">
+      <fieldset className="fieldset w-full p-4 rounded border">
+        <legend className="fieldset-legend font-semibold">Filter Metrics</legend>
+        <div className="flex gap-2 mb-3">
+          <div className="relative mr-2">
+            <input
+              type="text"
+              placeholder="Search metrics..."
+              className="input input-bordered border-white input-sm w-48 pr-8"
+              value={searchTerm}
+              onChange={(e) => {
+                const value = e.target.value
+                setSearchTerm(value)
+                const openGroups: { [key: string]: boolean } = {}
+                const openSubGroups: { [key: string]: { [key: string]: boolean } } = {}
+                Object.entries(groups).forEach(([group, subGroups]) => {
+                  let groupHasMatch = false
+                  openSubGroups[group] = {}
+                  Object.entries(subGroups).forEach(([subGroup, metrics]) => {
+                    const hasMatch = metrics.some((metric) =>
+                      metric.toLowerCase().includes(value.toLowerCase())
+                    )
+                    openSubGroups[group][subGroup] = hasMatch || value === ''
+                    if (hasMatch) groupHasMatch = true
+                  })
+                  openGroups[group] = groupHasMatch || value === ''
+                })
+                setOpenGroups(openGroups)
+                setOpenSubGroups(openSubGroups)
+              }}
+            />
+            <span className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 21l-4-4m0 0A7 7 0 104 4a7 7 0 0013 13z"
+                />
+              </svg>
+            </span>
+          </div>
+          <button
+            type="button"
+            className="text-xs px-3 py-1 border rounded font-semibold bg-base-200 cursor-pointer"
+            onClick={selectAllGlobal}
+          >
+            All
+          </button>
+          <button
+            type="button"
+            className="text-xs px-3 py-1 border rounded font-semibold bg-base-200 cursor-pointer"
+            onClick={deselectAllGlobal}
+          >
+            None
+          </button>
+          {defaultSelectedMetrics && (
+            <button
+              type="button"
+              className="text-xs px-3 py-1 border rounded font-semibold bg-base-200 cursor-pointer"
+              onClick={selectDefaultsInFilter}
+            >
+              Defaults
+            </button>
+          )}
+        </div>
+        <div className="flex flex-row flex-wrap gap-4 w-full items-start">
+          {Object.entries(groups).map(([group, subGroups]) => (
+            <div key={group} className="flex-1 min-w-[220px] max-w-full">
+              <div className="flex items-center gap-2 mb-1">
+                <button
+                  type="button"
+                  onClick={() => toggleGroup(group)}
+                  className="flex-1 text-left font-medium py-1 px-2 rounded border border-gray-200 cursor-pointer"
+                >
+                  {group} {openGroups[group] ? '▼' : '▶'}
+                </button>
+                <button
+                  type="button"
+                  className="text-xs px-2 py-1 border rounded cursor-pointer"
+                  onClick={() => selectAllInGroup(group)}
+                >
+                  All
+                </button>
+                <button
+                  type="button"
+                  className="text-xs px-2 py-1 border rounded cursor-pointer"
+                  onClick={() => deselectAllInGroup(group)}
+                >
+                  None
+                </button>
+              </div>
+              {openGroups[group] && (
+                <div className="ml-2">
+                  {Object.entries(subGroups).map(([subGroup, metrics]) => {
+                    const filteredMetrics = searchTerm
+                      ? metrics.filter((metric) =>
+                          metric.toLowerCase().includes(searchTerm.toLowerCase())
+                        )
+                      : metrics
+                    if (filteredMetrics.length === 0) return null
+                    return (
+                      <div key={subGroup} className="mb-2">
+                        <div className="flex items-center gap-2 mb-1">
+                          <button
+                            type="button"
+                            onClick={() => toggleSubGroup(group, subGroup)}
+                            className="flex-1 text-left py-1 px-2 rounded border border-gray-100 cursor-pointer"
+                          >
+                            {subGroup} {openSubGroups[group]?.[subGroup] ? '▼' : '▶'}
+                          </button>
+                          <button
+                            type="button"
+                            className="text-xs px-2 py-1 border rounded cursor-pointer"
+                            onClick={() => selectAllInSubGroup(group, subGroup)}
+                          >
+                            All
+                          </button>
+                          <button
+                            type="button"
+                            className="text-xs px-2 py-1 border rounded cursor-pointer"
+                            onClick={() => deselectAllInSubGroup(group, subGroup)}
+                          >
+                            None
+                          </button>
+                        </div>
+                        {openSubGroups[group]?.[subGroup] && (
+                          <div className="grid grid-cols-1 gap-1 ml-2 max-h-48 overflow-y-auto pr-2">
+                            {filteredMetrics.map((metric) => (
+                              <label key={metric} className="flex items-center gap-2 text-sm">
+                                <input
+                                  type="checkbox"
+                                  checked={selectedMetrics.has(metric)}
+                                  onChange={(event) => {
+                                    const newSet = new Set(selectedMetrics)
+                                    if (event.target.checked) {
+                                      newSet.add(metric)
+                                    } else {
+                                      newSet.delete(metric)
+                                    }
+                                    setSelectedMetrics(newSet)
+                                  }}
+                                  className="form-checkbox h-4 w-4"
+                                />
+                                <span className="truncate" title={metric}>
+                                  {metric.includes('_')
+                                    ? metric.split('_').slice(1).join('_')
+                                    : metric}
+                                </span>
+                              </label>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </fieldset>
+    </div>
+  )
+}
+
+export default LeaderboardFilter

frontend/src/components/LeaderboardTable.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import API from '../API'
+import LeaderboardFilter from './LeaderboardFilter'
 
 interface LeaderboardTableProps {
   file: string
@@ -14,90 +15,6 @@ interface Groups {
   [group: string]: { [subgroup: string]: string[] }
 }
 
-// New Filter Component
-function Filter({
-  groups,
-  selectedMetrics,
-  setSelectedMetrics,
-}: {
-  groups: Groups
-  selectedMetrics: Set<string>
-  setSelectedMetrics: (metrics: Set<string>) => void
-}) {
-  const [openGroups, setOpenGroups] = useState<{ [key: string]: boolean }>({})
-  const [openSubGroups, setOpenSubGroups] = useState<{ [key: string]: { [key: string]: boolean } }>(
-    {}
-  )
-
-  const toggleGroup = (group: string) => {
-    setOpenGroups((prev) => ({ ...prev, [group]: !prev[group] }))
-  }
-
-  const toggleSubGroup = (group: string, subGroup: string) => {
-    setOpenSubGroups((prev) => ({
-      ...prev,
-      [group]: {
-        ...prev[group],
-        [subGroup]: !prev[group]?.[subGroup],
-      },
-    }))
-  }
-  return (
-    <div className="w-11/12 flex flex-wrap gap-4 p-4 bg-gray-50 rounded shadow">
-      {Object.entries(groups).map(([group, subGroups]) => (
-        <div key={group} className="filter-group w-1/3 border p-2 rounded overflow-hidden">
-          <h4
-            onClick={() => toggleGroup(group)}
-            className="cursor-pointer text-lg font-semibold text-blue-600 hover:underline truncate"
-            title={group}
-          >
-            {group} {openGroups[group] ? '▼' : '▶'}
-          </h4>
-          {openGroups[group] && (
-            <div className="filter-subgroups">
-              {Object.entries(subGroups).map(([subGroup, metrics]) => (
-                <div key={subGroup} className="filter-subgroup border-t pt-2 mt-2">
-                  <h5
-                    onClick={() => toggleSubGroup(group, subGroup)}
-                    className="cursor-pointer text-md font-medium text-gray-700 hover:underline truncate"
-                    title={subGroup}
-                  >
-                    {subGroup} {openSubGroups[group]?.[subGroup] ? '▼' : '▶'}
-                  </h5>
-                  {openSubGroups[group]?.[subGroup] && (
-                    <div className="filter-metrics grid grid-cols-2 gap-2 mt-2">
-                      {metrics.map((metric) => (
-                        <div key={metric} className="flex items-center space-x-2 truncate">
-                          <input
-                            type="checkbox"
-                            checked={selectedMetrics.has(metric)}
-                            onChange={(event) => {
-                              const newSet = new Set(selectedMetrics)
-                              if (event.target.checked) {
-                                newSet.add(metric)
-                              } else {
-                                newSet.delete(metric)
-                              }
-                              setSelectedMetrics(newSet)
-                            }}
-                            className="form-checkbox h-4 w-4 text-blue-600"
-                          />
-                          <label className="text-sm text-gray-600 truncate" title={metric}>
-                            {metric.includes('_') ? metric.split('_').slice(1).join('_') : metric}
-                          </label>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      ))}
-    </div>
-  )
-}
 const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
   const [tableRows, setTableRows] = useState<Row[]>([])
   const [tableHeader, setTableHeader] = useState<string[]>([])
@@ -106,6 +23,7 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
   const [groups, setGroups] = useState<Groups>({})
 
   const [selectedMetrics, setSelectedMetrics] = useState<Set<string>>(new Set())
+  const [defaultSelectedMetrics, setDefaultSelectedMetrics] = useState<string[]>([])
 
   useEffect(() => {
     API.fetchStaticFile(`data/${file}_benchmark.csv`)
@@ -115,23 +33,44 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
         const groups = data['groups'] as { [key: string]: string[] }
 
         // Each value of groups is a list of metrics, group them by the first part of the metric before the first _
-        const groupsData = Object.entries(groups).reduce(
-          (acc, [group, metrics]) => {
-            acc[group] = metrics.reduce<{ [key: string]: string[] }>((subAcc, metric) => {
-              const [mainGroup, subGroup] = metric.split('_')
-              if (!subAcc[mainGroup]) {
-                subAcc[mainGroup] = []
-              }
-              subAcc[mainGroup].push(metric)
-              return subAcc
-            }, {})
-            return acc
-          },
-          {} as { [key: string]: { [key: string]: string[] } }
-        )
+        const groupsData = Object.entries(groups)
+          .sort(([groupA], [groupB]) => {
+            // Make sure "overall" comes first
+            if (groupA === 'Overall') return -1
+            if (groupB === 'Overall') return 1
+            // Otherwise sort alphabetically
+            return groupA.localeCompare(groupB)
+          })
+          .reduce(
+            (acc, [group, metrics]) => {
+              // Sort metrics to ensure consistent subgroup order
+              const sortedMetrics = [...metrics].sort()
+
+              // Create and sort subgroups
+              acc[group] = sortedMetrics.reduce<{ [key: string]: string[] }>((subAcc, metric) => {
+                const [mainGroup, subGroup] = metric.split('_')
+                if (!subAcc[mainGroup]) {
+                  subAcc[mainGroup] = []
+                }
+                subAcc[mainGroup].push(metric)
+                return subAcc
+              }, {})
+
+              // Convert to sorted entries and back to object
+              acc[group] = Object.fromEntries(
+                Object.entries(acc[group]).sort(([subGroupA], [subGroupB]) =>
+                  subGroupA.localeCompare(subGroupB)
+                )
+              )
+
+              return acc
+            },
+            {} as { [key: string]: { [key: string]: string[] } }
+          )
 
         const allKeys: string[] = Array.from(new Set(rows.flatMap((row) => Object.keys(row))))
         setSelectedMetrics(new Set(data['default_selected_metrics']))
+        setDefaultSelectedMetrics(data['default_selected_metrics'])
         setTableHeader(allKeys)
         setTableRows(rows)
         setGroups(groupsData)
@@ -143,20 +82,25 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
       })
   }, [file])
 
+  const handleSelectDefaults = () => {
+    setSelectedMetrics(new Set(defaultSelectedMetrics))
+  }
+
   return (
-    <div className="w-11/12 max-w-4xl bg-white rounded shadow p-4 overflow-auto">
+    <div className="rounded shadow overflow-auto">
       <h3 className="font-bold mb-2">{file}</h3>
       {loading && <div>Loading...</div>}
       {error && <div className="text-red-500">{error}</div>}
 
       {!loading && !error && (
         <div className="overflow-x-auto">
-          <Filter
+          <LeaderboardFilter
             groups={groups}
             selectedMetrics={selectedMetrics}
             setSelectedMetrics={setSelectedMetrics}
+            defaultSelectedMetrics={defaultSelectedMetrics}
           />
-          <table>
+          <table className="table">
             <thead>
               <tr>
                 {tableHeader.map((col, idx) => (
@@ -174,7 +118,7 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
 
                       return (
                         <td key={j}>
-                          <div className="p-4">
+                          <div className="">
                             {isNaN(Number(cell)) ? cell : Number(Number(cell).toFixed(3))}
                           </div>
                         </td>

frontend/src/index.css

@@ -1,2 +1,2 @@
 @import "tailwindcss";
-
+@plugin "daisyui";