fix: expand rows in models after operating

src/components/seal-table/components/table-row.tsx

@@ -44,8 +44,6 @@ const TableRow: React.FC<
     allSubChildren?: any[];
   }>(TableContext);
   const { setChunkRequest } = useSetChunkRequest();
-  const [expanded, setExpanded] = useState(false);
-  // const [checked, setChecked] = useState(false);
   const [childrenData, setChildrenData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [firstLoad, setFirstLoad] = useState(true);
@@ -73,6 +71,10 @@ const TableRow: React.FC<
     };
   }, []);
 
+  const expanded = useMemo(() => {
+    return expandedRowKeys?.includes(record[rowKey]);
+  }, [expandedRowKeys]);
+
   const checked = useMemo(() => {
     return rowSelection?.selectedRowKeys?.includes(record[rowKey]);
   }, [rowSelection?.selectedRowKeys, record, rowKey]);
@@ -160,7 +162,6 @@ const TableRow: React.FC<
   };
 
   const handleRowExpand = async () => {
-    setExpanded(!expanded);
     onExpand?.(!expanded, record, record[rowKey]);
 
     if (pollTimer.current) {
@@ -200,14 +201,6 @@ const TableRow: React.FC<
     }
   };
 
-  useEffect(() => {
-    if (expandedRowKeys?.includes(record[rowKey])) {
-      setExpanded(true);
-    } else {
-      setExpanded(false);
-    }
-  }, [expandedRowKeys]);
-
   useEffect(() => {
     const handleVisibilityChange = async () => {
       if (document.visibilityState === 'hidden') {

src/layouts/index.tsx

@@ -206,7 +206,11 @@ export default (props: any) => {
       updateCheck.latest_version?.indexOf('0.0.0') === -1 &&
       updateCheck.latest_version?.indexOf('rc') === -1
     );
-  }, [updateCheck, version, initialState]);
+  }, [
+    updateCheck.latest_version,
+    version.version,
+    initialState?.currentUser?.is_admin
+  ]);
 
   useEffect(() => {
     const body = document.querySelector('body');
@@ -279,9 +283,107 @@ export default (props: any) => {
 
       return dom;
     },
-    [intl, version, updateCheck]
+    [intl, showUpgrade]
   );
 
+  const itemRender = useCallback((route, _, routes) => {
+    const { breadcrumbName, title, path } = route;
+    const label = title || breadcrumbName;
+    const last = routes[routes.length - 1];
+    if (last) {
+      if (last.path === path || last.linkPath === path) {
+        return <span>{label}</span>;
+      }
+    }
+    return <Link to={path}>{label}</Link>;
+  }, []);
+
+  const menuItemRender = useCallback(
+    (menuItemProps, defaultDom) => {
+      if (menuItemProps.isUrl || menuItemProps.children) {
+        return defaultDom;
+      }
+      if (menuItemProps.path && location.pathname !== menuItemProps.path) {
+        return (
+          <Link
+            to={menuItemProps.path.replace('/*', '')}
+            target={menuItemProps.target}
+          >
+            {defaultDom}
+          </Link>
+        );
+      }
+      return <>{defaultDom}</>;
+    },
+    [location.pathname]
+  );
+
+  const onPageChange = useCallback(
+    (route) => {
+      const { location } = history;
+      const { pathname } = location;
+
+      initRouteCacheValue(pathname);
+      dropRouteCache(pathname);
+
+      // if user is not change password, redirect to change password page
+      if (
+        location.pathname !== loginPath &&
+        userInfo?.require_password_change
+      ) {
+        history.push(loginPath);
+        return;
+      }
+
+      // if user is not logged in, redirect to login page
+      if (!initialState?.currentUser && location.pathname !== loginPath) {
+        history.push(loginPath);
+      } else if (location.pathname === '/') {
+        const pathname = initialState?.currentUser?.is_admin
+          ? '/dashboard'
+          : '/playground';
+        history.push(pathname);
+      }
+    },
+    [userInfo?.require_password_change, initialState?.currentUser]
+  );
+
+  useEffect(() => {
+    // 先清除旧的性能标记
+    performance.clearMarks();
+    performance.clearMeasures();
+
+    // 记录开始时间
+    performance.mark('route-start');
+
+    requestAnimationFrame(() => {
+      // 记录结束时间
+      performance.mark('route-end');
+
+      // 确保 `route-start` 存在后再测量
+      if (performance.getEntriesByName('route-start').length > 0) {
+        performance.measure('route-change', 'route-start', 'route-end');
+
+        const measure = performance.getEntriesByName('route-change')[0];
+        console.log(
+          `[Performance] Route change to ${location.pathname} took ${measure.duration.toFixed(2)}ms`
+        );
+
+        // 清理标记
+        performance.clearMarks();
+        performance.clearMeasures();
+      } else {
+        console.warn('Missing performance mark: route-start');
+      }
+    });
+  }, [location.pathname]);
+
+  const onRenderCallback = (id, phase, actualDuration) => {
+    console.log(
+      `[Profiler] Route: ${id} - Phase: ${phase} - Render time: ${actualDuration.toFixed(2)}ms`
+    );
+  };
+
   return (
     <div>
       <div className="background"></div>
@@ -311,65 +413,14 @@ export default (props: any) => {
         }}
         menuHeaderRender={renderMenuHeader}
         collapsed={collapsed}
-        onPageChange={(route) => {
+        onPageChange={onPageChange}
-          const { location } = history;
-          const { pathname } = location;
-
-          initRouteCacheValue(pathname);
-          dropRouteCache(pathname);
-
-          // if user is not change password, redirect to change password page
-          if (
-            location.pathname !== loginPath &&
-            userInfo?.require_password_change
-          ) {
-            history.push(loginPath);
-
-            return;
-          }
-
-          // if user is not logged in, redirect to login page
-          if (!initialState?.currentUser && location.pathname !== loginPath) {
-            history.push(loginPath);
-          } else if (location.pathname === '/') {
-            const pathname = initialState?.currentUser?.is_admin
-              ? '/dashboard'
-              : '/playground';
-            history.push(pathname);
-          }
-        }}
         formatMessage={formatMessage}
         menu={{
           locale: true
         }}
         logo={collapsed ? SLogoIcon : LogoIcon}
-        menuItemRender={(menuItemProps, defaultDom) => {
+        menuItemRender={menuItemRender}
-          if (menuItemProps.isUrl || menuItemProps.children) {
+        itemRender={itemRender}
-            return defaultDom;
-          }
-          if (menuItemProps.path && location.pathname !== menuItemProps.path) {
-            return (
-              <Link
-                to={menuItemProps.path.replace('/*', '')}
-                target={menuItemProps.target}
-              >
-                {defaultDom}
-              </Link>
-            );
-          }
-          return <>{defaultDom}</>;
-        }}
-        itemRender={(route, _, routes) => {
-          const { breadcrumbName, title, path } = route;
-          const label = title || breadcrumbName;
-          const last = routes[routes.length - 1];
-          if (last) {
-            if (last.path === path || last.linkPath === path) {
-              return <span>{label}</span>;
-            }
-          }
-          return <Link to={path}>{label}</Link>;
-        }}
         disableContentMargin
         fixSiderbar
         fixedHeader

src/pages/llmodels/components/table-list.tsx

@@ -600,7 +600,6 @@ const Models: React.FC<ModelsProps> = ({
 
   const handleEdit = async (row: ListItem) => {
     const initialValues = generateFormValues(row, gpuDeviceList.current);
-    console.log('initialValues:', initialValues, row);
     setUpdateFormInitials({
       gpuOptions: gpuDeviceList.current,
       data: initialValues,
@@ -818,7 +817,7 @@ const Models: React.FC<ModelsProps> = ({
         )
       }
     ];
-  }, [sortOrder, intl]);
+  }, [sortOrder, intl, handleSelect]);
 
   const handleOnClick = async () => {
     if (isLoading) {

src/pages/playground/components/ground-embedding.tsx

@@ -22,7 +22,6 @@ import 'overlayscrollbars/overlayscrollbars.css';
 import { Resizable } from 're-resizable';
 import {
   forwardRef,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -728,4 +727,4 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default memo(GroundEmbedding);
+export default GroundEmbedding;

src/pages/playground/components/ground-images.tsx

@@ -12,7 +12,6 @@ import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
 import React, {
   forwardRef,
-  memo,
   useCallback,
   useImperativeHandle,
   useMemo,
@@ -183,8 +182,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       form.current?.form?.setFieldValue('seed', params.seed);
       console.log('params:', params, parameters);
-      submitMessage(params);
       setRouteCache(routeCachekey['/playground/text-to-image'], true);
+      await submitMessage(params);
     } catch (error) {
       // console.log('error:', error);
     } finally {
@@ -193,9 +192,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
   };
 
-  const handleCloseViewCode = () => {
+  const handleCloseViewCode = useCallback(() => {
     setShow(false);
-  };
+  }, []);
 
   return (
     <div className="ground-left-wrapper">
@@ -343,4 +342,4 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default memo(GroundImages);
+export default GroundImages;

src/pages/playground/components/ground-left.tsx

@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import 'overlayscrollbars/overlayscrollbars.css';
 import {
   forwardRef,
-  memo,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -211,4 +210,4 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default memo(GroundLeft);
+export default GroundLeft;

src/pages/playground/components/ground-reranker.tsx

@@ -16,7 +16,6 @@ import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
 import {
   forwardRef,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -610,4 +609,4 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default memo(GroundReranker);
+export default GroundReranker;

src/pages/playground/components/ground-stt.tsx

@@ -16,7 +16,6 @@ import classNames from 'classnames';
 import 'overlayscrollbars/overlayscrollbars.css';
 import {
   forwardRef,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -37,11 +36,10 @@ import ViewCommonCode from './view-common-code';
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
-  loaded?: boolean;
   ref?: any;
 }
 
-const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
+const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
   const intl = useIntl();
   const { modelList } = props;
   const messageId = useRef<number>(0);
@@ -474,4 +472,4 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default memo(GroundLeft);
+export default GroundSTT;

src/pages/playground/components/ground-tts.tsx

@@ -13,7 +13,6 @@ import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
 import {
   forwardRef,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -37,7 +36,7 @@ interface MessageProps {
   ref?: any;
 }
 
-const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
+const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
   const { modelList } = props;
   const messageId = useRef<number>(0);
   const [messageList, setMessageList] = useState<
@@ -423,4 +422,4 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default memo(GroundLeft);
+export default GroundTTS;

src/pages/playground/components/image-edit.tsx

@@ -14,7 +14,6 @@ import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
 import React, {
   forwardRef,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -210,8 +209,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       form.current?.form?.setFieldValue('seed', params.seed);
       console.log('params:', params, parameters);
-      submitMessage(params);
       setRouteCache(routeCachekey['/playground/text-to-image'], true);
+      await submitMessage(params);
     } catch (error) {
       // console.log('error:', error);
     } finally {
@@ -566,4 +565,4 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default memo(GroundImages);
+export default GroundImages;

src/pages/playground/components/params-settings.tsx

@@ -118,19 +118,19 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
       defaultMaxTokens = obj.max_model_len / 2;
     }
 
-    form.setFieldsValue({
+    const initials = {
       ..._.omit(obj, ['n_ctx', 'n_slot', 'max_model_len']),
+      seed: obj.seed === -1 ? null : obj.seed,
       max_tokens: defaultMaxTokens
-    });
+    };
+
+    form.setFieldsValue(initials);
 
     setMetaData({
       ...obj,
       max_tokens: obj.max_model_len || _.divide(obj.n_ctx, obj.n_slot)
     });
-    return {
+    return initials;
-      ..._.omit(obj, ['n_ctx', 'n_slot', 'max_model_len']),
-      max_tokens: defaultMaxTokens
-    };
   };
 
   useEffect(() => {

src/pages/playground/hooks/config.ts

@@ -14,7 +14,8 @@ export const IMG_METAKEYS = [
   'schedule_method',
   'cfg_scale',
   'guidance',
-  'negative_prompt'
+  'negative_prompt',
+  'seed'
 ];
 
 export const llmInitialValues = {

src/pages/playground/hooks/use-init-meta.ts

@@ -51,14 +51,14 @@ export const useInitLLmMeta = (
   } = options;
   const formRef = useRef<any>(null);
   const [searchParams] = useSearchParams();
-  const selectModel = searchParams.get('model') || '';
+  const defaultModel = searchParams.get('model') || modelList?.[0]?.value || '';
   const [modelMeta, setModelMeta] = useState<any>({});
   const [initialValues, setInitialValues] = useState<any>({
     ...defaultValues,
-    model: selectModel
+    model: defaultModel
   });
   const [parameters, setParams] = useState<any>({
-    model: selectModel
+    model: defaultModel
   });
   const [paramsConfig, setParamsConfig] =
     useState<ParamsSchema[]>(defaultParamsConfig);
@@ -88,6 +88,7 @@ export const useInitLLmMeta = (
     return {
       form: _.merge({}, defaultValues, {
         ..._.omit(obj, ['n_ctx', 'n_slot', 'max_model_len']),
+        seed: obj.seed === -1 ? null : obj.seed,
         max_tokens: defaultMaxTokens
       }),
       meta: {
@@ -128,11 +129,10 @@ export const useInitLLmMeta = (
   );
 
   useEffect(() => {
-    if (!parameters.model && modelList.length) {
+    if (defaultModel) {
-      const model = modelList[0]?.value;
+      handleOnModelChange(defaultModel);
-      handleOnModelChange(model);
     }
-  }, [modelList, parameters.model, handleOnModelChange]);
+  }, [defaultModel, handleOnModelChange]);
 
   useEffect(() => {
     if (paramsRef.current) {
@@ -263,6 +263,7 @@ export const useInitImageMeta = (props: MessageProps) => {
         { ...imgInitialValues, ...advancedFieldsDefaultValus },
         {
           ..._.pick(meta, IMG_METAKEYS),
+          seed: meta?.seed === -1 ? null : meta?.seed,
           size: sizeOptions.length
             ? `${meta?.default_width || 512}x${meta?.default_height || 512}`
             : 'custom',

src/pages/playground/images.tsx

@@ -9,7 +9,7 @@ import { useIntl } from '@umijs/max';
 import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { queryModelsList } from './apis';
 import GroundImages from './components/ground-images';
@@ -28,9 +28,9 @@ const TextToImages: React.FC = () => {
   const groundTabRef1 = useRef<any>(null);
   const groundTabRef2 = useRef<any>(null);
   const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
-  const [loaded, setLoaded] = useState(false);
 
-  const optionsList = [
+  const optionsList = useMemo(() => {
+    return [
       {
         label: intl.formatMessage({ id: 'playground.image.generate' }),
         value: TabsValueMap.Tab1,
@@ -42,6 +42,7 @@ const TextToImages: React.FC = () => {
         icon: <HighlightOutlined />
       }
     ];
+  }, [intl]);
 
   const handleViewCode = useCallback(() => {
     if (activeKey === TabsValueMap.Tab1) {
@@ -59,12 +60,16 @@ const TextToImages: React.FC = () => {
     groundTabRef2.current?.setCollapse?.();
   }, [activeKey]);
 
-  const items: TabsProps['items'] = [
+  const items: TabsProps['items'] = useMemo(() => {
+    return [
       {
         key: TabsValueMap.Tab1,
         label: 'Generate',
         children: (
-        <GroundImages ref={groundTabRef1} modelList={modelList}></GroundImages>
+          <GroundImages
+            ref={groundTabRef1}
+            modelList={modelList}
+          ></GroundImages>
         )
       },
       {
@@ -73,13 +78,12 @@ const TextToImages: React.FC = () => {
         children: <ImageEdit modelList={modelList} ref={groundTabRef2} />
       }
     ];
+  }, [modelList]);
 
   useEffect(() => {
-    if (size.width < breakpoints.lg) {
+    if (size.width < breakpoints.lg && !groundTabRef1.current?.collapse) {
-      if (!groundTabRef1.current?.collapse) {
       groundTabRef1.current?.setCollapse?.();
     }
-    }
   }, [size.width]);
 
   useEffect(() => {
@@ -109,13 +113,13 @@ const TextToImages: React.FC = () => {
         const modelist = await getModelList();
         setModelList(modelist);
       } catch (error) {
-        setLoaded(true);
+        // error
       }
     };
     fetchData();
   }, []);
 
-  const renderExtra = () => {
+  const renderExtra = useMemo(() => {
     return (
       <Space key="buttons">
         <Button
@@ -137,22 +141,10 @@ const TextToImages: React.FC = () => {
         ></Button>
       </Space>
     );
-  };
+  }, [intl, handleViewCode, handleToggleCollapse]);
 
-  useHotkeys(
+  const header = useMemo(() => {
-    HotKeys.RIGHT.join(','),
+    return {
-    () => {
-      groundTabRef1.current?.setCollapse?.();
-    },
-    {
-      preventDefault: true
-    }
-  );
-
-  return (
-    <PageContainer
-      ghost
-      header={{
       title: (
         <div className="flex items-center">
           <span className="font-600">
@@ -172,8 +164,24 @@ const TextToImages: React.FC = () => {
         paddingInline: 'var(--layout-content-header-inlinepadding)'
       },
       breadcrumb: {}
-      }}
+    };
-      extra={renderExtra()}
+  }, [optionsList]);
+
+  useHotkeys(
+    HotKeys.RIGHT.join(','),
+    () => {
+      groundTabRef1.current?.setCollapse?.();
+    },
+    {
+      preventDefault: true
+    }
+  );
+
+  return (
+    <PageContainer
+      ghost
+      header={header}
+      extra={renderExtra}
       className={classNames('playground-container chat')}
     >
       <div className="play-ground">

src/pages/playground/index.tsx

@@ -9,7 +9,7 @@ import { useIntl } from '@umijs/max';
 import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { queryModelsList } from './apis';
 import GroundLeft from './components/ground-left';
@@ -24,7 +24,9 @@ const Playground: React.FC = () => {
   const groundRerankerRef = useRef<any>(null);
   const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
   const [loaded, setLoaded] = useState(false);
-  const optionsList = [
+
+  const optionsList = useMemo(() => {
+    return [
       {
         label: intl.formatMessage({ id: 'menu.playground.chat' }),
         value: 'chat',
@@ -36,6 +38,7 @@ const Playground: React.FC = () => {
         icon: <OneToOneOutlined />
       }
     ];
+  }, [intl]);
 
   const handleViewCode = useCallback(() => {
     if (activeKey === 'reranker') {
@@ -43,7 +46,7 @@ const Playground: React.FC = () => {
     } else if (activeKey === 'chat') {
       groundLeftRef.current?.viewCode?.();
     }
-  }, [groundLeftRef, groundRerankerRef, activeKey]);
+  }, [activeKey]);
 
   const handleToggleCollapse = useCallback(() => {
     if (activeKey === 'reranker') {
@@ -51,9 +54,10 @@ const Playground: React.FC = () => {
       return;
     }
     groundLeftRef.current?.setCollapse?.();
-  }, [groundLeftRef, groundRerankerRef, activeKey]);
+  }, [activeKey]);
 
-  const items: TabsProps['items'] = [
+  const items: TabsProps['items'] = useMemo(() => {
+    return [
       {
         key: 'chat',
         label: 'Chat',
@@ -67,17 +71,16 @@ const Playground: React.FC = () => {
         children: <MultipleChat modelList={modelList} loaded={loaded} />
       }
     ];
+  }, [modelList, loaded]);
 
   useEffect(() => {
-    if (size.width < breakpoints.lg) {
+    if (size.width < breakpoints.lg && !groundLeftRef.current?.collapse) {
-      if (!groundLeftRef.current?.collapse) {
       groundLeftRef.current?.setCollapse?.();
     }
-    }
   }, [size.width]);
 
   useEffect(() => {
-    const getModelList = async () => {
+    const fetchData = async () => {
       try {
         const params = {
           categories: modelCategoriesMap.llm,
@@ -91,25 +94,18 @@ const Playground: React.FC = () => {
             meta: item.meta
           };
         }) as Global.BaseOption<string>[];
-        return list;
+        setModelList(list);
       } catch (error) {
         console.error(error);
-        return [];
+      } finally {
-      }
-    };
-
-    const fetchData = async () => {
-      try {
-        const modelist = await getModelList();
-        setModelList(modelist);
-      } catch (error) {
         setLoaded(true);
       }
     };
+
     fetchData();
   }, []);
 
-  const renderExtra = () => {
+  const renderExtra = useMemo(() => {
     if (activeKey === 'compare') {
       return false;
     }
@@ -134,22 +130,10 @@ const Playground: React.FC = () => {
         ></Button>
       </Space>
     );
-  };
+  }, [activeKey, intl, handleViewCode, handleToggleCollapse]);
 
-  useHotkeys(
+  const header = useMemo(() => {
-    HotKeys.RIGHT.join(','),
+    return {
-    () => {
-      groundLeftRef.current?.setCollapse?.();
-    },
-    {
-      preventDefault: true
-    }
-  );
-
-  return (
-    <PageContainer
-      ghost
-      header={{
       title: (
         <div className="flex items-center">
           <span className="font-600">
@@ -169,8 +153,26 @@ const Playground: React.FC = () => {
         paddingInline: 'var(--layout-content-header-inlinepadding)'
       },
       breadcrumb: {}
-      }}
+    };
-      extra={renderExtra()}
+  }, [optionsList]);
+
+  useHotkeys(
+    HotKeys.RIGHT.join(','),
+    () => {
+      if (activeKey === 'chat') {
+        groundLeftRef.current?.setCollapse?.();
+      }
+    },
+    {
+      preventDefault: true
+    }
+  );
+
+  return (
+    <PageContainer
+      ghost
+      header={header}
+      extra={renderExtra}
       className={classNames('playground-container', {
         compare: activeKey === 'compare',
         chat: activeKey !== 'compare'

src/pages/playground/speech.tsx

@@ -9,7 +9,7 @@ import { useIntl, useSearchParams } from '@umijs/max';
 import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { queryModelsList } from './apis';
 import GroundSTT from './components/ground-stt';
@@ -37,8 +37,9 @@ const Playground: React.FC = () => {
   const [speechModelList, setSpeechModelList] = useState<
     Global.BaseOption<string>[]
   >([]);
-  const [loaded, setLoaded] = useState(false);
+
-  const optionsList = [
+  const optionsList = useMemo(() => {
+    return [
       {
         label: intl.formatMessage({ id: 'playground.audio.texttospeech' }),
         value: TabsValueMap.Tab1,
@@ -50,6 +51,7 @@ const Playground: React.FC = () => {
         icon: <AudioOutlined />
       }
     ];
+  }, [intl]);
 
   const handleViewCode = useCallback(() => {
     if (activeKey === TabsValueMap.Tab1) {
@@ -67,7 +69,8 @@ const Playground: React.FC = () => {
     groundTabRef2.current?.setCollapse?.();
   }, [activeKey]);
 
-  const items: TabsProps['items'] = [
+  const items: TabsProps['items'] = useMemo(() => {
+    return [
       {
         key: 'tts',
         label: 'TTS',
@@ -81,15 +84,10 @@ const Playground: React.FC = () => {
       {
         key: 'stt',
         label: 'Realtime',
-      children: (
+        children: <GroundSTT modelList={speechModelList} ref={groundTabRef2} />
-        <GroundSTT
-          modelList={speechModelList}
-          loaded={loaded}
-          ref={groundTabRef2}
-        />
-      )
       }
     ];
+  }, [textToSpeechModels, speechModelList]);
 
   useEffect(() => {
     if (size.width < breakpoints.lg) {
@@ -153,13 +151,13 @@ const Playground: React.FC = () => {
         setTextToSpeechModels(textToSpeechModels);
         setSpeechModelList(speechToTextModels);
       } catch (error) {
-        setLoaded(true);
+        // error
       }
     };
     fetchData();
   }, []);
 
-  const renderExtra = () => {
+  const renderExtra = useMemo(() => {
     return (
       <Space key="buttons">
         <Button
@@ -181,22 +179,10 @@ const Playground: React.FC = () => {
         ></Button>
       </Space>
     );
-  };
+  }, [handleToggleCollapse, handleViewCode, intl]);
 
-  useHotkeys(
+  const header = useMemo(() => {
-    HotKeys.RIGHT.join(','),
+    return {
-    () => {
-      groundTabRef1.current?.setCollapse?.();
-    },
-    {
-      preventDefault: true
-    }
-  );
-
-  return (
-    <PageContainer
-      ghost
-      header={{
       title: (
         <div className="flex items-center">
           <span className="font-600">
@@ -217,8 +203,24 @@ const Playground: React.FC = () => {
         paddingInline: 'var(--layout-content-header-inlinepadding)'
       },
       breadcrumb: {}
-      }}
+    };
-      extra={renderExtra()}
+  }, [activeKey, optionsList]);
+
+  useHotkeys(
+    HotKeys.RIGHT.join(','),
+    () => {
+      groundTabRef1.current?.setCollapse?.();
+    },
+    {
+      preventDefault: true
+    }
+  );
+
+  return (
+    <PageContainer
+      ghost
+      header={header}
+      extra={renderExtra}
       className={classNames('playground-container', {
         compare: activeKey === 'compare',
         chat: activeKey !== 'compare'