Hugging Face's logo

Spaces:
Sharathhebbar24
/
sentiment-analysis-fe
Runtime error

App Files Community
sentiment-analysis-fe
File size: 3,791 Bytes 
0509f82
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
import React from 'react';
import { Box, Typography, Button, Paper, Chip, CircularProgress } from '@mui/material';
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
import ThumbDownIcon from '@mui/icons-material/ThumbDown';
import RemoveIcon from '@mui/icons-material/Remove';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';

function SentimentResult({ result, onNewAnalysis, currentReview }) {
  const sentimentColor = 
    result.sentiment === 'positive' ? 'success.main' :
    result.sentiment === 'negative' ? 'secondary.main' : 
    'warning.main';

  const SentimentIcon = 
    result.sentiment === 'positive' ? ThumbUpIcon :
    result.sentiment === 'negative' ? ThumbDownIcon : 
    RemoveIcon;

  return (
    <Box>

      <Typography variant="h2" component="h2" gutterBottom>

        Sentiment Analysis Result

      </Typography>

      

      <Box sx={{ 

        display: 'flex', 

        flexDirection: { xs: 'column', sm: 'row' }, 

        alignItems: 'center', 

        gap: 2, 

        mb: 3 

      }}>

        <Box sx={{

          display: 'flex',

          alignItems: 'center',

          gap: 1

        }}>

          <Typography variant="h3" component="span">

            Sentiment:

          </Typography>

          <Chip

            icon={<SentimentIcon />}

            label={result.sentiment.charAt(0).toUpperCase() + result.sentiment.slice(1)}

            sx={{ 

              bgcolor: sentimentColor, 

              color: 'white', 

              fontWeight: 'bold',

              fontSize: '1rem',

              px: 1,

              py: 2.5

            }}

          />

        </Box>



        <Box sx={{

          display: 'flex',

          alignItems: 'center',

          gap: 1

        }}>

          <Typography variant="h3" component="span">

            Confidence:

          </Typography>

          <Box sx={{ position: 'relative', display: 'inline-flex' }}>

            <CircularProgress 

              variant="determinate" 

              value={result.confidence} 

              size={60}

              thickness={5}

              sx={{ color: sentimentColor }}

            />

            <Box

              sx={{

                top: 0,

                left: 0,

                bottom: 0,

                right: 0,

                position: 'absolute',

                display: 'flex',

                alignItems: 'center',

                justifyContent: 'center',

              }}

            >

              <Typography variant="body1" component="div" fontWeight="bold">

                {`${Math.round(result.confidence)}%`}

              </Typography>

            </Box>

          </Box>

        </Box>

      </Box>



      {result.reasoning && (

        <Paper variant="outlined" sx={{ p: 2, mb: 3, bgcolor: 'background.default' }}>

          <Typography variant="h6" gutterBottom>

            Analysis Details:

          </Typography>

          <Typography variant="body1">

            {result.reasoning}

          </Typography>

        </Paper>

      )}



      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>

        <Paper variant="outlined" sx={{ p: 2, flex: 1, mr: 2 }}>

          <Typography variant="body2" color="text.secondary">

            Original Review Text:

          </Typography>

          <Typography variant="body1" sx={{ mt: 1 }}>

            {currentReview}

          </Typography>

        </Paper>



        <Button

          variant="outlined"

          color="primary"

          startIcon={<ArrowBackIcon />}

          onClick={onNewAnalysis}

        >

          New Analysis

        </Button>

      </Box>

    </Box>
  );
}

export default SentimentResult;