Merge branch 'ui' into for_webui

2024-12-13 09:30:46 +09:00
parent 192d6ec0e6 941c24d9b8
commit 0e74833f22
8 changed files with 59 additions and 20 deletions
--- a/locales/en.yml
+++ b/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

--- a/locales/ja.yml
+++ b/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:
--- a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
+++ b/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>
--- a/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.jsx
+++ b/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>
    );
--- 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
@@ -40,8 +40,8 @@ export const Vr = () => {
                <PageSwitcherContainer
                    toggleFunction={toggleIsOpenedSmallSettings}
                    is_selected={is_opened_small_settings}
-                    label_1="Small"
-                    label_2="Large"
+                    label_1={t("config_page.vr.single_line")}
+                    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: "LeftHand", label: "LeftHand" },
-                    { id: "RightHand", label: "RightHand" },
+                    { id: "HMD", label: t("config_page.vr.hmd") },
+                    { id: "LeftHand", label: t("config_page.vr.left_hand") },
+                    { 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}
--- a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
+++ b/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}
                />
--- a/src-ui/app/main_page/sidebar_section/language_settings/add_remove_target_language_buttons/AddRemoveTargetLanguageButtons.module.scss
+++ b/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 {
-    width: 100%;
+.remove_target_language_button, .add_target_language_button {
    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);
--- a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx
+++ b/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}>