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

[Refactor/TMP1] Unify Slider components. (Appearance, Transcription.) VR section is commented out temporally.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-11-06 21:44:33 +09:00
parent e23bf223ae
commit 2cd4ddc4a3
5 changed files with 84 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src-ui/views/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
View File

@@ -3,9 +3,27 @@ import styles from "./Slider.module.scss";
import MUI_Slider from "@mui/material/Slider";
import clsx from "clsx";
import { useSliderLogic } from "@logics_configs";
export const Slider = (props) => {
const location = props.valueLabelDisplayLocation || "top";
const {
ui_value,
onchangeFunction,
onchangeCommittedFunction,
marks
} = useSliderLogic({
current_value: props.current_value,
setterFunction: props.setterFunction,
min: props.min,
max: props.max,
step: props.step,
show_label_values: props.show_label_values,
marks_step: props.marks_step,
});
const sliderSx = {
color: "var(--dark_700_color)",
"& .MuiSlider-thumb": {
@@ -86,13 +104,13 @@ export const Slider = (props) => {
aria-label="Default"
// valueLabelDisplay="on"
valueLabelDisplay={props.valueLabelDisplay ? props.valueLabelDisplay : "auto"}
value={props.variable}
step={props.step}
value={ui_value}
step={props.step == null ? null : Number(props.step)}
min={Number(props.min)}
max={Number(props.max)}
onChange={(_e, value) => props.onchangeFunction(value)}
onChange={(_e, value) => onchangeFunction(value)}
onChangeCommitted={(_e, value) =>
props.onchangeCommittedFunction ? props.onchangeCommittedFunction(value) : null
onchangeCommittedFunction ? onchangeCommittedFunction(value) : null
}
onMouseEnter={(event) =>
props.onMouseEnterFunction ? props.onMouseEnterFunction(event) : null
@@ -100,10 +118,10 @@ export const Slider = (props) => {
onMouseLeave={(event) =>
props.onMouseLeaveFunction ? props.onMouseLeaveFunction(event) : null
}
marks={props.marks}
track={props.track}
marks={marks}
track={props.track === undefined ? false : props.track}
orientation={props.orientation}
valueLabelFormat={`${props.valueLabelFormat ? props.valueLabelFormat : props.variable}`}
valueLabelFormat={`${props.valueLabelFormat ? props.valueLabelFormat : ui_value}`}
sx={sliderSx}
/>
</div>

94
src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
View File

@@ -58,32 +58,16 @@ const UiScalingContainer = () => {
const { currentUiScaling, setUiScaling } = useAppearance();
const { asyncUpdateBreakPoint } = useWindow();
const {
ui_value,
onchangeFunction,
onchangeCommittedFunction,
marks
} = useSliderLogic({
current_value: currentUiScaling,
setterFunction: setUiScaling,
postUpdateAction: asyncUpdateBreakPoint,
min: 40,
max: 200,
step: 10,
show_label_values: [40, 60, 80, 100, 120, 140, 160, 180, 200],
});
return (
<SliderContainer
label={t("config_page.appearance.ui_size.label") + " (%)"}
min="40"
max="200"
onchangeCommittedFunction={onchangeCommittedFunction}
onchangeFunction={onchangeFunction}
variable={ui_value}
marks={marks}
step={null}
track={false}
current_value={currentUiScaling}
setterFunction={setUiScaling}
postUpdateAction={asyncUpdateBreakPoint}
min={40}
max={200}
step={10}
show_label_values={[40, 60, 80, 100, 120, 140, 160, 180, 200]}
/>
);
};
@@ -93,31 +77,15 @@ export const MessageLogUiScalingContainer = () => {
const { t } = useI18n();
const { currentMessageLogUiScaling, setMessageLogUiScaling } = useAppearance();
const {
ui_value,
onchangeFunction,
onchangeCommittedFunction,
marks
} = useSliderLogic({
current_value: currentMessageLogUiScaling,
setterFunction: setMessageLogUiScaling,
min: 40,
max: 200,
step: 10,
show_label_values: [40, 60, 80, 100, 120, 140, 160, 180, 200],
});
return (
<SliderContainer
label={t("config_page.appearance.textbox_ui_size.label") + " (%)"}
min="40"
max="200"
onchangeCommittedFunction={onchangeCommittedFunction}
onchangeFunction={onchangeFunction}
variable={ui_value}
marks={marks}
step={null}
track={false}
current_value={currentMessageLogUiScaling}
setterFunction={setMessageLogUiScaling}
min={40}
max={200}
step={10}
show_label_values={[40, 60, 80, 100, 120, 140, 160, 180, 200]}
/>
);
};
@@ -180,40 +148,16 @@ const FontFamilyContainer = () => {
const TransparencyContainer = () => {
const { t } = useI18n();
const { currentTransparency, setTransparency } = useAppearance();
const [ui_message_log_ui_scaling, setUiTransparency] = useState(currentTransparency.data);
const onchangeFunction = (value) => {
setUiTransparency(value);
};
const onchangeCommittedFunction = (value) => {
setTransparency(value);
};
useEffect(() => {
setUiTransparency(currentTransparency.data);
}, [currentTransparency.data]);
// [Duplicated]
const createMarks = (min, max) => {
const marks = [];
for (let value = min; value <= max; value += 10) {
marks.push({ value, label: `${value}` });
}
return marks;
};
const marks = createMarks(40, 100);
return (
<SliderContainer
label={t("config_page.appearance.transparency.label") + " (%)"}
min="40"
max="100"
onchangeCommittedFunction={onchangeCommittedFunction}
onchangeFunction={onchangeFunction}
variable={ui_message_log_ui_scaling}
marks={marks}
step={null}
track={false}
current_value={currentTransparency}
setterFunction={setTransparency}
min={40}
max={100}
step={10}
show_label_values={[40, 60, 80, 100, 120, 140, 160, 180, 200]}
/>
);
};

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

@@ -460,7 +460,7 @@ const Advanced_Container = () => {
return (
<div>
<SectionLabelComponent label="Advanced Settings (Whisper Model)" />
{/* <SectionLabelComponent label={t("config_page.transcription.section_label_transcription_engines")} /> */}
<SectionLabelComponent label={t("config_page.transcription.section_label_transcription_engines")} />
<MicAvgLogprobContainer />
<MicNoSpeechProbContainer />
<SpeakerAvgLogprobContainer />
@@ -472,42 +472,16 @@ const Advanced_Container = () => {
export const MicAvgLogprobContainer = () => {
const { t } = useI18n();
const { currentMicAvgLogprob, setMicAvgLogprob } = useTranscription();
const [ui_mic_avg_logprob, setUiMicAvgLogprob] = useState(currentMicAvgLogprob.data);
const onchangeFunction = (value) => {
setUiMicAvgLogprob(value);
};
const onchangeCommittedFunction = (value) => {
setMicAvgLogprob(value);
};
useEffect(() => {
setUiMicAvgLogprob(currentMicAvgLogprob.data);
}, [currentMicAvgLogprob.data]);
// [Duplicated]
const createMarks = (min, max) => {
const marks = [];
for (let value = min; value <= max; value += 0.2) {
value = parseFloat(value.toFixed(1));
marks.push({ value, label: `${value}` });
}
return marks;
};
const marks = createMarks(-2, 0);
return (
<SliderContainer
label="Mic Avg Logprob"
desc="Default: -0.8"
min="-2"
max="0"
onchangeCommittedFunction={onchangeCommittedFunction}
onchangeFunction={onchangeFunction}
variable={ui_mic_avg_logprob}
marks={marks}
current_value={currentMicAvgLogprob}
setterFunction={setMicAvgLogprob}
min={-2}
max={0}
step={0.1}
track={false}
marks_step={0.2}
/>
);
};
@@ -515,42 +489,16 @@ export const MicAvgLogprobContainer = () => {
export const MicNoSpeechProbContainer = () => {
const { t } = useI18n();
const { currentMicNoSpeechProb, setMicNoSpeechProb } = useTranscription();
const [ui_mic_no_speech_prob, setUiMicNoSpeechProb] = useState(currentMicNoSpeechProb.data);
const onchangeFunction = (value) => {
setUiMicNoSpeechProb(value);
};
const onchangeCommittedFunction = (value) => {
setMicNoSpeechProb(value);
};
useEffect(() => {
setUiMicNoSpeechProb(currentMicNoSpeechProb.data);
}, [currentMicNoSpeechProb.data]);
// [Duplicated]
const createMarks = (min, max) => {
const marks = [];
for (let value = min; value <= max; value += 0.1) {
value = parseFloat(value.toFixed(1));
marks.push({ value, label: `${value}` });
}
return marks;
};
const marks = createMarks(0, 1);
return (
<SliderContainer
label="Mic No Speech Prob"
desc="Default: 0.6"
min="0"
max="1"
onchangeCommittedFunction={onchangeCommittedFunction}
onchangeFunction={onchangeFunction}
variable={ui_mic_no_speech_prob}
marks={marks}
current_value={currentMicNoSpeechProb}
setterFunction={setMicNoSpeechProb}
min={0}
max={1}
step={0.1}
track={false}
/>
);
};
@@ -558,42 +506,17 @@ export const MicNoSpeechProbContainer = () => {
export const SpeakerAvgLogprobContainer = () => {
const { t } = useI18n();
const { currentSpeakerAvgLogprob, setSpeakerAvgLogprob } = useTranscription();
const [ui_speaker_avg_logprob, setUiSpeakerAvgLogprob] = useState(currentSpeakerAvgLogprob.data);
const onchangeFunction = (value) => {
setUiSpeakerAvgLogprob(value);
};
const onchangeCommittedFunction = (value) => {
setSpeakerAvgLogprob(value);
};
useEffect(() => {
setUiSpeakerAvgLogprob(currentSpeakerAvgLogprob.data);
}, [currentSpeakerAvgLogprob.data]);
// [Duplicated]
const createMarks = (min, max) => {
const marks = [];
for (let value = min; value <= max; value += 0.2) {
value = parseFloat(value.toFixed(1));
marks.push({ value, label: `${value}` });
}
return marks;
};
const marks = createMarks(-2, 0);
return (
<SliderContainer
label="Speaker Avg Logprob"
desc="Default: -0.8"
min="-2"
max="0"
onchangeCommittedFunction={onchangeCommittedFunction}
onchangeFunction={onchangeFunction}
variable={ui_speaker_avg_logprob}
marks={marks}
current_value={currentSpeakerAvgLogprob}
setterFunction={setSpeakerAvgLogprob}
min={-2}
max={0}
step={0.1}
track={false}
marks_step={0.2}
/>
);
};
@@ -601,42 +524,16 @@ export const SpeakerAvgLogprobContainer = () => {
export const SpeakerNoSpeechProbContainer = () => {
const { t } = useI18n();
const { currentSpeakerNoSpeechProb, setSpeakerNoSpeechProb } = useTranscription();
const [ui_speaker_no_speech_prob, setUiSpeakerNoSpeechProb] = useState(currentSpeakerNoSpeechProb.data);
const onchangeFunction = (value) => {
setUiSpeakerNoSpeechProb(value);
};
const onchangeCommittedFunction = (value) => {
setSpeakerNoSpeechProb(value);
};
useEffect(() => {
setUiSpeakerNoSpeechProb(currentSpeakerNoSpeechProb.data);
}, [currentSpeakerNoSpeechProb.data]);
// [Duplicated]
const createMarks = (min, max) => {
const marks = [];
for (let value = min; value <= max; value += 0.1) {
value = parseFloat(value.toFixed(1));
marks.push({ value, label: `${value}` });
}
return marks;
};
const marks = createMarks(0, 1);
return (
<SliderContainer
label="Speaker No Speech Prob"
desc="Default: 0.6"
min="0"
max="1"
onchangeCommittedFunction={onchangeCommittedFunction}
onchangeFunction={onchangeFunction}
variable={ui_speaker_no_speech_prob}
marks={marks}
current_value={currentSpeakerNoSpeechProb}
setterFunction={setSpeakerNoSpeechProb}
min={0}
max={1}
step={0.1}
track={false}
/>
);
};

1
src-ui/views/app/config_page/setting_section/setting_box/vr/Vr.jsx
View File

@@ -25,6 +25,7 @@ import TriangleSvg from "@images/triangle.svg?react";
import { randomIntMinMax } from "@utils";
export const Vr = () => {
return null;
const { t } = useI18n();
const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true);
const toggleIsOpenedSmallSettings = () => {