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] [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 (
+        <div className={styles.container}>
+            <DropdownMenu
+                {...props}
+                is_disabled={true}
+            />
+            <ActionButton
+                {...props}
+                IconComponent={HelpSvg}
+                onclickFunction={onClickFunction}
+            />
+        </div>
+    );
+};
\ 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) => (
     <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}>
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 (
+            <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"
diff --git 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
index ce4bc0d1..b1bbc0fc 100644
--- 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"