[Refactor] (Huge Refactoring) ReceiveRoutes: change the way define endpoints, hooks and methods.

Remove 'multi language translation enable/disable' related methods that is no longer in use from quite ago.

src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx

@@ -1,12 +1,12 @@
 import { useTranslation } from "react-i18next";
 
-import { useSelectableLanguageList } from "@logics_main";
+import { useLanguageSettings } from "@logics_main";
 import styles from "./LanguageSelector.module.scss";
 
 import { LanguageSelectorTopBar } from "./language_selector_top_bar/LanguageSelectorTopBar";
 export const LanguageSelector = ({ title, onClickFunction }) => {
     const { t } = useTranslation();
-    const { currentSelectableLanguageList } = useSelectableLanguageList();
+    const { currentSelectableLanguageList } = useLanguageSettings();
 
     const groupLanguagesByFirstLetter = (languages) => {
         return languages.reduce((acc, { language, country }) => {

src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx

@@ -10,7 +10,7 @@ import { useLanguageSettings } from "@logics_main";
 export const LanguageSwapButton = () => {
     const [isHovered, setIsHovered] = useState(false);
     const { t } = useTranslation();
-    const { runLanguageSwap } = useLanguageSettings();
+    const { swapSelectedLanguages } = useLanguageSettings();
 
     const label = isHovered
         ? t("main_page.swap_button_label")
@@ -29,7 +29,7 @@ export const LanguageSwapButton = () => {
                 className={styles.swap_button_wrapper}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
-                onClick={runLanguageSwap}
+                onClick={swapSelectedLanguages}
             >
                 <NarrowArrowDownSvg className={clsx(styles.narrow_arrow_down_svg, styles.reverse)} />
                 <p className={labelClassName}>{label}</p>

src-ui/logics/common/useHandleOscQuery.js

@@ -7,7 +7,10 @@ export const useHandleOscQuery = () => {
     const { showNotification_Warning } = useNotificationStatus();
     const { updateEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
 
-    const handleOscQuery = ({ is_osc_query_enabled, disabled_functions }) => {
+    const handleOscQuery = (payload) => {
+        const is_osc_query_enabled = payload.data;
+        const disabled_functions = payload.disabled_functions;
+
         if (is_osc_query_enabled) {
             updateEnableVrcMicMuteSync(prev => ({
                 ...prev.data,

src-ui/logics/common/useIsVrctAvailable.js

@@ -1,10 +1,21 @@
 import { useStore_IsVrctAvailable } from "@store";
+import { useNotificationStatus } from "@logics_common";
 
 export const useIsVrctAvailable = () => {
     const { currentIsVrctAvailable, updateIsVrctAvailable } = useStore_IsVrctAvailable();
+    const { showNotification_Success, showNotification_Error } = useNotificationStatus();
+
+    const handleAiModelsAvailability = (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 });
+        }
+    };
 
     return {
         currentIsVrctAvailable,
         updateIsVrctAvailable,
+
+        handleAiModelsAvailability,
     };
 };

src-ui/logics/common/useMessage.js

@@ -42,6 +42,9 @@ export const useMessage = () => {
             messages: {message: message},
         });
     };
+    const addSystemMessageLog_FromBackend = (payload) => {
+        addSystemMessageLog(payload.message);
+    };
 
     const updateSentMessageLogById = (payload) => {
         updateMessageLogs(updateItemById(payload.id, payload.translation));
@@ -66,6 +69,7 @@ export const useMessage = () => {
         currentMessageLogs,
         sendMessage,
         addSystemMessageLog,
+        addSystemMessageLog_FromBackend,
         updateSentMessageLogById,
         addSentMessageLog,
         addReceivedMessageLog,

src-ui/logics/common/useOpenFolder.js

@@ -2,16 +2,26 @@ import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useOpenFolder = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
+
     const openFolder_MessageLogs = () => {
         asyncStdoutToPython("/run/open_filepath_logs");
     };
+    const openedFolder_MessageLogs = () => {
+        console.log("Opened Directory, Message Logs");
+    };
 
     const openFolder_ConfigFile = () => {
         asyncStdoutToPython("/run/open_filepath_config_file");
     };
+    const openedFolder_ConfigFile = () => {
+        console.log("Opened Directory, Config File");
+    };
 
     return {
         openFolder_MessageLogs,
         openFolder_ConfigFile,
+
+        openedFolder_MessageLogs,
+        openedFolder_ConfigFile,
     };
 };

src-ui/logics/common/useSoftwareVersion.js

@@ -13,6 +13,13 @@ export const useSoftwareVersion = () => {
         asyncStdoutToPython("/get/data/version");
     };
 
+    const updateSoftwareVersionInfo = (payload) => {
+        updateLatestSoftwareVersionInfo(prev => ({
+            is_update_available: payload.is_update_available,
+            new_version: payload.new_version || prev.data.new_version,
+        }));
+    };
+
     const isPluginCompatible = (main_version, lower_version, upper_version) => {
         // lower_version 以上かつ upper_version 以下なら互換性ありと判定
         return semver.gte(main_version, lower_version) && semver.lte(main_version, upper_version);
@@ -32,6 +39,7 @@ export const useSoftwareVersion = () => {
         getSoftwareVersion,
         updateSoftwareVersion,
 
+        updateSoftwareVersionInfo,
         currentLatestSoftwareVersionInfo,
         updateLatestSoftwareVersionInfo,
 

src-ui/logics/configs/device/useMicDeviceList.js

@@ -1,5 +1,6 @@
 import { useStore_MicDeviceList } from "@store";
 import { useStdoutToPython } from "@useStdoutToPython";
+import { arrayToObject } from "@utils";
 
 export const useMicDeviceList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
@@ -10,9 +11,17 @@ export const useMicDeviceList = () => {
         asyncStdoutToPython("/get/data/mic_device_list");
     };
 
+
+    const updateMicDeviceList_FromBackend = (payload) => {
+        updateMicDeviceList(arrayToObject(payload));
+    };
+
+
     return {
         currentMicDeviceList,
         getMicDeviceList,
         updateMicDeviceList,
+
+        updateMicDeviceList_FromBackend,
     };
 };

src-ui/logics/configs/device/useMicHostList.js

@@ -1,5 +1,6 @@
 import { useStore_MicHostList } from "@store";
 import { useStdoutToPython } from "@useStdoutToPython";
+import { arrayToObject } from "@utils";
 
 export const useMicHostList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
@@ -10,9 +11,15 @@ export const useMicHostList = () => {
         asyncStdoutToPython("/get/data/mic_host_list");
     };
 
+    const updateMicHostList_FromBackend = (payload) => {
+        updateMicHostList(arrayToObject(payload));
+    };
+
     return {
         currentMicHostList,
         getMicHostList,
         updateMicHostList,
+
+        updateMicHostList_FromBackend,
     };
 };

src-ui/logics/configs/device/useSelectedMicHost.js

@@ -1,10 +1,13 @@
 import { useStore_SelectedMicHost } from "@store";
 import { useStdoutToPython } from "@useStdoutToPython";
+import { useSelectedMicDevice } from "@logics_configs";
 
 export const useSelectedMicHost = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { currentSelectedMicHost, updateSelectedMicHost, pendingSelectedMicHost } = useStore_SelectedMicHost();
 
+    const { updateSelectedMicDevice } = useSelectedMicDevice();
+
     const getSelectedMicHost = () => {
         pendingSelectedMicHost();
         asyncStdoutToPython("/get/data/selected_mic_host");
@@ -15,10 +18,20 @@ export const useSelectedMicHost = () => {
         asyncStdoutToPython("/set/data/selected_mic_host", selected_mic_host);
     };
 
+
+    // Need refactoring (Duplicated, Host, Device)
+    const updateSelectedMicHostAndDevice = (payload) => {
+        updateSelectedMicHost(payload.host);
+        updateSelectedMicDevice(payload.device);
+    };
+
+
     return {
         currentSelectedMicHost,
         getSelectedMicHost,
         updateSelectedMicHost,
         setSelectedMicHost,
+
+        updateSelectedMicHostAndDevice,
     };
 };

src-ui/logics/configs/device/useSpeakerDeviceList.js

@@ -1,5 +1,6 @@
 import { useStore_SpeakerDeviceList } from "@store";
 import { useStdoutToPython } from "@useStdoutToPython";
+import { arrayToObject } from "@utils";
 
 export const useSpeakerDeviceList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
@@ -10,9 +11,16 @@ export const useSpeakerDeviceList = () => {
         asyncStdoutToPython("/get/data/speaker_device_list");
     };
 
+    const updateSpeakerDeviceList_FromBackend = (payload) => {
+        updateSpeakerDeviceList(arrayToObject(payload));
+    };
+
+
     return {
         currentSpeakerDeviceList,
         getSpeakerDeviceList,
         updateSpeakerDeviceList,
+
+        updateSpeakerDeviceList_FromBackend,
     };
 };

src-ui/logics/configs/others/useEnableVrcMicMuteSync.js

@@ -19,10 +19,18 @@ export const useEnableVrcMicMuteSync = () => {
         }
     };
 
+    const updateEnableVrcMicMuteSync_FromBackend = (payload) => {
+        updateEnableVrcMicMuteSync((old_value) => {
+            return {...old_value.data, is_enabled: payload};
+        });
+    };
+
     return {
         currentEnableVrcMicMuteSync,
         getEnableVrcMicMuteSync,
         toggleEnableVrcMicMuteSync,
         updateEnableVrcMicMuteSync,
+
+        updateEnableVrcMicMuteSync_FromBackend,
     };
 };

src-ui/logics/configs/transcription/useMicWordFilterList.js

@@ -15,10 +15,27 @@ export const useMicWordFilterList = () => {
         asyncStdoutToPython("/set/data/mic_word_filter", selected_mic_word_filter);
     };
 
+    const updateMicWordFilterList_FromBackend = (payload) => {
+        updateMicWordFilterList((prev_list) => {
+            const updated_list = [...prev_list.data];
+            for (const value of payload) {
+                const existing_item = updated_list.find(item => item.value === value);
+                if (existing_item) {
+                    existing_item.is_redoable = false;
+                } else {
+                    updated_list.push({ value, is_redoable: false });
+                }
+            }
+            return updated_list;
+        });
+    };
+
     return {
         currentMicWordFilterList,
         getMicWordFilterList,
         updateMicWordFilterList,
         setMicWordFilterList,
+
+        updateMicWordFilterList_FromBackend,
     };
 };

src-ui/logics/configs/transcription/useSelectableWhisperComputeDeviceList.js

@@ -1,5 +1,6 @@
 import { useStore_SelectableWhisperComputeDeviceList } from "@store";
 import { useStdoutToPython } from "@useStdoutToPython";
+import { transformToIndexedArray } from "@utils";
 
 export const useSelectableWhisperComputeDeviceList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
@@ -10,9 +11,15 @@ export const useSelectableWhisperComputeDeviceList = () => {
         asyncStdoutToPython("/get/data/transcription_compute_device_list");
     };
 
+    const updateSelectableWhisperComputeDeviceList_FromBackend = (payload) => {
+        updateSelectableWhisperComputeDeviceList(transformToIndexedArray(payload));
+    };
+
     return {
         currentSelectableWhisperComputeDeviceList,
         getSelectableWhisperComputeDeviceList,
         updateSelectableWhisperComputeDeviceList,
+
+        updateSelectableWhisperComputeDeviceList_FromBackend,
     };
 };

src-ui/logics/configs/translation/useDeepLAuthKey.js

@@ -23,6 +23,9 @@ export const useDeepLAuthKey = () => {
         pendingDeepLAuthKey();
         asyncStdoutToPython("/delete/data/deepl_auth_key");
     };
+    const deletedDeepLAuthKey = () => {
+        updateDeepLAuthKey("");
+    };
 
     const savedDeepLAuthKey = (data) => {
         updateDeepLAuthKey(data);
@@ -36,6 +39,7 @@ export const useDeepLAuthKey = () => {
         setDeepLAuthKey,
         deleteDeepLAuthKey,
 
+        deletedDeepLAuthKey,
         savedDeepLAuthKey,
     };
 };

src-ui/logics/configs/translation/useSelectableCTranslate2ComputeDeviceList.js

@@ -1,5 +1,6 @@
 import { useStore_SelectableCTranslate2ComputeDeviceList } from "@store";
 import { useStdoutToPython } from "@useStdoutToPython";
+import { transformToIndexedArray } from "@utils";
 
 export const useSelectableCTranslate2ComputeDeviceList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
@@ -10,9 +11,15 @@ export const useSelectableCTranslate2ComputeDeviceList = () => {
         asyncStdoutToPython("/get/data/translation_compute_device_list");
     };
 
+    const updateSelectableCTranslate2ComputeDeviceList_FromBackend = (payload) => {
+        updateSelectableCTranslate2ComputeDeviceList(transformToIndexedArray(payload));
+    };
+
     return {
         currentSelectableCTranslate2ComputeDeviceList,
         getSelectableCTranslate2ComputeDeviceList,
         updateSelectableCTranslate2ComputeDeviceList,
+
+        updateSelectableCTranslate2ComputeDeviceList_FromBackend,
     };
 };

src-ui/logics/main/index.js

@@ -4,4 +4,3 @@ export { useLanguageSettings } from "./useLanguageSettings";
 export { useMainFunction } from "./useMainFunction";
 export { useMessageLogScroll } from "./useMessageLogScroll";
 export { useMessageInputBoxRatio } from "./useMessageInputBoxRatio";
-export { useSelectableLanguageList } from "./useSelectableLanguageList";

src-ui/logics/main/useLanguageSettings.js

@@ -1,13 +1,10 @@
-import { useStore_SelectedPresetTabNumber, useStore_EnableMultiTranslation, useStore_SelectedYourLanguages, useStore_SelectedTargetLanguages, useStore_TranslationEngines, useStore_SelectedTranslationEngines } from "@store";
+import { useStore_SelectedPresetTabNumber, useStore_SelectedYourLanguages, useStore_SelectedTargetLanguages, useStore_TranslationEngines, useStore_SelectedTranslationEngines, useStore_SelectableLanguageList } from "@store";
 import { useStdoutToPython } from "@useStdoutToPython";
+import { translator_status } from "@ui_configs";
 
 export const useLanguageSettings = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const {
-        currentEnableMultiTranslation,
-        updateEnableMultiTranslation,
-        pendingEnableMultiTranslation,
-    } = useStore_EnableMultiTranslation();
+
     const {
         currentSelectedYourLanguages,
         updateSelectedYourLanguages,
@@ -34,10 +31,11 @@ export const useLanguageSettings = () => {
         pendingSelectedTranslationEngines,
     } = useStore_SelectedTranslationEngines();
 
-    const getEnableMultiTranslation = () => {
-        pendingEnableMultiTranslation();
-        asyncStdoutToPython("/get/data/multi_language_translation");
-    };
+    const {
+        currentSelectableLanguageList,
+        updateSelectableLanguageList,
+    } = useStore_SelectableLanguageList();
+
 
     const getSelectedPresetTabNumber = () => {
         pendingSelectedPresetTabNumber();
@@ -112,6 +110,16 @@ export const useLanguageSettings = () => {
         asyncStdoutToPython("/get/data/translation_engines");
     };
 
+    const updateTranslatorAvailability = (payload) => {
+        const keys = payload;
+        const updated_list = translator_status.map(translator => ({
+            ...translator,
+            is_available: keys.includes(translator.id),
+        }));
+        updateTranslationEngines(updated_list);
+    };
+
+
     const getSelectedTranslationEngines = () => {
         pendingSelectedTranslationEngines();
         asyncStdoutToPython("/get/data/selected_translation_engines");
@@ -124,12 +132,22 @@ export const useLanguageSettings = () => {
         asyncStdoutToPython("/set/data/selected_translation_engines", send_obj);
     };
 
-    const runLanguageSwap = () => {
+    const swapSelectedLanguages = () => {
         pendingSelectedYourLanguages();
         pendingSelectedTargetLanguages();
         asyncStdoutToPython("/run/swap_your_language_and_target_language");
     };
 
+    const updateBothSelectedLanguages = (payload) => {
+        updateSelectedYourLanguages(payload.your);
+        updateSelectedTargetLanguages(payload.target);
+    };
+
+
+    const getSelectableLanguageList = () => {
+        asyncStdoutToPython("/get/data/selectable_language_list");
+    };
+
 
     return {
         currentSelectedPresetTabNumber,
@@ -137,11 +155,6 @@ export const useLanguageSettings = () => {
         updateSelectedPresetTabNumber,
         setSelectedPresetTabNumber,
 
-        currentEnableMultiTranslation,
-        getEnableMultiTranslation,
-        updateEnableMultiTranslation,
-        // setEnableMultiTranslation,
-
         currentSelectedYourLanguages,
         getSelectedYourLanguages,
         updateSelectedYourLanguages,
@@ -158,12 +171,18 @@ export const useLanguageSettings = () => {
         currentTranslationEngines,
         getTranslationEngines,
         updateTranslationEngines,
+        updateTranslatorAvailability,
 
         currentSelectedTranslationEngines,
         getSelectedTranslationEngines,
         updateSelectedTranslationEngines,
         setSelectedTranslationEngines,
 
-        runLanguageSwap,
+        swapSelectedLanguages,
+        updateBothSelectedLanguages,
+
+        currentSelectableLanguageList,
+        getSelectableLanguageList,
+        updateSelectableLanguageList,
     };
 };

src-ui/logics/main/useSelectableLanguageList.js

@@ -1,17 +0,0 @@
-import { useStore_SelectableLanguageList } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useSelectableLanguageList = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectableLanguageList, updateSelectableLanguageList } = useStore_SelectableLanguageList();
-
-    const getSelectableLanguageList = () => {
-        asyncStdoutToPython("/get/data/selectable_language_list");
-    };
-
-    return {
-        currentSelectableLanguageList,
-        getSelectableLanguageList,
-        updateSelectableLanguageList,
-    };
-};

src-ui/logics/useReceiveRoutes.js

@@ -1,572 +1,356 @@
-import { translator_status } from "@ui_configs";
-import { arrayToObject } from "@utils";
-
+import * as common from "@logics_common";
+import * as main from "@logics_main";
+import * as configs from "@logics_configs";
 import { _useBackendErrorHandling } from "./_useBackendErrorHandling";
 
-import {
-    useIsVrctAvailable,
-    useNotificationStatus,
-    useHandleNetworkConnection,
-    useHandleOscQuery,
-
-    useSoftwareVersion,
-    useComputeMode,
-    useInitProgress,
-    useIsBackendReady,
-    useWindow,
-    useMessage,
-    useVolume,
-} from "@logics_common";
-
-import {
-    useMainFunction,
-    useSelectableLanguageList,
-    useLanguageSettings,
-    useIsMainPageCompactMode,
-    useMessageInputBoxRatio,
-} from "@logics_main";
-
-import {
-    useEnableAutoMicSelect,
-    useEnableAutoSpeakerSelect,
-    useMicHostList,
-    useSelectedMicHost,
-    useMicDeviceList,
-    useSelectedMicDevice,
-    useSpeakerDeviceList,
-    useSelectedSpeakerDevice,
-    useMicThreshold,
-    useSpeakerThreshold,
-    useEnableAutoClearMessageInputBox,
-    useEnableSendOnlyTranslatedMessages,
-    useEnableAutoExportMessageLogs,
-    useEnableVrcMicMuteSync,
-    useEnableSendMessageToVrc,
-    useEnableSendReceivedMessageToVrc,
-    useSelectedFontFamily,
-    useUiLanguage,
-    useUiScaling,
-    useMessageLogUiScaling,
-    useSendMessageButtonType,
-    useTransparency,
-    useMicRecordTimeout,
-    useMicPhraseTimeout,
-    useMicMaxWords,
-    useMicWordFilterList,
-    useSpeakerRecordTimeout,
-    useSpeakerPhraseTimeout,
-    useSpeakerMaxWords,
-    useDeepLAuthKey,
-    useCTranslate2WeightTypeStatus,
-    useSelectableCTranslate2ComputeDeviceList,
-    useSelectedCTranslate2ComputeDevice,
-    useSelectableWhisperComputeDeviceList,
-    useSelectedWhisperComputeDevice,
-    useSelectedCTranslate2WeightType,
-    useSelectedTranscriptionEngine,
-    useSelectedWhisperWeightType,
-    useWhisperWeightTypeStatus,
-    useIsEnabledOverlaySmallLog,
-    useOverlaySmallLogSettings,
-    useIsEnabledOverlayLargeLog,
-    useOverlayLargeLogSettings,
-    useOverlayShowOnlyTranslatedMessages,
-    useEnableNotificationVrcSfx,
-    useHotkeys,
-    usePlugins,
-    useOscIpAddress,
-    useOscPort,
-    useWebsocket,
-} from "@logics_configs";
-
-export const useReceiveRoutes = () => {
-    const { updateIsVrctAvailable } = useIsVrctAvailable();
-    const { updateComputeMode } = useComputeMode();
-    const { updateInitProgress } = useInitProgress();
-    const { updateIsBackendReady } = useIsBackendReady();
-    const { handleOscQuery } = useHandleOscQuery();
-    const { restoreWindowGeometry } = useWindow();
-    const { updateIsMainPageCompactMode } = useIsMainPageCompactMode();
-    const {
-        updateTranslationStatus,
-        updateTranscriptionSendStatus,
-        updateTranscriptionReceiveStatus,
-    } = useMainFunction();
-    const {
-        updateSelectedPresetTabNumber,
-        updateEnableMultiTranslation,
-        updateSelectedYourLanguages,
-        updateSelectedTargetLanguages,
-        updateTranslationEngines,
-        updateSelectedTranslationEngines,
-    } = useLanguageSettings();
-    const { updateSelectableLanguageList } = useSelectableLanguageList();
-    const {
-        addSystemMessageLog,
-        updateSentMessageLogById,
-        addSentMessageLog,
-        addReceivedMessageLog,
-    } = useMessage();
-    const { updateLatestSoftwareVersionInfo } = useSoftwareVersion();
-    const { updateSoftwareVersion } = useSoftwareVersion();
-    const { updateEnableAutoMicSelect } = useEnableAutoMicSelect();
-    const { updateEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
-    const { updateMicHostList } = useMicHostList();
-    const { updateSelectedMicHost } = useSelectedMicHost();
-    const { updateMicDeviceList } = useMicDeviceList();
-    const { updateSelectedMicDevice } = useSelectedMicDevice();
-    const { updateSpeakerDeviceList } = useSpeakerDeviceList();
-    const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-    const { updateMicThreshold, updateEnableAutomaticMicThreshold } = useMicThreshold();
-    const { updateSpeakerThreshold, updateEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
-
-    const { updateEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
-    const { updateEnableSendOnlyTranslatedMessages } = useEnableSendOnlyTranslatedMessages();
-    const { updateEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs();
-    const { updateEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
-    const { updateEnableSendMessageToVrc } = useEnableSendMessageToVrc();
-    const { updateEnableSendReceivedMessageToVrc } = useEnableSendReceivedMessageToVrc();
-
-    const { updateSendMessageButtonType } = useSendMessageButtonType();
-    const { updateUiLanguage } = useUiLanguage();
-    const { updateUiScaling } = useUiScaling();
-    const { updateMessageLogUiScaling } = useMessageLogUiScaling();
-    const {
-        updateVolumeVariable_Mic,
-        updateVolumeVariable_Speaker,
-        updateMicThresholdCheckStatus,
-        updateSpeakerThresholdCheckStatus,
-    } = useVolume();
-
-    const { updateMessageInputBoxRatio } = useMessageInputBoxRatio();
-    const { updateSelectedFontFamily } = useSelectedFontFamily();
-    const { updateTransparency } = useTransparency();
-
-    const { updateMicRecordTimeout } = useMicRecordTimeout();
-    const { updateMicPhraseTimeout } = useMicPhraseTimeout();
-    const { updateMicMaxWords } = useMicMaxWords();
-    const { updateMicWordFilterList } = useMicWordFilterList();
-
-    const { updateSpeakerRecordTimeout } = useSpeakerRecordTimeout();
-    const { updateSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
-    const { updateSpeakerMaxWords } = useSpeakerMaxWords();
-
-    const { updateDeepLAuthKey, savedDeepLAuthKey } = useDeepLAuthKey();
-    const { updateSelectedCTranslate2WeightType } = useSelectedCTranslate2WeightType();
-    const {
-        updateDownloadedCTranslate2WeightTypeStatus,
-        updateDownloadProgressCTranslate2WeightTypeStatus,
-        downloadedCTranslate2WeightType,
-    } = useCTranslate2WeightTypeStatus();
-    const { updateSelectableCTranslate2ComputeDeviceList } = useSelectableCTranslate2ComputeDeviceList();
-    const { updateSelectedCTranslate2ComputeDevice } = useSelectedCTranslate2ComputeDevice();
-    const { updateSelectableWhisperComputeDeviceList } = useSelectableWhisperComputeDeviceList();
-    const { updateSelectedWhisperComputeDevice } = useSelectedWhisperComputeDevice();
-
-    const { updateSelectedTranscriptionEngine } = useSelectedTranscriptionEngine();
-    const { updateSelectedWhisperWeightType } = useSelectedWhisperWeightType();
-    const {
-        updateDownloadedWhisperWeightTypeStatus,
-        updateDownloadProgressWhisperWeightTypeStatus,
-        downloadedWhisperWeightType,
-    } = useWhisperWeightTypeStatus();
-
-    const { updateOverlaySmallLogSettings } = useOverlaySmallLogSettings();
-    const { updateIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
-    const { updateOverlayLargeLogSettings } = useOverlayLargeLogSettings();
-    const { updateIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
-    const { updateOverlayShowOnlyTranslatedMessages } = useOverlayShowOnlyTranslatedMessages();
-    const { updateEnableNotificationVrcSfx } = useEnableNotificationVrcSfx();
-
-    const { updateHotkeys } = useHotkeys();
-    const { updateSavedPluginsStatus } = usePlugins();
-
-    const { updateOscIpAddress } = useOscIpAddress();
-    const { updateOscPort } = useOscPort();
-    const {
-        updateEnableWebsocket,
-        updateWebsocketHost,
-        updateWebsocketPort,
-    } = useWebsocket();
-
-
-
-    const { showNotification_Success, showNotification_Error } = useNotificationStatus();
-
-    const { handleNetworkConnection } = useHandleNetworkConnection();
-
-    const {
-        errorHandling_Backend,
-    } = _useBackendErrorHandling();
-
-    const routes = {
+export const ROUTE_META_LIST = [
     // 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": () => {},
-        "/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"),
-        "/run/open_filepath_config_file": () => console.log("Opened Directory, Config File"),
-        "/run/software_update_info": (payload) => {
-            updateLatestSoftwareVersionInfo(prev => ({
-                is_update_available: payload.is_update_available,
-                new_version: payload.new_version || prev.data.new_version,
-            }));
-        },
-        "/run/connected_network": handleNetworkConnection,
-        "/run/enable_osc_query": ({data, disabled_functions}) => {
-            handleOscQuery({
-                is_osc_query_enabled: data,
-                disabled_functions: disabled_functions,
-            });
-        },
+    { endpoint: "/run/feed_watchdog", ns: null, hook_name: null, method_name: null },
+    { endpoint: "/run/initialization_progress", ns: common, hook_name: "useInitProgress", method_name: "updateInitProgress" },
+    { endpoint: "/run/enable_ai_models", ns: common, hook_name: "useIsVrctAvailable", method_name: "handleAiModelsAvailability" },
+    { endpoint: "/get/data/compute_mode", ns: common, hook_name: "useComputeMode", method_name: "updateComputeMode" },
+
+    { endpoint: "/get/data/main_window_geometry", ns: common, hook_name: "useWindow", method_name: "restoreWindowGeometry" },
+    { endpoint: "/set/data/main_window_geometry", ns: null, hook_name: null, method_name: null },
+
+    { endpoint: "/run/open_filepath_logs", ns: common, hook_name: "useOpenFolder", method_name: "openedFolder_MessageLogs" },
+    { endpoint: "/run/open_filepath_config_file", ns: common, hook_name: "useOpenFolder", method_name: "openedFolder_ConfigFile" },
+
+    // Software Version
+    { endpoint: "/get/data/version", ns: common, hook_name: "useSoftwareVersion", method_name: "updateSoftwareVersion" },
+    // Latest Software Version Info
+    { endpoint: "/run/software_update_info", ns: common, hook_name: "useSoftwareVersion", method_name: "updateLatestSoftwareVersionInfo" },
+
+    { endpoint: "/run/connected_network", ns: common, hook_name: "useHandleNetworkConnection", method_name: "handleNetworkConnection" },
+    { endpoint: "/run/enable_osc_query", ns: common, hook_name: "useHandleOscQuery", method_name: "handleOscQuery" },
+
+    // Message (By typing)
+    { endpoint: "/run/send_message_box", ns: common, hook_name: "useMessage", method_name: "updateSentMessageLogById" },
+    { endpoint: "/run/typing_message_box", ns: null, hook_name: null, method_name: null },
+    { endpoint: "/run/stop_typing_message_box", ns: null, hook_name: null, method_name: null },
+    // Message Transcription
+    { endpoint: "/run/transcription_send_mic_message", ns: common, hook_name: "useMessage", method_name: "addSentMessageLog" },
+    { endpoint: "/run/transcription_receive_speaker_message", ns: common, hook_name: "useMessage", method_name: "addReceivedMessageLog" },
+
+    // System Messages
+    { endpoint: "/run/word_filter", ns: common, hook_name: "useMessage", method_name: "addSystemMessageLog_FromBackend" },
+
+
+    // Volume
+    { endpoint: "/run/check_mic_volume", ns: common, hook_name: "useVolume", method_name: "updateVolumeVariable_Mic" },
+    { endpoint: "/run/check_speaker_volume", ns: common, hook_name: "useVolume", method_name: "updateVolumeVariable_Speaker" },
+    { endpoint: "/set/enable/check_mic_threshold", ns: common, hook_name: "useVolume", method_name: "updateMicThresholdCheckStatus" },
+    { endpoint: "/set/disable/check_mic_threshold", ns: common, hook_name: "useVolume", method_name: "updateMicThresholdCheckStatus" },
+    { endpoint: "/set/enable/check_speaker_threshold", ns: common, hook_name: "useVolume", method_name: "updateSpeakerThresholdCheckStatus" },
+    { endpoint: "/set/disable/check_speaker_threshold", ns: common, hook_name: "useVolume", method_name: "updateSpeakerThresholdCheckStatus" },
+
+
+
 
     // Main Page
     // Page Controls
-        "/get/data/main_window_sidebar_compact_mode": updateIsMainPageCompactMode,
-        "/set/enable/main_window_sidebar_compact_mode": updateIsMainPageCompactMode,
-        "/set/disable/main_window_sidebar_compact_mode": updateIsMainPageCompactMode,
+    { endpoint: "/get/data/main_window_sidebar_compact_mode", ns: main, hook_name: "useIsMainPageCompactMode", method_name: "updateIsMainPageCompactMode" },
+    { endpoint: "/set/enable/main_window_sidebar_compact_mode", ns: main, hook_name: "useIsMainPageCompactMode", method_name: "updateIsMainPageCompactMode" },
+    { endpoint: "/set/disable/main_window_sidebar_compact_mode", ns: main, hook_name: "useIsMainPageCompactMode", method_name: "updateIsMainPageCompactMode" },
+
     // Main Functions
-        "/set/enable/translation": updateTranslationStatus,
-        "/set/disable/translation": updateTranslationStatus,
-        "/set/enable/transcription_send": updateTranscriptionSendStatus,
-        "/set/disable/transcription_send": updateTranscriptionSendStatus,
-        "/set/enable/transcription_receive": updateTranscriptionReceiveStatus,
-        "/set/disable/transcription_receive": updateTranscriptionReceiveStatus,
+    { endpoint: "/set/enable/translation", ns: main, hook_name: "useMainFunction", method_name: "updateTranslationStatus" },
+    { endpoint: "/set/disable/translation", ns: main, hook_name: "useMainFunction", method_name: "updateTranslationStatus" },
+    { endpoint: "/set/enable/transcription_send", ns: main, hook_name: "useMainFunction", method_name: "updateTranscriptionSendStatus" },
+    { endpoint: "/set/disable/transcription_send", ns: main, hook_name: "useMainFunction", method_name: "updateTranscriptionSendStatus" },
+    { endpoint: "/set/enable/transcription_receive", ns: main, hook_name: "useMainFunction", method_name: "updateTranscriptionReceiveStatus" },
+    { endpoint: "/set/disable/transcription_receive", ns: main, hook_name: "useMainFunction", method_name: "updateTranscriptionReceiveStatus" },
 
     // Language Settings
-        "/get/data/selected_tab_no": updateSelectedPresetTabNumber,
-        "/set/data/selected_tab_no": updateSelectedPresetTabNumber,
-        "/get/data/multi_language_translation": updateEnableMultiTranslation,
-        "/get/data/selected_your_languages": updateSelectedYourLanguages,
-        "/set/data/selected_your_languages": updateSelectedYourLanguages,
-        "/get/data/selected_target_languages": updateSelectedTargetLanguages,
-        "/set/data/selected_target_languages": updateSelectedTargetLanguages,
+    { endpoint: "/get/data/selected_tab_no", ns: main, hook_name: "useLanguageSettings", method_name: "updateSelectedPresetTabNumber" },
+    { endpoint: "/set/data/selected_tab_no", ns: main, hook_name: "useLanguageSettings", method_name: "updateSelectedPresetTabNumber" },
 
-        "/get/data/translation_engines": (payload) => {
-            const updateTranslatorAvailability = (keys) => {
-                return translator_status.map(translator => ({
-                    ...translator,
-                    is_available: keys.includes(translator.id),
-                }));
-            };
-            const updated_list = updateTranslatorAvailability(payload);
-            updateTranslationEngines(updated_list);
-        },
-        "/run/translation_engines": (payload) => {
-            const updateTranslatorAvailability = (keys) => {
-                return translator_status.map(translator => ({
-                    ...translator,
-                    is_available: keys.includes(translator.id),
-                }));
-            };
-            const updated_list = updateTranslatorAvailability(payload);
-            updateTranslationEngines(updated_list);
-        },
-        "/get/data/selected_translation_engines": updateSelectedTranslationEngines,
-        "/set/data/selected_translation_engines": updateSelectedTranslationEngines,
-        "/run/selected_translation_engines": updateSelectedTranslationEngines,
+    { endpoint: "/get/data/selected_your_languages", ns: main, hook_name: "useLanguageSettings", method_name: "updateSelectedYourLanguages" },
+    { endpoint: "/set/data/selected_your_languages", ns: main, hook_name: "useLanguageSettings", method_name: "updateSelectedYourLanguages" },
+    { endpoint: "/get/data/selected_target_languages", ns: main, hook_name: "useLanguageSettings", method_name: "updateSelectedTargetLanguages" },
+    { endpoint: "/set/data/selected_target_languages", ns: main, hook_name: "useLanguageSettings", method_name: "updateSelectedTargetLanguages" },
 
-        "/run/swap_your_language_and_target_language": (payload) => {
-            updateSelectedYourLanguages(payload.your);
-            updateSelectedTargetLanguages(payload.target);
-        },
+    { endpoint: "/get/data/translation_engines", ns: main, hook_name: "useLanguageSettings", method_name: "updateTranslatorAvailability" },
+    { endpoint: "/run/translation_engines", ns: main, hook_name: "useLanguageSettings", method_name: "updateTranslatorAvailability" },
 
+    { endpoint: "/get/data/selected_translation_engines", ns: main, hook_name: "useLanguageSettings", method_name: "updateSelectedTranslationEngines" },
+    { endpoint: "/set/data/selected_translation_engines", ns: main, hook_name: "useLanguageSettings", method_name: "updateSelectedTranslationEngines" },
+    { endpoint: "/run/selected_translation_engines", ns: main, hook_name: "useLanguageSettings", method_name: "updateSelectedTranslationEngines" },
+
+    { endpoint: "/run/swap_your_language_and_target_language", ns: main, hook_name: "useLanguageSettings", method_name: "updateBothSelectedLanguages" },
 
     // Language Selector
-        "/get/data/selectable_language_list": updateSelectableLanguageList,
+    { endpoint: "/get/data/selectable_language_list", ns: main, hook_name: "useLanguageSettings", method_name: "updateSelectableLanguageList" },
 
-        // Message
-        "/run/send_message_box": updateSentMessageLogById,
-        "/run/typing_message_box": ()=>{},
-        "/run/stop_typing_message_box": ()=>{},
-        "/run/transcription_send_mic_message": addSentMessageLog,
-        "/run/transcription_receive_speaker_message": addReceivedMessageLog,
 
-        // Message Box
-        "/get/data/message_box_ratio": updateMessageInputBoxRatio,
-        "/set/data/message_box_ratio": updateMessageInputBoxRatio,
+    // Message Input Box
+    { endpoint: "/get/data/message_box_ratio", ns: main, hook_name: "useMessageInputBoxRatio", method_name: "updateMessageInputBoxRatio" },
+    { endpoint: "/set/data/message_box_ratio", ns: main, hook_name: "useMessageInputBoxRatio", method_name: "updateMessageInputBoxRatio" },
+
 
 
     // Config Page
-        // Common
-        "/get/data/version": updateSoftwareVersion,
+    // Device
+    { endpoint: "/get/data/auto_mic_select", ns: configs, hook_name: "useEnableAutoMicSelect", method_name: "updateEnableAutoMicSelect" },
+    { endpoint: "/set/enable/auto_mic_select", ns: configs, hook_name: "useEnableAutoMicSelect", method_name: "updateEnableAutoMicSelect" },
+    { endpoint: "/set/disable/auto_mic_select", ns: configs, hook_name: "useEnableAutoMicSelect", method_name: "updateEnableAutoMicSelect" },
+    { endpoint: "/get/data/auto_speaker_select", ns: configs, hook_name: "useEnableAutoSpeakerSelect", method_name: "updateEnableAutoSpeakerSelect" },
+    { endpoint: "/set/enable/auto_speaker_select", ns: configs, hook_name: "useEnableAutoSpeakerSelect", method_name: "updateEnableAutoSpeakerSelect" },
+    { endpoint: "/set/disable/auto_speaker_select", ns: configs, hook_name: "useEnableAutoSpeakerSelect", method_name: "updateEnableAutoSpeakerSelect" },
 
-        // Device Tab
-        "/get/data/auto_mic_select": updateEnableAutoMicSelect,
-        "/set/enable/auto_mic_select": updateEnableAutoMicSelect,
-        "/set/disable/auto_mic_select": updateEnableAutoMicSelect,
-        "/get/data/auto_speaker_select": updateEnableAutoSpeakerSelect,
-        "/set/enable/auto_speaker_select": updateEnableAutoSpeakerSelect,
-        "/set/disable/auto_speaker_select": updateEnableAutoSpeakerSelect,
+    // Device (Mic)
+    { endpoint: "/get/data/mic_host_list", ns: configs, hook_name: "useMicHostList", method_name: "updateMicHostList_FromBackend" },
+    { endpoint: "/run/mic_host_list", ns: configs, hook_name: "useMicHostList", method_name: "updateMicHostList_FromBackend" },
 
-        "/get/data/mic_host_list": (payload) => updateMicHostList(arrayToObject(payload)),
-        "/run/mic_host_list": (payload) => updateMicHostList(arrayToObject(payload)),
-        "/get/data/selected_mic_host": updateSelectedMicHost,
-        "/set/data/selected_mic_host": (payload) => {
-            updateSelectedMicHost(payload.host);
-            updateSelectedMicDevice(payload.device);
-        },
+    { endpoint: "/get/data/selected_mic_host", ns: configs, hook_name: "useSelectedMicHost", method_name: "updateSelectedMicHost" },
+    { endpoint: "/set/data/selected_mic_host", ns: configs, hook_name: "useSelectedMicHost", method_name: "updateSelectedMicHostAndDevice" }, // Need refactoring (Duplicated, Host, Device)
 
-        "/get/data/mic_device_list": (payload) => updateMicDeviceList(arrayToObject(payload)),
-        "/run/mic_device_list": (payload) => updateMicDeviceList(arrayToObject(payload)),
-        "/get/data/selected_mic_device": updateSelectedMicDevice,
-        "/set/data/selected_mic_device": updateSelectedMicDevice,
 
-        "/run/selected_mic_device": (payload) => {
+    { endpoint: "/get/data/mic_device_list", ns: configs, hook_name: "useMicDeviceList", method_name: "updateMicDeviceList_FromBackend" },
+    { endpoint: "/run/mic_device_list", ns: configs, hook_name: "useMicDeviceList", method_name: "updateMicDeviceList_FromBackend" },
 
-            updateSelectedMicHost(payload.host);
-            updateSelectedMicDevice(payload.device);
-        },
+    { endpoint: "/get/data/selected_mic_device", ns: configs, hook_name: "useSelectedMicDevice", method_name: "updateSelectedMicDevice" },
+    { endpoint: "/set/data/selected_mic_device", ns: configs, hook_name: "useSelectedMicDevice", method_name: "updateSelectedMicDevice" },
 
-        "/get/data/speaker_device_list": (payload) => updateSpeakerDeviceList(arrayToObject(payload)),
-        "/run/speaker_device_list": (payload) => updateSpeakerDeviceList(arrayToObject(payload)),
-        "/get/data/selected_speaker_device": updateSelectedSpeakerDevice,
-        "/set/data/selected_speaker_device": updateSelectedSpeakerDevice,
-        "/run/selected_speaker_device": updateSelectedSpeakerDevice,
+    { endpoint: "/run/selected_mic_device", ns: configs, hook_name: "useSelectedMicHost", method_name: "updateSelectedMicHostAndDevice" }, // Need refactoring (Duplicated, Host, Device)
 
-        "/run/check_mic_volume": updateVolumeVariable_Mic,
-        "/run/check_speaker_volume": updateVolumeVariable_Speaker,
-        "/set/enable/check_mic_threshold": updateMicThresholdCheckStatus,
-        "/set/disable/check_mic_threshold": updateMicThresholdCheckStatus,
-        "/set/enable/check_speaker_threshold": updateSpeakerThresholdCheckStatus,
-        "/set/disable/check_speaker_threshold": updateSpeakerThresholdCheckStatus,
+    // Device (Speaker)
+    { endpoint: "/get/data/speaker_device_list", ns: configs, hook_name: "useSpeakerDeviceList", method_name: "updateSpeakerDeviceList_FromBackend" },
+    { endpoint: "/run/speaker_device_list", ns: configs, hook_name: "useSpeakerDeviceList", method_name: "updateSpeakerDeviceList_FromBackend" },
 
-        "/get/data/mic_threshold": updateMicThreshold,
-        "/set/data/mic_threshold": updateMicThreshold,
-        "/get/data/speaker_threshold": updateSpeakerThreshold,
-        "/set/data/speaker_threshold": updateSpeakerThreshold,
+    { endpoint: "/get/data/selected_speaker_device", ns: configs, hook_name: "useSelectedSpeakerDevice", method_name: "updateSelectedSpeakerDevice" },
+    { endpoint: "/set/data/selected_speaker_device", ns: configs, hook_name: "useSelectedSpeakerDevice", method_name: "updateSelectedSpeakerDevice" },
+    { endpoint: "/run/selected_speaker_device", ns: configs, hook_name: "useSelectedSpeakerDevice", method_name: "updateSelectedSpeakerDevice" },
+
+    // Device (Threshold)
+    { endpoint: "/get/data/mic_threshold", ns: configs, hook_name: "useMicThreshold",  method_name: "updateMicThreshold" },
+    { endpoint: "/set/data/mic_threshold", ns: configs, hook_name: "useMicThreshold",  method_name: "updateMicThreshold" },
+    { endpoint: "/get/data/speaker_threshold", ns: configs, hook_name: "useSpeakerThreshold",  method_name: "updateSpeakerThreshold" },
+    { endpoint: "/set/data/speaker_threshold", ns: configs, hook_name: "useSpeakerThreshold",  method_name: "updateSpeakerThreshold" },
+
+    { endpoint: "/get/data/mic_automatic_threshold", ns: configs, hook_name: "useMicThreshold",  method_name: "updateEnableAutomaticMicThreshold" },
+    { endpoint: "/set/enable/mic_automatic_threshold", ns: configs, hook_name: "useMicThreshold",  method_name: "updateEnableAutomaticMicThreshold" },
+    { endpoint: "/set/disable/mic_automatic_threshold", ns: configs, hook_name: "useMicThreshold",  method_name: "updateEnableAutomaticMicThreshold" },
+    { endpoint: "/get/data/speaker_automatic_threshold", ns: configs, hook_name: "useSpeakerThreshold",  method_name: "updateEnableAutomaticSpeakerThreshold" },
+    { endpoint: "/set/enable/speaker_automatic_threshold", ns: configs, hook_name: "useSpeakerThreshold",  method_name: "updateEnableAutomaticSpeakerThreshold" },
+    { endpoint: "/set/disable/speaker_automatic_threshold", ns: configs, hook_name: "useSpeakerThreshold",  method_name: "updateEnableAutomaticSpeakerThreshold" },
 
-        "/get/data/mic_automatic_threshold": updateEnableAutomaticMicThreshold,
-        "/set/enable/mic_automatic_threshold": updateEnableAutomaticMicThreshold,
-        "/set/disable/mic_automatic_threshold": updateEnableAutomaticMicThreshold,
-        "/get/data/speaker_automatic_threshold": updateEnableAutomaticSpeakerThreshold,
-        "/set/enable/speaker_automatic_threshold": updateEnableAutomaticSpeakerThreshold,
-        "/set/disable/speaker_automatic_threshold": updateEnableAutomaticSpeakerThreshold,
 
     // Appearance
-        "/get/data/ui_language": updateUiLanguage,
-        "/set/data/ui_language": updateUiLanguage,
+    { endpoint: "/get/data/ui_language", ns: configs, hook_name: "useUiLanguage", method_name: "updateUiLanguage" },
+    { endpoint: "/set/data/ui_language", ns: configs, hook_name: "useUiLanguage", method_name: "updateUiLanguage" },
 
-        "/get/data/ui_scaling": updateUiScaling,
-        "/set/data/ui_scaling": updateUiScaling,
+    { endpoint: "/get/data/ui_scaling", ns: configs, hook_name: "useUiScaling", method_name: "updateUiScaling" },
+    { endpoint: "/set/data/ui_scaling", ns: configs, hook_name: "useUiScaling", method_name: "updateUiScaling" },
 
-        "/get/data/textbox_ui_scaling": updateMessageLogUiScaling,
-        "/set/data/textbox_ui_scaling": updateMessageLogUiScaling,
+    { endpoint: "/get/data/textbox_ui_scaling", ns: configs, hook_name: "useMessageLogUiScaling", method_name: "updateMessageLogUiScaling" },
+    { endpoint: "/set/data/textbox_ui_scaling", ns: configs, hook_name: "useMessageLogUiScaling", method_name: "updateMessageLogUiScaling" },
 
-        "/get/data/send_message_button_type": updateSendMessageButtonType,
-        "/set/data/send_message_button_type": updateSendMessageButtonType,
+    { endpoint: "/get/data/send_message_button_type", ns: configs, hook_name: "useSendMessageButtonType", method_name: "updateSendMessageButtonType" },
+    { endpoint: "/set/data/send_message_button_type", ns: configs, hook_name: "useSendMessageButtonType", method_name: "updateSendMessageButtonType" },
 
-        "/get/data/font_family": updateSelectedFontFamily,
-        "/set/data/font_family": updateSelectedFontFamily,
+    { endpoint: "/get/data/font_family", ns: configs, hook_name: "useSelectedFontFamily", method_name: "updateSelectedFontFamily" },
+    { endpoint: "/set/data/font_family", ns: configs, hook_name: "useSelectedFontFamily", method_name: "updateSelectedFontFamily" },
 
-        "/get/data/transparency": updateTransparency,
-        "/set/data/transparency": updateTransparency,
+    { endpoint: "/get/data/transparency", ns: configs, hook_name: "useTransparency", method_name: "updateTransparency" },
+    { endpoint: "/set/data/transparency", ns: configs, hook_name: "useTransparency", method_name: "updateTransparency" },
 
     // Translation
-        "/get/data/deepl_auth_key": updateDeepLAuthKey,
-        "/set/data/deepl_auth_key": savedDeepLAuthKey,
-        "/delete/data/deepl_auth_key": () => updateDeepLAuthKey(""),
+    { endpoint: "/get/data/deepl_auth_key", ns: configs, hook_name: "useDeepLAuthKey", method_name: "updateDeepLAuthKey" },
+    { endpoint: "/set/data/deepl_auth_key", ns: configs, hook_name: "useDeepLAuthKey", method_name: "savedDeepLAuthKey" },
+    { endpoint: "/delete/data/deepl_auth_key", ns: configs, hook_name: "useDeepLAuthKey", method_name: "deletedDeepLAuthKey" },
 
-        "/get/data/ctranslate2_weight_type": updateSelectedCTranslate2WeightType,
-        "/set/data/ctranslate2_weight_type": updateSelectedCTranslate2WeightType,
+    // Translation (AI Models)
+    { endpoint: "/get/data/ctranslate2_weight_type", ns: configs, hook_name: "useSelectedCTranslate2WeightType", method_name: "updateSelectedCTranslate2WeightType" },
+    { endpoint: "/set/data/ctranslate2_weight_type", ns: configs, hook_name: "useSelectedCTranslate2WeightType", method_name: "updateSelectedCTranslate2WeightType" },
 
-        "/get/data/selectable_ctranslate2_weight_type_dict": updateDownloadedCTranslate2WeightTypeStatus,
+    { endpoint: "/get/data/selectable_ctranslate2_weight_type_dict", ns: configs, hook_name: "useCTranslate2WeightTypeStatus", method_name: "updateDownloadedCTranslate2WeightTypeStatus" },
 
-        "/get/data/translation_compute_device_list": (payload) => updateSelectableCTranslate2ComputeDeviceList(transformToIndexedArray(payload)),
-        "/get/data/selected_translation_compute_device": updateSelectedCTranslate2ComputeDevice,
-        "/set/data/selected_translation_compute_device": updateSelectedCTranslate2ComputeDevice,
+    { endpoint: "/get/data/translation_compute_device_list", ns: configs, hook_name: "useSelectableCTranslate2ComputeDeviceList", method_name: "updateSelectableCTranslate2ComputeDeviceList_FromBackend" },
 
-        "/run/downloaded_ctranslate2_weight": downloadedCTranslate2WeightType,
-        "/run/download_ctranslate2_weight": () => {},
-        "/run/download_progress_ctranslate2_weight": updateDownloadProgressCTranslate2WeightTypeStatus,
+    { endpoint: "/get/data/selected_translation_compute_device", ns: configs, hook_name: "useSelectedCTranslate2ComputeDevice", method_name: "updateSelectedCTranslate2ComputeDevice" },
+    { endpoint: "/set/data/selected_translation_compute_device", ns: configs, hook_name: "useSelectedCTranslate2ComputeDevice", method_name: "updateSelectedCTranslate2ComputeDevice" },
+
+    { endpoint: "/run/downloaded_ctranslate2_weight", ns: configs, hook_name: "useCTranslate2WeightTypeStatus", method_name: "downloadedCTranslate2WeightType" },
+    { endpoint: "/run/download_ctranslate2_weight", ns: null, hook_name: null, method_name: null },
+    { endpoint: "/run/download_progress_ctranslate2_weight", ns: configs, hook_name: "useCTranslate2WeightTypeStatus", method_name: "updateDownloadProgressCTranslate2WeightTypeStatus" },
 
     // Transcription
-        "/get/data/mic_record_timeout": updateMicRecordTimeout,
-        "/set/data/mic_record_timeout": updateMicRecordTimeout,
+    // Transcription (Mic)
+    { endpoint: "/get/data/mic_record_timeout", ns: configs, hook_name: "useMicRecordTimeout", method_name: "updateMicRecordTimeout" },
+    { endpoint: "/set/data/mic_record_timeout", ns: configs, hook_name: "useMicRecordTimeout", method_name: "updateMicRecordTimeout" },
 
-        "/get/data/mic_phrase_timeout": updateMicPhraseTimeout,
-        "/set/data/mic_phrase_timeout": updateMicPhraseTimeout,
+    { endpoint: "/get/data/mic_phrase_timeout", ns: configs, hook_name: "useMicPhraseTimeout", method_name: "updateMicPhraseTimeout" },
+    { endpoint: "/set/data/mic_phrase_timeout", ns: configs, hook_name: "useMicPhraseTimeout", method_name: "updateMicPhraseTimeout" },
 
-        "/get/data/mic_max_phrases": updateMicMaxWords,
-        "/set/data/mic_max_phrases": updateMicMaxWords,
+    { endpoint: "/get/data/mic_max_phrases", ns: configs, hook_name: "useMicMaxWords", method_name: "updateMicMaxWords" },
+    { endpoint: "/set/data/mic_max_phrases", ns: configs, hook_name: "useMicMaxWords", method_name: "updateMicMaxWords" },
 
-        "/get/data/mic_word_filter": (payload) => {
-            updateMicWordFilterList((prev_list) => {
-                const updated_list = [...prev_list.data];
-                for (const value of payload) {
-                    const existing_item = updated_list.find(item => item.value === value);
-                    if (existing_item) {
-                        existing_item.is_redoable = false;
-                    } else {
-                        updated_list.push({ value, is_redoable: false });
-                    }
-                }
-                return updated_list;
-            });
-        },
-        "/set/data/mic_word_filter": (payload) => {
-            updateMicWordFilterList((prev_list) => {
-                const updated_list = [...prev_list.data];
-                for (const value of payload) {
-                    const existing_item = updated_list.find(item => item.value === value);
-                    if (existing_item) {
-                        existing_item.is_redoable = false;
-                    } else {
-                        updated_list.push({ value, is_redoable: false });
-                    }
-                }
-                return updated_list;
-            });
-        },
-        "/run/word_filter": (payload) => addSystemMessageLog(payload.message),
+    { endpoint: "/get/data/mic_word_filter", ns: configs, hook_name: "useMicWordFilterList", method_name: "updateMicWordFilterList_FromBackend" },
+    { endpoint: "/set/data/mic_word_filter", ns: configs, hook_name: "useMicWordFilterList", method_name: "updateMicWordFilterList_FromBackend" },
 
+    // Transcription (Speaker)
+    { endpoint: "/get/data/speaker_record_timeout", ns: configs, hook_name: "useSpeakerRecordTimeout", method_name: "updateSpeakerRecordTimeout" },
+    { endpoint: "/set/data/speaker_record_timeout", ns: configs, hook_name: "useSpeakerRecordTimeout", method_name: "updateSpeakerRecordTimeout" },
 
-        "/get/data/speaker_record_timeout": updateSpeakerRecordTimeout,
-        "/set/data/speaker_record_timeout": updateSpeakerRecordTimeout,
+    { endpoint: "/get/data/speaker_phrase_timeout", ns: configs, hook_name: "useSpeakerPhraseTimeout", method_name: "updateSpeakerPhraseTimeout" },
+    { endpoint: "/set/data/speaker_phrase_timeout", ns: configs, hook_name: "useSpeakerPhraseTimeout", method_name: "updateSpeakerPhraseTimeout" },
 
-        "/get/data/speaker_phrase_timeout": updateSpeakerPhraseTimeout,
-        "/set/data/speaker_phrase_timeout": updateSpeakerPhraseTimeout,
+    { endpoint: "/get/data/speaker_max_phrases", ns: configs, hook_name: "useSpeakerMaxWords", method_name: "updateSpeakerMaxWords" },
+    { endpoint: "/set/data/speaker_max_phrases", ns: configs, hook_name: "useSpeakerMaxWords", method_name: "updateSpeakerMaxWords" },
 
-        "/get/data/speaker_max_phrases": updateSpeakerMaxWords,
-        "/set/data/speaker_max_phrases": updateSpeakerMaxWords,
+    // Transcription (AI Models)
+    { endpoint: "/get/data/selected_transcription_engine", ns: configs, hook_name: "useSelectedTranscriptionEngine", method_name: "updateSelectedTranscriptionEngine" },
+    { endpoint: "/set/data/selected_transcription_engine", ns: configs, hook_name: "useSelectedTranscriptionEngine", method_name: "updateSelectedTranscriptionEngine" },
 
-        "/get/data/selected_transcription_engine": updateSelectedTranscriptionEngine,
-        "/set/data/selected_transcription_engine": updateSelectedTranscriptionEngine,
+    { endpoint: "/get/data/whisper_weight_type", ns: configs, hook_name: "useSelectedWhisperWeightType", method_name: "updateSelectedWhisperWeightType" },
+    { endpoint: "/set/data/whisper_weight_type", ns: configs, hook_name: "useSelectedWhisperWeightType", method_name: "updateSelectedWhisperWeightType" },
 
-        "/get/data/whisper_weight_type": updateSelectedWhisperWeightType,
-        "/set/data/whisper_weight_type": updateSelectedWhisperWeightType,
+    { endpoint: "/get/data/selectable_whisper_weight_type_dict", ns: configs, hook_name: "useWhisperWeightTypeStatus", method_name: "updateDownloadedWhisperWeightTypeStatus" },
 
-        "/get/data/selectable_whisper_weight_type_dict": updateDownloadedWhisperWeightTypeStatus,
+    { endpoint: "/run/downloaded_whisper_weight", ns: configs, hook_name: "useWhisperWeightTypeStatus", method_name: "downloadedWhisperWeightType" },
+    { endpoint: "/run/download_whisper_weight", ns: null, hook_name: null, method_name: null },
+    { endpoint: "/run/download_progress_whisper_weight", ns: configs, hook_name: "useWhisperWeightTypeStatus", method_name: "updateDownloadProgressWhisperWeightTypeStatus" },
 
-        "/run/downloaded_whisper_weight": downloadedWhisperWeightType,
-        "/run/download_whisper_weight": () => {},
-        "/run/download_progress_whisper_weight": updateDownloadProgressWhisperWeightTypeStatus,
-
-        "/get/data/transcription_compute_device_list": (payload) => updateSelectableWhisperComputeDeviceList(transformToIndexedArray(payload)),
-        "/get/data/selected_transcription_compute_device": updateSelectedWhisperComputeDevice,
-        "/set/data/selected_transcription_compute_device": updateSelectedWhisperComputeDevice,
+    { endpoint: "/get/data/transcription_compute_device_list", ns: configs, hook_name: "useSelectableWhisperComputeDeviceList", method_name: "updateSelectableWhisperComputeDeviceList_FromBackend" },
+    { endpoint: "/get/data/selected_transcription_compute_device", ns: configs, hook_name: "useSelectedWhisperComputeDevice", method_name: "updateSelectedWhisperComputeDevice" },
+    { endpoint: "/set/data/selected_transcription_compute_device", ns: configs, hook_name: "useSelectedWhisperComputeDevice", method_name: "updateSelectedWhisperComputeDevice" },
 
     // VR
-        "/get/data/overlay_small_log": updateIsEnabledOverlaySmallLog,
-        "/set/enable/overlay_small_log": updateIsEnabledOverlaySmallLog,
-        "/set/disable/overlay_small_log": updateIsEnabledOverlaySmallLog,
+    { endpoint: "/get/data/overlay_small_log", ns: configs, hook_name: "useIsEnabledOverlaySmallLog", method_name: "updateIsEnabledOverlaySmallLog" },
+    { endpoint: "/set/enable/overlay_small_log", ns: configs, hook_name: "useIsEnabledOverlaySmallLog", method_name: "updateIsEnabledOverlaySmallLog" },
+    { endpoint: "/set/disable/overlay_small_log", ns: configs, hook_name: "useIsEnabledOverlaySmallLog", method_name: "updateIsEnabledOverlaySmallLog" },
 
-        "/get/data/overlay_small_log_settings": updateOverlaySmallLogSettings,
-        "/set/data/overlay_small_log_settings": updateOverlaySmallLogSettings,
+    { endpoint: "/get/data/overlay_small_log_settings", ns: configs, hook_name: "useOverlaySmallLogSettings", method_name: "updateOverlaySmallLogSettings" },
+    { endpoint: "/set/data/overlay_small_log_settings", ns: configs, hook_name: "useOverlaySmallLogSettings", method_name: "updateOverlaySmallLogSettings" },
 
-        "/get/data/overlay_large_log": updateIsEnabledOverlayLargeLog,
-        "/set/enable/overlay_large_log": updateIsEnabledOverlayLargeLog,
-        "/set/disable/overlay_large_log": updateIsEnabledOverlayLargeLog,
+    { endpoint: "/get/data/overlay_large_log", ns: configs, hook_name: "useIsEnabledOverlayLargeLog", method_name: "updateIsEnabledOverlayLargeLog" },
+    { endpoint: "/set/enable/overlay_large_log", ns: configs, hook_name: "useIsEnabledOverlayLargeLog", method_name: "updateIsEnabledOverlayLargeLog" },
+    { endpoint: "/set/disable/overlay_large_log", ns: configs, hook_name: "useIsEnabledOverlayLargeLog", method_name: "updateIsEnabledOverlayLargeLog" },
 
-        "/get/data/overlay_large_log_settings": updateOverlayLargeLogSettings,
-        "/set/data/overlay_large_log_settings": updateOverlayLargeLogSettings,
+    { endpoint: "/get/data/overlay_large_log_settings", ns: configs, hook_name: "useOverlayLargeLogSettings", method_name: "updateOverlayLargeLogSettings" },
+    { endpoint: "/set/data/overlay_large_log_settings", ns: configs, hook_name: "useOverlayLargeLogSettings", method_name: "updateOverlayLargeLogSettings" },
 
-        "/get/data/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
-        "/set/enable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
-        "/set/disable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
+    { endpoint: "/get/data/overlay_show_only_translated_messages", ns: configs, hook_name: "useOverlayShowOnlyTranslatedMessages", method_name: "updateOverlayShowOnlyTranslatedMessages" },
+    { endpoint: "/set/enable/overlay_show_only_translated_messages", ns: configs, hook_name: "useOverlayShowOnlyTranslatedMessages", method_name: "updateOverlayShowOnlyTranslatedMessages" },
+    { endpoint: "/set/disable/overlay_show_only_translated_messages", ns: configs, hook_name: "useOverlayShowOnlyTranslatedMessages", method_name: "updateOverlayShowOnlyTranslatedMessages" },
 
-        "/run/send_text_overlay": () => {},
+    { endpoint: "/run/send_text_overlay", ns: null, hook_name: null, method_name: null },
 
-        // Others Tab
-        "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
-        "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
-        "/set/disable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
 
-        "/get/data/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages,
-        "/set/enable/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages,
-        "/set/disable/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages,
+    // Others
+    { endpoint: "/get/data/auto_clear_message_box", ns: configs, hook_name: "useEnableAutoClearMessageInputBox", method_name: "updateEnableAutoClearMessageInputBox" },
+    { endpoint: "/set/enable/auto_clear_message_box", ns: configs, hook_name: "useEnableAutoClearMessageInputBox", method_name: "updateEnableAutoClearMessageInputBox" },
+    { endpoint: "/set/disable/auto_clear_message_box", ns: configs, hook_name: "useEnableAutoClearMessageInputBox", method_name: "updateEnableAutoClearMessageInputBox" },
 
-        "/get/data/logger_feature": updateEnableAutoExportMessageLogs,
-        "/set/enable/logger_feature": updateEnableAutoExportMessageLogs,
-        "/set/disable/logger_feature": updateEnableAutoExportMessageLogs,
+    { endpoint: "/get/data/send_only_translated_messages", ns: configs, hook_name: "useEnableSendOnlyTranslatedMessages", method_name: "updateEnableSendOnlyTranslatedMessages" },
+    { endpoint: "/set/enable/send_only_translated_messages", ns: configs, hook_name: "useEnableSendOnlyTranslatedMessages", method_name: "updateEnableSendOnlyTranslatedMessages" },
+    { endpoint: "/set/disable/send_only_translated_messages", ns: configs, hook_name: "useEnableSendOnlyTranslatedMessages", method_name: "updateEnableSendOnlyTranslatedMessages" },
 
-        "/get/data/vrc_mic_mute_sync": (payload) => updateEnableVrcMicMuteSync((old_value) => {
-            return {...old_value.data, is_enabled: payload};
-        }),
-        "/set/enable/vrc_mic_mute_sync": (payload) => updateEnableVrcMicMuteSync((old_value) => {
-            return {...old_value.data, is_enabled: payload};
-        }),
-        "/set/disable/vrc_mic_mute_sync": (payload) => updateEnableVrcMicMuteSync((old_value) => {
-            return {...old_value.data, is_enabled: payload};
-        }),
+    { endpoint: "/get/data/logger_feature", ns: configs, hook_name: "useEnableAutoExportMessageLogs", method_name: "updateEnableAutoExportMessageLogs" },
+    { endpoint: "/set/enable/logger_feature", ns: configs, hook_name: "useEnableAutoExportMessageLogs", method_name: "updateEnableAutoExportMessageLogs" },
+    { endpoint: "/set/disable/logger_feature", ns: configs, hook_name: "useEnableAutoExportMessageLogs", method_name: "updateEnableAutoExportMessageLogs" },
 
-        "/get/data/send_message_to_vrc": updateEnableSendMessageToVrc,
-        "/set/enable/send_message_to_vrc": updateEnableSendMessageToVrc,
-        "/set/disable/send_message_to_vrc": updateEnableSendMessageToVrc,
+    { endpoint: "/get/data/vrc_mic_mute_sync", ns: configs, hook_name: "useEnableVrcMicMuteSync", method_name: "updateEnableVrcMicMuteSync_FromBackend" },
+    { endpoint: "/set/enable/vrc_mic_mute_sync", ns: configs, hook_name: "useEnableVrcMicMuteSync", method_name: "updateEnableVrcMicMuteSync_FromBackend" },
+    { endpoint: "/set/disable/vrc_mic_mute_sync", ns: configs, hook_name: "useEnableVrcMicMuteSync", method_name: "updateEnableVrcMicMuteSync_FromBackend" },
 
-        "/get/data/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
-        "/set/enable/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
-        "/set/disable/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
 
-        "/get/data/notification_vrc_sfx": updateEnableNotificationVrcSfx,
-        "/set/enable/notification_vrc_sfx": updateEnableNotificationVrcSfx,
-        "/set/disable/notification_vrc_sfx": updateEnableNotificationVrcSfx,
+    { endpoint: "/get/data/send_message_to_vrc", ns: configs, hook_name: "useEnableSendMessageToVrc", method_name: "updateEnableSendMessageToVrc" },
+    { endpoint: "/set/enable/send_message_to_vrc", ns: configs, hook_name: "useEnableSendMessageToVrc", method_name: "updateEnableSendMessageToVrc" },
+    { endpoint: "/set/disable/send_message_to_vrc", ns: configs, hook_name: "useEnableSendMessageToVrc", method_name: "updateEnableSendMessageToVrc" },
+
+    { endpoint: "/get/data/send_received_message_to_vrc", ns: configs, hook_name: "useEnableSendReceivedMessageToVrc", method_name: "updateEnableSendReceivedMessageToVrc" },
+    { endpoint: "/set/enable/send_received_message_to_vrc", ns: configs, hook_name: "useEnableSendReceivedMessageToVrc", method_name: "updateEnableSendReceivedMessageToVrc" },
+    { endpoint: "/set/disable/send_received_message_to_vrc", ns: configs, hook_name: "useEnableSendReceivedMessageToVrc", method_name: "updateEnableSendReceivedMessageToVrc" },
+
+    { endpoint: "/get/data/notification_vrc_sfx", ns: configs, hook_name: "useEnableNotificationVrcSfx", method_name: "updateEnableNotificationVrcSfx" },
+    { endpoint: "/set/enable/notification_vrc_sfx", ns: configs, hook_name: "useEnableNotificationVrcSfx", method_name: "updateEnableNotificationVrcSfx" },
+    { endpoint: "/set/disable/notification_vrc_sfx", ns: configs, hook_name: "useEnableNotificationVrcSfx", method_name: "updateEnableNotificationVrcSfx" },
 
     // Hotkeys
-        "/get/data/hotkeys": updateHotkeys,
-        "/set/data/hotkeys": updateHotkeys,
+    { endpoint: "/get/data/hotkeys", ns: configs, hook_name: "useHotkeys", method_name: "updateHotkeys" },
+    { endpoint: "/set/data/hotkeys", ns: configs, hook_name: "useHotkeys", method_name: "updateHotkeys" },
 
     // Plugins
-        "/get/data/plugins_status": updateSavedPluginsStatus,
-        "/set/data/plugins_status": updateSavedPluginsStatus,
+    { endpoint: "/get/data/plugins_status", ns: configs, hook_name: "usePlugins", method_name: "updateSavedPluginsStatus" },
+    { endpoint: "/set/data/plugins_status", ns: configs, hook_name: "usePlugins", method_name: "updateSavedPluginsStatus" },
 
     // Advanced Settings
-        "/get/data/osc_ip_address": updateOscIpAddress,
-        "/set/data/osc_ip_address": updateOscIpAddress,
+    { endpoint: "/get/data/osc_ip_address", ns: configs, hook_name: "useOscIpAddress", method_name: "updateOscIpAddress" },
+    { endpoint: "/set/data/osc_ip_address", ns: configs, hook_name: "useOscIpAddress", method_name: "updateOscIpAddress" },
 
-        "/get/data/osc_port": updateOscPort,
-        "/set/data/osc_port": updateOscPort,
+    { endpoint: "/get/data/osc_port", ns: configs, hook_name: "useOscPort", method_name: "updateOscPort" },
+    { endpoint: "/set/data/osc_port", ns: configs, hook_name: "useOscPort", method_name: "updateOscPort" },
 
-        "/get/data/websocket_server": updateEnableWebsocket,
-        "/set/enable/websocket_server": updateEnableWebsocket,
-        "/set/disable/websocket_server": updateEnableWebsocket,
+    { endpoint: "/get/data/websocket_server", ns: configs, hook_name: "useWebsocket", method_name: "updateEnableWebsocket" },
+    { endpoint: "/set/enable/websocket_server", ns: configs, hook_name: "useWebsocket", method_name: "updateEnableWebsocket" },
+    { endpoint: "/set/disable/websocket_server", ns: configs, hook_name: "useWebsocket", method_name: "updateEnableWebsocket" },
 
-        "/get/data/websocket_host": updateWebsocketHost,
-        "/set/data/websocket_host": updateWebsocketHost,
+    { endpoint: "/get/data/websocket_host", ns: configs, hook_name: "useWebsocket", method_name: "updateWebsocketHost" },
+    { endpoint: "/set/data/websocket_host", ns: configs, hook_name: "useWebsocket", method_name: "updateWebsocketHost" },
 
-        "/get/data/websocket_port": updateWebsocketPort,
-        "/set/data/websocket_port": updateWebsocketPort,
+    { endpoint: "/get/data/websocket_port", ns: configs, hook_name: "useWebsocket", method_name: "updateWebsocketPort" },
+    { endpoint: "/set/data/websocket_port", ns: configs, hook_name: "useWebsocket", method_name: "updateWebsocketPort" },
 
-        "/get/data/mic_avg_logprob": ()=>{}, // Not implemented on UI yet
-        "/get/data/mic_no_speech_prob": ()=>{}, // Not implemented on UI yet
-        "/get/data/speaker_avg_logprob": ()=>{}, // Not implemented on UI yet
-        "/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 receiveRoutes = (parsed_data) => {
-        const initDataSyncProcess = (payload) => {
-            for (const [endpoint, value] of Object.entries(payload)) {
-                const route = routes[endpoint];
-                (route) ? route(value) : console.error(`Invalid endpoint: ${endpoint}\nvalue: ${JSON.stringify(value)}`);
-            }
-        };
+    // Not Implemented Yet...
+    { endpoint: "/get/data/mic_avg_logprob", ns: null, hook_name: null, method_name: null }, // Not implemented on UI yet
+    { endpoint: "/get/data/mic_no_speech_prob", ns: null, hook_name: null, method_name: null }, // Not implemented on UI yet
+    { endpoint: "/get/data/speaker_avg_logprob", ns: null, hook_name: null, method_name: null }, // Not implemented on UI yet
+    { endpoint: "/get/data/speaker_no_speech_prob", ns: null, hook_name: null, method_name: null }, // Not implemented on UI yet
+    { endpoint: "/get/data/convert_message_to_romaji", ns: null, hook_name: null, method_name: null }, // Not implemented on UI yet
+    { endpoint: "/get/data/convert_message_to_hiragana", ns: null, hook_name: null, method_name: null }, // Not implemented on UI yet
+    { endpoint: "/get/data/transcription_engines", ns: null, hook_name: null, method_name: null }, // 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"])
+];
+
+export const useReceiveRoutes = () => {
+    const { showNotification_Error } = common.useNotificationStatus();
+    const { errorHandling_Backend } = _useBackendErrorHandling();
+    const { updateIsBackendReady } = common.useIsBackendReady();
 
     const handleInvalidEndpoint = (parsed_data) => {
         console.error(`Invalid endpoint: ${parsed_data.endpoint}\nresult: ${JSON.stringify(parsed_data.result)}`);
     };
 
-        if (parsed_data.endpoint === "/run/initialization_complete") {
-            initDataSyncProcess(parsed_data.result);
+    const hook_results = {};
+    ROUTE_META_LIST.forEach(({ ns, hook_name }) => {
+        if (ns && hook_name && !(hook_name in hook_results)) {
+            hook_results[hook_name] = ns[hook_name]();
+        }
+    });
+
+    const noop = () => {};
+
+    const routes = Object.fromEntries(
+        ROUTE_META_LIST.map(({ endpoint, hook_name, method_name }) => {
+            const result_obj = hook_results[hook_name] || {};
+            const fn = result_obj[method_name];
+            return [endpoint, typeof fn === "function" ? fn : noop];
+        })
+    );
+
+
+    const receiveRoutes = (parsed_data) => {
+        const { endpoint, status, result } = parsed_data;
+
+        if (endpoint === "/run/initialization_complete") {
+            Object.entries(result).forEach(([ep, value]) => {
+                if (ep in routes) {
+                    routes[ep](value);
+                } else {
+                    handleInvalidEndpoint({ endpoint: ep, result: value });
+                }
+            });
             updateIsBackendReady(true);
             return;
-        };
+        }
 
-        switch (parsed_data.status) {
+
+        switch (status) {
             case 200:
-                const route = routes[parsed_data.endpoint];
-                if (route) {
-                    route(parsed_data.result);
+                if (endpoint in routes) {
+                    routes[endpoint](result);
                 } else {
                     handleInvalidEndpoint(parsed_data);
                 }
@@ -580,31 +364,24 @@ export const useReceiveRoutes = () => {
                     result: parsed_data.result,
                 });
                 break;
-            case 500:
-                showNotification_Error(
-                    `An error occurred. Please restart VRCT or contact the developers. ${JSON.stringify(parsed_data.result)}`, { hide_duration: null });
-                break;
 
             case 348:
                 // console.log(`from backend: %c ${JSON.stringify(parsed_data)}`, style_348);
                 break;
 
+            case 500:
+                showNotification_Error(
+                    `An error occurred. Please restart VRCT or contact the developers. ${JSON.stringify(parsed_data.result)}`, { hide_duration: null });
+                break;
+
             default:
                 console.log("Received data status does not match.", parsed_data);
-                break;
         }
-
     };
+
     return { receiveRoutes };
 };
 
 const style_348 = [
     "color: gray",
 ].join(";");
-
-const transformToIndexedArray = (devices) => {
-    return devices.reduce((result, device, index) => {
-        result[index] = device;
-        return result;
-    }, {});
-};

src-ui/store.js

@@ -153,7 +153,6 @@ export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_
 export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAtomWithHook(false, "ForegroundStatus", {is_state_ok: true});
 
 export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook("1", "SelectedPresetTabNumber");
-export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAtomWithHook(false, "EnableMultiTranslation");
 export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAtomWithHook({}, "SelectedYourLanguages");
 export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAtomWithHook({}, "SelectedTargetLanguages");
 

src-ui/utils.js

@@ -58,3 +58,11 @@ export const genNumArray = (count, start_from = 0) => {
 export const genNumObjArray = (count, start_from = 0) => {
     return arrayToObject(genNumArray(count, start_from));
 };
+
+// This is using for only AI models compute device list, currently. (CTranslate2, Whisper)
+export const transformToIndexedArray = (devices) => {
+    return devices.reduce((result, device, index) => {
+        result[index] = device;
+        return result;
+    }, {});
+};