every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'ui' into for_webui

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-17 15:17:52 +09:00
parent e8d195410e 857c28db22
commit ea59cdc63c
8 changed files with 75 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
locales/en.yml
View File

@@ -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

15
locales/ja.yml
View File

@@ -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:

2
src-ui/app/_index_css/variables.css
View File

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

4
src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx
View File

@@ -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:

6
src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
View File

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

4
src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.jsx
View File

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

10
src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.jsx
View File

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

42
src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.module.scss
View File

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