[Update] Config Page: Add Translation Tab. DeeplAuthKey section.

Allow null value to Entry component's input element.

src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx

@@ -3,6 +3,7 @@ import { useStore_SelectedConfigTabId } from "@store";
 import {
     Device,
     Appearance,
+    Translation,
     Transcription,
     Others,
     AdvancedSettings,
@@ -17,6 +18,8 @@ export const SettingBox = () => {
             return <Device />;
         case "appearance":
             return <Appearance />;
+        case "translation":
+            return <Translation />;
         case "transcription":
             return <Transcription />;
         case "others":

src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx

@@ -19,7 +19,7 @@ const _Entry = forwardRef((props, ref) => {
                 <input
                     ref={inputRef}
                     className={styles.entry_input_area}
-                    value={props.ui_variable}
+                    value={props.ui_variable === null ? "" : props.ui_variable}
                     onChange={(e) => props.onChange(e)}
                 />
             </div>

src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx

@@ -5,10 +5,9 @@ import ExternalLink from "@images/external_link.svg?react";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import { useState, useRef } from "react";
 
-export const DeeplAuthKey = () => {
+export const DeeplAuthKey = (props) => {
     const { t } = useTranslation();
     const [is_editable, seIsEditable] = useState(false);
-    const [input_value, seInputValue] = useState("");
     const entryRef = useRef(null);
 
     const revealEditAuthKey = () => {
@@ -17,16 +16,16 @@ export const DeeplAuthKey = () => {
     };
 
     const onchangeEntryAuthKey = (e) => {
-        seInputValue(e.target.value);
+        props.onChangeFunction(e.target.value);
     };
     const saveAuthKey = () => {
-        console.log(input_value);
+        props.saveFunction();
     };
 
     return (
         <div className={styles.container}>
             <div className={styles.entry_section_wrapper}>
-                <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey}/>
+                <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable}/>
                 <button className={styles.save_button} onClick={saveAuthKey}>Save</button>
                 {is_editable
                 ? null

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";

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 (
+        <>
+            <DeeplAuthKeyContainer
+                label={t("config_page.deepl_auth_key.label")}
+                desc={t(
+                    "config_page.deepl_auth_key.desc",
+                    {translator: t("main_page.translator")}
+                )}
+                variable={input_value}
+                onChangeFunction={onChangeFunction}
+                saveFunction={saveFunction}
+            />
+        </>
+    );
+};

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";

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,
+    };
+};

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,
     };
 
 

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");