Merge branch 'ui' into for_webui

locales/en.yml

@@ -78,6 +78,7 @@ config_page:
         about_vrct: About VRCT
 
     device:
+        check_volume: Check Volume
         mic_host_device:
             label: Mic Device
             label_auto_select: Auto Select
@@ -108,7 +109,7 @@ config_page:
         ui_size:
             label: UI Size
         textbox_ui_size:
-            label: Text Box Font Size
+            label: Message Logs Font Size
             desc: You can adjust the font size used in the logs relative to the UI size.
         send_message_button_type:
             label: Send Message Button
@@ -131,6 +132,8 @@ config_page:
         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.
+            save: Save
+            edit: Edit
             open_auth_key_webpage: Open DeepL Account Webpage
             auth_key_success: Auth key update completed.
             auth_key_error: Auth Key is incorrect or Usage limit reached.
@@ -183,8 +186,10 @@ config_page:
             label: Select Whisper Compute Device
 
     vr:
+        single_line: Single line
+        multi_lines: Multi lines
+        overlay_enable: Enable
         restore_default_settings: Restore Default Settings
-        enable: Enable
         position: Position
         rotation: Rotation
         x_position: X-axis (left-right)
@@ -198,6 +203,10 @@ config_page:
         display_duration: Display duration
         fadeout_duration: Fadeout duration
         tracker: Tracker
+        hmd: HMD
+        left_hand: Left hand
+        right_hand: Right hand
+        common_settings: Common Settings
         overlay_show_only_translated_messages:
             label: Show Only Translated Messages
 

locales/ja.yml

@@ -75,8 +75,10 @@ config_page:
         advanced_settings: 高度な設定
 
     device:
+        check_volume: 音量チェック
         mic_host_device:
             label: マイク （デバイス）
+            label_auto_select: 自動選択
             label_host: ホスト/ドライバー
             label_device: デバイス
         mic_dynamic_energy_threshold:
@@ -87,6 +89,7 @@ config_page:
             error_message: 0 から {{max}} までの数値で設定できます。
         speaker_device:
             label: スピーカー （デバイス）
+            label_auto_select: 自動選択
         speaker_dynamic_energy_threshold:
             label_for_automatic: 'スピーカー入力感度の調整 (現在の設定: 自動)'
             desc_for_automatic: スピーカーの入力感度を自動的に調節する。
@@ -102,7 +105,7 @@ config_page:
         ui_size:
             label: UIサイズ
         textbox_ui_size:
-            label: テキストボックス フォントサイズ
+            label: ログのフォントサイズ
             desc: ログに表示されるフォントのサイズを、UIサイズを基準にして倍率を変えられます。
         send_message_button_type:
             label: メッセージ送信ボタン
@@ -120,12 +123,16 @@ config_page:
             desc: 翻訳エンジン（オフライン翻訳）で翻訳する際に、使用する翻訳モデルを選択できます。
             small: 通常モデル ({{capacity}})
             large: 高精度モデル ({{capacity}})
+        ctranslate2_compute_device:
+            label: オフライン翻訳の処理デバイス
         deepl_auth_key:
             label: DeepL 認証キー
             desc: |-
                 使用の際は、メイン画面にある {{translator}} をDeepL_APIに変更してください。
                 ※対応していない言語もあります。
             open_auth_key_webpage: DeepLアカウントページを開く
+            save: 保存
+            edit: 編集
             auth_key_success: 認証キーの更新が完了しました。
             auth_key_error: 認証キーが間違っているか、API使用制限が上限に達しています。
 
@@ -176,7 +183,12 @@ config_page:
             recommended_model_template: '{{model_name}} モデル ({{capacity}}) (推奨)'
 
     vr:
+        single_line: 一行
+        multi_lines: 複数行
+        overlay_enable: 有効にする
         restore_default_settings: 初期値に戻す
+        position: 位置
+        rotation: 回転
         opacity: 透明度
         ui_scaling: サイズ
         x_position: X軸（左右）
@@ -187,6 +199,13 @@ config_page:
         z_rotation: Z軸の回転
         display_duration: 表示時間
         fadeout_duration: フェードアウト時間
+        common_settings: 共通設定
+        hmd: HMD
+        left_hand: 左手
+        right_hand: 右手
+        tracker: 表示するトラッカーの位置
+        overlay_show_only_translated_messages:
+            label: 翻訳後のメッセージのみ表示する
 
     others:
         auto_clear_the_message_box:

src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx

@@ -43,14 +43,14 @@ export const DeeplAuthKey = (props) => {
                 <button className={save_button_class_names} onClick={saveAuthKey}>
                     {is_disabled
                     ? <CircularProgress size="1.4rem" sx={{ color: "var(--dark_basic_text_color)" }}/>
-                    : <p className={styles.save_button_label}>Save</p>
+                    : <p className={styles.save_button_label}>{t("config_page.translation.deepl_auth_key.save")}</p>
                 }
                 </button>
                 {is_editable
                 ? null
                 :
                     <div className={styles.entry_edit_cover} onClick={revealEditAuthKey}>
-                        <button className={styles.edit_button}>Edit</button>
+                        <button className={styles.edit_button}>{t("config_page.translation.deepl_auth_key.edit")}</button>
                     </div>
                 }
             </div>
@@ -60,10 +60,11 @@ export const DeeplAuthKey = (props) => {
 
 
 export const OpenWebpage_DeeplAuthKey = () => {
+    const { t } = useTranslation();
     return (
         <div className={styles.open_webpage_button_wrapper}>
             <a className={styles.open_webpage_button} href="https://www.deepl.com/ja/your-account/keys" target="_blank" rel="noreferrer" >
-                <p className={styles.open_webpage_text}>Open DeepL Account Webpage</p>
+                <p className={styles.open_webpage_text}>{t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}</p>
                 <ExternalLink className={styles.external_link_svg} />
             </a>
         </div>

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

@@ -1,8 +1,10 @@
 import React from "react";
-import styles from "./VolumeCheckButton.module.scss";
+import { useTranslation } from "react-i18next";
 import clsx from "clsx";
+import styles from "./VolumeCheckButton.module.scss";
 
 export const VolumeCheckButton = React.memo((props) => {
+    const { t } = useTranslation();
     const getClassNames = (baseClass) => clsx(baseClass, {
         [styles.is_active]: (props.isChecking?.data === true),
         [styles.is_pending]: (props.isChecking.state === "pending"),
@@ -21,7 +23,7 @@ export const VolumeCheckButton = React.memo((props) => {
         <div className={styles.container}>
             <div className={getClassNames(styles.button)} onClick={toggleFunction}>
                 <props.SvgComponent className={styles.button_svg} />
-                <p className={styles.button_text}>Check Volume</p>
+                <p className={styles.button_text}>{t("config_page.device.check_volume")}</p>
             </div>
         </div>
     );

src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx

@@ -40,8 +40,8 @@ export const Vr = () => {
                 <PageSwitcherContainer
                     toggleFunction={toggleIsOpenedSmallSettings}
                     is_selected={is_opened_small_settings}
-                    label_1="Small"
+                    label_1={t("config_page.vr.single_line")}
-                    label_2="Large"
+                    label_2={t("config_page.vr.multi_lines")}
                     />
                 {is_opened_small_settings ? (
                     <OverlaySettingsContainer
@@ -112,7 +112,7 @@ const OverlaySettingsContainer = ({
     return (
         <>
             <SwitchBoxContainer
-                label={t("config_page.vr.enable")}
+                label={t("config_page.vr.overlay_enable")}
                 variable={current_is_enabled_overlay}
                 toggleFunction={toggle_is_enabled_overlay}
             />
@@ -136,9 +136,9 @@ const OverlaySettingsContainer = ({
                 selectFunction={selectTrackerFunction}
                 name={id}
                 options={[
-                    { id: "HMD", label: "HMD" },
+                    { id: "HMD", label: t("config_page.vr.hmd") },
-                    { id: "LeftHand", label: "LeftHand" },
+                    { id: "LeftHand", label: t("config_page.vr.left_hand") },
-                    { id: "RightHand", label: "RightHand" },
+                    { id: "RightHand", label: t("config_page.vr.right_hand") },
                 ]}
                 checked_variable={{data: settings.tracker}}
                 column={true}
@@ -328,7 +328,7 @@ const CommonSettingsContainer = () => {
 
     return (
         <div className={styles.common_container}>
-            <SectionLabelComponent label="Common Settings" />
+            <SectionLabelComponent label={t("config_page.vr.common_settings")} />
             <CheckboxContainer
                 label={t("config_page.vr.overlay_show_only_translated_messages.label")}
                 variable={currentOverlayShowOnlyTranslatedMessages}

src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx

@@ -92,7 +92,7 @@ export const MessageInputBox = () => {
                     className={styles.message_box_input_area}
                     onChange={onChangeFunction}
                     onBlur={stopTyping}
-                    placeholder="Input Textfield"
+                    // placeholder="Input Textfield"
                     value={currentMessageInputValue.data}
                     onKeyDown={onKeyDownFunction}
                 />

src-ui/app/main_page/sidebar_section/language_settings/add_remove_target_language_buttons/AddRemoveTargetLanguageButtons.module.scss

@@ -1,15 +1,15 @@
 .add_remove_target_language_container {
     width: 100%;
     display: flex;
+    justify-content: end;
     align-items: center;
 }
 
-.add_target_language_button, .remove_target_language_button {
+.remove_target_language_button, .add_target_language_button {
-    width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0.6rem 0;
+    padding: 0.6rem 1rem;
     cursor: pointer;
     background-color: var(--dark_825_color);
     &:hover {
@@ -26,6 +26,14 @@
     }
 }
 
+.remove_target_language_button {
+    border-radius: 0 0 0 0.4rem;
+
+}
+.add_target_language_button {
+    border-radius: 0 0 0.4rem 0;
+}
+
 .remove_svg, .add_svg {
     width: 0.8rem;
     color: var(--dark_200_color);

src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx

@@ -60,7 +60,7 @@ export const LanguageSelectorOpenButton = ({ TurnedOnSvgComponent, is_turned_on,
     return (
         <div className={styles.container}>
             <div className={styles.title_container}>
-                <TurnedOnSvgComponent className={category_class_names} />
+                { target_key === "1" ? <TurnedOnSvgComponent className={category_class_names} /> : null }
                 <p className={styles.title}>{title}</p>
             </div>
             <div className={styles.dropdown_menu_container} onClick={toggleSelector}>