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

[Update] Config Page: Translation, Transcription Tab. Add Select CTranslate2/Whisper Compute Device section.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-03 10:25:53 +09:00
parent e6a7ff03aa
commit 7d8a2cacd0
14 changed files with 297 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
locales/en.json
View File

@@ -138,6 +138,9 @@
"small": "Basic model ({{capacity}})",
"large": "High accuracy model ({{capacity}})"
},
"ctranslate2_compute_device": {
"label": "Select Internal Translation Compute Device"
},
"deepl_auth_key": {
"label": "DeepL Auth Key",
"desc": "Please select {{translator}} on the main screen with DeepL_API when using. ※Some languages may not be supported.",
@@ -216,6 +219,9 @@
"model_template": "{{model_name}} model ({{capacity}})",
"recommended_model_template": "{{model_name}} model ({{capacity}}) (Recommended)"
},
"whisper_compute_device": {
"label": "Select Whisper Compute Device"
},
"enable_overlay_small_log": {
"label": "Enable Overlay",
"open_overlay_settings": "Open Overlay Customized Settings"

19
src-ui/app/config_page/ConfigPage.jsx
View File

@@ -4,12 +4,21 @@ import { Topbar } from "./topbar/Topbar.jsx";
import { SidebarSection } from "./sidebar_section/SidebarSection.jsx";
import { SettingSection } from "./setting_section/SettingSection.jsx";
import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
import { useSoftwareVersion } from "@logics_configs";
import { useComputeMode } from "@logics_common";
import { useTranslation } from "react-i18next";
export const ConfigPage = () => {
const { currentSoftwareVersion } = useSoftwareVersion();
const { t } = useTranslation();
const { currentSoftwareVersion } = useSoftwareVersion();
const { currentComputeMode } = useComputeMode();
const version_label = currentComputeMode.data === "cpu"
? t("config_page.version", { version: currentSoftwareVersion.data })
: currentComputeMode.data === "cuda"
? t("config_page.version", { version: currentSoftwareVersion.data }) + " CUDA"
: t("config_page.version", { version: currentSoftwareVersion.data });
return (
<div className={styles.page}>
@@ -19,11 +28,7 @@ export const ConfigPage = () => {
<SidebarSection />
<SettingSection />
</div>
<p className={styles.software_version}>
{
t("config_page.version", {version: currentSoftwareVersion.data})
}
</p>
<p className={styles.software_version}>{version_label}</p>
</div>
</div>
);

2
src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
View File

@@ -39,7 +39,7 @@ export const DropdownMenu = (props) => {
const getSelectedText = () => {
if (props.state !== "ok") return;
return props.selected_id;
return props.list[props.selected_id];
};
const list = (props.list === undefined) ? {} : props.list;

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

@@ -15,6 +15,9 @@ import {
useSelectedTranscriptionEngine,
useWhisperWeightTypeStatus,
useSelectedWhisperWeightType,
useSelectedWhisperComputeDevice,
useSelectableWhisperComputeDeviceList,
} from "@logics_configs";
import {
@@ -22,6 +25,7 @@ import {
WordFilterContainer,
DownloadModelsContainer,
RadioButtonContainer,
DropdownMenuContainer,
} from "../_templates/Templates";
import {
@@ -248,6 +252,7 @@ const TranscriptionEngine_Container = () => {
<SectionLabelComponent label="Transcription Engines" />
<TranscriptionEngine_Box />
<WhisperWeightType_Box />
<WhisperComputeDevice_Box />
</div>
);
};
@@ -316,4 +321,72 @@ const WhisperWeightType_Box = () => {
/>
</>
);
};
const WhisperComputeDevice_Box = () => {
const { t } = useTranslation();
const { currentSelectedWhisperComputeDevice, setSelectedWhisperComputeDevice } = useSelectedWhisperComputeDevice();
const { currentSelectableWhisperComputeDeviceList } = useSelectableWhisperComputeDeviceList();
const selectFunction = (selected_data) => {
const target_obj = currentSelectableWhisperComputeDeviceList.data[selected_data.selected_id];
setSelectedWhisperComputeDevice(target_obj);
};
const list_for_ui = transformDeviceArray(currentSelectableWhisperComputeDeviceList.data);
const target_index = findKeyByDeviceValue(currentSelectableWhisperComputeDeviceList.data, currentSelectedWhisperComputeDevice.data);
return (
<DropdownMenuContainer
dropdown_id="whisper_compute_device"
label={t("config_page.whisper_compute_device.label")}
// desc={t("config_page.whisper_compute_device.label")}
selected_id={target_index}
list={list_for_ui}
selectFunction={selectFunction}
state={currentSelectedWhisperComputeDevice.state}
/>
);
};
// Duplicate
const transformDeviceArray = (devices) => {
const name_counts = Object.values(devices).reduce((counts, device) => {
const name = device.device_name;
counts[name] = (counts[name] || 0) + 1;
return counts;
}, {});
const name_indices = {};
const result = {};
Object.entries(devices).forEach(([key, device]) => {
const name = device.device_name;
if (name_counts[name] > 1) {
name_indices[name] = (name_indices[name] || 0);
const value = `${name}:${name_indices[name]}`;
name_indices[name]++;
result[key] = value;
} else {
result[key] = name;
}
});
return result;
};
const findKeyByDeviceValue = (devices, target_value) => {
for (const [key, value] of Object.entries(devices)) {
if (
value.device === target_value.device &&
value.device_index === target_value.device_index &&
value.device_name === target_value.device_name
) {
return parseInt(key);
}
}
return null;
};

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

@@ -7,17 +7,21 @@ import {
useDeepLAuthKey,
useCTranslate2WeightTypeStatus,
useSelectedCTranslate2WeightType,
useSelectedCTranslate2ComputeDevice,
useSelectableCTranslate2ComputeDeviceList,
} from "@logics_configs";
import {
DownloadModelsContainer,
DeeplAuthKeyContainer,
DropdownMenuContainer,
} from "../_templates/Templates";
export const Translation = () => {
return (
<>
<CTranslate2WeightType_Box />
<CTranslation2ComputeDevice_Box />
<DeeplAuthKey_Box />
</>
);
@@ -66,6 +70,34 @@ const CTranslate2WeightType_Box = () => {
);
};
const CTranslation2ComputeDevice_Box = () => {
const { t } = useTranslation();
const { currentSelectedCTranslate2ComputeDevice, setSelectedCTranslate2ComputeDevice } = useSelectedCTranslate2ComputeDevice();
const { currentSelectableCTranslate2ComputeDeviceList } = useSelectableCTranslate2ComputeDeviceList();
const selectFunction = (selected_data) => {
const target_obj = currentSelectableCTranslate2ComputeDeviceList.data[selected_data.selected_id];
setSelectedCTranslate2ComputeDevice(target_obj);
};
const list_for_ui = transformDeviceArray(currentSelectableCTranslate2ComputeDeviceList.data);
const target_index = findKeyByDeviceValue(currentSelectableCTranslate2ComputeDeviceList.data, currentSelectedCTranslate2ComputeDevice.data);
return (
<DropdownMenuContainer
dropdown_id="ctranslate2_compute_device"
label={t("config_page.ctranslate2_compute_device.label")}
// desc={t("config_page.ctranslate2_compute_device.label")}
selected_id={target_index}
list={list_for_ui}
selectFunction={selectFunction}
state={currentSelectedCTranslate2ComputeDevice.state}
/>
);
};
const DeeplAuthKey_Box = () => {
const [input_value, seInputValue] = useState("");
const { t } = useTranslation();
@@ -98,4 +130,44 @@ const DeeplAuthKey_Box = () => {
/>
</>
);
};
// Duplicate
const transformDeviceArray = (devices) => {
const name_counts = Object.values(devices).reduce((counts, device) => {
const name = device.device_name;
counts[name] = (counts[name] || 0) + 1;
return counts;
}, {});
const name_indices = {};
const result = {};
Object.entries(devices).forEach(([key, device]) => {
const name = device.device_name;
if (name_counts[name] > 1) {
name_indices[name] = (name_indices[name] || 0);
const value = `${name}:${name_indices[name]}`;
name_indices[name]++;
result[key] = value;
} else {
result[key] = name;
}
});
return result;
};
const findKeyByDeviceValue = (devices, target_value) => {
for (const [key, value] of Object.entries(devices)) {
if (
value.device === target_value.device &&
value.device_index === target_value.device_index &&
value.device_name === target_value.device_name
) {
return parseInt(key);
}
}
return null;
};

1
src-ui/logics/common/index.js
View File

@@ -1,3 +1,4 @@
export { useComputeMode } from "./useComputeMode";
export { useInitProgress } from "./useInitProgress";
export { useIsBackendReady } from "./useIsBackendReady";
export { useWindow } from "./useWindow";

10
src-ui/logics/common/useComputeMode.js Normal file
View File

@@ -0,0 +1,10 @@
import { useStore_ComputeMode } from "@store";
export const useComputeMode = () => {
const { currentComputeMode, updateComputeMode } = useStore_ComputeMode();
return {
currentComputeMode,
updateComputeMode,
};
};

4
src-ui/logics/configs/index.js
View File

@@ -35,9 +35,13 @@ export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords";
export { useSelectedTranscriptionEngine } from "./transcription/useSelectedTranscriptionEngine";
export { useWhisperWeightTypeStatus } from "./transcription/useWhisperWeightTypeStatus";
export { useSelectedWhisperWeightType } from "./transcription/useSelectedWhisperWeightType";
export { useSelectableWhisperComputeDeviceList } from "./transcription/useSelectableWhisperComputeDeviceList";
export { useSelectedWhisperComputeDevice } from "./transcription/useSelectedWhisperComputeDevice";
export { useDeepLAuthKey } from "./translation/useDeepLAuthKey";
export { useCTranslate2WeightTypeStatus } from "./translation/useCTranslate2WeightTypeStatus";
export { useSelectableCTranslate2ComputeDeviceList } from "./translation/useSelectableCTranslate2ComputeDeviceList";
export { useSelectedCTranslate2ComputeDevice } from "./translation/useSelectedCTranslate2ComputeDevice";
export { useSelectedCTranslate2WeightType } from "./translation/useSelectedCTranslate2WeightType";
export { useIsEnabledOverlaySmallLog } from "./vr/useIsEnabledOverlaySmallLog";

18
src-ui/logics/configs/transcription/useSelectableWhisperComputeDeviceList.js Normal file
View File

@@ -0,0 +1,18 @@
import { useStore_SelectableWhisperComputeDeviceList } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSelectableWhisperComputeDeviceList = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentSelectableWhisperComputeDeviceList, updateSelectableWhisperComputeDeviceList, pendingSelectableWhisperComputeDeviceList } = useStore_SelectableWhisperComputeDeviceList();
const getSelectableWhisperComputeDeviceList = () => {
pendingSelectableWhisperComputeDeviceList();
asyncStdoutToPython("/get/data/transcription_compute_device_list");
};
return {
currentSelectableWhisperComputeDeviceList,
getSelectableWhisperComputeDeviceList,
updateSelectableWhisperComputeDeviceList,
};
};

24
src-ui/logics/configs/transcription/useSelectedWhisperComputeDevice.js Normal file
View File

@@ -0,0 +1,24 @@
import { useStore_SelectedWhisperComputeDevice } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSelectedWhisperComputeDevice = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentSelectedWhisperComputeDevice, updateSelectedWhisperComputeDevice, pendingSelectedWhisperComputeDevice } = useStore_SelectedWhisperComputeDevice();
const getSelectedWhisperComputeDevice = () => {
pendingSelectedWhisperComputeDevice();
asyncStdoutToPython("/get/data/selected_transcription_compute_device");
};
const setSelectedWhisperComputeDevice = (selected_transcription_compute_device) => {
pendingSelectedWhisperComputeDevice();
asyncStdoutToPython("/set/data/selected_transcription_compute_device", selected_transcription_compute_device);
};
return {
currentSelectedWhisperComputeDevice,
getSelectedWhisperComputeDevice,
updateSelectedWhisperComputeDevice,
setSelectedWhisperComputeDevice,
};
};

18
src-ui/logics/configs/translation/useSelectableCTranslate2ComputeDeviceList.js Normal file
View File

@@ -0,0 +1,18 @@
import { useStore_SelectableCTranslate2ComputeDeviceList } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSelectableCTranslate2ComputeDeviceList = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentSelectableCTranslate2ComputeDeviceList, updateSelectableCTranslate2ComputeDeviceList, pendingSelectableCTranslate2ComputeDeviceList } = useStore_SelectableCTranslate2ComputeDeviceList();
const getSelectableCTranslate2ComputeDeviceList = () => {
pendingSelectableCTranslate2ComputeDeviceList();
asyncStdoutToPython("/get/data/translation_compute_device_list");
};
return {
currentSelectableCTranslate2ComputeDeviceList,
getSelectableCTranslate2ComputeDeviceList,
updateSelectableCTranslate2ComputeDeviceList,
};
};

24
src-ui/logics/configs/translation/useSelectedCTranslate2ComputeDevice.js Normal file
View File

@@ -0,0 +1,24 @@
import { useStore_SelectedCTranslate2ComputeDevice } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSelectedCTranslate2ComputeDevice = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentSelectedCTranslate2ComputeDevice, updateSelectedCTranslate2ComputeDevice, pendingSelectedCTranslate2ComputeDevice } = useStore_SelectedCTranslate2ComputeDevice();
const getSelectedCTranslate2ComputeDevice = () => {
pendingSelectedCTranslate2ComputeDevice();
asyncStdoutToPython("/get/data/selected_translation_compute_device");
};
const setSelectedCTranslate2ComputeDevice = (selected_translation_compute_device) => {
pendingSelectedCTranslate2ComputeDevice();
asyncStdoutToPython("/set/data/selected_translation_compute_device", selected_translation_compute_device);
};
return {
currentSelectedCTranslate2ComputeDevice,
getSelectedCTranslate2ComputeDevice,
updateSelectedCTranslate2ComputeDevice,
setSelectedCTranslate2ComputeDevice,
};
};

29
src-ui/logics/useReceiveRoutes.js
View File

@@ -2,6 +2,7 @@ import { translator_status } from "@ui_configs";
import { arrayToObject } from "@utils";
import {
useComputeMode,
useInitProgress,
useIsBackendReady,
useWindow,
@@ -51,6 +52,10 @@ import {
useSpeakerMaxWords,
useDeepLAuthKey,
useCTranslate2WeightTypeStatus,
useSelectableCTranslate2ComputeDeviceList,
useSelectedCTranslate2ComputeDevice,
useSelectableWhisperComputeDeviceList,
useSelectedWhisperComputeDevice,
useSelectedCTranslate2WeightType,
useSelectedTranscriptionEngine,
useSelectedWhisperWeightType,
@@ -64,6 +69,7 @@ import {
} from "@logics_configs";
export const useReceiveRoutes = () => {
const { updateComputeMode } = useComputeMode();
const { updateInitProgress } = useInitProgress();
const { updateIsBackendReady } = useIsBackendReady();
const { restoreWindowGeometry } = useWindow();
@@ -138,6 +144,10 @@ export const useReceiveRoutes = () => {
updateDownloadProgressCTranslate2WeightTypeStatus,
downloadedCTranslate2WeightType,
} = useCTranslate2WeightTypeStatus();
const { updateSelectableCTranslate2ComputeDeviceList } = useSelectableCTranslate2ComputeDeviceList();
const { updateSelectedCTranslate2ComputeDevice } = useSelectedCTranslate2ComputeDevice();
const { updateSelectableWhisperComputeDeviceList } = useSelectableWhisperComputeDeviceList();
const { updateSelectedWhisperComputeDevice } = useSelectedWhisperComputeDevice();
const { updateSelectedTranscriptionEngine } = useSelectedTranscriptionEngine();
const { updateSelectedWhisperWeightType } = useSelectedWhisperWeightType();
@@ -159,6 +169,7 @@ export const useReceiveRoutes = () => {
// Common
"/run/feed_watchdog": () => {},
"/run/initialization_progress": updateInitProgress,
"/get/data/compute_mode": updateComputeMode,
"/get/data/main_window_geometry": restoreWindowGeometry,
"/set/data/main_window_geometry": () => {},
"/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"),
@@ -316,6 +327,10 @@ export const useReceiveRoutes = () => {
"/get/data/selectable_ctranslate2_weight_type_dict": updateDownloadedCTranslate2WeightTypeStatus,
"/get/data/translation_compute_device_list": (payload) => updateSelectableCTranslate2ComputeDeviceList(transformToIndexedArray(payload)),
"/get/data/selected_translation_compute_device": updateSelectedCTranslate2ComputeDevice,
"/set/data/selected_translation_compute_device": updateSelectedCTranslate2ComputeDevice,
"/run/downloaded_ctranslate2_weight": downloadedCTranslate2WeightType,
"/run/download_ctranslate2_weight": () => {},
"/run/download_progress_ctranslate2_weight": updateDownloadProgressCTranslate2WeightTypeStatus,
@@ -380,6 +395,10 @@ export const useReceiveRoutes = () => {
"/run/download_whisper_weight": () => {},
"/run/download_progress_whisper_weight": updateDownloadProgressWhisperWeightTypeStatus,
"/get/data/transcription_compute_device_list": (payload) => updateSelectableWhisperComputeDeviceList(transformToIndexedArray(payload)),
"/get/data/selected_transcription_compute_device": updateSelectedWhisperComputeDevice,
"/set/data/selected_transcription_compute_device": updateSelectedWhisperComputeDevice,
// VR
"/get/data/overlay_small_log": updateIsEnabledOverlaySmallLog,
"/set/enable/overlay_small_log": updateIsEnabledOverlaySmallLog,
@@ -486,4 +505,12 @@ export const useReceiveRoutes = () => {
const style_348 = [
"color: gray",
].join(";");
].join(";");
const transformToIndexedArray = (devices) => {
return devices.reduce((result, device, index) => {
result[index] = device;
return result;
}, {});
};

6
src-ui/store.js
View File

@@ -104,6 +104,7 @@ const createAtomWithHook = (initialValue, base_name, options) => {
// Common
export const { atomInstance: Atom_IsBackendReady, useHook: useStore_IsBackendReady } = createAtomWithHook(false, "IsBackendReady");
export const { atomInstance: Atom_ComputeMode, useHook: useStore_ComputeMode } = createAtomWithHook("", "ComputeMode");
export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_MainFunctionsStateMemory } = createAtomWithHook({
transcription_send: false,
@@ -195,6 +196,8 @@ export const { atomInstance: Atom_MicWordFilterList, useHook: useStore_MicWordFi
// Translation
export const { atomInstance: Atom_DeepLAuthKey, useHook: useStore_DeepLAuthKey } = createAtomWithHook(null, "DeepLAuthKey");
export const { atomInstance: Atom_SelectedCTranslate2WeightType, useHook: useStore_SelectedCTranslate2WeightType } = createAtomWithHook("", "SelectedCTranslate2WeightType");
export const { atomInstance: Atom_SelectableCTranslate2ComputeDeviceList, useHook: useStore_SelectableCTranslate2ComputeDeviceList } = createAtomWithHook({}, "SelectableCTranslate2ComputeDeviceList");
export const { atomInstance: Atom_SelectedCTranslate2ComputeDevice, useHook: useStore_SelectedCTranslate2ComputeDevice } = createAtomWithHook("", "SelectedCTranslate2ComputeDevice");
export const { atomInstance: Atom_CTranslate2WeightTypeStatus, useHook: useStore_CTranslate2WeightTypeStatus } = createAtomWithHook(ctranslate2_weight_type_status, "CTranslate2WeightTypeStatus");
// Transcription
@@ -210,6 +213,9 @@ export const { atomInstance: Atom_SelectedWhisperWeightType, useHook: useStore_S
export const { atomInstance: Atom_WhisperWeightTypeStatus, useHook: useStore_WhisperWeightTypeStatus } = createAtomWithHook(whisper_weight_type_status, "WhisperWeightTypeStatus");
export const { atomInstance: Atom_SelectedTranscriptionEngine, useHook: useStore_SelectedTranscriptionEngine } = createAtomWithHook(whisper_weight_type_status, "SelectedTranscriptionEngine");
export const { atomInstance: Atom_SelectableWhisperComputeDeviceList, useHook: useStore_SelectableWhisperComputeDeviceList } = createAtomWithHook({}, "SelectableWhisperComputeDeviceList");
export const { atomInstance: Atom_SelectedWhisperComputeDevice, useHook: useStore_SelectedWhisperComputeDevice } = createAtomWithHook("", "SelectedWhisperComputeDevice");
// VR
export const { atomInstance: Atom_OverlaySmallLogSettings, useHook: useStore_OverlaySmallLogSettings } = createAtomWithHook({