Spaces:
Running
Running
File size: 4,262 Bytes
b087e88 abd8f45 b087e88 7f6ef8f 661bc63 d411f8a 7f6ef8f abd8f45 661bc63 7f6ef8f f762ee5 abd8f45 b087e88 d411f8a b087e88 f762ee5 abd8f45 7f6ef8f 661bc63 7f6ef8f f762ee5 ed37070 b087e88 a1f1bf8 b087e88 f762ee5 a1f1bf8 abd8f45 661bc63 abd8f45 ed37070 f762ee5 abd8f45 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
import { useState, useEffect } from 'react'
import {
BrowserRouter as Router,
Routes,
Route,
useNavigate,
useLocation,
Navigate,
} from 'react-router-dom'
import LeaderboardPage from './components/LeaderboardPage'
import Examples from './components/Examples'
import Docs from './components/Docs'
import Descriptions from './Descriptions'
const TABS = [
{ label: 'Audio', type: 'audio-leaderboard', path: '/audio-leaderboard' },
{ label: 'Image', type: 'image-leaderboard', path: '/image-leaderboard' },
{ label: 'Video', type: 'video-leaderboard', path: '/video-leaderboard' },
{ label: 'Image Examples', type: 'image-examples', path: '/image-examples' },
{ label: 'Audio Examples', type: 'audio-examples', path: '/audio-examples' },
{ label: 'Video Examples', type: 'video-examples', path: '/video-examples' },
{ label: 'Docs', type: 'docs', path: '/docs' },
]
function TabbedNav({ activeTab }: { activeTab: string }) {
const navigate = useNavigate()
return (
<div className="tabs tabs-border mb-2 ">
{TABS.map((tab) => (
<input
key={tab.type}
type="radio"
name="leaderboard_tabs"
className="tab"
aria-label={tab.label}
checked={activeTab === tab.type}
onChange={() => navigate(tab.path)}
/>
))}
</div>
)
}
function AppContent() {
const location = useLocation()
const [theme, setTheme] = useState<'dark' | 'light'>('dark')
// Load descriptions on app load
useEffect(() => {
Descriptions.getInstance().load()
}, [])
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme)
}, [theme])
// Find the active tab based on the current path
const activeTab = TABS.find((tab) => tab.path === location.pathname)?.type || TABS[0].type
let content = null
if (activeTab === 'audio-leaderboard') {
content = <LeaderboardPage datasetType="audio" />
} else if (activeTab === 'image-leaderboard') {
content = <LeaderboardPage datasetType="image" />
} else if (activeTab === 'video-leaderboard') {
content = <LeaderboardPage datasetType="video" />
} else if (activeTab === 'image-examples') {
content = <Examples fileType="image" />
} else if (activeTab === 'audio-examples') {
content = <Examples fileType="audio" />
} else if (activeTab === 'video-examples') {
content = <Examples fileType="video" />
} else if (activeTab === 'docs') {
content = <Docs />
}
return (
<div className="min-h-screen w-11/12 mx-auto">
<div className="bg-base-100 my-4">
<div className="flex flex-row justify-between items-center">
<h2 className="card-title">🥇 Omni Seal Bench Watermarking Leaderboard</h2>
<div className="flex justify-end items-center gap-2">
<span className="text-sm">{theme === 'dark' ? '🌙 Dark Mode' : '☀️ Light Mode'}</span>
<input
type="checkbox"
className="toggle"
checked={theme === 'dark'}
onChange={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
aria-label="Toggle dark mode"
/>
</div>
</div>
</div>
<TabbedNav activeTab={activeTab} />
<div className="w-full ">
<Routes>
<Route path="/audio-leaderboard" element={<LeaderboardPage datasetType="audio" />} />
<Route path="/image-leaderboard" element={<LeaderboardPage datasetType="image" />} />
<Route path="/video-leaderboard" element={<LeaderboardPage datasetType="video" />} />
<Route path="/image-examples" element={<Examples fileType="image" />} />
<Route path="/audio-examples" element={<Examples fileType="audio" />} />
<Route path="/video-examples" element={<Examples fileType="video" />} />
<Route path="/docs" element={<Docs />} />
{/* Redirect root to audio-leaderboard */}
<Route path="/" element={<Navigate to="/audio-leaderboard" replace />} />
<Route path="*" element={<Navigate to="/audio-leaderboard" replace />} />
</Routes>
</div>
</div>
)
}
export default function App() {
return (
<Router>
<AppContent />
</Router>
)
}
|