cleanup

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:7870 app:app"]
+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"]

backend/app.py

@@ -1,3 +1,5 @@
+from backend.chart import mk_variations
+from backend.examples import image_examples_tab
 from flask import Flask, Response, send_from_directory
 from flask_cors import CORS
 import os
@@ -5,9 +7,12 @@ import logging
 import pandas as pd
 import json
 from io import StringIO
-from tools import get_old_format_dataframe  # Import your function
+from tools import (
+    get_leaderboard_filters,
+    get_old_format_dataframe,
+)  # Import your function
 import typing as tp
-import collections
+
 
 logger = logging.getLogger(__name__)
 if not logger.hasHandlers():
@@ -24,6 +29,7 @@ CORS(app)
 
 @app.route("/")
 def index():
+    logger.warning("Serving index.html")
     return send_from_directory(app.static_folder, "index.html")
 
 
@@ -35,76 +41,13 @@ def data_files(filename):
     data_dir = os.path.join(os.path.dirname(__file__), "data")
     file_path = os.path.join(data_dir, filename)
     if os.path.isfile(file_path):
-        # Determine file type and handle accordingly
         df = pd.read_csv(file_path)
-        # Modify the dataframe - you'll need to define first_cols and attack_scores
-        first_cols = [
-            "snr",
-            "sisnr",
-            "stoi",
-            "pesq",
-        ]  # Define appropriate values based on your needs
-        attack_scores = [
-            "bit_acc",
-            "log10_p_value",
-            "TPR",
-            "FPR",
-        ]  # Define appropriate values based on your needs
-        categories = {
-            "speed": "Time",
-            "updownresample": "Time",
-            "echo": "Time",
-            "random_noise": "Amplitude",
-            "lowpass_filter": "Amplitude",
-            "highpass_filter": "Amplitude",
-            "bandpass_filter": "Amplitude",
-            "smooth": "Amplitude",
-            "boost_audio": "Amplitude",
-            "duck_audio": "Amplitude",
-            "shush": "Amplitude",
-            "pink_noise": "Amplitude",
-            "aac_compression": "Compression",
-            "mp3_compression": "Compression",
-        }
-
-        # This part adds on all the columns
-        df = get_old_format_dataframe(df, first_cols, attack_scores)
-
-        # Create groups based on categories
-        groups = collections.OrderedDict({"Overall": set()})
-        for k in categories.values():
-            groups[k] = set()
-
-        default_selection = set()
-        for k, v in categories.items():
-            if v not in default_selection:
-                for k in list(df.columns):
-                    if k.startswith(v):
-                        groups["Overall"].add(k)
-                        default_selection.add(k)
-
-        for col in list(df.columns):
-            for k in categories.keys():
-                if col.startswith(k):
-                    cat = categories[k]
-                    groups[cat].add(col)
-                    break
-
-        # Replace NaN values with None for JSON serialization
-        df = df.fillna(value="NaN")
-
-        # Transpose the DataFrame so each column becomes a row and column is the model
-        df = df.set_index("model").T.reset_index()
-        df = df.rename(columns={"index": "metric"})
-
-        # Convert DataFrame to JSON
-        result = {
-            "groups": {group: list(metrics) for group, metrics in groups.items()},
-            "selected": list(default_selection),
-            "rows": df.to_dict(orient="records"),
-        }
-
-        return Response(json.dumps(result), mimetype="application/json")
+        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
@@ -115,5 +58,90 @@ def data_files(filename):
     return "File not found", 404
 
 
+@app.route("/examples/<path:filename>")
+def example_files(filename):
+    """
+    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")
+
+    return "File not found", 404
+
+
+def get_leaderboard(df):
+    # Determine file type and handle accordingly
+
+    # Modify the dataframe - you'll need to define first_cols and attack_scores
+    first_cols = [
+        "snr",
+        "sisnr",
+        "stoi",
+        "pesq",
+    ]  # Define appropriate values based on your needs
+    attack_scores = [
+        "bit_acc",
+        "log10_p_value",
+        "TPR",
+        "FPR",
+    ]  # Define appropriate values based on your needs
+    categories = {
+        "speed": "Time",
+        "updownresample": "Time",
+        "echo": "Time",
+        "random_noise": "Amplitude",
+        "lowpass_filter": "Amplitude",
+        "highpass_filter": "Amplitude",
+        "bandpass_filter": "Amplitude",
+        "smooth": "Amplitude",
+        "boost_audio": "Amplitude",
+        "duck_audio": "Amplitude",
+        "shush": "Amplitude",
+        "pink_noise": "Amplitude",
+        "aac_compression": "Compression",
+        "mp3_compression": "Compression",
+    }
+
+    # This part adds on all the columns
+    df = get_old_format_dataframe(df, first_cols, attack_scores)
+
+    groups, default_selection = get_leaderboard_filters(df, categories)
+
+    # Replace NaN values with None for JSON serialization
+    df = df.fillna(value="NaN")
+
+    # Transpose the DataFrame so each column becomes a row and column is the model
+    df = df.set_index("model").T.reset_index()
+    df = df.rename(columns={"index": "metric"})
+
+    # Convert DataFrame to JSON
+    result = {
+        "groups": {group: list(metrics) for group, metrics in groups.items()},
+        "default_selected_metrics": list(default_selection),
+        "rows": df.to_dict(orient="records"),
+    }
+
+    return Response(json.dumps(result), mimetype="application/json")
+
+
+def get_chart(df):
+    # This function should return the chart data based on the DataFrame
+    # For now, we will just return a placeholder response
+    chart_data = mk_variations(
+        df,
+        # attacks_plot_metrics,
+        # audio_attacks_with_variations,
+    )
+    print(chart_data)
+
+    return Response(json.dumps(chart_data), mimetype="application/json")
+
+
 if __name__ == "__main__":
-    app.run(host="0.0.0.0", port=7870, debug=True, use_reloader=True)
+    app.run(host="0.0.0.0", port=7860, debug=True, use_reloader=True)

backend/chart.py

@@ -0,0 +1,99 @@
+import pandas as pd
+
+from pathlib import Path
+
+audio_attacks_with_variations = [
+    "random_noise",
+    "lowpass_filter",
+    "highpass_filter",
+    "boost_audio",
+    "duck_audio",
+    "shush",
+]
+
+attacks_plot_metrics = ["bit_acc", "log10_p_value", "TPR", "FPR", "watermark_det_score"]
+
+image_attacks_with_variations = [
+    "center_crop",
+    "jpeg",
+    "brightness",
+    "contrast",
+    "saturation",
+    "sharpness",
+    "resize",
+    "perspective",
+    "median_filter",
+    "hue",
+    "gaussian_blur",
+]
+
+
+video_attacks_with_variations = [
+    "Rotate",
+    "Resize",
+    "Crop",
+    "Brightness",
+    "Contrast",
+    "Saturation",
+    "H264",
+    "H264rgb",
+    "H265",
+]
+
+
+def plot_data(metric, selected_attack, all_attacks_df):
+    attack_df = all_attacks_df[all_attacks_df.attack == selected_attack]
+
+    # if metric == "None":
+    #     return gr.LinePlot(x_bin=None)
+
+    # return gr.LinePlot(
+    #     attack_df,
+    #     x="strength",
+    #     y=metric,
+    #     color="model",
+    # )
+
+
+def mk_variations(
+    all_attacks_df,
+    metrics: list[str] = attacks_plot_metrics,
+    attacks_with_variations: list[str] = audio_attacks_with_variations,
+):
+    # all_attacks_df = pd.read_csv(csv_file)
+    # print(all_attacks_df)
+    # print(csv_file)
+
+    # with gr.Row():
+    #     group_by = gr.Radio(metrics, value=metrics[0], label="Choose metric")
+    #     attacks_dropdown = gr.Dropdown(
+    #         attacks_with_variations,
+    #         label=attacks_with_variations[0],
+    #         info="Select attack",
+    #     )
+
+    # attacks_by_strength = plot_data(
+    #     group_by.value, attacks_dropdown.value, all_attacks_df
+    # )
+
+    # all_graphs = [
+    #     attacks_by_strength,
+    # ]
+
+    # group_by.change(
+    #     lambda group: plot_data(group, attacks_dropdown.value, all_attacks_df),
+    #     group_by,
+    #     all_graphs,
+    # )
+
+    # attacks_dropdown.change(
+    #     lambda attack: plot_data(group_by.value, attack, all_attacks_df),
+    #     attacks_dropdown,
+    #     all_graphs,
+    # )
+
+    return {
+        "metrics": metrics,
+        "attacks_with_variations": attacks_with_variations,
+        "all_attacks_df": all_attacks_df.to_dict(orient="records"),
+    }

backend/environment.yml

@@ -8,6 +8,7 @@ dependencies:
   - flask=3.0.3
   - werkzeug=3.0.3
   - pandas
+  - requests
   - pip
   - pip:
       - watchdog

backend/examples.py

@@ -0,0 +1,383 @@
+import ast
+import re
+from pathlib import Path
+
+import requests
+
+
+def group_files_by_index(file_paths, data_type="audio"):
+    # Regular expression pattern to extract the key from each image path
+    if data_type == "audio":
+        pattern = r"audio_(\d+).(png|wav)"
+    elif data_type == "video":
+        pattern = r"video_(\d+).(png|mkv)"
+    else:
+        pattern = r"img_(\d+).png"
+    # Dictionary to store the grouped files
+    grouped_files = {}
+    # Iterate over each file path
+    for file_path in file_paths:
+        # Extract the key using the regular expression pattern
+        match = re.search(pattern, file_path)
+        if match:
+            key = int(match.group(1))
+
+            # Add the file path to the corresponding group in the dictionary
+            if key not in grouped_files:
+                grouped_files[key] = []
+            grouped_files[key].append(file_path)
+    # Sort the dictionary by keys
+    sorted_grouped_files = dict(sorted(grouped_files.items()))
+    return sorted_grouped_files
+
+
+def build_description(
+    i, data_none, data_attack, quality_metrics=["psnr", "ssim", "lpips"]
+):
+    # TODO: handle this at data generation
+    if isinstance(data_none["fake_det"], str):
+        data_none["fake_det"] = ast.literal_eval(data_none["fake_det"])
+    if isinstance(data_none["watermark_det"], str):
+        data_none["watermark_det"] = ast.literal_eval(data_none["watermark_det"])
+
+    if isinstance(data_attack["fake_det"], str):
+        data_attack["fake_det"] = ast.literal_eval(data_attack["fake_det"])
+    if isinstance(data_attack["watermark_det"], str):
+        data_attack["watermark_det"] = ast.literal_eval(data_attack["watermark_det"])
+
+    if i == 0:
+        fake_det = data_none["fake_det"]
+
+        return f"detected: {fake_det}"
+    elif i == 1:
+        # Fixed metrics
+        det = data_none["watermark_det"]
+        p_value = float(data_none["p_value"])
+        bit_acc = data_none["bit_acc"]
+
+        # Dynamic metrics
+        metrics_output = []
+        for metric in quality_metrics:
+            value = float(data_none[metric])
+            metrics_output.append(f"{metric}: {value:.2f}")
+
+        # Fixed metrics output
+        fixed_metrics_output = (
+            f" detected: {det} p_value: {p_value:.2f} bit_acc: {bit_acc:.2f}"
+        )
+
+        # Combine all outputs
+        return " ".join(metrics_output) + f"{fixed_metrics_output}"
+    elif i == 2:
+        fake_det = data_attack["fake_det"]
+
+        return f"det: {fake_det}"
+    elif i == 3:
+        det = data_attack["watermark_det"]
+
+        p_value = float(data_attack["p_value"])
+        word_acc = data_attack["word_acc"]
+        bit_acc = data_attack["bit_acc"]
+
+        return f"word_acc: {word_acc:.2f} detected: {det} p_value: {p_value:.2f} bit_acc: {bit_acc:.2f}"
+
+
+def build_infos(abs_path: Path, datatype: str, dataset_name: str, db_key: str):
+    def generate_file_patterns(prefixes, extensions):
+        indices = [0, 1, 3, 4, 5]
+        return [
+            f"{prefix}_{index:05d}.{ext}"
+            for prefix in prefixes
+            for index in indices
+            for ext in extensions
+        ]
+
+    if datatype == "audio":
+        quality_metrics = ["snr", "sisnr", "stoi", "pesq"]
+        extensions = ["png", "wav"]
+        datatype_abbr = "audio"
+        eval_results_path = abs_path + f"{dataset_name}_1k/examples_eval_results.json"
+    elif datatype == "image":
+        quality_metrics = ["psnr", "ssim", "lpips"]
+        extensions = ["png"]
+        datatype_abbr = "img"
+        eval_results_path = abs_path + f"{dataset_name}_1k/examples_eval_results.json"
+    elif datatype == "video":
+        quality_metrics = ["psnr", "ssim", "lpips", "msssim", "vmaf"]
+        extensions = ["mkv"]
+        datatype_abbr = "video"
+        eval_results_path = abs_path + f"{dataset_name}/examples_eval_results.json"
+
+    response = requests.get(eval_results_path)
+    if response.status_code == 200:
+        results_data = response.json()
+    else:
+        return {}
+
+    dataset = results_data["eval"][db_key]
+
+    prefixes = [
+        f"attacked_{datatype_abbr}",
+        f"attacked_wmd_{datatype_abbr}",
+        f"{datatype_abbr}",
+        f"wmd_{datatype_abbr}",
+    ]
+
+    file_patterns = generate_file_patterns(prefixes, extensions)
+
+    infos = {}
+    for model_name in dataset.keys():
+        model_infos = {}
+
+        default_attack_name = "none"
+        if datatype == "audio":
+            default_attack_name = "identity"
+        elif datatype == "video":
+            default_attack_name = "Identity"
+
+        identity_attack_rows = dataset[model_name][default_attack_name]["default"]
+
+        for attack_name, attack_variants_data in dataset[model_name].items():
+            for attack_variant, attack_rows in attack_variants_data.items():
+                if attack_variant == "default":
+                    attack = attack_name
+                else:
+                    attack = f"{attack_name}_{attack_variant}"
+
+                if len(attack_rows) == 0:
+                    model_infos[attack] = []
+                    continue
+
+                if datatype == "video":
+                    file_paths = [
+                        f"{abs_path}{dataset_name}/examples/{datatype}/{model_name}/{attack}/{pattern}"
+                        for pattern in file_patterns
+                    ]
+                else:
+                    file_paths = [
+                        f"{abs_path}{dataset_name}_1k/examples/{datatype}/{model_name}/{attack}/{pattern}"
+                        for pattern in file_patterns
+                    ]
+
+                all_files = []
+
+                for i, files in group_files_by_index(
+                    file_paths,
+                    data_type=datatype,
+                ).items():
+                    data_none = [e for e in identity_attack_rows if e["idx"] == i][0]
+                    data_attack = [e for e in attack_rows if e["idx"] == i][0]
+
+                    files = sorted(
+                        [(f, Path(f).stem) for f in files], key=lambda x: x[1]
+                    )
+                    files = files[2:] + files[:2]
+
+                    files = [
+                        {
+                            "url": f,
+                            "description": f"{n}\n{build_description(i, data_none, data_attack, quality_metrics)}",
+                        }
+                        for i, (f, n) in enumerate(files)
+                    ]
+
+                    all_files.extend(files)
+
+                model_infos[attack] = all_files
+
+        infos[model_name] = model_infos
+
+    return infos
+
+
+def image_examples_tab(abs_path: Path):
+    dataset_name = "coco_val2014"
+    datatype = "image"
+    db_key = "coco_val2014"
+
+    image_infos = build_infos(
+        abs_path,
+        datatype=datatype,
+        dataset_name=dataset_name,
+        db_key=db_key,
+    )
+
+    print(image_infos)
+
+    # First combo box (category selection)
+    # 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["wam"].keys()),
+    #     label="Select an Attack",
+    #     value=None,
+    # )
+
+    # # Gallery component to display images
+    # gallery = gr.Gallery(
+    #     label="Image 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()))
+
+    # # Function to load images based on selections from both combo boxes
+    # 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
+    # )
+    return image_infos
+
+
+def video_examples_tab(abs_path: Path):
+    dataset_name = "sav_val_full"
+    datatype = "video"
+    db_key = "sa-v_sav_val_videos"
+
+    image_infos = build_infos(
+        abs_path,
+        datatype=datatype,
+        dataset_name=dataset_name,
+        db_key=db_key,
+    )
+
+    # First combo box (category selection)
+    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,
+    )
+
+    # Gallery component to display images
+    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()))
+
+    # Function to load images based on selections from both combo boxes
+    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
+    )
+
+
+def audio_examples_tab(abs_path: Path):
+    dataset_name = "voxpopuli"
+    datatype = "audio"
+    db_key = "voxpopuli"
+
+    audio_infos = build_infos(
+        abs_path,
+        datatype=datatype,
+        dataset_name=dataset_name,
+        db_key=db_key,
+    )
+
+    # First combo box (category selection)
+    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(
+        choices=list(audio_infos["audioseal"].keys()),
+        label="Select an Attack",
+        value=None,
+    )
+
+    # Gallery component to display images
+    gallery = gr.Gallery(
+        label="Image Gallery", columns=4, rows=1, object_fit="scale-down"
+    )
+
+    audio_player = gr.Audio(visible=False)
+    audio_map_state = gr.State({})
+
+    # Update options for the second combo box when the first one changes
+    def update_subcategories(selected_category):
+        values = list(audio_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_audios(category, subcategory):
+        files = audio_infos.get(category, {}).get(subcategory, [])
+        images = [f for f in files if f[0].endswith(".png")]
+        audios = {f[0]: f[0].replace(".png", ".wav") for f in images}
+        return images, audios
+
+    def play_audio(selected_image, audios):
+        image_path = selected_image["image"]["path"]
+        audio_file = audios.get(image_path)
+        return gr.update(value=audio_file, visible=audio_file is not None)
+
+    def hide_audio_player():
+        # Hide the audio player when the preview is closed
+        return gr.update(visible=False)
+
+    def get_selected_image(select_data: gr.SelectData, audios):
+        if select_data is None:
+            return gr.update(visible=False)
+        selected_image = select_data.value
+        return play_audio(selected_image, audios)
+
+    # 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_audios,
+        inputs=[model_choice, attack_choice],
+        outputs=[gallery, audio_map_state],
+    )
+    gallery.select(
+        fn=get_selected_image,
+        inputs=[audio_map_state],
+        outputs=audio_player,
+    )
+    gallery.preview_close(
+        fn=hide_audio_player,
+        outputs=audio_player,
+    )
+    return gr.Column([model_choice, attack_choice, gallery, audio_player])

backend/tools.py

@@ -1,6 +1,31 @@
+import collections
+
 import pandas as pd
 
 
+def get_leaderboard_filters(df, categories) -> dict[str, list[str]]:
+    # Create groups based on categories
+    groups = collections.OrderedDict({"Overall": set()})
+    for k in categories.values():
+        groups[k] = set()
+
+    default_selection = set()
+    for k, v in categories.items():
+        if v not in default_selection:
+            for k in list(df.columns):
+                if k.startswith(v):
+                    groups["Overall"].add(k)
+                    default_selection.add(k)
+
+    for col in list(df.columns):
+        for k in categories.keys():
+            if col.startswith(k):
+                cat = categories[k]
+                groups[cat].add(col)
+                break
+    return groups, default_selection
+
+
 def add_avg_as_columns(
     benchmark_df: pd.DataFrame, attack_scores: list[str]
 ) -> pd.DataFrame:

frontend/src/API.ts

@@ -14,6 +14,16 @@ class API {
     if (!response.ok) throw new Error(`Failed to fetch ${path}`)
     return response.text()
   }
+
+  // Rename the method to fetchExamplesByType
+  static fetchExamplesByType(type: 'image' | 'audio' | 'video'): Promise<any> {
+    return fetch(`${VITE_API_SERVER_URL}/examples/${type}`).then((response) => {
+      if (!response.ok) {
+        throw new Error(`Failed to fetch examples of type ${type}`)
+      }
+      return response.json()
+    })
+  }
 }
 
 export default API

frontend/src/App.tsx

@@ -1,151 +1,12 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import API from './API'
 import DataChart from './components/DataChart'
-
-// Define types for groups and metrics
-interface Groups {
-  [group: string]: { [subgroup: string]: string[] }
-}
-
-interface Row {
-  metric: string
-  [key: string]: string | number
-}
-
-// 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>
-  )
-}
+import LeaderboardTable from './components/LeaderboardTable'
+import Examples from './components/Examples'
 
 function App() {
-  const [count, setCount] = useState(0)
-  const [tableRows, setTableRows] = useState<Row[]>([])
-  const [tableHeader, setTableHeader] = useState<string[]>([])
-  const [chartData, setChartData] = useState<Row[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [groups, setGroups] = useState<Groups>({})
-  const [selectedMetrics, setSelectedMetrics] = useState<Set<string>>(new Set())
-
-  const file = 'voxpopuli_1k_audio_benchmark'
-
-  useEffect(() => {
-    API.fetchStaticFile(`data/${file}.csv`)
-      .then((response) => {
-        const data = JSON.parse(response)
-        const rows: Row[] = data['rows']
-        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 allKeys: string[] = Array.from(new Set(rows.flatMap((row) => Object.keys(row))))
-        setSelectedMetrics(new Set(data['selected']))
-        setTableHeader(allKeys)
-        setTableRows(rows)
-        setChartData(rows)
-        setGroups(groupsData)
-        setLoading(false)
-      })
-      .catch((err) => {
-        setError('Failed to fetch JSON: ' + err.message)
-        setLoading(false)
-      })
-  }, [])
+  const file = 'voxpopuli_1k_audio'
+  const [activeTab, setActiveTab] = useState<'dataChart' | 'leaderboard' | 'examples'>('dataChart')
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
@@ -153,60 +14,33 @@ function App() {
         <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 className="card-actions justify-center mt-4">
-            <button className="btn btn-primary" onClick={() => setCount((count) => count + 1)}>
-              Count is {count}
-            </button>
-          </div>
         </div>
       </div>
-      <DataChart data={chartData} loading={loading} error={error} headers={tableHeader} />
-
-      <Filter
-        groups={groups}
-        selectedMetrics={selectedMetrics}
-        setSelectedMetrics={(metrics) => {
-          setSelectedMetrics(metrics)
-        }}
-      />
 
-      <div className="w-11/12 max-w-4xl bg-white rounded shadow p-4 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">
-            <table>
-              <thead>
-                <tr>
-                  {tableHeader.map((col, idx) => (
-                    <th key={idx}>{col}</th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {tableRows
-                  .filter((row) => selectedMetrics.has(row['metric']))
-                  .map((row, i) => (
-                    <tr key={i}>
-                      {Object.keys(row).map((column, j) => {
-                        const cell = row[column]
-
-                        return (
-                          <td key={j}>
-                            <div className="p-4">
-                              {isNaN(Number(cell)) ? cell : Number(Number(cell).toFixed(3))}
-                            </div>
-                          </td>
-                        )
-                      })}
-                    </tr>
-                  ))}
-              </tbody>
-            </table>
-          </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>
+
+      {activeTab === 'dataChart' && <DataChart file={file} />}
+      {activeTab === 'leaderboard' && <LeaderboardTable file={file} />}
+      {activeTab === 'examples' && <Examples />}
     </div>
   )
 }

frontend/src/components/DataChart.tsx

@@ -1,47 +1,231 @@
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { useEffect, useState } from 'react'
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts'
+import API from '../API'
 
 interface DataChartProps {
-  data: any[];
-  loading: boolean;
-  error: string | null;
-  headers: string[];
+  file: string
 }
 
-const DataChart = ({ data, loading, error, headers }: DataChartProps) => {
+interface Row {
+  metric: string
+  [key: string]: string | number
+}
+
+// MetricSelector Component
+const MetricSelector = ({
+  metrics,
+  selectedMetric,
+  onMetricChange,
+}: {
+  metrics: Set<string>
+  selectedMetric: string | null
+  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>
+      <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"
+      >
+        <option value="">-- Select a Metric --</option>
+        {[...metrics].map((metric) => (
+          <option key={metric} value={metric}>
+            {metric}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+// AttackSelector Component
+const AttackSelector = ({
+  attacks,
+  selectedAttack,
+  onAttackChange,
+}: {
+  attacks: Set<string>
+  selectedAttack: string | null
+  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>
+      <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"
+      >
+        <option value="">-- Select an Attack --</option>
+        {[...attacks].map((attack) => (
+          <option key={attack} value={attack}>
+            {attack}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+const DataChart = ({ file }: DataChartProps) => {
+  const [chartData, setChartData] = useState<Row[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [metrics, setMetrics] = useState<Set<string>>(new Set())
+  const [attacks, setAttacks] = useState<Set<string>>(new Set())
+  const [selectedMetric, setSelectedMetric] = useState<string | null>(null)
+  const [selectedAttack, setSelectedAttack] = useState<string | null>(null)
+
+  useEffect(() => {
+    API.fetchStaticFile(`data/${file}_attacks_variations.csv`)
+      .then((response) => {
+        const data = JSON.parse(response)
+        const rows: Row[] = data['all_attacks_df'].map((row: any) => {
+          const newRow: Row = { ...row }
+          // Convert strength value to number if it exists and is a string
+          if (typeof newRow.strength === 'string') {
+            newRow.strength = parseFloat(newRow.strength)
+          }
+          return newRow
+        })
+
+        setSelectedMetric(data['metrics'][0])
+        setMetrics(new Set(data['metrics']))
+        setSelectedAttack(data['attacks_with_variations'][0])
+        setAttacks(new Set(data['attacks_with_variations']))
+        setChartData(rows)
+        setLoading(false)
+      })
+      .catch((err) => {
+        setError('Failed to fetch JSON: ' + err.message)
+        setLoading(false)
+      })
+  }, [])
+
+  const handleMetricChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedMetric(event.target.value)
+  }
+
+  const handleAttackChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedAttack(event.target.value)
+  }
+
+  // Sort the chart data by the 'strength' field before rendering
+  const sortedChartData = chartData
+    .filter((row) => !selectedAttack || row.attack === selectedAttack)
+    .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">
       <h3 className="font-bold mb-2">Data Visualization</h3>
       {loading && <div>Loading...</div>}
       {error && <div className="text-red-500">{error}</div>}
-      {!loading && !error && data.length > 0 && (
-        <div className="h-64 mb-4">
-          <ResponsiveContainer width="100%" height="100%">
-            <LineChart
-              data={data}
-              margin={{
-                top: 5,
-                right: 30,
-                left: 20,
-                bottom: 5,
-              }}
-            >
-              <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey={headers[0]} />
-              <YAxis />
-              <Tooltip />
-              <Legend />
-              {headers[1] && (
-                <Line type="monotone" dataKey={headers[1]} stroke="#8884d8" dot={false} />
-              )}
-              {headers[2] && (
-                <Line type="monotone" dataKey={headers[2]} stroke="#82ca9d" dot={false} />
-              )}
-            </LineChart>
-          </ResponsiveContainer>
-        </div>
+      {!loading && !error && (
+        <>
+          <MetricSelector
+            metrics={metrics}
+            selectedMetric={selectedMetric}
+            onMetricChange={handleMetricChange}
+          />
+
+          <AttackSelector
+            attacks={attacks}
+            selectedAttack={selectedAttack}
+            onAttackChange={handleAttackChange}
+          />
+
+          {chartData.length > 0 && (
+            <div className="h-64 mb-4">
+              <ResponsiveContainer width="100%" height="100%">
+                <LineChart
+                  data={sortedChartData}
+                  margin={{
+                    top: 5,
+                    right: 30,
+                    left: 20,
+                    bottom: 5,
+                  }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis
+                    dataKey="strength"
+                    domain={[
+                      Math.min(...sortedChartData.map((item) => Number(item.strength))),
+                      Math.max(...sortedChartData.map((item) => Number(item.strength))),
+                    ]}
+                    type="number"
+                    tickFormatter={(value) => value.toString()}
+                    label={{ value: 'Strength', position: 'insideBottomRight', offset: -5 }}
+                  />
+                  <YAxis
+                    label={{
+                      value: selectedMetric || '',
+                      angle: -90,
+                      position: 'insideLeft',
+                      style: { textAnchor: 'middle' },
+                    }}
+                  />
+                  <Tooltip />
+                  <Legend />
+
+                  {(() => {
+                    // Ensure selectedMetric is not null before rendering the Line components
+                    if (!selectedMetric) return null // Do not render lines if no metric is selected
+
+                    // Get unique models from the filtered and sorted data
+                    const models = new Set(sortedChartData.map((row) => row.model))
+
+                    // Generate different colors for each model
+                    const colors = [
+                      '#8884d8',
+                      '#82ca9d',
+                      '#ffc658',
+                      '#ff8042',
+                      '#0088fe',
+                      '#00C49F',
+                    ]
+
+                    // 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}
+                          type="monotone"
+                          dataKey={selectedMetric as string} // Ensure selectedMetric is a string
+                          data={sortedChartData.filter((row) => row.model === model)}
+                          name={model as string}
+                          stroke={colors[index % colors.length]}
+                          dot={false}
+                        />
+                      )
+                    })
+                  })()}
+                </LineChart>
+              </ResponsiveContainer>
+            </div>
+          )}
+        </>
       )}
     </div>
-  );
-};
+  )
+}
 
-export default DataChart;
+export default DataChart

frontend/src/components/Examples.tsx

@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from 'react'
+import API from '../API'
+
+const Examples = () => {
+  const [fileType, setFileType] = useState<'image' | 'audio' | 'video'>('image')
+  const [examples, setExamples] = useState<{
+    [model: string]: { [attack: string]: { url: string; description: string }[] }
+  }>({})
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [selectedModel, setSelectedModel] = useState<string | null>(null)
+  const [selectedAttack, setSelectedAttack] = useState<string | null>(null)
+
+  useEffect(() => {
+    setLoading(true)
+    setError(null)
+    API.fetchExamplesByType(fileType)
+      .then((data) => {
+        // data is a dictionary from {[model]: {[attack]: (url, description)}}
+        setExamples(data)
+        setLoading(false)
+      })
+      .catch((err) => {
+        setError(err.message)
+        setLoading(false)
+      })
+  }, [fileType])
+  if (selectedModel && selectedAttack) {
+    console.log(examples[selectedModel][selectedAttack])
+  }
+
+  // Define the Gallery component within this file
+  const Gallery = ({
+    selectedModel,
+    selectedAttack,
+    examples,
+    fileType,
+  }: {
+    selectedModel: string
+    selectedAttack: string
+    examples: {
+      [model: string]: { [attack: string]: { url: string; description: string }[] }
+    }
+    fileType: 'image' | 'audio' | 'video'
+  }) => {
+    const exampleItems = examples[selectedModel][selectedAttack]
+
+    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" />
+            )}
+            {fileType === 'audio' && <audio controls src={item.url} className="example-audio" />}
+            {fileType === 'video' && <video controls src={item.url} className="example-video" />}
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  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:
+          <select
+            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>
+
+      {selectedModel && (
+        <div className="attack-selector">
+          <label>
+            Select Attack:
+            <select
+              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>
+      )}
+
+      {loading && <p>Loading files...</p>}
+      {error && <p className="error">Error: {error}</p>}
+
+      {selectedModel && selectedAttack && (
+        <Gallery
+          selectedModel={selectedModel}
+          selectedAttack={selectedAttack}
+          examples={examples}
+          fileType={fileType}
+        />
+      )}
+    </div>
+  )
+}
+
+export default Examples

frontend/src/components/LeaderboardTable.tsx

@@ -0,0 +1,193 @@
+import React, { useEffect, useState } from 'react'
+import API from '../API'
+
+interface LeaderboardTableProps {
+  file: string
+}
+
+interface Row {
+  metric: string
+  [key: string]: string | number
+}
+
+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[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [groups, setGroups] = useState<Groups>({})
+
+  const [selectedMetrics, setSelectedMetrics] = useState<Set<string>>(new Set())
+
+  useEffect(() => {
+    API.fetchStaticFile(`data/${file}_benchmark.csv`)
+      .then((response) => {
+        const data = JSON.parse(response)
+        const rows: Row[] = data['rows']
+        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 allKeys: string[] = Array.from(new Set(rows.flatMap((row) => Object.keys(row))))
+        setSelectedMetrics(new Set(data['default_selected_metrics']))
+        setTableHeader(allKeys)
+        setTableRows(rows)
+        setGroups(groupsData)
+        setLoading(false)
+      })
+      .catch((err) => {
+        setError('Failed to fetch JSON: ' + err.message)
+        setLoading(false)
+      })
+  }, [file])
+
+  return (
+    <div className="w-11/12 max-w-4xl bg-white rounded shadow p-4 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
+            groups={groups}
+            selectedMetrics={selectedMetrics}
+            setSelectedMetrics={setSelectedMetrics}
+          />
+          <table>
+            <thead>
+              <tr>
+                {tableHeader.map((col, idx) => (
+                  <th key={idx}>{col}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {tableRows
+                .filter((row) => selectedMetrics.has(row['metric'] as string))
+                .map((row, i) => (
+                  <tr key={i}>
+                    {Object.keys(row).map((column, j) => {
+                      const cell = row[column]
+
+                      return (
+                        <td key={j}>
+                          <div className="p-4">
+                            {isNaN(Number(cell)) ? cell : Number(Number(cell).toFixed(3))}
+                          </div>
+                        </td>
+                      )
+                    })}
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default LeaderboardTable