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

[Update/bugfix] Config Page: Transcription: Change the input design entry to dropdowns. It will fix the bug that cant put e.g. the user wanna put "10" actually, then, type "1" at first, but validation says "1" is not allowed.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-03-16 09:56:30 +09:00
parent fa2c851c5b
commit ab39421c79
2 changed files with 64 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,6 @@
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import styles from "./Transcription.module.scss"; import styles from "./Transcription.module.scss";
import { updateLabelsById } from "@utils"; import { updateLabelsById, genNumObjArray } from "@utils";
import { import {
useMicRecordTimeout, useMicRecordTimeout,
@@ -21,7 +20,6 @@ import {
} from "@logics_configs"; } from "@logics_configs";
import { import {
EntryContainer,
WordFilterContainer, WordFilterContainer,
DownloadModelsContainer, DownloadModelsContainer,
RadioButtonContainer, RadioButtonContainer,
@@ -59,82 +57,61 @@ const Mic_Container = () => {
const MicRecordTimeout_Box = () => { const MicRecordTimeout_Box = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const [ui_variable, setUiVariable] = useState("");
const { currentMicRecordTimeout, setMicRecordTimeout } = useMicRecordTimeout(); const { currentMicRecordTimeout, setMicRecordTimeout } = useMicRecordTimeout();
const onChangeFunction = (e) => {
const value = e.currentTarget.value; const selectFunction = (selected_data) => {
if (value === "") { setMicRecordTimeout(selected_data.selected_id);
setUiVariable("");
} else {
setUiVariable(value);
setMicRecordTimeout(value);
}
}; };
useEffect(()=> {
setUiVariable(currentMicRecordTimeout.data);
}, [currentMicRecordTimeout]);
return ( return (
<EntryContainer <DropdownMenuContainer
dropdown_id="mic_record_timeout"
label={t("config_page.transcription.mic_record_timeout.label")} label={t("config_page.transcription.mic_record_timeout.label")}
desc={t("config_page.transcription.mic_record_timeout.desc")} desc={t("config_page.transcription.mic_record_timeout.desc")}
ui_variable={ui_variable} selected_id={currentMicRecordTimeout.data}
onChange={onChangeFunction} list={genNumObjArray(31)}
selectFunction={selectFunction}
state={currentMicRecordTimeout.state}
/> />
); );
}; };
const MicPhraseTimeout_Box = () => { const MicPhraseTimeout_Box = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const [ui_variable, setUiVariable] = useState("");
const { currentMicPhraseTimeout, setMicPhraseTimeout } = useMicPhraseTimeout(); const { currentMicPhraseTimeout, setMicPhraseTimeout } = useMicPhraseTimeout();
const onChangeFunction = (e) => {
const value = e.currentTarget.value; const selectFunction = (selected_data) => {
if (value === "") { setMicPhraseTimeout(selected_data.selected_id);
setUiVariable("");
} else {
setUiVariable(value);
setMicPhraseTimeout(value);
}
}; };
useEffect(()=> {
setUiVariable(currentMicPhraseTimeout.data);
}, [currentMicPhraseTimeout]);
return ( return (
<EntryContainer <DropdownMenuContainer
dropdown_id="mic_phrase_timeout"
label={t("config_page.transcription.mic_phrase_timeout.label")} label={t("config_page.transcription.mic_phrase_timeout.label")}
desc={t("config_page.transcription.mic_phrase_timeout.desc")} desc={t("config_page.transcription.mic_phrase_timeout.desc")}
ui_variable={ui_variable} selected_id={currentMicPhraseTimeout.data}
onChange={onChangeFunction} list={genNumObjArray(31)}
selectFunction={selectFunction}
state={currentMicPhraseTimeout.state}
/> />
); );
}; };
const MicMaxWords_Box = () => { const MicMaxWords_Box = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const [ui_variable, setUiVariable] = useState("");
const { currentMicMaxWords, setMicMaxWords } = useMicMaxWords(); const { currentMicMaxWords, setMicMaxWords } = useMicMaxWords();
const onChangeFunction = (e) => {
const value = e.currentTarget.value; const selectFunction = (selected_data) => {
if (value === "") { setMicMaxWords(selected_data.selected_id);
setUiVariable("");
} else {
setUiVariable(value);
setMicMaxWords(value);
}
}; };
useEffect(()=> {
setUiVariable(currentMicMaxWords.data);
}, [currentMicMaxWords]);
return ( return (
<EntryContainer <DropdownMenuContainer
dropdown_id="mic_max_phrase"
label={t("config_page.transcription.mic_max_phrase.label")} label={t("config_page.transcription.mic_max_phrase.label")}
desc={t("config_page.transcription.mic_max_phrase.desc")} desc={t("config_page.transcription.mic_max_phrase.desc")}
ui_variable={ui_variable} selected_id={currentMicMaxWords.data}
onChange={onChangeFunction} list={genNumObjArray(31)}
selectFunction={selectFunction}
state={currentMicMaxWords.state}
/> />
); );
}; };
@@ -167,82 +144,60 @@ const Speaker_Container = () => {
const SpeakerRecordTimeout_Box = () => { const SpeakerRecordTimeout_Box = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const [ui_variable, setUiVariable] = useState("");
const { currentSpeakerRecordTimeout, setSpeakerRecordTimeout } = useSpeakerRecordTimeout(); const { currentSpeakerRecordTimeout, setSpeakerRecordTimeout } = useSpeakerRecordTimeout();
const onChangeFunction = (e) => {
const value = e.currentTarget.value; const selectFunction = (selected_data) => {
if (value === "") { setSpeakerRecordTimeout(selected_data.selected_id);
setUiVariable("");
} else {
setUiVariable(value);
setSpeakerRecordTimeout(value);
}
}; };
useEffect(()=> {
setUiVariable(currentSpeakerRecordTimeout.data);
}, [currentSpeakerRecordTimeout]);
return ( return (
<EntryContainer <DropdownMenuContainer
label={t("config_page.transcription.speaker_record_timeout.label")} dropdown_id="speaker_record_timeout"
desc={t("config_page.transcription.speaker_record_timeout.desc")} desc={t("config_page.transcription.speaker_record_timeout.desc")}
ui_variable={ui_variable} label={t("config_page.transcription.speaker_record_timeout.label")}
onChange={onChangeFunction} selected_id={currentSpeakerRecordTimeout.data}
list={genNumObjArray(31)}
selectFunction={selectFunction}
state={currentSpeakerRecordTimeout.state}
/> />
); );
}; };
const SpeakerPhraseTimeout_Box = () => { const SpeakerPhraseTimeout_Box = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const [ui_variable, setUiVariable] = useState("");
const { currentSpeakerPhraseTimeout, setSpeakerPhraseTimeout } = useSpeakerPhraseTimeout(); const { currentSpeakerPhraseTimeout, setSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
const onChangeFunction = (e) => {
const value = e.currentTarget.value; const selectFunction = (selected_data) => {
if (value === "") { setSpeakerPhraseTimeout(selected_data.selected_id);
setUiVariable("");
} else {
setUiVariable(value);
setSpeakerPhraseTimeout(value);
}
}; };
useEffect(()=> {
setUiVariable(currentSpeakerPhraseTimeout.data);
}, [currentSpeakerPhraseTimeout]);
return ( return (
<EntryContainer <DropdownMenuContainer
dropdown_id="speaker_phrase_timeout"
label={t("config_page.transcription.speaker_phrase_timeout.label")} label={t("config_page.transcription.speaker_phrase_timeout.label")}
desc={t("config_page.transcription.speaker_phrase_timeout.desc")} desc={t("config_page.transcription.speaker_phrase_timeout.desc")}
ui_variable={ui_variable} selected_id={currentSpeakerPhraseTimeout.data}
onChange={onChangeFunction} list={genNumObjArray(31)}
selectFunction={selectFunction}
state={currentSpeakerPhraseTimeout.state}
/> />
); );
}; };
const SpeakerMaxWords_Box = () => { const SpeakerMaxWords_Box = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const [ui_variable, setUiVariable] = useState("");
const { currentSpeakerMaxWords, setSpeakerMaxWords } = useSpeakerMaxWords(); const { currentSpeakerMaxWords, setSpeakerMaxWords } = useSpeakerMaxWords();
const onChangeFunction = (e) => {
const value = e.currentTarget.value; const selectFunction = (selected_data) => {
if (value === "") { setSpeakerMaxWords(selected_data.selected_id);
setUiVariable("");
} else {
setUiVariable(value);
setSpeakerMaxWords(value);
}
}; };
useEffect(()=> {
setUiVariable(currentSpeakerMaxWords.data);
}, [currentSpeakerMaxWords]);
return ( return (
<EntryContainer <DropdownMenuContainer
dropdown_id="speaker_max_phrase"
label={t("config_page.transcription.speaker_max_phrase.label")} label={t("config_page.transcription.speaker_max_phrase.label")}
desc={t("config_page.transcription.speaker_max_phrase.desc")} desc={t("config_page.transcription.speaker_max_phrase.desc")}
ui_variable={ui_variable} selected_id={currentSpeakerMaxWords.data}
onChange={onChangeFunction} list={genNumObjArray(61)}
selectFunction={selectFunction}
state={currentSpeakerMaxWords.state}
/> />
); );
}; };

8
src-ui/utils.js
View File

@@ -50,3 +50,11 @@ export const updateLabelsById = (data_array, updates) => {
return update ? { ...item, label: update.label } : item; return update ? { ...item, label: update.label } : item;
}); });
}; };
export const genNumArray = (count, start_from = 0) => {
return [...Array(count).keys()].map(i => i + start_from);
};
export const genNumObjArray = (count, start_from = 0) => {
return arrayToObject(genNumArray(count, start_from));
};