Add dataset selector

backend/app.py

@@ -1,4 +1,5 @@
 from backend.chart import mk_variations
+from backend.config import get_dataset_config
 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
@@ -35,19 +36,20 @@ def index():
     return send_from_directory(app.static_folder, "index.html")
 
 
-@app.route("/data/<path:filename>")
-def data_files(filename):
+@app.route("/data/<path:dataset_name>")
+def data_files(dataset_name):
     """
     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)
+    file_path = os.path.join(data_dir, dataset_name) + ".csv"
+    logger.info(f"Looking for dataset file: {file_path}")
     if os.path.isfile(file_path):
         df = pd.read_csv(file_path)
-        logger.info(f"Processing file: {filename}")
-        if filename.endswith("benchmark.csv"):
-            return get_leaderboard(df)
-        elif filename.endswith("attacks_variations.csv"):
+        logger.info(f"Processing dataset: {dataset_name}")
+        if dataset_name.endswith("benchmark"):
+            return get_leaderboard(dataset_name, df)
+        elif dataset_name.endswith("attacks_variations"):
             return get_chart(df)
 
     return "File not found", 404
@@ -118,43 +120,14 @@ def proxy(url):
         return {"error": str(e)}, 500
 
 
-def get_leaderboard(df):
+def get_leaderboard(dataset_name, 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",
-    }
+    config = get_dataset_config(dataset_name)
 
     # This part adds on all the columns
-    df = get_old_format_dataframe(df, first_cols, attack_scores)
+    df = get_old_format_dataframe(df, config["first_cols"], config["attack_scores"])
 
-    groups, default_selection = get_leaderboard_filters(df, categories)
+    groups, default_selection = get_leaderboard_filters(df, config["categories"])
 
     # Replace NaN values with None for JSON serialization
     df = df.fillna(value="NaN")

backend/config.py

@@ -0,0 +1,109 @@
+def get_dataset_config(dataset_name):
+    if dataset_name == "voxpopuli_1k_audio_benchmark":
+        return {
+            "first_cols": [
+                "snr",
+                "sisnr",
+                "stoi",
+                "pesq",
+            ],
+            "attack_scores": [
+                "bit_acc",
+                "log10_p_value",
+                "TPR",
+                "FPR",
+            ],
+            "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",
+            },
+        }
+    elif dataset_name == "ravdess_1k_audio_benchmark":
+        return {
+            "first_cols": ["snr", "sisnr", "stoi", "pesq"],
+            "attack_scores": ["bit_acc", "log10_p_value", "TPR", "FPR"],
+            "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",
+            },
+        }
+    elif dataset_name == "val2014_1k_image_benchmark":
+        return {
+            "first_cols": ["psnr", "ssim", "lpips", "decoder_time"],
+            "attack_scores": ["bit_acc", "log10_p_value", "TPR", "FPR"],
+            "categories": {
+                "proportion": "Geometric",
+                "collage": "Inpainting",
+                "center_crop": "Geometric",
+                "rotate": "Geometric",
+                "jpeg": "Compression",
+                "brightness": "Visual",
+                "contrast": "Visual",
+                "saturation": "Visual",
+                "sharpness": "Visual",
+                "resize": "Geometric",
+                "overlay_text": "Inpainting",
+                "hflip": "Geometric",
+                "perspective": "Geometric",
+                "median_filter": "Visual",
+                "hue": "Visual",
+                "gaussian_blur": "Visual",
+                "comb": "Mixed",
+                "avg": "Averages",
+                "none": "Baseline",
+            },
+        }
+    elif dataset_name == "sav_val_full_video_benchmark":
+        return {
+            "first_cols": ["psnr", "ssim", "msssim", "lpips", "vmaf", "decoder_time"],
+            "attack_scores": ["bit_acc", "log10_p_value", "TPR", "FPR"],
+            "categories": {
+                "HorizontalFlip": "Geometric",
+                "Rotate": "Geometric",
+                "Resize": "Geometric",
+                "Crop": "Geometric",
+                "Perspective": "Geometric",
+                "Brightness": "Visual",
+                "Contrast": "Visual",
+                "Saturation": "Visual",
+                "Grayscale": "Visual",
+                "Hue": "Visual",
+                "JPEG": "Compression",
+                "GaussianBlur": "Visual",
+                "MedianFilter": "Visual",
+                "H264": "Compression",
+                "H264rgb": "Compression",
+                "H265": "Compression",
+                "VP9": "Compression",
+                "H264_Crop_Brightness0": "Mixed",
+                "H264_Crop_Brightness1": "Mixed",
+                "H264_Crop_Brightness2": "Mixed",
+                "H264_Crop_Brightness3": "Mixed",
+            },
+        }
+    else:
+        raise ValueError(f"Unknown dataset: {dataset_name}")

frontend/src/App.tsx

@@ -1,14 +1,11 @@
 import { useState } from 'react'
-import API from './API'
-import DataChart from './components/DataChart'
-import LeaderboardTable from './components/LeaderboardTable'
 import Examples from './components/Examples'
+import LeaderBoardPage from './components/LeaderBoardPage'
 
 function App() {
-  const file = 'voxpopuli_1k_audio'
   const [activeTab, setActiveTab] = useState<
-    'dataChart' | 'leaderboard' | 'imageExamples' | 'audioExamples' | 'videoExamples'
-  >('dataChart')
+    'leaderboard' | 'imageExamples' | 'audioExamples' | 'videoExamples'
+  >('leaderboard')
 
   return (
     <div className="min-h-screen w-11/12 mx-auto">
@@ -17,20 +14,8 @@ function App() {
           <h2 className="card-title">🥇 Omni Seal Bench Watermarking Leaderboard</h2>
         </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 tabs-border">
         <input
           type="radio"
           name="my_tabs_6"
@@ -40,7 +25,7 @@ function App() {
           onChange={() => setActiveTab('leaderboard')}
         />
         <div className="tab-content bg-base-100 border-base-300 p-6">
-          <LeaderboardTable file={file} />
+          <LeaderBoardPage />
         </div>
 
         <input

frontend/src/components/DataChart.tsx

@@ -12,7 +12,7 @@ import {
 import API from '../API'
 
 interface DataChartProps {
-  file: string
+  dataset: string
 }
 
 interface Row {
@@ -76,7 +76,7 @@ const AttackSelector = ({
   )
 }
 
-const DataChart = ({ file }: DataChartProps) => {
+const DataChart = ({ dataset }: DataChartProps) => {
   const [chartData, setChartData] = useState<Row[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -86,7 +86,7 @@ const DataChart = ({ file }: DataChartProps) => {
   const [selectedAttack, setSelectedAttack] = useState<string | null>(null)
 
   useEffect(() => {
-    API.fetchStaticFile(`data/${file}_attacks_variations.csv`)
+    API.fetchStaticFile(`data/${dataset}_attacks_variations`)
       .then((response) => {
         const data = JSON.parse(response)
         const rows: Row[] = data['all_attacks_df'].map((row: any) => {

frontend/src/components/DatasetSelector.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+interface DatasetSelectorProps {
+  datasets: string[]
+  selectedDataset: string
+  onDatasetChange: (dataset: string) => void
+}
+
+const DatasetSelector: React.FC<DatasetSelectorProps> = ({
+  datasets,
+  selectedDataset,
+  onDatasetChange,
+}) => {
+  return (
+    <div className="mb-4">
+      <fieldset className="fieldset w-full p-4 rounded border">
+        <legend className="fieldset-legend font-semibold">Dataset</legend>
+        <div className="flex flex-wrap gap-2">
+          {datasets.map((dataset) => (
+            <label key={dataset} className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="dataset"
+                className="radio radio-sm"
+                checked={selectedDataset === dataset}
+                onChange={() => onDatasetChange(dataset)}
+              />
+              <span className="text-sm">{dataset}</span>
+            </label>
+          ))}
+        </div>
+      </fieldset>
+    </div>
+  )
+}
+
+export default DatasetSelector

frontend/src/components/LeaderBoardPage.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import DatasetSelector from './DatasetSelector'
+import LeaderboardTable from './LeaderboardTable'
+import DataChart from './DataChart'
+
+const LeaderBoardPage: React.FC = () => {
+  const datasets = [
+    'voxpopuli_1k_audio',
+    'ravdess_1k_audio',
+    'val2014_1k_image',
+    'sav_val_full_video',
+  ]
+  const [selectedDataset, setSelectedDataset] = useState('voxpopuli_1k_audio')
+
+  return (
+    <div className="space-y-6">
+      <DatasetSelector
+        datasets={datasets}
+        selectedDataset={selectedDataset}
+        onDatasetChange={setSelectedDataset}
+      />
+
+      <div className="space-y-8">
+        <LeaderboardTable dataset={selectedDataset} />
+        <div className="mt-8 pt-4 border-t border-gray-200">
+          <h3 className="text-lg font-semibold mb-4">Performance Chart</h3>
+          <DataChart dataset={selectedDataset} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LeaderBoardPage

frontend/src/components/LeaderboardTable.tsx

@@ -4,7 +4,7 @@ import LeaderboardFilter from './LeaderboardFilter'
 import ModelFilter from './ModelFilter'
 
 interface LeaderboardTableProps {
-  file: string
+  dataset: string
 }
 
 interface Row {
@@ -21,7 +21,7 @@ interface GroupStats {
   stdDev: { [key: string]: number }
 }
 
-const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
+const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ dataset }) => {
   const [tableRows, setTableRows] = useState<Row[]>([])
   const [tableHeader, setTableHeader] = useState<string[]>([])
   const [loading, setLoading] = useState(true)
@@ -39,7 +39,7 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
   const [overallMetrics, setOverallMetrics] = useState<string[]>([])
 
   useEffect(() => {
-    API.fetchStaticFile(`data/${file}_benchmark.csv`)
+    API.fetchStaticFile(`data/${dataset}_benchmark`)
       .then((response) => {
         const data = JSON.parse(response)
         const rows: Row[] = data['rows']
@@ -128,7 +128,7 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
         setError('Failed to fetch JSON: ' + err.message)
         setLoading(false)
       })
-  }, [file])
+  }, [dataset])
 
   const toggleGroup = (group: string) => {
     setOpenGroups((prev) => ({ ...prev, [group]: !prev[group] }))
@@ -228,7 +228,6 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ file }) => {
 
   return (
     <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>}