Merge branch 'develop'

2024-12-31 19:40:18 +09:00
parent b032e101e3 a1e2bc2e66
commit 4007731342
12 changed files with 165 additions and 131 deletions
--- 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
--- 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;
 }
--- 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
@@ -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>
+    );
+};
--- 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
@@ -0,0 +1,6 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+}
--- 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";
--- 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) => (
    <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}>
--- 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();
--- 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 (
+            <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"
--- a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx
@@ -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"
--- 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 = () => {
            <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>
--- 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 (
        <a
+            className={clsx(styles.announcements_button_wrapper, {
+                [styles.is_shown]: is_shown,
+                [styles.is_labels_active]: is_labels_active,
+            })}
            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={styles.announcements_label}>
+                    {labels[currentLabelIndex]}
+                </p>
            </button>
        </a>
    );
 };


+
 const CloseButtonContainer = () => {
    const close = () => {
        appWindow.close();
--- 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);
 }