Merge branch 'ui' into for_webui

src-ui/app/App.jsx

@@ -1,4 +1,3 @@
-import { useIsOpenedConfigPage } from "@store";
 import { getCurrent } from "@tauri-apps/api/window";
 import { useEffect, useRef } from "react";
 import { useStartPython } from "@logics/useStartPython";
@@ -6,14 +5,23 @@ import { useConfig } from "@logics/useConfig";
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
 import styles from "./App.module.scss";
-import clsx from "clsx";
 
 export const App = () => {
+    return (
+        <div className={styles.container}>
+            <StartPythonFacadeComponent />
+            <ConfigPage />
+            <MainPage />
+        </div>
+    );
+};
+
+
+const StartPythonFacadeComponent = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
     const main_page = getCurrent();
 
-    const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
     const {
         getSoftwareVersion,
         // getMicHostList,
@@ -23,6 +31,7 @@ export const App = () => {
         getSelectedSpeakerDevice,
     } = useConfig();
 
+
     useEffect(() => {
         main_page.setDecorations(true);
         if (!hasRunRef.current) {
@@ -40,17 +49,5 @@ export const App = () => {
         return () => hasRunRef.current = true;
     }, []);
 
-    return (
+    return null;
-        <div className={styles.container}>
-            <div className={clsx(styles.page, styles.config_page)}>
-                <ConfigPage />
-            </div>
-            <div className={clsx(styles.page, styles.main_page, {
-                [styles.show_config]: currentIsOpenedConfigPage,
-                [styles.show_main]: !currentIsOpenedConfigPage
-            })}>
-                <MainPage />
-            </div>
-        </div>
-    );
 };

src-ui/app/App.module.scss

@@ -4,30 +4,3 @@
     height: 100vh;
     overflow: hidden;
 }
-
-.page {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    overflow: hidden;
-
-}
-
-.main_page {
-    // z-index: 1;
-    transition: transform 0.5s ease;
-}
-
-.config_page {
-    // z-index: 0;
-}
-
-.show_config.main_page {
-    transform: translateY(-100%);
-}
-
-.show_main.main_page {
-    transform: translateY(0);
-}

src-ui/app/config_page/ConfigPage.jsx

@@ -7,23 +7,24 @@ import { SettingSection } from "./setting_section/SettingSection.jsx";
 import { useSoftwareVersion  } from "@store";
 import { useTranslation } from "react-i18next";
 
-// import { useConfig } from "@logics/useConfig";
 export const ConfigPage = () => {
     const { currentSoftwareVersion } = useSoftwareVersion();
     const { t } = useTranslation();
 
     return (
-        <div className={styles.container}>
+        <div className={styles.page}>
-            <Topbar />
+            <div className={styles.container}>
-            <div className={styles.main_container}>
+                <Topbar />
-                <SidebarSection />
+                <div className={styles.main_container}>
-                <SettingSection />
+                    <SidebarSection />
+                    <SettingSection />
+                </div>
+                <p className={styles.software_version}>
+                    {
+                        t("config_page.version", {version: currentSoftwareVersion})
+                    }
+                </p>
             </div>
-            <p className={styles.software_version}>
-                {
-                    t("config_page.version", {version: currentSoftwareVersion})
-                }
-            </p>
         </div>
     );
 };

src-ui/app/config_page/ConfigPage.module.scss

@@ -1,3 +1,12 @@
+.page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+}
+
 .container {
     width: 100%;
     height: 100%;

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx

@@ -1,47 +1,123 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import styles from "./SliderAndMeter.module.scss";
+import {
+    useMicVolume,
+    useSpeakerVolume,
+} from "@store";
+
+import { useVolume } from "@logics/useVolume";
 
 export const SliderAndMeter = (props) => {
-    const [volume, setVolume] = useState(0);
-    const [threshold, setThreshold] = useState(props.max / 2);
-
-    const updateVolume = () => {
-        setVolume(Math.random());
-    };
-
-    // useEffect(() => {
-    //     const intervalId = setInterval(updateVolume, 200);
-    //     return () => clearInterval(intervalId);
-    // }, []);
-
     return (
         <div className={styles.container}>
             <div className={styles.meter_container}>
-                <div
+                {props.id === "mic_threshold"
-                    className={styles.volume_meter}
+                    ? <ThresholdVolumeMeter_Mic min={props.min} max={props.max}/>
-                    style={{
+                    : <ThresholdVolumeMeter_Speaker min={props.min} max={props.max}/>
-                        width: `${(volume * 100)}%`,
+                }
-                        backgroundColor: volume < (threshold / props.max) ? "var(--primary_750_color)" : "var(--primary_400_color)"
-                    }}
-                />
-                <input
-                    type="range"
-                    min={props.min}
-                    max={props.max}
-                    value={threshold}
-                    onChange={(e) => setThreshold(e.target.value)}
-                    className={styles.threshold_slider}
-                />
             </div>
-            <div className={styles.dev_info_box}>
+            <DevSection {...props}/>
-                <p>dev</p>
+        </div>
-                <button onClick={updateVolume}>Update Volume</button>
+    );
-                <div className={styles.volume_info}>
+};
-                    <span>Current Volume: {(volume * props.max).toFixed(2)}</span>
+
-                </div>
+
-                <div className={styles.threshold_info}>
+const ThresholdVolumeMeter_Mic = ({min, max}) => {
-                    <span>Threshold: {threshold}</span>
+    const [threshold, setThreshold] = useState(max / 2);
-                </div>
+
+    const { currentMicVolume } = useMicVolume();
+
+    const currentVolumeVariable = Math.min(currentMicVolume.data, max);
+    const volume_width_percentage = (currentVolumeVariable / max) * 100;
+
+    return (
+        <>
+            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={threshold}/>
+            <input
+                type="range"
+                min={min}
+                max={max}
+                value={threshold}
+                onChange={(e) => setThreshold(e.target.value)}
+                className={styles.threshold_slider}
+            />
+        </>
+    );
+};
+
+
+const ThresholdVolumeMeter_Speaker = ({min, max}) => {
+    const [threshold, setThreshold] = useState(max / 2);
+
+    const { currentSpeakerVolume } = useSpeakerVolume();
+
+    const currentVolumeVariable = Math.min(currentSpeakerVolume.data, max);
+    const volume_width_percentage = (currentVolumeVariable / max) * 100;
+
+    return (
+        <>
+            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentSpeakerVolume} threshold={threshold}/>
+                <input
+                type="range"
+                min={min}
+                max={max}
+                value={threshold}
+                onChange={(e) => setThreshold(e.target.value)}
+                className={styles.threshold_slider}
+            />
+        </>
+    );
+};
+
+
+const VolumeMeter = ({ volume_width_percentage, volume, threshold }) => {
+
+    return (
+        <div
+            className={styles.volume_meter}
+            style={{
+                width: `${volume_width_percentage}%`,
+                backgroundColor: (volume < threshold) ? "var(--primary_750_color)" : "var(--primary_400_color)"
+            }}
+        />
+    );
+};
+
+
+const DevSection = (props) => {
+    const {
+        volumeCheckStart_Mic,
+        volumeCheckStop_Mic,
+        volumeCheckStart_Speaker,
+        volumeCheckStop_Speaker,
+    } = useVolume();
+
+    const volumeCheckStart = () => {
+        if (props.id === "mic_threshold") {
+            volumeCheckStart_Mic();
+        } else if (props.id === "speaker_threshold") {
+            volumeCheckStart_Speaker();
+        }
+    };
+
+    const volumeCheckStop = () => {
+        if (props.id === "mic_threshold") {
+            volumeCheckStop_Mic();
+        } else if (props.id === "speaker_threshold") {
+            volumeCheckStop_Speaker();
+        }
+    };
+
+    return (
+        <div className={styles.dev_info_box}>
+            <p>dev</p>
+            <button className={styles.volume_check_button} onClick={() => volumeCheckStart()}>Start</button>
+            <button className={styles.volume_check_button} onClick={() => volumeCheckStop()}>Stop</button>
+            <div className={styles.volume_info}>
+                {/* <span>Current Volume: {(currentVolumeVariable)}</span> */}
+            </div>
+            <div className={styles.threshold_info}>
+                {/* <span>Threshold: {props.threshold}</span> */}
             </div>
         </div>
     );

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss

@@ -54,16 +54,6 @@
     }
 }
 
-.volume_info, .threshold_info {
-    font-size: 1.2rem;
-}
-
-
-
-
-
-
-
 
 
 
@@ -74,3 +64,21 @@
     display: flex;
     gap: 2rem
 }
+
+
+
+.volume_info, .threshold_info {
+    font-size: 1.2rem;
+}
+
+
+
+.volume_check_button {
+    font-size: 1.4rem;
+    background-color: var(--dark_800_color);
+    padding: 1rem;
+    cursor: pointer;
+    &:hover {
+        background-color: var(--dark_775_color);
+    }
+}

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx

@@ -1,24 +1,35 @@
+import React from "react";
 import styles from "./VolumeCheckButton.module.scss";
 import MicSvg from "@images/mic.svg?react";
 import HeadphonesSvg from "@images/headphones.svg?react";
 import clsx from "clsx";
+// import { useVolume } from "@logics/useVolume";
 
-export const VolumeCheckButton = (props) => {
+export const VolumeCheckButton = React.memo((props) => {
     const SvgComponent = props.id === "mic_threshold" ? MicSvg : HeadphonesSvg;
 
+
     const getClassNames = (baseClass) => clsx(baseClass, {
         // [styles.is_active]: (currentState.data === true),
         // [styles.is_loading]: (currentState.state === "loading"),
         // [styles.is_hovered]: is_hovered,
         // [styles.is_mouse_down]: is_mouse_down,
     });
+    // const {
+    //     volumeCheckStart_Mic,
+    //     volumeCheckStop_Mic,
+    // } = useVolume();
 
 
     return (
+        // <div className={styles.container} onClick={() => volumeCheckStop_Mic()}>
         <div className={styles.container}>
             <div className={getClassNames(styles.button_button)}>
                 <SvgComponent className={getClassNames(styles.button_svg)} />
             </div>
         </div>
     );
-};
+});
+
+
+VolumeCheckButton.displayName = "VolumeCheckButton";

src-ui/app/config_page/setting_section/setting_box/device/Device.jsx

@@ -47,7 +47,7 @@ export const Device = () => {
                 setSelectedMicDevice(selected_data.selected_id);
                 break;
 
-                case "speaker_device":
+            case "speaker_device":
                 setSelectedSpeakerDevice(selected_data.selected_id);
                 break;
 
@@ -56,6 +56,13 @@ export const Device = () => {
         }
     };
 
+    // const volumeCheckStartFunction_Mic = () => {
+    //     volumeCheckStart_Mic();
+    // };
+    // const volumeCheckStopFunction_Mic = () => {
+    //     volumeCheckStop_Mic();
+    // };
+
 
     return (
         <>
@@ -79,6 +86,17 @@ export const Device = () => {
                 state={currentSelectedMicDevice.state}
             />
 
+            <ThresholdContainer
+                label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
+                desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
+                id="mic_threshold"
+                min="0"
+                max="2000"
+                // volumeCheckStartFunction={volumeCheckStartFunction_Mic}
+                // volumeCheckStopFunction={volumeCheckStopFunction_Mic}
+            />
+
+
             <DropdownMenuContainer
                 dropdown_id="speaker_device"
                 label={t("config_page.speaker_device.label")}
@@ -88,13 +106,14 @@ export const Device = () => {
                 openListFunction={getSpeakerDeviceList}
                 state={currentSelectedSpeakerDevice.state}
             />
-{/*
-            <ThresholdContainer label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")} desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")} id="mic_threshold"  min="0" max="3000"/>
 
-
+            <ThresholdContainer
-            <DropdownMenuContainer dropdown_id="speaker_device" label={t("config_page.speaker_device.label")}  selected_id={currentSelectedMicDevice.data} list={currentMicDeviceList} selectFunction={selectFunction} state={currentSelectedMicDevice.state} />
+                label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
-
+                desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
-            <ThresholdContainer label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")} desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")} id="speaker_threshold"  min="0" max="3000"/> */}
+                id="speaker_threshold"
+                min="0"
+                max="4000"
+            />
         </>
     );
 };

src-ui/app/main_page/MainPage.jsx

@@ -1,39 +1,21 @@
+import clsx from "clsx";
 import styles from "./MainPage.module.scss";
 import { SidebarSection } from "./sidebar_section/SidebarSection";
 import { MainSection } from "./main_section/MainSection";
+import { useIsOpenedConfigPage } from "@store";
 
 export const MainPage = () => {
+    const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
+
     return (
-        <div className={styles.container}>
+        <div className={clsx(styles.page, styles.main_page, {
-            <SidebarSection />
+            [styles.show_config]: currentIsOpenedConfigPage,
-            <MainSection />
+            [styles.show_main]: !currentIsOpenedConfigPage
-            {/* <MainPageCover /> */}
+        })}>
+            <div className={styles.container}>
+                <SidebarSection />
+                <MainSection />
+            </div>
         </div>
     );
 };
-
-
-// import { useTranslation } from "react-i18next";
-// import { useIsOpenedConfigPage } from "@store";
-// import { useWindow } from "@logics/useWindow";
-
-// export const MainPageCover = () => {
-//     const { t } = useTranslation();
-//     const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
-//     const { closeConfigPage } = useWindow();
-//     if ( currentIsOpenedConfigPage === false) return null;
-
-//     const closeSettingsWindow = () => closeConfigPage();
-
-//     return (
-//         <div className={styles.main_page_cover}>
-//             <p className={styles.cover_message}>{t("main_page.cover_message")}</p>
-//             <button
-//             className={styles.close_settings_window_button}
-//             onClick={closeSettingsWindow}
-//             >
-//                 {t("main_page.close_settings_window")}
-//             </button>
-//         </div>
-//     );
-// };

src-ui/app/main_page/MainPage.module.scss

@@ -1,3 +1,22 @@
+.page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    transition: transform 0.5s ease;
+}
+
+.show_config.main_page {
+    transform: translateY(-100%);
+}
+
+.show_main.main_page {
+    transform: translateY(0);
+}
+
+
 .container {
     width: 100%;
     height: 100%;

src-ui/logics/useReceiveRoutes.js

@@ -1,6 +1,7 @@
 import { useMainFunction } from "./useMainFunction";
 import { useConfig } from "./useConfig";
 import { useMessage } from "./useMessage";
+import { useVolume } from "./useVolume";
 
 export const useReceiveRoutes = () => {
     const {
@@ -25,9 +26,10 @@ export const useReceiveRoutes = () => {
 
         updateSpeakerDeviceList,
         updateSelectedSpeakerDevice,
-
     } = useConfig();
 
+    const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
+
     const routes = {
         "/controller/callback_enable_translation": updateTranslationStatus,
         "/controller/callback_disable_translation": updateTranslationStatus,
@@ -51,6 +53,9 @@ export const useReceiveRoutes = () => {
         "/config/choice_speaker_device": updateSelectedSpeakerDevice,
         "/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
 
+        "/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
+        "/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker,
+
 
         "/controller/callback_messagebox_send": updateSentMessageLog,
         "/action/transcription_send_mic_message": addSentMessageLog,

src-ui/logics/useStdoutToPython.js

@@ -1,5 +1,5 @@
 import { store } from "@store";
-import { encode } from 'js-base64'
+import { encode } from "js-base64";
 
 export const useStdoutToPython = () => {
     const asyncStdoutToPython = async (path, value) => {

src-ui/logics/useVolume.js

@@ -0,0 +1,30 @@
+import {
+    useMicVolume,
+    useSpeakerVolume,
+} from "@store";
+
+import { useStdoutToPython } from "./useStdoutToPython";
+
+
+export const useVolume = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { updateMicVolume } = useMicVolume();
+    const { updateSpeakerVolume } = useSpeakerVolume();
+
+    // const asyncPending = () => new Promise(() => {});
+    return {
+        volumeCheckStart_Mic: () => asyncStdoutToPython("/controller/callback_enable_check_mic_threshold"),
+        volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"),
+        updateVolumeVariable_Mic: (payload) => {
+            updateMicVolume(payload.data);
+        },
+
+        volumeCheckStart_Speaker: () => asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"),
+        volumeCheckStop_Speaker: () => asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold"),
+        updateVolumeVariable_Speaker: (payload) => {
+            updateSpeakerVolume(payload.data);
+        }
+
+
+    };
+};

src-ui/store.js

@@ -124,6 +124,9 @@ export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevi
 export const { atomInstance: Atom_SpeakerDeviceList, useHook: useSpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
 export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useSelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
 
+export const { atomInstance: Atom_MicVolume, useHook: useMicVolume } = createAsyncAtomWithHook(0, "MicVolume");
+export const { atomInstance: Atom_SpeakerVolume, useHook: useSpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
+
 export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
     before: "",
     after: "",