diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx index 00af95aa4a..eceba85b5a 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx @@ -3,44 +3,46 @@ import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { languageChanged } from 'features/system/store/systemSlice'; +import type { Language } from 'features/system/store/types'; import { isLanguage } from 'features/system/store/types'; +import { map } from 'lodash-es'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; +const optionsObject: Record = { + ar: 'العربية', + az: 'Azərbaycan dili', + de: 'Deutsch', + en: 'English', + es: 'Español', + fi: 'Suomi', + fr: 'Français', + he: 'עִבְֿרִית', + hu: 'Magyar Nyelv', + it: 'Italiano', + ja: '日本語', + ko: '한국어', + nl: 'Nederlands', + pl: 'Polski', + pt: 'Português', + pt_BR: 'Português do Brasil', + ru: 'Русский', + sv: 'Svenska', + tr: 'Türkçe', + ua: 'Украї́нська', + zh_CN: '简体中文', + zh_Hant: '漢語', +}; + +const options = map(optionsObject, (label, value) => ({ label, value })); + export const SettingsLanguageSelect = memo(() => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const language = useAppSelector((s) => s.system.language); - const options = useMemo( - () => [ - { label: 'العربية', value: 'ar' }, - { label: 'Azərbaycan dili', value: 'az' }, - { label: 'Deutsch', value: 'de' }, - { label: 'English', value: 'en' }, - { label: 'Español', value: 'es' }, - { label: 'Suomi', value: 'fi' }, - { label: 'Français', value: 'fr' }, - { label: 'עִבְֿרִית', value: 'he' }, - { label: 'Magyar Nyelv', value: 'hu' }, - { label: 'Italiano', value: 'it' }, - { label: '日本語', value: 'ja' }, - { label: '한국어', value: 'ko' }, - { label: 'Nederlands', value: 'nl' }, - { label: 'Polski', value: 'pl' }, - { label: 'Português', value: 'pt' }, - { label: 'Português do Brasil', value: 'pt_BR' }, - { label: 'Русский', value: 'ru' }, - { label: 'Svenska', value: 'sv' }, - { label: 'Türkçe', value: 'tr' }, - { label: 'Украї́нська', value: 'ua' }, - { label: '简体中文', value: 'zh_CN' }, - { label: '漢語', value: 'zh_Hant' }, - ], - [] - ); const isLocalizationEnabled = useFeatureStatus('localization').isFeatureEnabled; - const value = useMemo(() => options.find((o) => o.value === language), [language, options]); + const value = useMemo(() => options.find((o) => o.value === language), [language]); const onChange = useCallback( (v) => { diff --git a/invokeai/frontend/web/src/features/system/store/types.ts b/invokeai/frontend/web/src/features/system/store/types.ts index 09d5fdcd6f..3575501d86 100644 --- a/invokeai/frontend/web/src/features/system/store/types.ts +++ b/invokeai/frontend/web/src/features/system/store/types.ts @@ -17,21 +17,27 @@ export type DenoiseProgress = { export const zLanguage = z.enum([ 'ar', - 'nl', - 'en', - 'fr', + 'az', 'de', + 'en', + 'es', + 'fi', + 'fr', 'he', + 'hu', 'it', 'ja', 'ko', + 'nl', 'pl', - 'pt_BR', 'pt', + 'pt_BR', 'ru', + 'sv', + 'tr', + 'ua', 'zh_CN', - 'es', - 'uk', + 'zh_Hant', ]); export type Language = z.infer; export const isLanguage = (v: unknown): v is Language => zLanguage.safeParse(v).success;