[Update] Config Page: Compute Device. Add button that can open the software version updater.

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>
+    );
+};

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;
+}

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

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}>

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();

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"

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"