[Update] Config Page: Compute Device/Type: Add localization and make compute types order properly.

2025-09-28 02:07:47 +09:00
parent e9067c05c6
commit 9a11c6ff9f
9 changed files with 205 additions and 46 deletions
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -73,8 +73,17 @@ update_modal:
    is_current_compute_device: "The version currently in use"

 config_page:
-    version: "Version {{version}}"
-    model_download_button_label: "Download"
+    common:
+        version: "Version {{version}}"
+        model_download_button_label: "Download"
+        compute_device:
+            desc: "The accuracy and speed of each processing type may vary depending on your machine specs, and the compatibility with calculation methods may differ from the displayed order. Please use this as a general guideline."
+            label_device: "Processing Device"
+            label_type: "Processing Type"
+            type_template_auto: "Automatic"
+            type_template_low: "{{type_name}} (Lower accuracy, faster processing)"
+            type_template_high: "{{type_name}} (Higher accuracy, slower processing)"
+
    side_menu_labels:
        device: "Device"
        appearance: "Appearance"
@@ -133,8 +142,6 @@ config_page:
            desc: "You can choose the translation model when using the {{ctranslate2}} translation engine."
            small: "Basic Model ({{capacity}})"
            large: "High Accuracy Model ({{capacity}})"
-        translation_compute_type:
-            label: "Processing type for AI translation {{ctranslate2}}"
        translation_compute_device:
            label: "Processing device for AI translation"
        deepl_auth_key:
@@ -179,8 +186,6 @@ config_page:
            desc: "Larger models have higher accuracy, but they also consume more CPU or GPU resources.\nEspecially for models larger than medium, it may be difficult or even impossible to use them depending on the performance of your CPU/GPU."
            model_template: "{{model_name}} model ({{capacity}})"
            recommended_model_template: "{{model_name}} model ({{capacity}}) (Recommended)"
-        transcription_compute_type:
-            label: "Processing type for AI transcription {{whisper}}"
        transcription_compute_device:
            label: "Processing Device Used For AI transcription"

--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -73,8 +73,17 @@ update_modal:
    is_current_compute_device: "現在使用中のバージョン"

 config_page:
-    version: "バージョン {{version}}"
-    model_download_button_label: "ダウンロード"
+    common:
+        version: "バージョン {{version}}"
+        model_download_button_label: "ダウンロード"
+        compute_device:
+            desc: "各処理タイプの精度・速度は、マシンスペックによって計算方法に相性があり、表示順とは異なる事があるため、大まかな目安としてください。"
+            label_device: "処理デバイス"
+            label_type: "処理タイプ"
+            type_template_auto: "自動"
+            type_template_low: "{{type_name}} （精度が悪く、処理は早い）"
+            type_template_high: "{{type_name}} （精度が良く、処理は遅い）"
+
    side_menu_labels:
        device: "デバイス"
        appearance: "デザイン"
@@ -133,8 +142,6 @@ config_page:
            desc: "翻訳エンジン「{{ctranslate2}}」で翻訳する際に、使用する翻訳モデルを選択できます。"
            small: "通常モデル （{{capacity}}）"
            large: "高精度モデル （{{capacity}}）"
-        translation_compute_type:
-            label: "AI翻訳 {{ctranslate2}} の処理タイプ"
        translation_compute_device:
            label: "AI翻訳の処理デバイス"
        deepl_auth_key:
@@ -179,8 +186,6 @@ config_page:
            desc: "容量が大きいモデルほど精度は高いですが、その分CPUやGPUを占有します。\n※特にmediumより容量の大きいモデルは、CPU/GPUの性能によっては使用すらも困難です。"
            model_template: "{{model_name}} モデル （{{capacity}}）"
            recommended_model_template: "{{model_name}} モデル （{{capacity}}） [推奨]"
-        transcription_compute_type:
-            label: "AI音声認識 {{whisper}} の処理タイプ"
        transcription_compute_device:
            label: "AI音声認識で使用する処理デバイス"

--- a/locales/ko.yml
+++ b/locales/ko.yml
@@ -73,8 +73,17 @@ update_modal:
    is_current_compute_device: "현재 사용 중인 버전"

 config_page:
-    version: "버전 {{version}}"
-    model_download_button_label: "다운로드"
+    common:
+        version: "버전 {{version}}"
+        model_download_button_label: "다운로드"
+        compute_device:
+            desc:
+            label_device:
+            label_type:
+            type_template_auto:
+            type_template_low:
+            type_template_high:
+
    side_menu_labels:
        device: "장치"
        appearance: "모양"
@@ -133,8 +142,6 @@ config_page:
            desc: "오프라인 번역 시의 번역 모델을 변경합니다."
            small: "일반 모델 ({{capacity}})"
            large: "정밀 모델 ({{capacity}})"
-        translation_compute_type:
-            label:
        translation_compute_device:
            label: "AI 번역 처리 장치"
        deepl_auth_key:
@@ -179,8 +186,6 @@ config_page:
            desc: "용량이 큰 모델일수록 정확도는 높지만, 그만큼 CPU나 GPU를 많이 차지합니다. * 특히 medium보다 용량이 큰 모델은 CPU/GPU 성능에 따라 사용 자체가 어려울 수 있습니다."
            model_template: "{{model_name}} 모델 ({{capacity}})"
            recommended_model_template: "{{model_name}} 모델 ({{capacity}}) (권장)"
-        transcription_compute_type:
-            label:
        transcription_compute_device:
            label:

--- a/locales/zh-Hans.yml
+++ b/locales/zh-Hans.yml
@@ -73,8 +73,17 @@ update_modal:
    is_current_compute_device:

 config_page:
-    version: "版本 {{version}}"
-    model_download_button_label:
+    common:
+        version: "版本 {{version}}"
+        model_download_button_label:
+        compute_device:
+            desc:
+            label_device:
+            label_type:
+            type_template_auto:
+            type_template_low:
+            type_template_high:
+
    side_menu_labels:
        device:
        appearance: "外观"
@@ -133,8 +142,6 @@ config_page:
            desc: "可以选择用于离线翻译的翻译模型"
            small: "普通模型 ({{capacity}})"
            large: "高精度模型 ({{capacity}})"
-        translation_compute_type:
-            label:
        translation_compute_device:
            label:
        deepl_auth_key:
@@ -179,8 +186,6 @@ config_page:
            desc:
            model_template: "{{model_name}} 模型 ({{capacity}})"
            recommended_model_template: "{{model_name}} 模型 ({{capacity}}) (推荐)"
-        transcription_compute_type:
-            label:
        transcription_compute_device:
            label:

--- a/locales/zh-Hant.yml
+++ b/locales/zh-Hant.yml
@@ -73,8 +73,17 @@ update_modal:
    is_current_compute_device:

 config_page:
-    version: "版本 {{version}}"
-    model_download_button_label:
+    common:
+        version: "版本 {{version}}"
+        model_download_button_label:
+        compute_device:
+            desc:
+            label_device:
+            label_type:
+            type_template_auto:
+            type_template_low:
+            type_template_high:
+
    side_menu_labels:
        device:
        appearance: "外觀"
@@ -133,8 +142,6 @@ config_page:
            desc: "你可以選擇用於離線翻譯引擎的翻譯模型。"
            small: "基本模型（{{capacity}}）"
            large: "高準確率模型（{{capacity}}）"
-        translation_compute_type:
-            label:
        translation_compute_device:
            label:
        deepl_auth_key:
@@ -179,8 +186,6 @@ config_page:
            desc:
            model_template: "{{model_name}}模型（{{capacity}}）"
            recommended_model_template: "{{model_name}}模型（{{capacity}}）（推薦）"
-        transcription_compute_type:
-            label:
        transcription_compute_device:
            label:

--- a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_download_button/_DownloadButton.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_download_button/_DownloadButton.jsx
@@ -29,7 +29,7 @@ export const _DownloadButton = ({option, ...props}) => {
                        className={styles.download_button}
                        onClick={() => props.downloadStartFunction(option.id)}
                    >
-                        <p className={styles.download_button_label}>{t("config_page.model_download_button_label")}</p>
+                        <p className={styles.download_button_label}>{t("config_page.common.model_download_button_label")}</p>
                    </button>
                );
            case option.update_button:
--- 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
@@ -278,7 +278,7 @@ const WhisperWeightType_Box = () => {
    );
 };

-
+// Duplicate
 const TranscriptionComputeDevice_Box = () => {
    const { t } = useI18n();
    const {
@@ -295,8 +295,72 @@ const TranscriptionComputeDevice_Box = () => {

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

-    const selectable_compute_types = arrayToObject(currentSelectableTranscriptionComputeDeviceList.data[target_index].compute_types);
+    const DEFAULT_ORDER = [
+        "auto",
+        "int8",
+        "int8_bfloat16",
+        "int8_float16",
+        "int8_float32",
+        "bfloat16",
+        "float16",
+        "int16",
+        "float32"
+    ];

+    const sortComputeTypesArray = (compute_types_array = [], order) => {
+        const src_set = new Set(compute_types_array);
+
+        const from_order = order.filter((id) => src_set.has(id));
+
+        const invalid_ids = compute_types_array.filter((id) => !order.includes(id));
+        if (invalid_ids.length > 0) {
+            console.error("[sortComputeTypesArray] Unsupported compute types ignored:", invalid_ids);
+        }
+
+        return from_order;
+    };
+
+
+    const buildSimpleLabels = (ordered_array = []) => {
+        const n = ordered_array.length;
+        if (n === 0) return {};
+
+        const labels = {};
+
+        ordered_array.forEach((id, idx) => {
+            if (idx === 0 && id === "auto") {
+                labels[id] = t("config_page.common.compute_device.type_template_auto");
+                return;
+            }
+
+            if (idx === 1) {
+                labels[id] = t(
+                    "config_page.common.compute_device.type_template_low",
+                    { type_name: id }
+                );
+                return;
+            }
+
+            if (idx === n - 1) {
+                labels[id] = t(
+                    "config_page.common.compute_device.type_template_high",
+                    { type_name: id }
+                );
+                return;
+            }
+
+            labels[id] = id;
+        });
+
+        return labels;
+    };
+
+
+    const computeTypesArray = currentSelectableTranscriptionComputeDeviceList.data[target_index].compute_types;
+
+    const ordered_array = sortComputeTypesArray(computeTypesArray, DEFAULT_ORDER);
+
+    const new_compute_types_labels = buildSimpleLabels(ordered_array);

    const selectFunction_ComputeDevice = (selected_data) => {
        const target_obj = currentSelectableTranscriptionComputeDeviceList.data[selected_data.selected_id];
@@ -316,12 +380,15 @@ const TranscriptionComputeDevice_Box = () => {
    return (
        <div className={styles.mic_container}>
            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
-                <LabelComponent label={t("config_page.transcription.transcription_compute_device.label")} />
+                <LabelComponent
+                    label={t("config_page.transcription.transcription_compute_device.label")}
+                    desc={t("config_page.common.compute_device.desc")}
+                />
                <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>
+                            <p className={styles.device_secondary_label}>{t("config_page.common.compute_device.label_device")}</p>
                            <DropdownMenu
                                dropdown_id="transcription_compute_device"
                                selected_id={target_index}
@@ -334,11 +401,11 @@ const TranscriptionComputeDevice_Box = () => {
                        </div>

                        <div className={styles.device_dropdown}>
-                            <p className={styles.device_secondary_label}>{t("config_page.transcription.transcription_compute_type.label")}</p>
+                            <p className={styles.device_secondary_label}>{t("config_page.common.compute_device.label_type")}</p>
                            <DropdownMenu
                                dropdown_id="transcription_compute_type"
                                selected_id={currentSelectedTranscriptionComputeType.data}
-                                list={selectable_compute_types}
+                                list={new_compute_types_labels}
                                selectFunction={selectFunction_ComputeType}
                                state={currentSelectedTranscriptionComputeType.state}
                                is_disabled={is_disabled_selector}
--- 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
@@ -77,7 +77,7 @@ const CTranslate2WeightType_Box = () => {
        </>
    );
 };
-
+// Duplicate
 const TranslationComputeDevice_Box = () => {
    const { t } = useI18n();
    const {
@@ -94,8 +94,72 @@ const TranslationComputeDevice_Box = () => {

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

-    const selectable_compute_types = arrayToObject(currentSelectableTranslationComputeDeviceList.data[target_index].compute_types);
+    const DEFAULT_ORDER = [
+        "auto",
+        "int8",
+        "int8_bfloat16",
+        "int8_float16",
+        "int8_float32",
+        "bfloat16",
+        "float16",
+        "int16",
+        "float32"
+    ];

+    const sortComputeTypesArray = (compute_types_array = [], order) => {
+        const src_set = new Set(compute_types_array);
+
+        const from_order = order.filter((id) => src_set.has(id));
+
+        const invalid_ids = compute_types_array.filter((id) => !order.includes(id));
+        if (invalid_ids.length > 0) {
+            console.error("[sortComputeTypesArray] Unsupported compute types ignored:", invalid_ids);
+        }
+
+        return from_order;
+    };
+
+
+    const buildSimpleLabels = (ordered_array = []) => {
+        const n = ordered_array.length;
+        if (n === 0) return {};
+
+        const labels = {};
+
+        ordered_array.forEach((id, idx) => {
+            if (idx === 0 && id === "auto") {
+                labels[id] = t("config_page.common.compute_device.type_template_auto");
+                return;
+            }
+
+            if (idx === 1) {
+                labels[id] = t(
+                    "config_page.common.compute_device.type_template_low",
+                    { type_name: id }
+                );
+                return;
+            }
+
+            if (idx === n - 1) {
+                labels[id] = t(
+                    "config_page.common.compute_device.type_template_high",
+                    { type_name: id }
+                );
+                return;
+            }
+
+            labels[id] = id;
+        });
+
+        return labels;
+    };
+
+
+    const computeTypesArray = currentSelectableTranslationComputeDeviceList.data[target_index].compute_types;
+
+    const ordered_array = sortComputeTypesArray(computeTypesArray, DEFAULT_ORDER);
+
+    const new_compute_types_labels = buildSimpleLabels(ordered_array);

    const selectFunction_ComputeDevice = (selected_data) => {
        const target_obj = currentSelectableTranslationComputeDeviceList.data[selected_data.selected_id];
@@ -115,12 +179,15 @@ const TranslationComputeDevice_Box = () => {
    return (
        <div className={styles.mic_container}>
            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
-                <LabelComponent label={t("config_page.translation.translation_compute_device.label")} />
+                <LabelComponent
+                    label={t("config_page.translation.translation_compute_device.label")}
+                    desc={t("config_page.common.compute_device.desc")}
+                />
                <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>
+                            <p className={styles.device_secondary_label}>{t("config_page.common.compute_device.label_device")}</p>
                            <DropdownMenu
                                dropdown_id="translation_compute_device"
                                selected_id={target_index}
@@ -133,11 +200,11 @@ const TranslationComputeDevice_Box = () => {
                        </div>

                        <div className={styles.device_dropdown}>
-                            <p className={styles.device_secondary_label}>{t("config_page.translation.translation_compute_type.label")}</p>
+                            <p className={styles.device_secondary_label}>{t("config_page.common.compute_device.label_type")}</p>
                            <DropdownMenu
                                dropdown_id="translation_compute_type"
                                selected_id={currentSelectedTranslationComputeType.data}
-                                list={selectable_compute_types}
+                                list={new_compute_types_labels}
                                selectFunction={selectFunction_ComputeType}
                                state={currentSelectedTranslationComputeType.state}
                                is_disabled={is_disabled_selector}
--- a/src-ui/app/config_page/version_label/VersionLabel.jsx
+++ b/src-ui/app/config_page/version_label/VersionLabel.jsx
@@ -15,10 +15,10 @@ export const VersionLabel = () => {
    const { currentComputeMode } = useComputeMode();

    const version_label = currentComputeMode.data === "cpu"
-        ? t("config_page.version", { version: currentSoftwareVersion.data })
+        ? t("config_page.common.version", { version: currentSoftwareVersion.data })
        : currentComputeMode.data === "cuda"
-        ? t("config_page.version", { version: currentSoftwareVersion.data }) + " CUDA"
-        : t("config_page.version", { version: currentSoftwareVersion.data });
+        ? t("config_page.common.version", { version: currentSoftwareVersion.data }) + " CUDA"
+        : t("config_page.common.version", { version: currentSoftwareVersion.data });

        const is_cpu = currentComputeMode.data === "cpu";