Updated audio examples, leaderboard table initial metric

backend/examples.py

@@ -73,7 +73,7 @@ def build_description(
     elif i == 2:
         fake_det = data_attack["fake_det"]
         return {"detected": fake_det}
-    elif i >= 3:  # REVISIT THIS, it used to be == 3
+    elif i == 3:  # REVISIT THIS, it used to be == 3
         det = data_attack["watermark_det"]
         p_value = float(data_attack["p_value"])
         word_acc = data_attack["word_acc"]
@@ -88,6 +88,7 @@ def build_description(
 
 
 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 [
@@ -99,7 +100,7 @@ def build_infos(abs_path: Path, datatype: str, dataset_name: str, db_key: str):
 
     if datatype == "audio":
         quality_metrics = ["snr", "sisnr", "stoi", "pesq"]
-        extensions = ["png", "wav"]
+        extensions = ["wav"]
         datatype_abbr = "audio"
         eval_results_path = abs_path + f"{dataset_name}_1k/examples_eval_results.json"
     elif datatype == "image":
@@ -170,6 +171,7 @@ def build_infos(abs_path: Path, datatype: str, dataset_name: str, db_key: str):
                     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]
 
@@ -178,43 +180,26 @@ def build_infos(abs_path: Path, datatype: str, dataset_name: str, db_key: str):
                     )
                     files = files[2:] + files[:2]
 
-                    # For audio and video, we need to check the image_url and make sure it is an image, else convert it:
-                    if datatype == "audio":
-                        files = [
-                            (
-                                (f, n)
-                                if f.endswith(".png")
-                                else (f.replace(".wav", ".png"), n)
-                            )
-                            for f, n in files
-                        ]
-                    elif datatype == "video":
-                        files = [
-                            (
-                                (f, n)
-                                if f.endswith(".mkv")
-                                else (f.replace(".png", ".mkv"), n)
-                            )
-                            for f, n in files
-                        ]
-
-                    files = [
-                        {
-                            "image_url": f,
-                            "name": n,
+                    new_files = []
+                    for variant_i, (file, name) in enumerate(files):
+                        file_info = {
+                            "name": name,
                             "metadata": build_description(
-                                i, data_none, data_attack, quality_metrics
-                            ),
-                            **(
-                                {"audio_url": f.replace(".png", ".wav")}
-                                if datatype == "audio" and f.endswith(".png")
-                                else {}
+                                variant_i, data_none, data_attack, quality_metrics
                             ),
                         }
-                        for i, (f, n) in enumerate(files)
-                    ]
-
-                    all_files.extend(files)
+                        if datatype == "audio":
+                            file_info["image_url"] = file.replace(".wav", ".png")
+                            file_info["audio_url"] = file
+                        elif datatype == "video":
+                            file_info["image_url"] = file.replace(".mkv", ".png")
+                            file_info["video_url"] = file
+                        else:
+                            file_info["image_url"] = file
+
+                        new_files.append(file_info)
+
+                    all_files.extend(new_files)
 
                 model_infos[attack] = all_files
 

frontend/src/components/AudioGallery.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import AudioPlayer from './AudioPlayer'
+import AudioPlayer, { AudioPlayerHandle } from './AudioPlayer'
 import type { ExamplesData } from './Examples'
 import { groupByNameAndVariant } from './galleryUtils'
-import ExampleMetadata from './ExampleMetadata'
 import ExampleDetailsSection from './ExampleDetailsSection'
 import ExampleVariantSelector from './ExampleVariantSelector'
+import ExampleVariantMetricsTable from './ExampleVariantMetricsTable'
+import ExampleVariantToggle, { handleVariantToggleClick } from './ExampleVariantToggle'
 
 interface GalleryProps {
   selectedModel: string
@@ -19,18 +20,74 @@ interface GalleryProps {
 const AudioGallery: React.FC<GalleryProps> = ({ selectedModel, selectedAttack, examples }) => {
   const exampleItems = examples[selectedModel][selectedAttack]
   const grouped = groupByNameAndVariant(exampleItems)
-  console.log('Audio examples:', exampleItems)
-  console.log('Grouped audio examples:', grouped)
   const audioNames = Object.keys(grouped)
   const [selectedAudio, setSelectedAudio] = React.useState(audioNames[0] || '')
   const variants = grouped[selectedAudio] || {}
   const variantKeys = Object.keys(variants)
   const [selectedVariant, setSelectedVariant] = React.useState(variantKeys[0] || '')
+  const [toggleMode, setToggleMode] = React.useState<'wmd' | 'attacked'>('wmd')
+
+  // Shared playback state
+  const playbackTimeRef = React.useRef(0)
+  const [playingVariant, setPlayingVariant] = React.useState<string | null>(null)
+
+  // Refs for all players
+  const audioRefs = React.useMemo(() => {
+    const refs: Record<string, React.RefObject<AudioPlayerHandle>> = {}
+    variantKeys.forEach((v) => {
+      refs[v] = React.createRef<AudioPlayerHandle>()
+    })
+    return refs
+  }, [variantKeys.join(',')])
+
+  // Add state for rewind seconds
+  const [rewindSeconds, setRewindSeconds] = React.useState(0.5)
+
+  // Play handler: pause all others, sync time
+  const handlePlay = (variant: string) => {
+    console.log(`Playing variant: ${variant}`)
+    setPlayingVariant(variant)
+    variantKeys.forEach((v) => {
+      if (v !== variant && audioRefs[v]?.current) {
+        audioRefs[v]?.current?.pause()
+        // audioRefs[v]?.current?.setTime(playbackTimeRef.current)
+      }
+    })
+  }
+  // Pause handler
+  const handlePause = (variant: string) => {
+    console.log(`Pausing variant: ${variant}`)
+    if (playingVariant === variant) setPlayingVariant(null)
+  }
 
   React.useEffect(() => {
     setSelectedVariant(variantKeys[0] || '')
   }, [selectedAudio])
 
+  // When selectedVariant changes, play that variant and pause others, syncing position
+  React.useEffect(() => {
+    if (!selectedVariant) {
+      return
+    }
+    if (playingVariant == null) {
+      // On page load don't auto play, only when swapping tracks
+      return
+    }
+    // Rewind playbackTimeRef by rewindSeconds, clamp to 0
+    playbackTimeRef.current = Math.max(0, playbackTimeRef.current - rewindSeconds)
+    setPlayingVariant(selectedVariant)
+    variantKeys.forEach((v) => {
+      if (v !== selectedVariant) {
+        audioRefs[v]?.current?.pause()
+      }
+      if (audioRefs[v]?.current) {
+        audioRefs[v]?.current?.setTime(playbackTimeRef.current)
+      }
+    })
+  }, [selectedVariant])
+
+  console.log(audioRefs[selectedVariant]?.current?.getCurrentTime())
+
   if (!audioNames.length) {
     return (
       <div className="w-full mt-12 flex items-center justify-center">
@@ -41,14 +98,12 @@ const AudioGallery: React.FC<GalleryProps> = ({ selectedModel, selectedAttack, e
     )
   }
 
-  console.log(variants[selectedVariant])
-
   return (
     <div className="w-full overflow-auto" style={{ minHeight: '100vh' }}>
       <div className="example-display">
         <div className="mb-4">
           <fieldset className="fieldset">
-            <legend className="fieldset-legend">Audio Example</legend>
+            <legend className="fieldset-legend">Audio</legend>
             <select
               className="select select-bordered"
               value={selectedAudio || ''}
@@ -66,25 +121,85 @@ const AudioGallery: React.FC<GalleryProps> = ({ selectedModel, selectedAttack, e
         </div>
         {selectedAudio && selectedVariant && variants[selectedVariant] && (
           <>
-            <ExampleVariantSelector
-              variantKeys={variantKeys}
-              selectedVariant={selectedVariant}
-              setSelectedVariant={setSelectedVariant}
+            <ExampleVariantMetricsTable
+              variantMetadatas={Object.fromEntries(
+                variantKeys.map((v) => [v, variants[v]?.metadata || {}])
+              )}
             />
-            <ExampleMetadata metadata={variants[selectedVariant].metadata || {}} />
+
             <ExampleDetailsSection>
+              <ExampleVariantSelector
+                variantKeys={variantKeys}
+                selectedVariant={selectedVariant}
+                setSelectedVariant={setSelectedVariant}
+              />
+              <ExampleVariantToggle
+                toggleMode={toggleMode}
+                setToggleMode={setToggleMode}
+                type="button"
+                selectedVariant={selectedVariant}
+                setSelectedVariant={setSelectedVariant}
+                variantKeys={variantKeys}
+              />
+              <fieldset className="fieldset mt-2">
+                <legend className="fieldset-legend">Rewind Seconds</legend>
+                <input
+                  id="rewind-seconds"
+                  type="number"
+                  min={0}
+                  step={0.1}
+                  value={rewindSeconds}
+                  onChange={(e) => setRewindSeconds(Math.max(0, Number(e.target.value)))}
+                  className="input input-bordered w-20"
+                  placeholder="Seconds"
+                />
+              </fieldset>
               <div className="flex flex-col items-center gap-4">
+                {variantKeys.map((variantKey) =>
+                  variants[variantKey].audio_url ? (
+                    <div
+                      key={variantKey}
+                      style={{
+                        width: '100%',
+                        display: selectedVariant === variantKey ? 'block' : 'none',
+                      }}
+                    >
+                      <div className="font-mono text-xs mb-1">{variantKey}</div>
+                      <AudioPlayer
+                        ref={audioRefs[variantKey]}
+                        src={variants[variantKey].audio_url}
+                        playing={playingVariant === variantKey}
+                        onPlay={() => handlePlay(variantKey)}
+                        onPause={() => handlePause(variantKey)}
+                        onAudioProcess={(currentTime) => {
+                          // console.log(`Current time for ${variantKey}: ${currentTime}`)
+                          playbackTimeRef.current = currentTime
+                          variantKeys.forEach((v) => {
+                            if (v !== variantKey && audioRefs[v]?.current) {
+                              audioRefs[v]?.current?.setTime(currentTime)
+                            }
+                          })
+                        }}
+                      />
+                    </div>
+                  ) : null
+                )}
                 {variants[selectedVariant].image_url && (
                   <img
                     src={variants[selectedVariant].image_url}
                     alt={selectedAudio}
                     className="example-image"
                     style={{ display: 'block' }}
+                    onClick={() =>
+                      handleVariantToggleClick(
+                        toggleMode,
+                        selectedVariant,
+                        setSelectedVariant,
+                        variantKeys
+                      )
+                    }
                   />
                 )}
-                {variants[selectedVariant].audio_url && (
-                  <AudioPlayer src={variants[selectedVariant].audio_url} />
-                )}
               </div>
             </ExampleDetailsSection>
           </>

frontend/src/components/AudioPlayer.tsx

@@ -1,78 +1,93 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useImperativeHandle, forwardRef } 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'
 
-const AudioPlayer = ({ src }: { src: string }) => {
+export interface AudioPlayerHandle {
+  getCurrentTime: () => number
+  setTime: (t: number) => void
+  play: () => void
+  pause: () => void
+}
+
+const AudioPlayer = forwardRef<
+  AudioPlayerHandle,
+  {
+    src: string
+    playing: boolean
+    // seekTo: number
+    onPlay: () => void
+    onPause: () => void
+    onAudioProcess?: (currentTime: number) => void
+  }
+>(({ src, playing, onPlay, onPause, onAudioProcess }, ref) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const wavesurferRef = useRef<WaveSurfer | null>(null)
-  const [isPlaying, setIsPlaying] = useState(false)
 
+  useImperativeHandle(ref, () => ({
+    getCurrentTime: () => wavesurferRef.current?.getCurrentTime() || 0,
+    setTime: (t: number) => wavesurferRef.current?.setTime(t),
+    play: () => wavesurferRef.current?.play(),
+    pause: () => wavesurferRef.current?.pause(),
+  }))
+
+  // Sync play/pause and seek
   useEffect(() => {
-    if (!containerRef.current) return
+    if (wavesurferRef.current) {
+      // wavesurferRef.current.setTime(seekTo)
+      if (playing) {
+        wavesurferRef.current.play()
+      } else {
+        wavesurferRef.current.pause()
+      }
+    }
+  }, [
+    playing,
+    // seekTo
+  ])
 
-    // Destroy previous instance if exists
+  useEffect(() => {
+    if (!containerRef.current) return
     if (wavesurferRef.current) {
       wavesurferRef.current.destroy()
       wavesurferRef.current = null
     }
-
-    // Get proxied URL to bypass CORS
     const proxiedUrl = API.getProxiedUrl(src)
-
-    // Create plugin instance inside effect
     const bottomTimeline = TimelinePlugin.create({
       height: 16,
       timeInterval: 0.1,
       primaryLabelInterval: 1,
       style: { fontSize: '10px' },
     })
-
-    // Create an instance of WaveSurfer
     wavesurferRef.current = WaveSurfer.create({
       container: containerRef.current,
       waveColor: 'rgb(200, 0, 200)',
       progressColor: 'rgb(100, 0, 100)',
       url: proxiedUrl,
       minPxPerSec: 100,
-      // barWidth: 10,
-      // barRadius: 10,
-      // barGap: 2,
       mediaControls: true,
       plugins: [bottomTimeline],
     })
-
-    // Play on click
-    wavesurferRef.current.on('interaction', () => {
-      wavesurferRef.current?.play()
-      setIsPlaying(true)
-    })
-    wavesurferRef.current.on('finish', () => {
-      wavesurferRef.current?.setTime(0)
-      setIsPlaying(false)
-    })
-    wavesurferRef.current.on('play', () => setIsPlaying(true))
-    wavesurferRef.current.on('pause', () => setIsPlaying(false))
-
-    // Cleanup on unmount
+    wavesurferRef.current.on('play', onPlay)
+    wavesurferRef.current.on('pause', onPause)
+    if (onAudioProcess) {
+      wavesurferRef.current.on('audioprocess', onAudioProcess)
+    }
     return () => {
+      if (wavesurferRef.current && onAudioProcess) {
+        wavesurferRef.current.un('audioprocess', onAudioProcess)
+      }
       wavesurferRef.current?.destroy()
       wavesurferRef.current = null
     }
   }, [src])
 
-  // Optionally, add a play/pause button
-  // const handlePlayPause = () => {
-  //   wavesurferRef.current?.playPause()
-  // }
-
   return (
     <div className="w-full">
       <div ref={containerRef} />
-      {/* <button onClick={handlePlayPause}>{isPlaying ? 'Pause' : 'Play'}</button> */}
     </div>
   )
-}
+})
 
 export default AudioPlayer

frontend/src/components/ExampleDetailsSection.tsx

@@ -5,7 +5,7 @@ interface ExampleDetailsSectionProps {
 }
 
 const ExampleDetailsSection: React.FC<ExampleDetailsSectionProps> = ({ children }) => (
-  <fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200 mt-6">
+  <fieldset className="fieldset w-full p-4 pt-0 rounded border border-gray-700 bg-base-200 mt-6">
     <legend className="fieldset-legend font-semibold">Example</legend>
     {children}
   </fieldset>

frontend/src/components/ExampleMetadata.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-
-interface ExampleMetadataProps {
-  metadata: Record<string, string | number | boolean>
-}
-
-const ExampleMetadata: React.FC<ExampleMetadataProps> = ({ metadata }) => (
-  <fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200 mt-6">
-    <legend className="fieldset-legend font-semibold">Example Info</legend>
-    <div className="flex flex-wrap gap-x-6 gap-y-2 text-xs">
-      {Object.entries(metadata).map(([k, v]) => (
-        <div key={k} className="flex items-center">
-          <span className="font-mono">{k}</span>: {String(v)}
-        </div>
-      ))}
-    </div>
-  </fieldset>
-)
-
-export default ExampleMetadata

frontend/src/components/ExampleVariantMetricsTable.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+interface ExampleVariantMetricsTableProps {
+  variantMetadatas: Record<string, Record<string, string | number | boolean>>
+}
+
+const ExampleVariantMetricsTable: React.FC<ExampleVariantMetricsTableProps> = ({
+  variantMetadatas,
+}) => {
+  const variantKeys = Object.keys(variantMetadatas)
+  if (variantKeys.length === 0) return null
+  // Collect all unique metadata keys across all variants
+  let allKeys = Array.from(
+    new Set(variantKeys.flatMap((variant) => Object.keys(variantMetadatas[variant] || {})))
+  )
+  // Move 'detected' to the front if present
+  allKeys = allKeys.filter((k) => k !== 'detected')
+  allKeys.unshift('detected')
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="table w-full min-w-max border-gray-700 border text-xs">
+        <thead>
+          <tr>
+            <th className="bg-base-100 border-gray-700 border">Variant</th>
+            {allKeys.map((k) => (
+              <th key={k} className="bg-base-100 border-gray-700 border text-center">
+                {k}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {variantKeys.map((variant) => (
+            <tr key={variant} className="hover:bg-base-100">
+              <td className="font-mono border-gray-700 border">{variant}</td>
+              {allKeys.map((k) => (
+                <td key={k} className="border-gray-700 border text-center">
+                  {variantMetadatas[variant] && k in variantMetadatas[variant]
+                    ? String(variantMetadatas[variant][k])
+                    : ''}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default ExampleVariantMetricsTable

frontend/src/components/ExampleVariantSelector.tsx

@@ -1,27 +1,32 @@
-import React from 'react';
+import React from 'react'
 
 interface ExampleVariantSelectorProps {
-  variantKeys: string[];
-  selectedVariant: string;
-  setSelectedVariant: (v: string) => void;
+  variantKeys: string[]
+  selectedVariant: string
+  setSelectedVariant: (v: string) => void
 }
 
-const ExampleVariantSelector: React.FC<ExampleVariantSelectorProps> = ({ variantKeys, selectedVariant, setSelectedVariant }) => {
+const ExampleVariantSelector: React.FC<ExampleVariantSelectorProps> = ({
+  variantKeys,
+  selectedVariant,
+  setSelectedVariant,
+}) => {
   // Keyboard shortcut for variant switching (keys 1-N)
   React.useEffect(() => {
     const handler = (e: KeyboardEvent) => {
-      if (document.activeElement && (document.activeElement as HTMLElement).tagName === 'INPUT') return;
-      const idx = parseInt(e.key, 10);
+      if (document.activeElement && (document.activeElement as HTMLElement).tagName === 'INPUT')
+        return
+      const idx = parseInt(e.key, 10)
       if (!isNaN(idx) && idx > 0 && idx <= variantKeys.length) {
-        setSelectedVariant(variantKeys[idx - 1]);
+        setSelectedVariant(variantKeys[idx - 1])
       }
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [variantKeys, setSelectedVariant]);
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [variantKeys, setSelectedVariant])
 
   return (
-    <fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200 mb-4">
+    <fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200 ">
       <legend className="fieldset-legend font-semibold">Variants</legend>
       <div className="mb-2 flex gap-4 flex-wrap">
         {variantKeys.map((variant, idx) => (
@@ -40,7 +45,7 @@ const ExampleVariantSelector: React.FC<ExampleVariantSelectorProps> = ({ variant
         ))}
       </div>
     </fieldset>
-  );
-};
+  )
+}
 
-export default ExampleVariantSelector;
+export default ExampleVariantSelector

frontend/src/components/ExampleVariantToggle.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+
+export function handleVariantToggleClick(
+  toggleMode: 'wmd' | 'attacked',
+  selectedVariant: string,
+  setSelectedVariant: (v: string) => void,
+  variantKeys: string[]
+) {
+  if (toggleMode === 'wmd') {
+    if (selectedVariant === 'original' && variantKeys.includes('wmd')) {
+      setSelectedVariant('wmd')
+    } else {
+      setSelectedVariant('original')
+    }
+  } else if (toggleMode === 'attacked') {
+    if (selectedVariant === 'original' && variantKeys.includes('attacked')) {
+      setSelectedVariant('attacked')
+    } else {
+      setSelectedVariant('original')
+    }
+  } else {
+    setSelectedVariant('original')
+  }
+}
+
+interface ExampleVariantToggleProps {
+  toggleMode: 'wmd' | 'attacked'
+  setToggleMode: (mode: 'wmd' | 'attacked') => void
+  type?: 'radio' | 'button'
+  selectedVariant: string
+  setSelectedVariant: (v: string) => void
+  variantKeys: string[]
+}
+
+const ExampleVariantToggle: React.FC<ExampleVariantToggleProps> = ({
+  toggleMode,
+  setToggleMode,
+  type = 'radio',
+  selectedVariant,
+  setSelectedVariant,
+  variantKeys,
+}) => {
+  if (type === 'button') {
+    return (
+      <div className="my-2 flex gap-6">
+        <button
+          className={`btn ${toggleMode === 'wmd' ? 'btn-primary' : 'btn-outline'}`}
+          type="button"
+          onClick={() => {
+            setToggleMode('wmd')
+            handleVariantToggleClick(toggleMode, selectedVariant, setSelectedVariant, variantKeys)
+          }}
+        >
+          Original ⇄ Watermarked
+        </button>
+        <button
+          className={`btn ${toggleMode === 'attacked' ? 'btn-primary' : 'btn-outline'}`}
+          type="button"
+          onClick={() => {
+            setToggleMode('attacked')
+            handleVariantToggleClick(toggleMode, selectedVariant, setSelectedVariant, variantKeys)
+          }}
+        >
+          Original ⇄ Attacked
+        </button>
+      </div>
+    )
+  }
+  // Default radio mode
+  return (
+    <fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200 mb-4">
+      <legend className="fieldset-legend font-semibold">Click Toggle</legend>
+      <div className="mb-2 flex gap-6">
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input
+            type="radio"
+            name="variant-toggle"
+            value="wmd"
+            checked={toggleMode === 'wmd'}
+            onChange={() => setToggleMode('wmd')}
+          />
+          <span>Original ⇄ Watermarked</span>
+        </label>
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input
+            type="radio"
+            name="variant-toggle"
+            value="attacked"
+            checked={toggleMode === 'attacked'}
+            onChange={() => setToggleMode('attacked')}
+          />
+          <span>Original ⇄ Attacked</span>
+        </label>
+      </div>
+    </fieldset>
+  )
+}
+
+export default ExampleVariantToggle

frontend/src/components/ImageGallery.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type { ExamplesData } from './Examples'
 import { groupByNameAndVariant } from './galleryUtils'
-import ExampleMetadata from './ExampleMetadata'
+import ExampleVariantMetricsTable from './ExampleVariantMetricsTable'
 import ExampleDetailsSection from './ExampleDetailsSection'
 import ExampleVariantSelector from './ExampleVariantSelector'
+import ExampleVariantToggle, { handleVariantToggleClick } from './ExampleVariantToggle'
 
 interface GalleryProps {
   selectedModel: string
@@ -26,6 +27,7 @@ const ImageGallery: React.FC<GalleryProps> = ({ selectedModel, selectedAttack, e
   const variants = grouped[selectedImage] || {}
   const variantKeys = Object.keys(variants)
   const [selectedVariant, setSelectedVariant] = React.useState(variantKeys[0] || '')
+  const [toggleMode, setToggleMode] = React.useState<'wmd' | 'attacked'>('wmd')
 
   const [zoom, setZoom] = React.useState<{ x: number; y: number } | null>(null)
   const [imgDims, setImgDims] = React.useState<{ width: number; height: number }>({
@@ -126,14 +128,27 @@ const ImageGallery: React.FC<GalleryProps> = ({ selectedModel, selectedAttack, e
         </div>
         {selectedImage && selectedVariant && variants[selectedVariant] && (
           <>
-            <ExampleVariantSelector
-              variantKeys={variantKeys}
-              selectedVariant={selectedVariant}
-              setSelectedVariant={setSelectedVariant}
+            <ExampleVariantMetricsTable
+              variantMetadatas={Object.fromEntries(
+                variantKeys.map((v) => [v, variants[v]?.metadata || {}])
+              )}
             />
-            <ExampleMetadata metadata={variants[selectedVariant].metadata || {}} />
 
             <ExampleDetailsSection>
+              <ExampleVariantSelector
+                variantKeys={variantKeys}
+                selectedVariant={selectedVariant}
+                setSelectedVariant={setSelectedVariant}
+              />
+              <ExampleVariantToggle
+                toggleMode={toggleMode}
+                setToggleMode={setToggleMode}
+                type="radio"
+                selectedVariant={selectedVariant}
+                setSelectedVariant={setSelectedVariant}
+                variantKeys={variantKeys}
+              />
+
               {zoomSlider}
               <div
                 style={{
@@ -160,6 +175,14 @@ const ImageGallery: React.FC<GalleryProps> = ({ selectedModel, selectedAttack, e
                         setZoom({ x, y })
                       }}
                       onMouseLeave={() => setZoom(null)}
+                      onClick={() =>
+                        handleVariantToggleClick(
+                          toggleMode,
+                          selectedVariant,
+                          setSelectedVariant,
+                          variantKeys
+                        )
+                      }
                     />
                   ) : (
                     <div className="text-red-500 font-bold">

frontend/src/components/LeaderboardTable.tsx

@@ -24,6 +24,9 @@ interface SortState {
   }
 }
 
+const OVERALL_ROW = 'Overall'
+const DEFAULT_SELECTED_METRICS = new Set(['log10_p_value'])
+
 const OverallMetricFilter: React.FC<{
   overallMetrics: string[]
   selectedOverallMetrics: Set<string>
@@ -77,12 +80,14 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
   const [overallMetrics, setOverallMetrics] = useState<string[]>([])
   const [selectedOverallMetrics, setSelectedOverallMetrics] = useState<Set<string>>(new Set())
   const [sortState, setSortState] = useState<SortState>({})
-  const [columnSortState, setColumnSortState] = useState<SortState>({})
+
   // Add state for row-based column sorting
   const [selectedRowForSort, setSelectedRowForSort] = useState<{
     [rowKey: string]: { direction: 'asc' | 'desc' }
   }>({})
 
+  const models = tableHeader.filter((model) => selectedModels.has(model))
+
   useEffect(() => {
     if (!benchmarkData) {
       return
@@ -100,11 +105,12 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
         }
       })
       setOverallMetrics(Array.from(uniqueMetrics).sort())
-      setSelectedOverallMetrics(new Set(Array.from(uniqueMetrics)))
-      const groupsData = Object.entries(groups)
+      setSelectedOverallMetrics(new Set(DEFAULT_SELECTED_METRICS))
+      // setSelectedOverallMetrics(new Set(Array.from(uniqueMetrics)))
+      const groupsData = Object.entries(allGroups)
         .sort(([groupA], [groupB]) => {
-          if (groupA === 'Overall') return -1
-          if (groupB === 'Overall') return 1
+          if (groupA === OVERALL_ROW) return -1
+          if (groupB === OVERALL_ROW) return 1
           return groupA.localeCompare(groupB)
         })
         .reduce(
@@ -138,34 +144,23 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
           initialOpenSubGroups[group][subGroup] = false
         })
       })
-      const allMetrics = Object.values(groups).flat()
+      const allMetrics = Object.values(allGroups).flat()
       setSelectedMetrics(new Set(allMetrics))
       setTableHeader(headers)
       setTableRows(rows)
       setGroupRows(groupsData)
       setOpenGroupRows(initialOpenGroups)
       setOpenSubGroupRows(initialOpenSubGroups)
+      setSelectedRowForSort({
+        [getColumnSortRowKey(OVERALL_ROW, null, null)]: { direction: 'asc' },
+      })
       setError(null)
     } catch (err: any) {
       setError('Failed to parse benchmark data, please try again: ' + err.message)
     }
   }, [benchmarkData])
 
-  const toggleGroup = (group: string) => {
-    setOpenGroupRows((prev) => ({ ...prev, [group]: !prev[group] }))
-  }
-
-  const toggleSubGroup = (group: string, subGroup: string) => {
-    setOpenSubGroupRows((prev) => ({
-      ...prev,
-      [group]: {
-        ...(prev[group] || {}),
-        [subGroup]: !prev[group]?.[subGroup],
-      },
-    }))
-  }
-
-  const handleSort = (overallMetric: string, model: string) => {
+  const handleRowSort = (overallMetric: string, model: string) => {
     setSortState((prev) => {
       const prevDir = prev[overallMetric]?.[model]?.direction
       let newSortState: SortState = {}
@@ -182,7 +177,11 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
   }
 
   // Helper to generate a stable composite key for row-based column sorting
-  function getRowSortKey(group: string | null, subGroup: string | null, metric: string | null) {
+  function getColumnSortRowKey(
+    group: string | null,
+    subGroup: string | null,
+    metric: string | null
+  ) {
     return `${group ?? ''}||${subGroup ?? ''}||${metric ?? ''}`
   }
 
@@ -192,7 +191,7 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
     subGroup: string | null,
     metric: string | null
   ) => {
-    const rowKey = getRowSortKey(group, subGroup, metric)
+    const rowKey = getColumnSortRowKey(group, subGroup, metric)
     setSelectedRowForSort((prev) => {
       const prevDir = prev[rowKey]?.direction
       const newSortState: { [rowKey: string]: { direction: 'asc' | 'desc' } } = {}
@@ -208,15 +207,14 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
   }
 
   // Helper to get current row sort config for a row
-  function getRowColumnSort(group: string | null, subGroup: string | null, metric: string | null) {
-    return selectedRowForSort[getRowSortKey(group, subGroup, metric)] || null
+  function getColumnSort(group: string | null, subGroup: string | null, metric: string | null) {
+    return selectedRowForSort[getColumnSortRowKey(group, subGroup, metric)] || null
   }
 
   const getSortConfig = () => {
     // Find the first sorted column (overallMetric, model)
     for (const overallMetric of overallMetrics) {
       if (!selectedOverallMetrics.has(overallMetric)) continue
-      const models = tableHeader.filter((model) => selectedModels.has(model))
       for (const model of models) {
         if (sortState[overallMetric]?.[model]) {
           return { overallMetric, model, direction: sortState[overallMetric][model].direction }
@@ -226,75 +224,6 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
     return null
   }
 
-  // Move getRowSortConfig above sortModelColumns so it is defined before use
-  const getRowSortConfig = () => {
-    for (const overallMetric of overallMetrics) {
-      if (!selectedOverallMetrics.has(overallMetric)) continue
-      const models = tableHeader.filter((model) => selectedModels.has(model))
-      for (const model of models) {
-        if (sortState[overallMetric]?.[model]) {
-          return { overallMetric, model, direction: sortState[overallMetric][model].direction }
-        }
-      }
-    }
-    return null
-  }
-
-  const getColumnSortConfig = () => {
-    for (const overallMetric of overallMetrics) {
-      if (!selectedOverallMetrics.has(overallMetric)) continue
-      if (columnSortState[overallMetric]?.['__col__']) {
-        return { overallMetric, direction: columnSortState[overallMetric]['__col__'].direction }
-      }
-    }
-    return null
-  }
-
-  const sortModelColumns = (models: string[], overallMetric: string): string[] => {
-    // Column sort takes precedence; if no column sort, return models in default order
-    const columnSortConfig = getColumnSortConfig()
-    if (columnSortConfig && columnSortConfig.overallMetric === overallMetric) {
-      // Sort by average value for each model in this overallMetric
-      return [...models].sort((a, b) => {
-        const valsA = tableRows
-          .filter((row) => findAllMetricsForName(overallMetric).includes(row.metric as string))
-          .map((row) => Number(row[a]))
-          .filter((v) => !isNaN(v))
-        const valsB = tableRows
-          .filter((row) => findAllMetricsForName(overallMetric).includes(row.metric as string))
-          .map((row) => Number(row[b]))
-          .filter((v) => !isNaN(v))
-        const avgA = valsA.length ? valsA.reduce((s, v) => s + v, 0) / valsA.length : NaN
-        const avgB = valsB.length ? valsB.reduce((s, v) => s + v, 0) / valsB.length : NaN
-        if (isNaN(avgA) && isNaN(avgB)) return 0
-        if (isNaN(avgA)) return 1
-        if (isNaN(avgB)) return -1
-        return columnSortConfig.direction === 'asc' ? avgA - avgB : avgB - avgA
-      })
-    }
-    // No column sort: return models in default order
-    return models
-  }
-
-  const sortRowsBySubcolumn = (
-    rows: string[],
-    overallMetric: string,
-    model: string,
-    direction: 'asc' | 'desc'
-  ) => {
-    return [...rows].sort((a, b) => {
-      const rowA = tableRows.find((r) => r.metric === a)
-      const rowB = tableRows.find((r) => r.metric === b)
-      if (!rowA || !rowB) return 0
-      const valA = Number(rowA[model])
-      const valB = Number(rowB[model])
-      if (isNaN(valA) && isNaN(valB)) return 0
-      if (isNaN(valA)) return 1
-      if (isNaN(valB)) return -1
-      return direction === 'asc' ? valA - valB : valB - valA
-    })
-  }
-
   // Find all metrics matching a particular extracted metric name (like "log10_p_value")
   const findAllMetricsForName = (metricName: string): string[] => {
     return tableRows
@@ -379,7 +308,8 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
 
   // Before rendering group rows:
   const groupSortConfig = getSortConfig()
-  let groupEntries = Object.entries(groupRows).filter(([group]) => group !== 'Overall')
+  let groupEntries = Object.entries(groupRows)
+  //.filter(([group]) => group !== OVERALL_ROW) // Keep overall row for now
   if (groupSortConfig) {
     groupEntries = groupEntries.sort(([groupA, subGroupsA], [groupB, subGroupsB]) => {
       // For each group, get all metrics in the group for the selected overallMetric
@@ -421,7 +351,6 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
       if (activeRowKey && selectedRowForSort[activeRowKey]) {
         const direction = selectedRowForSort[activeRowKey].direction
         const [group, subGroup, rowMetric] = activeRowKey.split('||')
-        const models = tableHeader.filter((model) => selectedModels.has(model))
         if (!rowMetric) {
           // Group or subgroup row: sort by average for this group/subgroup and metric
           // Find all metrics in this group/subgroup for this overall metric
@@ -461,18 +390,16 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
         }
       }
       modelOrderByOverallMetric[metric] =
-        sortedModels ||
-        sortModelColumns(
-          tableHeader.filter((model) => selectedModels.has(model)),
-          metric
-        )
+        sortedModels || tableHeader.filter((model) => selectedModels.has(model))
     })
 
+  const visibleMetrics = overallMetrics.filter((metric) => selectedOverallMetrics.has(metric))
+
   return (
     <div className="rounded">
       {error && <div className="text-red-500">{error}</div>}
       {!error && (
-        <div className="flex flex-col gap-8">
+        <div className="flex flex-col gap-4">
           <div className="flex flex-col gap-4">
             <OverallMetricFilter
               overallMetrics={overallMetrics}
@@ -486,7 +413,9 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
             /> */}
           </div>
 
-          {selectedModels.size === 0 || selectedMetrics.size === 0 ? (
+          {selectedModels.size === 0 ||
+          selectedMetrics.size === 0 ||
+          visibleMetrics.length === 0 ? (
             <div className="text-center p-4 text-lg">
               Please select at least one model and one metric to display the data
             </div>
@@ -501,16 +430,14 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
               />
 
               {/* Main metrics table */}
-              <div className="relative flex justify-end mb-2">
+              <div className="relative flex justify-end mb-6">
                 <button
                   className="absolute top-0 right-0 btn btn-ghost btn-circle"
                   title="Export CSV"
                   onClick={() => {
                     // Export the main metrics table as displayed
                     // Build header row
-                    const visibleMetrics = overallMetrics.filter((metric) =>
-                      selectedOverallMetrics.has(metric)
-                    )
+
                     const header = [
                       'Attack Categories',
                       ...visibleMetrics.flatMap((metric) => modelOrderByOverallMetric[metric]),
@@ -641,7 +568,7 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
                                 <th
                                   key={`${metric}-${model}`}
                                   className="sticky top-12 bg-base-100 z-10 text-center text-xs border border-gray-700 cursor-pointer select-none"
-                                  onClick={() => handleSort(metric, model)}
+                                  onClick={() => handleRowSort(metric, model)}
                                 >
                                   {model}
                                   <span className="ml-1">
@@ -657,8 +584,8 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
                   <tbody>
                     {/* First render each group row */}
                     {groupEntries.map(([group, subGroups]) => {
-                      // Skip the "Overall" group completely
-                      if (group === 'Overall') return null
+                      // Skip the "Overall" group completely, keep for now
+                      // if (group === OVERALL_ROW) return null
 
                       // Get all metrics for this group row
                       const allGroupMetrics = Object.values(subGroups).flat()
@@ -702,7 +629,9 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
                           {/* Group row with average stats for the entire group */}
                           <tr
                             className="bg-base-200 cursor-pointer hover:bg-base-300"
-                            onClick={() => toggleGroup(group)}
+                            onClick={() =>
+                              setOpenGroupRows((prev) => ({ ...prev, [group]: !prev[group] }))
+                            }
                           >
                             <td className="sticky left-0 bg-base-200 z-10 font-medium cursor-pointer select-none flex items-center">
                               <span>{openGroupRows[group] ? '▼ ' : '▶ '}</span>
@@ -715,25 +644,25 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
                                   handleColumnSort(group, null, null)
                                 }}
                                 title={
-                                  getRowColumnSort(group, null, null)
-                                    ? getRowColumnSort(group, null, null)?.direction === 'asc'
+                                  getColumnSort(group, null, null)
+                                    ? getColumnSort(group, null, null)?.direction === 'asc'
                                       ? 'Sort descending'
                                       : 'Clear sort'
                                     : 'Sort by this row'
                                 }
                               >
-                                {getRowColumnSort(group, null, null)
-                                  ? getRowColumnSort(group, null, null)?.direction === 'asc'
-                                    ? '↑'
-                                    : '↓'
-                                  : '⇅'}
+                                {getColumnSort(group, null, null)
+                                  ? getColumnSort(group, null, null)?.direction === 'asc'
+                                    ? '→'
+                                    : '←'
+                                  : '⇆'}
                               </span>
                             </td>
                             {/* For each metric column */}
                             {overallMetrics
                               .filter((metric) => selectedOverallMetrics.has(metric))
                               .map((metric) => {
-                                const rowKey = getRowSortKey(group, null, null)
+                                const rowKey = getColumnSortRowKey(group, null, null)
                                 return (
                                   <React.Fragment key={`${group}-${metric}`}>
                                     {modelOrderByOverallMetric[metric].map((col: string) => {
@@ -791,27 +720,26 @@ const LeaderboardTable: React.FC<LeaderboardTableProps> = ({ benchmarkData, sele
                                           handleColumnSort(group, subGroup, null)
                                         }}
                                         title={
-                                          getRowColumnSort(group, subGroup, null)
-                                            ? getRowColumnSort(group, subGroup, null)?.direction ===
+                                          getColumnSort(group, subGroup, null)
+                                            ? getColumnSort(group, subGroup, null)?.direction ===
                                               'asc'
                                               ? 'Sort descending'
                                               : 'Clear sort'
                                             : 'Sort by this row'
                                         }
                                       >
-                                        {getRowColumnSort(group, subGroup, null)
-                                          ? getRowColumnSort(group, subGroup, null)?.direction ===
+                                        {getColumnSort(group, subGroup, null)
+                                          ? getColumnSort(group, subGroup, null)?.direction ===
                                             'asc'
-                                            ? '↑'
-                                            : '↓'
-                                          : '⇅'}
+                                            ? '→'
+                                            : '←'
+                                          : '⇆'}
                                       </span>
                                     </td>
                                     {/* For each metric column */}
                                     {overallMetrics
                                       .filter((metric) => selectedOverallMetrics.has(metric))
                                       .map((metric) => {
-                                        const rowKey = getRowSortKey(group, subGroup, null)
                                         return (
                                           <React.Fragment key={`${group}-${subGroup}-${metric}`}>
                                             {modelOrderByOverallMetric[metric].map(

frontend/src/components/QualityMetricsTable.tsx

@@ -27,7 +27,6 @@ const QualityMetricsTable: React.FC<QualityMetricsTableProps> = ({
 
   // Handle row sort (sort columns by this metric)
   const handleRowSort = (metric: string) => {
-    setColumnSort(null) // Only one sort active at a time
     setRowSort((prev) => {
       if (!prev || prev.metric !== metric) return { metric, direction: 'asc' }
       if (prev.direction === 'asc') return { metric, direction: 'desc' }
@@ -37,7 +36,6 @@ const QualityMetricsTable: React.FC<QualityMetricsTableProps> = ({
 
   // Handle column sort (sort rows by this model)
   const handleColumnSort = (model: string) => {
-    setRowSort(null) // Only one sort active at a time
     setColumnSort((prev) => {
       if (!prev || prev.model !== model) return { model, direction: 'asc' }
       if (prev.direction === 'asc') return { model, direction: 'desc' }
@@ -81,7 +79,7 @@ const QualityMetricsTable: React.FC<QualityMetricsTableProps> = ({
   // CSV export logic
   function exportToCSV() {
     // Build header row
-    const header = ['Metric', ...sortedModels]
+    const header = ['Quality Metric', ...sortedModels]
     // Build data rows
     const rows = sortedMetrics
       .map((metric) => {
@@ -116,7 +114,7 @@ const QualityMetricsTable: React.FC<QualityMetricsTableProps> = ({
   if (qualityMetrics.length === 0) return null
   return (
     <div className="overflow-x-auto max-h-[80vh] overflow-y-auto">
-      <div className="flex justify-end mb-2">
+      <div className="flex justify-end">
         <button className="btn btn-ghost btn-circle" title="Export CSV" onClick={exportToCSV}>
           <ArrowDownTrayIcon className="h-6 w-6" />
         </button>
@@ -124,7 +122,9 @@ const QualityMetricsTable: React.FC<QualityMetricsTableProps> = ({
       <table className="table w-full min-w-max border-gray-700 border">
         <thead>
           <tr>
-            <th className="sticky left-0 top-0 bg-base-100 z-20 border-gray-700 border">Metric</th>
+            <th className="sticky left-0 top-0 bg-base-100 z-20 border-gray-700 border">
+              Quality Metric
+            </th>
             {sortedModels.map((model) => {
               const isSorted = columnSort && columnSort.model === model
               const direction = isSorted ? columnSort.direction : undefined
@@ -157,7 +157,7 @@ const QualityMetricsTable: React.FC<QualityMetricsTableProps> = ({
             return (
               <tr key={`quality-${metric}`} className="hover:bg-base-100">
                 <td
-                  className="sticky left-0 bg-base-100 z-10 border-gray-700 border cursor-pointer select-none"
+                  className="sticky left-0 bg-base-100 z-10 border-gray-700 border cursor-pointer select-none pr-4"
                   onClick={() => handleRowSort(metric)}
                   title={
                     isSorted
@@ -167,8 +167,10 @@ const QualityMetricsTable: React.FC<QualityMetricsTableProps> = ({
                       : 'Sort by this row (sorts columns)'
                   }
                 >
-                  {metric}
-                  <span className="ml-1">{isSorted ? (direction === 'asc' ? '↑' : '↓') : '⇅'}</span>
+                  <span className="inline-block">{metric}</span>
+                  <span className="float-right">
+                    {isSorted ? (direction === 'asc' ? '←' : '→') : '⇆'}
+                  </span>
                 </td>
                 {sortedModels.map((col) => {
                   const cell = row[col]

frontend/src/components/VideoGallery.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { ExamplesData } from './Examples'
 import { groupByNameAndVariant } from './galleryUtils'
-import ExampleMetadata from './ExampleMetadata'
+import ExampleVariantMetricsTable from './ExampleVariantMetricsTable'
 import ExampleDetailsSection from './ExampleDetailsSection'
 import ExampleVariantSelector from './ExampleVariantSelector'
 
@@ -61,13 +61,17 @@ const VideoGallery: React.FC<GalleryProps> = ({ selectedModel, selectedAttack, e
         </div>
         {selectedVideo && selectedVariant && variants[selectedVariant] && (
           <>
-            <ExampleVariantSelector
-              variantKeys={variantKeys}
-              selectedVariant={selectedVariant}
-              setSelectedVariant={setSelectedVariant}
+            <ExampleVariantMetricsTable
+              variantMetadatas={Object.fromEntries(
+                variantKeys.map((v) => [v, variants[v]?.metadata || {}])
+              )}
             />
-            <ExampleMetadata metadata={variants[selectedVariant].metadata || {}} />
             <ExampleDetailsSection>
+              <ExampleVariantSelector
+                variantKeys={variantKeys}
+                selectedVariant={selectedVariant}
+                setSelectedVariant={setSelectedVariant}
+              />
               <div className="flex flex-col items-center gap-4">
                 {variants[selectedVariant].video_url && (
                   <video