Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 5,578 Bytes
970eef1 d6b6619 83106dd 970eef1 83106dd d6f0b38 970eef1 ebdfd67 970eef1 ebdfd67 970eef1 d6b6619 970eef1 ebdfd67 970eef1 d6f0b38 970eef1 d6f0b38 2a8ebbd 970eef1 2a8ebbd 970eef1 2a8ebbd 970eef1 2a8ebbd 970eef1 2a8ebbd 970eef1 d6f0b38 970eef1 ebdfd67 970eef1 ebdfd67 970eef1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 |
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;
|