Spaces:
Running
Running
File size: 4,483 Bytes
9a03fcf d588824 9a03fcf d588824 9a03fcf d588824 9a03fcf d588824 9a03fcf d588824 9a03fcf d588824 9a03fcf d588824 9a03fcf d588824 9a03fcf d588824 9a03fcf d588824 9a03fcf d588824 9a03fcf d588824 9a03fcf d588824 9a03fcf |
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 123 124 125 126 127 128 129 |
import React, { useState, useEffect } from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import Leaderboard from './components/Leaderboard';
import ExampleViewer from './components/ExampleViewer';
import api from './api';
function App() {
const [benchmarks, setBenchmarks] = useState([]);
const [selectedBenchmark, setSelectedBenchmark] = useState('image');
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// Fetch available benchmarks
async function fetchBenchmarks() {
try {
setLoading(true);
const response = await api.getBenchmarks();
if (response.success) {
setBenchmarks(response.benchmarks);
// Set default benchmark if available
if (response.benchmarks.length > 0) {
setSelectedBenchmark(response.benchmarks[0].id);
}
} else {
setError(response.error || 'Failed to fetch benchmarks');
// Set default benchmarks
setBenchmarks([
{ id: 'image', name: 'Image' },
{ id: 'audio', name: 'Audio' }
]);
setSelectedBenchmark('image');
}
} catch (err) {
console.error('Error in benchmark fetch:', err);
setError(err.message || 'An error occurred');
// Set default benchmarks
setBenchmarks([
{ id: 'image', name: 'Image' },
{ id: 'audio', name: 'Audio' }
]);
setSelectedBenchmark('image');
} finally {
setLoading(false);
}
}
fetchBenchmarks();
}, []);
const handleBenchmarkChange = (benchmarkId) => {
setSelectedBenchmark(benchmarkId);
};
return (
<div className="min-h-screen bg-gray-50 flex flex-col">
<header className="bg-primary py-6 text-white shadow-md">
<div className="container mx-auto px-4">
<h1 className="text-3xl font-display font-semibold">OmniSealBench</h1>
<p className="mt-1 font-light">A Comprehensive Benchmark for Watermarking Techniques</p>
</div>
</header>
<nav className="bg-white shadow-sm">
<div className="container mx-auto px-4 py-3 flex flex-wrap justify-between items-center">
<ul className="flex space-x-6">
<li>
<Link to="/" className="text-secondary hover:text-primary font-medium transition-colors">Leaderboard</Link>
</li>
<li>
<Link to="/examples" className="text-secondary hover:text-primary font-medium transition-colors">Examples</Link>
</li>
</ul>
{benchmarks.length > 0 && (
<div className="mt-3 sm:mt-0 flex items-center">
<label className="mr-2 text-sm text-secondary">Benchmark:</label>
<select
value={selectedBenchmark}
onChange={(e) => handleBenchmarkChange(e.target.value)}
className="border rounded px-3 py-1 bg-white focus:outline-none focus:ring-2 focus:ring-primary/50"
>
{benchmarks.map(benchmark => (
<option key={benchmark.id} value={benchmark.id}>
{benchmark.name}
</option>
))}
</select>
</div>
)}
</div>
</nav>
<main className="flex-grow py-8">
<div className="container mx-auto px-4">
{loading ? (
<div className="flex justify-center items-center p-12">
<div className="animate-pulse text-primary font-medium">Loading...</div>
</div>
) : (
<Routes>
<Route
path="/"
element={<Leaderboard benchmark={selectedBenchmark} />}
/>
<Route
path="/examples"
element={<ExampleViewer benchmark={selectedBenchmark} />}
/>
<Route
path="*"
element={<div className="p-8 text-center text-gray-600">Page not found</div>}
/>
</Routes>
)}
</div>
</main>
<footer className="bg-gray-100 py-6 border-t">
<div className="container mx-auto px-4 text-center text-gray-600 text-sm">
<p>© {new Date().getFullYear()} OmniSealBench. All rights reserved.</p>
</div>
</footer>
</div>
);
}
export default App;
|