every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-09-28 02:07:47 +09:00
parent e9067c05c6
commit 9a11c6ff9f
9 changed files with 205 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_download_button/_DownloadButton.jsx
View File

@@ -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:

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

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

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

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

6
src-ui/app/config_page/version_label/VersionLabel.jsx
View File

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