Merge branch 'ui' into for_webui

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

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:
+        select_transcription_engine:
-            label: 音声認識にWhisperモデルを使用する
+            label: 音声認識で使用するエンジン
-            desc: 一部の言語では、音声認識の精度が向上するかもしれません。音声認識使用中、CPUの使用率が上がるので、お使いのPCスペックと相談してこの機能を使用してください。
         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:

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;

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:

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%;

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>;
 };

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}

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);
+    background-color: var(--dark_825_color);
-    backdrop-filter: blur(0.6rem);
     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;