[Update] Main Page: LanguageSelector. Fetch language list data from Python when starting up software.

data.js

@@ -1,5 +1,3 @@
-export const language_list = [{'language': 'Afrikaans', 'country': 'South Africa'}, {'language': 'Albanian', 'country': 'Albania'}, {'language': 'Amharic', 'country': 'Ethiopia'}, {'language': 'Arabic', 'country': 'Algeria'}, {'language': 'Arabic', 'country': 'Bahrain'}, {'language': 'Arabic', 'country': 'Egypt'}, {'language': 'Arabic', 'country': 'Israel'}, {'language': 'Arabic', 'country': 'Iraq'}, {'language': 'Arabic', 'country': 'Jordan'}, {'language': 'Arabic', 'country': 'Kuwait'}, {'language': 'Arabic', 'country': 'Lebanon'}, {'language': 'Arabic', 'country': 'Mauritania'}, {'language': 'Arabic', 'country': 'Morocco'}, {'language': 'Arabic', 'country': 'Oman'}, {'language': 'Arabic', 'country': 'Qatar'}, {'language': 'Arabic', 'country': 'Saudi Arabia'}, {'language': 'Arabic', 'country': 'Palestine'}, {'language': 'Arabic', 'country': 'Syria'}, {'language': 'Arabic', 'country': 'Tunisia'}, {'language': 'Arabic', 'country': 'United Arab Emirates'}, {'language': 'Arabic', 'country': 'Yemen'}, {'language': 'Armenian', 'country': 'Armenia'}, {'language': 'Azerbaijani', 'country': 'Azerbaijan'}, {'language': 'Basque', 'country': 'Spain'}, {'language': 'Bengali', 'country': 'Bangladesh'}, {'language': 'Bengali', 'country': 'India'}, {'language': 'Bosnian', 'country': 'Bosnia and Herzegovina'}, {'language': 'Bulgarian', 'country': 'Bulgaria'}, {'language': 'Catalan', 'country': 'Spain'}, {'language': 'Chinese Simplified', 'country': 'China'}, {'language': 'Chinese Simplified', 'country': 'Hong Kong'}, {'language': 'Chinese Traditional', 'country': 'Taiwan'}, {'language': 'Chinese Traditional', 'country': 'Hong Kong'}, {'language': 'Croatian', 'country': 'Croatia'}, {'language': 'Czech', 'country': 'Czech Republic'}, {'language': 'Danish', 'country': 'Denmark'}, {'language': 'Dutch', 'country': 'Belgium'}, {'language': 'Dutch', 'country': 'Netherlands'}, {'language': 'English', 'country': 'Australia'}, {'language': 'English', 'country': 'Canada'}, {'language': 'English', 'country': 'Ghana'}, {'language': 'English', 'country': 'Hong Kong'}, {'language': 'English', 'country': 'India'}, {'language': 'English', 'country': 'Ireland'}, {'language': 'English', 'country': 'Kenya'}, {'language': 'English', 'country': 'New Zealand'}, {'language': 'English', 'country': 'Nigeria'}, {'language': 'English', 'country': 'Philippines'}, {'language': 'English', 'country': 'Singapore'}, {'language': 'English', 'country': 'South Africa'}, {'language': 'English', 'country': 'Tanzania'}, {'language': 'English', 'country': 'United Kingdom'}, {'language': 'English', 'country': 'United States'}, {'language': 'Estonian', 'country': 'Estonia'}, {'language': 'Filipino', 'country': 'Philippines'}, {'language': 'Finnish', 'country': 'Finland'}, {'language': 'French', 'country': 'Belgium'}, {'language': 'French', 'country': 'Canada'}, {'language': 'French', 'country': 'France'}, {'language': 'French', 'country': 'Switzerland'}, {'language': 'Galician', 'country': 'Spain'}, {'language': 'Georgian', 'country': 'Georgia'}, {'language': 'German', 'country': 'Austria'}, {'language': 'German', 'country': 'Germany'}, {'language': 'German', 'country': 'Switzerland'}, {'language': 'Greek', 'country': 'Greece'}, {'language': 'Gujarati', 'country': 'India'}, {'language': 'Hebrew', 'country': 'Israel'}, {'language': 'Hindi', 'country': 'India'}, {'language': 'Hungarian', 'country': 'Hungary'}, {'language': 'Icelandic', 'country': 'Iceland'}, {'language': 'Indonesian', 'country': 'Indonesia'}, {'language': 'Italian', 'country': 'Italy'}, {'language': 'Italian', 'country': 'Switzerland'}, {'language': 'Japanese', 'country': 'Japan'}, {'language': 'Kannada', 'country': 'India'}, {'language': 'Kazakh', 'country': 'Kazakhstan'}, {'language': 'Khmer', 'country': 'Cambodia'}, {'language': 'Korean', 'country': 'South Korea'}, {'language': 'Lao', 'country': 'Laos'}, {'language': 'Latvian', 'country': 'Latvia'}, {'language': 'Lithuanian', 'country': 'Lithuania'}, {'language': 'Macedonian', 'country': 'North Macedonia'}, {'language': 'Malay', 'country': 'Malaysia'}, {'language': 'Malayalam', 'country': 'India'}, {'language': 'Mongolian', 'country': 'Mongolia'}, {'language': 'Nepali', 'country': 'Nepal'}, {'language': 'Norwegian', 'country': 'Norway'}, {'language': 'Persian', 'country': 'Iran'}, {'language': 'Polish', 'country': 'Poland'}, {'language': 'Portuguese', 'country': 'Brazil'}, {'language': 'Portuguese', 'country': 'Portugal'}, {'language': 'Romanian', 'country': 'Romania'}, {'language': 'Russian', 'country': 'Russia'}, {'language': 'Serbian', 'country': 'Serbia'}, {'language': 'Sinhala', 'country': 'Sri Lanka'}, {'language': 'Slovak', 'country': 'Slovakia'}, {'language': 'Slovenian', 'country': 'Slovenia'}, {'language': 'Spanish', 'country': 'Argentina'}, {'language': 'Spanish', 'country': 'Bolivia'}, {'language': 'Spanish', 'country': 'Chile'}, {'language': 'Spanish', 'country': 'Colombia'}, {'language': 'Spanish', 'country': 'Costa Rica'}, {'languLine truncated
-
 export const translator_list = [
     { translator_key: "DeepL", translator_name: "DeepL", is_available: true },
     { translator_key: "DeepL_API", translator_name: `DeepL\nAPI`, is_available: false },

src-ui/app/App.jsx

@@ -29,6 +29,8 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 
+import { useSelectableLanguageList } from "@logics/useSelectableLanguageList";
+
 const StartPythonFacadeComponent = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
@@ -44,6 +46,8 @@ const StartPythonFacadeComponent = () => {
     const { getSendMessageButtonType } = useSendMessageButtonType();
     const { getUiLanguage } = useUiLanguage();
 
+    const { getSelectableLanguageList } = useSelectableLanguageList();
+
 
     useEffect(() => {
         main_page.setDecorations(true);
@@ -52,6 +56,9 @@ const StartPythonFacadeComponent = () => {
                 getUiLanguage();
 
                 getSoftwareVersion();
+
+                getSelectableLanguageList();
+
                 getSelectedMicHost();
                 getSelectedMicDevice();
                 getSelectedSpeakerDevice();

src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx

@@ -1,11 +1,13 @@
 import { useTranslation } from "react-i18next";
 
-import { language_list } from "@data";
+import { useSelectableLanguageList } from "@logics/useSelectableLanguageList";
 import styles from "./LanguageSelector.module.scss";
 
 import { LanguageSelectorTopBar } from "./language_selector_top_bar/LanguageSelectorTopBar";
 export const LanguageSelector = ({ id }) => {
     const { t } = useTranslation();
+    const { currentSelectableLanguageList, updateSelectableLanguageList } = useSelectableLanguageList();
+
 
     const languageTitles = {
         "your_language": t("selectable_language_window.title_your_language"),
@@ -25,7 +27,7 @@ export const LanguageSelector = ({ id }) => {
         }, {});
     };
 
-    const groupedLanguages = groupLanguagesByFirstLetter(language_list);
+    const groupedLanguages = groupLanguagesByFirstLetter(currentSelectableLanguageList);
 
     return (
         <div className={styles.container}>

src-ui/logics/useReceiveRoutes.js

@@ -1,6 +1,7 @@
 import { arrayToObject } from "@utils/arrayToObject";
 import { useMainFunction } from "./useMainFunction";
 import { useMessage } from "./useMessage";
+import { useSelectableLanguageList } from "./useSelectableLanguageList";
 import { useVolume } from "./useVolume";
 
 import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
@@ -25,6 +26,8 @@ export const useReceiveRoutes = () => {
         updateTranscriptionReceiveStatus,
     } = useMainFunction();
 
+    const { updateSelectableLanguageList } = useSelectableLanguageList();
+
     const {
         updateSentMessageLogById,
         addSentMessageLog,
@@ -63,6 +66,7 @@ export const useReceiveRoutes = () => {
         "/controller/callback_enable_transcription_receive": updateTranscriptionReceiveStatus,
         "/controller/callback_disable_transcription_receive": updateTranscriptionReceiveStatus,
 
+        "/controller/list_language_and_country": updateSelectableLanguageList,
 
         "/config/version": updateSoftwareVersion,
 

src-ui/logics/useSelectableLanguageList.js

@@ -0,0 +1,17 @@
+import { useStore_SelectableLanguageList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectableLanguageList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectableLanguageList, updateSelectableLanguageList } = useStore_SelectableLanguageList();
+
+    const getSelectableLanguageList = () => {
+        asyncStdoutToPython("/controller/list_language_and_country");
+    };
+
+    return {
+        currentSelectableLanguageList,
+        getSelectableLanguageList,
+        updateSelectableLanguageList,
+    };
+};

src-ui/store.js

@@ -108,6 +108,8 @@ export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_Is
     "IsOpenedLanguageSelector"
 );
 
+export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList");
+
 export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook(1, "SelectedPresetTabNumber");
 export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
 export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");