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

Merge branch 'ui' into develop

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-30 22:42:39 +09:00
parent 3edca119dd 9ee1275162
commit dfc9b66059
11 changed files with 140 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src-ui/app/_index_css/root.css
View File

@@ -42,4 +42,9 @@ svg {
p {
white-space: pre-wrap;
}
img {
user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
}

27
src-ui/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx Normal file
View File

@@ -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 (
<div className={styles.container}>
<DropdownMenu
{...props}
is_disabled={true}
/>
<ActionButton
{...props}
IconComponent={HelpSvg}
onclickFunction={onClickFunction}
/>
</div>
);
};

6
src-ui/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.module.scss Normal file
View File

@@ -0,0 +1,6 @@
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
}

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

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

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

@@ -12,6 +12,7 @@ import {
OpenWebpage_DeeplAuthKey,
DeeplAuthKey,
ActionButton,
ComputeDevice,
WordFilter,
WordFilterListToggleComponent,
DownloadModels,
@@ -99,6 +100,10 @@ export const ActionButtonContainer = (props) => (
<CommonContainer Component={ActionButton} {...props} add_break_point={false}/>
);
export const ComputeDeviceContainer = (props) => (
<CommonContainer Component={ComputeDevice} {...props} />
);
export const WordFilterContainer = (props) => (
<div className={styles.word_filter_container}>
<div className={styles.word_filter_switch_section}>

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

@@ -96,6 +96,7 @@ const OpenConfigFolderContainer = () => {
);
};
// Duplicate
import { useStore_OpenedQuickSetting } from "@store";
const OpenSwitchComputeDeviceModalContainer = () => {
const { t } = useTranslation();

17
src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
View File

@@ -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 (
<ComputeDeviceContainer
label={t("config_page.transcription.whisper_compute_device.label")}
selected_id={target_index}
list={list_for_ui}
selectFunction={selectFunction}
state={currentSelectedWhisperComputeDevice.state}
/>
)
}
return (
<DropdownMenuContainer
dropdown_id="whisper_compute_device"

17
src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx
View File

@@ -15,6 +15,7 @@ import {
DownloadModelsContainer,
DeeplAuthKeyContainer,
DropdownMenuContainer,
ComputeDeviceContainer,
} from "../_templates/Templates";
export const Translation = () => {
@@ -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 (
<ComputeDeviceContainer
label={t("config_page.translation.ctranslate2_compute_device.label")}
selected_id={target_index}
list={list_for_ui}
selectFunction={selectFunction}
state={currentSelectedCTranslate2ComputeDevice.state}
/>
)
}
return (
<DropdownMenuContainer
dropdown_id="ctranslate2_compute_device"

8
src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx
View File

@@ -15,10 +15,10 @@ export const RightSideComponents = () => {
<OpenOverlayQuickSetting />
<SoftwareUpdateAvailableButton />
<a
className={styles.help_and_info_button}
href="https://mzsoftware.notion.site/VRCT-Documents-be79b7a165f64442ad8f326d86c22246"
target="_blank"
rel="noreferrer"
className={styles.help_and_info_button}
href="https://docs.google.com/spreadsheets/d/1_L5i-1U6PB1dnaPPTE_5uKMfqOpkLziPyRkiMLi4mqU/edit?usp=sharing"
target="_blank"
rel="noreferrer"
>
<HelpSvg className={styles.help_svg} />
</a>

43
src-ui/app/splash_component/SplashComponent.jsx
View File

@@ -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 (
<a
className={clsx(styles.announcements_button_wrapper, { [styles.is_shown]: is_shown })}
href="https://docs.google.com/spreadsheets/d/1_L5i-1U6PB1dnaPPTE_5uKMfqOpkLziPyRkiMLi4mqU/edit?usp=sharing"
target="_blank"
rel="noreferrer"
>
<button className={styles.announcements_button}>
<MegaphoneSvg className={styles.announcements_link_svg} />
<p className={styles.announcements_label}>{labels[currentLabelIndex]}</p>
<p className={clsx(styles.announcements_label, { [styles.is_labels_active]: is_labels_active })}>
{labels[currentLabelIndex]}
</p>
</button>
</a>
);
};
const CloseButtonContainer = () => {
const close = () => {
appWindow.close();

27
src-ui/app/splash_component/SplashComponent.module.scss
View File

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