Hugging Face's logo

Spaces:
HumbleBeeAI
/
enlighten-qalb
Running

App Files Community
enlighten-qalb
File size: 4,506 Bytes 
3299552
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0056542
3299552
 
 
 
 
 
 
 
 
c2adf08
3299552
 
 
 
 
 
 
 
 
c2adf08
3299552
0056542
 
3299552
 
 
c2adf08
3299552
c2adf08
 
3299552
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0056542
 
 
3299552
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c2adf08
 
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
 
import React, { useState } from 'react';
import { useAuth } from '../../hooks/useAuth';
import { 
  Box, 
  Button, 
  Typography, 
  Paper, 
  Radio, 
  RadioGroup, 
  FormControlLabel, 
  FormControl, 
  FormLabel, 
  Slider,
  Rating,
  Alert
} from '@mui/material';
import styled from '@emotion/styled';
import { saveFeedback } from '../../services/search';

const StyledPaper = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(3),
  marginTop: theme.spacing(3),
  backgroundColor: theme.palette.background.paper,
}));

const FeedbackForm = ({ searchResult, query, onFeedbackSubmitted }) => {
  const { user, authTokens, userType } = useAuth();
  const [reaction, setReaction] = useState('');
  const [confidence, setConfidence] = useState(5);
  const [rating, setRating] = useState(3);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(false);
  
  if (!searchResult || typeof searchResult !== 'object') {
    return (
      <Alert severity="error">Invalid search result data</Alert>
    );
  }

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setError(null);

    try {
      // Extract only the needed properties for the backend
      const feedbackData = {
        user_type: userType,
        username: user,
        query: query || '',
        retrieved_text: searchResult.content || searchResult.text || JSON.stringify(searchResult),
        model_type: searchResult.model_type || 'unknown',
        result_label: searchResult.resultLabel || '',
        reaction,
        confidence_score: searchResult.similarity || 0, // Send the model confidence score
        user_confidence: confidence, // User's confidence in their rating
        rating
      };

      await saveFeedback(feedbackData, authTokens.access);

      setSuccess(true);
      if (onFeedbackSubmitted) onFeedbackSubmitted();
      // Reset form
      setReaction('');
      setConfidence(5);
      setRating(3);
    } catch (err) {
      console.error("Feedback submission error:", err);
      setError(typeof err === 'string' ? err : (err.message || 'Failed to submit feedback'));
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <StyledPaper elevation={2}>
      <Typography variant="h6" gutterBottom>
        Was this result helpful?
      </Typography>
      
      {error && (
        <Alert severity="error" sx={{ mb: 2 }}>
          {typeof error === 'string' ? error : 'An error occurred'}
        </Alert>
      )}
      
      {success ? (
        <Alert severity="success" sx={{ mb: 2 }}>
          Thank you for your feedback!
        </Alert>
      ) : (
        <Box component="form" onSubmit={handleSubmit}>
          <FormControl component="fieldset" sx={{ mb: 3 }} fullWidth>
            <FormLabel component="legend">Your reaction to this result:</FormLabel>
            <RadioGroup
              row
              value={reaction}
              onChange={(e) => setReaction(e.target.value)}
            >
              <FormControlLabel value="👍" control={<Radio />} label="👍" />
              <FormControlLabel value="🤷‍♂️" control={<Radio />} label="🤷‍♂️" />
              <FormControlLabel value="👎" control={<Radio />} label="👎" />
            </RadioGroup>
          </FormControl>

          <Box sx={{ mb: 3 }}>
            <Typography gutterBottom>How confident are you in this rating?</Typography>
            <Slider
              value={confidence}
              onChange={(e, newValue) => setConfidence(newValue)}
              min={1}
              max={10}
              step={1}
              marks
              valueLabelDisplay="auto"
              aria-labelledby="confidence-slider"
            />
          </Box>

          <Box sx={{ mb: 3 }}>
            <Typography component="legend">Overall quality rating</Typography>
            <Rating
              name="quality-rating"
              value={rating}
              onChange={(e, newValue) => setRating(newValue)}
              precision={0.5}
            />
          </Box>

          <Button
            type="submit"
            variant="contained"
            color="primary"
            disabled={!reaction || isSubmitting}
            fullWidth
          >
            {isSubmitting ? 'Submitting...' : 'Submit Feedback'}
          </Button>
        </Box>
      )}
    </StyledPaper>
  );
};

export default FeedbackForm;