[Update] Starting Up: Add model downloading animation for initialization(temporary).

src-ui/app/splash_component/SplashComponent.jsx

@@ -2,17 +2,50 @@ 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>
     );
 };