[Update] Config Page: Translation, Transcription Tab. Add Select CTranslate2/Whisper Compute Device section.

src-ui/app/config_page/ConfigPage.jsx

@@ -4,12 +4,21 @@ import { Topbar } from "./topbar/Topbar.jsx";
 import { SidebarSection } from "./sidebar_section/SidebarSection.jsx";
 import { SettingSection } from "./setting_section/SettingSection.jsx";
 
-import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
+import { useSoftwareVersion } from "@logics_configs";
+import { useComputeMode } from "@logics_common";
+
 import { useTranslation } from "react-i18next";
 
 export const ConfigPage = () => {
-    const { currentSoftwareVersion } = useSoftwareVersion();
     const { t } = useTranslation();
+    const { currentSoftwareVersion } = useSoftwareVersion();
+    const { currentComputeMode } = useComputeMode();
+
+    const version_label = currentComputeMode.data === "cpu"
+        ? t("config_page.version", { version: currentSoftwareVersion.data })
+        : currentComputeMode.data === "cuda"
+        ? t("config_page.version", { version: currentSoftwareVersion.data }) + " CUDA"
+        : t("config_page.version", { version: currentSoftwareVersion.data });
 
     return (
         <div className={styles.page}>
@@ -19,11 +28,7 @@ export const ConfigPage = () => {
                     <SidebarSection />
                     <SettingSection />
                 </div>
-                <p className={styles.software_version}>
-                    {
-                        t("config_page.version", {version: currentSoftwareVersion.data})
-                    }
-                </p>
+                <p className={styles.software_version}>{version_label}</p>
             </div>
         </div>
     );

src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx

@@ -39,7 +39,7 @@ export const DropdownMenu = (props) => {
 
     const getSelectedText = () => {
         if (props.state !== "ok") return;
-        return props.selected_id;
+        return props.list[props.selected_id];
     };
     const list = (props.list === undefined) ? {} : props.list;
 

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

@@ -15,6 +15,9 @@ import {
     useSelectedTranscriptionEngine,
     useWhisperWeightTypeStatus,
     useSelectedWhisperWeightType,
+
+    useSelectedWhisperComputeDevice,
+    useSelectableWhisperComputeDeviceList,
 } from "@logics_configs";
 
 import {
@@ -22,6 +25,7 @@ import {
     WordFilterContainer,
     DownloadModelsContainer,
     RadioButtonContainer,
+    DropdownMenuContainer,
 } from "../_templates/Templates";
 
 import {
@@ -248,6 +252,7 @@ const TranscriptionEngine_Container = () => {
             <SectionLabelComponent label="Transcription Engines" />
             <TranscriptionEngine_Box />
             <WhisperWeightType_Box />
+            <WhisperComputeDevice_Box />
         </div>
     );
 };
@@ -316,4 +321,72 @@ const WhisperWeightType_Box = () => {
             />
         </>
     );
+};
+
+const WhisperComputeDevice_Box = () => {
+    const { t } = useTranslation();
+    const { currentSelectedWhisperComputeDevice, setSelectedWhisperComputeDevice } = useSelectedWhisperComputeDevice();
+    const { currentSelectableWhisperComputeDeviceList } = useSelectableWhisperComputeDeviceList();
+
+    const selectFunction = (selected_data) => {
+        const target_obj = currentSelectableWhisperComputeDeviceList.data[selected_data.selected_id];
+        setSelectedWhisperComputeDevice(target_obj);
+    };
+
+    const list_for_ui = transformDeviceArray(currentSelectableWhisperComputeDeviceList.data);
+
+    const target_index = findKeyByDeviceValue(currentSelectableWhisperComputeDeviceList.data, currentSelectedWhisperComputeDevice.data);
+
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="whisper_compute_device"
+            label={t("config_page.whisper_compute_device.label")}
+            // desc={t("config_page.whisper_compute_device.label")}
+            selected_id={target_index}
+            list={list_for_ui}
+            selectFunction={selectFunction}
+            state={currentSelectedWhisperComputeDevice.state}
+        />
+    );
+};
+
+// Duplicate
+const transformDeviceArray = (devices) => {
+    const name_counts = Object.values(devices).reduce((counts, device) => {
+        const name = device.device_name;
+        counts[name] = (counts[name] || 0) + 1;
+        return counts;
+    }, {});
+
+    const name_indices = {};
+    const result = {};
+
+    Object.entries(devices).forEach(([key, device]) => {
+        const name = device.device_name;
+
+        if (name_counts[name] > 1) {
+            name_indices[name] = (name_indices[name] || 0);
+            const value = `${name}:${name_indices[name]}`;
+            name_indices[name]++;
+            result[key] = value;
+        } else {
+            result[key] = name;
+        }
+    });
+
+    return result;
+};
+
+const findKeyByDeviceValue = (devices, target_value) => {
+    for (const [key, value] of Object.entries(devices)) {
+        if (
+            value.device === target_value.device &&
+            value.device_index === target_value.device_index &&
+            value.device_name === target_value.device_name
+        ) {
+            return parseInt(key);
+        }
+    }
+    return null;
 };

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

@@ -7,17 +7,21 @@ import {
     useDeepLAuthKey,
     useCTranslate2WeightTypeStatus,
     useSelectedCTranslate2WeightType,
+    useSelectedCTranslate2ComputeDevice,
+    useSelectableCTranslate2ComputeDeviceList,
 } from "@logics_configs";
 
 import {
     DownloadModelsContainer,
     DeeplAuthKeyContainer,
+    DropdownMenuContainer,
 } from "../_templates/Templates";
 
 export const Translation = () => {
     return (
         <>
             <CTranslate2WeightType_Box />
+            <CTranslation2ComputeDevice_Box />
             <DeeplAuthKey_Box />
         </>
     );
@@ -66,6 +70,34 @@ const CTranslate2WeightType_Box = () => {
     );
 };
 
+const CTranslation2ComputeDevice_Box = () => {
+    const { t } = useTranslation();
+    const { currentSelectedCTranslate2ComputeDevice, setSelectedCTranslate2ComputeDevice } = useSelectedCTranslate2ComputeDevice();
+    const { currentSelectableCTranslate2ComputeDeviceList } = useSelectableCTranslate2ComputeDeviceList();
+
+    const selectFunction = (selected_data) => {
+        const target_obj = currentSelectableCTranslate2ComputeDeviceList.data[selected_data.selected_id];
+        setSelectedCTranslate2ComputeDevice(target_obj);
+    };
+
+    const list_for_ui = transformDeviceArray(currentSelectableCTranslate2ComputeDeviceList.data);
+
+    const target_index = findKeyByDeviceValue(currentSelectableCTranslate2ComputeDeviceList.data, currentSelectedCTranslate2ComputeDevice.data);
+
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="ctranslate2_compute_device"
+            label={t("config_page.ctranslate2_compute_device.label")}
+            // desc={t("config_page.ctranslate2_compute_device.label")}
+            selected_id={target_index}
+            list={list_for_ui}
+            selectFunction={selectFunction}
+            state={currentSelectedCTranslate2ComputeDevice.state}
+        />
+    );
+};
+
 const DeeplAuthKey_Box = () => {
     const [input_value, seInputValue] = useState("");
     const { t } = useTranslation();
@@ -98,4 +130,44 @@ const DeeplAuthKey_Box = () => {
             />
         </>
     );
+};
+
+// Duplicate
+const transformDeviceArray = (devices) => {
+    const name_counts = Object.values(devices).reduce((counts, device) => {
+        const name = device.device_name;
+        counts[name] = (counts[name] || 0) + 1;
+        return counts;
+    }, {});
+
+    const name_indices = {};
+    const result = {};
+
+    Object.entries(devices).forEach(([key, device]) => {
+        const name = device.device_name;
+
+        if (name_counts[name] > 1) {
+            name_indices[name] = (name_indices[name] || 0);
+            const value = `${name}:${name_indices[name]}`;
+            name_indices[name]++;
+            result[key] = value;
+        } else {
+            result[key] = name;
+        }
+    });
+
+    return result;
+};
+
+const findKeyByDeviceValue = (devices, target_value) => {
+    for (const [key, value] of Object.entries(devices)) {
+        if (
+            value.device === target_value.device &&
+            value.device_index === target_value.device_index &&
+            value.device_name === target_value.device_name
+        ) {
+            return parseInt(key);
+        }
+    }
+    return null;
 };