[Update] AdvancedSettings: Websocket: Add settings ui.

locales/en.yml

@@ -257,6 +257,12 @@ config_page:
             label: "Open Config File"
         switch_compute_device:
             label: "Switch VRCT To CPU/GPU Version"
+        enable_websocket:
+            label: "Enable WebSocket Server"
+        websocket_host:
+            label: "WebSocket Host"
+        websocket_port:
+            label: "WebSocket Port"
 
 plugin_notifications:
     downloading: Downloading the plugin.

locales/ja.yml

@@ -257,7 +257,12 @@ config_page:
             label: "設定ファイルを開く"
         switch_compute_device:
             label: "VRCT CPU/GPUバージョンの切り替え"
-
+        enable_websocket:
+            label: "WebSocketサーバーを有効にする"
+        websocket_host:
+            label: "WebSocket Host"
+        websocket_port:
+            label: "WebSocket Port"
 
 plugin_notifications:
     downloading: プラグインをダウンロード中。

src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx

@@ -6,13 +6,19 @@ import { useOpenFolder } from "@logics_common";
 import {
     useOscIpAddress,
     useOscPort,
+    useWebsocket,
 } from "@logics_configs";
 
 import {
+    CheckboxContainer,
     ActionButtonContainer,
     EntryWithSaveButtonContainer,
 } from "../_templates/Templates";
 
+import {
+    SectionLabelComponent,
+} from "../_components/";
+
 import OpenFolderSvg from "@images/open_folder.svg?react";
 import HelpSvg from "@images/help.svg?react";
 
@@ -25,6 +31,7 @@ export const AdvancedSettings = () => {
                 <OpenConfigFolderContainer />
                 <OpenSwitchComputeDeviceModalContainer />
             </div>
+            <WebsocketContainer />
         </div>
     );
 };
@@ -87,6 +94,7 @@ const OscPortContainer = () => {
         />
     );
 };
+
 const OpenConfigFolderContainer = () => {
     const { t } = useTranslation();
     const { openFolder_ConfigFile } = useOpenFolder();
@@ -120,4 +128,88 @@ const OpenSwitchComputeDeviceModalContainer = () => {
             />
         </>
     );
+};
+
+
+const WebsocketContainer = () => {
+    return (
+        <div>
+            <SectionLabelComponent label="WebSocket" />
+            <EnableWebsocketContainer />
+            <WebsocketHostContainer />
+            <WebsocketPortContainer />
+        </div>
+    );
+};
+
+const EnableWebsocketContainer = () => {
+    const { t } = useTranslation();
+    const { currentEnableWebsocket, toggleEnableWebsocket } = useWebsocket();
+
+    return (
+        <CheckboxContainer
+            label={t("config_page.advanced_settings.enable_websocket.label")}
+            variable={currentEnableWebsocket}
+            toggleFunction={toggleEnableWebsocket}
+        />
+    );
+};
+
+const WebsocketHostContainer = () => {
+    const { t } = useTranslation();
+    const { currentWebsocketHost, setWebsocketHost } = useWebsocket();
+    const [input_value, setInputValue] = useState(currentWebsocketHost.data);
+
+    const onChangeFunction = (value) => {
+        setInputValue(value);
+    };
+
+    const saveFunction = () => {
+        setWebsocketHost(input_value);
+    };
+
+    useEffect(()=> {
+        setInputValue(currentWebsocketHost.data);
+    }, [currentWebsocketHost]);
+
+    return (
+        <EntryWithSaveButtonContainer
+            label={t("config_page.advanced_settings.websocket_host.label")}
+            variable={input_value}
+            saveFunction={saveFunction}
+            onChangeFunction={onChangeFunction}
+            state={currentWebsocketHost.state}
+            width="14rem"
+        />
+    );
+};
+
+const WebsocketPortContainer = () => {
+    const { t } = useTranslation();
+    const { currentWebsocketPort, setWebsocketPort } = useWebsocket();
+    const [input_value, setInputValue] = useState(currentWebsocketPort.data);
+
+    const onChangeFunction = (value) => {
+        value = value.replace(/[^0-9]/g, "");
+        setInputValue(value);
+    };
+
+    const saveFunction = () => {
+        setWebsocketPort(input_value);
+    };
+
+    useEffect(()=> {
+        setInputValue(currentWebsocketPort.data);
+    }, [currentWebsocketPort]);
+
+    return (
+        <EntryWithSaveButtonContainer
+            label={t("config_page.advanced_settings.websocket_port.label")}
+            variable={input_value}
+            saveFunction={saveFunction}
+            onChangeFunction={onChangeFunction}
+            state={currentWebsocketPort.state}
+            width="10rem"
+        />
+    );
 };

src-ui/logics/configs/advanced_settings/useWebsocket.js

@@ -0,0 +1,67 @@
+import {
+    useStore_EnableWebsocket,
+    useStore_WebsocketHost,
+    useStore_WebsocketPort,
+} from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useWebsocket = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentEnableWebsocket, updateEnableWebsocket, pendingEnableWebsocket } = useStore_EnableWebsocket();
+    const { currentWebsocketHost, updateWebsocketHost, pendingWebsocketHost } = useStore_WebsocketHost();
+    const { currentWebsocketPort, updateWebsocketPort, pendingWebsocketPort } = useStore_WebsocketPort();
+
+    const getEnableWebsocket = () => {
+        pendingEnableWebsocket();
+        asyncStdoutToPython("/get/data/websocket_server");
+    };
+
+    const toggleEnableWebsocket = () => {
+        pendingEnableWebsocket();
+        if (currentEnableWebsocket.data) {
+            asyncStdoutToPython("/set/disable/websocket_server");
+        } else {
+            asyncStdoutToPython("/set/enable/websocket_server");
+        }
+    };
+
+
+    const getWebsocketHost = () => {
+        pendingWebsocketHost();
+        asyncStdoutToPython("/get/data/websocket_host");
+    };
+
+    const setWebsocketHost = (websocket_host) => {
+        pendingWebsocketHost();
+        asyncStdoutToPython("/set/data/websocket_host", websocket_host);
+    };
+
+
+    const getWebsocketPort = () => {
+        pendingWebsocketPort();
+        asyncStdoutToPython("/get/data/websocket_port");
+    };
+
+    const setWebsocketPort = (websocket_port) => {
+        pendingWebsocketPort();
+        asyncStdoutToPython("/set/data/websocket_port", websocket_port);
+    };
+
+    return {
+        currentEnableWebsocket,
+        updateEnableWebsocket,
+        getEnableWebsocket,
+        toggleEnableWebsocket,
+
+        currentWebsocketHost,
+        updateWebsocketHost,
+        getWebsocketHost,
+        setWebsocketHost,
+
+        currentWebsocketPort,
+        updateWebsocketPort,
+        getWebsocketPort,
+        setWebsocketPort,
+
+    };
+};

src-ui/logics/configs/index.js

@@ -56,6 +56,7 @@ export { useHotkeys } from "./hotkeys/useHotkeys";
 
 export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
 export { useOscPort } from "./advanced_settings/useOscPort";
+export { useWebsocket } from "./advanced_settings/useWebsocket";
 
 
 export { useSupporters } from "./supporters/useSupporters";

src-ui/logics/useReceiveRoutes.js

@@ -75,6 +75,7 @@ import {
     usePlugins,
     useOscIpAddress,
     useOscPort,
+    useWebsocket,
 } from "@logics_configs";
 
 export const useReceiveRoutes = () => {
@@ -180,6 +181,11 @@ export const useReceiveRoutes = () => {
 
     const { updateOscIpAddress } = useOscIpAddress();
     const { updateOscPort } = useOscPort();
+    const {
+        updateEnableWebsocket,
+        updateWebsocketHost,
+        updateWebsocketPort,
+    } = useWebsocket();
 
 
 
@@ -505,6 +511,16 @@ export const useReceiveRoutes = () => {
         "/get/data/osc_port": updateOscPort,
         "/set/data/osc_port": updateOscPort,
 
+        "/get/data/websocket_server": updateEnableWebsocket,
+        "/set/enable/websocket_server": updateEnableWebsocket,
+        "/set/disable/websocket_server": updateEnableWebsocket,
+
+        "/get/data/websocket_host": updateWebsocketHost,
+        "/set/data/websocket_host": updateWebsocketHost,
+
+        "/get/data/websocket_port": updateWebsocketPort,
+        "/set/data/websocket_port": 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

src-ui/store.js

@@ -290,6 +290,10 @@ export const { atomInstance: Atom_PluginsData, useHook: useStore_PluginsData } =
 export const { atomInstance: Atom_OscIpAddress, useHook: useStore_OscIpAddress } = createAtomWithHook("127.0.0.1", "OscIpAddress");
 export const { atomInstance: Atom_OscPort, useHook: useStore_OscPort } = createAtomWithHook("9000", "OscPort");
 
+export const { atomInstance: Atom_EnableWebsocket, useHook: useStore_EnableWebsocket } = createAtomWithHook(true, "EnableWebsocket");
+export const { atomInstance: Atom_WebsocketHost, useHook: useStore_WebsocketHost } = createAtomWithHook("127.0.0.1", "WebsocketHost");
+export const { atomInstance: Atom_WebsocketPort, useHook: useStore_WebsocketPort } = createAtomWithHook("2231", "WebsocketPort");
+
 
 
 // Supporters