Merge branch 'ui' into for_webui

2024-12-19 04:05:30 +09:00
parent 01d9c27728 81ae79dc92
commit 0b3e17c331
18 changed files with 302 additions and 79 deletions
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -127,12 +127,12 @@ config_page:

    translation:
        ctranslate2_weight_type:
-            label: Select Internal Translation Model
+            label: Internal Translation Model
            desc: You can choose the translation model to use for the internal translation engine.
            small: Basic model ({{capacity}})
            large: High accuracy model ({{capacity}})
        ctranslate2_compute_device:
-            label: Select Internal Translation Compute Device
+            label: Internal Translation Compute Device
        deepl_auth_key:
            label: DeepL Auth Key
            desc: Please select {{translator}} on the main screen with DeepL_API when using. ※Some languages may not be supported.
@@ -178,16 +178,14 @@ config_page:
            desc: It is the lower limit for the number of transcribed words, and only when this number is exceeded will the transcription results be displayed logs.
            error_message: You can set a number equal to or greater than 0.
        select_transcription_engine:
-            label: Select Transcription Engine
+            label: Transcription Engine
        whisper_weight_type:
-            label: Select Whisper Model
-            desc: |-
-                Generally, models with larger capacity tend to have higher accuracy, but this also results in longer transcription times and increased CPU usage. Please refer to the documentation for explanations of each model.
-                ※Larger models, especially those exceeding medium size, can be challenging to run even depending on the CPU's performance.
+            label: Whisper Model
+            desc: Models with larger capacities tend to have higher accuracy, but they also consume more CPU and GPU resources.
            model_template: '{{model_name}} model ({{capacity}})'
            recommended_model_template: '{{model_name}} model ({{capacity}}) (Recommended)'
        whisper_compute_device:
-            label: Select Whisper Compute Device
+            label: Whisper Compute Device

    vr:
        single_line: Single line
@@ -202,6 +200,12 @@ config_page:
        x_rotation: X-axis rotation
        y_rotation: Y-axis rotation
        z_rotation: Z-axis rotation
+        sample_text_button:
+            start: |-
+                Send sample texts
+                to Overlay
+            stop: Stop Sending
+            sample_text: Sample text.
        opacity: Opacity
        ui_scaling: UI Scaling
        display_duration: Display duration
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -180,9 +180,7 @@ config_page:
            label: 音声認識で使用するエンジン
        whisper_weight_type:
            label: Whisperモデルのタイプ
-            desc: |-
-                基本的に、容量が多いモデルほど精度は高いですが、文字起こしまでの時間が伸び、CPU使用率も増加します。各モデルの説明はドキュメントをご覧ください。
-                ※特にmediumより容量の大きいモデルは、CPUの性能によっては使用すらも困難です。
+            desc: 容量が大きいモデルほど精度は高いですが、その分CPUやGPUを占有します。
            model_template: '{{model_name}} モデル ({{capacity}})'
            recommended_model_template: '{{model_name}} モデル ({{capacity}}) (推奨)'
        whisper_compute_device:
@@ -195,14 +193,20 @@ config_page:
        restore_default_settings: 初期値に戻す
        position: 位置
        rotation: 回転
-        opacity: 透明度
-        ui_scaling: サイズ
        x_position: X軸（左右）
        y_position: Y軸（上下）
        z_position: Z軸（前後）
        x_rotation: X軸の回転
        y_rotation: Y軸の回転
        z_rotation: Z軸の回転
+        sample_text_button:
+            start: |-
+                サンプルテキストを
+                Overlayに送信する
+            stop: 送信を停止
+            sample_text: サンプルテキスト
+        opacity: 透明度
+        ui_scaling: サイズ
        display_duration: 表示時間
        fadeout_duration: フェードアウト時間
        common_settings: 共通設定
--- a/locales/ko.yml
+++ b/locales/ko.yml
@@ -168,7 +168,7 @@ config_page:
            desc: 일부 언어에서는 음성 인식의 정확도가 향상될 수 있어요. 음성 인식 중 CPU 사용률이 올라가기 때문에 사용하시는 PC의 사양을 고려하여 이 기능을 사용해주세요.
        whisper_weight_type:
            label: Whisper 모델 타입
-            desc: "기본적으로 용량이 많은 모델일수록 정밀도는 높지만, 음성 인식의 시간이 늘어나며 CPU 사용률도 늘어나요.각 모델의 설명은 문서를 참조해주세요.\n※특히 medium보다 용량이 큰 모델은 CPU의 성능에 따라서는 사용조차 어려울 수 있어요. "
+            # desc: "기본적으로 용량이 많은 모델일수록 정밀도는 높지만, 음성 인식의 시간이 늘어나며 CPU 사용률도 늘어나요.각 모델의 설명은 문서를 참조해주세요.\n※특히 medium보다 용량이 큰 모델은 CPU의 성능에 따라서는 사용조차 어려울 수 있어요. "
            model_template: '{{model_name}} 모델 ({{capacity}})'
            recommended_model_template: '{{model_name}} 모델 ({{capacity}}) (권장)'

--- a/locales/zh-Hans.yml
+++ b/locales/zh-Hans.yml
@@ -168,9 +168,9 @@ config_page:
            desc: 在某些语言中,语音识别的准确性可能会提高.语音识别的过程中,CPU占有率可能会提高,请根据你的pc性能来决定是否使用它.
        whisper_weight_type:
            label: 选择某个Whisper模型
-            desc: |-
-                通常来说,容量越大的模型精度也会越高,但也会增加文字显示所需要的时间和CPU的使用率。请浏览各个模型的文档
-                ※特别是大于medium容量的模型、因CPU性能原因甚至无法使用。
+            # desc: |-
+            #     通常来说,容量越大的模型精度也会越高,但也会增加文字显示所需要的时间和CPU的使用率。请浏览各个模型的文档
+            #     ※特别是大于medium容量的模型、因CPU性能原因甚至无法使用。
            model_template: '{{model_name}} 模型 ({{capacity}})'
            recommended_model_template: '{{model_name}} 模型 ({{capacity}}) (推荐)'

--- a/locales/zh-Hant.yml
+++ b/locales/zh-Hant.yml
@@ -167,9 +167,9 @@ config_page:
            desc: 在某些語言中，語音識別的準確性可能會提高。使用語音識別時，CPU使用率會增加，請根據你的PC規格考慮是否使用此功能。
        whisper_weight_type:
            label: 選擇 Whisper 模型
-            desc: |-
-                一般來說，容量較大的模型往往具有更高的準確性，但這也導致轉錄時間較長和CPU使用率增加。請參考文檔了解各模型的說明。
-                ※特別是超過中等大小的模型，根據CPU性能可能難以運行。
+            # desc: |-
+            #     一般來說，容量較大的模型往往具有更高的準確性，但這也導致轉錄時間較長和CPU使用率增加。請參考文檔了解各模型的說明。
+            #     ※特別是超過中等大小的模型，根據CPU性能可能難以運行。
            model_template: '{{model_name}}模型（{{capacity}}）'
            recommended_model_template: '{{model_name}}模型（{{capacity}}）（推薦）'

--- a/src-ui/app/_index_css/variables.css
+++ b/src-ui/app/_index_css/variables.css
@@ -49,11 +49,12 @@
    --dark_1000_color: #151517;

    --dark_825_color_cc: #434447cc;
+    --dark_550_color_22: #94959922;


    --title_bar_height: 2rem;
    --main_page_topbar_height: 4.8rem;
-    --config_page_sidebar_width: 18rem;
+    --config_page_sidebar_width: 16.8rem;
    --config_page_topbar_height: 8rem;

    --font_family: "Yu Gothic UI";
--- a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
@@ -67,7 +67,7 @@ export const CheckboxContainer = (props) => (
 );

 export const SwitchBoxContainer = (props) => (
-    <CommonContainer Component={SwitchBox} {...props} />
+    <CommonContainer Component={SwitchBox} {...props} add_break_point={false}/>
 );

 export const EntryContainer = (props) => (
@@ -78,15 +78,22 @@ export const RadioButtonContainer = (props) => (
    <CommonContainer Component={RadioButton} {...props} />
 );

-export const DeeplAuthKeyContainer = (props) => (
-    <div className={styles.container}>
-        <div className={styles.deepl_auth_key_label_section}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <OpenWebpage_DeeplAuthKey />
+export const DeeplAuthKeyContainer = (props) => {
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+    const container_class = clsx(styles.container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
+    });
+
+    return (
+        <div className={container_class}>
+            <div className={styles.deepl_auth_key_label_section}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <OpenWebpage_DeeplAuthKey />
+            </div>
+            <DeeplAuthKey {...props} />
        </div>
-        <DeeplAuthKey {...props} />
-    </div>
-);
+    );
+};

 export const ActionButtonContainer = (props) => (
    <CommonContainer Component={ActionButton} {...props} add_break_point={false}/>
--- a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
@@ -4,7 +4,7 @@
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
-    gap: 6rem;
+    gap: 10rem;
    &.flex_column {
        flex-direction: column;
    }
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
@@ -1,5 +1,7 @@
 import { useTranslation } from "react-i18next";
 import styles from "./Device.module.scss";
+import clsx from "clsx";
+import { useStore_IsBreakPoint } from "@store";
 import { ui_configs } from "@ui_configs";
 import {
    useEnableAutoMicSelect,
@@ -68,9 +70,14 @@ const Mic_Container = () => {
        }
    };

+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+    const device_container_class = clsx(styles.device_container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
+    });
+
    return (
        <div className={styles.mic_container}>
-            <div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
+            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
                <LabelComponent label={t("config_page.device.mic_host_device.label")} />
                <div className={styles.device_contents}>

@@ -159,9 +166,14 @@ const Speaker_Container = () => {

    };

+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+    const device_container_class = clsx(styles.device_container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
+    });
+
    return (
        <div className={styles.speaker_container}>
-            <div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
+            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
                <LabelComponent label={t("config_page.device.speaker_device.label")} />
                <div className={styles.device_contents}>

--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
@@ -16,6 +16,17 @@
    align-items: center;
    padding: 2rem;
    margin-bottom: 0rem;
+    &.is_break_point {
+        flex-direction: column;
+        gap: 2rem;
+        align-items: start;
+        & .device_contents {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+            padding-left: 0rem;
+        }
+    }
 }

 .threshold_container {
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
@@ -20,8 +20,11 @@ import {
    useIsEnabledOverlayLargeLog,
    useOverlayLargeLogSettings,
    useOverlayShowOnlyTranslatedMessages,
+    useSendTextToOverlay,
 } from "@logics_configs";

+import RedoSvg from "@images/redo.svg?react";
+
 export const Vr = () => {
    const { t } = useTranslation();
    const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true);
@@ -48,24 +51,26 @@ export const Vr = () => {
                    is_selected={is_opened_small_settings}
                    label_1={t("config_page.vr.single_line")}
                    label_2={t("config_page.vr.multi_lines")}
-                    />
+                />
                {is_opened_small_settings ? (
                    <OverlaySettingsContainer
-                    id="overlay_settings_small"
-                    ui_configs={ui_configs.overlay_small_log}
-                    current_overlay_settings={currentOverlaySmallLogSettings.data}
-                    set_overlay_settings={setOverlaySmallLogSettings}
-                    current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
-                    toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
+                        id="overlay_settings_small"
+                        ui_configs={ui_configs.overlay_small_log}
+                        default_ui_configs={ui_configs.overlay_small_log_default_settings}
+                        current_overlay_settings={currentOverlaySmallLogSettings.data}
+                        set_overlay_settings={setOverlaySmallLogSettings}
+                        current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
+                        toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
                    />
                ) : (
                    <OverlaySettingsContainer
-                    id="overlay_settings_large"
-                    ui_configs={ui_configs.overlay_large_log}
-                    current_overlay_settings={currentOverlayLargeLogSettings.data}
-                    set_overlay_settings={setOverlayLargeLogSettings}
-                    current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
-                    toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
+                        id="overlay_settings_large"
+                        ui_configs={ui_configs.overlay_large_log}
+                        default_ui_configs={ui_configs.overlay_large_log_default_settings}
+                        current_overlay_settings={currentOverlayLargeLogSettings.data}
+                        set_overlay_settings={setOverlayLargeLogSettings}
+                        current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
+                        toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
                    />
                )}
            </div>
@@ -86,6 +91,7 @@ const OverlaySettingsContainer = ({
    current_is_enabled_overlay,
    toggle_is_enabled_overlay,
    ui_configs,
+    default_ui_configs,
    id
 }) => {

@@ -115,8 +121,8 @@ const OverlaySettingsContainer = ({
        setTimeoutId(newTimeoutId);
    };

-    const selectTrackerFunction = (value) => {
-        const new_data = { ...settings, tracker: value };
+    const selectFunction = (key, value) => {
+        const new_data = { ...settings, [key]: value };
        set_overlay_settings(new_data);
    };

@@ -137,15 +143,16 @@ const OverlaySettingsContainer = ({

            <div className={styles.position_rotation_controls_box}>
                {is_opened_position_controller ? (
-                    <PositionControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
+                    <PositionControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} default_ui_configs={default_ui_configs} selectFunction={selectFunction}/>
                ) : (
-                    <RotationControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
+                    <RotationControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} default_ui_configs={default_ui_configs} selectFunction={selectFunction}/>
                )}
+                <SendSampleTextToggleButton />
            </div>
            <OtherControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
            <RadioButtonContainer
                label={t("config_page.vr.tracker")}
-                selectFunction={selectTrackerFunction}
+                selectFunction={(value) => selectFunction("tracker", value)}
                name={id}
                options={[
                    { id: "HMD", label: t("config_page.vr.hmd") },
@@ -180,13 +187,16 @@ const PageSwitcherContainer = (props) => {
    );
 };

-const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
+const PositionControls = ({settings, onchangeFunction, selectFunction, ui_configs, default_ui_configs}) => {
    const { t } = useTranslation();

    return (
        <div className={styles.position_controls}>
            <div className={styles.position_wrapper}>
-                <label className={clsx(styles.slider_label, styles.x_position_label)}>{t("config_page.vr.x_position")}</label>
+                <p className={clsx(styles.slider_label, styles.x_position_label)}>
+                    {t("config_page.vr.x_position")}
+                    <ResetButton onClickFunction={() => selectFunction("x_pos", default_ui_configs.x_pos)} />
+                </p>
                <Slider
                    className={styles.x_position_slider}
                    variable={settings.x_pos}
@@ -197,7 +207,10 @@ const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
                />
            </div>
            <div className={styles.position_wrapper}>
-                <label className={clsx(styles.slider_label, styles.y_position_label)}>{t("config_page.vr.y_position")}</label>
+                <p className={clsx(styles.slider_label, styles.y_position_label)}>
+                    {t("config_page.vr.y_position")}
+                    <ResetButton onClickFunction={() => selectFunction("y_pos", default_ui_configs.y_pos)} />
+                </p>
                <Slider
                    className={styles.y_position_slider}
                    variable={settings.y_pos}
@@ -209,7 +222,10 @@ const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
                />
            </div>
            <div className={styles.position_wrapper}>
-                <label className={clsx(styles.slider_label, styles.z_position_label)}>{t("config_page.vr.z_position")}</label>
+                <p className={clsx(styles.slider_label, styles.z_position_label)}>
+                    {t("config_page.vr.z_position")}
+                    <ResetButton onClickFunction={() => selectFunction("z_pos", default_ui_configs.z_pos)} />
+                </p>
                <Slider
                    className={styles.z_position_slider}
                    variable={settings.z_pos}
@@ -224,13 +240,16 @@ const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
    );
 };

-const RotationControls = ({settings, onchangeFunction}) => {
+const RotationControls = ({settings, onchangeFunction, selectFunction, default_ui_configs}) => {
    const { t } = useTranslation();

    return (
        <div className={styles.rotation_controls}>
            <div className={styles.rotation_wrapper}>
-                <label className={clsx(styles.slider_label, styles.x_rotation_label)}>{t("config_page.vr.x_rotation")}</label>
+                <p className={clsx(styles.slider_label, styles.x_rotation_label)}>
+                    {t("config_page.vr.x_rotation")}
+                    <ResetButton onClickFunction={() => selectFunction("x_rotation", default_ui_configs.y_pos)} />
+                </p>
                <Slider
                    className={styles.x_rotation_slider}
                    variable={-settings.x_rotation}
@@ -243,7 +262,10 @@ const RotationControls = ({settings, onchangeFunction}) => {
                />
            </div>
            <div className={styles.rotation_wrapper}>
-                <label className={clsx(styles.slider_label, styles.y_rotation_label)}>{t("config_page.vr.y_rotation")}</label>
+                <p className={clsx(styles.slider_label, styles.y_rotation_label)}>
+                    {t("config_page.vr.y_rotation")}
+                    <ResetButton onClickFunction={() => selectFunction("y_rotation", default_ui_configs.y_pos)} />
+                </p>
                <Slider
                    className={styles.y_rotation_slider}
                    variable={settings.y_rotation}
@@ -254,7 +276,10 @@ const RotationControls = ({settings, onchangeFunction}) => {
                />
            </div>
            <div className={styles.rotation_wrapper}>
-                <label className={clsx(styles.slider_label, styles.z_rotation_label)}>{t("config_page.vr.z_rotation")}</label>
+                <p className={clsx(styles.slider_label, styles.z_rotation_label)}>
+                    {t("config_page.vr.z_rotation")}
+                    <ResetButton onClickFunction={() => selectFunction("z_rotation", default_ui_configs.y_pos)} />
+                </p>
                <Slider
                    className={styles.z_rotation_slider}
                    variable={settings.z_rotation}
@@ -278,9 +303,9 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
    return(
        <div className={styles.other_controls}>
            <div className={styles.other_controls_wrapper}>
-                <label className={clsx(styles.other_controls_slider_label, styles.opacity_label)}>
+                <p className={clsx(styles.other_controls_slider_label, styles.opacity_label)}>
                    {t("config_page.vr.opacity")}
-                </label>
+                </p>
                <Slider
                    className={clsx(styles.other_controls_slider, styles.opacity_slider)}
                    variable={settings.opacity * 100}
@@ -292,9 +317,9 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                />
            </div>
            <div className={styles.other_controls_wrapper}>
-                <label className={clsx(styles.other_controls_slider_label, styles.ui_scaling_label)}>
+                <p className={clsx(styles.other_controls_slider_label, styles.ui_scaling_label)}>
                    {t("config_page.vr.ui_scaling")}
-                </label>
+                </p>
                <Slider
                    className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)}
                    variable={settings.ui_scaling * 100}
@@ -306,7 +331,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                />
            </div>
            <div className={styles.other_controls_wrapper}>
-                <label className={clsx(styles.other_controls_slider_label, styles.display_duration_label)}>{t("config_page.vr.display_duration")}</label>
+                <p className={clsx(styles.other_controls_slider_label, styles.display_duration_label)}>{t("config_page.vr.display_duration")}</p>
                <Slider
                    className={clsx(styles.other_controls_slider, styles.display_duration_slider)}
                    variable={settings.display_duration}
@@ -318,7 +343,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                />
            </div>
            <div className={styles.other_controls_wrapper}>
-                <label className={clsx(styles.other_controls_slider_label, styles.fadeout_duration_label)}>{t("config_page.vr.fadeout_duration")}</label>
+                <p className={clsx(styles.other_controls_slider_label, styles.fadeout_duration_label)}>{t("config_page.vr.fadeout_duration")}</p>
                <Slider
                    className={clsx(styles.other_controls_slider, styles.fadeout_duration_slider)}
                    variable={settings.fadeout_duration}
@@ -348,4 +373,66 @@ const CommonSettingsContainer = () => {
            />
        </div>
    );
+};
+
+const ResetButton = ({onClickFunction}) => {
+    return (
+        <button className={styles.slider_reset_button} onClick={onClickFunction}>
+            <RedoSvg className={styles.slider_reset_svg}/>
+        </button>
+    );
+};
+
+import SquareSvg from "@images/square.svg?react";
+import TriangleSvg from "@images/triangle.svg?react";
+import { randomIntMinMax } from "@utils";
+
+const SendSampleTextToggleButton = () => {
+    const { t } = useTranslation();
+    const { sendTextToOverlay } = useSendTextToOverlay();
+    const [is_started, setIsStarted] = useState(false);
+
+    useEffect(() => {
+        let interval_id;
+
+        if (is_started) {
+            interval_id = setInterval(() => {
+                const text_data = Array.from(
+                    { length: randomIntMinMax(1, 5) },
+                    () => t("config_page.vr.sample_text_button.sample_text")
+                ).join(" ");
+                sendTextToOverlay(text_data);
+            }, 1000);
+        };
+
+        return () => {
+            if (interval_id) {
+                clearInterval(interval_id);
+            }
+        };
+    }, [is_started]);
+
+    const toggleFunction = () => {
+        setIsStarted(!is_started);
+    };
+
+    const label = is_started
+        ? t("config_page.vr.sample_text_button.stop")
+        : t("config_page.vr.sample_text_button.start");
+
+    return (
+        <div className={styles.sample_text_button_wrapper}>
+            <button
+                className={clsx(styles.sample_text_button, { [styles.is_started]: is_started })}
+                onClick={toggleFunction}
+            >
+                {is_started ? (
+                    <SquareSvg className={styles.sample_text_button_square_svg} />
+                ) : (
+                    <TriangleSvg className={styles.sample_text_button_triangle_svg} />
+                )}
+            </button>
+            <p className={styles.sample_text_button_label}>{label}</p>
+        </div>
+    );
 };
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
@@ -56,6 +56,54 @@
    transform: translate(-10%);
 }

+.sample_text_button_wrapper {
+    position: absolute;
+    bottom: 0;
+    left: -74%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+.sample_text_button {
+    background-color: var(--dark_850_color);
+    padding: 1.8rem;
+    border-radius: 50%;
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_925_color);
+    }
+    &.is_started {
+        background-color: var(--primary_600_color);
+        &:hover {
+            background-color: var(--primary_500_color);
+        }
+        &:active {
+            background-color: var(--primary_700_color);
+        }
+    }
+}
+.sample_text_button_triangle_svg, .sample_text_button_square_svg {
+    width: 2.4rem;
+}
+.sample_text_button_triangle_svg {
+    transform: translateX(10%) rotate(90deg);
+}
+.sample_text_button_label {
+    color: var(--dark_basic_text_color);
+    position: absolute;
+    left: 50%;
+    top: 110%;
+    // bottom: -2rem;
+    transform: translateX(-50%);
+    white-space: pre-wrap;
+    font-size: 1.2rem;
+    width: max-content;
+    text-align: center;
+}
+
 // .position_controls {
 //     background-color: gray;
 // }
@@ -65,19 +113,24 @@
 // }

 .slider_label {
-    font-size: 1.6rem;
+    font-size: 1.4rem;
    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    white-space: nowrap;
 }
 .x_position_label {
    position: absolute;
-    bottom: -4rem;
-    right: -30%;
-    text-align: end;
+    bottom: -4.6rem;
+    right: -46%;
+    justify-content: end;
 }
 .y_position_label {
    position: absolute;
-    top: -36%;
+    top: -44%;
    left: 10%;
+    justify-content: start;
 }
 .z_position_label {
    position: absolute;
@@ -123,14 +176,14 @@

 .x_rotation_label {
    position: absolute;
-    top: -36%;
+    top: -44%;
    left: 10%;
 }
 .y_rotation_label {
    position: absolute;
-    bottom: -4rem;
-    right: -30%;
-    text-align: end;
+    bottom: -4.6rem;
+    right: -46%;
+    justify-content: end;
 }
 .z_rotation_label {
    position: absolute;
@@ -163,6 +216,33 @@
    height: 100%;
 }

+
+.slider_reset_button {
+    background-color: var(--dark_875_color);
+    padding: 0.6rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.4rem;
+    flex-shrink: 0;
+    &:hover {
+        background-color: var(--dark_825_color);
+        & .slider_reset_svg {
+            color: var(--dark_200_color);
+        }
+    }
+    &:active {
+        background-color: var(--dark_925_color);
+    }
+}
+
+.slider_reset_svg {
+    width: 1.4rem;
+    color: var(--dark_550_color);
+}
+
+
+
 .other_controls {
    margin-top: 6rem;
    display: flex;
--- a/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss
+++ b/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss
@@ -4,7 +4,7 @@
    display: flex;
    flex-direction: column;
    justify-content: space-between;
-    padding: 0rem 0rem 5.8rem 1.6rem;
+    padding: 0rem 0rem 5.8rem 1.2rem;
    max-height: 60rem;
 }

@@ -23,7 +23,7 @@
    justify-content: left;
    align-items: center;
    color: var(--dark_basic_text_color);
-    padding: 0.8rem 0 0.8rem 1.2rem;
+    padding: 0.8rem 0 0.8rem 1rem;
    cursor: pointer;
    &:hover {
        background-color: var(--dark_800_color);
--- a/src-ui/app/modal_controller/ModalController.module.scss
+++ b/src-ui/app/modal_controller/ModalController.module.scss
@@ -11,7 +11,7 @@
    position: absolute;
    width: 100%;
    height: 100%;
-    background-color:  (#ffffff22);
+    background-color: var(--dark_550_color_22);
    backdrop-filter: blur(0.2rem);
 }

@@ -21,8 +21,8 @@
    left: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
-    background-color: var(--dark_875_color);
-    width: 60%;
+    background-color: var(--dark_900_color);
+    width: 80%;
    height: 96%;
    padding: 2rem;
    border-radius: 0.6rem;
--- a/src-ui/assets/triangle.svg
+++ b/src-ui/assets/triangle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.574 3.712c.195-.323.662-.323.857 0l9.37 15.545c.2.333-.039.757-.429.757l-18.668-.006c-.385 0-.629-.422-.428-.758l9.298-15.538zm.429-2.483c-.76 0-1.521.37-1.966 1.111l-9.707 16.18c-.915 1.523.182 3.472 1.965 3.472h19.416c1.783 0 2.879-1.949 1.965-3.472l-9.707-16.18c-.446-.741-1.205-1.111-1.966-1.111z"/></svg>
--- a/src-ui/logics/configs/index.js
+++ b/src-ui/logics/configs/index.js
@@ -49,6 +49,7 @@ export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings";
 export { useIsEnabledOverlayLargeLog } from "./vr/useIsEnabledOverlayLargeLog";
 export { useOverlayShowOnlyTranslatedMessages } from "./vr/useOverlayShowOnlyTranslatedMessages";
 export { useOverlayLargeLogSettings } from "./vr/useOverlayLargeLogSettings";
+export { useSendTextToOverlay } from "./vr/useSendTextToOverlay";

 export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
 export { useOscPort } from "./advanced_settings/useOscPort";
--- a/src-ui/logics/configs/vr/useSendTextToOverlay.js
+++ b/src-ui/logics/configs/vr/useSendTextToOverlay.js
@@ -0,0 +1,13 @@
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSendTextToOverlay = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+
+    const sendTextToOverlay = (text) => {
+        asyncStdoutToPython("/run/send_text_overlay_small_log", text);
+    };
+
+    return {
+        sendTextToOverlay,
+    };
+};
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -427,6 +427,8 @@ export const useReceiveRoutes = () => {
        "/set/enable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
        "/set/disable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,

+        "/run/send_text_overlay_small_log": () => {},
+
        // Others Tab
        "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
        "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.574 3.712c.195-.323.662-.323.857 0l9.37 15.545c.2.333-.039.757-.429.757l-18.668-.006c-.385 0-.629-.422-.428-.758l9.298-15.538zm.429-2.483c-.76 0-1.521.37-1.966 1.111l-9.707 16.18c-.915 1.523.182 3.472 1.965 3.472h19.416c1.783 0 2.879-1.949 1.965-3.472l-9.707-16.18c-.446-.741-1.205-1.111-1.966-1.111z"/></svg>`