File size: 2,808 Bytes
20e666e |
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 |
'use client';
import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';
import { prepareDataForVisualization } from '../lib/utils';
// Dynamically import the dashboard component with SSR disabled
// This is important because recharts needs to be rendered on the client side
const LLMComparisonDashboard = dynamic(
() => import('../components/LLMComparisonDashboard'),
{ ssr: false }
);
export default function Home() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
setLoading(true);
// Fetch the data from the JSON file in the public directory
const response = await fetch('/leaderboard_data.json');
if (!response.ok) {
throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
}
const jsonData = await response.json();
// Process the data for visualization
const processedData = prepareDataForVisualization(jsonData);
setData(processedData);
setLoading(false);
} catch (err) {
console.error('Error loading data:', err);
setError(err.message || 'Failed to load data');
setLoading(false);
}
}
fetchData();
}, []);
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
<p className="text-lg text-gray-600">Loading LLM comparison data...</p>
</div>
</div>
);
}
if (error) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="text-center max-w-md p-6 bg-red-50 rounded-lg border border-red-200">
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-red-500 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h2 className="text-xl font-bold text-red-700 mb-2">Error Loading Data</h2>
<p className="text-gray-600">{error}</p>
<button
onClick={() => window.location.reload()}
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
>
Try Again
</button>
</div>
</div>
);
}
return (
<main className="min-h-screen p-4">
{data && <LLMComparisonDashboard data={data} />}
</main>
);
} |