51 lines
1.9 KiB
JavaScript
51 lines
1.9 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
import styles from "./SplashComponent.module.scss";
|
|
import {
|
|
useCTranslate2WeightTypeStatus,
|
|
useWhisperWeightTypeStatus,
|
|
} from "@logics_configs";
|
|
|
|
export const SplashComponent = () => {
|
|
const { currentCTranslate2WeightTypeStatus } = useCTranslate2WeightTypeStatus();
|
|
const { currentWhisperWeightTypeStatus } = useWhisperWeightTypeStatus();
|
|
|
|
const [circular_color, setCircularColor] = useState("");
|
|
useEffect(() => {
|
|
const circular_color = getComputedStyle(document.documentElement).getPropertyValue("--primary_300_color");
|
|
setCircularColor(circular_color.trim());
|
|
}, []);
|
|
|
|
console.log(currentCTranslate2WeightTypeStatus);
|
|
const c_translate_2 = currentCTranslate2WeightTypeStatus.data.find(d => d.id === "small");
|
|
const whisper = currentWhisperWeightTypeStatus.data.find(d => d.id === "base");
|
|
console.log(c_translate_2, whisper);
|
|
|
|
|
|
|
|
return (
|
|
<div>
|
|
<DownloadModelsProgress color={circular_color} progress={c_translate_2.progress}/>
|
|
<CircularProgress size="14rem" sx={{ color: circular_color }}/>
|
|
<DownloadModelsProgress color={circular_color} progress={whisper.progress}/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const DownloadModelsProgress = (props) => {
|
|
if (props.progress === null) return null;
|
|
const circular_progress = Math.floor(props.progress / 10) * 10;
|
|
|
|
return(
|
|
<div className={styles.progress_container}>
|
|
<CircularProgress
|
|
variant={(props.progress === 100) ? "indeterminate" : "determinate"}
|
|
value={circular_progress}
|
|
size="4rem"
|
|
sx={{ color: props.color }}
|
|
/>
|
|
<p className={styles.progress_label}>{`${Math.round(props.progress)}%`}</p>
|
|
</div>
|
|
);
|
|
}; |