[Update] Add Starting Up Animation and downloading models progress display.

Backend: Move the init progressed position 4 to a little bit earlier.

src-ui/app/splash_component/download_models_container/DownloadModelsContainer.jsx

@@ -0,0 +1,69 @@
+import styles from "./DownloadModelsContainer.module.scss";
+import vrct_logo_for_dark_mode from "@images/vrct_logo_for_dark_mode.png";
+import vrct_now_downloading from "@images/VRCT_now_downloading.png";
+
+import {
+    useCTranslate2WeightTypeStatus,
+    useWhisperWeightTypeStatus,
+} from "@logics_configs";
+
+export const DownloadModelsContainer = () => {
+    const { currentCTranslate2WeightTypeStatus } = useCTranslate2WeightTypeStatus();
+    const { currentWhisperWeightTypeStatus } = useWhisperWeightTypeStatus();
+
+    const c_translate_2 = currentCTranslate2WeightTypeStatus.data.find(d => d.id === "small");
+    const whisper = currentWhisperWeightTypeStatus.data.find(d => d.id === "base");
+
+    if (c_translate_2.progress === null && whisper.progress === null) return null;
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.progress_container}>
+                <DownloadModelsProgress progress={c_translate_2.progress} type_label="CTranslate2 Model"/>
+                <DownloadModelsProgress progress={whisper.progress} type_label="Whisper Model"/>
+            </div>
+            <div className={styles.labels_wrapper}>
+                <img src={vrct_logo_for_dark_mode} className={styles.logo_img}/>
+                <img src={vrct_now_downloading} className={styles.vrct_now_downloading_img}/>
+            </div>
+        </div>
+    );
+};
+
+
+const DownloadModelsProgress = (props) => {
+    if (props.progress === null) return null;
+    const circular_progress = Math.floor(props.progress / 5) * 5;
+
+    const progress_color = generateGradientColor({
+        value: circular_progress,
+        colorStart: [242, 242, 242], // #f2f2f2
+        colorEnd: [72, 164, 149], // #48a495
+    });
+
+    return(
+        <div className={styles.progress_bar_container}>
+            <div className={styles.progress_bar_wrapper}>
+                <div
+                    className={styles.progress_bar}
+                    style={{
+                        width: `${props.progress}%`,
+                        backgroundColor: progress_color,
+                    }}
+                />
+            </div>
+            <p className={styles.progress_label}>{`${props.type_label}: ${Math.round(props.progress)}%`}</p>
+        </div>
+    );
+};
+
+
+const generateGradientColor = ({ value, colorStart, colorEnd }) => {
+    const normalizedValue = Math.max(0, Math.min(100, value)) / 100;
+    const interpolatedColor = colorStart.map((start, i) => {
+        const end = colorEnd[i];
+        return Math.round(start + (end - start) * normalizedValue);
+    });
+    const hexColor = `#${interpolatedColor.map(val => val.toString(16).padStart(2, '0')).join('')}`;
+    return hexColor;
+};

src-ui/app/splash_component/download_models_container/DownloadModelsContainer.module.scss

@@ -0,0 +1,63 @@
+.container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    background-color: var(--dark_888_color);
+}
+
+.progress_container {
+    position: absolute;
+    top: 77%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    gap: 6px;
+    display: flex;
+    flex-direction: column;
+}
+
+.labels_wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.logo_img {
+    position: absolute;
+    top: 42%;
+    left: 50%;
+    width: 280px;
+    transform: translate(-50%, -50%);
+}
+.vrct_now_downloading_img {
+    position: absolute;
+    bottom: 2px;
+    right: 10px;
+    width: 300px;
+}
+
+.progress_bar_container {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    justify-content: center;
+}
+
+.progress_bar_wrapper {
+    background-color: var(--dark_800_color);
+}
+
+$progress_ease: cubic-bezier(0, 1, 0.75, 1);
+.progress_bar {
+    height: 8px;
+    transition: width 0.3s $progress_ease;
+}
+
+.progress_label {
+    text-align: end;
+    font-size: 12px;
+    color: var(--dark_400_color);
+}