Skip to content

Commit

Permalink
Merge pull request #49 from florijanqosja/validate-fix
Browse files Browse the repository at this point in the history 
update4
  • Loading branch information
@florijanqosja
florijanqosja authored Jan 1, 2024
2 parents cce706d + d828ed6 commit f50c832
Showing 1 changed file with 159 additions and 110 deletions.
269 changes: 159 additions & 110 deletions web/src/components/Sections/Pricing.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ const useStyles = makeStyles((theme) => ({
labeledCard: {
backgroundColor: '#ffff99', // light yellow for labeled
},
unlabeledCard: {
backgroundColor: '#cda5a3', // same as is now for unlabeled
},
circularProgressbar: {
height: '150px !important',
width: '150px !important',
Expand All @@ -31,20 +34,14 @@ const useStyles = makeStyles((theme) => ({
fontWeight: 'bold',
marginBottom: '20px',
},
subTitle: {
fontStyle: 'italic',
marginBottom: '30px',
},
paragraph: {
textAlign: 'justify',
marginBottom: '30px',
},
label: {
fontSize: '18px',
fontWeight: '500',
},
}));

const secondsToHours = (seconds) => (seconds / 3600).toFixed(2);

export default function Pricing() {
const classes = useStyles();
const [summaryInfo, setSummaryInfo] = useState(null);
Expand All @@ -55,9 +52,9 @@ export default function Pricing() {
const response = await axios.get(`${process.env.REACT_APP_API_DOMAIN_PROD}dataset_insight_info`);
const data = response.data;
const total = data.total_labeled + data.total_unlabeled;
const totalDuration = data.total_duration_labeled + data.total_duration_unlabeled;
data.sumofLabeled = (data.total_labeled / total) * 100;
data.sumofUnLabeled = (data.total_unlabeled / total) * 100;
const totalDuration = data.total_duration_labeled + data.total_duration_unlabeled;
data.sumofLabeledDuration = (data.total_duration_labeled / totalDuration) * 100;
data.sumofUnLabeledDuration = (data.total_duration_unlabeled / totalDuration) * 100;
data.progressPercentage = (data.total_duration_validated / totalDuration) * 100;
Expand All @@ -75,107 +72,159 @@ export default function Pricing() {

return (
<Box className={classes.root}>
<Grid container justify="center">
<Grid item xs={12} sm={10} md={8}>
<Typography variant="h2" className={classes.title}>THE PROJECT</Typography>
<Typography variant="h5" className={classes.subTitle}>We love Technology</Typography>
<Typography variant="body1" className={classes.paragraph}>
Welcome to the Albanian Language Transcriber project! Our goal is to develop a functioning Albanian speech-to-text AI model to improve the lives
of Albanians and promote the development of the country. With over 7 million speakers, the Albanian language is an important language with a rich
cultural heritage, yet it currently lacks a speech-to-text tool. By developing this tool, we aim to bring the benefits of speech recognition
technology to Albanian speakers in various fields, including the smartphone, automobile, medical, education, and jurisdiction industries. Our team
is committed to building a high-quality model that achieves an accuracy rate of 80% and makes a meaningful impact on the Albanian community. We
appreciate your support and interest in our project.
</Typography>
<Typography variant="h2" className={classes.title}>OUR DATASET SO FAR Prod</Typography>
{summaryInfo && (
<Grid container spacing={3}>
<Grid item xs={12} sm={6} md={4}>
<Card className={`${classes.card} ${classes.labeledCard}`}>
<CardContent align="center">
<div className={classes.circularProgressbar}>
<CircularProgressbar
value={summaryInfo.sumofLabeled}
text={`${summaryInfo.sumofLabeled}%`}
styles={buildStyles({
strokeLinecap: 'butt',
textColor: '#301616',
pathColor: '#301616',
trailColor: '#d6d6d6',
})}
/>
</div>
<Typography variant="h6" className={classes.label}>Labeled Data</Typography>
<Typography variant="body2">{`${summaryInfo.total_labeled} / ${total}`}</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card className={`${classes.card}`}>
<CardContent align="center">
<div className={classes.circularProgressbar}>
<CircularProgressbar
value={summaryInfo.sumofUnLabeled}
text={`${summaryInfo.sumofUnLabeled}%`}
styles={buildStyles({
strokeLinecap: 'butt',
textColor: '#301616',
pathColor: '#301616',
trailColor: '#d6d6d6',
})}
/>
</div>
<Typography variant="h6" className={classes.label}>Unlabeled Data</Typography>
<Typography variant="body2">{`${summaryInfo.total_unlabeled} / ${total}`}</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card className={`${classes.card} ${classes.validatedCard}`}>
<CardContent align="center">
<div className={classes.circularProgressbar}>
<CircularProgressbar
value={summaryInfo.progressPercentage}
text={`${summaryInfo.progressPercentage}%`}
styles={buildStyles({
strokeLinecap: 'butt',
textColor: '#301616',
pathColor: '#301616',
trailColor: '#d6d6d6',
})}
/>
</div>
<Typography variant="h6" className={classes.label}>Progress</Typography>
<Typography variant="body2">{`${summaryInfo.total_duration_validated.toFixed(2)} / ${totalDuration.toFixed(2)} seconds`}</Typography>
</CardContent>
</Card>
</Grid>
{/* New Cards for Additional Progress Information */}
<Grid item xs={12} sm={6} md={4}>
<Card className={`${classes.card} ${classes.labeledCard}`}>
<CardContent align="center">
<div className={classes.circularProgressbar}>
<CircularProgressbar
value={calculatePercentage(summaryInfo.total_duration_validated, summaryInfo.total_duration_labeled)}
text={`${calculatePercentage(summaryInfo.total_duration_validated, summaryInfo.total_duration_labeled)}%`}
styles={buildStyles({
strokeLinecap: 'butt',
textColor: '#301616',
pathColor: '#301616',
trailColor: '#d6d6d6',
})}
/>
</div>
<Typography variant="h6" className={classes.label}>Labeled to Validated</Typography>
<Typography variant="body2">{`${summaryInfo.total_duration_validated.toFixed(2)} / ${summaryInfo.total_duration_labeled.toFixed(2)} seconds`}</Typography>
</CardContent>
</Card>
</Grid>
{/* Add similar cards for Unlabeled to Labeled and Unlabeled to Validated */}
{/* ... */}
</Grid>
)}
</Grid>
<Grid item xs={12} sm={10} md={8}>
<Typography variant="h2" className={classes.title}>THE PROJECT</Typography>
<Typography variant="h5" className={classes.subTitle}>We love Technology</Typography>
<Typography variant="body1" className={classes.paragraph}>
Welcome to the Albanian Language Transcriber project! Our goal is to develop a functioning Albanian speech-to-text AI model to improve the lives
of Albanians and promote the development of the country. With over 7 million speakers, the Albanian language is an important language with a rich
cultural heritage, yet it currently lacks a speech-to-text tool. By developing this tool, we aim to bring the benefits of speech recognition
technology to Albanian speakers in various fields, including the smartphone, automobile, medical, education, and jurisdiction industries. Our team
is committed to building a high-quality model that achieves an accuracy rate of 80% and makes a meaningful impact on the Albanian community. We
appreciate your support and interest in our project.
</Typography>
<Typography variant="h2" className={classes.title}>OUR DATASET SO FAR Prod</Typography>

{/* 1. Card for Labeled Data */}
{summaryInfo && (
<Grid item xs={12} sm={6} md={4}>
<Card className={`${classes.card} ${classes.labeledCard}`}>
<CardContent align="center">
<Typography variant="h6" className={classes.label}>Labeled Data</Typography>
<Typography variant="body2">{`${summaryInfo.total_labeled} entries`}</Typography>
</CardContent>
</Card>
</Grid>
)}

{/* 2. Card for Unlabeled Data */}
{summaryInfo && (
<Grid item xs={12} sm={6} md={4}>
<Card className={`${classes.card} ${classes.unlabeledCard}`}>
<CardContent align="center">
<Typography variant="h6" className={classes.label}>Unlabeled Data</Typography>
<Typography variant="body2">{`${summaryInfo.total_unlabeled} entries`}</Typography>
</CardContent>
</Card>
</Grid>
)}

{/* 3. Card for Validated Data */}
{summaryInfo && (
<Grid item xs={12} sm={6} md={4}>
<Card className={`${classes.card} ${classes.validatedCard}`}>
<CardContent align="center">
<Typography variant="h6" className={classes.label}>Validated Data</Typography>
<Typography variant="body2">{`${calculatePercentage(summaryInfo.total_duration_validated, summaryInfo.total_duration_labeled)}% validated`}</Typography>
</CardContent>
</Card>
</Grid>
)}

{/* 4. Card for Labeled Data Duration */}
{summaryInfo && (
<Grid item xs={12} sm={6} md={4}>
<Card className={`${classes.card} ${classes.labeledCard}`}>
<CardContent align="center">
<Typography variant="h6" className={classes.label}>Labeled Data Duration</Typography>
<Typography variant="body2">{`${secondsToHours(summaryInfo.total_duration_labeled)} hours`}</Typography>
</CardContent>
</Card>
</Grid>
)}

{/* 5. Card for Unlabeled Data Duration */}
{summaryInfo && (
<Grid item xs={12} sm={6} md={4}>
<Card className={`${classes.card} ${classes.unlabeledCard}`}>
<CardContent align="center">
<Typography variant="h6" className={classes.label}>Unlabeled Data Duration</Typography>
<Typography variant="body2">{`${secondsToHours(summaryInfo.total_duration_unlabeled)} hours`}</Typography>
</CardContent>
</Card>
</Grid>
)}

{/* 6. Card for Validated Data Duration */}
{summaryInfo && (
<Grid item xs={12} sm={6} md={4}>
<Card className={`${classes.card} ${classes.validatedCard}`}>
<CardContent align="center">
<Typography variant="h6" className={classes.label}>Validated Data Duration</Typography>
<Typography variant="body2">{`${secondsToHours(summaryInfo.total_duration_validated)} hours`}</Typography>
</CardContent>
</Card>
</Grid>
)}

{/* 7. Card for Progress Unlabeled - Labeled */}
{summaryInfo && (
<Grid item xs={12} sm={6} md={4}>
<Card className={`${classes.card} ${classes.unlabeledCard}`}>
<CardContent align="center">
<Typography variant="h6" className={classes.label}>Progress Unlabeled - Labeled</Typography>
<div className={classes.circularProgressbar}>
<CircularProgressbar
value={summaryInfo.sumofUnLabeled}
text={`${summaryInfo.sumofUnLabeled}%`}
styles={buildStyles({
strokeLinecap: 'butt',
textColor: '#301616',
pathColor: '#301616',
trailColor: '#d6d6d6',
})}
/>
</div>
</CardContent>
</Card>
</Grid>
)}

{/* 8. Card for Progress Labeled - Validated */}
{summaryInfo && (
<Grid item xs={12} sm={6} md={4}>
<Card className={`${classes.card} ${classes.labeledCard}`}>
<CardContent align="center">
<Typography variant="h6" className={classes.label}>Progress Labeled - Validated</Typography>
<div className={classes.circularProgressbar}>
<CircularProgressbar
value={calculatePercentage(summaryInfo.total_duration_validated, summaryInfo.total_duration_labeled)}
text={`${calculatePercentage(summaryInfo.total_duration_validated, summaryInfo.total_duration_labeled)}%`}
styles={buildStyles({
strokeLinecap: 'butt',
textColor: '#301616',
pathColor: '#301616',
trailColor: '#d6d6d6',
})}
/>
</div>
</CardContent>
</Card>
</Grid>
)}

{/* 9. Card for Progress Unlabeled - Validated */}
{summaryInfo && (
<Grid item xs={12} sm={6} md={4}>
<Card className={`${classes.card} ${classes.validatedCard}`}>
<CardContent align="center">
<Typography variant="h6" className={classes.label}>Progress Unlabeled - Validated</Typography>
<div className={classes.circularProgressbar}>
<CircularProgressbar
value={calculatePercentage(summaryInfo.total_duration_validated, summaryInfo.total_duration_unlabeled)}
text={`${calculatePercentage(summaryInfo.total_duration_validated, summaryInfo.total_duration_unlabeled)}%`}
styles={buildStyles({
strokeLinecap: 'butt',
textColor: '#301616',
pathColor: '#301616',
trailColor: '#d6d6d6',
})}
/>
</div>
</CardContent>
</Card>
</Grid>
)}
</Grid>
</Box>
);
Expand Down

0 comments on commit f50c832

Please sign in to comment.