feat: support automatic i18n detection for ConfigProvider

.changeset/warm-months-hide.md

@@ -0,0 +1,6 @@
+---
+'@modelscope-studio/antd': patch
+'modelscope_studio': patch
+---
+
+feat: support automatic i18n detection for ConfigProvider

backend/modelscope_studio/utils/dev/component.py

@@ -29,11 +29,13 @@ def __init__(
             elem_id: Union[str, None] = None,
             elem_classes: Union[List[str], str, None] = None,
             elem_style: Union[dict, None] = None,
-            render: bool = True):
+            render: bool = True,
+            **kwargs):
         super().__init__(visible=visible,
                          elem_id=elem_id,
                          elem_classes=elem_classes,
-                         render=render)
+                         render=render,
+                         **kwargs)
         AppContext.assert_app()
         self.as_item = as_item
         if self.parent:
@@ -68,7 +70,8 @@ def __init__(
             inputs: Union[Component, List[Component], Set[Component],
                           None] = None,
             load_fn: Union[Callable, None] = None,
-            render: bool = True):
+            render: bool = True,
+            **kwargs):
         super().__init__(visible=visible,
                          value=value,
                          elem_id=elem_id,
@@ -77,7 +80,8 @@ def __init__(
                          every=every,
                          inputs=inputs,
                          load_fn=load_fn,
-                         render=render)
+                         render=render,
+                         **kwargs)
         AppContext.assert_app()
 
         if self.parent:
@@ -130,7 +134,8 @@ def __init__(
             inputs: Union[Component, List[Component], Set[Component],
                           None] = None,
             load_fn: Union[Callable, None] = None,
-            render: bool = True):
+            render: bool = True,
+            **kwargs):
         super().__init__(
             visible=visible,
             value=value,
@@ -141,7 +146,8 @@ def __init__(
             inputs=inputs,
             load_fn=load_fn,
             # disable render twice
-            render=False)
+            render=False,
+            **kwargs)
         BlockContext.__init__(self,
                               visible=visible,
                               elem_id=elem_id,

frontend/antd/config-provider/config-provider.tsx

@@ -9,8 +9,23 @@ import { ConfigProvider as AConfigProvider, type GetProps, theme } from 'antd';
 import type { Locale } from 'antd/es/locale';
 import dayjs from 'dayjs';
 import { produce } from 'immer';
+import { getLocaleFromNavigator } from 'svelte-i18n';
 
-import { getDefaultLocale, locales } from './locales';
+import { getDefaultLocale, lang2RegionMap, locales } from './locales';
+
+function formatLocale(locale: string | null) {
+  if (!locale) {
+    return 'en_US';
+  }
+  let lang = 'en_US';
+  const parts = locale.replace('-', '_').split('_');
+  if (parts.length === 1) {
+    lang = lang2RegionMap[parts[0].toLowerCase()] || 'en_US';
+  } else if (parts.length === 2) {
+    lang = `${parts[0].toLowerCase()}_${parts[1].toUpperCase()}`;
+  }
+  return lang;
+}
 
 const combinePropsAndSlots = (
   props: Record<string, any>,
@@ -61,7 +76,7 @@ export const ConfigProvider = sveltify<
     id,
     className,
     style,
-    locale: localeProp = 'en_US',
+    locale: localeProp = formatLocale(getLocaleFromNavigator()),
     getTargetContainer,
     getPopupContainer,
     renderEmpty,
@@ -82,14 +97,14 @@ export const ConfigProvider = sveltify<
     const getTargetContainerFunction = useFunction(getTargetContainer);
     const renderEmptyFunction = useFunction(renderEmpty);
     useEffect(() => {
-      if (localeProp && locales[localeProp]) {
-        locales[localeProp]().then(
-          ({ antd: antdLocale, dayjs: dayjsLocale }) => {
-            setLocale(antdLocale);
-            dayjs.locale(dayjsLocale);
-          }
-        );
-      }
+      const getLocaleConfig =
+        localeProp && locales[localeProp]
+          ? locales[localeProp]
+          : locales['en_US'];
+      getLocaleConfig().then(({ antd: antdLocale, dayjs: dayjsLocale }) => {
+        setLocale(antdLocale);
+        dayjs.locale(dayjsLocale);
+      });
     }, [localeProp]);
     const ProviderComponent = component || AConfigProvider;
     return (

frontend/antd/config-provider/locales.ts

@@ -9,6 +9,83 @@ export const getDefaultLocale = () => {
   return en_US;
 };
 
+export const lang2RegionMap = {
+  ar: 'ar_EG',
+  az: 'az_AZ',
+  bg: 'bg_BG',
+  bn: 'bn_BD',
+  be: 'by_BY', // Belarusian (Belarus)
+  ca: 'ca_ES',
+  cs: 'cs_CZ',
+  da: 'da_DK',
+  de: 'de_DE',
+  el: 'el_GR',
+  en_gb: 'en_GB',
+  en: 'en_US',
+  es: 'es_ES',
+  et: 'et_EE',
+  eu: 'eu_ES', // Basque
+  fa: 'fa_IR',
+  fi: 'fi_FI',
+  fr_be: 'fr_BE',
+  fr_ca: 'fr_CA',
+  fr_fr: 'fr_FR',
+  fr: 'fr_FR',
+  ga: 'ga_IE', // Irish
+  gl: 'gl_ES', // Galician
+  he: 'he_IL',
+  hi: 'hi_IN',
+  hr: 'hr_HR',
+  hu: 'hu_HU',
+  am: 'hy_AM', // Armenian
+  id: 'id_ID',
+  is: 'is_IS',
+  it: 'it_IT',
+  ja: 'ja_JP',
+  ka: 'ka_GE', // Georgian
+  kk: 'kk_KZ', // Kazakh
+  km: 'km_KH', // Khmer
+  kmr: 'kmr_IQ', // Kurdish (Northern)
+  kn: 'kn_IN', // Kannada
+  ko: 'ko_KR',
+  ku: 'ku_IQ', // Kurdish (Central)
+  lt: 'lt_LT',
+  lv: 'lv_LV',
+  mk: 'mk_MK', // Macedonian
+  ml: 'ml_IN', // Malayalam
+  mn: 'mn_MN', // Mongolian
+  ms: 'ms_MY',
+  my: 'my_MM', // Burmese
+  nb: 'nb_NO', // Norwegian Bokmål
+  ne: 'ne_NP', // Nepali
+  nl_be: 'nl_BE', // Dutch (Belgium)
+  nl_nl: 'nl_NL', // Dutch (Netherlands)
+  nl: 'nl_NL', // Dutch (Netherlands)
+  pl: 'pl_PL',
+  pt_br: 'pt_BR', // Portuguese (Brazil)
+  pt_pt: 'pt_PT', // Portuguese (Portugal)
+  pt: 'pt_PT',
+  ro: 'ro_RO',
+  ru: 'ru_RU',
+  si: 'si_LK', // Sinhala
+  sk: 'sk_SK',
+  sl: 'sl_SI',
+  sr: 'sr_RS', // Serbian
+  sv: 'sv_SE',
+  ta: 'ta_IN', // Tamil
+  th: 'th_TH',
+  tk: 'tk_TK', // Turkmen
+  tr: 'tr_TR',
+  uk: 'uk_UA', // Ukrainian
+  ur: 'ur_PK', // Urdu
+  uz: 'uz_UZ', // Uzbek
+  vi: 'vi_VN',
+  zh: 'zh_CN', // Chinese (Simplified),
+  zh_cn: 'zh_CN', // Chinese (Simplified)
+  zh_hk: 'zh_HK', // Chinese (Hong Kong)
+  zh_tw: 'zh_TW', // Chinese (Taiwan)
+};
+
 export const locales: Record<
   string,
   () => Promise<{ antd: Locale; dayjs: string }>