[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/App.jsx

@@ -88,8 +88,6 @@ const UiLanguageController = () => {
     const { i18n } = useTranslation();
 
     useEffect(() => {
-        console.log(currentUiLanguage.data);
-
         i18n.changeLanguage(currentUiLanguage.data);
     }, [currentUiLanguage.data]);
     return null;

src-ui/app/splash_component/SplashComponent.jsx

@@ -1,51 +1,12 @@
-import { useState, useEffect } from "react";
-
-import CircularProgress from '@mui/material/CircularProgress';
 import styles from "./SplashComponent.module.scss";
-import {
-    useCTranslate2WeightTypeStatus,
-    useWhisperWeightTypeStatus,
-} from "@logics_configs";
+import { StartUpProgressContainer } from "./start_up_progress_container/StartUpProgressContainer/";
+import { DownloadModelsContainer } from "./download_models_container/DownloadModelsContainer/";
 
 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>
+            <StartUpProgressContainer />
+            <DownloadModelsContainer />
         </div>
     );
 };

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);
+}

src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.jsx

@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import styles from "./StartUpProgressContainer.module.scss";
+
+import { useInitProgress } from "@logics_common";
+import chat_white_square from "@images/chato_white_square.png";
+import vrct_explanation from "@images/vrchat_chatbox_trasnlator_transcription.png";
+import vrct_starting_up from "@images/vrct_starting_up.png";
+
+export const StartUpProgressContainer = () => {
+    const { currentInitProgress } = useInitProgress();
+
+    const progress = currentInitProgress.data;
+    return (
+        <div className={styles.container}>
+            <div className={styles.progress_bar_wrapper}>
+                {[...Array(4)].map((_, index) => (
+                    <div
+                        key={index}
+                        className={clsx(styles.progress_bar, {
+                            [styles.progressed]: index < progress && progress !== 0,
+                        })}
+                    >
+                        {index === 3
+                            ?
+                            <div className={styles.chato_box}>
+                            <img src={chat_white_square} className={styles.chato_img}/>
+                            </div>
+                            : null
+                        }
+                    </div>
+                ))}
+            </div>
+            <div className={styles.labels_wrapper}>
+                <img src={vrct_starting_up} className={styles.vrct_starting_up_img}/>
+                <img src={vrct_explanation} className={styles.vrct_explanation_img}/>
+            </div>
+        </div>
+    );
+};

src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.module.scss

@@ -0,0 +1,100 @@
+$progress_ease: cubic-bezier(0, 1, 0.75, 1);
+
+.container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+}
+
+.progress_bar_wrapper {
+    position: absolute;
+    top: 48%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    gap: 36px;
+}
+
+.progress_bar {
+    width: 60px;
+    height: 2px;
+    position: relative;
+}
+
+.progress_bar::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 100%;
+    background-color: var(--dark_200_color);
+    transition: width 0.3s $progress_ease;
+}
+
+.progress_bar.progressed::before {
+    width: 100%;
+}
+
+.progress_bar:last-child::before {
+    background-color: var(--primary_400_color);
+}
+
+
+.chato_box {
+    position: relative;
+    top: 0;
+    transform: translateY(-100%);
+    width: 100%;
+    height: 8rem;
+    overflow: hidden;
+}
+
+.chato_img {
+    position: absolute;
+    top: 150%;
+    left: 51%;
+    transform: translate(-50%, -50%) rotate(-90deg);
+    width: 2.8rem;
+    transition: all 0.3s $progress_ease 0.2s;
+}
+
+.progress_bar.progressed .chato_img {
+    top: 50%;
+    transform: translate(-50%, -50%) rotate(30deg);
+    animation: infinite-rotation 20s linear infinite 0.5s;
+}
+
+@keyframes infinite-rotation {
+    from {
+        transform: translate(-50%, -50%) rotate(30deg);
+    }
+    to {
+        transform: translate(-50%, -50%) rotate(390deg);
+    }
+}
+
+.labels_wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.vrct_starting_up_img {
+    position: absolute;
+    top: 68%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100px;
+    // transform: translate(-50%, 50%);
+}
+.vrct_explanation_img {
+    position: absolute;
+    bottom: 4px;
+    right: 10px;
+    width: 280px;
+    // transform: translate(-50%, 50%);
+}

src-ui/logics/common/index.js

@@ -1,3 +1,4 @@
+export { useInitProgress } from "./useInitProgress";
 export { useIsBackendReady } from "./useIsBackendReady";
 export { useWindow } from "./useWindow";
 export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";

src-ui/logics/common/useInitProgress.js

@@ -0,0 +1,10 @@
+import { useStore_InitProgress } from "@store";
+
+export const useInitProgress = () => {
+    const { currentInitProgress, updateInitProgress } = useStore_InitProgress();
+
+    return {
+        currentInitProgress,
+        updateInitProgress,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -2,6 +2,7 @@ import { translator_status } from "@ui_configs";
 import { arrayToObject } from "@utils";
 
 import {
+    useInitProgress,
     useIsBackendReady,
     useWindow,
     useMessage,
@@ -63,6 +64,7 @@ import {
 } from "@logics_configs";
 
 export const useReceiveRoutes = () => {
+    const { updateInitProgress } = useInitProgress();
     const { updateIsBackendReady } = useIsBackendReady();
     const { restoreWindowGeometry } = useWindow();
     const { updateIsMainPageCompactMode } = useIsMainPageCompactMode();
@@ -156,6 +158,7 @@ export const useReceiveRoutes = () => {
     const routes = {
         // Common
         "/run/feed_watchdog": () => {},
+        "/run/initialization_progress": updateInitProgress,
         "/get/data/main_window_geometry": restoreWindowGeometry,
         "/set/data/main_window_geometry": () => {},
         "/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"),
@@ -311,8 +314,9 @@ export const useReceiveRoutes = () => {
 
         "/get/data/selectable_ctranslate2_weight_type_dict": updateDownloadedCTranslate2WeightTypeStatus,
 
-        "/run/download_ctranslate2_weight": updateDownloadProgressCTranslate2WeightTypeStatus,
         "/run/downloaded_ctranslate2_weight": downloadedCTranslate2WeightType,
+        "/run/download_ctranslate2_weight": () => {},
+        "/run/download_progress_ctranslate2_weight": updateDownloadProgressCTranslate2WeightTypeStatus,
 
         // Transcription
         "/get/data/mic_record_timeout": updateMicRecordTimeout,
@@ -370,8 +374,9 @@ export const useReceiveRoutes = () => {
 
         "/get/data/selectable_whisper_weight_type_dict": updateDownloadedWhisperWeightTypeStatus,
 
-        "/run/download_whisper_weight": updateDownloadProgressWhisperWeightTypeStatus,
         "/run/downloaded_whisper_weight": downloadedWhisperWeightType,
+        "/run/download_whisper_weight": () => {},
+        "/run/download_progress_whisper_weight": updateDownloadProgressWhisperWeightTypeStatus,
 
         // VR
         "/get/data/overlay_small_log": updateIsEnabledOverlaySmallLog,

src-ui/store.js

@@ -110,6 +110,7 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma
 }, "MainFunctionsStateMemory");
 export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting");
 export const { atomInstance: Atom_IsSoftwareUpdateAvailable, useHook: useStore_IsSoftwareUpdateAvailable } = createAtomWithHook(false, "IsSoftwareUpdateAvailable");
+export const { atomInstance: Atom_InitProgress, useHook: useStore_InitProgress } = createAtomWithHook(0, "InitProgress");
 
 // Main Page
 // Functions