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 (
{
diff --git a/src-ui/app/splash_component/SplashComponent.jsx b/src-ui/app/splash_component/SplashComponent.jsx
index 05b2307c..9008cc6b 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,60 @@ export const SplashComponent = () => {
);
};
-const AnnouncementsContainer = () => {
- const labels = ["VRCT Real-Time Announcements", "VRCTからのお知らせ"];
- const [currentLabelIndex, setCurrentLabelIndex] = useState(0);
+const SHOW_MEGAPHONE_TIME = 500;
+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 + 15000);
+
+ 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..489f338a 100644
--- a/src-ui/app/splash_component/SplashComponent.module.scss
+++ b/src-ui/app/splash_component/SplashComponent.module.scss
@@ -5,31 +5,65 @@
position: relative;
}
-.announcements_button {
+.announcements_button_wrapper {
position: absolute;
- top: 16px;
- left: 20px;
- border: 1px solid var(--dark_600_color);
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 6px;
- padding: 6px 8px;
+ top: 10px;
+ left: 10px;
+ opacity: 0;
+ transition: opacity 0.3s ease, border 0.3s ease;
+ padding: 4px 8px;
border-radius: 4px;
+ &.is_shown {
+ opacity: 1;
+ }
+ &.is_labels_active {
+ & .announcements_label {
+ display: block;
+ animation: appear .3s ease;
+ }
+ & .announcements_link_svg {
+ color: var(--dark_basic_text_color);
+ }
+ }
&: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);
}
+}
+
+@keyframes appear {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+.announcements_button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 8px;
transition: all 0.1s ease;
}
.announcements_label {
font-size: 12px;
+ color: var(--dark_400_color);
+ display: none;
+ transition: all 0.3s ease;
}
.announcements_link_svg {
width: 20px;
+ color: var(--dark_600_color);
}