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

[Update] Change the design. Update/Switch CPU/GPU version.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-20 19:05:30 +09:00
parent 5a498fc98c
commit 798a4a87fc
8 changed files with 181 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
locales/en.yml
View File

@@ -59,19 +59,15 @@ main_page:
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:
cpu_desc: Use CPU only as the compute device
cuda_desc: Selectable between CPU and GPU as compute devices
cuda_disk_space_desc: Requires approximately {{size}} of disk space
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.
download_latest_and_restart: |-
The latest version will be downloaded,
and the app will automatically restart.
is_latest_version_already: Already using the latest version
is_current_compute_device: Currently using this version
config_page:
version: version {{version}}

24
locales/ja.yml
View File

@@ -58,23 +58,15 @@ main_page:
updating: アップデート中...
update_modal:
update_software_desc: |-
新しいバージョンをダウンロードしてアプリを再起動します。
少し時間がかかります。今すぐ行いますか？
deny_update_software: 後でする
accept_update_software: アップデートして再起動
switch_compute_device_modal:
cpu_desc: 処理デバイスとしてCPUのみを使用
cuda_desc: 処理デバイスとしてCPUとGPUの両方を選択可能
cuda_disk_space_desc: 約{{size}}のディスク容量が必要
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: アプリが自動的に再起動します。
download_latest_and_restart: |-
最新版がダウンロードされ、
アプリは自動的に再起動します。
is_latest_version_already: すでに最新版を使用中
is_current_compute_device: 現在使用中のバージョン
config_page:
version: バージョン {{version}}

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

@@ -101,7 +101,7 @@ const OpenSwitchComputeDeviceModalContainer = () => {
const { t } = useTranslation();
const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
const onClickFunction = () => {
updateOpenedQuickSetting("switch_compute_device");
updateOpenedQuickSetting("update_software");
};
return (

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

@@ -2,7 +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;
@@ -26,8 +26,6 @@ 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
View File

@@ -1,47 +0,0 @@
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
View File

@@ -1,69 +0,0 @@
.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;
}

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

@@ -2,34 +2,86 @@ import styles from "./UpdateModal.module.scss";
import { useTranslation } from "react-i18next";
import { useStore_OpenedQuickSetting } from "@store";
import { useComputeMode, useUpdateSoftware } from "@logics_common";
import { useIsSoftwareUpdating } from "@logics_common";
import { useIsSoftwareUpdating, useIsSoftwareUpdateAvailable } from "@logics_common";
import clsx from "clsx";
export const UpdateModal = () => {
const { t } = useTranslation();
const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
const { updateSoftware } = useUpdateSoftware();
const { updateSoftware, updateSoftware_CUDA } = useUpdateSoftware();
const { updateIsSoftwareUpdating } = useIsSoftwareUpdating();
const { currentComputeMode } = useComputeMode();
const { currentIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable();
const is_latest_version_already = currentIsSoftwareUpdateAvailable.data === false;
const is_cpu_version = currentComputeMode.data === "cpu";
const onClickUpdateSoftware = () => {
updateIsSoftwareUpdating(true);
// Update to the same as now compute device
if (is_cpu_version === true) {
updateSoftware();
} else {
}
const onClickUpdateSoftware_CUDA = () => {
updateIsSoftwareUpdating(true);
updateSoftware_CUDA();
}
};
const cpu_accept_button_class_name = clsx(styles.accept_button, {
[styles.current_compute_version]: is_cpu_version,
[styles.is_latest_version_already]: is_latest_version_already,
})
const cuda_accept_button_class_name = clsx(styles.accept_button, {
[styles.current_compute_version]: !is_cpu_version,
[styles.is_latest_version_already]: is_latest_version_already,
})
return (
<div className={styles.container}>
<p className={styles.label}>{t("update_modal.update_software_desc")}</p>
<div className={styles.wrapper}>
<div className={styles.update_section}>
<div className={styles.cpu_section}>
<div className={styles.button_wrapper}>
<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>
<button className={cpu_accept_button_class_name} onClick={onClickUpdateSoftware}>CPU</button>
{is_cpu_version ? <CurrentVersionLabel is_latest_version_already={is_latest_version_already} /> : null}
</div>
<div>
<VersionDescComponent desc={t("update_modal.cpu_desc")} />
</div>
</div>
<div className={styles.cuda_section}>
<div className={styles.button_wrapper}>
<button className={cuda_accept_button_class_name} onClick={onClickUpdateSoftware_CUDA}>CUDA (GPU)</button>
{!is_cpu_version ? <CurrentVersionLabel is_latest_version_already={is_latest_version_already} is_cuda={true}/> : null}
</div>
<div>
<VersionDescComponent desc={t("update_modal.cuda_desc")} />
<VersionDescComponent desc={t("update_modal.cuda_disk_space_desc", {size: "5GB"})} />
</div>
</div>
<p className={styles.update_desc}>{t("update_modal.download_latest_and_restart")}</p>
</div>
<div className={styles.button_wrapper}>
<button className={styles.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("update_modal.close_modal")}</button>
</div>
</div>
</div>
);
};
const VersionDescComponent = (props) => {
return (
<div className={styles.version_desc_wrapper}>
<div className={styles.version_desc_point}></div>
<p className={styles.version_desc}>{props.desc}</p>
</div>
);
};
const CurrentVersionLabel = (props) => {
const { t } = useTranslation();
if (props.is_latest_version_already) {
return <p className={clsx(styles.current_version_label, {[styles.is_cuda]: props.is_cuda})}>{t("update_modal.is_latest_version_already")}</p>;
}
return <p className={clsx(styles.current_version_label, {[styles.is_cuda]: props.is_cuda})}>{t("update_modal.is_current_compute_device")}</p>;
};

107
src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
View File

@@ -8,18 +8,52 @@
gap: 2.4rem;
}
.label {
font-size: 2rem;
max-width: 48rem;
text-align: center;
color: var(--dark_basic_text_color);
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8rem;
}
.update_section {
border: 0.1rem solid var(--dark_600_color);
border-radius: 0.4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 4rem;
padding: 6rem 2rem;
position: relative;
}
.update_desc {
position: absolute;
top: 100%;
transform: translateY(-50%);
font-size: 1.4rem;
background-color: var(--dark_900_color);
padding: 0 2.8rem;
text-align: center;
font-weight: 400;
}
.cpu_section, .cuda_section {
width: 100%;
display: flex;
justify-content: start;
align-items: center;
gap: 3rem;
}
.button_wrapper {
display: flex;
width: 100%;
max-width: 48rem;
width: 16rem;
justify-content: space-between;
position: relative;
}
.deny_button, .accept_button {
font-size: 1.6rem;
padding: 1rem;
@@ -35,17 +69,35 @@
}
.accept_button {
background-color: var(--primary_550_color);
background-color: var(--primary_700_color);
position: relative;
overflow: visible;
&:hover {
background-color: var(--primary_450_color);
}
&:active {
background-color: var(--primary_600_color);
}
&.current_compute_version {
&::after {
content: "";
position: absolute;
top: -1rem;
right: -1rem;
bottom: -1rem;
left: -1rem;
border: 0.1rem solid var(--primary_400_color);
border-radius: 0.4rem;
}
&.is_latest_version_already {
background-color: var(--dark_800_color);
pointer-events: none;
}
}
}
.deny_button {
background-color: var(--dark_750_color);
background-color: var(--dark_800_color);
&:hover {
background-color: var(--dark_700_color);
}
@@ -53,3 +105,40 @@
background-color: var(--dark_800_color);
}
}
.current_version_label {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin: 0 0 0.4rem 0;
font-size: 1.2rem;
width: max-content;
height: max-content;
background-color: var(--dark_900_color);
padding: 0 1rem;
font-weight: 300;
&.is_cuda {
top: 100%;
margin: 0.4rem 0 0 0;
}
}
.version_desc_wrapper {
display: flex;
align-items: center;
gap: 0.6rem;
}
.version_desc_point {
background-color: var(--dark_basic_text_color);
width: 0.3rem;
border-radius: 50%;
aspect-ratio: 1 / 1;
}
.version_desc {
font-size: 1.4rem;
max-width: 48rem;
// text-align: center;
font-weight: 300;
color: var(--dark_basic_text_color);
}