From 586aaf0091f5d391ce2dd1eead0155e53ef88e1a Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Sun, 22 Sep 2024 12:02:50 +0900 Subject: [PATCH] [Update] Main Page: Language Settings. Translation Engines. To selectable. --- data.js | 19 ++++------ src-ui/app/App.jsx | 11 +++++- .../TranslatorSelectorOpenButton.jsx | 38 ++++++++++++++----- .../TranslatorSelector.jsx | 22 ++++++----- src-ui/logics/main/useLanguageSettings.js | 34 ++++++++++++++++- src-ui/logics/useReceiveRoutes.js | 23 ++++++++++- src-ui/store.js | 8 ++-- 7 files changed, 116 insertions(+), 39 deletions(-) diff --git a/data.js b/data.js index 800931a6..183a62fd 100644 --- a/data.js +++ b/data.js @@ -1,17 +1,12 @@ -export const translator_list = [ - { translator_key: "DeepL", translator_name: "DeepL", is_available: true }, - { translator_key: "DeepL_API", translator_name: `DeepL\nAPI`, is_available: false }, - { translator_key: "Google", translator_name: "Google", is_available: true }, - { translator_key: "Bing", translator_name: "Bing", is_available: true }, - { translator_key: "Papago", translator_name: "Papago", is_available: true }, - { translator_key: "CTranslate2", translator_name: `Internal\n(Default)`, is_available: true }, +export const translator_status = [ + { translator_id: "DeepL", translator_name: "DeepL", is_available: true }, + { translator_id: "DeepL_API", translator_name: `DeepL\nAPI`, is_available: false }, + { translator_id: "Google", translator_name: "Google", is_available: true }, + { translator_id: "Bing", translator_name: "Bing", is_available: true }, + { translator_id: "Papago", translator_name: "Papago", is_available: true }, + { translator_id: "CTranslate2", translator_name: `Internal\n(Default)`, is_available: true }, ]; -export const test_device_list = { - a: "Device A", - "device b": "Device B", -}; - export const generateTestData = (num) => { const testDataArray = []; diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index eee25022..53e35107 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -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(); diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx index 2a76b220..e0d89d5f 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx @@ -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 (
-

{t("main_page.translator")}

-

{currentTranslator?.translator_name}

+

{t("main_page.translator")}:

+

{selected_translator_name}

- {currentIsOpenedTranslatorSelector && } + {currentIsOpenedTranslatorSelector && + + }
); }; \ No newline at end of file diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx index 8cf654dd..b47561b5 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx @@ -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 (
{columns.map((column, column_index) => (
- {column.map(({ translator_key, translator_name, is_available }) => ( + {column.map(({ translator_id, translator_name, is_available }) => ( ))}
@@ -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 ( diff --git a/src-ui/logics/main/useLanguageSettings.js b/src-ui/logics/main/useLanguageSettings.js index e3a4756f..d38df69d 100644 --- a/src-ui/logics/main/useLanguageSettings.js +++ b/src-ui/logics/main/useLanguageSettings.js @@ -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, }; }; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 5f0198ec..2b8c7eeb 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -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: diff --git a/src-ui/store.js b/src-ui/store.js index 0d62c1ab..bd4c4792 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -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");