[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.

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

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

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

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