update front

client/src/components/LeaderboardCard.jsx

@@ -2,13 +2,28 @@ import React from "react";
 import { Card, CardContent, Typography, Box, Stack } from "@mui/material";
 import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
 import { alpha } from "@mui/material/styles";
+import { useLeaderboard } from "../context/LeaderboardContext";
 
 const LeaderboardCard = ({ leaderboard }) => {
-  const { card_data, likes, enriched, consolidated_notes, organization } =
-    leaderboard;
+  const {
+    card_data = {},
+    likes = 0,
+    enriched,
+    consolidated_notes,
+    organization,
+  } = leaderboard;
+
+  const { getHighlightedText, searchQuery } = useLeaderboard();
+  const {
+    text: highlightedText,
+    shouldHighlight,
+    highlightStart,
+    highlightEnd,
+  } = getHighlightedText(card_data.title || leaderboard.id, searchQuery);
 
   // Fonction pour capitaliser la première lettre
   const capitalizeFirst = (str) => {
+    if (!str) return "";
     return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
   };
 
@@ -21,7 +36,7 @@ const LeaderboardCard = ({ leaderboard }) => {
   };
 
   // Séparer les emojis s'il y en a plusieurs
-  const emojis = card_data.emoji.trim().split(/\s+/);
+  const emojis = card_data.emoji?.trim().split(/\s+/) || ["🎯"];
 
   return (
     <Box
@@ -44,7 +59,9 @@ const LeaderboardCard = ({ leaderboard }) => {
           sx={{
             position: "relative",
             minHeight: 180,
-            background: `linear-gradient(135deg, ${card_data.colorFrom} 0%, ${card_data.colorTo} 100%)`,
+            background: `linear-gradient(135deg, ${
+              card_data.colorFrom || "#6366f1"
+            } 0%, ${card_data.colorTo || "#a855f7"} 100%)`,
             color: "white",
             overflow: "visible",
             "&::after": {
@@ -161,24 +178,38 @@ const LeaderboardCard = ({ leaderboard }) => {
             }}
           >
             <Typography
-              variant="h6"
-              component="h2"
-              align="center"
+              variant="subtitle1"
               sx={{
-                fontSize: "1.25rem",
-                fontWeight: 800,
-                maxWidth: "90%",
-                margin: "0 auto",
-                zIndex: 5,
-                textShadow: "rgba(0, 0, 0, 0.25) 0px 1px 2px",
+                fontWeight: 900,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
               }}
             >
-              {card_data.title}
+              {shouldHighlight ? (
+                <>
+                  {highlightedText.slice(0, highlightStart)}
+                  <Box
+                    component="span"
+                    sx={{
+                      bgcolor: "primary.main",
+                      color: "primary.contrastText",
+                      px: 0.5,
+                      borderRadius: 0.5,
+                    }}
+                  >
+                    {highlightedText.slice(highlightStart, highlightEnd)}
+                  </Box>
+                  {highlightedText.slice(highlightEnd)}
+                </>
+              ) : (
+                card_data.title || leaderboard.id
+              )}
             </Typography>
           </CardContent>
         </Card>
 
-        {consolidated_notes && (
+        {(card_data.short_description || consolidated_notes) && (
           <Typography
             variant="body2"
             sx={{
@@ -186,7 +217,7 @@ const LeaderboardCard = ({ leaderboard }) => {
               fontSize: "0.875rem",
             }}
           >
-            {consolidated_notes}
+            {card_data.short_description || consolidated_notes}
           </Typography>
         )}
       </Stack>

client/src/components/LeaderboardFilters/LeaderboardFilters.jsx

@@ -0,0 +1,188 @@
+import React, { useState } from "react";
+import {
+  Box,
+  Stack,
+  Button,
+  FormControlLabel,
+  Switch,
+  TextField,
+  InputAdornment,
+  Typography,
+  Divider,
+} from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import { useLeaderboard } from "../../context/LeaderboardContext";
+import { useDebounce } from "../../hooks/useDebounce";
+import { alpha } from "@mui/material/styles";
+import { useMediaQuery } from "@mui/material";
+
+const LeaderboardFilters = ({ allSections }) => {
+  const {
+    setSearchQuery,
+    arenaOnly,
+    setArenaOnly,
+    totalLeaderboards,
+    filteredCount,
+    filterLeaderboards,
+  } = useLeaderboard();
+
+  const [inputValue, setInputValue] = useState("");
+  const debouncedSearch = useDebounce(inputValue, 200);
+
+  // Update the search query after debounce
+  React.useEffect(() => {
+    setSearchQuery(debouncedSearch);
+  }, [debouncedSearch, setSearchQuery]);
+
+  // Check if any filter is active
+  const isFilterActive = debouncedSearch || arenaOnly;
+
+  const isMobile = useMediaQuery((theme) => theme.breakpoints.down("md"));
+
+  return (
+    <Stack spacing={4} sx={{ width: "100%", mb: 4, alignItems: "center" }}>
+      {/* Categories */}
+      <Box sx={{ width: "60%" }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          useFlexGap
+          flexWrap="wrap"
+          justifyContent="center"
+          sx={{ pb: 2 }}
+        >
+          {allSections.map(({ id, title, data }) => {
+            const filteredCount = filterLeaderboards(data).length;
+            return (
+              <Button
+                key={id}
+                onClick={() => {
+                  if (filteredCount > 0) {
+                    document.getElementById(id)?.scrollIntoView({
+                      behavior: "smooth",
+                      block: "start",
+                    });
+                  }
+                }}
+                variant="outlined"
+                size="small"
+                disabled={filteredCount === 0}
+                sx={{
+                  textTransform: "none",
+                  cursor: filteredCount === 0 ? "default" : "pointer",
+                  mb: 1,
+                  backgroundColor: (theme) =>
+                    theme.palette.mode === "dark"
+                      ? "background.paper"
+                      : "white",
+                  "&:hover": {
+                    backgroundColor: (theme) =>
+                      theme.palette.mode === "dark"
+                        ? "background.paper"
+                        : "white",
+                  },
+                  "& .MuiTouchRipple-root": {
+                    transition: "none",
+                  },
+                  transition: "none",
+                }}
+              >
+                {title}
+                <Box
+                  component="span"
+                  sx={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 0.75,
+                    color: "text.secondary",
+                    ml: 0.75,
+                  }}
+                >
+                  <Box
+                    component="span"
+                    sx={(theme) => ({
+                      width: "4px",
+                      height: "4px",
+                      borderRadius: "100%",
+                      backgroundColor: alpha(
+                        theme.palette.text.primary,
+                        theme.palette.mode === "dark" ? 0.2 : 0.15
+                      ),
+                    })}
+                  />
+                  {filteredCount}
+                </Box>
+              </Button>
+            );
+          })}
+        </Stack>
+      </Box>
+
+      {/* Search bar */}
+      <Box sx={{ width: "100%" }}>
+        <TextField
+          size="large"
+          placeholder={
+            isMobile
+              ? "Search by name or tags..."
+              : "Search by name or use domain:, language:, judge:, test:, modality:, submission:"
+          }
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          fullWidth
+          sx={{
+            backgroundColor: (theme) =>
+              theme.palette.mode === "dark" ? "background.paper" : "white",
+            "& .MuiOutlinedInput-root": {
+              borderRadius: 1,
+              fontSize: "0.875rem",
+              backgroundColor: (theme) =>
+                theme.palette.mode === "dark" ? "background.paper" : "white",
+            },
+          }}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <SearchIcon
+                  sx={{ fontSize: "1.25rem", color: "text.secondary" }}
+                />
+              </InputAdornment>
+            ),
+            endAdornment: (
+              <InputAdornment position="end">
+                <Stack direction="row" spacing={2} alignItems="center">
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      color: isFilterActive ? "primary.main" : "text.secondary",
+                      fontWeight: isFilterActive ? 500 : 400,
+                    }}
+                  >
+                    {isFilterActive
+                      ? `${filteredCount}/${totalLeaderboards}`
+                      : totalLeaderboards}{" "}
+                    leaderboards
+                  </Typography>
+                  <Divider orientation="vertical" flexItem />
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        checked={arenaOnly}
+                        onChange={(e) => setArenaOnly(e.target.checked)}
+                        size="small"
+                      />
+                    }
+                    label={isMobile ? "Arena only" : "Show arena only"}
+                    sx={{ mr: 0 }}
+                  />
+                </Stack>
+              </InputAdornment>
+            ),
+          }}
+        />
+      </Box>
+    </Stack>
+  );
+};
+
+export default LeaderboardFilters;

client/src/components/LeaderboardSection.jsx

@@ -1,12 +1,15 @@
 import React, { useState } from "react";
-import { Typography, Grid, Box, Button } from "@mui/material";
+import { Typography, Grid, Box, Button, Collapse } from "@mui/material";
 import { alpha } from "@mui/material/styles";
 import LeaderboardCard from "./LeaderboardCard";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 
 const ITEMS_PER_PAGE = 3;
 
 const LeaderboardSection = ({ title, leaderboards }) => {
   const [showAll, setShowAll] = useState(false);
+  const [expanded, setExpanded] = useState(false);
 
   if (!leaderboards || leaderboards.length === 0) return null;
 
@@ -14,6 +17,11 @@ const LeaderboardSection = ({ title, leaderboards }) => {
     ? leaderboards
     : leaderboards.slice(0, ITEMS_PER_PAGE);
 
+  const toggleExpanded = () => {
+    setShowAll(!showAll);
+    setExpanded(!expanded);
+  };
+
   return (
     <Box sx={{ mb: 6 }}>
       <Box
@@ -59,7 +67,8 @@ const LeaderboardSection = ({ title, leaderboards }) => {
         </Box>
         {leaderboards.length > ITEMS_PER_PAGE && (
           <Button
-            onClick={() => setShowAll(!showAll)}
+            onClick={toggleExpanded}
+            size="small"
             sx={{
               color: "text.secondary",
               fontSize: "0.875rem",
@@ -72,18 +81,35 @@ const LeaderboardSection = ({ title, leaderboards }) => {
                   ),
               },
             }}
+            endIcon={
+              <ExpandMoreIcon
+                sx={{
+                  transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                  transition: "transform 300ms",
+                }}
+              />
+            }
           >
-            {showAll ? "Show less" : "Show more"}
+            {expanded ? "Show less" : "Show more"}
           </Button>
         )}
       </Box>
       <Grid container spacing={3}>
-        {displayedLeaderboards.map((leaderboard, index) => (
+        {leaderboards.slice(0, ITEMS_PER_PAGE).map((leaderboard, index) => (
           <Grid item xs={12} sm={6} md={4} key={index}>
             <LeaderboardCard leaderboard={leaderboard} />
           </Grid>
         ))}
       </Grid>
+      <Collapse in={showAll} timeout={300}>
+        <Grid container spacing={3} sx={{ mt: 0 }}>
+          {leaderboards.slice(ITEMS_PER_PAGE).map((leaderboard, index) => (
+            <Grid item xs={12} sm={6} md={4} key={index + ITEMS_PER_PAGE}>
+              <LeaderboardCard leaderboard={leaderboard} />
+            </Grid>
+          ))}
+        </Grid>
+      </Collapse>
     </Box>
   );
 };

client/src/components/Navigation/Navigation.jsx

@@ -4,26 +4,16 @@ import {
   Toolbar,
   Box,
   Link as MuiLink,
-  IconButton,
-  Tooltip,
   ButtonBase,
-  Typography,
-  Menu,
-  MenuItem,
-  useMediaQuery,
-  useTheme,
+  Tooltip,
 } from "@mui/material";
 import { alpha } from "@mui/material/styles";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined";
 import DarkModeOutlinedIcon from "@mui/icons-material/DarkModeOutlined";
-import MenuIcon from "@mui/icons-material/Menu";
 import { Link, useLocation } from "react-router-dom";
 
 const Navigation = ({ onToggleTheme, mode }) => {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
   const [hasChanged, setHasChanged] = useState(false);
   const location = useLocation();
 
@@ -99,14 +89,6 @@ const Navigation = ({ onToggleTheme, mode }) => {
     />
   );
 
-  const handleMenuClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleMenuOpen = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
   return (
     <AppBar
       position="static"
@@ -116,199 +98,88 @@ const Navigation = ({ onToggleTheme, mode }) => {
       }}
     >
       <Toolbar sx={{ justifyContent: "center" }}>
-        {isMobile ? (
-          <Box
-            sx={{
-              display: "flex",
-              width: "100%",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
-            <IconButton
-              onClick={handleMenuOpen}
-              sx={{ color: "text.secondary" }}
+        <Box
+          sx={{
+            display: "flex",
+            gap: 2.5,
+            alignItems: "center",
+            padding: "0.5rem 0",
+          }}
+        >
+          <Box sx={{ display: "flex", gap: 2.5, alignItems: "center" }}>
+            <Link
+              to="/"
+              style={{ textDecoration: "none" }}
+              sx={linkStyle(location.pathname === "/")}
             >
-              <MenuIcon />
-            </IconButton>
-            <Menu
-              anchorEl={anchorEl}
-              open={Boolean(anchorEl)}
-              onClose={handleMenuClose}
-              PaperProps={{
-                elevation: 3,
-                sx: {
-                  mt: 1.5,
-                  minWidth: 220,
-                  borderRadius: "12px",
-                  border: (theme) =>
-                    `1px solid ${alpha(theme.palette.divider, 0.1)}`,
-                  backgroundColor: (theme) =>
-                    theme.palette.mode === "dark"
-                      ? alpha(theme.palette.background.paper, 0.8)
-                      : theme.palette.background.paper,
-                  backdropFilter: "blur(20px)",
+              <Box sx={linkStyle(location.pathname === "/")}>Explorer</Box>
+            </Link>
+            <Link
+              to="/submit"
+              style={{ textDecoration: "none" }}
+              sx={linkStyle(location.pathname === "/submit")}
+            >
+              <Box sx={linkStyle(location.pathname === "/submit")}>
+                How to submit
+              </Box>
+            </Link>
+            <Separator />
+            <MuiLink
+              href="https://huggingface.co/docs/leaderboards/open_llm_leaderboard/about"
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{
+                ...linkStyle(),
+                "& svg": {
+                  fontSize: "0.75rem",
+                  ml: 0.5,
+                  opacity: 0.6,
+                  transition: "opacity 0.2s ease-in-out",
+                },
+                "&:hover svg": {
+                  opacity: 0.8,
                 },
               }}
             >
-              <MenuItem
-                component={Link}
-                to="/"
-                onClick={handleMenuClose}
-                selected={location.pathname === "/"}
-                sx={linkStyle(location.pathname === "/")}
-              >
-                Explorer
-              </MenuItem>
-              <MenuItem
-                component={Link}
-                to="/submit"
-                onClick={handleMenuClose}
-                selected={location.pathname === "/submit"}
-                sx={linkStyle(location.pathname === "/submit")}
-              >
-                How to submit?
-              </MenuItem>
-              <MenuItem
-                component={MuiLink}
-                href="https://huggingface.co/docs/leaderboards/open_llm_leaderboard/about"
-                target="_blank"
-                sx={{
-                  ...linkStyle(),
-                  px: 2,
-                  py: 1,
-                  "& svg": {
-                    ml: "auto",
-                    fontSize: "0.875rem",
-                    opacity: 0.6,
-                  },
-                }}
-              >
-                About
-                <OpenInNewIcon />
-              </MenuItem>
-            </Menu>
-            <Tooltip
-              title={
-                mode === "light"
-                  ? "Switch to dark mode"
-                  : "Switch to light mode"
-              }
-            >
-              <ButtonBase
-                onClick={handleThemeToggle}
-                sx={(theme) => ({
-                  color: "text.secondary",
-                  borderRadius: "100%",
-                  padding: 0,
-                  width: "36px",
-                  height: "36px",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  transition: "all 0.2s ease-in-out",
-                  "&:hover": {
-                    color: "text.primary",
-                    backgroundColor: alpha(
-                      theme.palette.text.primary,
-                      theme.palette.mode === "dark" ? 0.1 : 0.06
-                    ),
-                  },
-                })}
-              >
-                {mode === "light" ? (
-                  <DarkModeOutlinedIcon sx={iconStyle} />
-                ) : (
-                  <LightModeOutlinedIcon sx={iconStyle} />
-                )}
-              </ButtonBase>
-            </Tooltip>
+              About
+              <OpenInNewIcon />
+            </MuiLink>
           </Box>
-        ) : (
-          <Box
-            sx={{
-              display: "flex",
-              gap: 2.5,
-              alignItems: "center",
-              padding: "0.5rem 0",
-            }}
+          <Separator />
+          <Tooltip
+            title={
+              mode === "light" ? "Switch to dark mode" : "Switch to light mode"
+            }
           >
-            <Box sx={{ display: "flex", gap: 2.5, alignItems: "center" }}>
-              <Link
-                to="/"
-                style={{ textDecoration: "none" }}
-                sx={linkStyle(location.pathname === "/")}
-              >
-                <Box sx={linkStyle(location.pathname === "/")}>Explorer</Box>
-              </Link>
-              <Link
-                to="/submit"
-                style={{ textDecoration: "none" }}
-                sx={linkStyle(location.pathname === "/submit")}
-              >
-                <Box sx={linkStyle(location.pathname === "/submit")}>
-                  How to submit?
-                </Box>
-              </Link>
-              <MuiLink
-                href="https://huggingface.co/docs/leaderboards/open_llm_leaderboard/about"
-                target="_blank"
-                rel="noopener noreferrer"
-                sx={{
-                  ...linkStyle(),
-                  "& svg": {
-                    fontSize: "0.75rem",
-                    ml: 0.5,
-                    opacity: 0.6,
-                    transition: "opacity 0.2s ease-in-out",
-                  },
-                  "&:hover svg": {
-                    opacity: 0.8,
-                  },
-                }}
-              >
-                About
-                <OpenInNewIcon />
-              </MuiLink>
-            </Box>
-            <Separator />
-            <Tooltip
-              title={
-                mode === "light"
-                  ? "Switch to dark mode"
-                  : "Switch to light mode"
-              }
+            <ButtonBase
+              onClick={handleThemeToggle}
+              sx={(theme) => ({
+                color: "text.secondary",
+                borderRadius: "100%",
+                padding: 0,
+                width: "36px",
+                height: "36px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "all 0.2s ease-in-out",
+                "&:hover": {
+                  color: "text.primary",
+                  backgroundColor: alpha(
+                    theme.palette.text.primary,
+                    theme.palette.mode === "dark" ? 0.1 : 0.06
+                  ),
+                },
+              })}
             >
-              <ButtonBase
-                onClick={handleThemeToggle}
-                sx={(theme) => ({
-                  color: "text.secondary",
-                  borderRadius: "100%",
-                  padding: 0,
-                  width: "36px",
-                  height: "36px",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  transition: "all 0.2s ease-in-out",
-                  "&:hover": {
-                    color: "text.primary",
-                    backgroundColor: alpha(
-                      theme.palette.text.primary,
-                      theme.palette.mode === "dark" ? 0.1 : 0.06
-                    ),
-                  },
-                })}
-              >
-                {mode === "light" ? (
-                  <DarkModeOutlinedIcon sx={iconStyle} />
-                ) : (
-                  <LightModeOutlinedIcon sx={iconStyle} />
-                )}
-              </ButtonBase>
-            </Tooltip>
-          </Box>
-        )}
+              {mode === "light" ? (
+                <DarkModeOutlinedIcon sx={iconStyle} />
+              ) : (
+                <LightModeOutlinedIcon sx={iconStyle} />
+              )}
+            </ButtonBase>
+          </Tooltip>
+        </Box>
       </Toolbar>
     </AppBar>
   );

client/src/context/LeaderboardContext.jsx

@@ -0,0 +1,270 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+} from "react";
+
+const LeaderboardContext = createContext();
+
+export const LeaderboardProvider = ({ children }) => {
+  const [leaderboards, setLeaderboards] = useState([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [arenaOnly, setArenaOnly] = useState(false);
+
+  // Calculate total number of unique leaderboards (excluding duplicates)
+  const totalLeaderboards = useMemo(() => {
+    const uniqueIds = new Set(leaderboards.map((board) => board.id));
+    return uniqueIds.size;
+  }, [leaderboards]);
+
+  // Filter functions for categories
+  const filterByTag = useCallback((tag, boards) => {
+    return (
+      boards?.filter(
+        (board) =>
+          board.tags?.includes(tag) || board.consolidated_tags?.includes(tag)
+      ) || []
+    );
+  }, []);
+
+  const filterByLanguage = useCallback((boards) => {
+    return (
+      boards?.filter(
+        (board) =>
+          board.tags?.some((tag) => tag.startsWith("language:")) ||
+          board.consolidated_tags?.some((tag) => tag.startsWith("language:"))
+      ) || []
+    );
+  }, []);
+
+  const filterByVision = useCallback((boards) => {
+    return (
+      boards?.filter(
+        (board) =>
+          board.tags?.some(
+            (tag) => tag === "modality:video" || tag === "modality:image"
+          ) ||
+          board.consolidated_tags?.some(
+            (tag) => tag === "modality:video" || tag === "modality:image"
+          )
+      ) || []
+    );
+  }, []);
+
+  const filterUncategorized = useCallback((boards) => {
+    const categorizedTags = [
+      "eval:code",
+      "eval:math",
+      "modality:video",
+      "modality:image",
+      "modality:audio",
+      "modality:tools",
+      "domain:financial",
+      "domain:medical",
+      "domain:legal",
+    ];
+
+    return (
+      boards?.filter((board) => {
+        if (
+          (!board.tags || board.tags.length === 0) &&
+          (!board.consolidated_tags || board.consolidated_tags.length === 0)
+        ) {
+          return true;
+        }
+
+        const hasNoTagsInCategory = !board.tags?.some(
+          (tag) => categorizedTags.includes(tag) || tag.startsWith("language:")
+        );
+        const hasNoConsolidatedTagsInCategory = !board.consolidated_tags?.some(
+          (tag) => categorizedTags.includes(tag) || tag.startsWith("language:")
+        );
+
+        return hasNoTagsInCategory && hasNoConsolidatedTagsInCategory;
+      }) || []
+    );
+  }, []);
+
+  // Define sections
+  const allSections = useMemo(() => {
+    if (!leaderboards) return [];
+
+    return [
+      {
+        id: "code",
+        title: "Code",
+        data: filterByTag("eval:code", leaderboards),
+      },
+      {
+        id: "math",
+        title: "Math",
+        data: filterByTag("eval:math", leaderboards),
+      },
+      {
+        id: "language",
+        title: "Language Specific",
+        data: filterByLanguage(leaderboards),
+      },
+      { id: "vision", title: "Vision", data: filterByVision(leaderboards) },
+      {
+        id: "audio",
+        title: "Audio",
+        data: filterByTag("modality:audio", leaderboards),
+      },
+      {
+        id: "agentic",
+        title: "Agentic",
+        data: filterByTag("modality:tools", leaderboards),
+      },
+      {
+        id: "financial",
+        title: "Financial",
+        data: filterByTag("domain:financial", leaderboards),
+      },
+      {
+        id: "medical",
+        title: "Medical",
+        data: filterByTag("domain:medical", leaderboards),
+      },
+      {
+        id: "legal",
+        title: "Legal",
+        data: filterByTag("domain:legal", leaderboards),
+      },
+      {
+        id: "uncategorized",
+        title: "Uncategorized",
+        data: filterUncategorized(leaderboards),
+      },
+    ];
+  }, [
+    leaderboards,
+    filterByTag,
+    filterByLanguage,
+    filterByVision,
+    filterUncategorized,
+  ]);
+
+  // Get sections with data
+  const sections = useMemo(() => {
+    return allSections.filter((section) => section.data.length > 0);
+  }, [allSections]);
+
+  // Filter leaderboards based on search query and arena toggle
+  const filterLeaderboards = useCallback(
+    (boards) => {
+      if (!boards) return [];
+
+      let filtered = [...boards];
+
+      // Filter by search query
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        const searchableTagPrefixes = [
+          "domain:",
+          "language:",
+          "judge:",
+          "test:",
+          "modality:",
+          "submission:",
+        ];
+
+        filtered = filtered.filter((board) => {
+          const isTagSearch = searchableTagPrefixes.some((prefix) =>
+            query.startsWith(prefix)
+          );
+
+          if (isTagSearch) {
+            return (
+              board.tags?.some((tag) => tag.toLowerCase().includes(query)) ||
+              board.consolidated_tags?.some((tag) =>
+                tag.toLowerCase().includes(query)
+              )
+            );
+          }
+
+          return board.card_data?.title?.toLowerCase().includes(query);
+        });
+      }
+
+      // Filter arena only
+      if (arenaOnly) {
+        filtered = filtered.filter(
+          (board) =>
+            board.tags?.includes("judge:humans") ||
+            board.consolidated_tags?.includes("judge:humans")
+        );
+      }
+
+      return filtered;
+    },
+    [searchQuery, arenaOnly]
+  );
+
+  // Get filtered count
+  const filteredCount = useMemo(() => {
+    return filterLeaderboards(leaderboards).length;
+  }, [filterLeaderboards, leaderboards]);
+
+  // Function to get highlighted parts of text
+  const getHighlightedText = useCallback((text, searchTerm) => {
+    if (!searchTerm || !text) return { text, shouldHighlight: false };
+
+    const query = searchTerm.toLowerCase();
+    const searchableTagPrefixes = [
+      "domain:",
+      "language:",
+      "judge:",
+      "test:",
+      "modality:",
+      "submission:",
+    ];
+
+    // Si c'est une recherche par tag, on ne highlight rien
+    if (searchableTagPrefixes.some((prefix) => query.startsWith(prefix))) {
+      return { text, shouldHighlight: false };
+    }
+
+    // Sinon on highlight les parties qui matchent
+    const index = text.toLowerCase().indexOf(query);
+    if (index === -1) return { text, shouldHighlight: false };
+
+    return {
+      text,
+      shouldHighlight: true,
+      highlightStart: index,
+      highlightEnd: index + query.length,
+    };
+  }, []);
+
+  const value = {
+    leaderboards,
+    setLeaderboards,
+    searchQuery,
+    setSearchQuery,
+    arenaOnly,
+    setArenaOnly,
+    totalLeaderboards,
+    filteredCount,
+    filterLeaderboards,
+    sections,
+    allSections,
+    getHighlightedText,
+  };
+
+  return (
+    <LeaderboardContext.Provider value={value}>
+      {children}
+    </LeaderboardContext.Provider>
+  );
+};
+
+export const useLeaderboard = () => {
+  const context = useContext(LeaderboardContext);
+  if (!context) {
+    throw new Error("useLeaderboard must be used within a LeaderboardProvider");
+  }
+  return context;
+};

client/src/hooks/useDebounce.js

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+
+export const useDebounce = (value, delay = 200) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};

client/src/pages/HowToSubmitPage/HowToSubmitPage.jsx

@@ -10,6 +10,28 @@ import {
 } from "@mui/material";
 import PageHeader from "../../components/PageHeader/PageHeader";
 
+const StepNumber = ({ number }) => (
+  <Box
+    sx={{
+      width: 32,
+      height: 32,
+      borderRadius: "50%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      border: "1px solid",
+      borderColor: "primary.main",
+      color: "primary.main",
+      fontSize: "0.875rem",
+      fontWeight: 600,
+      flexShrink: 0,
+      bgcolor: "transparent",
+    }}
+  >
+    {number}
+  </Box>
+);
+
 const Section = ({ title, children }) => (
   <Paper
     elevation={0}
@@ -83,9 +105,8 @@ const TagSection = ({ title, description, tags, explanations }) => (
               component="span"
               variant="body2"
               sx={{ color: "text.secondary", ml: 1 }}
-            >
-              {explanations[index]}
-            </Typography>
+              dangerouslySetInnerHTML={{ __html: explanations[index] }}
+            />
           )}
         </Box>
       ))}
@@ -117,30 +138,154 @@ const HowToSubmitPage = () => {
         title="How to Submit"
         subtitle={
           <>
-            Learn how to <span style={{ fontWeight: 600 }}>be listed</span> on
-            the explorer
+            How to <span style={{ fontWeight: 600 }}>be a part</span> of{" "}
+            <span style={{ fontWeight: 600 }}>"leaderboards on the Hub"</span>
           </>
         }
       />
 
       <Section title="How to submit your leaderboard?">
-        <Stack spacing={2}>
-          <Typography variant="body1">
-            Your space will appear automatically in the lists if it contains
-            correct metadata!
-          </Typography>
-          <Typography variant="body1">
-            Make sure to either use the tag leaderboard or arena to your space,
-            by adding the following to your README:
-          </Typography>
-          <CodeBlock>
-            tags:
-            <br />
-            &nbsp;&nbsp;- leaderboard
-          </CodeBlock>
-          <Typography variant="body1">
-            then any other tags of interest to you.
+        <Stack spacing={4}>
+          <Typography variant="body1" color="text.secondary">
+            To be listed on this explorer, your leaderboard must be hosted on a
+            Hugging Face Space. Follow these steps to make your Space
+            discoverable:
           </Typography>
+
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: { xs: "column", md: "row" },
+              gap: 4,
+              position: "relative",
+            }}
+          >
+            <Box sx={{ flex: 1 }}>
+              <Stack spacing={3}>
+                <Stack direction="row" spacing={2} alignItems="center">
+                  <StepNumber number={1} />
+                  <Typography
+                    variant="subtitle1"
+                    sx={{
+                      fontWeight: 600,
+                      color: "text.primary",
+                      letterSpacing: "-0.01em",
+                    }}
+                  >
+                    Is it an Arena or a Leaderboard ?
+                  </Typography>
+                </Stack>
+                <Box sx={{ pl: 7 }}>
+                  <Stack spacing={2}>
+                    <Typography variant="body2" color="text.secondary">
+                      Add either the <strong>leaderboard</strong> or{" "}
+                      <strong>arena</strong> tag to your README.md:
+                    </Typography>
+                    <CodeBlock>
+                      tags:
+                      <br />
+                      &nbsp;&nbsp;- leaderboard # or arena
+                    </CodeBlock>
+                  </Stack>
+                </Box>
+              </Stack>
+            </Box>
+
+            <Divider
+              orientation="vertical"
+              flexItem
+              sx={{
+                display: { xs: "none", md: "block" },
+              }}
+            />
+
+            <Box sx={{ flex: 1 }}>
+              <Stack spacing={3}>
+                <Stack direction="row" spacing={2} alignItems="center">
+                  <StepNumber number={2} />
+                  <Typography
+                    variant="subtitle1"
+                    sx={{
+                      fontWeight: 600,
+                      color: "text.primary",
+                      letterSpacing: "-0.01em",
+                    }}
+                  >
+                    Describe it briefly
+                  </Typography>
+                </Stack>
+                <Box sx={{ pl: 7 }}>
+                  <Stack spacing={2}>
+                    <Typography variant="body2" color="text.secondary">
+                      Include a <strong>short_description</strong> field in your
+                      README.md.
+                    </Typography>
+                    <CodeBlock>
+                      short_description: Evaluating LLMs on math reasoning tasks
+                    </CodeBlock>
+                  </Stack>
+                </Box>
+              </Stack>
+            </Box>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Stack spacing={3}>
+              <Stack direction="row" spacing={2} alignItems="center">
+                <StepNumber number={3} />
+                <Typography
+                  variant="subtitle1"
+                  sx={{
+                    fontWeight: 600,
+                    color: "text.primary",
+                    letterSpacing: "-0.01em",
+                  }}
+                >
+                  Add relevant tags
+                </Typography>
+              </Stack>
+              <Box sx={{ pl: 7 }}>
+                <Stack spacing={2}>
+                  <Typography variant="body2" color="text.secondary">
+                    Add relevant tags from these categories to help users find
+                    and understand your leaderboard.
+                  </Typography>
+                  <CodeBlock>
+                    tags:
+                    <br />
+                    &nbsp;&nbsp;- leaderboard
+                    <br />
+                    &nbsp;&nbsp;- submission:automatic &nbsp;&nbsp;# How models
+                    are submitted
+                    <br />
+                    &nbsp;&nbsp;- test:public
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#
+                    Test set visibility
+                    <br />
+                    &nbsp;&nbsp;- judge:function
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#
+                    Evaluation method
+                    <br />
+                    &nbsp;&nbsp;- modality:text
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#
+                    Input/output type
+                    <br />
+                    &nbsp;&nbsp;- language:english
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Language coverage
+                    <br />
+                    &nbsp;&nbsp;- domain:financial
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Specific domain
+                  </CodeBlock>
+                  <Typography variant="body2" color="text.secondary">
+                    See the complete list of available tags and their meanings
+                    below.
+                  </Typography>
+                </Stack>
+              </Box>
+            </Stack>
+          </Box>
         </Stack>
       </Section>
 
@@ -155,10 +300,10 @@ const HowToSubmitPage = () => {
             "submission:closed",
           ]}
           explanations={[
-            "users can submit their models as such to the leaderboard, and evaluation is run automatically without human intervention",
-            "the leaderboard requires the model owner to run evaluations on his side and submit the results",
-            "the leaderboard requires the leaderboard owner to run evaluations for new submissions",
-            "the leaderboard does not accept submissions at the moment",
+            "users can submit their models as such to the leaderboard, and evaluation is run <strong>automatically</strong> without human intervention",
+            "the leaderboard requires the <strong>model owner</strong> to run evaluations on his side and submit the results",
+            "the leaderboard requires the <strong>leaderboard owner</strong> to run evaluations for new submissions",
+            "the leaderboard <strong>does not accept</strong> submissions at the moment",
           ]}
         />
 
@@ -169,10 +314,10 @@ const HowToSubmitPage = () => {
           description="Arenas are not concerned by this category."
           tags={["test:public", "test:mix", "test:private", "test:rolling"]}
           explanations={[
-            "all the test sets used are public, the evaluations are completely reproducible",
-            "some test sets are public and some private",
-            "all the test sets used are private, the evaluations are hard to game",
-            "the test sets used change regularly through time and evaluation scores are refreshed",
+            "all the test sets used are <strong>public</strong>, the evaluations are completely <strong>reproducible</strong>",
+            "some test sets are <strong>public</strong> and some <strong>private</strong>",
+            "all the test sets used are <strong>private</strong>, the evaluations are hard to game",
+            "the test sets used <strong>change regularly</strong> through time and evaluation scores are refreshed",
           ]}
         />
 
@@ -181,16 +326,16 @@ const HowToSubmitPage = () => {
         <TagSection
           title="Judges"
           tags={[
-            "judge:auto",
+            "judge:function",
             "judge:model",
             "judge:humans",
             "judge:vibe_check",
           ]}
           explanations={[
-            "evaluations are run automatically, using an evaluation suite such as lm_eval or lighteval",
-            "evaluations are run using a model as a judge approach to rate answer",
-            "evaluations are done by humans to rate answer - this is an arena",
-            "evaluations are done manually by one or several humans",
+            "evaluations are run <strong>automatically</strong>, using an evaluation suite such as <strong>lm_eval</strong> or <strong>lighteval</strong>",
+            "evaluations are run using a <strong>model as a judge</strong> approach to rate answer",
+            "evaluations are <strong>done by humans</strong> to rate answer - <strong>this is an arena</strong>",
+            "evaluations are <strong>done manually</strong> by one or several humans",
           ]}
         />
 
@@ -212,8 +357,8 @@ const HowToSubmitPage = () => {
             "",
             "",
             "",
-            "requires added tool usage - mostly for assistant models (a bit outside of usual modalities)",
-            "the leaderboard concerns itself with machine learning artefacts as themselves, for example, quality evaluation of text embeddings (a bit outside of usual modalities)",
+            "requires added <strong>tool usage</strong> - mostly for <strong>assistant models</strong> (a bit outside of usual modalities)",
+            "the leaderboard concerns itself with <strong>machine learning artefacts</strong> as themselves, for example, quality evaluation of <strong>text embeddings</strong> (a bit outside of usual modalities)",
           ]}
         />
 
@@ -228,13 +373,15 @@ const HowToSubmitPage = () => {
             "eval:code",
             "eval:performance",
             "eval:safety",
+            "task:rag",
           ]}
           explanations={[
-            "the evaluation looks at generation capabilities specifically (can be image generation, text generation, ...)",
-            "the evaluation tests math abilities",
-            "the evaluation tests coding capabilities",
-            "model performance (speed, energy consumption, ...)",
-            "the evaluation considers safety, toxicity, bias",
+            "the evaluation looks at <strong>generation capabilities</strong> specifically (can be image generation, text generation, ...)",
+            "the evaluation tests <strong>math abilities</strong>",
+            "the evaluation tests <strong>coding capabilities</strong>",
+            "model <strong>performance</strong> (speed, energy consumption, ...)",
+            "the evaluation considers <strong>safety</strong>, <strong>toxicity</strong>, <strong>bias</strong>",
+            "the evaluation tests <strong>RAG</strong> (Retrieval-Augmented Generation) capabilities",
           ]}
         />
 
@@ -280,8 +427,6 @@ const HowToSubmitPage = () => {
           </Link>{" "}
           on Hugging Face.
         </Typography>
-
-        <Divider sx={{ my: 3 }} />
       </Section>
     </Box>
   );

client/src/pages/LeaderboardPage/LeaderboardPage.jsx

@@ -6,17 +6,26 @@ import {
   Button,
   FormControlLabel,
   Switch,
+  TextField,
+  InputAdornment,
+  Typography,
 } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
 import Logo from "../../components/Logo/Logo";
 import PageHeader from "../../components/PageHeader/PageHeader";
 import LeaderboardSection from "../../components/LeaderboardSection";
+import LeaderboardFilters from "../../components/LeaderboardFilters/LeaderboardFilters";
 import { alpha } from "@mui/material/styles";
 import API_URLS from "../../config/api";
+import {
+  LeaderboardProvider,
+  useLeaderboard,
+} from "../../context/LeaderboardContext";
 
-const LeaderboardPage = () => {
-  const [leaderboards, setLeaderboards] = useState(null);
+const LeaderboardPageContent = () => {
   const [loading, setLoading] = useState(true);
-  const [arenaOnly, setArenaOnly] = useState(false);
+  const { setLeaderboards, filterLeaderboards, sections, allSections } =
+    useLeaderboard();
 
   useEffect(() => {
     fetch(API_URLS.leaderboards)
@@ -32,67 +41,7 @@ const LeaderboardPage = () => {
         console.error("Error fetching leaderboards:", error);
         setLoading(false);
       });
-  }, []);
-
-  if (!leaderboards && !loading) {
-    return null;
-  }
-
-  const filterByTag = (tag) => {
-    let filtered =
-      leaderboards?.filter((leaderboard) =>
-        leaderboard.consolidated_tags?.includes(tag)
-      ) || [];
-
-    if (arenaOnly) {
-      filtered = filtered.filter((leaderboard) =>
-        leaderboard.consolidated_tags?.includes("judge:humans")
-      );
-    }
-
-    return filtered.sort((a, b) => (b.likes || 0) - (a.likes || 0));
-  };
-
-  const filterByLanguage = () => {
-    let filtered =
-      leaderboards?.filter((leaderboard) =>
-        leaderboard.consolidated_tags?.some((tag) =>
-          tag.startsWith("language:")
-        )
-      ) || [];
-
-    if (arenaOnly) {
-      filtered = filtered.filter((leaderboard) =>
-        leaderboard.consolidated_tags?.includes("judge:humans")
-      );
-    }
-
-    return filtered.sort((a, b) => (b.likes || 0) - (a.likes || 0));
-  };
-
-  const codeLeaderboards = filterByTag("eval:code");
-  const mathLeaderboards = filterByTag("eval:math");
-  const languageLeaderboards = filterByLanguage();
-  const videoLeaderboards = filterByTag("modality:video");
-  const audioLeaderboards = filterByTag("modality:audio");
-  const agenticLeaderboards = filterByTag("modality:tools");
-  const financialLeaderboards = filterByTag("domain:financial");
-  const medicalLeaderboards = filterByTag("domain:medical");
-  const legalLeaderboards = filterByTag("domain:legal");
-
-  const allSections = [
-    { id: "code", title: "Code", data: codeLeaderboards },
-    { id: "math", title: "Math", data: mathLeaderboards },
-    { id: "language", title: "Language Specific", data: languageLeaderboards },
-    { id: "video", title: "Vision language model", data: videoLeaderboards },
-    { id: "audio", title: "Audio", data: audioLeaderboards },
-    { id: "agentic", title: "Agentic", data: agenticLeaderboards },
-    { id: "financial", title: "Financial", data: financialLeaderboards },
-    { id: "medical", title: "Medical", data: medicalLeaderboards },
-    { id: "legal", title: "Legal", data: legalLeaderboards },
-  ];
-
-  const sections = allSections.filter((section) => section.data.length > 0);
+  }, [setLeaderboards]);
 
   return (
     <Box
@@ -108,17 +57,27 @@ const LeaderboardPage = () => {
       >
         <Logo />
       </Box>
-      <PageHeader
-        title="Leaderboards on the Hub"
-        subtitle={
-          <>
-            <span style={{ fontWeight: 600 }}>Discover</span> and{" "}
-            <span style={{ fontWeight: 600 }}>explore</span> all leaderboards
-            from the{" "}
-            <span style={{ fontWeight: 600 }}>Hugging Face community</span>
-          </>
-        }
-      />
+
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center",
+          mb: 0,
+          mt: 6,
+          gap: 2,
+        }}
+      >
+        <Typography fontWeight="bold" variant="h3" component="h1">
+          Leaderboards on the Hub
+        </Typography>
+        <Typography variant="h6" color="text.secondary">
+          <span style={{ fontWeight: 600 }}>Discover</span> and{" "}
+          <span style={{ fontWeight: 600 }}>explore</span> all leaderboards from
+          the <span style={{ fontWeight: 600 }}>Hugging Face community</span>
+        </Typography>
+      </Box>
 
       {loading ? (
         <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
@@ -133,87 +92,14 @@ const LeaderboardPage = () => {
             mt: 4,
           }}
         >
-          {/* Table of Contents with Arena Toggle */}
-          <Box sx={{ display: "flex", alignItems: "center", mb: 4 }}>
-            <Stack
-              direction="row"
-              spacing={1}
-              sx={{
-                flexWrap: "wrap",
-                gap: 1,
-                flex: 1,
-              }}
-            >
-              {allSections.map(({ id, title, data }) => (
-                <Button
-                  key={id}
-                  onClick={() => {
-                    if (data.length > 0) {
-                      document.getElementById(id)?.scrollIntoView({
-                        behavior: "smooth",
-                        block: "start",
-                      });
-                    }
-                  }}
-                  variant="text"
-                  size="small"
-                  disabled={data.length === 0}
-                  sx={{
-                    color:
-                      data.length === 0 ? "text.disabled" : "text.secondary",
-                    textTransform: "none",
-                    fontSize: "0.875rem",
-                    opacity: data.length === 0 ? 0.5 : 1,
-                    cursor: data.length === 0 ? "default" : "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 1,
-                    "&:hover": {
-                      backgroundColor:
-                        data.length === 0
-                          ? "transparent"
-                          : (theme) =>
-                              alpha(
-                                theme.palette.text.primary,
-                                theme.palette.mode === "dark" ? 0.1 : 0.06
-                              ),
-                    },
-                  }}
-                >
-                  {title}
-                  <Box
-                    sx={(theme) => ({
-                      width: "3px",
-                      height: "3px",
-                      borderRadius: "100%",
-                      backgroundColor: alpha(
-                        theme.palette.text.primary,
-                        theme.palette.mode === "dark" ? 0.2 : 0.15
-                      ),
-                      opacity: data.length === 0 ? 0.5 : 1,
-                    })}
-                  />
-                  {data.length}
-                </Button>
-              ))}
-            </Stack>
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={arenaOnly}
-                  onChange={(e) => setArenaOnly(e.target.checked)}
-                  size="small"
-                />
-              }
-              label="Arena only"
-              sx={{ ml: 2 }}
-            />
-          </Box>
+          <LeaderboardFilters allSections={allSections} />
 
-          {/* Sections */}
           {sections.map(({ id, title, data }) => (
             <Box key={id} id={id}>
-              <LeaderboardSection title={title} leaderboards={data} />
+              <LeaderboardSection
+                title={title}
+                leaderboards={filterLeaderboards(data)}
+              />
             </Box>
           ))}
         </Box>
@@ -222,4 +108,12 @@ const LeaderboardPage = () => {
   );
 };
 
+const LeaderboardPage = () => {
+  return (
+    <LeaderboardProvider>
+      <LeaderboardPageContent />
+    </LeaderboardProvider>
+  );
+};
+
 export default LeaderboardPage;