[Update/Chore] Config Page: Put the selectors 'Compute Device' and 'Compute Type' to the same section.

Rename: UI: CTranslate2/Whisper Compute Type to Translation/Transcription Compute Type.
2025-09-26 17:07:19 +09:00
parent 92f9d645f8
commit 8c5f1b5db2
14 changed files with 402 additions and 208 deletions
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
@@ -53,6 +53,7 @@ const Mic_Container = () => {
        setSelectedMicDevice(selected_data.selected_id);
    };

+    // [Fix me] currentEnableAutoMicSelect.data === "pending"; ?  not currentEnableAutoMicSelect.state === "pending"; ??(.state)
    const is_disabled_selector = currentEnableAutoMicSelect.data === true || currentEnableAutoMicSelect.data === "pending";

    const getLabels = () => {
--- 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
@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
 import { useI18n } from "@useI18n";
 import styles from "./Transcription.module.scss";
-import { updateLabelsById, genNumObjArray } from "@utils";
+import { updateLabelsById, genNumObjArray, arrayToObject } from "@utils";
+import { useStore_IsBreakPoint } from "@store";

 import {
    useTranscription,
@@ -12,11 +13,14 @@ import {
    DownloadModelsContainer,
    RadioButtonContainer,
    DropdownMenuContainer,
-    ComputeDeviceContainer,
    SliderContainer,
+
+    useOnMouseLeaveDropdownMenu,
 } from "../_templates/Templates";

 import {
+    DropdownMenu,
+    LabelComponent,
    SectionLabelComponent,
 } from "../_components/";

@@ -201,7 +205,6 @@ const TranscriptionEngine_Container = () => {
            <SectionLabelComponent label={t("config_page.transcription.section_label_transcription_engines")} />
            <TranscriptionEngine_Box />
            <WhisperWeightType_Box />
-            <WhisperComputeType_Box />
            <TranscriptionComputeDevice_Box />
        </div>
    );
@@ -275,71 +278,76 @@ const WhisperWeightType_Box = () => {
    );
 };

-const WhisperComputeType_Box = () => {
-    const { t } = useI18n();
-    const { currentSelectableWhisperComputeTypeList } = useTranscription();
-    const { currentSelectedWhisperComputeType, setSelectedWhisperComputeType } = useTranscription();

-    const selectFunction = (selected_data) => {
-        setSelectedWhisperComputeType(selected_data.selected_id);
-    };
-
-    const whisper_compute_type_label = t("config_page.transcription.whisper_compute_type.label", {
-        whisper: "Whisper"
-    });
-
-    return (
-        <DropdownMenuContainer
-            dropdown_id="whisper_compute_type"
-            label={whisper_compute_type_label}
-            selected_id={currentSelectedWhisperComputeType.data}
-            list={currentSelectableWhisperComputeTypeList.data}
-            selectFunction={selectFunction}
-            state={currentSelectedWhisperComputeType.state}
-        />
-    );
-};
-
-// Duplicate
-import { useComputeMode } from "@logics_common";
 const TranscriptionComputeDevice_Box = () => {
    const { t } = useI18n();
-    const { currentSelectedTranscriptionComputeDevice, setSelectedTranscriptionComputeDevice } = useTranscription();
-    const { currentSelectableTranscriptionComputeDeviceList } = useTranscription();
-
-    const selectFunction = (selected_data) => {
-        const target_obj = currentSelectableTranscriptionComputeDeviceList.data[selected_data.selected_id];
-        setSelectedTranscriptionComputeDevice(target_obj);
-    };
+    const {
+        currentSelectableTranscriptionComputeDeviceList,
+        currentSelectedTranscriptionComputeDevice,
+        setSelectedTranscriptionComputeDevice,
+        currentSelectedTranscriptionComputeType,
+        setSelectedTranscriptionComputeType,
+    } = useTranscription();
+    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();

    const list_for_ui = transformDeviceArray(currentSelectableTranscriptionComputeDeviceList.data);

    const target_index = findKeyByDeviceValue(currentSelectableTranscriptionComputeDeviceList.data, currentSelectedTranscriptionComputeDevice.data);

+    const selectable_compute_types = arrayToObject(currentSelectableTranscriptionComputeDeviceList.data[target_index].compute_types);

-    const { currentComputeMode } = useComputeMode();
-    if (currentComputeMode.data === "cpu") {
-        return (
-            <ComputeDeviceContainer
-                label={t("config_page.transcription.transcription_compute_device.label")}
-                selected_id={target_index}
-                list={list_for_ui}
-                selectFunction={selectFunction}
-                state={currentSelectedTranscriptionComputeDevice.state}
-            />
-        )
-    }
+
+    const selectFunction_ComputeDevice = (selected_data) => {
+        const target_obj = currentSelectableTranscriptionComputeDeviceList.data[selected_data.selected_id];
+        setSelectedTranscriptionComputeDevice(target_obj);
+    };
+
+    const selectFunction_ComputeType = (selected_data) => {
+        setSelectedTranscriptionComputeType(selected_data.selected_id);
+    };
+
+    const device_container_class = clsx(styles.device_container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
+    });
+
+    const is_disabled_selector = currentSelectedTranscriptionComputeDevice.state === "pending" || currentSelectedTranscriptionComputeType.state === "pending";

    return (
-        <DropdownMenuContainer
-            dropdown_id="transcription_compute_device"
-            label={t("config_page.transcription.transcription_compute_device.label")}
-            // desc={t("config_page.transcription.transcription_compute_device.label")}
-            selected_id={target_index}
-            list={list_for_ui}
-            selectFunction={selectFunction}
-            state={currentSelectedTranscriptionComputeDevice.state}
-        />
+        <div className={styles.mic_container}>
+            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
+                <LabelComponent label={t("config_page.transcription.transcription_compute_device.label")} />
+                <div className={styles.device_contents}>
+
+                    <div className={styles.device_dropdown_wrapper}>
+                        <div className={styles.device_dropdown}>
+                            <p className={styles.device_secondary_label}>{t("config_page.transcription.transcription_compute_device.label")}</p>
+                            <DropdownMenu
+                                dropdown_id="transcription_compute_device"
+                                selected_id={target_index}
+                                list={list_for_ui}
+                                selectFunction={selectFunction_ComputeDevice}
+                                state={currentSelectedTranscriptionComputeDevice.state}
+                                style={{ maxWidth: "20rem", minWidth: "10rem" }}
+                                is_disabled={is_disabled_selector}
+                            />
+                        </div>
+
+                        <div className={styles.device_dropdown}>
+                            <p className={styles.device_secondary_label}>{t("config_page.transcription.transcription_compute_type.label")}</p>
+                            <DropdownMenu
+                                dropdown_id="transcription_compute_type"
+                                selected_id={currentSelectedTranscriptionComputeType.data}
+                                list={selectable_compute_types}
+                                selectFunction={selectFunction_ComputeType}
+                                state={currentSelectedTranscriptionComputeType.state}
+                                is_disabled={is_disabled_selector}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
    );
 };

@@ -399,8 +407,6 @@ const Advanced_Container = () => {
            <SpeakerNoSpeechProbContainer />
        </div>
    );
-
-
 };

 export const MicAvgLogprobContainer = () => {
--- a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
@@ -2,4 +2,120 @@
    display: flex;
    flex-direction: column;
    gap: 6.4rem;
+}
+
+
+
+
+
+
+
+
+
+
+// [Fix me] Need refactor.
+.mic_container {
+    display: flex;
+    flex-direction: column;
+    border-bottom: solid 0.1rem var(--dark_800_color);
+    padding-bottom: 1rem;
+}
+
+.speaker_container {
+    padding-top: 0rem;
+}
+
+.device_container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+    margin-bottom: 0rem;
+    &.is_break_point {
+        flex-direction: column;
+        gap: 2rem;
+        align-items: start;
+        & .device_contents {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+            padding-left: 0rem;
+        }
+    }
+}
+
+.threshold_container {
+    padding: 2rem;
+}
+
+
+
+.threshold_container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 2rem;
+}
+
+.threshold_switch_section {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.threshold_section {
+    width: 100%;
+}
+
+
+
+
+.device_label {
+    font-size: 1.8rem;
+}
+
+.device_contents {
+    display: flex;
+    width: 100%;
+    justify-content: end;
+    padding-left: 2rem;
+    gap: 2rem;
+}
+
+.device_auto_select_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+    justify-content: center;
+    align-items: center;
+}
+
+.device_dropdown_wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 2.8rem;
+}
+
+.device_dropdown {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    white-space: nowrap;
+    max-width: 24rem;
+    &.is_disabled {
+        pointer-events: none;
+    }
+}
+
+.device_secondary_label {
+    padding-left: 0.2rem;
+    padding-right: 0.4rem;
+    font-size: 1.4rem;
+    color: var(--dark_500_color);
+    white-space: nowrap;
 }
--- 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
@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
 import { useI18n } from "@useI18n";
 import styles from "./Translation.module.scss";
-import { updateLabelsById } from "@utils";
+import { updateLabelsById, arrayToObject } from "@utils";
+import { useStore_IsBreakPoint } from "@store";

 import {
    useTranslation,
@@ -10,15 +11,19 @@ import {
 import {
    DownloadModelsContainer,
    DeeplAuthKeyContainer,
-    DropdownMenuContainer,
-    ComputeDeviceContainer,
+
+    useOnMouseLeaveDropdownMenu,
 } from "../_templates/Templates";

+import {
+    DropdownMenu,
+    LabelComponent,
+} from "../_components/";
+
 export const Translation = () => {
    return (
        <>
            <CTranslate2WeightType_Box />
-            <CTranslate2ComputeType_Box />
            <TranslationComputeDevice_Box />
            <DeeplAuthKey_Box />
        </>
@@ -73,73 +78,75 @@ const CTranslate2WeightType_Box = () => {
    );
 };

-const CTranslate2ComputeType_Box = () => {
-    const { t } = useI18n();
-    const { currentSelectableCTranslate2ComputeTypeList } = useTranslation();
-    const { currentSelectedCTranslate2ComputeType, setSelectedCTranslate2ComputeType } = useTranslation();
-
-    const selectFunction = (selected_data) => {
-        setSelectedCTranslate2ComputeType(selected_data.selected_id);
-    };
-
-    const ctranslate2_compute_type_label = t("config_page.translation.ctranslate2_compute_type.label", {
-        ctranslate2: "CTranslate2"
-    });
-
-    return (
-        <DropdownMenuContainer
-            dropdown_id="ctranslate2_compute_type"
-            label={ctranslate2_compute_type_label}
-            selected_id={currentSelectedCTranslate2ComputeType.data}
-            list={currentSelectableCTranslate2ComputeTypeList.data}
-            selectFunction={selectFunction}
-            state={currentSelectedCTranslate2ComputeType.state}
-        />
-    );
-};
-
-// Duplicate
-import { useComputeMode } from "@logics_common";
 const TranslationComputeDevice_Box = () => {
    const { t } = useI18n();
-    const { currentSelectedTranslationComputeDevice, setSelectedTranslationComputeDevice } = useTranslation();
-    const { currentSelectableTranslationComputeDeviceList } = useTranslation();
-
-    const selectFunction = (selected_data) => {
-        const target_obj = currentSelectableTranslationComputeDeviceList.data[selected_data.selected_id];
-        setSelectedTranslationComputeDevice(target_obj);
-    };
+    const {
+        currentSelectableTranslationComputeDeviceList,
+        currentSelectedTranslationComputeDevice,
+        setSelectedTranslationComputeDevice,
+        currentSelectedTranslationComputeType,
+        setSelectedTranslationComputeType,
+    } = useTranslation();
+    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();

    const list_for_ui = transformDeviceArray(currentSelectableTranslationComputeDeviceList.data);

    const target_index = findKeyByDeviceValue(currentSelectableTranslationComputeDeviceList.data, currentSelectedTranslationComputeDevice.data);

+    const selectable_compute_types = arrayToObject(currentSelectableTranslationComputeDeviceList.data[target_index].compute_types);

-    const { currentComputeMode } = useComputeMode();
-    const translation_compute_device_label = t("config_page.translation.translation_compute_device.label", {
-        ctranslate2: "CTranslate2"
+
+    const selectFunction_ComputeDevice = (selected_data) => {
+        const target_obj = currentSelectableTranslationComputeDeviceList.data[selected_data.selected_id];
+        setSelectedTranslationComputeDevice(target_obj);
+    };
+
+    const selectFunction_ComputeType = (selected_data) => {
+        setSelectedTranslationComputeType(selected_data.selected_id);
+    };
+
+    const device_container_class = clsx(styles.device_container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
    });
-    if (currentComputeMode.data === "cpu") {
-        return (
-            <ComputeDeviceContainer
-                label={translation_compute_device_label}
-                selected_id={target_index}
-                list={list_for_ui}
-                selectFunction={selectFunction}
-                state={currentSelectedTranslationComputeDevice.state}
-            />
-        )
-    }
+
+    const is_disabled_selector = currentSelectedTranslationComputeDevice.state === "pending" || currentSelectedTranslationComputeType.state === "pending";

    return (
-        <DropdownMenuContainer
-            dropdown_id="translation_compute_device"
-            label={translation_compute_device_label}
-            selected_id={target_index}
-            list={list_for_ui}
-            selectFunction={selectFunction}
-            state={currentSelectedTranslationComputeDevice.state}
-        />
+        <div className={styles.mic_container}>
+            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
+                <LabelComponent label={t("config_page.translation.translation_compute_device.label")} />
+                <div className={styles.device_contents}>
+
+                    <div className={styles.device_dropdown_wrapper}>
+                        <div className={styles.device_dropdown}>
+                            <p className={styles.device_secondary_label}>{t("config_page.translation.translation_compute_device.label")}</p>
+                            <DropdownMenu
+                                dropdown_id="translation_compute_device"
+                                selected_id={target_index}
+                                list={list_for_ui}
+                                selectFunction={selectFunction_ComputeDevice}
+                                state={currentSelectedTranslationComputeDevice.state}
+                                style={{ maxWidth: "20rem", minWidth: "10rem" }}
+                                is_disabled={is_disabled_selector}
+                            />
+                        </div>
+
+                        <div className={styles.device_dropdown}>
+                            <p className={styles.device_secondary_label}>{t("config_page.translation.translation_compute_type.label")}</p>
+                            <DropdownMenu
+                                dropdown_id="translation_compute_type"
+                                selected_id={currentSelectedTranslationComputeType.data}
+                                list={selectable_compute_types}
+                                selectFunction={selectFunction_ComputeType}
+                                state={currentSelectedTranslationComputeType.state}
+                                is_disabled={is_disabled_selector}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
    );
 };

--- a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.module.scss
@@ -0,0 +1,106 @@
+// [Fix me] Need refactor.
+.mic_container {
+    display: flex;
+    flex-direction: column;
+    border-bottom: solid 0.1rem var(--dark_800_color);
+    padding-bottom: 1rem;
+}
+
+.speaker_container {
+    padding-top: 0rem;
+}
+
+.device_container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+    margin-bottom: 0rem;
+    &.is_break_point {
+        flex-direction: column;
+        gap: 2rem;
+        align-items: start;
+        & .device_contents {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+            padding-left: 0rem;
+        }
+    }
+}
+
+.threshold_container {
+    padding: 2rem;
+}
+
+
+
+.threshold_container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 2rem;
+}
+
+.threshold_switch_section {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.threshold_section {
+    width: 100%;
+}
+
+
+
+
+.device_label {
+    font-size: 1.8rem;
+}
+
+.device_contents {
+    display: flex;
+    width: 100%;
+    justify-content: end;
+    padding-left: 2rem;
+    gap: 2rem;
+}
+
+.device_auto_select_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+    justify-content: center;
+    align-items: center;
+}
+
+.device_dropdown_wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 2.8rem;
+}
+
+.device_dropdown {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    white-space: nowrap;
+    max-width: 24rem;
+    &.is_disabled {
+        pointer-events: none;
+    }
+}
+
+.device_secondary_label {
+    padding-left: 0.2rem;
+    padding-right: 0.4rem;
+    font-size: 1.4rem;
+    color: var(--dark_500_color);
+    white-space: nowrap;
+}