From c69cce00b6fc8ac6803057da921341b28030ae74 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Mon, 30 Dec 2024 16:23:30 +0900 Subject: [PATCH 1/4] [Update] Config Page: Compute Device. Add button that can open the software version updater. --- .../compute_device/ComputeDevice.jsx | 27 +++++++++++++++++++ .../compute_device/ComputeDevice.module.scss | 6 +++++ .../setting_box/_components/index.js | 1 + .../setting_box/_templates/Templates.jsx | 5 ++++ .../advanced_settings/AdvancedSettings.jsx | 1 + .../transcription/Transcription.jsx | 17 ++++++++++++ .../setting_box/translation/Translation.jsx | 17 ++++++++++++ 7 files changed, 74 insertions(+) create mode 100644 src-ui/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx create mode 100644 src-ui/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.module.scss diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx new file mode 100644 index 00000000..d077eba5 --- /dev/null +++ b/src-ui/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx @@ -0,0 +1,27 @@ +import styles from "./ComputeDevice.module.scss"; +import { DropdownMenu } from "../dropdown_menu/DropdownMenu"; +import { ActionButton } from "../action_button/ActionButton"; +import HelpSvg from "@images/help.svg?react"; +import { useStore_OpenedQuickSetting } from "@store" + +export const ComputeDevice = (props) => { + const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); + + const onClickFunction = () => { + updateOpenedQuickSetting("update_software"); + }; + + return ( +
+ + +
+ ); +}; \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.module.scss new file mode 100644 index 00000000..7021be8e --- /dev/null +++ b/src-ui/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.module.scss @@ -0,0 +1,6 @@ +.container { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; +} \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/index.js b/src-ui/app/config_page/setting_section/setting_box/_components/index.js index 7ead1049..20cc6fe1 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/index.js +++ b/src-ui/app/config_page/setting_section/setting_box/_components/index.js @@ -1,4 +1,5 @@ export { ActionButton } from "./action_button/ActionButton"; +export { ComputeDevice } from "./compute_device/ComputeDevice"; export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey"; export { DropdownMenu } from "./dropdown_menu/DropdownMenu"; export { Entry } from "./entry/Entry"; diff --git a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx index 5f42276f..0afb017b 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx @@ -12,6 +12,7 @@ import { OpenWebpage_DeeplAuthKey, DeeplAuthKey, ActionButton, + ComputeDevice, WordFilter, WordFilterListToggleComponent, DownloadModels, @@ -99,6 +100,10 @@ export const ActionButtonContainer = (props) => ( ); +export const ComputeDeviceContainer = (props) => ( + +); + export const WordFilterContainer = (props) => (
diff --git a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx index 9c1ab116..94dcd358 100644 --- a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx @@ -96,6 +96,7 @@ const OpenConfigFolderContainer = () => { ); }; +// Duplicate import { useStore_OpenedQuickSetting } from "@store"; const OpenSwitchComputeDeviceModalContainer = () => { const { t } = useTranslation(); diff --git a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx index 334ed0de..e7294a18 100644 --- a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx @@ -26,6 +26,7 @@ import { DownloadModelsContainer, RadioButtonContainer, DropdownMenuContainer, + ComputeDeviceContainer, } from "../_templates/Templates"; import { @@ -326,6 +327,9 @@ const WhisperWeightType_Box = () => { ); }; + +// Duplicate +import { useComputeMode } from "@logics_common"; const WhisperComputeDevice_Box = () => { const { t } = useTranslation(); const { currentSelectedWhisperComputeDevice, setSelectedWhisperComputeDevice } = useSelectedWhisperComputeDevice(); @@ -341,6 +345,19 @@ const WhisperComputeDevice_Box = () => { const target_index = findKeyByDeviceValue(currentSelectableWhisperComputeDeviceList.data, currentSelectedWhisperComputeDevice.data); + const { currentComputeMode } = useComputeMode(); + if (currentComputeMode.data === "cpu") { + return ( + + ) + } + return ( { @@ -70,6 +71,8 @@ const CTranslate2WeightType_Box = () => { ); }; +// Duplicate +import { useComputeMode } from "@logics_common"; const CTranslation2ComputeDevice_Box = () => { const { t } = useTranslation(); const { currentSelectedCTranslate2ComputeDevice, setSelectedCTranslate2ComputeDevice } = useSelectedCTranslate2ComputeDevice(); @@ -84,6 +87,20 @@ const CTranslation2ComputeDevice_Box = () => { const target_index = findKeyByDeviceValue(currentSelectableCTranslate2ComputeDeviceList.data, currentSelectedCTranslate2ComputeDevice.data); + + const { currentComputeMode } = useComputeMode(); + if (currentComputeMode.data === "cpu") { + return ( + + ) + } + return ( Date: Mon, 30 Dec 2024 19:11:35 +0900 Subject: [PATCH 2/4] [Update] Starting up: Adjust announcement button's design and animation. --- .../app/splash_component/SplashComponent.jsx | 43 +++++++++++++++---- .../SplashComponent.module.scss | 27 ++++++++++-- 2 files changed, 57 insertions(+), 13 deletions(-) diff --git a/src-ui/app/splash_component/SplashComponent.jsx b/src-ui/app/splash_component/SplashComponent.jsx index 05b2307c..e5e945c5 100644 --- a/src-ui/app/splash_component/SplashComponent.jsx +++ b/src-ui/app/splash_component/SplashComponent.jsx @@ -5,6 +5,7 @@ import { DownloadModelsContainer } from "./download_models_container/DownloadMod import MegaphoneSvg from "@images/megaphone.svg?react"; import XMarkSvg from "@images/cancel.svg?react"; import { appWindow } from "@tauri-apps/api/window"; +import clsx from "clsx"; export const SplashComponent = () => { return ( @@ -17,33 +18,57 @@ export const SplashComponent = () => { ); }; -const AnnouncementsContainer = () => { - const labels = ["VRCT Real-Time Announcements", "VRCTからのお知らせ"]; - const [currentLabelIndex, setCurrentLabelIndex] = useState(0); +const SHOW_MEGAPHONE_TIME = 1000; +const AnnouncementsContainer = () => { + const labels = ["Check the Latest Status", "最新の状況を確認"]; + const [is_shown, setIsShown] = useState(0); + const [currentLabelIndex, setCurrentLabelIndex] = useState(0); + const [is_labels_active, setIsLabelsActive] = useState(false); useEffect(() => { - const labelInterval = setInterval(() => { - setCurrentLabelIndex((prevIndex) => (prevIndex + 1) % labels.length); - }, 6000); - return () => clearInterval(labelInterval); - }, [labels.length]); + const showTimeout = setTimeout(() => { + setIsShown(true); + }, SHOW_MEGAPHONE_TIME); + + const labelsTimeout = setTimeout(() => { + setIsLabelsActive(true); + }, SHOW_MEGAPHONE_TIME + 500); + + let labelInterval; + if (is_labels_active) { + labelInterval = setInterval(() => { + setCurrentLabelIndex((prevIndex) => (prevIndex + 1) % labels.length); + }, 4000); + } + + return () => { + clearTimeout(showTimeout); + clearTimeout(labelsTimeout); + if (labelInterval) clearInterval(labelInterval); + }; + }, [is_labels_active, labels.length]); + return ( ); }; + const CloseButtonContainer = () => { const close = () => { appWindow.close(); diff --git a/src-ui/app/splash_component/SplashComponent.module.scss b/src-ui/app/splash_component/SplashComponent.module.scss index 6ef953b7..b38573fa 100644 --- a/src-ui/app/splash_component/SplashComponent.module.scss +++ b/src-ui/app/splash_component/SplashComponent.module.scss @@ -5,19 +5,32 @@ position: relative; } -.announcements_button { +.announcements_button_wrapper { position: absolute; top: 16px; left: 20px; - border: 1px solid var(--dark_600_color); + opacity: 0; + transition: opacity 0.3s ease; + &.is_shown { + opacity: 1; + } +} +.announcements_button { + border: 1px solid var(--dark_700_color); display: flex; justify-content: center; align-items: center; gap: 6px; - padding: 6px 8px; + padding: 4px 8px; border-radius: 4px; &:hover { - background-color: var(--dark_750_color); + background-color: var(--dark_825_color); + & .announcements_label { + color: var(--dark_basic_text_color); + } + & .announcements_link_svg { + color: var(--primary_300_color); + } } &:active { background-color: var(--dark_850_color); @@ -27,6 +40,12 @@ .announcements_label { font-size: 12px; + color: var(--dark_400_color); + opacity: 0; + transition: opacity 0.3s ease; + &.is_labels_active { + opacity: 1; + } } .announcements_link_svg { width: 20px; From 806e65e85e7a75c9b456f7888ab7995940e77401 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Mon, 30 Dec 2024 19:27:27 +0900 Subject: [PATCH 3/4] [Update] Main Page: Top bar help button: Change the link document to temporary hub(Google sheet). --- .../top_bar/right_side_components/RightSideComponents.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx index a992ef23..995266e2 100644 --- a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx @@ -15,10 +15,10 @@ export const RightSideComponents = () => { From 9ee1275162708ce38eb30a15c6799a052835bd0c Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Mon, 30 Dec 2024 21:28:20 +0900 Subject: [PATCH 4/4] [Update] root.css: Prevent user drag and select images. --- src-ui/app/_index_css/root.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src-ui/app/_index_css/root.css b/src-ui/app/_index_css/root.css index d2391abf..e2bcc6e7 100644 --- a/src-ui/app/_index_css/root.css +++ b/src-ui/app/_index_css/root.css @@ -42,4 +42,9 @@ svg { p { white-space: pre-wrap; +} +img { + user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; } \ No newline at end of file