Hugging Face's logo

Spaces:
yourbench
/
demo
Running on CPU Upgrade

App Files Community
1
demo
File size: 4,878 Bytes 
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
 
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";

/**
 * 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);

  // Default questions if none provided
  const questions =
    sampleQuestions.length > 0
      ? sampleQuestions
      : [
          {
            id: 1,
            question: "What are the key benefits of the described technology?",
            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?",
            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 = `http://localhost:3001/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={{ width: "100%", mt: 3 }}>
      {/* Header avec titre et bouton de téléchargement alignés */}
      <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>

        <Tooltip title="Télécharger le benchmark complet">
          <Button
            variant="contained"
            color="primary"
            endIcon={
              isDownloading ? <CircularProgress size={16} /> : <DownloadIcon />
            }
            onClick={handleDownloadClick}
            disabled={isDownloading || !sessionId}
          >
            {isDownloading ? "Téléchargement..." : "Download Benchmark"}
          </Button>
        </Tooltip>
      </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: "#fafafa",
            }}
          >
            <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">{q.question}</Typography>
            </CardContent>
          </Card>
        ))}
      </Box>

      <Box sx={{ display: "flex", justifyContent: "center", mt: 8 }}>
        <Button
          variant="contained"
          color="primary"
          size="large"
          startIcon={<AssessmentIcon />}
          onClick={handleEvaluationClick}
        >
          Start Evaluation
        </Button>
      </Box>
    </Box>
  );
};

export default BenchmarkDisplay;