every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-10-16 00:44:14 +09:00
parent aeb15f237a
commit e1e06febd2
15 changed files with 456 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src-ui/app/App.jsx
View File

@@ -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) => {

3
src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
View File

@@ -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 />;

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

@@ -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 [input_value, setInputValue] = useState(initialValue);
const _Entry = forwardRef((props, ref) => {
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}
onChange={onChangeFunction}
value={props.ui_variable}
onChange={(e) => props.onChange(e)}
/>
</div>
</div>

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

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

215
src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx Normal file
View File

@@ -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}
/>
);
};

0
src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss Normal file
View File

8
src-ui/logics/configs/index.js
View File

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

24
src-ui/logics/configs/transcription/useMicMaxWords.js Normal file
View File

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

24
src-ui/logics/configs/transcription/useMicPhraseTimeout.js Normal file
View File

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

24
src-ui/logics/configs/transcription/useMicRecordTimeout.js Normal file
View File

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

24
src-ui/logics/configs/transcription/useSpeakerMaxWords.js Normal file
View File

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

24
src-ui/logics/configs/transcription/useSpeakerPhraseTimeout.js Normal file
View File

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

24
src-ui/logics/configs/transcription/useSpeakerRecordTimeout.js Normal file
View File

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

49
src-ui/logics/useReceiveRoutes.js
View File

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

8
src-ui/store.js
View File

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