demo / frontend /src /components /BenchmarkDisplay.jsx
tfrere's picture
update darkmode | update wording
83106dd
raw
history blame
5.58 kB
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;