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

[Update] Main Page: Language Settings. Translation Engines. To selectable.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-22 12:02:50 +09:00
parent 8e8eeeb239
commit 586aaf0091
7 changed files with 116 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src-ui/app/App.jsx
View File

@@ -51,7 +51,14 @@ const StartPythonFacadeComponent = () => {
const { getSendMessageButtonType } = useSendMessageButtonType();
const { getUiLanguage } = useUiLanguage();
const { getSelectedPresetTabNumber, getEnableMultiTranslation, getSelectedYourLanguages, getSelectedTargetLanguages } = useLanguageSettings();
const {
getSelectedPresetTabNumber,
getEnableMultiTranslation,
getSelectedYourLanguages,
getSelectedTargetLanguages,
getTranslationEngines,
getSelectedTranslationEngines,
} = useLanguageSettings();
const { getSelectableLanguageList } = useSelectableLanguageList();
@@ -68,6 +75,8 @@ const StartPythonFacadeComponent = () => {
getSelectedYourLanguages();
getSelectedTargetLanguages();
getSelectableLanguageList();
getTranslationEngines();
getSelectedTranslationEngines();
getEnableAutoMicSelect();
getEnableAutoSpeakerSelect();

38
src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
View File

@@ -2,27 +2,45 @@ import { useTranslation } from "react-i18next";
import styles from "./TranslatorSelectorOpenButton.module.scss";
import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
import { useStore_IsOpenedTranslatorSelector } from "@store";
import { useLanguageSettings } from "@logics_main/useLanguageSettings";
export const TranslatorSelectorOpenButton = () => {
const { t } = useTranslation();
const { currentSelectedTranslatorId } = useStore_SelectedTranslatorId();
const { currentTranslatorList } = useStore_TranslatorList();
const currentTranslator = currentTranslatorList.find(
translator_data => translator_data.translator_key === currentSelectedTranslatorId
);
const {
currentSelectedPresetTabNumber,
currentTranslationEngines,
getTranslationEngines,
currentSelectedTranslationEngines,
} = useLanguageSettings();
// console.log(currentTranslationEngines, currentSelectedTranslationEngines);
const selected_translator_name = (currentTranslationEngines.state === "loading")
? "Loading..."
: currentTranslationEngines.data.find(
translator_data => translator_data.translator_id === currentSelectedTranslationEngines[currentSelectedPresetTabNumber.data]
)?.translator_name;
const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
const openTranslatorSelector = () => updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);
const openTranslatorSelector = () => {
getTranslationEngines();
updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);
};
return (
<div className={styles.container}>
<div className={styles.translator_selector_button} onClick={openTranslatorSelector}>
<p className={styles.label}>{t("main_page.translator")}</p>
<p className={styles.label}>{currentTranslator?.translator_name}</p>
<p className={styles.label}>{t("main_page.translator")}: </p>
<p className={styles.label}>{selected_translator_name}</p>
</div>
{currentIsOpenedTranslatorSelector && <TranslatorSelector />}
{currentIsOpenedTranslatorSelector &&
<TranslatorSelector
selected_translator_id={currentSelectedTranslationEngines}
translation_engines={currentTranslationEngines}
/>
}
</div>
);
};

22
src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
View File

@@ -1,22 +1,24 @@
import styles from "./TranslatorSelector.module.scss";
import { chunkArray } from "@utils/chunkArray";
import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
export const TranslatorSelector = () => {
const { currentTranslatorList } = useStore_TranslatorList();
const columns = chunkArray(currentTranslatorList, 2);
import { useStore_IsOpenedTranslatorSelector } from "@store";
import { useLanguageSettings } from "@logics_main/useLanguageSettings";
export const TranslatorSelector = ({selected_translator_id, translation_engines}) => {
const columns = (translation_engines.data !== undefined) ? chunkArray(translation_engines.data, 2) : [];
return (
<div className={styles.container}>
<div className={styles.wrapper}>
{columns.map((column, column_index) => (
<div className={styles.column_wrapper} key={`column_${column_index}`}>
{column.map(({ translator_key, translator_name, is_available }) => (
{column.map(({ translator_id, translator_name, is_available }) => (
<TranslatorBox
key={translator_key}
translator_id={translator_key}
key={translator_id}
translator_id={translator_id}
translator_name={translator_name}
is_available={is_available}
is_selected={(translator_id === selected_translator_id)}
/>
))}
</div>
@@ -28,17 +30,17 @@ export const TranslatorSelector = () => {
import clsx from "clsx";
const TranslatorBox = (props) => {
const { currentSelectedTranslatorId, updateSelectedTranslatorId} = useStore_SelectedTranslatorId();
const { currentSelectedPresetTabNumber, currentSelectedTranslationEngines, setSelectedTranslationEngines} = useLanguageSettings();
const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
const box_class_name = clsx(
styles.box,
{ [styles["is_selected"]]: (currentSelectedTranslatorId === props.translator_id) ? true : false },
{ [styles["is_selected"]]: (currentSelectedTranslationEngines[currentSelectedPresetTabNumber.data] === props.translator_id) ? true : false },
{ [styles["is_available"]]: (props.is_available === true) ? true : false }
);
const selectTranslator = () => {
updateSelectedTranslatorId(props.translator_id);
setSelectedTranslationEngines(props.translator_id);
updateIsOpenedTranslatorSelector(false);
};
return (

34
src-ui/logics/main/useLanguageSettings.js
View File

@@ -1,4 +1,4 @@
import { useStore_SelectedPresetTabNumber, useStore_EnableMultiTranslation, useStore_SelectedYourLanguages, useStore_SelectedTargetLanguages } from "@store";
import { useStore_SelectedPresetTabNumber, useStore_EnableMultiTranslation, useStore_SelectedYourLanguages, useStore_SelectedTargetLanguages, useStore_TranslationEngines, useStore_SelectedTranslationEngines } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useLanguageSettings = () => {
@@ -7,6 +7,8 @@ export const useLanguageSettings = () => {
const { currentSelectedYourLanguages, updateSelectedYourLanguages } = useStore_SelectedYourLanguages();
const { currentSelectedTargetLanguages, updateSelectedTargetLanguages } = useStore_SelectedTargetLanguages();
const { currentSelectedPresetTabNumber, updateSelectedPresetTabNumber } = useStore_SelectedPresetTabNumber();
const { currentTranslationEngines, updateTranslationEngines } = useStore_TranslationEngines();
const { currentSelectedTranslationEngines, updateSelectedTranslationEngines } = useStore_SelectedTranslationEngines();
const getEnableMultiTranslation = () => {
updateEnableMultiTranslation(() => new Promise(() => {}));
@@ -60,6 +62,27 @@ export const useLanguageSettings = () => {
asyncStdoutToPython("/set/selected_target_languages", send_obj);
};
const getTranslationEngines = () => {
updateTranslationEngines(() => new Promise(() => {}));
asyncStdoutToPython("/get/list_translation_engines");
};
const getSelectedTranslationEngines = () => {
updateSelectedTranslationEngines(() => new Promise(() => {}));
asyncStdoutToPython("/get/selected_translator_engines");
};
const setSelectedTranslationEngines = (selected_translator) => {
// updateSelectedTranslationEngines(() => new Promise(() => {}));
let send_obj = currentSelectedTranslationEngines;
send_obj[currentSelectedPresetTabNumber.data] = selected_translator;
asyncStdoutToPython("/set/selected_translator_engines", send_obj);
};
return {
currentSelectedPresetTabNumber,
getSelectedPresetTabNumber,
@@ -80,5 +103,14 @@ export const useLanguageSettings = () => {
getSelectedTargetLanguages,
updateSelectedTargetLanguages,
setSelectedTargetLanguages,
currentTranslationEngines,
getTranslationEngines,
updateTranslationEngines,
currentSelectedTranslationEngines,
getSelectedTranslationEngines,
updateSelectedTranslationEngines,
setSelectedTranslationEngines,
};
};

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

@@ -1,3 +1,5 @@
import { translator_status } from "@data";
import { arrayToObject } from "@utils/arrayToObject";
import { useMainFunction } from "@logics_main/useMainFunction";
import { useMessage } from "@logics_common/useMessage";
@@ -31,7 +33,9 @@ export const useReceiveRoutes = () => {
updateSelectedPresetTabNumber,
updateEnableMultiTranslation,
updateSelectedYourLanguages,
updateSelectedTargetLanguages
updateSelectedTargetLanguages,
updateTranslationEngines,
updateSelectedTranslationEngines,
} = useLanguageSettings();
const { updateSelectableLanguageList } = useSelectableLanguageList();
const {
@@ -78,6 +82,21 @@ export const useReceiveRoutes = () => {
"/set/selected_your_languages": updateSelectedYourLanguages,
"/get/selected_target_languages": updateSelectedTargetLanguages,
"/set/selected_target_languages": updateSelectedTargetLanguages,
"/get/list_translation_engines": (payload) => {
const updateTranslatorAvailability = (keys) => {
return translator_status.map(translator => ({
...translator,
is_available: keys.includes(translator.translator_id),
}));
};
const updated_list = updateTranslatorAvailability(payload);
updateTranslationEngines(updated_list);
},
"/get/selected_translator_engines": updateSelectedTranslationEngines,
"/set/selected_translator_engines": updateSelectedTranslationEngines,
// Language Selector
"/get/list_languages": updateSelectableLanguageList,
@@ -155,7 +174,7 @@ export const useReceiveRoutes = () => {
break;
case 348:
console.log(`from backend: %c ${JSON.stringify(parsed_data)}`, style_348);
// console.log(`from backend: %c ${JSON.stringify(parsed_data)}`, style_348);
break;
default:

8
src-ui/store.js
View File

@@ -5,7 +5,7 @@ import {
} from "jotai";
import {
translator_list,
translator_status,
generateTestData,
word_filter_list,
} from "@data";
@@ -116,6 +116,10 @@ export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_Selec
export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAsyncAtomWithHook({}, "SelectedTargetLanguages");
export const { atomInstance: Atom_TranslationEngines, useHook: useStore_TranslationEngines } = createAsyncAtomWithHook(translator_status, "TranslationEngines");
export const { atomInstance: Atom_SelectedTranslationEngines, useHook: useStore_SelectedTranslationEngines } = createAtomWithHook({}, "SelectedTranslationEngines");
export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
@@ -186,8 +190,6 @@ export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_E
export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAsyncAtomWithHook("show", "SendMessageButtonType");
export const { atomInstance: Atom_TranslatorList, useHook: useStore_TranslatorList } = createAtomWithHook(translator_list, "TranslatorList");
export const { atomInstance: Atom_SelectedTranslatorId, useHook: useStore_SelectedTranslatorId } = createAtomWithHook("CTranslate2", "SelectedTranslatorId");
export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");