Spaces:
Runtime error
Runtime error
File size: 4,103 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 |
import React from 'react';
import { Box, Typography, Paper, Chip } 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 RateReviewIcon from '@mui/icons-material/RateReview';
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
function AboutSection() {
return (
<Paper
elevation={0}
sx={{
p: 3,
mb: 4,
borderRadius: 2,
bgcolor: 'background.paper',
border: '1px solid rgba(0,0,0,0.08)'
}}
>
<Typography variant="h4" component="h2" gutterBottom fontWeight="500">
How It Works
</Typography>
<Typography variant="body1" paragraph>
This tool uses artificial intelligence to analyze the sentiment of movie reviews.
Simply enter or paste a movie review, and our AI will classify it as positive, negative, or neutral,
along with a confidence score and detailed analysis.
</Typography>
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 3, mt: 1 }}>
<Box sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
p: 2,
height: '100%',
bgcolor: '#f8f9fa',
borderRadius: 2,
flex: 1
}}>
<RateReviewIcon sx={{ fontSize: 40, color: 'primary.main', mb: 1 }} />
<Typography variant="h6" gutterBottom>
Enter Your Review
</Typography>
<Typography variant="body2" color="text.secondary">
Copy and paste a movie review or write your own in the text area.
</Typography>
</Box>
<Box sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
p: 2,
height: '100%',
bgcolor: '#f8f9fa',
borderRadius: 2,
flex: 1
}}>
<AutoAwesomeIcon sx={{ fontSize: 40, color: 'primary.main', mb: 1 }} />
<Typography variant="h6" gutterBottom>
AI Analysis
</Typography>
<Typography variant="body2" color="text.secondary">
Our AI model analyzes the text to determine the sentiment and confidence level.
</Typography>
</Box>
<Box sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
p: 2,
height: '100%',
bgcolor: '#f8f9fa',
borderRadius: 2,
flex: 1
}}>
<Box sx={{ display: 'flex', gap: 1, mb: 1 }}>
<Chip
icon={<ThumbUpIcon />}
label="Positive"
size="small"
sx={{ bgcolor: 'success.main', color: 'white' }}
/>
<Chip
icon={<ThumbDownIcon />}
label="Negative"
size="small"
sx={{ bgcolor: 'secondary.main', color: 'white' }}
/>
<Chip
icon={<RemoveIcon />}
label="Neutral"
size="small"
sx={{ bgcolor: 'warning.main', color: 'white' }}
/>
</Box>
<Typography variant="h6" gutterBottom>
View Results
</Typography>
<Typography variant="body2" color="text.secondary">
See the sentiment classification, confidence score, and detailed reasoning.
</Typography>
</Box>
</Box>
<Typography variant="body2" color="text.secondary" sx={{ mt: 3, fontStyle: 'italic' }}>
This application uses Cohere's large language model API to perform sentiment analysis.
</Typography>
</Paper>
);
}
export default AboutSection; |