feat: support automatic i18n detection for ConfigProvider

Author: Col0ring

.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,9 +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';
 
+function formatLocale(locale: string | null) {
+  if (!locale) {
+    return 'en_US';
+  }
+
+  const parts = locale.replace('-', '_').split('_');
+
+  if (parts.length === 2) {
+    return `${parts[0].toLowerCase()}_${parts[1].toUpperCase()}`;
+  }
+  return 'en_US';
+}
+
 const combinePropsAndSlots = (
   props: Record<string, any>,
   slots: Record<string, HTMLElement>
@@ -61,7 +75,7 @@ export const ConfigProvider = sveltify<
     id,
     className,
     style,
-    locale: localeProp = 'en_US',
+    locale: localeProp = formatLocale(getLocaleFromNavigator()),
     getTargetContainer,
     getPopupContainer,
     renderEmpty,
@@ -82,14 +96,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 (