Merge branch 'ui' into for_webui

2024-12-17 15:17:52 +09:00
parent e8d195410e 857c28db22
commit ea59cdc63c
8 changed files with 75 additions and 12 deletions
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -20,6 +20,9 @@ main_page:
        received: Received
        system: System

+        show_resend_button: Show Resend Button
+        resend_button_on_hover_desc: Press and hold to send
+
    # textbox_system_message:
    #     enabled_easter_egg: Whoa! You caught us! There is something...like...easter-egg-ish function has enabled! It'll affect to Overlay(VR) for now;).
    #     enabled_translation: Translation feature is turned on.
@@ -67,6 +70,7 @@ config_page:
    # restart_message: Apply changes with a restart.
    # common_error_message:
    #     invalid_value: Invalid value.
+    model_download_button_label: Download
    side_menu_labels:
        device: Device
        appearance: Appearance
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -20,6 +20,9 @@ main_page:
        received: 受信
        system: システム

+        show_resend_button: 再送信ボタンを表示する
+        resend_button_on_hover_desc: 長押しで送信
+
    # textbox_system_message:
    #     enabled_translation: 翻訳機能をONにしました。
    #     disabled_translation: 翻訳機能をOFFしました。
@@ -66,6 +69,7 @@ config_page:
    # restart_message: 再起動して変更を適用する。
    # common_error_message:
    #     invalid_value: 無効な値です。
+    model_download_button_label: ダウンロード
    side_menu_labels:
        device: デバイス
        appearance: デザイン
@@ -139,6 +143,7 @@ config_page:
    transcription:
        section_label_mic: マイク
        section_label_speaker: スピーカー
+        section_label_transcription_engines: 音声認識エンジン
        mic_record_timeout:
            label: 入力が終了したとみなす無音時間
            desc: 無音を検出し、設定された秒数経過すると、音声入力が終了したとみなします。
@@ -171,9 +176,8 @@ config_page:
            label: ログとして表示するまでに保持する単語数
            desc: 文字起こしされた単語数の下限値で、この数値を超えた場合のみ結果をログに表示します。
            error_message: 0以上の数値を設定できます。
-        use_whisper_feature:
-            label: 音声認識にWhisperモデルを使用する
-            desc: 一部の言語では、音声認識の精度が向上するかもしれません。音声認識使用中、CPUの使用率が上がるので、お使いのPCスペックと相談してこの機能を使用してください。
+        select_transcription_engine:
+            label: 音声認識で使用するエンジン
        whisper_weight_type:
            label: Whisperモデルのタイプ
            desc: |-
@@ -181,6 +185,8 @@ config_page:
                ※特にmediumより容量の大きいモデルは、CPUの性能によっては使用すらも困難です。
            model_template: '{{model_name}} モデル ({{capacity}})'
            recommended_model_template: '{{model_name}} モデル ({{capacity}}) (推奨)'
+        whisper_compute_device:
+            label: Whisperで使用する処理デバイス

    vr:
        single_line: 一行
@@ -223,6 +229,9 @@ config_page:
        send_message_to_vrc:
            label: VRChatにメッセージを送信する
            desc: サポート対象外ですが、VRChatにメッセージを送信せずに使う方法があります。送信したい場合、この機能を有効にする事を忘れないでください。
+        send_received_message_to_vrc:
+            label: 受信したメッセージをVRChatに送信する
+            desc: スピーカーから聞き取り、文字起こしされたメッセージをVRChatに送信します。

    advanced_settings:
        osc_ip_address:
--- a/src-ui/app/_index_css/variables.css
+++ b/src-ui/app/_index_css/variables.css
@@ -48,6 +48,8 @@
    --dark_975_color: #1a1b1d;
    --dark_1000_color: #151517;

+    --dark_825_color_cc: #434447cc;
+

    --title_bar_height: 2rem;
    --main_page_topbar_height: 4.8rem;
--- a/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import CircularProgress from "@mui/material/CircularProgress";
 import styles from "./DownloadModels.module.scss";
@@ -33,6 +34,7 @@ export const DownloadModels = (props) => {
 };

 const ModelSelector = ({option, ...props}) => {
+    const { t } = useTranslation();
    const [circular_color, setCircularColor] = useState("");
    const [circular_color_2, setCircularColor2] = useState("");
    useEffect(() => {
@@ -67,7 +69,7 @@ const ModelSelector = ({option, ...props}) => {
                        className={styles.download_button}
                        onClick={() => props.downloadStartFunction(option.id)}
                    >
-                        <p className={styles.download_button_label}>Download</p>
+                        <p className={styles.download_button_label}>{t("config_page.model_download_button_label")}</p>
                    </button>
                );
            default:
--- 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
@@ -76,7 +76,7 @@
 }
 .y_position_label {
    position: absolute;
-    top: -27%;
+    top: -36%;
    left: 10%;
 }
 .z_position_label {
@@ -123,7 +123,7 @@

 .x_rotation_label {
    position: absolute;
-    top: -27%;
+    top: -36%;
    left: 10%;
 }
 .y_rotation_label {
@@ -156,7 +156,7 @@

 .z_rotation_slider {
    position: absolute;
-    bottom: 90%;
+    bottom: 80%;
    left: 100%;
    transform: translate(50%,50%) rotate(-45deg);
    width: 0%;
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.jsx
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import styles from "./MessageSubMenuContainer.module.scss";
 import SendMessageSvg from "@images/send_message.svg?react";
@@ -67,5 +68,6 @@ export const MessageSubMenuContainer = (props) => {
 };

 const Title_p = () => {
-    return <p className={styles.tooltip_title}>Press and hold to send</p>;
+    const { t } = useTranslation();
+    return <p className={styles.tooltip_title}>{t("main_page.message_log.resend_button_on_hover_desc")}</p>;
 };
--- a/src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.jsx
+++ b/src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.jsx
@@ -1,12 +1,15 @@
 import { useState } from "react";
 import styles from "./MessageLogSettingsContainer.module.scss";
 import clsx from "clsx";
+import { useTranslation } from "react-i18next";

 import { useIsVisibleResendButton } from "@logics_main";
 import { MessageLogUiScalingContainer } from "@setting_box";
 import { Checkbox } from "@common_components";
+import ConfigSvg from "@images/configuration.svg?react";

 export const MessageLogSettingsContainer = (props) => {
+    const { t } = useTranslation();
    const [is_opened, setIsOpened] = useState(false);
    const [is_hovered, setIsHovered] = useState(false);

@@ -28,10 +31,15 @@ export const MessageLogSettingsContainer = (props) => {
            onMouseLeave={() => {setIsHovered(false); setIsOpened(false);}}
            onClick={() => setIsOpened(true)}
        >
+            <div className={styles.container_relative_wrapper}>
+                <div className={styles.config_svg_wrapper}>
+                    <ConfigSvg className={styles.config_svg}/>
+                </div>
+            </div>
            <MessageLogUiScalingContainer />
            <div className={styles.others_wrapper}>
                <div className={styles.resend_checkbox_toggle} onClick={toggleVisibleResendButton}>
-                    <p className={styles.resend_checkbox_label}>Show Resend Button</p>
+                    <p className={styles.resend_checkbox_label}>{t("main_page.message_log.show_resend_button")}</p>
                    <Checkbox
                        id="visible_resend_button"
                        variable={currentIsVisibleResendButton}
--- a/src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.module.scss
+++ b/src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.module.scss
@@ -1,12 +1,12 @@
 $container_height: 18rem;
+$toggle_config_size: 3rem;
 .container {
    position: absolute;
-    top: -#{$container_height};
+    top: calc(-#{$container_height} + -#{$toggle_config_size});
    left: 0;
    height: $container_height;
    width: 100%;
-    background-color:  (#555555cc);
-    backdrop-filter: blur(0.6rem);
+    background-color: var(--dark_825_color);
    transition: top 0.3s ease;
    padding: 0.6rem;
    display: flex;
@@ -15,18 +15,54 @@ $container_height: 18rem;
    align-items: center;
    &.to_visible_toggle_bar {
        top: calc(-#{$container_height} + 1rem);
+        & .config_svg_wrapper {
+            transform: translate(-50%, -50%) rotate(180deg);
+        }
+
    }
    &.is_hovered {
        top: calc(-#{$container_height} + 2rem);
    }
    &.is_opened {
        top: 0;
+        background-color: var(--dark_825_color_cc);
+        backdrop-filter: blur(0.6rem);
+        & .config_svg_wrapper {
+            width: 0%;
+            bottom: 0;
+        }
    }
    &:not(.is_opened) {
        cursor: pointer;
    }
 }

+.container_relative_wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.config_svg_wrapper {
+    position: absolute;
+    left: 50%;
+    bottom: -#{$toggle_config_size};
+    transform: translate(-50%, -50%) rotate(0deg);
+    background-color: var(--dark_825_color);
+    width: $toggle_config_size;
+    border-radius: 50%;
+    aspect-ratio: 1 / 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s ease, transform 0.6s ease;
+}
+
+.config_svg {
+    width: calc($toggle_config_size / 1.6);
+    color: var(--dark_500_color);
+}
+
 .others_wrapper {
    width: 100%;
    display: flex;