[Update] Add Transcription Tab. Mix/Speaker, record timeout, phrase timeout, max words.

src-ui/app/App.jsx

@@ -51,6 +51,12 @@ import {
     useMicHostList,
     useMicDeviceList,
     useSpeakerDeviceList,
+    useMicRecordTimeout,
+    useMicPhraseTimeout,
+    useMicMaxWords,
+    useSpeakerRecordTimeout,
+    useSpeakerPhraseTimeout,
+    useSpeakerMaxWords,
 } from "@logics_configs";
 
 import {
@@ -100,6 +106,14 @@ const StartPythonFacadeComponent = () => {
     const { getSelectableLanguageList } = useSelectableLanguageList();
     const { getMessageInputBoxRatio } = useMessageInputBoxRatio();
 
+    const { getMicRecordTimeout } = useMicRecordTimeout();
+    const { getMicPhraseTimeout } = useMicPhraseTimeout();
+    const { getMicMaxWords } = useMicMaxWords();
+
+    const { getSpeakerRecordTimeout } = useSpeakerRecordTimeout();
+    const { getSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
+    const { getSpeakerMaxWords } = useSpeakerMaxWords();
+
 
     useEffect(() => {
         if (!hasRunRef.current) {
@@ -143,6 +157,14 @@ const StartPythonFacadeComponent = () => {
                 getEnableAutomaticMicThreshold();
                 getEnableAutomaticSpeakerThreshold();
 
+                getMicRecordTimeout();
+                getMicPhraseTimeout();
+                getMicMaxWords();
+
+                getSpeakerRecordTimeout();
+                getSpeakerPhraseTimeout();
+                getSpeakerMaxWords();
+
                 getEnableAutoClearMessageBox();
                 getSendMessageButtonType();
             }).catch((err) => {

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

@@ -2,6 +2,7 @@ import { useStore_SelectedConfigTabId } from "@store";
 
 import { Device } from "./device/Device";
 import { Appearance } from "./appearance/Appearance";
+import { Transcription } from "./transcription/Transcription";
 // import { Others } from "./others/Others";
 // import { AboutVrct } from "./about_vrct/AboutVrct";
 
@@ -14,6 +15,8 @@ export const SettingBox = () => {
         //     return <Others />;
         case "appearance":
             return <Appearance />;
+        case "transcription":
+            return <Transcription />;
         // case "about_vrct":
         //     return <AboutVrct />;
 

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

@@ -1,17 +1,9 @@
-import React, { useState, useRef, forwardRef, useImperativeHandle } from "react";
+import React, { useRef, forwardRef, useImperativeHandle } from "react";
 import styles from "./_Entry.module.scss";
 
-const _Entry = forwardRef(({ width, onChange, initialValue = "" }, ref) => {
+const _Entry = forwardRef((props, ref) => {
-    const [input_value, setInputValue] = useState(initialValue);
     const inputRef = useRef();
 
-    const onChangeFunction = (e) => {
-        setInputValue(e.currentTarget.value);
-        if (onChange) {
-            onChange(e);
-        }
-    };
-
     useImperativeHandle(ref, () => ({
         focus: () => {
             inputRef.current.focus();
@@ -22,13 +14,13 @@ const _Entry = forwardRef(({ width, onChange, initialValue = "" }, ref) => {
         <div className={styles.entry_container}>
             <div
                 className={styles.entry_wrapper}
-                style={{ width }}
+                style={{width: props.width }}
             >
                 <input
                     ref={inputRef}
                     className={styles.entry_input_area}
-                    value={input_value}
+                    value={props.ui_variable}
-                    onChange={onChangeFunction}
+                    onChange={(e) => props.onChange(e)}
                 />
             </div>
         </div>

src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.jsx

@@ -1,15 +1,10 @@
 import styles from "./Entry.module.scss";
 import { _Entry } from "../_atoms/_entry/_Entry";
 
-export const Entry = ({width}) => {
+export const Entry = (props) => {
-
-    const handleInputChange = (e) => {
-        console.log(e.currentTarget.value);
-    };
-
     return (
         <div className={styles.entry_container}>
-            <_Entry width={width} onChange={handleInputChange} initialValue="" />
+            <_Entry {...props} />
         </div>
     );
 };

src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx

@@ -0,0 +1,215 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "./Transcription.module.scss";
+
+import {
+    useMicRecordTimeout,
+    useMicPhraseTimeout,
+    useMicMaxWords,
+
+    useSpeakerRecordTimeout,
+    useSpeakerPhraseTimeout,
+    useSpeakerMaxWords,
+} from "@logics_configs";
+
+import {
+    EntryContainer,
+} from "../_templates/Templates";
+
+export const Transcription = () => {
+    return (
+        <>
+            <Mic_Container />
+            <Speaker_Container />
+        </>
+    );
+};
+
+
+const Mic_Container = () => {
+    return (
+        <>
+            <MicRecordTimeout_Box />
+            <MicPhraseTimeout_Box />
+            <MicMaxWords_Box />
+        </>
+    );
+};
+
+const MicRecordTimeout_Box = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentMicRecordTimeout, setMicRecordTimeout } = useMicRecordTimeout();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setMicRecordTimeout(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentMicRecordTimeout.data);
+    }, [currentMicRecordTimeout]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.mic_record_timeout.label")}
+            desc={t("config_page.mic_record_timeout.desc")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+const MicPhraseTimeout_Box = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentMicPhraseTimeout, setMicPhraseTimeout } = useMicPhraseTimeout();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setMicPhraseTimeout(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentMicPhraseTimeout.data);
+    }, [currentMicPhraseTimeout]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.mic_phrase_timeout.label")}
+            desc={t("config_page.mic_phrase_timeout.desc")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+const MicMaxWords_Box = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentMicMaxWords, setMicMaxWords } = useMicMaxWords();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setMicMaxWords(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentMicMaxWords.data);
+    }, [currentMicMaxWords]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.mic_max_phrase.label")}
+            desc={t("config_page.mic_max_phrase.desc")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+
+
+
+
+
+const Speaker_Container = () => {
+    return (
+        <>
+            <SpeakerRecordTimeout_Box />
+            <SpeakerPhraseTimeout_Box />
+            <SpeakerMaxWords_Box />
+        </>
+    );
+};
+
+const SpeakerRecordTimeout_Box = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentSpeakerRecordTimeout, setSpeakerRecordTimeout } = useSpeakerRecordTimeout();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setSpeakerRecordTimeout(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentSpeakerRecordTimeout.data);
+    }, [currentSpeakerRecordTimeout]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.speaker_record_timeout.label")}
+            desc={t("config_page.speaker_record_timeout.desc")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+const SpeakerPhraseTimeout_Box = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentSpeakerPhraseTimeout, setSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setSpeakerPhraseTimeout(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentSpeakerPhraseTimeout.data);
+    }, [currentSpeakerPhraseTimeout]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.speaker_phrase_timeout.label")}
+            desc={t("config_page.speaker_phrase_timeout.desc")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+const SpeakerMaxWords_Box = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentSpeakerMaxWords, setSpeakerMaxWords } = useSpeakerMaxWords();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setSpeakerMaxWords(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentSpeakerMaxWords.data);
+    }, [currentSpeakerMaxWords]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.speaker_max_phrase.label")}
+            desc={t("config_page.speaker_max_phrase.desc")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};

src-ui/logics/configs/index.js

@@ -19,4 +19,12 @@ export { useUiScaling } from "./appearance/useUiScaling";
 
 export { useEnableAutoClearMessageBox } from "./others/useEnableAutoClearMessageBox";
 
+export { useMicRecordTimeout } from "./transcription/useMicRecordTimeout";
+export { useMicPhraseTimeout } from "./transcription/useMicPhraseTimeout";
+export { useMicMaxWords } from "./transcription/useMicMaxWords";
+
+export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout";
+export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout";
+export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords";
+
 export { useSoftwareVersion } from "./useSoftwareVersion";

src-ui/logics/configs/transcription/useMicMaxWords.js

@@ -0,0 +1,24 @@
+import { useStore_MicMaxWords } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicMaxWords = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMicMaxWords, updateMicMaxWords, pendingMicMaxWords } = useStore_MicMaxWords();
+
+    const getMicMaxWords = () => {
+        pendingMicMaxWords();
+        asyncStdoutToPython("/get/data/mic_max_phrases");
+    };
+
+    const setMicMaxWords = (selected_mic_max_phrases) => {
+        pendingMicMaxWords();
+        asyncStdoutToPython("/set/data/mic_max_phrases", selected_mic_max_phrases);
+    };
+
+    return {
+        currentMicMaxWords,
+        getMicMaxWords,
+        updateMicMaxWords,
+        setMicMaxWords,
+    };
+};

src-ui/logics/configs/transcription/useMicPhraseTimeout.js

@@ -0,0 +1,24 @@
+import { useStore_MicPhraseTimeout } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicPhraseTimeout = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMicPhraseTimeout, updateMicPhraseTimeout, pendingMicPhraseTimeout } = useStore_MicPhraseTimeout();
+
+    const getMicPhraseTimeout = () => {
+        pendingMicPhraseTimeout();
+        asyncStdoutToPython("/get/data/mic_phrase_timeout");
+    };
+
+    const setMicPhraseTimeout = (selected_mic_phrase_timeout) => {
+        pendingMicPhraseTimeout();
+        asyncStdoutToPython("/set/data/mic_phrase_timeout", selected_mic_phrase_timeout);
+    };
+
+    return {
+        currentMicPhraseTimeout,
+        getMicPhraseTimeout,
+        updateMicPhraseTimeout,
+        setMicPhraseTimeout,
+    };
+};

src-ui/logics/configs/transcription/useMicRecordTimeout.js

@@ -0,0 +1,24 @@
+import { useStore_MicRecordTimeout } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicRecordTimeout = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMicRecordTimeout, updateMicRecordTimeout, pendingMicRecordTimeout } = useStore_MicRecordTimeout();
+
+    const getMicRecordTimeout = () => {
+        pendingMicRecordTimeout();
+        asyncStdoutToPython("/get/data/mic_record_timeout");
+    };
+
+    const setMicRecordTimeout = (selected_mic_record_timeout) => {
+        pendingMicRecordTimeout();
+        asyncStdoutToPython("/set/data/mic_record_timeout", selected_mic_record_timeout);
+    };
+
+    return {
+        currentMicRecordTimeout,
+        getMicRecordTimeout,
+        updateMicRecordTimeout,
+        setMicRecordTimeout,
+    };
+};

src-ui/logics/configs/transcription/useSpeakerMaxWords.js

@@ -0,0 +1,24 @@
+import { useStore_SpeakerMaxWords } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerMaxWords = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSpeakerMaxWords, updateSpeakerMaxWords, pendingSpeakerMaxWords } = useStore_SpeakerMaxWords();
+
+    const getSpeakerMaxWords = () => {
+        pendingSpeakerMaxWords();
+        asyncStdoutToPython("/get/data/speaker_max_phrases");
+    };
+
+    const setSpeakerMaxWords = (selected_speaker_max_phrases) => {
+        pendingSpeakerMaxWords();
+        asyncStdoutToPython("/set/data/speaker_max_phrases", selected_speaker_max_phrases);
+    };
+
+    return {
+        currentSpeakerMaxWords,
+        getSpeakerMaxWords,
+        updateSpeakerMaxWords,
+        setSpeakerMaxWords,
+    };
+};

src-ui/logics/configs/transcription/useSpeakerPhraseTimeout.js

@@ -0,0 +1,24 @@
+import { useStore_SpeakerPhraseTimeout } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerPhraseTimeout = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSpeakerPhraseTimeout, updateSpeakerPhraseTimeout, pendingSpeakerPhraseTimeout } = useStore_SpeakerPhraseTimeout();
+
+    const getSpeakerPhraseTimeout = () => {
+        pendingSpeakerPhraseTimeout();
+        asyncStdoutToPython("/get/data/speaker_phrase_timeout");
+    };
+
+    const setSpeakerPhraseTimeout = (selected_speaker_phrase_timeout) => {
+        pendingSpeakerPhraseTimeout();
+        asyncStdoutToPython("/set/data/speaker_phrase_timeout", selected_speaker_phrase_timeout);
+    };
+
+    return {
+        currentSpeakerPhraseTimeout,
+        getSpeakerPhraseTimeout,
+        updateSpeakerPhraseTimeout,
+        setSpeakerPhraseTimeout,
+    };
+};

src-ui/logics/configs/transcription/useSpeakerRecordTimeout.js

@@ -0,0 +1,24 @@
+import { useStore_SpeakerRecordTimeout } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerRecordTimeout = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSpeakerRecordTimeout, updateSpeakerRecordTimeout, pendingSpeakerRecordTimeout } = useStore_SpeakerRecordTimeout();
+
+    const getSpeakerRecordTimeout = () => {
+        pendingSpeakerRecordTimeout();
+        asyncStdoutToPython("/get/data/speaker_record_timeout");
+    };
+
+    const setSpeakerRecordTimeout = (selected_speaker_record_timeout) => {
+        pendingSpeakerRecordTimeout();
+        asyncStdoutToPython("/set/data/speaker_record_timeout", selected_speaker_record_timeout);
+    };
+
+    return {
+        currentSpeakerRecordTimeout,
+        getSpeakerRecordTimeout,
+        updateSpeakerRecordTimeout,
+        setSpeakerRecordTimeout,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -34,6 +34,12 @@ import {
     useUiScaling,
     useMessageLogUiScaling,
     useTransparency,
+    useMicRecordTimeout,
+    useMicPhraseTimeout,
+    useMicMaxWords,
+    useSpeakerRecordTimeout,
+    useSpeakerPhraseTimeout,
+    useSpeakerMaxWords,
 } from "@logics_configs";
 
 export const useReceiveRoutes = () => {
@@ -85,6 +91,14 @@ export const useReceiveRoutes = () => {
     const { updateSelectedFontFamily } = useSelectedFontFamily();
     const { updateTransparency } = useTransparency();
 
+    const { updateMicRecordTimeout } = useMicRecordTimeout();
+    const { updateMicPhraseTimeout } = useMicPhraseTimeout();
+    const { updateMicMaxWords } = useMicMaxWords();
+
+    const { updateSpeakerRecordTimeout } = useSpeakerRecordTimeout();
+    const { updateSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
+    const { updateSpeakerMaxWords } = useSpeakerMaxWords();
+
     const routes = {
         // Common
         "/run/feed_watchdog": () => {},
@@ -227,6 +241,25 @@ export const useReceiveRoutes = () => {
         "/get/data/transparency": updateTransparency,
         "/set/data/transparency": updateTransparency,
 
+        // Transcription
+        "/get/data/mic_record_timeout": updateMicRecordTimeout,
+        "/set/data/mic_record_timeout": updateMicRecordTimeout,
+
+        "/get/data/mic_phrase_timeout": updateMicPhraseTimeout,
+        "/set/data/mic_phrase_timeout": updateMicPhraseTimeout,
+
+        "/get/data/mic_max_phrases": updateMicMaxWords,
+        "/set/data/mic_max_phrases": updateMicMaxWords,
+
+        "/get/data/speaker_record_timeout": updateSpeakerRecordTimeout,
+        "/set/data/speaker_record_timeout": updateSpeakerRecordTimeout,
+
+        "/get/data/speaker_phrase_timeout": updateSpeakerPhraseTimeout,
+        "/set/data/speaker_phrase_timeout": updateSpeakerPhraseTimeout,
+
+        "/get/data/speaker_max_phrases": updateSpeakerMaxWords,
+        "/set/data/speaker_max_phrases": updateSpeakerMaxWords,
+
         // Others Tab
         "/get/data/auto_clear_message_box": updateEnableAutoClearMessageBox,
         "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageBox,
@@ -236,6 +269,16 @@ export const useReceiveRoutes = () => {
         "/set/data/send_message_button_type": updateSendMessageButtonType,
     };
 
+    const error_routes = {
+        "/set/data/mic_record_timeout": updateMicRecordTimeout,
+        "/set/data/mic_phrase_timeout": updateMicPhraseTimeout,
+        "/set/data/mic_max_phrases": updateMicMaxWords,
+
+        "/set/data/speaker_record_timeout": updateSpeakerRecordTimeout,
+        "/set/data/speaker_phrase_timeout": updateSpeakerPhraseTimeout,
+        "/set/data/speaker_max_phrases": updateSpeakerMaxWords,
+    };
+
     const receiveRoutes = (parsed_data) => {
         switch (parsed_data.status) {
             case 200:
@@ -243,6 +286,12 @@ export const useReceiveRoutes = () => {
                 (route) ? route(parsed_data.result) : console.error(`Invalid endpoint: ${parsed_data.endpoint}\nresult: ${JSON.stringify(parsed_data.result)}`);
                 break;
 
+            case 400:
+                const error_route = error_routes[parsed_data.endpoint];
+                (error_route) ? error_route(parsed_data.result.data) : console.error(`Invalid endpoint: ${parsed_data.endpoint}\nresult: ${JSON.stringify(parsed_data.result)}`);
+                console.error(`status 400: ${JSON.stringify(parsed_data.result)}`);
+                break;
+
             case 348:
                 // console.log(`from backend: %c ${JSON.stringify(parsed_data)}`, style_348);
                 break;

src-ui/store.js

@@ -180,6 +180,14 @@ export const { atomInstance: Atom_Transparency, useHook: useStore_Transparency }
 export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");
 export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList");
 
+// Transcription
+export const { atomInstance: Atom_MicRecordTimeout, useHook: useStore_MicRecordTimeout } = createAtomWithHook(0, "MicRecordTimeout");
+export const { atomInstance: Atom_MicPhraseTimeout, useHook: useStore_MicPhraseTimeout } = createAtomWithHook(0, "MicPhraseTimeout");
+export const { atomInstance: Atom_MicMaxWords, useHook: useStore_MicMaxWords } = createAtomWithHook(0, "MicMaxWords");
+
+export const { atomInstance: Atom_SpeakerRecordTimeout, useHook: useStore_SpeakerRecordTimeout } = createAtomWithHook(0, "SpeakerRecordTimeout");
+export const { atomInstance: Atom_SpeakerPhraseTimeout, useHook: useStore_SpeakerPhraseTimeout } = createAtomWithHook(0, "SpeakerPhraseTimeout");
+export const { atomInstance: Atom_SpeakerMaxWords, useHook: useStore_SpeakerMaxWords } = createAtomWithHook(0, "SpeakerMaxWords");
 
 // Others
 export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAtomWithHook(true, "EnableAutoClearMessageBox");