fix: expand rows in models after operating

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 {
-      ..._.omit(obj, ['n_ctx', 'n_slot', 'max_model_len']),
-      max_tokens: defaultMaxTokens
-    };
+    return initials;
   };
 
   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) {
-      const model = modelList[0]?.value;
-      handleOnModelChange(model);
+    if (defaultModel) {
+      handleOnModelChange(defaultModel);
     }
-  }, [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,20 +28,21 @@ 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 = [
-    {
-      label: intl.formatMessage({ id: 'playground.image.generate' }),
-      value: TabsValueMap.Tab1,
-      icon: <DiffOutlined />
-    },
-    {
-      label: intl.formatMessage({ id: 'playground.image.edit' }),
-      value: TabsValueMap.Tab2,
-      icon: <HighlightOutlined />
-    }
-  ];
+  const optionsList = useMemo(() => {
+    return [
+      {
+        label: intl.formatMessage({ id: 'playground.image.generate' }),
+        value: TabsValueMap.Tab1,
+        icon: <DiffOutlined />
+      },
+      {
+        label: intl.formatMessage({ id: 'playground.image.edit' }),
+        value: TabsValueMap.Tab2,
+        icon: <HighlightOutlined />
+      }
+    ];
+  }, [intl]);
 
   const handleViewCode = useCallback(() => {
     if (activeKey === TabsValueMap.Tab1) {
@@ -59,26 +60,29 @@ const TextToImages: React.FC = () => {
     groundTabRef2.current?.setCollapse?.();
   }, [activeKey]);
 
-  const items: TabsProps['items'] = [
-    {
-      key: TabsValueMap.Tab1,
-      label: 'Generate',
-      children: (
-        <GroundImages ref={groundTabRef1} modelList={modelList}></GroundImages>
-      )
-    },
-    {
-      key: TabsValueMap.Tab2,
-      label: 'Edit',
-      children: <ImageEdit modelList={modelList} ref={groundTabRef2} />
-    }
-  ];
+  const items: TabsProps['items'] = useMemo(() => {
+    return [
+      {
+        key: TabsValueMap.Tab1,
+        label: 'Generate',
+        children: (
+          <GroundImages
+            ref={groundTabRef1}
+            modelList={modelList}
+          ></GroundImages>
+        )
+      },
+      {
+        key: TabsValueMap.Tab2,
+        label: 'Edit',
+        children: <ImageEdit modelList={modelList} ref={groundTabRef2} />
+      }
+    ];
+  }, [modelList]);
 
   useEffect(() => {
-    if (size.width < breakpoints.lg) {
-      if (!groundTabRef1.current?.collapse) {
-        groundTabRef1.current?.setCollapse?.();
-      }
+    if (size.width < breakpoints.lg && !groundTabRef1.current?.collapse) {
+      groundTabRef1.current?.setCollapse?.();
     }
   }, [size.width]);
 
@@ -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,7 +141,31 @@ const TextToImages: React.FC = () => {
         ></Button>
       </Space>
     );
-  };
+  }, [intl, handleViewCode, handleToggleCollapse]);
+
+  const header = useMemo(() => {
+    return {
+      title: (
+        <div className="flex items-center">
+          <span className="font-600">
+            {intl.formatMessage({ id: 'menu.playground.text2images' })}
+          </span>
+          {
+            <Segmented
+              options={optionsList}
+              size="middle"
+              className="m-l-40"
+              onChange={(key) => setActiveKey(key)}
+            ></Segmented>
+          }
+        </div>
+      ),
+      style: {
+        paddingInline: 'var(--layout-content-header-inlinepadding)'
+      },
+      breadcrumb: {}
+    };
+  }, [optionsList]);
 
   useHotkeys(
     HotKeys.RIGHT.join(','),
@@ -152,28 +180,8 @@ const TextToImages: React.FC = () => {
   return (
     <PageContainer
       ghost
-      header={{
-        title: (
-          <div className="flex items-center">
-            <span className="font-600">
-              {intl.formatMessage({ id: 'menu.playground.text2images' })}
-            </span>
-            {
-              <Segmented
-                options={optionsList}
-                size="middle"
-                className="m-l-40"
-                onChange={(key) => setActiveKey(key)}
-              ></Segmented>
-            }
-          </div>
-        ),
-        style: {
-          paddingInline: 'var(--layout-content-header-inlinepadding)'
-        },
-        breadcrumb: {}
-      }}
-      extra={renderExtra()}
+      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,18 +24,21 @@ const Playground: React.FC = () => {
   const groundRerankerRef = useRef<any>(null);
   const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
   const [loaded, setLoaded] = useState(false);
-  const optionsList = [
-    {
-      label: intl.formatMessage({ id: 'menu.playground.chat' }),
-      value: 'chat',
-      icon: <MessageOutlined />
-    },
-    {
-      label: intl.formatMessage({ id: 'menu.compare' }),
-      value: 'compare',
-      icon: <OneToOneOutlined />
-    }
-  ];
+
+  const optionsList = useMemo(() => {
+    return [
+      {
+        label: intl.formatMessage({ id: 'menu.playground.chat' }),
+        value: 'chat',
+        icon: <MessageOutlined />
+      },
+      {
+        label: intl.formatMessage({ id: 'menu.compare' }),
+        value: 'compare',
+        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,33 +54,33 @@ const Playground: React.FC = () => {
       return;
     }
     groundLeftRef.current?.setCollapse?.();
-  }, [groundLeftRef, groundRerankerRef, activeKey]);
+  }, [activeKey]);
 
-  const items: TabsProps['items'] = [
-    {
-      key: 'chat',
-      label: 'Chat',
-      children: (
-        <GroundLeft ref={groundLeftRef} modelList={modelList}></GroundLeft>
-      )
-    },
-    {
-      key: 'compare',
-      label: 'Compare',
-      children: <MultipleChat modelList={modelList} loaded={loaded} />
-    }
-  ];
+  const items: TabsProps['items'] = useMemo(() => {
+    return [
+      {
+        key: 'chat',
+        label: 'Chat',
+        children: (
+          <GroundLeft ref={groundLeftRef} modelList={modelList}></GroundLeft>
+        )
+      },
+      {
+        key: 'compare',
+        label: 'Compare',
+        children: <MultipleChat modelList={modelList} loaded={loaded} />
+      }
+    ];
+  }, [modelList, loaded]);
 
   useEffect(() => {
-    if (size.width < breakpoints.lg) {
-      if (!groundLeftRef.current?.collapse) {
-        groundLeftRef.current?.setCollapse?.();
-      }
+    if (size.width < breakpoints.lg && !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 [];
-      }
-    };
-
-    const fetchData = async () => {
-      try {
-        const modelist = await getModelList();
-        setModelList(modelist);
-      } catch (error) {
+      } finally {
         setLoaded(true);
       }
     };
+
     fetchData();
   }, []);
 
-  const renderExtra = () => {
+  const renderExtra = useMemo(() => {
     if (activeKey === 'compare') {
       return false;
     }
@@ -134,12 +130,38 @@ const Playground: React.FC = () => {
         ></Button>
       </Space>
     );
-  };
+  }, [activeKey, intl, handleViewCode, handleToggleCollapse]);
+
+  const header = useMemo(() => {
+    return {
+      title: (
+        <div className="flex items-center">
+          <span className="font-600">
+            {intl.formatMessage({ id: 'menu.playground.chat' })}
+          </span>
+          {
+            <Segmented
+              options={optionsList}
+              size="middle"
+              className="m-l-40"
+              onChange={(key) => setActiveKey(key)}
+            ></Segmented>
+          }
+        </div>
+      ),
+      style: {
+        paddingInline: 'var(--layout-content-header-inlinepadding)'
+      },
+      breadcrumb: {}
+    };
+  }, [optionsList]);
 
   useHotkeys(
     HotKeys.RIGHT.join(','),
     () => {
-      groundLeftRef.current?.setCollapse?.();
+      if (activeKey === 'chat') {
+        groundLeftRef.current?.setCollapse?.();
+      }
     },
     {
       preventDefault: true
@@ -149,28 +171,8 @@ const Playground: React.FC = () => {
   return (
     <PageContainer
       ghost
-      header={{
-        title: (
-          <div className="flex items-center">
-            <span className="font-600">
-              {intl.formatMessage({ id: 'menu.playground.chat' })}
-            </span>
-            {
-              <Segmented
-                options={optionsList}
-                size="middle"
-                className="m-l-40"
-                onChange={(key) => setActiveKey(key)}
-              ></Segmented>
-            }
-          </div>
-        ),
-        style: {
-          paddingInline: 'var(--layout-content-header-inlinepadding)'
-        },
-        breadcrumb: {}
-      }}
-      extra={renderExtra()}
+      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,19 +37,21 @@ const Playground: React.FC = () => {
   const [speechModelList, setSpeechModelList] = useState<
     Global.BaseOption<string>[]
   >([]);
-  const [loaded, setLoaded] = useState(false);
-  const optionsList = [
-    {
-      label: intl.formatMessage({ id: 'playground.audio.texttospeech' }),
-      value: TabsValueMap.Tab1,
-      icon: <IconFont type={'icon-audio'}></IconFont>
-    },
-    {
-      label: intl.formatMessage({ id: 'playground.audio.speechtotext' }),
-      value: TabsValueMap.Tab2,
-      icon: <AudioOutlined />
-    }
-  ];
+
+  const optionsList = useMemo(() => {
+    return [
+      {
+        label: intl.formatMessage({ id: 'playground.audio.texttospeech' }),
+        value: TabsValueMap.Tab1,
+        icon: <IconFont type={'icon-audio'}></IconFont>
+      },
+      {
+        label: intl.formatMessage({ id: 'playground.audio.speechtotext' }),
+        value: TabsValueMap.Tab2,
+        icon: <AudioOutlined />
+      }
+    ];
+  }, [intl]);
 
   const handleViewCode = useCallback(() => {
     if (activeKey === TabsValueMap.Tab1) {
@@ -67,29 +69,25 @@ const Playground: React.FC = () => {
     groundTabRef2.current?.setCollapse?.();
   }, [activeKey]);
 
-  const items: TabsProps['items'] = [
-    {
-      key: 'tts',
-      label: 'TTS',
-      children: (
-        <GroundTTS
-          ref={groundTabRef1}
-          modelList={textToSpeechModels}
-        ></GroundTTS>
-      )
-    },
-    {
-      key: 'stt',
-      label: 'Realtime',
-      children: (
-        <GroundSTT
-          modelList={speechModelList}
-          loaded={loaded}
-          ref={groundTabRef2}
-        />
-      )
-    }
-  ];
+  const items: TabsProps['items'] = useMemo(() => {
+    return [
+      {
+        key: 'tts',
+        label: 'TTS',
+        children: (
+          <GroundTTS
+            ref={groundTabRef1}
+            modelList={textToSpeechModels}
+          ></GroundTTS>
+        )
+      },
+      {
+        key: 'stt',
+        label: 'Realtime',
+        children: <GroundSTT modelList={speechModelList} 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,7 +179,32 @@ const Playground: React.FC = () => {
         ></Button>
       </Space>
     );
-  };
+  }, [handleToggleCollapse, handleViewCode, intl]);
+
+  const header = useMemo(() => {
+    return {
+      title: (
+        <div className="flex items-center">
+          <span className="font-600">
+            {intl.formatMessage({ id: 'menu.playground.speech' })}
+          </span>
+          {
+            <Segmented
+              options={optionsList}
+              size="middle"
+              className="m-l-40"
+              value={activeKey}
+              onChange={(key) => setActiveKey(key)}
+            ></Segmented>
+          }
+        </div>
+      ),
+      style: {
+        paddingInline: 'var(--layout-content-header-inlinepadding)'
+      },
+      breadcrumb: {}
+    };
+  }, [activeKey, optionsList]);
 
   useHotkeys(
     HotKeys.RIGHT.join(','),
@@ -196,29 +219,8 @@ const Playground: React.FC = () => {
   return (
     <PageContainer
       ghost
-      header={{
-        title: (
-          <div className="flex items-center">
-            <span className="font-600">
-              {intl.formatMessage({ id: 'menu.playground.speech' })}
-            </span>
-            {
-              <Segmented
-                options={optionsList}
-                size="middle"
-                className="m-l-40"
-                value={activeKey}
-                onChange={(key) => setActiveKey(key)}
-              ></Segmented>
-            }
-          </div>
-        ),
-        style: {
-          paddingInline: 'var(--layout-content-header-inlinepadding)'
-        },
-        breadcrumb: {}
-      }}
-      extra={renderExtra()}
+      header={header}
+      extra={renderExtra}
       className={classNames('playground-container', {
         compare: activeKey === 'compare',
         chat: activeKey !== 'compare'