{}}/> */}
);
-};
\ No newline at end of file
+};
+
+import { LabelComponent } from "../components/label_component/LabelComponent";
+import { useUiLanguage } from "@logics_configs/useUiLanguage";
+
+const UiLanguageContainer = () => {
+ const { t } = useTranslation();
+ const { currentUiLanguage, setUiLanguage } = useUiLanguage();
+
+ const SELECTABLE_UI_LANGUAGES_DICT = {
+ en: "English",
+ ja: "日本語",
+ ko: "한국어",
+ "zh-Hant": "繁體中文",
+ };
+
+ return (
+
+
+
+ {currentUiLanguage.state === "loading" &&
}
+ {Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => (
+
+ ))}
+
+
diff --git a/src-ui/logics/configs/useUiLanguage.js b/src-ui/logics/configs/useUiLanguage.js
new file mode 100644
index 00000000..31e134e5
--- /dev/null
+++ b/src-ui/logics/configs/useUiLanguage.js
@@ -0,0 +1,24 @@
+import { useStore_UiLanguage } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useUiLanguage = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentUiLanguage, updateUiLanguage } = useStore_UiLanguage();
+
+ const getUiLanguage = () => {
+ updateUiLanguage(() => new Promise(() => {}));
+ asyncStdoutToPython("/config/ui_language");
+ };
+
+ const setUiLanguage = (selected_ui_language) => {
+ updateUiLanguage(() => new Promise(() => {}));
+ asyncStdoutToPython("/controller/callback_set_ui_language", selected_ui_language);
+ };
+
+ return {
+ currentUiLanguage,
+ getUiLanguage,
+ updateUiLanguage,
+ setUiLanguage,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index fe05b0b1..6485513d 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -1,6 +1,7 @@
import { arrayToObject } from "@utils/arrayToObject";
import { useMainFunction } from "./useMainFunction";
import { useMessage } from "./useMessage";
+import { useSelectableLanguageList } from "./useSelectableLanguageList";
import { useVolume } from "./useVolume";
import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
@@ -15,6 +16,8 @@ import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
+import { useUiLanguage } from "@logics_configs/useUiLanguage";
+
export const useReceiveRoutes = () => {
const {
@@ -23,6 +26,8 @@ export const useReceiveRoutes = () => {
updateTranscriptionReceiveStatus,
} = useMainFunction();
+ const { updateSelectableLanguageList } = useSelectableLanguageList();
+
const {
updateSentMessageLogById,
addSentMessageLog,
@@ -43,6 +48,8 @@ export const useReceiveRoutes = () => {
const { updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { updateSendMessageButtonType } = useSendMessageButtonType();
+ const { updateUiLanguage } = useUiLanguage();
+
const {
updateVolumeVariable_Mic,
@@ -59,6 +66,7 @@ export const useReceiveRoutes = () => {
"/controller/callback_enable_transcription_receive": updateTranscriptionReceiveStatus,
"/controller/callback_disable_transcription_receive": updateTranscriptionReceiveStatus,
+ "/controller/list_language_and_country": updateSelectableLanguageList,
"/config/version": updateSoftwareVersion,
@@ -79,10 +87,10 @@ export const useReceiveRoutes = () => {
"/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
"/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker,
- "/controller/callback_enable_check_mic_threshold": () => updateMicThresholdCheckStatus(true),
- "/controller/callback_disable_check_mic_threshold": () => updateMicThresholdCheckStatus(false),
- "/controller/callback_enable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(true),
- "/controller/callback_disable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(false),
+ "/controller/callback_enable_check_mic_threshold": updateMicThresholdCheckStatus,
+ "/controller/callback_disable_check_mic_threshold": updateMicThresholdCheckStatus,
+ "/controller/callback_enable_check_speaker_threshold": updateSpeakerThresholdCheckStatus,
+ "/controller/callback_disable_check_speaker_threshold": updateSpeakerThresholdCheckStatus,
"/config/enable_auto_clear_message_box": updateEnableAutoClearMessageBox,
"/controller/callback_enable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
@@ -101,7 +109,10 @@ export const useReceiveRoutes = () => {
"/controller/callback_disable_mic_dynamic_energy_threshold": updateEnableAutomaticMicThreshold,
"/config/input_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold,
"/controller/callback_enable_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold,
- "/controller/callback_disable_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold,
+
+ "/config/ui_language": updateUiLanguage,
+ "/controller/callback_set_ui_language": updateUiLanguage,
+
"/controller/callback_messagebox_send": updateSentMessageLogById,
"/action/transcription_send_mic_message": addSentMessageLog,
@@ -112,11 +123,11 @@ export const useReceiveRoutes = () => {
switch (parsed_data.status) {
case 200:
const route = routes[parsed_data.endpoint];
- (route) ? route(parsed_data.result) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`);
+ (route) ? route(parsed_data.result) : console.error(`Invalid endpoint: ${parsed_data.endpoint}\nresult: ${JSON.stringify(parsed_data.result)}`);
break;
case 348:
- console.log("from backend:", parsed_data);
+ console.log(`from backend: %c ${JSON.stringify(parsed_data)}`, style_348);
break;
default:
@@ -126,4 +137,8 @@ export const useReceiveRoutes = () => {
};
return { receiveRoutes };
-};
\ No newline at end of file
+};
+
+const style_348 = [
+ "color: gray",
+].join(";");
\ No newline at end of file
diff --git a/src-ui/logics/useSelectableLanguageList.js b/src-ui/logics/useSelectableLanguageList.js
new file mode 100644
index 00000000..1e31a2d2
--- /dev/null
+++ b/src-ui/logics/useSelectableLanguageList.js
@@ -0,0 +1,17 @@
+import { useStore_SelectableLanguageList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectableLanguageList = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSelectableLanguageList, updateSelectableLanguageList } = useStore_SelectableLanguageList();
+
+ const getSelectableLanguageList = () => {
+ asyncStdoutToPython("/controller/list_language_and_country");
+ };
+
+ return {
+ currentSelectableLanguageList,
+ getSelectableLanguageList,
+ updateSelectableLanguageList,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useVolume.js b/src-ui/logics/useVolume.js
index a1991159..6ae7587c 100644
--- a/src-ui/logics/useVolume.js
+++ b/src-ui/logics/useVolume.js
@@ -28,9 +28,13 @@ export const useVolume = () => {
updateMicVolume(payload);
},
currentMicThresholdCheckStatus: currentMicThresholdCheckStatus,
- updateMicThresholdCheckStatus: (payload) => updateMicThresholdCheckStatus(payload),
+ updateMicThresholdCheckStatus: (payload) => {
+ updateMicThresholdCheckStatus(payload);
+ if (payload === false) updateMicVolume("0");
+ },
volumeCheckStart_Speaker: () => {
+ updateSpeakerVolume("0");
updateSpeakerThresholdCheckStatus(asyncPending);
asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold");
},
@@ -42,7 +46,10 @@ export const useVolume = () => {
updateSpeakerVolume(payload);
},
currentSpeakerThresholdCheckStatus: currentSpeakerThresholdCheckStatus,
- updateSpeakerThresholdCheckStatus: (payload) => updateSpeakerThresholdCheckStatus(payload),
+ updateSpeakerThresholdCheckStatus: (payload) => {
+ updateSpeakerThresholdCheckStatus(payload);
+ if (payload === false) updateSpeakerVolume("0");
+ }
};
};
\ No newline at end of file
diff --git a/src-ui/store.js b/src-ui/store.js
index 9fc296c1..b65e0395 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -96,7 +96,6 @@ const createAsyncAtomWithHook = (initialValue, base_ame) => {
export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook("-", "SoftwareVersion");
-export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage");
export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAsyncAtomWithHook(false, "TranslationStatus");
export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAsyncAtomWithHook(false, "TranscriptionSendStatus");
export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAsyncAtomWithHook(false, "TranscriptionReceiveStatus");
@@ -109,6 +108,8 @@ export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_Is
"IsOpenedLanguageSelector"
);
+export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList");
+
export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook(1, "SelectedPresetTabNumber");
export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
@@ -136,6 +137,17 @@ export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThr
export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAsyncAtomWithHook(false, "EnableAutomaticMicThreshold");
export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAsyncAtomWithHook(false, "EnableAutomaticSpeakerThreshold");
+
+// Appearance
+export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAsyncAtomWithHook("en", "UiLanguage");
+
+
+
+
+
+
+
+
export const { atomInstance: Atom_SendMessageFormat, useHook: useStore_SendMessageFormat } = createAtomWithHook({
before: "",
after: "",