Merge branch 'ui' into for_webui

locales/en.yml

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

locales/ja.yml

@@ -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バージョンの切り替え

locales/ko.yml

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

locales/zh-Hans.yml

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

locales/zh-Hant.yml

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

src-ui/app/config_page/setting_section/setting_box/_components/checkbox/Checkbox.jsx

@@ -1,24 +0,0 @@
-import styles from "./Checkbox.module.scss";
-
-export const Checkbox = (props) => {
-    return (
-        <div className={styles.checkbox_container}>
-            <label className={styles.checkbox_wrapper} htmlFor={props.checkbox_id}>
-                {(props.state === "pending")
-                    ? <span className={styles.loader}></span>
-                    : <input
-                        type="checkbox"
-                        id={props.checkbox_id}
-                        checked={props.variable.data}
-                        onChange={props.toggleFunction}
-                    />
-                }
-                <span className={styles.cbx}>
-                    <svg viewBox="0 0 12 12">
-                        <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
-                    </svg>
-                </span>
-            </label>
-        </div>
-    );
-};

src-ui/app/config_page/setting_section/setting_box/_components/checkbox/Checkbox.module.scss

@@ -1,60 +0,0 @@
-@import "@scss_mixins";
-
-.checkbox_container {
-    // width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: end;
-    align-items: center;
-}
-
-.checkbox_wrapper {
-    display: inline-block;
-    cursor: pointer;
-    padding: 2rem;
-    position: relative;
-    &:hover {
-        & .cbx {
-            border: var(--primary_600_color) solid 0.2rem;
-        }
-    }
-}
-
-.checkbox_wrapper .cbx {
-    display: block;
-    width: 2.8rem;
-    height: 2.8rem;
-    border-radius: 0.4rem;
-    border: var(--dark_700_color) solid 0.2rem;
-    transition: all 0.15s ease;
-    padding: 0.4rem;
-}
-
-.checkbox_wrapper .cbx svg {
-    fill: none;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke: var(--dark_basic_text_color);
-    stroke-width: 0.2rem;
-    stroke-dasharray: 1.7rem;
-    stroke-dashoffset: 1.7rem;
-}
-
-.checkbox_wrapper input[type="checkbox"] {
-    display: none;
-    visibility: hidden;
-}
-
-.checkbox_wrapper input[type="checkbox"]:checked + .cbx {
-    background-color: var(--primary_600_color);
-    border: none;
-}
-
-.checkbox_wrapper input[type="checkbox"]:checked + .cbx svg {
-    stroke-dashoffset: 0;
-    transition: all 0.15s ease;
-}
-
-.loader {
-    @include loader(2rem, 0.2rem, right, -2rem);
-}

src-ui/app/config_page/setting_section/setting_box/_components/index.js

@@ -1,5 +1,4 @@
 export { ActionButton } from "./action_button/ActionButton";
-export { Checkbox } from "./checkbox/Checkbox";
 export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
 export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
 export { Entry } from "./entry/Entry";

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx

@@ -6,7 +6,6 @@ import {
     LabelComponent,
     DropdownMenu,
     Slider,
-    Checkbox,
     SwitchBox,
     Entry,
     RadioButton,
@@ -17,6 +16,7 @@ import {
     WordFilterListToggleComponent,
     DownloadModels,
 } from "../_components/";
+import { Checkbox } from "@common_components";
 
 const LabeledContainer = ({ children, label, desc, custom_class_name }) => (
     <div className={clsx(styles.container, custom_class_name)}>

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

@@ -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}
+            />
+        </>
+    );
+};

src-ui/app/config_page/setting_section/setting_box/others/Others.jsx

@@ -17,10 +17,10 @@ import {
 
 import {
     LabelComponent,
-    Checkbox,
     ActionButton,
     SectionLabelComponent,
 } from "../_components/";
+import { Checkbox } from "@common_components";
 
 import OpenFolderSvg from "@images/open_folder.svg?react";
 

src-ui/app/modal_controller/ModalController.jsx

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

src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.jsx

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

src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.module.scss

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

src-ui/app/modal_controller/update_modal/UpdateModal.jsx

@@ -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.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("update_modal.deny_update_software")}</button>
-                <button className={styles.accept_button} onClick={onClickUpdateSoftware}>{t("main_page.accept_update_software")}</button>
+                <button className={styles.accept_button} onClick={onClickUpdateSoftware}>{t("update_modal.accept_update_software")}</button>
             </div>
         </div>
     );

src-ui/app/updating_component/UpdatingComponent.jsx

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

src-ui/common_components/checkbox/Checkbox.jsx

@@ -1,20 +1,23 @@
+import { clsx } from "clsx";
 import styles from "./Checkbox.module.scss";
-
 export const Checkbox = ({
     checkboxId,
     variable,
     toggleFunction,
-    state = "idle",
     size = "2.8rem",
     color = "var(--primary_600_color)",
     borderWidth = "0.2rem",
     padding = "2rem",
 }) => {
 
+    const wrapper_class_names = clsx(styles.checkbox_wrapper, {
+        [styles.is_disabled]: variable.state === "pending",
+    });
+
     return (
         <div className={styles.checkbox_container}>
             <label
-                className={styles.checkbox_wrapper}
+                className={wrapper_class_names}
                 htmlFor={checkboxId}
                 style={{
                     "--checkbox-size": size,
@@ -23,7 +26,7 @@ export const Checkbox = ({
                     "--checkbox-padding": padding,
                 }}
             >
-                {state === "pending" ? (
+                {variable.state === "pending" ? (
                     <span className={styles.loader}></span>
                 ) : (
                     <input

src-ui/common_components/checkbox/Checkbox.module.scss

@@ -18,6 +18,12 @@
             border: var(--checkbox-color, var(--primary_600_color)) solid var(--checkbox-border-width, 0.2rem);
         }
     }
+    &.is_disabled {
+        pointer-events: none;
+        & .cbx {
+            border-color: var(--primary_800_color);
+        }
+    }
 }
 
 .checkbox_wrapper .cbx {

src-ui/logics/common/useUpdateSoftware.js

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