[Update] Transcription: Add UI. The user can config 'mic/speaker avg logprob' and 'mic/speaker no speech prob' that is related with Whisper's parameter.

This commit is contained in:
Sakamoto Shiina
2025-09-05 10:44:23 +09:00
parent 8ae56563ca
commit cad0f796fa
5 changed files with 312 additions and 0 deletions

View File

@@ -69,6 +69,7 @@ const UiScalingContainer = () => {
asyncUpdateBreakPoint();
}, [currentUiScaling.data]);
// [Duplicated]
const createMarks = (min, max) => {
const marks = [];
for (let value = min; value <= max; value += 10) {
@@ -111,6 +112,7 @@ export const MessageLogUiScalingContainer = () => {
setUiMessageLogUiScaling(currentMessageLogUiScaling.data);
}, [currentMessageLogUiScaling.data]);
// [Duplicated]
const createMarks = (min, max) => {
const marks = [];
for (let value = min; value <= max; value += 10) {
@@ -207,6 +209,7 @@ const TransparencyContainer = () => {
setUiTransparency(currentTransparency.data);
}, [currentTransparency.data]);
// [Duplicated]
const createMarks = (min, max) => {
const marks = [];
for (let value = min; value <= max; value += 10) {

View File

@@ -1,3 +1,4 @@
import { useEffect, useState } from "react";
import { useI18n } from "@useI18n";
import styles from "./Transcription.module.scss";
import { updateLabelsById, genNumObjArray } from "@utils";
@@ -12,6 +13,7 @@ import {
RadioButtonContainer,
DropdownMenuContainer,
ComputeDeviceContainer,
SliderContainer,
} from "../_templates/Templates";
import {
@@ -24,6 +26,7 @@ export const Transcription = () => {
<Mic_Container />
<Speaker_Container />
<TranscriptionEngine_Container />
<Advanced_Container />
</div>
);
};
@@ -353,4 +356,196 @@ const findKeyByDeviceValue = (devices, target_value) => {
}
}
return null;
};
const Advanced_Container = () => {
const { t } = useI18n();
return (
<div>
<SectionLabelComponent label="Advanced Settings (Whisper Model)" />
{/* <SectionLabelComponent label={t("config_page.transcription.section_label_transcription_engines")} /> */}
<MicAvgLogprobContainer />
<MicNoSpeechProbContainer />
<SpeakerAvgLogprobContainer />
<SpeakerNoSpeechProbContainer />
</div>
);
};
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}
step={0.1}
track={false}
/>
);
};
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}
step={0.1}
track={false}
/>
);
};
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}
step={0.1}
track={false}
/>
);
};
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}
step={0.1}
track={false}
/>
);
};

View File

@@ -14,6 +14,11 @@ import {
useStore_SelectedWhisperWeightType,
useStore_WhisperWeightTypeStatus,
useStore_MicAvgLogprob,
useStore_MicNoSpeechProb,
useStore_SpeakerAvgLogprob,
useStore_SpeakerNoSpeechProb,
} from "@store";
import { useStdoutToPython } from "@useStdoutToPython";
import { transformToIndexedArray } from "@utils";
@@ -41,6 +46,13 @@ export const useTranscription = () => {
const { currentSelectableWhisperComputeDeviceList, updateSelectableWhisperComputeDeviceList, pendingSelectableWhisperComputeDeviceList } = useStore_SelectableWhisperComputeDeviceList();
const { currentSelectedWhisperComputeDevice, updateSelectedWhisperComputeDevice, pendingSelectedWhisperComputeDevice } = useStore_SelectedWhisperComputeDevice();
// Advanced Settings
const { currentMicAvgLogprob, updateMicAvgLogprob, pendingMicAvgLogprob } = useStore_MicAvgLogprob();
const { currentMicNoSpeechProb, updateMicNoSpeechProb, pendingMicNoSpeechProb } = useStore_MicNoSpeechProb();
const { currentSpeakerAvgLogprob, updateSpeakerAvgLogprob, pendingSpeakerAvgLogprob } = useStore_SpeakerAvgLogprob();
const { currentSpeakerNoSpeechProb, updateSpeakerNoSpeechProb, pendingSpeakerNoSpeechProb } = useStore_SpeakerNoSpeechProb();
// Mic
const getMicRecordTimeout = () => {
pendingMicRecordTimeout();
@@ -276,6 +288,67 @@ export const useTranscription = () => {
showNotification_SaveSuccess();
};
// Advanced (Mic Avg Logprob)
const getMicAvgLogprob = () => {
pendingMicAvgLogprob();
asyncStdoutToPython("/get/data/mic_avg_logprob");
};
const setMicAvgLogprob = (selected_mic_avg_logprob) => {
pendingMicAvgLogprob();
asyncStdoutToPython("/set/data/mic_avg_logprob", selected_mic_avg_logprob);
};
const setSuccessMicAvgLogprob = (selected_mic_avg_logprob) => {
updateMicAvgLogprob(selected_mic_avg_logprob);
showNotification_SaveSuccess();
};
// Advanced (Mic No Speech Prob)
const getMicNoSpeechProb = () => {
pendingMicNoSpeechProb();
asyncStdoutToPython("/get/data/mic_no_speech_prob");
};
const setMicNoSpeechProb = (selected_mic_no_speech_prob) => {
pendingMicNoSpeechProb();
asyncStdoutToPython("/set/data/mic_no_speech_prob", selected_mic_no_speech_prob);
};
const setSuccessMicNoSpeechProb = (selected_mic_no_speech_prob) => {
updateMicNoSpeechProb(selected_mic_no_speech_prob);
showNotification_SaveSuccess();
};
// Advanced (Speaker Avg Logprob)
const getSpeakerAvgLogprob = () => {
pendingSpeakerAvgLogprob();
asyncStdoutToPython("/get/data/speaker_avg_logprob");
};
const setSpeakerAvgLogprob = (selected_speaker_avg_logprob) => {
pendingSpeakerAvgLogprob();
asyncStdoutToPython("/set/data/speaker_avg_logprob", selected_speaker_avg_logprob);
};
const setSuccessSpeakerAvgLogprob = (selected_speaker_avg_logprob) => {
updateSpeakerAvgLogprob(selected_speaker_avg_logprob);
showNotification_SaveSuccess();
};
// Advanced (Speaker No Speech Prob)
const getSpeakerNoSpeechProb = () => {
pendingSpeakerNoSpeechProb();
asyncStdoutToPython("/get/data/speaker_no_speech_prob");
};
const setSpeakerNoSpeechProb = (selected_speaker_no_speech_prob) => {
pendingSpeakerNoSpeechProb();
asyncStdoutToPython("/set/data/speaker_no_speech_prob", selected_speaker_no_speech_prob);
};
const setSuccessSpeakerNoSpeechProb = (selected_speaker_no_speech_prob) => {
updateSpeakerNoSpeechProb(selected_speaker_no_speech_prob);
showNotification_SaveSuccess();
};
return {
// Mic
currentMicRecordTimeout,
@@ -353,5 +426,31 @@ export const useTranscription = () => {
updateSelectedWhisperComputeDevice,
setSelectedWhisperComputeDevice,
setSuccessSelectedWhisperComputeDevice,
// Advanced
// Mic Avg Logprob
currentMicAvgLogprob,
getMicAvgLogprob,
updateMicAvgLogprob,
setMicAvgLogprob,
setSuccessMicAvgLogprob,
// Mic No Speech Prob
currentMicNoSpeechProb,
getMicNoSpeechProb,
updateMicNoSpeechProb,
setMicNoSpeechProb,
setSuccessMicNoSpeechProb,
// Speaker Avg Logprob
currentSpeakerAvgLogprob,
getSpeakerAvgLogprob,
updateSpeakerAvgLogprob,
setSpeakerAvgLogprob,
setSuccessSpeakerAvgLogprob,
// Speaker No Speech Prob
currentSpeakerNoSpeechProb,
getSpeakerNoSpeechProb,
updateSpeakerNoSpeechProb,
setSpeakerNoSpeechProb,
setSuccessSpeakerNoSpeechProb,
};
};

View File

@@ -224,6 +224,16 @@ export const ROUTE_META_LIST = [
{ endpoint: "/get/data/selected_transcription_compute_device", ns: configs, hook_name: "useTranscription", method_name: "updateSelectedWhisperComputeDevice" },
{ endpoint: "/set/data/selected_transcription_compute_device", ns: configs, hook_name: "useTranscription", method_name: "setSuccessSelectedWhisperComputeDevice" },
// Transcription (Advanced)
{ endpoint: "/get/data/mic_avg_logprob", ns: configs, hook_name: "useTranscription", method_name: "updateMicAvgLogprob" },
{ endpoint: "/set/data/mic_avg_logprob", ns: configs, hook_name: "useTranscription", method_name: "setSuccessMicAvgLogprob" },
{ endpoint: "/get/data/mic_no_speech_prob", ns: configs, hook_name: "useTranscription", method_name: "updateMicNoSpeechProb" },
{ endpoint: "/set/data/mic_no_speech_prob", ns: configs, hook_name: "useTranscription", method_name: "setSuccessMicNoSpeechProb" },
{ endpoint: "/get/data/speaker_avg_logprob", ns: configs, hook_name: "useTranscription", method_name: "updateSpeakerAvgLogprob" },
{ endpoint: "/set/data/speaker_avg_logprob", ns: configs, hook_name: "useTranscription", method_name: "setSuccessSpeakerAvgLogprob" },
{ endpoint: "/get/data/speaker_no_speech_prob", ns: configs, hook_name: "useTranscription", method_name: "updateSpeakerNoSpeechProb" },
{ endpoint: "/set/data/speaker_no_speech_prob", ns: configs, hook_name: "useTranscription", method_name: "setSuccessSpeakerNoSpeechProb" },
// VR
{ endpoint: "/get/data/overlay_small_log", ns: configs, hook_name: "useVr", method_name: "updateIsEnabledOverlaySmallLog" },
{ endpoint: "/set/enable/overlay_small_log", ns: configs, hook_name: "useVr", method_name: "setSuccessIsEnabledOverlaySmallLog" },

View File

@@ -238,6 +238,11 @@ export const { atomInstance: Atom_SelectedTranscriptionEngine, useHook: useStore
export const { atomInstance: Atom_SelectableWhisperComputeDeviceList, useHook: useStore_SelectableWhisperComputeDeviceList } = createAtomWithHook({}, "SelectableWhisperComputeDeviceList");
export const { atomInstance: Atom_SelectedWhisperComputeDevice, useHook: useStore_SelectedWhisperComputeDevice } = createAtomWithHook("", "SelectedWhisperComputeDevice");
export const { atomInstance: Atom_MicAvgLogprob, useHook: useStore_MicAvgLogprob } = createAtomWithHook(-0.8, "MicAvgLogprob");
export const { atomInstance: Atom_MicNoSpeechProb, useHook: useStore_MicNoSpeechProb } = createAtomWithHook(0.6, "MicNoSpeechProb");
export const { atomInstance: Atom_SpeakerAvgLogprob, useHook: useStore_SpeakerAvgLogprob } = createAtomWithHook(-0.8, "SpeakerAvgLogprob");
export const { atomInstance: Atom_SpeakerNoSpeechProb, useHook: useStore_SpeakerNoSpeechProb } = createAtomWithHook(0.6, "SpeakerNoSpeechProb");
// VR
export const { atomInstance: Atom_OverlaySmallLogSettings, useHook: useStore_OverlaySmallLogSettings } = createAtomWithHook({