[Update] Add VRCT Availability Status that if the status set to false, that is when ai models has not been detected by backend, can't use VRCT.

src-ui/app/App.jsx

@@ -1,9 +1,5 @@
 import { useTranslation } from "react-i18next";
 
-import {
-    useWindow,
-} from "@logics_common";
-
 import {
     KeyEventController,
     StartPythonController,
@@ -23,9 +19,10 @@ import { UpdatingComponent } from "./updating_component/UpdatingComponent";
 import { ModalController } from "./modal_controller/ModalController";
 import { SnackbarController } from "./snackbar_controller/SnackbarController";
 import styles from "./App.module.scss";
-import { useIsBackendReady, useIsSoftwareUpdating } from "@logics_common";
+import { useIsBackendReady, useIsSoftwareUpdating, useIsVrctAvailable, useWindow } from "@logics_common";
 
 export const App = () => {
+    const { currentIsVrctAvailable } = useIsVrctAvailable();
     const { currentIsBackendReady } = useIsBackendReady();
     const { WindowGeometryController } = useWindow();
     const { i18n } = useTranslation();
@@ -42,10 +39,12 @@ export const App = () => {
             <TransparencyController />
             <WindowGeometryController />
 
-            {currentIsBackendReady.data === false
+            {(currentIsBackendReady.data === false || currentIsVrctAvailable.data === false)
                 ? <SplashComponent />
                 : <Contents  key={i18n.language}/>
             }
+
+            <SnackbarController />
         </div>
     );
 };
@@ -61,7 +60,6 @@ const Contents = () => {
                 <ConfigPage />
                 <MainPage />
                 <ModalController />
-                <SnackbarController />
             </div>
             :
             <UpdatingComponent />

src-ui/app/snackbar_controller/SnackbarController.jsx

@@ -17,17 +17,23 @@ export const SnackbarController = () => {
         [styles.is_error]: currentNotificationStatus.data.status === "error",
     });
 
+    const settings = currentNotificationStatus.data;
+
+    let hide_duration = 5000;
+    if (settings.options?.hide_duration === null) hide_duration = null;
+    if (Number(settings.options?.hide_duration)) hide_duration = settings.options.hide_duration;
+
     return (
         <div>
             <Snackbar
-                open={currentNotificationStatus.data.is_open}
+                open={settings.is_open}
                 onClose={handleClose}
                 TransitionComponent={SlideTransition}
-                key={currentNotificationStatus.data.key}
-                autoHideDuration={5000}
+                key={settings.key}
+                autoHideDuration={hide_duration}
             >
                 <div className={snackbar_classname}>
-                    <p className={styles.snackbar_message}>{currentNotificationStatus.data.message}</p>
+                    <p className={styles.snackbar_message}>{settings.message}</p>
                 </div>
             </Snackbar>
         </div>

src-ui/logics/common/index.js

@@ -11,3 +11,4 @@ export { useMessage } from "./useMessage";
 export { useUpdateSoftware } from "./useUpdateSoftware";
 export { useVolume } from "./useVolume";
 export { useHandleNetworkConnection } from "./useHandleNetworkConnection";
+export { useIsVrctAvailable } from "./useIsVrctAvailable";

src-ui/logics/common/useHandleNetworkConnection.js

@@ -6,7 +6,9 @@ export const useHandleNetworkConnection = () => {
 
     const handleNetworkConnection = (is_network_connected) => {
         if (!is_network_connected) {
-            showNotification_Error("Network is not connected. Some of the function will not work.");
+            showNotification_Error("Network is not connected. Some of the function will not work.", {
+                hide_duration: 8000,
+            });
         }
     };
 

src-ui/logics/common/useIsVrctAvailable.js

@@ -0,0 +1,10 @@
+import { useStore_IsVrctAvailable } from "@store";
+
+export const useIsVrctAvailable = () => {
+    const { currentIsVrctAvailable, updateIsVrctAvailable } = useStore_IsVrctAvailable();
+
+    return {
+        currentIsVrctAvailable,
+        updateIsVrctAvailable,
+    };
+};

src-ui/logics/common/useNotificationStatus.js

@@ -5,12 +5,13 @@ export const useNotificationStatus = () => {
 
     const generateRandomKey = () => Math.random();
 
-    const showNotification_Error = (message) => {
+    const showNotification_Error = (message, options = {}) => {
         updateNotificationStatus({
             status: "error",
             is_open: true,
             key: generateRandomKey(),
             message: message,
+            options: options,
         });
     };
 
@@ -20,6 +21,7 @@ export const useNotificationStatus = () => {
             is_open: true,
             key: generateRandomKey(),
             message: message,
+            options: options,
         });
     };
 

src-ui/logics/useReceiveRoutes.js

@@ -2,6 +2,7 @@ import { translator_status } from "@ui_configs";
 import { arrayToObject } from "@utils";
 
 import {
+    useIsVrctAvailable,
     useNotificationStatus,
     useHandleNetworkConnection,
 
@@ -74,6 +75,7 @@ import {
 } from "@logics_configs";
 
 export const useReceiveRoutes = () => {
+    const { updateIsVrctAvailable } = useIsVrctAvailable();
     const { updateComputeMode } = useComputeMode();
     const { updateInitProgress } = useInitProgress();
     const { updateIsBackendReady } = useIsBackendReady();
@@ -184,6 +186,12 @@ export const useReceiveRoutes = () => {
         // Common
         "/run/feed_watchdog": () => {},
         "/run/initialization_progress": updateInitProgress,
+        "/run/enable_ai_models": (is_ai_models_available) => {
+            if (is_ai_models_available === false) {
+                updateIsVrctAvailable(false);
+                showNotification_Error("AI models have not been detected. Check the network connection and restart VRCT (it will download automatically, normally).", { hide_duration: null });
+            }
+        },
         "/get/data/compute_mode": updateComputeMode,
         "/get/data/main_window_geometry": restoreWindowGeometry,
         "/set/data/main_window_geometry": () => {},
@@ -481,6 +489,7 @@ export const useReceiveRoutes = () => {
         "/get/data/speaker_no_speech_prob": ()=>{}, // Not implemented on UI yet
         "/get/data/convert_message_to_romaji": ()=>{}, // Not implemented on UI yet
         "/get/data/convert_message_to_hiragana": ()=>{}, // Not implemented on UI yet
+        "/get/data/transcription_engines": ()=>{}, // Not implemented on UI yet. (if ai_models has not been detected, this will be blank array[]. if the ai_models are ok but just network has not connected, it'l be only ["Whisper"])
     };
 
     const error_routes = {

src-ui/store.js

@@ -106,6 +106,7 @@ const createAtomWithHook = (initialValue, base_name, options) => {
 
 // Common
 export const { atomInstance: Atom_IsBackendReady, useHook: useStore_IsBackendReady } = createAtomWithHook(false, "IsBackendReady");
+export const { atomInstance: Atom_IsVrctAvailable, useHook: useStore_IsVrctAvailable } = createAtomWithHook(true, "IsVrctAvailable");
 export const { atomInstance: Atom_ComputeMode, useHook: useStore_ComputeMode } = createAtomWithHook("", "ComputeMode");
 export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
 export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_MainFunctionsStateMemory } = createAtomWithHook({