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 = () => (
No Models to Vote
There are currently no models waiting for votes.
Check back later!
);
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 (
);
}
return (
Help us prioritize which
models to evaluate next
}
/>
{error && (
{error}
)}
{/* Auth Status */}
{/*
{isAuthenticated ? (
Connected as {user?.username}
) : (
Login to Vote
You need to be logged in with your Hugging Face account to vote
for models
)}
*/}
{/* Models List */}
{/* Header - Always visible */}
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",
}}
>
Models Pending Evaluation
{/* Table Header */}
Model
Votes
Priority
{/* Content */}
{loadingModels ? (
) : pendingModels.length === 0 && !loadingModels ? (
) : (
{pendingModels.map((model, index) => {
const isTopThree = index < 3;
return (
{index > 0 && }
{/* Left side - Model info */}
{/* Model name and link */}
{model.name}
{/* Metadata row */}
{model.wait_time}
{model.submitter}
{/* Vote Column */}
+
{model.votes > 999 ? "999" : model.votes}
votes
{/* Priority Column */}
{isTopThree && (
HIGH
)}
#{index + 1}
}
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",
},
}}
/>
);
})}
)}
);
}
export default VoteModelPage;