- <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey}/>
+ <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable}/>
{is_editable
? null
diff --git a/src-ui/app/config_page/setting_section/setting_box/index.js b/src-ui/app/config_page/setting_section/setting_box/index.js
index a656c23c..5c19a095 100644
--- a/src-ui/app/config_page/setting_section/setting_box/index.js
+++ b/src-ui/app/config_page/setting_section/setting_box/index.js
@@ -1,5 +1,6 @@
export { Device } from "./device/Device";
export { Appearance } from "./appearance/Appearance";
+export { Translation } from "./translation/Translation";
export { Transcription } from "./transcription/Transcription";
export { Others, VrcMicMuteSyncContainer } from "./others/Others";
export { AdvancedSettings } from "./advanced_settings/AdvancedSettings";
diff --git a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx
new file mode 100644
index 00000000..5cae2c20
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx
@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "./Translation.module.scss";
+
+import {
+ useDeepLAuthKey,
+} from "@logics_configs";
+
+import {
+ DeeplAuthKeyContainer,
+} from "../_templates/Templates";
+
+export const Translation = () => {
+ const [input_value, seInputValue] = useState("");
+ const { t } = useTranslation();
+ const { currentDeepLAuthKey, setDeepLAuthKey, deleteDeepLAuthKey } = useDeepLAuthKey();
+
+ const onChangeFunction = (value) => {
+ seInputValue(value);
+ };
+
+ const saveFunction = () => {
+ if (input_value === "") return deleteDeepLAuthKey();
+ setDeepLAuthKey(input_value);
+ };
+
+ useEffect(() => {
+ seInputValue(currentDeepLAuthKey.data);
+ }, [currentDeepLAuthKey]);
+
+ return (
+ <>
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.module.scss b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js
index e290d5d1..504fcce6 100644
--- a/src-ui/logics/configs/index.js
+++ b/src-ui/logics/configs/index.js
@@ -31,6 +31,8 @@ export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout
export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout";
export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords";
+export { useDeepLAuthKey } from "./translation/useDeepLAuthKey";
+
export { useIsEnabledOverlaySmallLog } from "./vr/useIsEnabledOverlaySmallLog";
export { useOverlaySettings } from "./vr/useOverlaySettings";
export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings";
diff --git a/src-ui/logics/configs/translation/useDeepLAuthKey.js b/src-ui/logics/configs/translation/useDeepLAuthKey.js
new file mode 100644
index 00000000..e379ce0f
--- /dev/null
+++ b/src-ui/logics/configs/translation/useDeepLAuthKey.js
@@ -0,0 +1,30 @@
+import { useStore_DeepLAuthKey } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useDeepLAuthKey = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentDeepLAuthKey, updateDeepLAuthKey, pendingDeepLAuthKey } = useStore_DeepLAuthKey();
+
+ const getDeepLAuthKey = () => {
+ pendingDeepLAuthKey();
+ asyncStdoutToPython("/get/data/deepl_auth_key");
+ };
+
+ const setDeepLAuthKey = (selected_deepl_auth_key) => {
+ pendingDeepLAuthKey();
+ asyncStdoutToPython("/set/data/deepl_auth_key", selected_deepl_auth_key);
+ };
+
+ const deleteDeepLAuthKey = () => {
+ pendingDeepLAuthKey();
+ asyncStdoutToPython("/delete/data/deepl_auth_key");
+ };
+
+ return {
+ currentDeepLAuthKey,
+ getDeepLAuthKey,
+ updateDeepLAuthKey,
+ setDeepLAuthKey,
+ deleteDeepLAuthKey,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 7879b28e..8cdda433 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -45,6 +45,7 @@ import {
useSpeakerRecordTimeout,
useSpeakerPhraseTimeout,
useSpeakerMaxWords,
+ useDeepLAuthKey,
useOverlaySettings,
useIsEnabledOverlaySmallLog,
useOverlaySmallLogSettings,
@@ -116,6 +117,8 @@ export const useReceiveRoutes = () => {
const { updateSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
const { updateSpeakerMaxWords } = useSpeakerMaxWords();
+ const { updateDeepLAuthKey } = useDeepLAuthKey();
+
const { updateOverlaySettings } = useOverlaySettings();
const { updateOverlaySmallLogSettings } = useOverlaySmallLogSettings();
const { updateIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
@@ -270,6 +273,11 @@ export const useReceiveRoutes = () => {
"/get/data/transparency": updateTransparency,
"/set/data/transparency": updateTransparency,
+ // Translation
+ "/get/data/deepl_auth_key": updateDeepLAuthKey,
+ "/set/data/deepl_auth_key": updateDeepLAuthKey,
+ "/delete/data/deepl_auth_key": () => updateDeepLAuthKey(""),
+
// Transcription
"/get/data/mic_record_timeout": updateMicRecordTimeout,
"/set/data/mic_record_timeout": updateMicRecordTimeout,
@@ -366,6 +374,8 @@ export const useReceiveRoutes = () => {
"/set/data/speaker_record_timeout": updateSpeakerRecordTimeout,
"/set/data/speaker_phrase_timeout": updateSpeakerPhraseTimeout,
"/set/data/speaker_max_phrases": updateSpeakerMaxWords,
+
+ "/set/data/deepl_auth_key": updateDeepLAuthKey,
};
diff --git a/src-ui/store.js b/src-ui/store.js
index 2e775960..0df5654f 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -181,6 +181,9 @@ export const { atomInstance: Atom_Transparency, useHook: useStore_Transparency }
export const { atomInstance: Atom_IsOpenedMicWordFilterList, useHook: useStore_IsOpenedMicWordFilterList } = createAtomWithHook(false, "IsOpenedMicWordFilterList");
export const { atomInstance: Atom_MicWordFilterList, useHook: useStore_MicWordFilterList } = createAtomWithHook([], "MicWordFilterList");
+// Translation
+export const { atomInstance: Atom_DeepLAuthKey, useHook: useStore_DeepLAuthKey } = createAtomWithHook(null, "DeepLAuthKey");
+
// Transcription
export const { atomInstance: Atom_MicRecordTimeout, useHook: useStore_MicRecordTimeout } = createAtomWithHook(0, "MicRecordTimeout");
export const { atomInstance: Atom_MicPhraseTimeout, useHook: useStore_MicPhraseTimeout } = createAtomWithHook(0, "MicPhraseTimeout");