Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
import React, { useState } from "react"; | |
import { | |
Box, | |
Typography, | |
Paper, | |
Button, | |
Divider, | |
Card, | |
CardContent, | |
Link, | |
CircularProgress, | |
Tooltip, | |
} from "@mui/material"; | |
import PlayArrowIcon from "@mui/icons-material/PlayArrow"; | |
import AssessmentIcon from "@mui/icons-material/Assessment"; | |
import LinkIcon from "@mui/icons-material/Link"; | |
import DownloadIcon from "@mui/icons-material/Download"; | |
import CheckCircleIcon from "@mui/icons-material/CheckCircle"; | |
import API_CONFIG from "../config/api"; | |
import { useThemeMode } from "../hooks/useThemeMode"; | |
import getTheme from "../config/theme"; | |
/** | |
* Component to display benchmark information and evaluation button | |
* | |
* @param {Object} props - Component props | |
* @param {Array} props.sampleQuestions - Array of sample questions to display | |
* @param {Function} props.onStartEvaluation - Function to call when evaluation button is clicked | |
* @param {string} props.sessionId - Session ID used for the benchmark generation | |
* @param {string} props.datasetUrl - URL to the Hugging Face dataset | |
* @returns {JSX.Element} Benchmark display component | |
*/ | |
const BenchmarkDisplay = ({ | |
sampleQuestions = [], | |
onStartEvaluation, | |
sessionId, | |
datasetUrl, | |
}) => { | |
const [isDownloading, setIsDownloading] = useState(false); | |
const { mode } = useThemeMode(); | |
const theme = getTheme(mode); | |
// Default questions if none provided | |
const questions = | |
sampleQuestions.length > 0 | |
? sampleQuestions | |
: [ | |
{ | |
id: 1, | |
question: "What are the key benefits of the described technology?", | |
answer: "No answer available", | |
type: "single_shot", | |
}, | |
{ | |
id: 2, | |
question: | |
"Based on the context about machine learning frameworks, how does TensorFlow compare to PyTorch in terms of deployment capabilities?", | |
answer: "No answer available", | |
type: "multi_hop", | |
}, | |
]; | |
const handleEvaluationClick = () => { | |
if (onStartEvaluation) { | |
onStartEvaluation(); | |
} | |
}; | |
const handleDownloadClick = async () => { | |
if (!sessionId) return; | |
setIsDownloading(true); | |
try { | |
// Requête pour télécharger le dataset | |
const downloadUrl = `${API_CONFIG.BASE_URL}/download-dataset/${sessionId}`; | |
// Créer un élément a temporaire pour déclencher le téléchargement | |
const link = document.createElement("a"); | |
link.href = downloadUrl; | |
link.setAttribute("download", `yourbench_${sessionId}_dataset.zip`); | |
document.body.appendChild(link); | |
link.click(); | |
document.body.removeChild(link); | |
} catch (error) { | |
console.error("Erreur lors du téléchargement du dataset:", error); | |
alert("Erreur lors du téléchargement. Veuillez réessayer."); | |
} finally { | |
setIsDownloading(false); | |
} | |
}; | |
return ( | |
<> | |
<Box | |
sx={{ | |
mb: 4, | |
display: "flex", | |
justifyContent: "space-between", | |
alignItems: "center", | |
}} | |
> | |
<Box sx={{ display: "flex", alignItems: "center" }}> | |
<CheckCircleIcon color="success" sx={{ mr: 1.5, fontSize: 28 }} /> | |
<Typography variant="h6">Benchmark Created Successfully</Typography> | |
</Box> | |
<Box sx={{ display: "flex", gap: 2 }}> | |
<Tooltip title="Download the complete benchmark"> | |
<Button | |
variant="outlined" | |
color="primary" | |
endIcon={ | |
isDownloading ? ( | |
<CircularProgress size={16} /> | |
) : ( | |
<DownloadIcon /> | |
) | |
} | |
onClick={handleDownloadClick} | |
disabled={isDownloading || !sessionId} | |
> | |
{isDownloading ? "Downloading..." : "Download Benchmark"} | |
</Button> | |
</Tooltip> | |
<Button | |
variant="contained" | |
color="primary" | |
startIcon={<AssessmentIcon />} | |
onClick={handleEvaluationClick} | |
> | |
Start Evaluation | |
</Button> | |
</Box> | |
</Box> | |
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}> | |
Your benchmark has been generated. Here are some example questions: | |
</Typography> | |
<Box sx={{ mb: 3 }}> | |
{questions.map((q, index) => ( | |
<Card | |
key={q.id || index} | |
variant="outlined" | |
sx={{ | |
mb: 2, | |
backgroundColor: theme.palette.background.subtle, | |
border: `1px solid ${theme.palette.divider}`, | |
}} | |
> | |
<CardContent> | |
<Typography | |
variant="caption" | |
color="text.secondary" | |
sx={{ display: "block", mb: 1 }} | |
> | |
{q.type === "multi_hop" | |
? "Multi-hop Question" | |
: "Single-shot Question"} | |
</Typography> | |
<Typography variant="body1" sx={{ mb: 2 }}> | |
<strong>Question:</strong> {q.question} | |
</Typography> | |
<Divider sx={{ my: 1.5 }} /> | |
<Typography | |
variant="body1" | |
sx={{ | |
borderRadius: 1, | |
}} | |
> | |
<strong>Answer:</strong> {q.answer || "No answer available"} | |
</Typography> | |
</CardContent> | |
</Card> | |
))} | |
</Box> | |
</> | |
); | |
}; | |
export default BenchmarkDisplay; | |