removed unused files

frontend/src/components/shared/AuthContainer.js

@@ -1,168 +0,0 @@
-import React from "react";
-import {
-  Box,
-  Typography,
-  Button,
-  Chip,
-  Stack,
-  Paper,
-  CircularProgress,
-  useTheme,
-  useMediaQuery,
-} from "@mui/material";
-import HFLogo from "../Logo/HFLogo";
-import { useAuth } from "../../hooks/useAuth";
-import LogoutIcon from "@mui/icons-material/Logout";
-import { useNavigate } from "react-router-dom";
-
-function AuthContainer({ actionText = "DO_ACTION" }) {
-  const { isAuthenticated, user, login, logout, loading } = useAuth();
-  const navigate = useNavigate();
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-
-  const handleLogout = () => {
-    if (isAuthenticated && logout) {
-      logout();
-      navigate("/", { replace: true });
-      window.location.reload();
-    }
-  };
-
-  if (loading) {
-    return (
-      <Paper
-        elevation={0}
-        sx={{
-          p: 3,
-          mb: 4,
-          border: "1px solid",
-          borderColor: "grey.300",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: 2,
-        }}
-      >
-        <CircularProgress size={24} />
-      </Paper>
-    );
-  }
-
-  if (!isAuthenticated) {
-    return (
-      <Paper
-        elevation={0}
-        sx={{
-          p: 3,
-          mb: 4,
-          border: "1px solid",
-          borderColor: "grey.300",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: 2,
-        }}
-      >
-        <Typography variant="h6" align="center">
-          Login to {actionText}
-        </Typography>
-        <Typography
-          variant="body2"
-          color="text.secondary"
-          align="center"
-          sx={{
-            px: isMobile ? 2 : 0,
-          }}
-        >
-          You need to be logged in with your Hugging Face account to{" "}
-          {actionText.toLowerCase()}
-        </Typography>
-        <Button
-          variant="contained"
-          onClick={login}
-          startIcon={
-            <Box
-              sx={{
-                width: 20,
-                height: 20,
-                display: "flex",
-                alignItems: "center",
-              }}
-            >
-              <HFLogo />
-            </Box>
-          }
-          sx={{
-            textTransform: "none",
-            fontWeight: 600,
-            py: 1,
-            px: 2,
-            width: isMobile ? "100%" : "auto",
-          }}
-        >
-          Sign in with Hugging Face
-        </Button>
-      </Paper>
-    );
-  }
-
-  return (
-    <Paper
-      elevation={0}
-      sx={{ p: 2, border: "1px solid", borderColor: "grey.300", mb: 4 }}
-    >
-      <Stack
-        direction={isMobile ? "column" : "row"}
-        spacing={2}
-        alignItems={isMobile ? "stretch" : "center"}
-        justifyContent="space-between"
-      >
-        <Stack
-          direction={isMobile ? "column" : "row"}
-          spacing={1}
-          alignItems={isMobile ? "stretch" : "center"}
-          sx={{ width: "100%" }}
-        >
-          <Typography
-            variant="body1"
-            align={isMobile ? "center" : "left"}
-            sx={{ mb: isMobile ? 1 : 0 }}
-          >
-            Connected as <strong>{user?.username}</strong>
-          </Typography>
-          <Chip
-            label={`Ready to ${actionText}`}
-            color="success"
-            size="small"
-            variant="outlined"
-            sx={{
-              width: isMobile ? "100%" : "auto",
-              height: isMobile ? 32 : 24,
-              "& .MuiChip-label": {
-                px: isMobile ? 2 : 1,
-              },
-            }}
-          />
-        </Stack>
-        <Button
-          variant="contained"
-          onClick={handleLogout}
-          endIcon={<LogoutIcon />}
-          color="primary"
-          sx={{
-            minWidth: 120,
-            height: 36,
-            textTransform: "none",
-            fontSize: "0.9375rem",
-            width: isMobile ? "100%" : "auto",
-          }}
-        >
-          Logout
-        </Button>
-      </Stack>
-    </Paper>
-  );
-}
-
-export default AuthContainer;

frontend/src/config/auth.js

@@ -1,7 +0,0 @@
-export const HF_CONFIG = {
-  CLIENT_ID: "18fe6b93-6921-444c-9a20-5c22c578f2d8",
-  STORAGE_KEY: "hf_oauth",
-  SCOPE: "openid profile",
-  PROD_URL: "https://open-llm-leaderboard-open-llm-leaderboard.hf.space",
-  DEV_URL: "http://localhost:7860"
-}; 

frontend/src/hooks/useAuth.js

@@ -1,173 +0,0 @@
-import { useState, useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "@huggingface/hub";
-import { HF_CONFIG } from "../config/auth";
-
-async function fetchUserInfo(token) {
-  const response = await fetch("https://huggingface.co/api/whoami-v2", {
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-  });
-  if (!response.ok) {
-    throw new Error("Failed to fetch user info");
-  }
-  return response.json();
-}
-
-export function useAuth() {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [user, setUser] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  // Initialisation de l'authentification
-  useEffect(() => {
-    let mounted = true;
-    const initAuth = async () => {
-      try {
-        console.group("Auth Initialization");
-        setLoading(true);
-
-        // Vérifier s'il y a une redirection OAuth d'abord
-        let oauthResult = await oauthHandleRedirectIfPresent();
-
-        // Si pas de redirection, vérifier le localStorage
-        if (!oauthResult) {
-          const storedAuth = localStorage.getItem(HF_CONFIG.STORAGE_KEY);
-          if (storedAuth) {
-            try {
-              oauthResult = JSON.parse(storedAuth);
-              console.log("Found existing auth");
-              const userInfo = await fetchUserInfo(oauthResult.access_token);
-              if (mounted) {
-                setIsAuthenticated(true);
-                setUser({
-                  username: userInfo.name,
-                  token: oauthResult.access_token,
-                });
-              }
-            } catch (err) {
-              console.log("Invalid stored auth data, clearing...", err);
-              localStorage.removeItem(HF_CONFIG.STORAGE_KEY);
-              if (mounted) {
-                setIsAuthenticated(false);
-                setUser(null);
-              }
-            }
-          }
-        } else {
-          console.log("Processing OAuth redirect");
-          const token = oauthResult.accessToken;
-          const userInfo = await fetchUserInfo(token);
-
-          const authData = {
-            access_token: token,
-            username: userInfo.name,
-          };
-
-          localStorage.setItem(HF_CONFIG.STORAGE_KEY, JSON.stringify(authData));
-
-          if (mounted) {
-            setIsAuthenticated(true);
-            setUser({
-              username: userInfo.name,
-              token: token,
-            });
-          }
-
-          // Rediriger vers la page d'origine
-          const returnTo = localStorage.getItem("auth_return_to");
-          if (returnTo) {
-            navigate(returnTo);
-            localStorage.removeItem("auth_return_to");
-          }
-        }
-      } catch (err) {
-        console.error("Auth initialization error:", err);
-        if (mounted) {
-          setError(err.message);
-          setIsAuthenticated(false);
-          setUser(null);
-        }
-      } finally {
-        if (mounted) {
-          setLoading(false);
-        }
-        console.groupEnd();
-      }
-    };
-
-    initAuth();
-
-    return () => {
-      mounted = false;
-    };
-  }, [navigate, location.pathname]);
-
-  const login = async () => {
-    try {
-      console.group("Login Process");
-      setLoading(true);
-
-      // Sauvegarder la route actuelle pour la redirection post-auth
-      const currentRoute = window.location.hash.replace("#", "") || "/";
-      localStorage.setItem("auth_return_to", currentRoute);
-
-      // Déterminer l'URL de redirection en fonction de l'environnement
-      const redirectUrl =
-        window.location.hostname === "localhost" ||
-        window.location.hostname === "127.0.0.1"
-          ? HF_CONFIG.DEV_URL
-          : HF_CONFIG.PROD_URL;
-
-      console.log("Using redirect URL:", redirectUrl);
-
-      // Générer l'URL de login et rediriger
-      const loginUrl = await oauthLoginUrl({
-        clientId: HF_CONFIG.CLIENT_ID,
-        redirectUrl,
-        scope: HF_CONFIG.SCOPE,
-      });
-
-      window.location.href = loginUrl + "&prompt=consent";
-
-      console.groupEnd();
-    } catch (err) {
-      console.error("Login error:", err);
-      setError(err.message);
-      setLoading(false);
-      console.groupEnd();
-    }
-  };
-
-  const logout = () => {
-    console.group("Logout Process");
-    setLoading(true);
-    try {
-      console.log("Clearing auth data...");
-      localStorage.removeItem(HF_CONFIG.STORAGE_KEY);
-      localStorage.removeItem("auth_return_to");
-      setIsAuthenticated(false);
-      setUser(null);
-      console.log("Logged out successfully");
-    } catch (err) {
-      console.error("Logout error:", err);
-      setError(err.message);
-    } finally {
-      setLoading(false);
-      console.groupEnd();
-    }
-  };
-
-  return {
-    isAuthenticated,
-    user,
-    loading,
-    error,
-    login,
-    logout,
-  };
-}

frontend/src/pages/AddModelPage/AddModelPage.js

@@ -1,51 +0,0 @@
-import React from "react";
-import { Box, CircularProgress } from "@mui/material";
-import { useAuth } from "../../hooks/useAuth";
-import PageHeader from "../../components/shared/PageHeader";
-import EvaluationQueues from "./components/EvaluationQueues/EvaluationQueues";
-import ModelSubmissionForm from "./components/ModelSubmissionForm/ModelSubmissionForm";
-import SubmissionGuide from "./components/SubmissionGuide/SubmissionGuide";
-import SubmissionLimitChecker from "./components/SubmissionLimitChecker/SubmissionLimitChecker";
-
-function AddModelPage() {
-  const { isAuthenticated, loading, user } = useAuth();
-
-  if (loading) {
-    return (
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "100vh",
-        }}
-      >
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  return (
-    <Box sx={{ width: "100%", maxWidth: 1200, margin: "0 auto", py: 4, px: 0 }}>
-      <PageHeader
-        title="Submit a Model for Evaluation"
-        subtitle={
-          <>
-            Add <span style={{ fontWeight: 600 }}>your</span> model to the Open
-            LLM Leaderboard
-          </>
-        }
-      />
-
-      <SubmissionGuide />
-
-      <SubmissionLimitChecker user={user}>
-        <ModelSubmissionForm user={user} isAuthenticated={isAuthenticated} />
-      </SubmissionLimitChecker>
-
-      <EvaluationQueues defaultExpanded={false} />
-    </Box>
-  );
-}
-
-export default AddModelPage;

frontend/src/pages/AddModelPage/components/EvaluationQueues/EvaluationQueues.js

@@ -1,787 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import {
-  Box,
-  Typography,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Chip,
-  Link,
-  CircularProgress,
-  Alert,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  Stack,
-  Tooltip,
-  useTheme,
-  useMediaQuery,
-} from "@mui/material";
-import AccessTimeIcon from "@mui/icons-material/AccessTime";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import PendingIcon from "@mui/icons-material/Pending";
-import AutorenewIcon from "@mui/icons-material/Autorenew";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import { useVirtualizer } from "@tanstack/react-virtual";
-
-// Function to format wait time
-const formatWaitTime = (waitTimeStr) => {
-  const seconds = parseFloat(waitTimeStr.replace("s", ""));
-
-  if (seconds < 60) {
-    return "just now";
-  }
-
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) {
-    return `${minutes}m ago`;
-  }
-
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) {
-    return `${hours}h ago`;
-  }
-
-  const days = Math.floor(hours / 24);
-  return `${days}d ago`;
-};
-
-// Column definitions with their properties
-const columns = [
-  {
-    id: "model",
-    label: "Model",
-    width: "35%",
-    align: "left",
-  },
-  {
-    id: "submitter",
-    label: "Submitted by",
-    width: "15%",
-    align: "left",
-  },
-  {
-    id: "wait_time",
-    label: "Submitted",
-    width: "12%",
-    align: "center",
-  },
-  {
-    id: "precision",
-    label: "Precision",
-    width: "13%",
-    align: "center",
-  },
-  {
-    id: "revision",
-    label: "Revision",
-    width: "12%",
-    align: "center",
-  },
-  {
-    id: "status",
-    label: "Status",
-    width: "13%",
-    align: "center",
-  },
-];
-
-const StatusChip = ({ status }) => {
-  const statusConfig = {
-    finished: {
-      icon: <CheckCircleIcon />,
-      label: "Completed",
-      color: "success",
-    },
-    evaluating: {
-      icon: <AutorenewIcon />,
-      label: "Evaluating",
-      color: "warning",
-    },
-    pending: { icon: <PendingIcon />, label: "Pending", color: "info" },
-  };
-
-  const config = statusConfig[status] || statusConfig.pending;
-
-  return (
-    <Chip
-      icon={config.icon}
-      label={config.label}
-      color={config.color}
-      size="small"
-      variant="outlined"
-    />
-  );
-};
-
-const ModelTable = ({ models, emptyMessage, status }) => {
-  const parentRef = useRef(null);
-  const rowVirtualizer = useVirtualizer({
-    count: models.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 53,
-    overscan: 5,
-  });
-
-  if (models.length === 0) {
-    return (
-      <Typography variant="body2" color="text.secondary" sx={{ p: 2 }}>
-        {emptyMessage}
-      </Typography>
-    );
-  }
-
-  return (
-    <TableContainer
-      ref={parentRef}
-      sx={{
-        maxHeight: 400,
-        "&::-webkit-scrollbar": {
-          width: 8,
-          height: 8,
-        },
-        "&::-webkit-scrollbar-track": {
-          backgroundColor: "action.hover",
-          borderRadius: 4,
-        },
-        "&::-webkit-scrollbar-thumb": {
-          backgroundColor: "action.selected",
-          borderRadius: 4,
-          "&:hover": {
-            backgroundColor: "action.focus",
-          },
-        },
-      }}
-    >
-      <Table size="small" stickyHeader sx={{ tableLayout: "fixed" }}>
-        <colgroup>
-          {columns.map((column) => (
-            <col key={column.id} style={{ width: column.width }} />
-          ))}
-        </colgroup>
-        <TableHead>
-          <TableRow>
-            {columns.map((column, index) => (
-              <TableCell
-                key={column.id}
-                align={column.align}
-                sx={{
-                  backgroundColor: "background.paper",
-                  fontWeight: 600,
-                  borderBottom: "2px solid",
-                  borderColor: "divider",
-                  borderRight:
-                    index < columns.length - 1 ? "1px solid" : "none",
-                  borderRightColor: "divider",
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  padding: "12px 16px",
-                }}
-              >
-                {column.label}
-              </TableCell>
-            ))}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          <TableRow>
-            <TableCell
-              style={{
-                height: `${rowVirtualizer.getTotalSize()}px`,
-                padding: 0,
-                position: "relative",
-                width: "100%",
-                height: `${rowVirtualizer.getTotalSize()}px`,
-              }}
-              colSpan={columns.length}
-            >
-              <>
-                {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-                  const model = models[virtualRow.index];
-                  const waitTime = formatWaitTime(model.wait_time);
-
-                  return (
-                    <TableRow
-                      key={virtualRow.index}
-                      style={{
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        width: "100%",
-                        height: `${virtualRow.size}px`,
-                        transform: `translateY(${virtualRow.start}px)`,
-                        backgroundColor: "background.paper",
-                        display: "flex",
-                      }}
-                      hover
-                    >
-                      <TableCell
-                        sx={{
-                          flex: `0 0 ${columns[0].width}`,
-                          padding: "12px 16px",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap",
-                          borderRight: "1px solid",
-                          borderRightColor: "divider",
-                          display: "flex",
-                          alignItems: "center",
-                        }}
-                      >
-                        <Link
-                          href={`https://huggingface.co/${model.name}`}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          sx={{
-                            textDecoration: "none",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 0.5,
-                            "& .MuiSvgIcon-root": {
-                              fontSize: "1rem",
-                              opacity: 0.6,
-                            },
-                          }}
-                        >
-                          {model.name}
-                          <OpenInNewIcon />
-                        </Link>
-                      </TableCell>
-                      <TableCell
-                        sx={{
-                          flex: `0 0 ${columns[1].width}`,
-                          padding: "12px 16px",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap",
-                          borderRight: "1px solid",
-                          borderRightColor: "divider",
-                          display: "flex",
-                          alignItems: "center",
-                        }}
-                      >
-                        {model.submitter}
-                      </TableCell>
-                      <TableCell
-                        align={columns[2].align}
-                        sx={{
-                          flex: `0 0 ${columns[2].width}`,
-                          padding: "12px 16px",
-                          borderRight: "1px solid",
-                          borderRightColor: "divider",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                        }}
-                      >
-                        <Tooltip title={model.wait_time} arrow placement="top">
-                          <Typography
-                            variant="body2"
-                            color="text.secondary"
-                            sx={{
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              gap: 0.5,
-                            }}
-                          >
-                            <AccessTimeIcon sx={{ fontSize: "0.9rem" }} />
-                            {waitTime}
-                          </Typography>
-                        </Tooltip>
-                      </TableCell>
-                      <TableCell
-                        align={columns[3].align}
-                        sx={{
-                          flex: `0 0 ${columns[3].width}`,
-                          padding: "12px 16px",
-                          borderRight: "1px solid",
-                          borderRightColor: "divider",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                        }}
-                      >
-                        <Typography variant="body2" color="text.secondary">
-                          {model.precision}
-                        </Typography>
-                      </TableCell>
-                      <TableCell
-                        align={columns[4].align}
-                        sx={{
-                          flex: `0 0 ${columns[4].width}`,
-                          padding: "12px 16px",
-                          fontFamily: "monospace",
-                          borderRight: "1px solid",
-                          borderRightColor: "divider",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                        }}
-                      >
-                        {model.revision.substring(0, 7)}
-                      </TableCell>
-                      <TableCell
-                        align={columns[5].align}
-                        sx={{
-                          flex: `0 0 ${columns[5].width}`,
-                          padding: "12px 16px",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                        }}
-                      >
-                        <StatusChip status={status} />
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </>
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-};
-
-const QueueAccordion = ({
-  title,
-  models,
-  status,
-  emptyMessage,
-  expanded,
-  onChange,
-  loading,
-}) => {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-
-  return (
-    <Accordion
-      expanded={expanded}
-      onChange={onChange}
-      disabled={loading}
-      sx={{
-        "&:before": { display: "none" },
-        boxShadow: "none",
-        border: "none",
-      }}
-    >
-      <AccordionSummary
-        expandIcon={<ExpandMoreIcon />}
-        sx={{
-          px: { xs: 2, sm: 3 },
-          py: { xs: 1.5, sm: 2 },
-          alignItems: { xs: "flex-start", sm: "center" },
-          "& .MuiAccordionSummary-expandIconWrapper": {
-            marginTop: { xs: "4px", sm: 0 },
-          },
-        }}
-      >
-        <Stack
-          direction={{ xs: "column", sm: "row" }}
-          spacing={{ xs: 1, sm: 2 }}
-          alignItems={{ xs: "flex-start", sm: "center" }}
-          sx={{ width: "100%" }}
-        >
-          <Typography
-            sx={{
-              fontSize: { xs: "0.95rem", sm: "1rem" },
-              fontWeight: 500,
-            }}
-          >
-            {title}
-          </Typography>
-          <Stack
-            direction={{ xs: "column", sm: "row" }}
-            spacing={1}
-            alignItems={{ xs: "stretch", sm: "center" }}
-            sx={{
-              ml: { xs: 0, sm: "auto" },
-              width: { xs: "100%", sm: "auto" },
-            }}
-          >
-            <Chip
-              label={models.length}
-              size={isMobile ? "small" : "medium"}
-              color={
-                status === "finished"
-                  ? "success"
-                  : status === "evaluating"
-                  ? "warning"
-                  : "info"
-              }
-              variant="outlined"
-              sx={(theme) => ({
-                borderWidth: 2,
-                fontWeight: 600,
-                fontSize: { xs: "0.75rem", sm: "0.875rem" },
-                height: { xs: "24px", sm: "32px" },
-                width: { xs: "100%", sm: "auto" },
-                bgcolor:
-                  status === "finished"
-                    ? theme.palette.success[100]
-                    : status === "evaluating"
-                    ? theme.palette.warning[100]
-                    : theme.palette.info[100],
-                borderColor:
-                  status === "finished"
-                    ? theme.palette.success[400]
-                    : status === "evaluating"
-                    ? theme.palette.warning[400]
-                    : theme.palette.info[400],
-                color:
-                  status === "finished"
-                    ? theme.palette.success[700]
-                    : status === "evaluating"
-                    ? theme.palette.warning[700]
-                    : theme.palette.info[700],
-                "& .MuiChip-label": {
-                  px: { xs: 1, sm: 1.2 },
-                  width: "100%",
-                },
-                "&:hover": {
-                  bgcolor:
-                    status === "finished"
-                      ? theme.palette.success[200]
-                      : status === "evaluating"
-                      ? theme.palette.warning[200]
-                      : theme.palette.info[200],
-                },
-              })}
-            />
-            {loading && (
-              <CircularProgress
-                size={isMobile ? 14 : 16}
-                color="inherit"
-                sx={{ opacity: 0.5 }}
-              />
-            )}
-          </Stack>
-        </Stack>
-      </AccordionSummary>
-      <AccordionDetails sx={{ p: { xs: 1, sm: 2 } }}>
-        <Box
-          sx={{
-            border: "1px solid",
-            borderColor: "grey.200",
-            borderRadius: 1,
-            overflow: "hidden",
-          }}
-        >
-          <ModelTable
-            models={models}
-            emptyMessage={emptyMessage}
-            status={status}
-          />
-        </Box>
-      </AccordionDetails>
-    </Accordion>
-  );
-};
-
-const EvaluationQueues = ({ defaultExpanded = true }) => {
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const [expandedQueues, setExpandedQueues] = useState(new Set());
-  const [models, setModels] = useState({
-    pending: [],
-    evaluating: [],
-    finished: [],
-  });
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-
-  useEffect(() => {
-    const fetchModels = async () => {
-      try {
-        const response = await fetch("/api/models/status");
-        if (!response.ok) {
-          throw new Error("Failed to fetch models");
-        }
-        const data = await response.json();
-
-        // Sort models by submission date (most recent first)
-        const sortByDate = (models) => {
-          return [...models].sort((a, b) => {
-            const dateA = new Date(a.submission_time);
-            const dateB = new Date(b.submission_time);
-            return dateB - dateA;
-          });
-        };
-
-        setModels({
-          finished: sortByDate(data.finished),
-          evaluating: sortByDate(data.evaluating),
-          pending: sortByDate(data.pending),
-        });
-      } catch (err) {
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchModels();
-    const interval = setInterval(fetchModels, 30000);
-    return () => clearInterval(interval);
-  }, []);
-
-  const handleMainAccordionChange = (panel) => (event, isExpanded) => {
-    setExpanded(isExpanded ? panel : false);
-  };
-
-  const handleQueueAccordionChange = (queueName) => (event, isExpanded) => {
-    setExpandedQueues((prev) => {
-      const newSet = new Set(prev);
-      if (isExpanded) {
-        newSet.add(queueName);
-      } else {
-        newSet.delete(queueName);
-      }
-      return newSet;
-    });
-  };
-
-  if (error) {
-    return (
-      <Alert severity="error" sx={{ mb: 2 }}>
-        {error}
-      </Alert>
-    );
-  }
-
-  return (
-    <Accordion
-      expanded={expanded === "main"}
-      onChange={handleMainAccordionChange("main")}
-      disabled={loading}
-      elevation={0}
-      sx={{
-        mb: 3,
-        boxShadow: "none",
-        border: "1px solid",
-        borderColor: "divider",
-        borderRadius: "8px !important",
-        "&:before": {
-          display: "none",
-        },
-        "&.Mui-disabled": {
-          backgroundColor: "rgba(0, 0, 0, 0.03)",
-          opacity: 0.9,
-        },
-        "& .MuiAccordionSummary-root": {
-          minHeight: { xs: 56, sm: 64 },
-          bgcolor: "background.paper",
-          borderRadius: "8px",
-          alignItems: { xs: "flex-start", sm: "center" },
-          "&.Mui-expanded": {
-            minHeight: { xs: 56, sm: 64 },
-            borderRadius: "8px 8px 0 0",
-          },
-        },
-        "& .MuiAccordionSummary-content": {
-          m: 0,
-          "&.Mui-expanded": {
-            m: 0,
-          },
-        },
-      }}
-    >
-      <AccordionSummary
-        expandIcon={<ExpandMoreIcon />}
-        sx={{
-          px: { xs: 2, sm: 3 },
-          "& .MuiAccordionSummary-expandIconWrapper": {
-            color: "text.secondary",
-            transform: "rotate(0deg)",
-            transition: "transform 150ms",
-            marginTop: { xs: "4px", sm: 0 },
-            "&.Mui-expanded": {
-              transform: "rotate(180deg)",
-            },
-          },
-        }}
-      >
-        <Stack
-          direction={{ xs: "column", sm: "row" }}
-          spacing={{ xs: 1, sm: 2 }}
-          alignItems={{ xs: "flex-start", sm: "center" }}
-          sx={{ width: "100%" }}
-        >
-          <Typography
-            variant="h6"
-            sx={{
-              fontWeight: 600,
-              color: "text.primary",
-              letterSpacing: "-0.01em",
-              fontSize: { xs: "1.1rem", sm: "1.25rem" },
-            }}
-          >
-            Evaluation Status
-          </Typography>
-          {!loading && (
-            <Stack
-              direction={{ xs: "column", sm: "row" }}
-              spacing={1}
-              sx={{
-                transition: "opacity 0.2s",
-                ".Mui-expanded &": {
-                  opacity: 0,
-                  height: 0,
-                  m: 0,
-                  overflow: "hidden",
-                },
-                width: { xs: "100%", sm: "auto" },
-                alignItems: { xs: "stretch", sm: "center" },
-              }}
-            >
-              <Chip
-                label={`${models.pending.length} In Queue`}
-                size={isMobile ? "small" : "medium"}
-                color="info"
-                variant="outlined"
-                sx={{
-                  borderWidth: 2,
-                  fontWeight: 600,
-                  fontSize: { xs: "0.75rem", sm: "0.875rem" },
-                  height: { xs: "24px", sm: "32px" },
-                  bgcolor: "info.100",
-                  borderColor: "info.400",
-                  color: "info.700",
-                  width: { xs: "100%", sm: "auto" },
-                  "& .MuiChip-label": {
-                    px: { xs: 1, sm: 1.2 },
-                    width: "100%",
-                    display: "flex",
-                    justifyContent: "center",
-                  },
-                  "&:hover": {
-                    bgcolor: "info.200",
-                  },
-                }}
-              />
-              <Chip
-                label={`${models.evaluating.length} Evaluating`}
-                size={isMobile ? "small" : "medium"}
-                color="warning"
-                variant="outlined"
-                sx={{
-                  borderWidth: 2,
-                  fontWeight: 600,
-                  fontSize: { xs: "0.75rem", sm: "0.875rem" },
-                  height: { xs: "24px", sm: "32px" },
-                  bgcolor: "warning.100",
-                  borderColor: "warning.400",
-                  color: "warning.700",
-                  width: { xs: "100%", sm: "auto" },
-                  "& .MuiChip-label": {
-                    px: { xs: 1, sm: 1.2 },
-                    width: "100%",
-                    display: "flex",
-                    justifyContent: "center",
-                  },
-                  "&:hover": {
-                    bgcolor: "warning.200",
-                  },
-                }}
-              />
-              <Chip
-                label={`${models.finished.length} Evaluated`}
-                size={isMobile ? "small" : "medium"}
-                color="success"
-                variant="outlined"
-                sx={{
-                  borderWidth: 2,
-                  fontWeight: 600,
-                  fontSize: { xs: "0.75rem", sm: "0.875rem" },
-                  height: { xs: "24px", sm: "32px" },
-                  bgcolor: "success.100",
-                  borderColor: "success.400",
-                  color: "success.700",
-                  width: { xs: "100%", sm: "auto" },
-                  "& .MuiChip-label": {
-                    px: { xs: 1, sm: 1.2 },
-                    width: "100%",
-                    display: "flex",
-                    justifyContent: "center",
-                  },
-                  "&:hover": {
-                    bgcolor: "success.200",
-                  },
-                }}
-              />
-            </Stack>
-          )}
-          {loading && (
-            <CircularProgress
-              size={isMobile ? 18 : 20}
-              sx={{
-                color: "primary.main",
-              }}
-            />
-          )}
-        </Stack>
-      </AccordionSummary>
-      <AccordionDetails sx={{ p: 0 }}>
-        {loading ? (
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              minHeight: 200,
-              width: "100%",
-            }}
-          >
-            <CircularProgress />
-          </Box>
-        ) : (
-          <>
-            <QueueAccordion
-              title="Models in queue"
-              models={models.pending}
-              status="pending"
-              emptyMessage="No models in queue"
-              expanded={expandedQueues.has("pending")}
-              onChange={handleQueueAccordionChange("pending")}
-              loading={loading}
-            />
-
-            <QueueAccordion
-              title="Models being evaluated"
-              models={models.evaluating}
-              status="evaluating"
-              emptyMessage="No models currently being evaluated"
-              expanded={expandedQueues.has("evaluating")}
-              onChange={handleQueueAccordionChange("evaluating")}
-              loading={loading}
-            />
-
-            <QueueAccordion
-              title="Recently evaluated models"
-              models={models.finished}
-              status="finished"
-              emptyMessage="No models have been evaluated recently"
-              expanded={expandedQueues.has("finished")}
-              onChange={handleQueueAccordionChange("finished")}
-              loading={loading}
-            />
-          </>
-        )}
-      </AccordionDetails>
-    </Accordion>
-  );
-};
-
-export default EvaluationQueues;

frontend/src/pages/AddModelPage/components/ModelSubmissionForm/ModelSubmissionForm.js

@@ -1,599 +0,0 @@
-import React, { useState } from "react";
-import {
-  Box,
-  Paper,
-  Typography,
-  TextField,
-  Button,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  FormControlLabel,
-  Switch,
-  Stack,
-  Grid,
-  CircularProgress,
-  Alert,
-} from "@mui/material";
-import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import { alpha } from "@mui/material/styles";
-import InfoIconWithTooltip from "../../../../components/shared/InfoIconWithTooltip";
-import { MODEL_TYPES } from "../../../../pages/LeaderboardPage/components/Leaderboard/constants/modelTypes";
-import { SUBMISSION_PRECISIONS } from "../../../../pages/LeaderboardPage/components/Leaderboard/constants/defaults";
-import AuthContainer from "../../../../components/shared/AuthContainer";
-
-const WEIGHT_TYPES = [
-  { value: "Original", label: "Original" },
-  { value: "Delta", label: "Delta" },
-  { value: "Adapter", label: "Adapter" },
-];
-
-const HELP_TEXTS = {
-  modelName: (
-    <Box sx={{ p: 1 }}>
-      <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.5 }}>
-        Model Name on Hugging Face Hub
-      </Typography>
-      <Typography variant="body2" sx={{ opacity: 0.9, lineHeight: 1.4 }}>
-        Your model must be public and loadable with AutoClasses without
-        trust_remote_code. The model should be in Safetensors format for better
-        safety and loading performance. Example: mistralai/Mistral-7B-v0.1
-      </Typography>
-    </Box>
-  ),
-  revision: (
-    <Box sx={{ p: 1 }}>
-      <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.5 }}>
-        Model Revision
-      </Typography>
-      <Typography variant="body2" sx={{ opacity: 0.9, lineHeight: 1.4 }}>
-        Git branch, tag or commit hash. The evaluation will be strictly tied to
-        this specific commit to ensure consistency. Make sure this version is
-        stable and contains all necessary files.
-      </Typography>
-    </Box>
-  ),
-  modelType: (
-    <Box sx={{ p: 1 }}>
-      <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.5 }}>
-        Model Category
-      </Typography>
-      <Typography variant="body2" sx={{ opacity: 0.9, lineHeight: 1.4 }}>
-        🟢 Pretrained: Base models trained on text using masked modeling 🟩
-        Continuously Pretrained: Extended training on additional corpus 🔶
-        Fine-tuned: Domain-specific optimization 💬 Chat: Models using RLHF,
-        DPO, or IFT for conversation 🤝 Merge: Combined weights without
-        additional training 🌸 Multimodal: Handles multiple input types
-      </Typography>
-    </Box>
-  ),
-  baseModel: (
-    <Box sx={{ p: 1 }}>
-      <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.5 }}>
-        Base Model Reference
-      </Typography>
-      <Typography variant="body2" sx={{ opacity: 0.9, lineHeight: 1.4 }}>
-        Required for delta weights or adapters. This information is used to
-        identify the original model and calculate the total parameter count by
-        combining base model and adapter/delta parameters.
-      </Typography>
-    </Box>
-  ),
-  precision: (
-    <Box sx={{ p: 1 }}>
-      <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.5 }}>
-        Model Precision
-      </Typography>
-      <Typography variant="body2" sx={{ opacity: 0.9, lineHeight: 1.4 }}>
-        Size limits vary by precision: • FP16/BF16: up to 100B parameters •
-        8-bit: up to 280B parameters (2x) • 4-bit: up to 560B parameters (4x)
-        Choose carefully as incorrect precision can cause evaluation errors.
-      </Typography>
-    </Box>
-  ),
-  weightsType: (
-    <Box sx={{ p: 1 }}>
-      <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.5 }}>
-        Weights Format
-      </Typography>
-      <Typography variant="body2" sx={{ opacity: 0.9, lineHeight: 1.4 }}>
-        Original: Complete model weights in safetensors format Delta: Weight
-        differences from base model (requires base model for size calculation)
-        Adapter: Lightweight fine-tuning layers (requires base model for size
-        calculation)
-      </Typography>
-    </Box>
-  ),
-  chatTemplate: (
-    <Box sx={{ p: 1 }}>
-      <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.5 }}>
-        Chat Template Support
-      </Typography>
-      <Typography variant="body2" sx={{ opacity: 0.9, lineHeight: 1.4 }}>
-        Activates automatically for chat models. It uses the standardized
-        Hugging Face chat template for consistent prompt formatting during
-        evaluation. Required for models using RLHF, DPO, or instruction
-        fine-tuning.
-      </Typography>
-    </Box>
-  ),
-};
-
-// Convert MODEL_TYPES to format expected by Select component
-const modelTypeOptions = Object.entries(MODEL_TYPES).map(
-  ([value, { icon, label }]) => ({
-    value,
-    label: `${icon} ${label}`,
-  })
-);
-
-function ModelSubmissionForm({ user, isAuthenticated }) {
-  const [formData, setFormData] = useState({
-    modelName: "",
-    revision: "main",
-    modelType: "fine-tuned",
-    isChatModel: false,
-    useChatTemplate: false,
-    precision: "float16",
-    weightsType: "Original",
-    baseModel: "",
-  });
-  const [error, setError] = useState(null);
-  const [submitting, setSubmitting] = useState(false);
-  const [success, setSuccess] = useState(false);
-  const [submittedData, setSubmittedData] = useState(null);
-
-  const handleChange = (event) => {
-    const { name, value, checked } = event.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: event.target.type === "checkbox" ? checked : value,
-    }));
-  };
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError(null);
-    setSubmitting(true);
-
-    try {
-      const response = await fetch("/api/models/submit", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          model_id: formData.modelName,
-          revision: formData.revision,
-          model_type: formData.modelType,
-          precision: formData.precision,
-          weight_type: formData.weightsType,
-          base_model: formData.baseModel,
-          use_chat_template: formData.useChatTemplate,
-          user_id: user.username,
-        }),
-      });
-
-      if (!response.ok) {
-        const error = await response.json();
-        throw new Error(error.detail || "Failed to submit model");
-      }
-
-      setSubmittedData(formData);
-      setSuccess(true);
-    } catch (error) {
-      setError(error.message);
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  if (success && submittedData) {
-    return (
-      <Paper
-        variant="outlined"
-        sx={(theme) => ({
-          p: 6,
-          mb: 3,
-          bgcolor: alpha(theme.palette.success.main, 0.05),
-          borderColor: alpha(theme.palette.success.main, 0.2),
-        })}
-      >
-        <Stack spacing={3}>
-          <Stack direction="row" spacing={2} alignItems="center">
-            <CheckCircleOutlineIcon color="success" sx={{ fontSize: 28 }} />
-            <Typography
-              variant="h5"
-              sx={{ fontWeight: 600, color: "success.800" }}
-            >
-              Model submitted successfully!
-            </Typography>
-          </Stack>
-
-          <Typography variant="body1">
-            Your model <strong>{submittedData.modelName}</strong> has been added
-            to the evaluation queue with the following parameters:
-          </Typography>
-
-          <Paper
-            variant="outlined"
-            sx={{
-              p: 2,
-              borderColor: "divider",
-            }}
-          >
-            <Stack spacing={1.5}>
-              <Stack direction="row" spacing={2}>
-                <Typography
-                  variant="body2"
-                  color="text.secondary"
-                  sx={{ width: 120 }}
-                >
-                  Model:
-                </Typography>
-                <Typography variant="body2" sx={{ fontFamily: "monospace" }}>
-                  {submittedData.modelName}
-                </Typography>
-              </Stack>
-              <Stack direction="row" spacing={2}>
-                <Typography
-                  variant="body2"
-                  color="text.secondary"
-                  sx={{ width: 120 }}
-                >
-                  Type:
-                </Typography>
-                <Typography variant="body2">
-                  {submittedData.modelType}
-                </Typography>
-              </Stack>
-              <Stack direction="row" spacing={2}>
-                <Typography
-                  variant="body2"
-                  color="text.secondary"
-                  sx={{ width: 120 }}
-                >
-                  Revision:
-                </Typography>
-                <Typography variant="body2" sx={{ fontFamily: "monospace" }}>
-                  {submittedData.revision}
-                </Typography>
-              </Stack>
-              <Stack direction="row" spacing={2}>
-                <Typography
-                  variant="body2"
-                  color="text.secondary"
-                  sx={{ width: 120 }}
-                >
-                  Precision:
-                </Typography>
-                <Typography variant="body2">
-                  {submittedData.precision}
-                </Typography>
-              </Stack>
-              <Stack direction="row" spacing={2}>
-                <Typography
-                  variant="body2"
-                  color="text.secondary"
-                  sx={{ width: 120 }}
-                >
-                  Weight type:
-                </Typography>
-                <Typography variant="body2">
-                  {submittedData.weightsType}
-                </Typography>
-              </Stack>
-              {submittedData.baseModel && (
-                <Stack direction="row" spacing={2}>
-                  <Typography
-                    variant="body2"
-                    color="text.secondary"
-                    sx={{ width: 120 }}
-                  >
-                    Base model:
-                  </Typography>
-                  <Typography variant="body2">
-                    {submittedData.baseModel}
-                  </Typography>
-                </Stack>
-              )}
-              <Stack direction="row" spacing={2}>
-                <Typography
-                  variant="body2"
-                  color="text.secondary"
-                  sx={{ width: 120 }}
-                >
-                  Chat template:
-                </Typography>
-                <Typography variant="body2">
-                  {submittedData.useChatTemplate ? "Yes" : "No"}
-                </Typography>
-              </Stack>
-            </Stack>
-          </Paper>
-
-          <Typography variant="body2" color="text.secondary">
-            An automatic upvote has been added to your model to help with
-            prioritization.
-          </Typography>
-
-          <Stack direction="row" spacing={2}>
-            <Button
-              variant="outlined"
-              size="large"
-              onClick={() => {
-                setSuccess(false);
-                setSubmittedData(null);
-                setFormData({
-                  modelName: "",
-                  revision: "main",
-                  modelType: "fine-tuned",
-                  isChatModel: false,
-                  useChatTemplate: false,
-                  precision: "float16",
-                  weightsType: "Original",
-                  baseModel: "",
-                });
-              }}
-            >
-              Submit another model
-            </Button>
-          </Stack>
-        </Stack>
-      </Paper>
-    );
-  }
-
-  return (
-    <>
-      {error && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {error}
-        </Alert>
-      )}
-      <AuthContainer actionText="submit a model" />
-      {isAuthenticated && (
-        <Paper
-          elevation={0}
-          component="form"
-          onSubmit={handleSubmit}
-          sx={{
-            p: 0,
-            border: "1px solid",
-            borderColor: "grey.300",
-            mb: 3,
-            overflow: "hidden",
-          }}
-        >
-          {/* Header */}
-          <Box
-            sx={{
-              px: 3,
-              py: 2,
-              borderBottom: "1px solid",
-              borderColor: (theme) =>
-                theme.palette.mode === "dark"
-                  ? alpha(theme.palette.divider, 0.1)
-                  : "grey.200",
-              bgcolor: (theme) =>
-                theme.palette.mode === "dark"
-                  ? alpha(theme.palette.background.paper, 0.5)
-                  : "grey.50",
-            }}
-          >
-            <Typography
-              variant="h6"
-              sx={{ fontWeight: 600, color: "text.primary" }}
-            >
-              Model Submission Form
-            </Typography>
-          </Box>
-
-          {/* Form Content */}
-          <Box sx={{ p: 3 }}>
-            <Grid container spacing={3}>
-              {/* Model Information */}
-              <Grid item xs={12}>
-                <Stack direction="row" spacing={1} alignItems="center">
-                  <Typography variant="h6">Model Information</Typography>
-                  <InfoIconWithTooltip tooltip={HELP_TEXTS.modelName} />
-                </Stack>
-              </Grid>
-
-              <Grid item xs={12} sm={8}>
-                <TextField
-                  required
-                  fullWidth
-                  name="modelName"
-                  label="Model Name"
-                  placeholder="organization/model-name"
-                  value={formData.modelName}
-                  onChange={handleChange}
-                  helperText="Example: meta-llama/Llama-3.2-1B"
-                  InputProps={{
-                    endAdornment: (
-                      <InfoIconWithTooltip tooltip={HELP_TEXTS.modelName} />
-                    ),
-                  }}
-                />
-              </Grid>
-
-              <Grid item xs={12} sm={4}>
-                <TextField
-                  fullWidth
-                  name="revision"
-                  label="Revision commit"
-                  value={formData.revision}
-                  onChange={handleChange}
-                  helperText="Default: main"
-                  InputProps={{
-                    endAdornment: (
-                      <InfoIconWithTooltip tooltip={HELP_TEXTS.revision} />
-                    ),
-                  }}
-                />
-              </Grid>
-
-              {/* Model Configuration */}
-              <Grid item xs={12}>
-                <Stack direction="row" spacing={1} alignItems="center">
-                  <Typography variant="h6">Model Configuration</Typography>
-                </Stack>
-              </Grid>
-
-              <Grid item xs={12} sm={6}>
-                <FormControl fullWidth>
-                  <InputLabel>Model Type</InputLabel>
-                  <Select
-                    name="modelType"
-                    value={formData.modelType}
-                    onChange={handleChange}
-                    label="Model Type"
-                    endAdornment={
-                      <InfoIconWithTooltip
-                        tooltip={HELP_TEXTS.modelType}
-                        sx={{ mr: 2 }}
-                      />
-                    }
-                  >
-                    {modelTypeOptions.map((type) => (
-                      <MenuItem key={type.value} value={type.value}>
-                        {type.label}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              </Grid>
-
-              <Grid item xs={12} sm={6}>
-                <Stack
-                  direction="row"
-                  spacing={2}
-                  alignItems="center"
-                  sx={{ height: "100%" }}
-                >
-                  <FormControlLabel
-                    control={
-                      <Switch
-                        name="useChatTemplate"
-                        checked={formData.useChatTemplate}
-                        onChange={handleChange}
-                      />
-                    }
-                    label="Use Chat Template"
-                  />
-                  <InfoIconWithTooltip tooltip={HELP_TEXTS.chatTemplate} />
-                </Stack>
-              </Grid>
-
-              <Grid item xs={12} sm={6}>
-                <FormControl fullWidth>
-                  <InputLabel>Precision</InputLabel>
-                  <Select
-                    name="precision"
-                    value={formData.precision}
-                    onChange={handleChange}
-                    label="Precision"
-                    endAdornment={
-                      <InfoIconWithTooltip
-                        tooltip={HELP_TEXTS.precision}
-                        sx={{ mr: 2 }}
-                      />
-                    }
-                  >
-                    {SUBMISSION_PRECISIONS.map((option) => (
-                      <MenuItem key={option.value} value={option.value}>
-                        {option.label}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              </Grid>
-
-              <Grid item xs={12} sm={6}>
-                <FormControl fullWidth>
-                  <InputLabel>Weights Type</InputLabel>
-                  <Select
-                    name="weightsType"
-                    value={formData.weightsType}
-                    onChange={handleChange}
-                    label="Weights Type"
-                    endAdornment={
-                      <InfoIconWithTooltip
-                        tooltip={HELP_TEXTS.weightsType}
-                        sx={{ mr: 2 }}
-                      />
-                    }
-                  >
-                    {WEIGHT_TYPES.map((type) => (
-                      <MenuItem key={type.value} value={type.value}>
-                        {type.label}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              </Grid>
-
-              {formData.weightsType !== "Original" && (
-                <Grid item xs={12}>
-                  <TextField
-                    fullWidth
-                    required={
-                      formData.weightsType === "Delta" ||
-                      formData.weightsType === "Adapter"
-                    }
-                    name="baseModel"
-                    label="Base Model"
-                    value={formData.baseModel}
-                    onChange={handleChange}
-                    InputProps={{
-                      endAdornment: (
-                        <InfoIconWithTooltip tooltip={HELP_TEXTS.baseModel} />
-                      ),
-                    }}
-                  />
-                </Grid>
-              )}
-
-              {/* Submit Button */}
-              <Grid item xs={12}>
-                <Box
-                  sx={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    mt: 2,
-                  }}
-                >
-                  <Typography variant="body2" color="text.secondary">
-                    All fields marked with * are required
-                  </Typography>
-                  <Button
-                    type="submit"
-                    variant="contained"
-                    disabled={submitting}
-                    endIcon={submitting ? null : <RocketLaunchIcon />}
-                    sx={{
-                      minWidth: 120,
-                      position: "relative",
-                    }}
-                  >
-                    {submitting ? (
-                      <CircularProgress size={24} color="inherit" />
-                    ) : (
-                      "Submit"
-                    )}
-                  </Button>
-                </Box>
-              </Grid>
-            </Grid>
-          </Box>
-        </Paper>
-      )}
-    </>
-  );
-}
-
-export default ModelSubmissionForm;

frontend/src/pages/AddModelPage/components/SubmissionGuide/SubmissionGuide.js

@@ -1,274 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { Box, Paper, Typography, Button, Stack, Collapse } from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-
-const DocLink = ({ href, children }) => (
-  <Button
-    variant="text"
-    size="small"
-    href={href}
-    target="_blank"
-    sx={{
-      fontFamily: "monospace",
-      textTransform: "none",
-      color: "primary.main",
-      fontSize: "0.875rem",
-      p: 0,
-      minWidth: "auto",
-      justifyContent: "flex-start",
-      "&:hover": {
-        color: "primary.dark",
-        backgroundColor: "transparent",
-        textDecoration: "underline",
-      },
-    }}
-  >
-    {children} →
-  </Button>
-);
-
-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 TUTORIAL_STEPS = [
-  {
-    title: "Model Information",
-    content: (
-      <Stack spacing={2}>
-        <Typography variant="body2" color="text.secondary">
-          Your model should be <strong>public</strong> on the Hub and follow the{" "}
-          <strong>username/model-id</strong> format (e.g.
-          mistralai/Mistral-7B-v0.1). Specify the <strong>revision</strong>{" "}
-          (commit hash or branch) and <strong>model type</strong>.
-        </Typography>
-        <DocLink href="https://huggingface.co/docs/hub/models-uploading">
-          Model uploading guide
-        </DocLink>
-      </Stack>
-    ),
-  },
-  {
-    title: "Technical Details",
-    content: (
-      <Stack spacing={2}>
-        <Typography variant="body2" color="text.secondary">
-          Make sure your model can be <strong>loaded locally</strong> before
-          submitting:
-        </Typography>
-        <Box
-          sx={{
-            p: 2,
-            bgcolor: (theme) =>
-              theme.palette.mode === "dark" ? "grey.50" : "grey.900",
-            borderRadius: 1,
-            "& pre": {
-              m: 0,
-              p: 0,
-              fontFamily: "monospace",
-              fontSize: "0.875rem",
-              color: (theme) =>
-                theme.palette.mode === "dark" ? "grey.900" : "grey.50",
-            },
-          }}
-        >
-          <pre>
-            {`from transformers import AutoConfig, AutoModel, AutoTokenizer
-
-config = AutoConfig.from_pretrained("your-username/your-model", revision="main")
-model = AutoModel.from_pretrained("your-username/your-model", revision="main")
-tokenizer = AutoTokenizer.from_pretrained("your-username/your-model", revision="main")`}
-          </pre>
-        </Box>
-        <DocLink href="https://huggingface.co/docs/transformers/installation">
-          Transformers documentation
-        </DocLink>
-      </Stack>
-    ),
-  },
-  {
-    title: "License Requirements",
-    content: (
-      <Stack spacing={2}>
-        <Typography variant="body2" color="text.secondary">
-          A <strong>license tag</strong> is required.{" "}
-          <strong>Open licenses</strong> (Apache, MIT, etc) are strongly
-          recommended.
-        </Typography>
-        <DocLink href="https://huggingface.co/docs/hub/repositories-licenses">
-          About model licenses
-        </DocLink>
-      </Stack>
-    ),
-  },
-  {
-    title: "Model Card Requirements",
-    content: (
-      <Stack spacing={2}>
-        <Typography variant="body2" color="text.secondary">
-          Your model card must include: <strong>architecture</strong>,{" "}
-          <strong>training details</strong>,{" "}
-          <strong>dataset information</strong>, intended use, limitations, and{" "}
-          <strong>performance metrics</strong>.
-        </Typography>
-        <DocLink href="https://huggingface.co/docs/hub/model-cards">
-          Model cards guide
-        </DocLink>
-      </Stack>
-    ),
-  },
-  {
-    title: "Final Checklist",
-    content: (
-      <Stack spacing={2}>
-        <Typography variant="body2" color="text.secondary">
-          Ensure your model is <strong>public</strong>, uses{" "}
-          <strong>safetensors</strong> format, has a{" "}
-          <strong>license tag</strong>, and <strong>loads correctly</strong>{" "}
-          with the provided code.
-        </Typography>
-        <DocLink href="https://huggingface.co/docs/hub/repositories-getting-started">
-          Sharing best practices
-        </DocLink>
-      </Stack>
-    ),
-  },
-];
-
-function SubmissionGuide() {
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  // Initialize state directly with URL value
-  const initialExpanded = !new URLSearchParams(location.search).get("guide");
-  const [expanded, setExpanded] = useState(initialExpanded);
-
-  // Sync expanded state with URL changes after initial render
-  useEffect(() => {
-    const guideOpen = !new URLSearchParams(location.search).get("guide");
-    if (guideOpen !== expanded) {
-      setExpanded(guideOpen);
-    }
-  }, [location.search, expanded]);
-
-  const handleAccordionChange = () => {
-    const newExpanded = !expanded;
-    setExpanded(newExpanded);
-    const params = new URLSearchParams(location.search);
-    if (newExpanded) {
-      params.delete("guide");
-    } else {
-      params.set("guide", "closed");
-    }
-    navigate({ search: params.toString() }, { replace: true });
-  };
-
-  return (
-    <Paper
-      elevation={0}
-      sx={{
-        mb: 3,
-        borderRadius: "8px !important",
-        border: "1px solid",
-        borderColor: (theme) =>
-          theme.palette.mode === "dark" ? "grey.800" : "grey.200",
-        overflow: "hidden",
-      }}
-    >
-      <Box
-        onClick={handleAccordionChange}
-        sx={{
-          p: 2,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          cursor: "pointer",
-          bgcolor: (theme) =>
-            theme.palette.mode === "dark" ? "grey.900" : "grey.50",
-          borderBottom: "1px solid",
-          borderColor: (theme) =>
-            expanded
-              ? theme.palette.mode === "dark"
-                ? "grey.800"
-                : "grey.200"
-              : "transparent",
-        }}
-      >
-        <Typography
-          variant="h6"
-          sx={{ fontWeight: 600, color: "text.primary" }}
-        >
-          Submission Guide
-        </Typography>
-        <ExpandMoreIcon
-          sx={{
-            transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-            transition: "transform 0.3s",
-          }}
-        />
-      </Box>
-      <Collapse in={expanded} appear={false}>
-        <Box sx={{ py: 4 }}>
-          <Stack spacing={4}>
-            {TUTORIAL_STEPS.map((step, index) => (
-              <Box key={step.title}>
-                <Stack spacing={3}>
-                  <Stack
-                    direction="row"
-                    spacing={2}
-                    alignItems="center"
-                    sx={{ px: 4 }}
-                  >
-                    <StepNumber number={index + 1} />
-                    <Typography
-                      variant="subtitle1"
-                      sx={{
-                        fontWeight: 600,
-                        color: "text.primary",
-                        letterSpacing: "-0.01em",
-                      }}
-                    >
-                      {step.title}
-                    </Typography>
-                  </Stack>
-                  <Box sx={{ px: 4, pl: 7 }}>{step.content}</Box>
-                </Stack>
-                {index < TUTORIAL_STEPS.length - 1 && (
-                  <Box
-                    sx={{
-                      mt: 4,
-                      borderTop: "1px solid",
-                      borderColor: (theme) =>
-                        theme.palette.mode === "dark" ? "grey.800" : "grey.100",
-                    }}
-                  />
-                )}
-              </Box>
-            ))}
-          </Stack>
-        </Box>
-      </Collapse>
-    </Paper>
-  );
-}
-
-export default SubmissionGuide;

frontend/src/pages/AddModelPage/components/SubmissionLimitChecker/SubmissionLimitChecker.js

@@ -1,85 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Alert, Box, CircularProgress } from "@mui/material";
-
-const MAX_SUBMISSIONS_PER_WEEK = 10;
-
-function SubmissionLimitChecker({ user, children }) {
-  const [loading, setLoading] = useState(true);
-  const [reachedLimit, setReachedLimit] = useState(false);
-  const [error, setError] = useState(false);
-
-  useEffect(() => {
-    const checkSubmissionLimit = async () => {
-      if (!user?.username) {
-        setLoading(false);
-        return;
-      }
-
-      try {
-        const response = await fetch(
-          `/api/models/organization/${user.username}/submissions?days=7`
-        );
-        if (!response.ok) {
-          throw new Error("Failed to fetch submission data");
-        }
-
-        const submissions = await response.json();
-        console.log(`Recent submissions for ${user.username}:`, submissions);
-        setReachedLimit(submissions.length >= MAX_SUBMISSIONS_PER_WEEK);
-        setError(false);
-      } catch (error) {
-        console.error("Error checking submission limit:", error);
-        setError(true);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    checkSubmissionLimit();
-  }, [user?.username]);
-
-  if (loading) {
-    return (
-      <Box sx={{ display: "flex", justifyContent: "center", py: 4 }}>
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  if (error) {
-    return (
-      <Alert
-        severity="error"
-        sx={{
-          mb: 3,
-          "& .MuiAlert-message": {
-            fontSize: "1rem",
-          },
-        }}
-      >
-        Unable to verify submission limits. Please try again in a few minutes.
-      </Alert>
-    );
-  }
-
-  if (reachedLimit) {
-    return (
-      <Alert
-        severity="warning"
-        sx={{
-          mb: 3,
-          "& .MuiAlert-message": {
-            fontSize: "1rem",
-          },
-        }}
-      >
-        For fairness reasons, you cannot submit more than{" "}
-        {MAX_SUBMISSIONS_PER_WEEK} models per week. Please try again later.
-      </Alert>
-    );
-  }
-
-  return children;
-}
-
-export default SubmissionLimitChecker;

frontend/src/pages/VoteModelPage/VoteModelPage.js

@@ -1,896 +0,0 @@
-import React, { useState, useEffect } from "react";
-import {
-  Box,
-  Typography,
-  Paper,
-  Button,
-  Alert,
-  List,
-  ListItem,
-  CircularProgress,
-  Chip,
-  Divider,
-  IconButton,
-  Stack,
-  Link,
-  useTheme,
-  useMediaQuery,
-} from "@mui/material";
-import AccessTimeIcon from "@mui/icons-material/AccessTime";
-import PersonIcon from "@mui/icons-material/Person";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import HowToVoteIcon from "@mui/icons-material/HowToVote";
-import { useAuth } from "../../hooks/useAuth";
-import PageHeader from "../../components/shared/PageHeader";
-import AuthContainer from "../../components/shared/AuthContainer";
-import { alpha } from "@mui/material/styles";
-import CheckIcon from "@mui/icons-material/Check";
-
-const NoModelsToVote = () => (
-  <Box
-    sx={{
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      py: 8,
-      textAlign: "center",
-    }}
-  >
-    <HowToVoteIcon
-      sx={{
-        fontSize: 100,
-        color: "grey.300",
-        mb: 3,
-      }}
-    />
-    <Typography
-      variant="h4"
-      component="h2"
-      sx={{
-        fontWeight: "bold",
-        color: "grey.700",
-        mb: 2,
-      }}
-    >
-      No Models to Vote
-    </Typography>
-    <Typography
-      variant="body1"
-      sx={{
-        color: "grey.600",
-        maxWidth: 450,
-        mx: "auto",
-      }}
-    >
-      There are currently no models waiting for votes.
-      <br />
-      Check back later!
-    </Typography>
-  </Box>
-);
-
-const LOCAL_STORAGE_KEY = "pending_votes";
-
-function VoteModelPage() {
-  const { isAuthenticated, user, loading: authLoading } = useAuth();
-  const [pendingModels, setPendingModels] = useState([]);
-  const [loadingModels, setLoadingModels] = useState(true);
-  const [error, setError] = useState(null);
-  const [userVotes, setUserVotes] = useState(new Set());
-  const [loadingVotes, setLoadingVotes] = useState({});
-  const [localVotes, setLocalVotes] = useState(new Set());
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-
-  // Create a unique identifier for a model
-  const getModelUniqueId = (model) => {
-    return `${model.name}_${model.precision}_${model.revision}`;
-  };
-
-  const formatWaitTime = (submissionTime) => {
-    if (!submissionTime) return "N/A";
-
-    const now = new Date();
-    const submitted = new Date(submissionTime);
-    const diffInHours = Math.floor((now - submitted) / (1000 * 60 * 60));
-
-    // Less than 24 hours: show in hours
-    if (diffInHours < 24) {
-      return `${diffInHours}h`;
-    }
-
-    // Less than 7 days: show in days
-    const diffInDays = Math.floor(diffInHours / 24);
-    if (diffInDays < 7) {
-      return `${diffInDays}d`;
-    }
-
-    // More than 7 days: show in weeks
-    const diffInWeeks = Math.floor(diffInDays / 7);
-    return `${diffInWeeks}w`;
-  };
-
-  const getConfigVotes = (votesData, model) => {
-    // Créer l'identifiant unique du modèle
-    const modelUniqueId = getModelUniqueId(model);
-
-    // Compter les votes du serveur
-    let serverVotes = 0;
-    for (const [key, config] of Object.entries(votesData.votes_by_config)) {
-      if (
-        config.precision === model.precision &&
-        config.revision === model.revision
-      ) {
-        serverVotes = config.count;
-        break;
-      }
-    }
-
-    // Ajouter les votes en attente du localStorage
-    const pendingVote = localVotes.has(modelUniqueId) ? 1 : 0;
-
-    return serverVotes + pendingVote;
-  };
-
-  const sortModels = (models) => {
-    // Trier d'abord par nombre de votes décroissant, puis par soumission de l'utilisateur
-    return [...models].sort((a, b) => {
-      // Comparer d'abord le nombre de votes
-      if (b.votes !== a.votes) {
-        return b.votes - a.votes;
-      }
-
-      // Si l'utilisateur est connecté, mettre ses modèles en priorité
-      if (user) {
-        const aIsUserModel = a.submitter === user.username;
-        const bIsUserModel = b.submitter === user.username;
-
-        if (aIsUserModel && !bIsUserModel) return -1;
-        if (!aIsUserModel && bIsUserModel) return 1;
-      }
-
-      // Si égalité, trier par date de soumission (le plus récent d'abord)
-      return new Date(b.submission_time) - new Date(a.submission_time);
-    });
-  };
-
-  // Add this function to handle localStorage
-  const updateLocalVotes = (modelUniqueId, action = "add") => {
-    const storedVotes = JSON.parse(
-      localStorage.getItem(LOCAL_STORAGE_KEY) || "[]"
-    );
-    if (action === "add") {
-      if (!storedVotes.includes(modelUniqueId)) {
-        storedVotes.push(modelUniqueId);
-      }
-    } else {
-      const index = storedVotes.indexOf(modelUniqueId);
-      if (index > -1) {
-        storedVotes.splice(index, 1);
-      }
-    }
-    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(storedVotes));
-    setLocalVotes(new Set(storedVotes));
-  };
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        // Ne pas afficher le loading si on a déjà des données
-        if (pendingModels.length === 0) {
-          setLoadingModels(true);
-        }
-        setError(null);
-
-        // Charger d'abord les votes en attente du localStorage
-        const storedVotes = JSON.parse(
-          localStorage.getItem(LOCAL_STORAGE_KEY) || "[]"
-        );
-        const localVotesSet = new Set(storedVotes);
-
-        // Préparer toutes les requêtes en parallèle
-        const [pendingModelsResponse, userVotesResponse] = await Promise.all([
-          fetch("/api/models/pending"),
-          isAuthenticated && user
-            ? fetch(`/api/votes/user/${user.username}`)
-            : Promise.resolve(null),
-        ]);
-
-        if (!pendingModelsResponse.ok) {
-          throw new Error("Failed to fetch pending models");
-        }
-
-        const modelsData = await pendingModelsResponse.json();
-        const votedModels = new Set();
-
-        // Traiter les votes de l'utilisateur si connecté
-        if (userVotesResponse && userVotesResponse.ok) {
-          const votesData = await userVotesResponse.json();
-          const userVotes = Array.isArray(votesData) ? votesData : [];
-
-          userVotes.forEach((vote) => {
-            const uniqueId = `${vote.model}_${vote.precision || "unknown"}_${
-              vote.revision || "main"
-            }`;
-            votedModels.add(uniqueId);
-            if (localVotesSet.has(uniqueId)) {
-              localVotesSet.delete(uniqueId);
-              updateLocalVotes(uniqueId, "remove");
-            }
-          });
-        }
-
-        // Préparer et exécuter toutes les requêtes de votes en une seule fois
-        const modelVotesResponses = await Promise.all(
-          modelsData.map((model) => {
-            const [provider, modelName] = model.name.split("/");
-            return fetch(`/api/votes/model/${provider}/${modelName}`)
-              .then((response) =>
-                response.ok
-                  ? response.json()
-                  : { total_votes: 0, votes_by_config: {} }
-              )
-              .catch(() => ({ total_votes: 0, votes_by_config: {} }));
-          })
-        );
-
-        // Construire les modèles avec toutes les données
-        const modelsWithVotes = modelsData.map((model, index) => {
-          const votesData = modelVotesResponses[index];
-          const modelUniqueId = getModelUniqueId(model);
-          const isVotedByUser =
-            votedModels.has(modelUniqueId) || localVotesSet.has(modelUniqueId);
-
-          return {
-            ...model,
-            votes: getConfigVotes(
-              {
-                ...votesData,
-                votes_by_config: votesData.votes_by_config || {},
-              },
-              model
-            ),
-            votes_by_config: votesData.votes_by_config || {},
-            wait_time: formatWaitTime(model.submission_time),
-            hasVoted: isVotedByUser,
-          };
-        });
-
-        // Mettre à jour tous les états en une seule fois
-        const sortedModels = sortModels(modelsWithVotes);
-
-        // Batch updates
-        const updates = () => {
-          setPendingModels(sortedModels);
-          setUserVotes(votedModels);
-          setLocalVotes(localVotesSet);
-          setLoadingModels(false);
-        };
-
-        updates();
-      } catch (err) {
-        console.error("Error fetching data:", err);
-        setError(err.message);
-        setLoadingModels(false);
-      }
-    };
-
-    fetchData();
-  }, [isAuthenticated, user]);
-
-  // Modify the handleVote function
-  const handleVote = async (model) => {
-    if (!isAuthenticated) return;
-
-    const modelUniqueId = getModelUniqueId(model);
-
-    try {
-      setError(null);
-      setLoadingVotes((prev) => ({ ...prev, [modelUniqueId]: true }));
-
-      // Add to localStorage immediately
-      updateLocalVotes(modelUniqueId, "add");
-
-      // Encode model name for URL
-      const encodedModelName = encodeURIComponent(model.name);
-
-      const response = await fetch(
-        `/api/votes/${encodedModelName}?vote_type=up&user_id=${user.username}`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            precision: model.precision,
-            revision: model.revision,
-          }),
-        }
-      );
-
-      if (!response.ok) {
-        // If the request fails, remove from localStorage
-        updateLocalVotes(modelUniqueId, "remove");
-        throw new Error("Failed to submit vote");
-      }
-
-      // Refresh votes for this model with cache bypass
-      const [provider, modelName] = model.name.split("/");
-      const timestamp = Date.now();
-      const votesResponse = await fetch(
-        `/api/votes/model/${provider}/${modelName}?nocache=${timestamp}`
-      );
-
-      if (!votesResponse.ok) {
-        throw new Error("Failed to fetch updated votes");
-      }
-
-      const votesData = await votesResponse.json();
-      console.log(`Updated votes for ${model.name}:`, votesData); // Debug log
-
-      // Update model and resort the list
-      setPendingModels((models) => {
-        const updatedModels = models.map((m) =>
-          getModelUniqueId(m) === getModelUniqueId(model)
-            ? {
-                ...m,
-                votes: getConfigVotes(votesData, m),
-                votes_by_config: votesData.votes_by_config || {},
-                hasVoted: true,
-              }
-            : m
-        );
-        const sortedModels = sortModels(updatedModels);
-        console.log("Updated and sorted models:", sortedModels); // Debug log
-        return sortedModels;
-      });
-
-      // Update user votes with unique ID
-      setUserVotes((prev) => new Set([...prev, getModelUniqueId(model)]));
-    } catch (err) {
-      console.error("Error voting:", err);
-      setError(err.message);
-    } finally {
-      // Clear loading state for this model
-      setLoadingVotes((prev) => ({
-        ...prev,
-        [modelUniqueId]: false,
-      }));
-    }
-  };
-
-  // Modify the rendering logic to consider both server and local votes
-  // Inside the map function where you render models
-  const isVoted = (model) => {
-    const modelUniqueId = getModelUniqueId(model);
-    return userVotes.has(modelUniqueId) || localVotes.has(modelUniqueId);
-  };
-
-  if (authLoading || (loadingModels && pendingModels.length === 0)) {
-    return (
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "100vh",
-        }}
-      >
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  return (
-    <Box
-      sx={{
-        width: "100%",
-        maxWidth: 1200,
-        margin: "0 auto",
-        py: 4,
-        px: 0,
-      }}
-    >
-      <PageHeader
-        title="Vote for the Next Models"
-        subtitle={
-          <>
-            Help us <span style={{ fontWeight: 600 }}>prioritize</span> which
-            models to evaluate next
-          </>
-        }
-      />
-
-      {error && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {error}
-        </Alert>
-      )}
-
-      {/* Auth Status */}
-      {/* <Box sx={{ mb: 3 }}>
-        {isAuthenticated ? (
-          <Paper
-            elevation={0}
-            sx={{ p: 2, border: "1px solid", borderColor: "grey.300" }}
-          >
-            <Stack
-              direction="row"
-              spacing={2}
-              alignItems="center"
-              justifyContent="space-between"
-            >
-              <Stack direction="row" spacing={1} alignItems="center">
-                <Typography variant="body1">
-                  Connected as <strong>{user?.username}</strong>
-                </Typography>
-                <Chip
-                  label="Ready to vote"
-                  color="success"
-                  size="small"
-                  variant="outlined"
-                />
-              </Stack>
-              <LogoutButton />
-            </Stack>
-          </Paper>
-        ) : (
-          <Paper
-            elevation={0}
-            sx={{
-              p: 3,
-              border: "1px solid",
-              borderColor: "grey.300",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 2,
-            }}
-          >
-            <Typography variant="h6" align="center">
-              Login to Vote
-            </Typography>
-            <Typography variant="body2" color="text.secondary" align="center">
-              You need to be logged in with your Hugging Face account to vote
-              for models
-            </Typography>
-            <AuthBlock />
-          </Paper>
-        )}
-      </Box> */}
-      <AuthContainer actionText="vote for models" />
-
-      {/* Models List */}
-      <Paper
-        elevation={0}
-        sx={{
-          border: "1px solid",
-          borderColor: "grey.300",
-          borderRadius: 1,
-          overflow: "hidden",
-          minHeight: 400,
-        }}
-      >
-        {/* Header - Always visible */}
-        <Box
-          sx={{
-            px: 3,
-            py: 2,
-            borderBottom: "1px solid",
-            borderColor: (theme) =>
-              theme.palette.mode === "dark"
-                ? alpha(theme.palette.divider, 0.1)
-                : "grey.200",
-            bgcolor: (theme) =>
-              theme.palette.mode === "dark"
-                ? alpha(theme.palette.background.paper, 0.5)
-                : "grey.50",
-          }}
-        >
-          <Typography
-            variant="h6"
-            sx={{ fontWeight: 600, color: "text.primary" }}
-          >
-            Models Pending Evaluation
-          </Typography>
-        </Box>
-
-        {/* Table Header */}
-        <Box
-          sx={{
-            px: 3,
-            py: 1.5,
-            borderBottom: "1px solid",
-            borderColor: "divider",
-            bgcolor: "background.paper",
-            display: { xs: "none", sm: "grid" },
-            gridTemplateColumns: "1fr 200px 160px",
-            gap: 3,
-            alignItems: "center",
-          }}
-        >
-          <Box>
-            <Typography variant="subtitle2" color="text.secondary">
-              Model
-            </Typography>
-          </Box>
-          <Box sx={{ textAlign: "right" }}>
-            <Typography variant="subtitle2" color="text.secondary">
-              Votes
-            </Typography>
-          </Box>
-          <Box sx={{ textAlign: "right" }}>
-            <Typography variant="subtitle2" color="text.secondary">
-              Priority
-            </Typography>
-          </Box>
-        </Box>
-
-        {/* Content */}
-        {loadingModels ? (
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "200px",
-              width: "100%",
-              bgcolor: "background.paper",
-            }}
-          >
-            <CircularProgress />
-          </Box>
-        ) : pendingModels.length === 0 && !loadingModels ? (
-          <NoModelsToVote />
-        ) : (
-          <List sx={{ p: 0, bgcolor: "background.paper" }}>
-            {pendingModels.map((model, index) => {
-              const isTopThree = index < 3;
-              return (
-                <React.Fragment key={getModelUniqueId(model)}>
-                  {index > 0 && <Divider />}
-                  <ListItem
-                    sx={{
-                      py: 2.5,
-                      px: 3,
-                      display: "grid",
-                      gridTemplateColumns: { xs: "1fr", sm: "1fr 200px 160px" },
-                      gap: { xs: 2, sm: 3 },
-                      alignItems: "start",
-                      position: "relative",
-                      "&:hover": {
-                        bgcolor: "action.hover",
-                      },
-                    }}
-                  >
-                    {/* Left side - Model info */}
-                    <Box>
-                      <Stack spacing={1}>
-                        {/* Model name and link */}
-                        <Stack
-                          direction={{ xs: "column", sm: "row" }}
-                          spacing={1}
-                          alignItems={{ xs: "stretch", sm: "center" }}
-                        >
-                          <Stack
-                            direction="row"
-                            spacing={1}
-                            alignItems="center"
-                            sx={{ flexGrow: 1 }}
-                          >
-                            <Link
-                              href={`https://huggingface.co/${model.name}`}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              sx={{
-                                textDecoration: "none",
-                                color: "primary.main",
-                                fontWeight: 500,
-                                "&:hover": {
-                                  textDecoration: "underline",
-                                },
-                                fontSize: { xs: "0.9rem", sm: "inherit" },
-                                wordBreak: "break-word",
-                              }}
-                            >
-                              {model.name}
-                            </Link>
-                            <IconButton
-                              size="small"
-                              href={`https://huggingface.co/${model.name}`}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              sx={{
-                                ml: 0.5,
-                                p: 0.5,
-                                color: "action.active",
-                                "&:hover": {
-                                  color: "primary.main",
-                                },
-                              }}
-                            >
-                              <OpenInNewIcon sx={{ fontSize: "1rem" }} />
-                            </IconButton>
-                          </Stack>
-                          <Stack
-                            direction="row"
-                            spacing={1}
-                            sx={{
-                              width: { xs: "100%", sm: "auto" },
-                              justifyContent: {
-                                xs: "flex-start",
-                                sm: "flex-end",
-                              },
-                              flexWrap: "wrap",
-                              gap: 1,
-                            }}
-                          >
-                            <Chip
-                              label={model.precision}
-                              size="small"
-                              variant="outlined"
-                              sx={{
-                                borderColor: "grey.300",
-                                bgcolor: "grey.50",
-                                "& .MuiChip-label": {
-                                  fontSize: "0.75rem",
-                                  fontWeight: 600,
-                                  color: "text.secondary",
-                                },
-                              }}
-                            />
-                            <Chip
-                              label={`rev: ${model.revision.slice(0, 7)}`}
-                              size="small"
-                              variant="outlined"
-                              sx={{
-                                borderColor: "grey.300",
-                                bgcolor: "grey.50",
-                                "& .MuiChip-label": {
-                                  fontSize: "0.75rem",
-                                  fontWeight: 600,
-                                  color: "text.secondary",
-                                },
-                              }}
-                            />
-                          </Stack>
-                        </Stack>
-                        {/* Metadata row */}
-                        <Stack
-                          direction={{ xs: "column", sm: "row" }}
-                          spacing={{ xs: 1, sm: 2 }}
-                          alignItems={{ xs: "flex-start", sm: "center" }}
-                        >
-                          <Stack
-                            direction="row"
-                            spacing={0.5}
-                            alignItems="center"
-                          >
-                            <AccessTimeIcon
-                              sx={{
-                                fontSize: "0.875rem",
-                                color: "text.secondary",
-                              }}
-                            />
-                            <Typography variant="body2" color="text.secondary">
-                              {model.wait_time}
-                            </Typography>
-                          </Stack>
-                          <Stack
-                            direction="row"
-                            spacing={0.5}
-                            alignItems="center"
-                          >
-                            <PersonIcon
-                              sx={{
-                                fontSize: "0.875rem",
-                                color: "text.secondary",
-                              }}
-                            />
-                            <Typography variant="body2" color="text.secondary">
-                              {model.submitter}
-                            </Typography>
-                          </Stack>
-                        </Stack>
-                      </Stack>
-                    </Box>
-
-                    {/* Vote Column */}
-                    <Box
-                      sx={{
-                        textAlign: { xs: "left", sm: "right" },
-                        mt: { xs: 2, sm: 0 },
-                      }}
-                    >
-                      <Stack
-                        direction={{ xs: "row", sm: "row" }}
-                        spacing={2.5}
-                        justifyContent={{ xs: "space-between", sm: "flex-end" }}
-                        alignItems="center"
-                      >
-                        <Stack
-                          alignItems={{ xs: "flex-start", sm: "center" }}
-                          sx={{
-                            minWidth: { xs: "auto", sm: "90px" },
-                          }}
-                        >
-                          <Typography
-                            variant="h4"
-                            component="div"
-                            sx={{
-                              fontWeight: 700,
-                              lineHeight: 1,
-                              fontSize: { xs: "1.75rem", sm: "2rem" },
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                            }}
-                          >
-                            <Typography
-                              component="span"
-                              sx={{
-                                fontSize: { xs: "1.25rem", sm: "1.5rem" },
-                                fontWeight: 600,
-                                color: "primary.main",
-                                lineHeight: 1,
-                                mr: 0.5,
-                                mt: "-2px",
-                              }}
-                            >
-                              +
-                            </Typography>
-                            <Typography
-                              component="span"
-                              sx={{
-                                color:
-                                  model.votes === 0
-                                    ? "text.primary"
-                                    : "primary.main",
-                                fontWeight: 700,
-                                lineHeight: 1,
-                              }}
-                            >
-                              {model.votes > 999 ? "999" : model.votes}
-                            </Typography>
-                          </Typography>
-                          <Typography
-                            variant="caption"
-                            sx={{
-                              color: "text.secondary",
-                              fontWeight: 500,
-                              mt: 0.5,
-                              textTransform: "uppercase",
-                              letterSpacing: "0.05em",
-                              fontSize: "0.75rem",
-                            }}
-                          >
-                            votes
-                          </Typography>
-                        </Stack>
-                        <Button
-                          variant={isVoted(model) ? "contained" : "outlined"}
-                          size={isMobile ? "medium" : "large"}
-                          onClick={() => handleVote(model)}
-                          disabled={
-                            !isAuthenticated ||
-                            isVoted(model) ||
-                            loadingVotes[getModelUniqueId(model)]
-                          }
-                          color="primary"
-                          sx={{
-                            minWidth: { xs: "80px", sm: "100px" },
-                            height: { xs: "36px", sm: "40px" },
-                            textTransform: "none",
-                            fontWeight: 600,
-                            fontSize: { xs: "0.875rem", sm: "0.95rem" },
-                            ...(isVoted(model)
-                              ? {
-                                  bgcolor: "primary.main",
-                                  "&:hover": {
-                                    bgcolor: "primary.dark",
-                                  },
-                                  "&.Mui-disabled": {
-                                    bgcolor: "primary.main",
-                                    color: "white",
-                                    opacity: 0.7,
-                                  },
-                                }
-                              : {
-                                  borderWidth: 2,
-                                  "&:hover": {
-                                    borderWidth: 2,
-                                  },
-                                }),
-                          }}
-                        >
-                          {loadingVotes[getModelUniqueId(model)] ? (
-                            <CircularProgress size={20} color="inherit" />
-                          ) : isVoted(model) ? (
-                            <Stack
-                              direction="row"
-                              spacing={0.5}
-                              alignItems="center"
-                            >
-                              <CheckIcon sx={{ fontSize: "1.2rem" }} />
-                              <span>Voted</span>
-                            </Stack>
-                          ) : (
-                            "Vote"
-                          )}
-                        </Button>
-                      </Stack>
-                    </Box>
-
-                    {/* Priority Column */}
-                    <Box
-                      sx={{
-                        textAlign: { xs: "left", sm: "right" },
-                        mt: { xs: 2, sm: 0 },
-                        display: { xs: "none", sm: "block" },
-                      }}
-                    >
-                      <Chip
-                        label={
-                          <Stack
-                            direction="row"
-                            spacing={0.5}
-                            alignItems="center"
-                          >
-                            {isTopThree && (
-                              <Typography
-                                variant="body2"
-                                sx={{
-                                  fontWeight: 600,
-                                  color: isTopThree
-                                    ? "primary.main"
-                                    : "text.primary",
-                                  letterSpacing: "0.02em",
-                                }}
-                              >
-                                HIGH
-                              </Typography>
-                            )}
-                            <Typography
-                              variant="body2"
-                              sx={{
-                                fontWeight: 600,
-                                color: isTopThree
-                                  ? "primary.main"
-                                  : "text.secondary",
-                                letterSpacing: "0.02em",
-                              }}
-                            >
-                              #{index + 1}
-                            </Typography>
-                          </Stack>
-                        }
-                        size="medium"
-                        variant={isTopThree ? "filled" : "outlined"}
-                        sx={{
-                          height: 36,
-                          minWidth: "100px",
-                          bgcolor: isTopThree
-                            ? (theme) => alpha(theme.palette.primary.main, 0.1)
-                            : "transparent",
-                          borderColor: isTopThree ? "primary.main" : "grey.300",
-                          borderWidth: 2,
-                          "& .MuiChip-label": {
-                            px: 2,
-                            fontSize: "0.95rem",
-                          },
-                        }}
-                      />
-                    </Box>
-                  </ListItem>
-                </React.Fragment>
-              );
-            })}
-          </List>
-        )}
-      </Paper>
-    </Box>
-  );
-}
-
-export default VoteModelPage;