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

[Update] Config Page: Advanced Settings Tab. Add modal and section that is switchable between CPU and CUDA version.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-20 01:28:44 +09:00
parent 0eec985a62
commit 1d615ab97d
12 changed files with 238 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
locales/en.yml
View File

@@ -48,14 +48,6 @@ main_page:
# Opened VRCT Documents page in your web browser.
# For any issues, requests, or inquiries, please feel free to contact us through the links at the bottom of the documents page, the "Contact Form," or via X (formerly Twitter)!
update_available: New version is here!
update_software_desc: |-
Download the new version and automatically restart the app.
It'll take a while. Do it now?
deny_update_software: Do it later
accept_update_software: Update and Restart
updating: Now updating...
state_text_enabled: Enabled
state_text_disabled: Disabled
@@ -63,6 +55,24 @@ main_page:
title_your_language: Select Your Language
title_target_language: Select Target Language
update_available: New version is here!
updating: Now updating...
update_modal:
update_software_desc: |-
Download the new version and automatically restart the app.
It'll take a while. Do it now?
deny_update_software: Do it later
accept_update_software: Update and Restart
switch_compute_device_modal:
close_modal: Close
switch_to_cpu_desc: Download and replace with the CPU version. The GPU will no longer be selectable as the compute device, and only the CPU will be used.
switch_to_cuda_desc: Download and replace with the CUDA (GPU-selectable) version. It will be able to select both the CPU and GPU, but it will require approximately 5GB of disk space.
switch_to_cpu_button: Switch to CPU version
switch_to_cuda_button: Switch to CUDA (GPU) version
restart_desc: The app will automatically restart.
config_page:
version: version {{version}}
# config_title: Settings
@@ -245,3 +255,5 @@ config_page:
label: OSC Port
open_config_filepath:
label: Open Config File
switch_compute_device:
label: Switch VRCT to CPU/GPU Version

32
locales/ja.yml
View File

@@ -47,14 +47,6 @@ main_page:
# お使いのブラウザで、VRCTのドキュメントを開きました。使用方法などはそちらに記載されています。
# 不具合、ご要望、その他お問い合わせはドキュメント最下部にあるLinks、「お問合せフォーム」もしくはX (元Twitter) にて気軽にご連絡ください！
update_available: 新しいバージョンが出ました！
update_software_desc: |-
新しいバージョンをダウンロードしてアプリを再起動します。
少し時間がかかります。今すぐ行いますか？
deny_update_software: 後でする
accept_update_software: アップデートして再起動
updating: アップデート中...
state_text_enabled: 有効
state_text_disabled: 無効
@@ -62,6 +54,28 @@ main_page:
title_your_language: あなたの言語
title_target_language: 相手の言語
update_available: 新しいバージョンが出ました！
updating: アップデート中...
update_modal:
update_software_desc: |-
新しいバージョンをダウンロードしてアプリを再起動します。
少し時間がかかります。今すぐ行いますか？
deny_update_software: 後でする
accept_update_software: アップデートして再起動
switch_compute_device_modal:
close_modal: 閉じる
switch_to_cpu_desc: |-
CPUバージョンをダウンロードして置き換えます。
処理デバイスとしてGPUを選択できなくなり、CPUのみを使用するようになります。
switch_to_cuda_desc: |-
CUDA（GPU選択可能）バージョンをダウンロードして置き換えます。
CPUとGPUの両方を選択できるようになりますが、約5GBのディスク容量が必要になります。
switch_to_cpu_button: CPUバージョンに切り替える
switch_to_cuda_button: CUDA（GPU）バージョンに切り替える
restart_desc: アプリが自動的に再起動します。
config_page:
version: バージョン {{version}}
# config_title: 設定
@@ -244,3 +258,5 @@ config_page:
label: OSC Port
open_config_filepath:
label: 設定ファイルを開く
switch_compute_device:
label: VRCT CPU/GPUバージョンの切り替え

19
locales/ko.yml
View File

@@ -44,14 +44,6 @@ main_page:
# 웹 브라우저에서 VRCT 문서 페이지가 열렸습니다.
# 문제, 요청 또는 문의 사항이 있는 경우 문서 페이지 하단의 링크, '문의 양식' 또는 X(구 트위터)를 통해 언제든지 문의해 주세요!
update_available: 새로운 버전이 나왔습니다!
update_software: |-
새 버전을 다운로드하고 재시작합니다.
조금 시간이 걸립니다. 지금 시작할까요?
deny_update_software: 나중에 하기
accept_update_software: 업데이트 및 재시작
updating: 업데이트 중...
state_text_enabled: Enabled
state_text_disabled: Disabled
@@ -59,6 +51,17 @@ main_page:
title_your_language: 당신의 언어
title_target_language: 상대방의 언어
update_available: 새로운 버전이 나왔습니다!
updating: 업데이트 중...
update_modal:
update_software: |-
새 버전을 다운로드하고 재시작합니다.
조금 시간이 걸립니다. 지금 시작할까요?
deny_update_software: 나중에 하기
accept_update_software: 업데이트 및 재시작
config_page:
version: 버전 {{version}}
# config_title: 설정

18
locales/zh-Hans.yml
View File

@@ -44,13 +44,6 @@ main_page:
# 在你的默认浏览器上打开了VRCT文档,有着关于VRCT的使用方法
# 其他问题、请求、查询等请通过文档底部的链接或X (Twitter) 联系我们！
update_available: 有新版本可供使用！
update_software_desc: |-
下载新版本并自动启动
会花少许时间,现在更新吗?
deny_update_software: 稍后再说
accept_update_software: 更新后自动启动
updating: 更新中...
state_text_enabled: 启用
state_text_disabled: 停用
@@ -59,6 +52,17 @@ main_page:
title_your_language: 你的语言
title_target_language: 目标语言
update_available: 有新版本可供使用！
updating: 更新中...
update_modal:
update_software_desc: |-
下载新版本并自动启动
会花少许时间,现在更新吗?
deny_update_software: 稍后再说
accept_update_software: 更新后自动启动
config_page:
version: 版本 {{version}}
# config_title: 设定

19
locales/zh-Hant.yml
View File

@@ -45,14 +45,6 @@ main_page:
# 已在瀏覽器中打開VRCT文件頁面。
# 如有任何問題、請求或查詢，請通過文件頁面底部的連結、「聯絡表單」或 X (Twitter) 聯絡我們！
update_available: 有新版本可供使用！
update_software_desc: |-
下載新版本並自動更新 VRCT。
會花一些時間，現在更新嗎？
deny_update_software: 稍後再說
accept_update_software: 更新
updating: 正在更新...
state_text_enabled: 啟用
state_text_disabled: 停用
@@ -60,6 +52,17 @@ main_page:
title_your_language: 選擇你的語言
title_target_language: 選擇目標語言
update_available: 有新版本可供使用！
updating: 正在更新...
update_modal:
update_software_desc: |-
下載新版本並自動更新 VRCT。
會花一些時間，現在更新嗎？
deny_update_software: 稍後再說
accept_update_software: 更新
config_page:
version: 版本 {{version}}
# config_title: 設定

21
src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx
View File

@@ -15,6 +15,7 @@ import {
import OpenFolderSvg from "@images/open_folder.svg?react";
import HelpSvg from "@images/help.svg?react";
export const AdvancedSettings = () => {
return (
@@ -22,6 +23,7 @@ export const AdvancedSettings = () => {
<OscIpAddressContainer />
<OscPortContainer />
<OpenConfigFolderContainer />
<OpenSwitchComputeDeviceModalContainer />
</>
);
};
@@ -93,3 +95,22 @@ const OpenConfigFolderContainer = () => {
</>
);
};
import { useStore_OpenedQuickSetting } from "@store";
const OpenSwitchComputeDeviceModalContainer = () => {
const { t } = useTranslation();
const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
const onClickFunction = () => {
updateOpenedQuickSetting("switch_compute_device");
};
return (
<>
<ActionButtonContainer
label={t("config_page.advanced_settings.switch_compute_device.label")}
IconComponent={HelpSvg}
onclickFunction={onClickFunction}
/>
</>
);
};

3
src-ui/app/modal_controller/ModalController.jsx
View File

@@ -2,6 +2,7 @@ import styles from "./ModalController.module.scss";
import { useStore_OpenedQuickSetting } from "@store";
import { Vr, VrcMicMuteSyncContainer } from "@setting_box";
import { UpdateModal } from "./update_modal/UpdateModal";
import { SwitchComputeDeviceModal } from "./switch_compute_device_modal/SwitchComputeDeviceModal";
export const ModalController = () => {
const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
if (currentOpenedQuickSetting.data === "") return null;
@@ -25,6 +26,8 @@ const QuickSettingsController = () => {
return <VrcMicMuteSyncContainer />;
case "update_software":
return <UpdateModal />;
case "switch_compute_device":
return <SwitchComputeDeviceModal />;
default:
return null;
}

47
src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.jsx Normal file
View File

@@ -0,0 +1,47 @@
import styles from "./SwitchComputeDeviceModal.module.scss";
import { useTranslation } from "react-i18next";
import { useStore_OpenedQuickSetting } from "@store";
import { useComputeMode, useUpdateSoftware } from "@logics_common";
import { useIsSoftwareUpdating } from "@logics_common";
export const SwitchComputeDeviceModal = () => {
const { t } = useTranslation();
const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
const { updateSoftware, updateSoftware_CUDA } = useUpdateSoftware();
const { updateIsSoftwareUpdating } = useIsSoftwareUpdating();
const { currentComputeMode } = useComputeMode();
const is_cpu_version = currentComputeMode.data === "cpu";
const switch_compute_device_desc = is_cpu_version
? t("switch_compute_device_modal.switch_to_cuda_desc")
: t("switch_compute_device_modal.switch_to_cpu_desc");
const accept_button_label = is_cpu_version
? t("switch_compute_device_modal.switch_to_cuda_button") // to CUDA
: t("switch_compute_device_modal.switch_to_cpu_button"); // to CPU
const onClickUpdateSoftware = () => {
updateIsSoftwareUpdating(true);
if (is_cpu_version === true) {
updateSoftware_CUDA();
} else {
updateSoftware();
}
};
return (
<div className={styles.container}>
<p className={styles.label}>{switch_compute_device_desc}</p>
<div className={styles.button_wrapper}>
<button className={styles.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("switch_compute_device_modal.close_modal")}</button>
<button className={styles.accept_button} onClick={onClickUpdateSoftware}>
{accept_button_label}
<p className={styles.restart_desc}>{t("switch_compute_device_modal.restart_desc")}</p>
</button>
</div>
</div>
);
};

69
src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.module.scss Normal file
View File

@@ -0,0 +1,69 @@
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2.4rem;
}
.label {
font-size: 2rem;
max-width: 48rem;
text-align: center;
color: var(--dark_basic_text_color);
}
.button_wrapper {
display: flex;
width: 100%;
gap: 2rem;
max-width: 48rem;
justify-content: space-between;
}
.deny_button, .accept_button {
font-size: 1.6rem;
padding: 1rem;
min-width: 10rem;
flex: 1;
// max-width: 20rem;
text-align: center;
border-radius: 0.4rem;
white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
color: var(--dark_basic_text_color);
}
.accept_button {
background-color: var(--primary_550_color);
position: relative;
&:hover {
background-color: var(--primary_450_color);
}
&:active {
background-color: var(--primary_600_color);
}
}
.deny_button {
background-color: var(--dark_750_color);
&:hover {
background-color: var(--dark_700_color);
}
&:active {
background-color: var(--dark_800_color);
}
}
.restart_desc {
position: absolute;
top: 100%;
left: 50%;
margin-top: 1rem;
transform: translate(-50%);
color: var(--dark_basic_text_color);
font-size: 1.4rem;
width: max-content;
pointer-events: none;
}

18
src-ui/app/modal_controller/update_modal/UpdateModal.jsx
View File

@@ -1,7 +1,7 @@
import styles from "./UpdateModal.module.scss";
import { useTranslation } from "react-i18next";
import { useStore_OpenedQuickSetting } from "@store";
import { useUpdateSoftware } from "@logics_common";
import { useComputeMode, useUpdateSoftware } from "@logics_common";
import { useIsSoftwareUpdating } from "@logics_common";
export const UpdateModal = () => {
@@ -9,18 +9,26 @@ export const UpdateModal = () => {
const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
const { updateSoftware } = useUpdateSoftware();
const { updateIsSoftwareUpdating } = useIsSoftwareUpdating();
const { currentComputeMode } = useComputeMode();
const is_cpu_version = currentComputeMode.data === "cpu";
const onClickUpdateSoftware = () => {
updateIsSoftwareUpdating(true);
updateSoftware();
// Update to the same as now compute device
if (is_cpu_version === true) {
updateSoftware();
} else {
updateSoftware_CUDA();
}
};
return (
<div className={styles.container}>
<p className={styles.label}>{t("main_page.update_software_desc")}</p>
<p className={styles.label}>{t("update_modal.update_software_desc")}</p>
<div className={styles.button_wrapper}>
<button className={styles.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("main_page.deny_update_software")}</button>
<button className={styles.accept_button} onClick={onClickUpdateSoftware}>{t("main_page.accept_update_software")}</button>
<button className={styles.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("update_modal.deny_update_software")}</button>
<button className={styles.accept_button} onClick={onClickUpdateSoftware}>{t("update_modal.accept_update_software")}</button>
</div>
</div>
);

2
src-ui/app/updating_component/UpdatingComponent.jsx
View File

@@ -16,7 +16,7 @@ export const UpdatingComponent = () => {
color: "var(--primary_300_color)",
}}/>
</div>
<p className={styles.label}>{t("main_page.confirmation_message.updating")}</p>
<p className={styles.label}>{t("main_page.updating")}</p>
</div>
);
};

5
src-ui/logics/common/useUpdateSoftware.js
View File

@@ -6,7 +6,12 @@ export const useUpdateSoftware = () => {
asyncStdoutToPython("/run/update_software");
};
const updateSoftware_CUDA = () => {
asyncStdoutToPython("/run/update_cuda_software");
};
return {
updateSoftware,
updateSoftware_CUDA,
};
};