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/6] [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/6] [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/6] [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/6] [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 From 5673225ecc4dbda46cb0589a016b63e0faea08b3 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Tue, 31 Dec 2024 13:15:41 +0900 Subject: [PATCH 5/6] [Update] Starting up: Add animation more to announcements button. --- .../app/splash_component/SplashComponent.jsx | 11 +++-- .../SplashComponent.module.scss | 49 ++++++++++++------- 2 files changed, 39 insertions(+), 21 deletions(-) diff --git a/src-ui/app/splash_component/SplashComponent.jsx b/src-ui/app/splash_component/SplashComponent.jsx index e5e945c5..9008cc6b 100644 --- a/src-ui/app/splash_component/SplashComponent.jsx +++ b/src-ui/app/splash_component/SplashComponent.jsx @@ -18,7 +18,7 @@ export const SplashComponent = () => { ); }; -const SHOW_MEGAPHONE_TIME = 1000; +const SHOW_MEGAPHONE_TIME = 500; const AnnouncementsContainer = () => { const labels = ["Check the Latest Status", "最新の状況を確認"]; @@ -33,7 +33,7 @@ const AnnouncementsContainer = () => { const labelsTimeout = setTimeout(() => { setIsLabelsActive(true); - }, SHOW_MEGAPHONE_TIME + 500); + }, SHOW_MEGAPHONE_TIME + 15000); let labelInterval; if (is_labels_active) { @@ -52,14 +52,17 @@ const AnnouncementsContainer = () => { return ( diff --git a/src-ui/app/splash_component/SplashComponent.module.scss b/src-ui/app/splash_component/SplashComponent.module.scss index b38573fa..489f338a 100644 --- a/src-ui/app/splash_component/SplashComponent.module.scss +++ b/src-ui/app/splash_component/SplashComponent.module.scss @@ -7,22 +7,24 @@ .announcements_button_wrapper { position: absolute; - top: 16px; - left: 20px; + top: 10px; + left: 10px; opacity: 0; - transition: opacity 0.3s ease; + transition: opacity 0.3s ease, border 0.3s ease; + padding: 4px 8px; + border-radius: 4px; &.is_shown { opacity: 1; } -} -.announcements_button { - border: 1px solid var(--dark_700_color); - display: flex; - justify-content: center; - align-items: center; - gap: 6px; - padding: 4px 8px; - border-radius: 4px; + &.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_825_color); & .announcements_label { @@ -35,20 +37,33 @@ &: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); - opacity: 0; - transition: opacity 0.3s ease; - &.is_labels_active { - opacity: 1; - } + display: none; + transition: all 0.3s ease; } .announcements_link_svg { width: 20px; + color: var(--dark_600_color); } From 70014cbdf172dff177e915735339016a1217d134 Mon Sep 17 00:00:00 2001 From: misyaguziya <53165965+misyaguziya@users.noreply.github.com> Date: Tue, 31 Dec 2024 14:21:35 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=90=9B[bugfix]=20Installer=20:=20AI?= =?UTF-8?q?=E3=83=A2=E3=83=87=E3=83=AB=E3=81=AE=E9=81=B8=E6=8A=9E=E3=82=92?= =?UTF-8?q?=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src-tauri/nsis/template.nsi | 109 +----------------------------------- 1 file changed, 1 insertion(+), 108 deletions(-) diff --git a/src-tauri/nsis/template.nsi b/src-tauri/nsis/template.nsi index e4578d0c..d4d22429 100644 --- a/src-tauri/nsis/template.nsi +++ b/src-tauri/nsis/template.nsi @@ -170,113 +170,6 @@ Function PageLeaveChooseLanguage ${EndIf} FunctionEnd -; 4-2. Page Download Translate Model Weight -Var DropListCTranslate2DownloadWeightType -Var SelectedCTranslate2DownloadWeightType -Var DialogTranslate -Page custom PageTranslate PageLeaveTranslate -Function PageTranslate - !insertmacro MUI_HEADER_TEXT "Initial Settings" "Set to use the translation function (can be changed later)." - nsDialogs::Create 1018 - Pop $DialogTranslate - - ${If} $DialogTranslate == error - Abort - ${EndIf} - - ${NSD_CreateLabel} 0 21u 33% 12u "Select AI Model Size" - ${NSD_CreateDropList} 33% 20u 40% 12u "" - Pop $DropListCTranslate2DownloadWeightType - ${NSD_CB_AddString} $DropListCTranslate2DownloadWeightType "Basic model(418MB)" - ${NSD_CB_AddString} $DropListCTranslate2DownloadWeightType "High accuracy model(1.3GB)" - ${NSD_CB_SelectString} $DropListCTranslate2DownloadWeightType "Basic model(418MB)" - StrCpy $SelectedCTranslate2DownloadWeightType "small" - nsDialogs::Show -FunctionEnd - -Function PageLeaveTranslate - ${NSD_GetText} $CheckboxCTranslate2DownloadWeight $0 - ${If} "Basic model(418MB)" == $0 - StrCpy $SelectedCTranslate2DownloadWeightType "small" - ${ElseIf} "High accuracy model(1.3GB)" == $0 - StrCpy $SelectedCTranslate2DownloadWeightType "large" - ${EndIf} -FunctionEnd - -; 4-3. Page Download Transcript Model Weight -Var DropLListTranscriptEngines -Var SelectedTranscriptEngine -Var DropListWhisperDownloadWeightType -Var SelectedWhisperDownloadWeightType -Var DialogTranscript -Page custom PageTranscript PageLeaveTranscript -Function PageTranscript - !insertmacro MUI_HEADER_TEXT "Initial Settings" "Set to use the transcript engine (can be changed later)." - nsDialogs::Create 1018 - Pop $DialogTranscript - - ${If} $DialogTranscript == error - Abort - ${EndIf} - - ${NSD_CreateLabel} 0 21u 33% 12u "Select Transcript Engine" - ${NSD_CreateDropList} 33% 20u 33% 12u "" - Pop $DropLListTranscriptEngines - ${NSD_CB_AddString} $DropLListTranscriptEngines "Google" - ${NSD_CB_AddString} $DropLListTranscriptEngines "Wishper" - ${NSD_CB_SelectString} $DropLListTranscriptEngines "Google" - ${NSD_CreateLabel} 0 52u 33% 12u "Select AI Model Size" - ${NSD_CreateDropList} 33% 50u 40% 12u "" - Pop $DropListWhisperDownloadWeightType - ${NSD_CB_AddString} $DropListWhisperDownloadWeightType "tiny model(74.5MB)" - ${NSD_CB_AddString} $DropListWhisperDownloadWeightType "base model(141MB)" - ${NSD_CB_AddString} $DropListWhisperDownloadWeightType "small model(463MB)" - ${NSD_CB_AddString} $DropListWhisperDownloadWeightType "medium model(1.42GB)" - ${NSD_CB_AddString} $DropListWhisperDownloadWeightType "large-v1 model(2.87GB)" - ${NSD_CB_AddString} $DropListWhisperDownloadWeightType "large-v2 model(2.87GB)" - ${NSD_CB_AddString} $DropListWhisperDownloadWeightType "large-v3 model(2.87GB)" - ${NSD_CB_SelectString} $DropListWhisperDownloadWeightType "base model(141MB)" - - StrCpy $SelectedWhisperDownloadWeightType "base" - EnableWindow $DropListWhisperDownloadWeightType 0 - ${NSD_OnChange} $DropLListTranscriptEngines OnDropListWishperDownloadWeightClick - nsDialogs::Show -FunctionEnd - -Function PageLeaveTranscript - ${NSD_GetText} $DropLListTranscriptEngines $0 - ${If} $0 == "Google" - StrCpy $SelectedTranscriptEngine "Google" - ${Else} - StrCpy $SelectedTranscriptEngine "Wishper" - ${EndIf} - ${NSD_GetText} $DropListWhisperDownloadWeightType $0 - ${If} "tiny model(74.5MB)" == $0 - StrCpy $SelectedWhisperDownloadWeightType "tiny" - ${ElseIf} "base model(141MB)" == $0 - StrCpy $SelectedWhisperDownloadWeightType "base" - ${ElseIf} "small model(463MB)" == $0 - StrCpy $SelectedWhisperDownloadWeightType "small" - ${ElseIf} "medium model(1.42GB)" == $0 - StrCpy $SelectedWhisperDownloadWeightType "medium" - ${ElseIf} "large-v1 model(2.87GB)" == $0 - StrCpy $SelectedWhisperDownloadWeightType "large-v1" - ${ElseIf} "large-v2 model(2.87GB)" == $0 - StrCpy $SelectedWhisperDownloadWeightType "large-v2" - ${ElseIf} "large-v3 model(2.87GB)" == $0 - StrCpy $SelectedWhisperDownloadWeightType "large-v3" - ${EndIf} -FunctionEnd - -Function OnDropListWishperDownloadWeightClick - ${NSD_GetText} $DropLListTranscriptEngines $0 - ${If} $0 == "Wishper" - EnableWindow $DropListWhisperDownloadWeightType 1 - ${Else} - EnableWindow $DropListWhisperDownloadWeightType 0 - ${EndIf} -FunctionEnd - !insertmacro MUI_PAGE_COMPONENTS ; 4-4. Custom page to ask user if he wants to reinstall/uninstall @@ -796,7 +689,7 @@ Function .onInstSuccess nsis_tauri_utils::RunAsUser "$INSTDIR\${MAINBINARYNAME}.exe" "$R0" run_done: - StrCpy $1 '{"UI_LANGUAGE": "$SelectedLangage", "SELECTED_TRANSCRIPTION_ENGINE": "$SelectedTranscriptEngine", "CTRANSLATE2_WEIGHT_TYPE": "$SelectedCTranslate2DownloadWeightType", "WHISPER_WEIGHT_TYPE": "$SelectedWhisperDownloadWeightType"}' + StrCpy $1 '{"UI_LANGUAGE": "$SelectedLangage"}' FileOpen $0 "$INSTDIR\config.json" w FileWrite $0 $1 FileClose $0