omnisealbench / frontend /src /components /ExampleVariantToggle.tsx
Mark Duppenthaler
Updated audio examples, leaderboard table initial metric
08dfd47
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