fix logo display

frontend/src/components/Logo/Logo.js

@@ -44,33 +44,41 @@ const Logo = ({ height = "40px" }) => {
         <Box
           component="img"
           src="/logofinai.png"
+          alt="FinAI Logo"
           sx={{
-            height: 80,
+            height: "80%",
             mx: 2,
+            maxHeight: 80,
           }}
         />
         <Box
           component="img"
           src="/nactemlogo.png"
+          alt="NACTEM Logo"
           sx={{
-            height: 60,
+            height: "60%",
             mx: 2,
+            maxHeight: 60,
           }}
         />
         <Box
           component="img"
           src="/archimedeslogo.png"
+          alt="Archimedes Logo"
           sx={{
-            height: 60,
+            height: "60%",
             mx: 2,
+            maxHeight: 60,
           }}
         />
         <Box
           component="img"
           src="/airclogo.png"
+          alt="AIRC Logo"
           sx={{
-            height: 80,
+            height: "80%",
             mx: 2,
+            maxHeight: 80,
           }}
         />
     </Box>

frontend/src/pages/LeaderboardPage/LeaderboardPage.js

@@ -1,44 +1,57 @@
-import React from "react";
-import { Box, Typography, Container } from "@mui/material";
+import { useEffect } from "react";
 import Leaderboard from "./components/Leaderboard/Leaderboard";
+import { Box } from "@mui/material";
+import PageHeader from "../../components/shared/PageHeader";
+import Logo from "../../components/Logo/Logo";
+import { useLeaderboardData } from "../../pages/LeaderboardPage/components/Leaderboard/hooks/useLeaderboardData";
+import { useLeaderboard } from "../../pages/LeaderboardPage/components/Leaderboard/context/LeaderboardContext";
+
+function LeaderboardPage() {
+  const { data, isLoading, error } = useLeaderboardData();
+  const { actions } = useLeaderboard();
+
+  useEffect(() => {
+    if (data) {
+      actions.setModels(data);
+    }
+    actions.setLoading(isLoading);
+    actions.setError(error);
+  }, [data, isLoading, error, actions]);
 
-const LeaderboardPage = () => {
   return (
-    <Container
-      maxWidth={false}
+    <Box
       sx={{
-        p: { xs: 1, sm: 2, md: 3 },
+        ph: 2,
         display: "flex",
         flexDirection: "column",
-        alignItems: "center",
-        height: "100%",
-        maxWidth: "100vw",
-        overflow: "hidden"
       }}
     >
-      <Box sx={{ mb: 3, width: "100%", textAlign: "center" }}>
-        <Typography
-          variant="h4"
-          component="h1"
-          sx={{
-            fontWeight: 700,
-            mb: 1,
-            fontSize: { xs: "1.5rem", sm: "1.75rem", md: "2rem" },
-          }}
-        >
-          Open Financial LLM Leaderboard - Multi-modal & Multi-lingual
-        </Typography>
-        <Typography
-          variant="body1"
-          color="text.secondary"
-          sx={{ maxWidth: "800px", mx: "auto" }}
-        >
-          Comprehensive evaluation of language models on financial tasks across multiple languages and modalities
-        </Typography>
+      <Box
+        sx={{ 
+          display: "flex", 
+          justifyContent: "center", 
+          pt: 6, 
+          mb: -4, 
+          pb: 0,
+          width: "100%",
+          overflow: "visible" 
+        }}
+      >
+        <Logo height="80px" />
       </Box>
+      <PageHeader
+        title="Open Financial LLM Leaderboard"
+        subtitle={
+          <>
+            Benchmark for large language models in {" "}
+            <span style={{ fontWeight: 600 }}>financial</span> domain {" "}
+            across multiple languages
+          </>
+        }
+      />
       <Leaderboard />
-    </Container>
+    </Box>
   );
-};
+}
 
 export default LeaderboardPage;

frontend/src/pages/LeaderboardPage/components/Leaderboard/hooks/useDataUtils.js

@@ -177,7 +177,7 @@ export const useProcessedData = (data, averageMode, visibleColumns) => {
         isMissing: false,
       });
     });
-    
+
     // 根据平均分排序
     modelList.sort((a, b) => {
       if (a.model.average_score === null && b.model.average_score === null)
@@ -186,7 +186,7 @@ export const useProcessedData = (data, averageMode, visibleColumns) => {
       if (b.model.average_score === null) return -1;
       return b.model.average_score - a.model.average_score;
     });
-    
+
     // 添加排名
     return modelList.map((item, index) => ({
       ...item,
@@ -229,10 +229,10 @@ export const useFilteredData = (
   return useMemo(() => {
     // 由于使用的是硬编码数据，这里直接返回所有数据而不进行过滤
     return processedData.map((item, index) => ({
-      ...item,
+          ...item,
       dynamic_rank: index + 1,
       rank: rankingMode === "static" ? item.static_rank : index + 1,
-      isPinned: pinnedModels.includes(item.id),
+          isPinned: pinnedModels.includes(item.id),
     }));
   }, [
     processedData,

frontend/src/pages/LeaderboardPage/components/Leaderboard/hooks/useLeaderboardData.js

@@ -8,11 +8,60 @@ const CACHE_KEY = "leaderboardData";
 const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
 
 export const useLeaderboardData = () => {
+  const queryClient = useQueryClient();
+  const [searchParams] = useSearchParams();
+  const isInitialLoadRef = useRef(true);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["leaderboard"],
+    queryFn: async () => {
+      try {
+        const cachedData = localStorage.getItem(CACHE_KEY);
+        if (cachedData) {
+          const { data: cached, timestamp } = JSON.parse(cachedData);
+          const age = Date.now() - timestamp;
+          if (age < CACHE_DURATION) {
+            return cached;
+          }
+        }
+
+        const response = await fetch("/api/leaderboard/formatted");
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const newData = await response.json();
+        localStorage.setItem(
+          CACHE_KEY,
+          JSON.stringify({
+            data: newData,
+            timestamp: Date.now(),
+          })
+        );
+
+        return newData;
+      } catch (error) {
+        console.error("Detailed error:", error);
+        throw error;
+      }
+    },
+    staleTime: CACHE_DURATION,
+    cacheTime: CACHE_DURATION * 2,
+    refetchOnWindowFocus: false,
+    enabled: isInitialLoadRef.current || !!searchParams.toString(),
+  });
+
+  useMemo(() => {
+    if (data && isInitialLoadRef.current) {
+      isInitialLoadRef.current = false;
+    }
+  }, [data]);
+
   return {
-    data: [], // 直接返回空数组，我们使用硬编码数据
-    isLoading: false,
-    error: null,
-    refetch: () => {}
+    data,
+    isLoading,
+    error,
+    refetch: () => queryClient.invalidateQueries(["leaderboard"]),
   };
 };
 

frontend/src/pages/LeaderboardPage/components/Leaderboard/utils/columnUtils.js

@@ -689,28 +689,28 @@ export const createColumns = (
         }
         
         return (
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "100%",
-            }}
-          >
-            <Tooltip title={row.original.model.type}>
-              <Typography
-                sx={{
-                  fontSize: "1.2rem",
-                  cursor: "help",
-                  lineHeight: 1,
-                  fontFamily:
-                    '"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif',
-                }}
-              >
-                {getModelTypeIcon(row.original.model.type)}
-              </Typography>
-            </Tooltip>
-          </Box>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+          }}
+        >
+          <Tooltip title={row.original.model.type}>
+            <Typography
+              sx={{
+                fontSize: "1.2rem",
+                cursor: "help",
+                lineHeight: 1,
+                fontFamily:
+                  '"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif',
+              }}
+            >
+              {getModelTypeIcon(row.original.model.type)}
+            </Typography>
+          </Tooltip>
+        </Box>
         );
       },
       size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["model.type_icon"],
@@ -1123,7 +1123,7 @@ export const createColumns = (
           padding: "8px 16px",
           backgroundColor: (theme) => alpha(theme.palette.secondary.main, 0.05),
         }),
-      },
+    },
     }
   ];