feat(ui): store language in redux

invokeai/frontend/web/src/app/components/App.tsx

@@ -11,7 +11,7 @@ import { Box, Flex, Grid, Portal } from '@chakra-ui/react';
 import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import GalleryDrawer from 'features/gallery/components/ImageGalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { memo, ReactNode, useCallback, useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Loading from 'common/components/Loading/Loading';
@@ -22,6 +22,8 @@ import { configChanged } from 'features/system/store/configSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useLogger } from 'app/logging/useLogger';
 import ParametersDrawer from 'features/ui/components/ParametersDrawer';
+import { languageSelector } from 'features/system/store/systemSelectors';
+import i18n from 'i18n';
 
 const DEFAULT_CONFIG = {};
 
@@ -33,6 +35,9 @@ interface Props {
 const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
   useToastWatcher();
   useGlobalHotkeys();
+
+  const language = useAppSelector(languageSelector);
+
   const log = useLogger();
 
   const isLightboxEnabled = useFeatureStatus('lightbox').isFeatureEnabled;
@@ -43,6 +48,10 @@ const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
 
   const dispatch = useAppDispatch();
 
+  useEffect(() => {
+    i18n.changeLanguage(language);
+  }, [language]);
+
   useEffect(() => {
     log.info({ namespace: 'App', data: config }, 'Received config');
     dispatch(configChanged(config));

invokeai/frontend/web/src/features/system/components/LanguagePicker.tsx

@@ -6,46 +6,50 @@ import IAIIconButton from 'common/components/IAIIconButton';
 import IAIPopover from 'common/components/IAIPopover';
 import { useTranslation } from 'react-i18next';
 import { FaCheck, FaLanguage } from 'react-icons/fa';
+import i18n from 'i18n';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { languageSelector } from '../store/systemSelectors';
+import { languageChanged } from '../store/systemSlice';
+
+export const LANGUAGES = {
+  ar: i18n.t('common.langArabic', { lng: 'ar' }),
+  nl: i18n.t('common.langDutch', { lng: 'nl' }),
+  en: i18n.t('common.langEnglish', { lng: 'en' }),
+  fr: i18n.t('common.langFrench', { lng: 'fr' }),
+  de: i18n.t('common.langGerman', { lng: 'de' }),
+  he: i18n.t('common.langHebrew', { lng: 'he' }),
+  it: i18n.t('common.langItalian', { lng: 'it' }),
+  ja: i18n.t('common.langJapanese', { lng: 'ja' }),
+  ko: i18n.t('common.langKorean', { lng: 'ko' }),
+  pl: i18n.t('common.langPolish', { lng: 'pl' }),
+  pt_BR: i18n.t('common.langBrPortuguese', { lng: 'pt_BR' }),
+  pt: i18n.t('common.langPortuguese', { lng: 'pt' }),
+  ru: i18n.t('common.langRussian', { lng: 'ru' }),
+  zh_CN: i18n.t('common.langSimplifiedChinese', { lng: 'zh_CN' }),
+  es: i18n.t('common.langSpanish', { lng: 'es' }),
+  uk: i18n.t('common.langUkranian', { lng: 'ua' }),
+};
 
 export default function LanguagePicker() {
-  const { t, i18n } = useTranslation();
-  const LANGUAGES = {
-    ar: t('common.langArabic', { lng: 'ar' }),
-    nl: t('common.langDutch', { lng: 'nl' }),
-    en: t('common.langEnglish', { lng: 'en' }),
-    fr: t('common.langFrench', { lng: 'fr' }),
-    de: t('common.langGerman', { lng: 'de' }),
-    he: t('common.langHebrew', { lng: 'he' }),
-    it: t('common.langItalian', { lng: 'it' }),
-    ja: t('common.langJapanese', { lng: 'ja' }),
-    ko: t('common.langKorean', { lng: 'ko' }),
-    pl: t('common.langPolish', { lng: 'pl' }),
-    pt_BR: t('common.langBrPortuguese', { lng: 'pt_BR' }),
-    pt: t('common.langPortuguese', { lng: 'pt' }),
-    ru: t('common.langRussian', { lng: 'ru' }),
-    zh_CN: t('common.langSimplifiedChinese', { lng: 'zh_CN' }),
-    es: t('common.langSpanish', { lng: 'es' }),
-    uk: t('common.langUkranian', { lng: 'ua' }),
-  };
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const language = useAppSelector(languageSelector);
 
   const renderLanguagePicker = () => {
     const languagesToRender: ReactNode[] = [];
     Object.keys(LANGUAGES).forEach((lang) => {
+      const l = lang as keyof typeof LANGUAGES;
       languagesToRender.push(
         <IAIButton
           key={lang}
-          isChecked={localStorage.getItem('i18nextLng') === lang}
-          leftIcon={
-            localStorage.getItem('i18nextLng') === lang ? (
-              <FaCheck />
-            ) : undefined
-          }
-          onClick={() => i18n.changeLanguage(lang)}
-          aria-label={LANGUAGES[lang as keyof typeof LANGUAGES]}
+          isChecked={language === l}
+          leftIcon={language === l ? <FaCheck /> : undefined}
+          onClick={() => dispatch(languageChanged(l))}
+          aria-label={LANGUAGES[l]}
           size="sm"
           minWidth="200px"
         >
-          {LANGUAGES[lang as keyof typeof LANGUAGES]}
+          {LANGUAGES[l]}
         </IAIButton>
       );
     });

invokeai/frontend/web/src/features/system/store/systemSelectors.ts

@@ -1,6 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
-import { isEqual, reduce, pickBy } from 'lodash-es';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import { reduce, pickBy } from 'lodash-es';
 
 export const systemSelector = (state: RootState) => state.system;
 
@@ -22,11 +23,7 @@ export const activeModelSelector = createSelector(
     );
     return { ...model_list[activeModel], name: activeModel };
   },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: isEqual,
-    },
-  }
+  defaultSelectorOptions
 );
 
 export const diffusersModelsSelector = createSelector(
@@ -42,9 +39,11 @@ export const diffusersModelsSelector = createSelector(
 
     return diffusersModels;
   },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: isEqual,
-    },
-  }
+  defaultSelectorOptions
+);
+
+export const languageSelector = createSelector(
+  systemSelector,
+  (system) => system.language,
+  defaultSelectorOptions
 );

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -24,6 +24,7 @@ import { InvokeLogLevel } from 'app/logging/useLogger';
 import { TFuncKey } from 'i18next';
 import { t } from 'i18next';
 import { userInvoked } from 'app/store/actions';
+import { LANGUAGES } from '../components/LanguagePicker';
 
 export type CancelStrategy = 'immediate' | 'scheduled';
 
@@ -91,6 +92,7 @@ export interface SystemState {
   infillMethods: InfillMethod[];
   isPersisted: boolean;
   shouldAntialiasProgressImage: boolean;
+  language: keyof typeof LANGUAGES;
 }
 
 export const initialSystemState: SystemState = {
@@ -125,6 +127,7 @@ export const initialSystemState: SystemState = {
   canceledSession: '',
   infillMethods: ['tile', 'patchmatch'],
   isPersisted: false,
+  language: 'en',
 };
 
 export const systemSlice = createSlice({
@@ -272,6 +275,9 @@ export const systemSlice = createSlice({
     isPersistedChanged: (state, action: PayloadAction<boolean>) => {
       state.isPersisted = action.payload;
     },
+    languageChanged: (state, action: PayloadAction<keyof typeof LANGUAGES>) => {
+      state.language = action.payload;
+    },
   },
   extraReducers(builder) {
     /**
@@ -481,6 +487,7 @@ export const {
   shouldLogToConsoleChanged,
   isPersistedChanged,
   shouldAntialiasProgressImageChanged,
+  languageChanged,
 } = systemSlice.actions;
 
 export default systemSlice.reducer;

invokeai/frontend/web/src/i18n.ts

@@ -21,11 +21,11 @@ if (import.meta.env.MODE === 'package') {
 } else {
   i18n
     .use(Backend)
-    .use(
-      new LanguageDetector(null, {
-        lookupLocalStorage: `${LOCALSTORAGE_PREFIX}lng`,
-      })
-    )
+    // .use(
+    //   new LanguageDetector(null, {
+    //     lookupLocalStorage: `${LOCALSTORAGE_PREFIX}lng`,
+    //   })
+    // )
     .use(initReactI18next)
     .init({
       fallbackLng: 'en',