From 0b486313636e4cd22e6efd740c848408c7f47fcd Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 19 May 2025 03:52:43 +0900
Subject: [PATCH] [Update] AdvancedSettings: Websocket: Add settings ui.
---
locales/en.yml | 6 ++
locales/ja.yml | 7 +-
.../advanced_settings/AdvancedSettings.jsx | 92 +++++++++++++++++++
.../configs/advanced_settings/useWebsocket.js | 67 ++++++++++++++
src-ui/logics/configs/index.js | 1 +
src-ui/logics/useReceiveRoutes.js | 16 ++++
src-ui/store.js | 4 +
7 files changed, 192 insertions(+), 1 deletion(-)
create mode 100644 src-ui/logics/configs/advanced_settings/useWebsocket.js
diff --git a/locales/en.yml b/locales/en.yml
index 9c45be98..d7a2347a 100644
--- a/locales/en.yml
+++ b/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.
diff --git a/locales/ja.yml b/locales/ja.yml
index 8241d324..7286cb54 100644
--- a/locales/ja.yml
+++ b/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: プラグインをダウンロード中。
diff --git a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx
index 7d96cda5..2f4c15cd 100644
--- a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx
+++ b/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 = () => {
+
);
};
@@ -87,6 +94,7 @@ const OscPortContainer = () => {
/>
);
};
+
const OpenConfigFolderContainer = () => {
const { t } = useTranslation();
const { openFolder_ConfigFile } = useOpenFolder();
@@ -120,4 +128,88 @@ const OpenSwitchComputeDeviceModalContainer = () => {
/>
);
+};
+
+
+const WebsocketContainer = () => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+const EnableWebsocketContainer = () => {
+ const { t } = useTranslation();
+ const { currentEnableWebsocket, toggleEnableWebsocket } = useWebsocket();
+
+ return (
+
+ );
+};
+
+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 (
+
+ );
+};
+
+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 (
+
+ );
};
\ No newline at end of file
diff --git a/src-ui/logics/configs/advanced_settings/useWebsocket.js b/src-ui/logics/configs/advanced_settings/useWebsocket.js
new file mode 100644
index 00000000..51361489
--- /dev/null
+++ b/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,
+
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js
index 912e2a7d..03214771 100644
--- a/src-ui/logics/configs/index.js
+++ b/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";
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 4a4f944c..1d89be33 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/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
diff --git a/src-ui/store.js b/src-ui/store.js
index 8f5317a3..f33ebbfc 100644
--- a/src-ui/store.js
+++ b/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