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

data.js

@@ -1,17 +1,12 @@
-export const translator_list = [
+export const translator_status = [
-    { translator_key: "DeepL", translator_name: "DeepL", is_available: true },
+    { translator_id: "DeepL", translator_name: "DeepL", is_available: true },
-    { translator_key: "DeepL_API", translator_name: `DeepL\nAPI`, is_available: false },
+    { translator_id: "DeepL_API", translator_name: `DeepL\nAPI`, is_available: false },
-    { translator_key: "Google", translator_name: "Google", is_available: true },
+    { translator_id: "Google", translator_name: "Google", is_available: true },
-    { translator_key: "Bing", translator_name: "Bing", is_available: true },
+    { translator_id: "Bing", translator_name: "Bing", is_available: true },
-    { translator_key: "Papago", translator_name: "Papago", is_available: true },
+    { translator_id: "Papago", translator_name: "Papago", is_available: true },
-    { translator_key: "CTranslate2", translator_name: `Internal\n(Default)`, 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 = [];

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();

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 {
-    const { currentTranslatorList } = useStore_TranslatorList();
+        currentSelectedPresetTabNumber,
-    const currentTranslator = currentTranslatorList.find(
+        currentTranslationEngines,
-        translator_data => translator_data.translator_key === currentSelectedTranslatorId
+        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}>{t("main_page.translator")}: </p>
-                <p className={styles.label}>{currentTranslator?.translator_name}</p>
+                <p className={styles.label}>{selected_translator_name}</p>
             </div>
-            {currentIsOpenedTranslatorSelector && <TranslatorSelector />}
+            {currentIsOpenedTranslatorSelector &&
+                <TranslatorSelector
+                    selected_translator_id={currentSelectedTranslationEngines}
+                    translation_engines={currentTranslationEngines}
+                />
+            }
         </div>
     );
 };

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";
+import { useStore_IsOpenedTranslatorSelector } from "@store";
-export const TranslatorSelector = () => {
+import { useLanguageSettings } from "@logics_main/useLanguageSettings";
-    const { currentTranslatorList } = useStore_TranslatorList();
+
-    const columns = chunkArray(currentTranslatorList, 2);
+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}
+                                key={translator_id}
-                                translator_id={translator_key}
+                                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 (

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,
     };
 };

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:

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