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

Merge branch 'bugfix_compute_type' into develop

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-09-28 02:10:23 +09:00
parent 0bb6bb5977 9a11c6ff9f
commit e7cd872fcc
24 changed files with 861 additions and 192 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:

1
src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
View File

@@ -53,6 +53,7 @@ const Mic_Container = () => {
setSelectedMicDevice(selected_data.selected_id);
};
// [Fix me] currentEnableAutoMicSelect.data === "pending"; ? not currentEnableAutoMicSelect.state === "pending"; ??(.state)
const is_disabled_selector = currentEnableAutoMicSelect.data === true || currentEnableAutoMicSelect.data === "pending";
const getLabels = () => {

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

@@ -1,7 +1,8 @@
import { useEffect, useState } from "react";
import { useI18n } from "@useI18n";
import styles from "./Transcription.module.scss";
import { updateLabelsById, genNumObjArray } from "@utils";
import { updateLabelsById, genNumObjArray, arrayToObject } from "@utils";
import { useStore_IsBreakPoint } from "@store";
import {
useTranscription,
@@ -12,11 +13,14 @@ import {
DownloadModelsContainer,
RadioButtonContainer,
DropdownMenuContainer,
ComputeDeviceContainer,
SliderContainer,
useOnMouseLeaveDropdownMenu,
} from "../_templates/Templates";
import {
DropdownMenu,
LabelComponent,
SectionLabelComponent,
} from "../_components/";
@@ -201,7 +205,7 @@ const TranscriptionEngine_Container = () => {
<SectionLabelComponent label={t("config_page.transcription.section_label_transcription_engines")} />
<TranscriptionEngine_Box />
<WhisperWeightType_Box />
<WhisperComputeDevice_Box />
<TranscriptionComputeDevice_Box />
</div>
);
};
@@ -274,47 +278,143 @@ const WhisperWeightType_Box = () => {
);
};
// Duplicate
import { useComputeMode } from "@logics_common";
const WhisperComputeDevice_Box = () => {
const TranscriptionComputeDevice_Box = () => {
const { t } = useI18n();
const { currentSelectedWhisperComputeDevice, setSelectedWhisperComputeDevice } = useTranscription();
const { currentSelectableWhisperComputeDeviceList } = useTranscription();
const {
currentSelectableTranscriptionComputeDeviceList,
currentSelectedTranscriptionComputeDevice,
setSelectedTranscriptionComputeDevice,
currentSelectedTranscriptionComputeType,
setSelectedTranscriptionComputeType,
} = useTranscription();
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
const { currentIsBreakPoint } = useStore_IsBreakPoint();
const selectFunction = (selected_data) => {
const target_obj = currentSelectableWhisperComputeDeviceList.data[selected_data.selected_id];
setSelectedWhisperComputeDevice(target_obj);
const list_for_ui = transformDeviceArray(currentSelectableTranscriptionComputeDeviceList.data);
const target_index = findKeyByDeviceValue(currentSelectableTranscriptionComputeDeviceList.data, currentSelectedTranscriptionComputeDevice.data);
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 list_for_ui = transformDeviceArray(currentSelectableWhisperComputeDeviceList.data);
const target_index = findKeyByDeviceValue(currentSelectableWhisperComputeDeviceList.data, currentSelectedWhisperComputeDevice.data);
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 { 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}
/>
)
}
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];
setSelectedTranscriptionComputeDevice(target_obj);
};
const selectFunction_ComputeType = (selected_data) => {
setSelectedTranscriptionComputeType(selected_data.selected_id);
};
const device_container_class = clsx(styles.device_container, {
[styles.is_break_point]: currentIsBreakPoint.data,
});
const is_disabled_selector = currentSelectedTranscriptionComputeDevice.state === "pending" || currentSelectedTranscriptionComputeType.state === "pending";
return (
<DropdownMenuContainer
dropdown_id="whisper_compute_device"
label={t("config_page.transcription.whisper_compute_device.label")}
// desc={t("config_page.transcription.whisper_compute_device.label")}
selected_id={target_index}
list={list_for_ui}
selectFunction={selectFunction}
state={currentSelectedWhisperComputeDevice.state}
/>
<div className={styles.mic_container}>
<div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
<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.common.compute_device.label_device")}</p>
<DropdownMenu
dropdown_id="transcription_compute_device"
selected_id={target_index}
list={list_for_ui}
selectFunction={selectFunction_ComputeDevice}
state={currentSelectedTranscriptionComputeDevice.state}
style={{ maxWidth: "20rem", minWidth: "10rem" }}
is_disabled={is_disabled_selector}
/>
</div>
<div className={styles.device_dropdown}>
<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={new_compute_types_labels}
selectFunction={selectFunction_ComputeType}
state={currentSelectedTranscriptionComputeType.state}
is_disabled={is_disabled_selector}
/>
</div>
</div>
</div>
</div>
</div>
);
};
@@ -374,8 +474,6 @@ const Advanced_Container = () => {
<SpeakerNoSpeechProbContainer />
</div>
);
};
export const MicAvgLogprobContainer = () => {

116
src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
View File

@@ -2,4 +2,120 @@
display: flex;
flex-direction: column;
gap: 6.4rem;
}
// [Fix me] Need refactor.
.mic_container {
display: flex;
flex-direction: column;
border-bottom: solid 0.1rem var(--dark_800_color);
padding-bottom: 1rem;
}
.speaker_container {
padding-top: 0rem;
}
.device_container {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 2rem;
margin-bottom: 0rem;
&.is_break_point {
flex-direction: column;
gap: 2rem;
align-items: start;
& .device_contents {
display: flex;
width: 100%;
justify-content: space-between;
padding-left: 0rem;
}
}
}
.threshold_container {
padding: 2rem;
}
.threshold_container {
display: flex;
width: 100%;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.threshold_switch_section {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.threshold_section {
width: 100%;
}
.device_label {
font-size: 1.8rem;
}
.device_contents {
display: flex;
width: 100%;
justify-content: end;
padding-left: 2rem;
gap: 2rem;
}
.device_auto_select_wrapper {
display: flex;
flex-direction: column;
gap: 1.2rem;
justify-content: center;
align-items: center;
}
.device_dropdown_wrapper {
display: flex;
flex-direction: row;
gap: 2.8rem;
}
.device_dropdown {
display: flex;
flex-direction: column;
gap: 0.6rem;
white-space: nowrap;
max-width: 24rem;
&.is_disabled {
pointer-events: none;
}
}
.device_secondary_label {
padding-left: 0.2rem;
padding-right: 0.4rem;
font-size: 1.4rem;
color: var(--dark_500_color);
white-space: nowrap;
}

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

@@ -1,7 +1,8 @@
import { useEffect, useState } from "react";
import { useI18n } from "@useI18n";
import styles from "./Translation.module.scss";
import { updateLabelsById } from "@utils";
import { updateLabelsById, arrayToObject } from "@utils";
import { useStore_IsBreakPoint } from "@store";
import {
useTranslation,
@@ -10,15 +11,20 @@ import {
import {
DownloadModelsContainer,
DeeplAuthKeyContainer,
DropdownMenuContainer,
ComputeDeviceContainer,
useOnMouseLeaveDropdownMenu,
} from "../_templates/Templates";
import {
DropdownMenu,
LabelComponent,
} from "../_components/";
export const Translation = () => {
return (
<>
<CTranslate2WeightType_Box />
<CTranslation2ComputeDevice_Box />
<TranslationComputeDevice_Box />
<DeeplAuthKey_Box />
</>
);
@@ -62,7 +68,7 @@ const CTranslate2WeightType_Box = () => {
"config_page.translation.ctranslate2_weight_type.desc",
{ctranslate2: "CTranslate2"}
)}
name="ctransalte2_weight_type"
name="ctranslate2_weight_type"
options={c_translate2_weight_types}
checked_variable={currentSelectedCTranslate2WeightType}
selectFunction={selectFunction}
@@ -71,49 +77,143 @@ const CTranslate2WeightType_Box = () => {
</>
);
};
// Duplicate
import { useComputeMode } from "@logics_common";
const CTranslation2ComputeDevice_Box = () => {
const TranslationComputeDevice_Box = () => {
const { t } = useI18n();
const { currentSelectedCTranslate2ComputeDevice, setSelectedCTranslate2ComputeDevice } = useTranslation();
const { currentSelectableCTranslate2ComputeDeviceList } = useTranslation();
const {
currentSelectableTranslationComputeDeviceList,
currentSelectedTranslationComputeDevice,
setSelectedTranslationComputeDevice,
currentSelectedTranslationComputeType,
setSelectedTranslationComputeType,
} = useTranslation();
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
const { currentIsBreakPoint } = useStore_IsBreakPoint();
const selectFunction = (selected_data) => {
const target_obj = currentSelectableCTranslate2ComputeDeviceList.data[selected_data.selected_id];
setSelectedCTranslate2ComputeDevice(target_obj);
const list_for_ui = transformDeviceArray(currentSelectableTranslationComputeDeviceList.data);
const target_index = findKeyByDeviceValue(currentSelectableTranslationComputeDeviceList.data, currentSelectedTranslationComputeDevice.data);
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 list_for_ui = transformDeviceArray(currentSelectableCTranslate2ComputeDeviceList.data);
const target_index = findKeyByDeviceValue(currentSelectableCTranslate2ComputeDeviceList.data, currentSelectedCTranslate2ComputeDevice.data);
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 { currentComputeMode } = useComputeMode();
const ctranslate2_compute_device_label = t("config_page.translation.ctranslate2_compute_device.label", {
ctranslate2: "Ctranslate2"
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];
setSelectedTranslationComputeDevice(target_obj);
};
const selectFunction_ComputeType = (selected_data) => {
setSelectedTranslationComputeType(selected_data.selected_id);
};
const device_container_class = clsx(styles.device_container, {
[styles.is_break_point]: currentIsBreakPoint.data,
});
if (currentComputeMode.data === "cpu") {
return (
<ComputeDeviceContainer
label={ctranslate2_compute_device_label}
selected_id={target_index}
list={list_for_ui}
selectFunction={selectFunction}
state={currentSelectedCTranslate2ComputeDevice.state}
/>
)
}
const is_disabled_selector = currentSelectedTranslationComputeDevice.state === "pending" || currentSelectedTranslationComputeType.state === "pending";
return (
<DropdownMenuContainer
dropdown_id="ctranslate2_compute_device"
label={ctranslate2_compute_device_label}
selected_id={target_index}
list={list_for_ui}
selectFunction={selectFunction}
state={currentSelectedCTranslate2ComputeDevice.state}
/>
<div className={styles.mic_container}>
<div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
<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.common.compute_device.label_device")}</p>
<DropdownMenu
dropdown_id="translation_compute_device"
selected_id={target_index}
list={list_for_ui}
selectFunction={selectFunction_ComputeDevice}
state={currentSelectedTranslationComputeDevice.state}
style={{ maxWidth: "20rem", minWidth: "10rem" }}
is_disabled={is_disabled_selector}
/>
</div>
<div className={styles.device_dropdown}>
<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={new_compute_types_labels}
selectFunction={selectFunction_ComputeType}
state={currentSelectedTranslationComputeType.state}
is_disabled={is_disabled_selector}
/>
</div>
</div>
</div>
</div>
</div>
);
};

106
src-ui/app/config_page/setting_section/setting_box/translation/Translation.module.scss
View File

@@ -0,0 +1,106 @@
// [Fix me] Need refactor.
.mic_container {
display: flex;
flex-direction: column;
border-bottom: solid 0.1rem var(--dark_800_color);
padding-bottom: 1rem;
}
.speaker_container {
padding-top: 0rem;
}
.device_container {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 2rem;
margin-bottom: 0rem;
&.is_break_point {
flex-direction: column;
gap: 2rem;
align-items: start;
& .device_contents {
display: flex;
width: 100%;
justify-content: space-between;
padding-left: 0rem;
}
}
}
.threshold_container {
padding: 2rem;
}
.threshold_container {
display: flex;
width: 100%;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.threshold_switch_section {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.threshold_section {
width: 100%;
}
.device_label {
font-size: 1.8rem;
}
.device_contents {
display: flex;
width: 100%;
justify-content: end;
padding-left: 2rem;
gap: 2rem;
}
.device_auto_select_wrapper {
display: flex;
flex-direction: column;
gap: 1.2rem;
justify-content: center;
align-items: center;
}
.device_dropdown_wrapper {
display: flex;
flex-direction: row;
gap: 2.8rem;
}
.device_dropdown {
display: flex;
flex-direction: column;
gap: 0.6rem;
white-space: nowrap;
max-width: 24rem;
&.is_disabled {
pointer-events: none;
}
}
.device_secondary_label {
padding-left: 0.2rem;
padding-right: 0.4rem;
font-size: 1.4rem;
color: var(--dark_500_color);
white-space: nowrap;
}