diff --git a/config/routes.ts b/config/routes.ts
index ee7a95b4..207120d5 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -32,7 +32,7 @@ export default [
         icon: 'icon-chat',
         selectedIcon: 'icon-chat-filled',
         defaultIcon: 'icon-chat',
-        component: './playground/index'
+        component: './playground/chat/index'
       },
       {
         name: 'embedding',
@@ -42,7 +42,7 @@ export default [
         icon: 'icon-embedding',
         selectedIcon: 'icon-embedding-filled',
         defaultIcon: 'icon-embedding',
-        component: './playground/embedding'
+        component: './playground/embedding/index'
       },
       {
         name: 'rerank',
@@ -52,7 +52,7 @@ export default [
         icon: 'icon-reranker',
         selectedIcon: 'icon-reranker-filled',
         defaultIcon: 'icon-reranker',
-        component: './playground/rerank'
+        component: './playground/rerank/index'
       },
       {
         name: 'text2images',
@@ -62,7 +62,7 @@ export default [
         icon: 'icon-image1',
         selectedIcon: 'icon-image-filled',
         defaultIcon: 'icon-image1',
-        component: './playground/images'
+        component: './playground/images/index'
       },
       {
         name: 'speech',
@@ -72,7 +72,7 @@ export default [
         icon: 'icon-audio1',
         selectedIcon: 'icon-audio-filled',
         defaultIcon: 'icon-audio1',
-        component: './playground/speech'
+        component: './playground/speech/index'
       }
     ]
   },
diff --git a/src/pages/playground/index.tsx b/src/pages/playground/chat/index.tsx
similarity index 92%
rename from src/pages/playground/index.tsx
rename to src/pages/playground/chat/index.tsx
index 30894358..ac51e6d9 100644
--- a/src/pages/playground/index.tsx
+++ b/src/pages/playground/chat/index.tsx
@@ -11,12 +11,12 @@ import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { PageContainerInner } from '../_components/page-box';
-import { queryModelsList } from './apis';
-import GroundLLM from './components/ground-llm';
-import MultipleChat from './components/multiple-chat';
-import ViewCodeButtons from './components/view-code-buttons';
-import './style/play-ground.less';
+import { PageContainerInner } from '../../_components/page-box';
+import { queryModelsList } from '../apis';
+import MultipleChat from '../components/multiple-chat';
+import ViewCodeButtons from '../components/view-code-buttons';
+import '../style/play-ground.less';
+import GroundChat from './page';
 
 const Playground: React.FC = () => {
   const intl = useIntl();
@@ -65,7 +65,7 @@ const Playground: React.FC = () => {
         label: 'Chat',
         icon: <MessageOutlined />,
         children: (
-          <GroundLLM ref={groundLeftRef} modelList={modelList}></GroundLLM>
+          <GroundChat ref={groundLeftRef} modelList={modelList}></GroundChat>
         )
       },
       {
diff --git a/src/pages/playground/components/ground-llm.tsx b/src/pages/playground/chat/page.tsx
similarity index 91%
rename from src/pages/playground/components/ground-llm.tsx
rename to src/pages/playground/chat/page.tsx
index a6371081..0b171f13 100644
--- a/src/pages/playground/components/ground-llm.tsx
+++ b/src/pages/playground/chat/page.tsx
@@ -8,8 +8,14 @@ import React, {
   useState
 } from 'react';
 import { CHAT_API } from '../apis';
+import DynamicParams from '../components/dynamic-params';
+import MessageInput from '../components/message-input';
+import MessageContent from '../components/multiple-chat/message-content';
+import SystemMessage from '../components/multiple-chat/system-message';
+import ReferenceParams from '../components/reference-params';
+import RightContainer from '../components/right-container';
+import ViewCommonCode from '../components/view-common-code';
 import { Roles, generateMessagesByListContent } from '../config';
-import { ChatParamsConfig } from '../config/params-config';
 import { MessageItem, MessageItemAction } from '../config/types';
 import { LLM_METAKEYS, llmInitialValues } from '../hooks/config';
 import useChatCompletion from '../hooks/use-chat-completion';
@@ -17,13 +23,7 @@ import { useInitLLmMeta } from '../hooks/use-init-meta';
 import '../style/ground-llm.less';
 import '../style/system-message-wrap.less';
 import { generateLLMCode } from '../view-code/llm';
-import DynamicParams from './dynamic-params';
-import MessageInput from './message-input';
-import MessageContent from './multiple-chat/message-content';
-import SystemMessage from './multiple-chat/system-message';
-import ReferenceParams from './reference-params';
-import RightContainer from './right-container';
-import ViewCommonCode from './view-common-code';
+import { ChatParamsConfig } from './params-config';
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
@@ -57,7 +57,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const {
     handleOnValuesChange,
     formRef,
-    paramsRef,
     paramsConfig,
     initialValues,
     parameters
diff --git a/src/pages/playground/chat/params-config.ts b/src/pages/playground/chat/params-config.ts
new file mode 100644
index 00000000..6995aea6
--- /dev/null
+++ b/src/pages/playground/chat/params-config.ts
@@ -0,0 +1,171 @@
+import { ParamsSchema } from '../config/types';
+
+export const ChatParamsConfig: ParamsSchema[] = [
+  {
+    type: 'Slider',
+    name: 'temperature',
+    label: {
+      text: 'Temperature',
+      isLocalized: false
+    },
+    description: {
+      text: 'playground.params.temperature.tips',
+      html: false,
+      isLocalized: true
+    },
+    attrs: {
+      max: 2,
+      step: 0.01,
+      labelWidth: 314,
+      inputnumber: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'Slider',
+    name: 'max_tokens',
+    label: {
+      text: 'Max Tokens',
+      isLocalized: false
+    },
+    description: {
+      text: 'playground.params.maxtokens.tips',
+      html: false,
+      isLocalized: true
+    },
+    attrs: {
+      max: 1024,
+      step: 1,
+      labelWidth: 314,
+      inputnumber: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'Slider',
+    name: 'top_p',
+    label: {
+      text: 'Top P',
+      isLocalized: false
+    },
+    description: {
+      text: 'playground.params.topp.tips',
+      html: false,
+      isLocalized: true
+    },
+    attrs: {
+      max: 1,
+      step: 0.01,
+      labelWidth: 314,
+      inputnumber: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'Slider',
+    name: 'frequency_penalty',
+    label: {
+      text: 'Frequency Penalty',
+      isLocalized: false
+    },
+    description: {
+      text: 'playground.params.frequency_penalty.tips',
+      html: false,
+      isLocalized: true
+    },
+    attrs: {
+      max: 2,
+      min: -2,
+      step: 0.01,
+      labelWidth: 314,
+      inputnumber: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'Slider',
+    name: 'presence_penalty',
+    label: {
+      text: 'Presence Penalty',
+      isLocalized: false
+    },
+    description: {
+      text: 'playground.params.presence_penalty.tips',
+      html: false,
+      isLocalized: true
+    },
+    attrs: {
+      max: 2,
+      min: -2,
+      step: 0.01,
+      labelWidth: 314,
+      inputnumber: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'InputNumber',
+    name: 'seed',
+    label: {
+      text: 'Seed',
+      isLocalized: false
+    },
+    description: {
+      text: 'playground.params.seed.tips',
+      html: false,
+      isLocalized: true
+    },
+    attrs: {
+      min: 0
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'Input',
+    name: 'stop',
+    label: {
+      text: 'Stop Sequence',
+      isLocalized: false
+    },
+    description: {
+      text: 'playground.params.stop.tips',
+      html: false,
+      isLocalized: true
+    },
+    formItemAttrs: {
+      normalize(value: string) {
+        return value || null;
+      }
+    },
+    attrs: {},
+    rules: [
+      {
+        required: false
+      }
+    ]
+  }
+];
diff --git a/src/pages/playground/components/multiple-chat/model-item.tsx b/src/pages/playground/components/multiple-chat/model-item.tsx
index 95f3ce17..48c65cf7 100644
--- a/src/pages/playground/components/multiple-chat/model-item.tsx
+++ b/src/pages/playground/components/multiple-chat/model-item.tsx
@@ -24,9 +24,9 @@ import React, {
 } from 'react';
 import 'simplebar-react/dist/simplebar.min.css';
 import { CHAT_API } from '../../apis';
+import { ChatParamsConfig } from '../../chat/params-config';
 import { Roles, generateMessagesByListContent } from '../../config';
 import CompareContext from '../../config/compare-context';
-import { ChatParamsConfig } from '../../config/params-config';
 import { MessageItem, ModelSelectionItem } from '../../config/types';
 import { LLM_METAKEYS, llmInitialValues } from '../../hooks/config';
 import useChatCompletion from '../../hooks/use-chat-completion';
diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts
index 6b55ca11..d7ebc10d 100644
--- a/src/pages/playground/config/params-config.ts
+++ b/src/pages/playground/config/params-config.ts
@@ -490,173 +490,3 @@ export const CustomSizeConfig: ParamsSchema[] = [
     ]
   }
 ];
-
-export const ChatParamsConfig: ParamsSchema[] = [
-  {
-    type: 'Slider',
-    name: 'temperature',
-    label: {
-      text: 'Temperature',
-      isLocalized: false
-    },
-    description: {
-      text: 'playground.params.temperature.tips',
-      html: false,
-      isLocalized: true
-    },
-    attrs: {
-      max: 2,
-      step: 0.01,
-      labelWidth: 314,
-      inputnumber: true
-    },
-    rules: [
-      {
-        required: false
-      }
-    ]
-  },
-  {
-    type: 'Slider',
-    name: 'max_tokens',
-    label: {
-      text: 'Max Tokens',
-      isLocalized: false
-    },
-    description: {
-      text: 'playground.params.maxtokens.tips',
-      html: false,
-      isLocalized: true
-    },
-    attrs: {
-      max: 1024,
-      step: 1,
-      labelWidth: 314,
-      inputnumber: true
-    },
-    rules: [
-      {
-        required: false
-      }
-    ]
-  },
-  {
-    type: 'Slider',
-    name: 'top_p',
-    label: {
-      text: 'Top P',
-      isLocalized: false
-    },
-    description: {
-      text: 'playground.params.topp.tips',
-      html: false,
-      isLocalized: true
-    },
-    attrs: {
-      max: 1,
-      step: 0.01,
-      labelWidth: 314,
-      inputnumber: true
-    },
-    rules: [
-      {
-        required: false
-      }
-    ]
-  },
-  {
-    type: 'Slider',
-    name: 'frequency_penalty',
-    label: {
-      text: 'Frequency Penalty',
-      isLocalized: false
-    },
-    description: {
-      text: 'playground.params.frequency_penalty.tips',
-      html: false,
-      isLocalized: true
-    },
-    attrs: {
-      max: 2,
-      min: -2,
-      step: 0.01,
-      labelWidth: 314,
-      inputnumber: true
-    },
-    rules: [
-      {
-        required: false
-      }
-    ]
-  },
-  {
-    type: 'Slider',
-    name: 'presence_penalty',
-    label: {
-      text: 'Presence Penalty',
-      isLocalized: false
-    },
-    description: {
-      text: 'playground.params.presence_penalty.tips',
-      html: false,
-      isLocalized: true
-    },
-    attrs: {
-      max: 2,
-      min: -2,
-      step: 0.01,
-      labelWidth: 314,
-      inputnumber: true
-    },
-    rules: [
-      {
-        required: false
-      }
-    ]
-  },
-  {
-    type: 'InputNumber',
-    name: 'seed',
-    label: {
-      text: 'Seed',
-      isLocalized: false
-    },
-    description: {
-      text: 'playground.params.seed.tips',
-      html: false,
-      isLocalized: true
-    },
-    attrs: {
-      min: 0
-    },
-    rules: [
-      {
-        required: false
-      }
-    ]
-  },
-  {
-    type: 'Input',
-    name: 'stop',
-    label: {
-      text: 'Stop Sequence',
-      isLocalized: false
-    },
-    description: {
-      text: 'playground.params.stop.tips',
-      html: false,
-      isLocalized: true
-    },
-    formItemAttrs: {
-      normalize(value: string) {
-        return value || null;
-      }
-    },
-    attrs: {},
-    rules: [
-      {
-        required: false
-      }
-    ]
-  }
-];
diff --git a/src/pages/playground/embedding.tsx b/src/pages/playground/embedding/index.tsx
similarity index 89%
rename from src/pages/playground/embedding.tsx
rename to src/pages/playground/embedding/index.tsx
index 82603bae..2e43f944 100644
--- a/src/pages/playground/embedding.tsx
+++ b/src/pages/playground/embedding/index.tsx
@@ -8,12 +8,12 @@ import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { PageContainerInner } from '../_components/page-box';
-import { queryModelsList } from './apis';
-import GroundEmbedding from './components/ground-embedding';
-import ViewCodeButtons from './components/view-code-buttons';
-import useCollapseLayout from './hooks/use-collapse-layout';
-import './style/play-ground.less';
+import { PageContainerInner } from '../../_components/page-box';
+import { queryModelsList } from '../apis';
+import ViewCodeButtons from '../components/view-code-buttons';
+import useCollapseLayout from '../hooks/use-collapse-layout';
+import '../style/play-ground.less';
+import GroundEmbedding from './page';
 
 const PlaygroundEmbedding: React.FC = () => {
   const intl = useIntl();
diff --git a/src/pages/playground/components/ground-embedding.tsx b/src/pages/playground/embedding/page.tsx
similarity index 98%
rename from src/pages/playground/components/ground-embedding.tsx
rename to src/pages/playground/embedding/page.tsx
index f3e4c2b7..1ac0c417 100644
--- a/src/pages/playground/components/ground-embedding.tsx
+++ b/src/pages/playground/embedding/page.tsx
@@ -26,6 +26,12 @@ import React, {
   useState
 } from 'react';
 import { EMBEDDING_API, handleEmbedding } from '../apis';
+import DynamicParams from '../components/dynamic-params';
+import FileList from '../components/file-list';
+import InputList from '../components/input-list';
+import RightContainer from '../components/right-container';
+import TokenUsage from '../components/token-usage';
+import ViewCommonCode from '../components/view-common-code';
 import { extractErrorMessage } from '../config';
 import { embeddingSamples } from '../config/samples';
 import { LLM_METAKEYS } from '../hooks/config';
@@ -34,12 +40,6 @@ import { useInitLLmMeta } from '../hooks/use-init-meta';
 import '../style/ground-llm.less';
 import '../style/rerank.less';
 import { generateEmbeddingCode } from '../view-code/embedding';
-import DynamicParams from './dynamic-params';
-import FileList from './file-list';
-import InputList from './input-list';
-import RightContainer from './right-container';
-import TokenUsage from './token-usage';
-import ViewCommonCode from './view-common-code';
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
@@ -109,7 +109,6 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
     paramsConfig,
     initialValues,
     parameters,
-    paramsRef,
     modelMeta,
     formFields
   } = useInitLLmMeta(
diff --git a/src/pages/playground/hooks/use-init-meta.ts b/src/pages/playground/hooks/use-init-meta.ts
index 2b33abb7..01486afd 100644
--- a/src/pages/playground/hooks/use-init-meta.ts
+++ b/src/pages/playground/hooks/use-init-meta.ts
@@ -1,4 +1,3 @@
-import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import {
   CustomSizeConfig,
   ImageCountConfig,
@@ -59,9 +58,6 @@ export const useInitLLmMeta = (
   });
   const [paramsConfig, setParamsConfig] =
     useState<ParamsSchema[]>(defaultParamsConfig);
-  const paramsRef = useRef<any>(null);
-
-  const { initialize: innitializeParams } = useOverlayScroller();
 
   const defaultModel = useMemo(() => {
     if (isChat) {
@@ -172,12 +168,6 @@ export const useInitLLmMeta = (
     }
   }, [defaultModel, modelList.length]);
 
-  useEffect(() => {
-    if (paramsRef.current) {
-      innitializeParams(paramsRef.current);
-    }
-  }, [innitializeParams]);
-
   return {
     extractLLMMeta,
     handleOnModelChange,
@@ -191,7 +181,6 @@ export const useInitLLmMeta = (
     initialValues,
     parameters,
     modelMeta,
-    paramsRef,
     formFields
   };
 };
diff --git a/src/pages/playground/hooks/use-text-image.ts b/src/pages/playground/hooks/use-text-image.ts
index f9b769c4..58cd3d96 100644
--- a/src/pages/playground/hooks/use-text-image.ts
+++ b/src/pages/playground/hooks/use-text-image.ts
@@ -14,7 +14,7 @@ const ODD_STRING = 'AAAABJRU5ErkJgg===';
 
 export default function useTextImage(props: any) {
   const intl = useIntl();
-  const { scroller, paramsRef, chunkFields, API } = props;
+  const { scroller, chunkFields, API } = props;
   const [loading, setLoading] = useState(false);
   const [tokenResult, setTokenResult] = useState<any>(null);
   const [imageList, setImageList] = useState<
@@ -35,7 +35,6 @@ export default function useTextImage(props: any) {
   const messageId = useRef<number>(0);
   const requestToken = useRef<any>(null);
   const { initialize } = useOverlayScroller();
-  const { initialize: innitializeParams } = useOverlayScroller();
   const streamReaderRef = useRef<any>(null);
   const requestIdRef = useRef<number>(0);
 
@@ -44,11 +43,6 @@ export default function useTextImage(props: any) {
       initialize(scroller.current);
     }
   }, [initialize]);
-  useEffect(() => {
-    if (paramsRef.current) {
-      innitializeParams(paramsRef.current);
-    }
-  }, [innitializeParams]);
 
   const updateRequestId = () => {
     requestIdRef.current = requestIdRef.current + 1;
diff --git a/src/pages/playground/hooks/use-text-video.ts b/src/pages/playground/hooks/use-text-video.ts
index fec2c07f..ed2dbdb5 100644
--- a/src/pages/playground/hooks/use-text-video.ts
+++ b/src/pages/playground/hooks/use-text-video.ts
@@ -8,7 +8,7 @@ import { createVideo } from '../apis';
 
 export default function useTextVideo(props: any) {
   const intl = useIntl();
-  const { scroller, paramsRef } = props;
+  const { scroller } = props;
   const [loading, setLoading] = useState(false);
   const [tokenResult, setTokenResult] = useState<any>(null);
   const [videoList, setVideoList] = useState<
@@ -25,7 +25,6 @@ export default function useTextVideo(props: any) {
   const messageId = useRef<number>(0);
   const requestToken = useRef<any>(null);
   const { initialize } = useOverlayScroller();
-  const { initialize: innitializeParams } = useOverlayScroller();
   const requestIdRef = useRef<number>(0);
 
   useEffect(() => {
@@ -33,11 +32,6 @@ export default function useTextVideo(props: any) {
       initialize(scroller.current);
     }
   }, [initialize]);
-  useEffect(() => {
-    if (paramsRef.current) {
-      innitializeParams(paramsRef.current);
-    }
-  }, [innitializeParams]);
 
   const updateRequestId = () => {
     requestIdRef.current = requestIdRef.current + 1;
diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/images/create.tsx
similarity index 97%
rename from src/pages/playground/components/ground-images.tsx
rename to src/pages/playground/images/create.tsx
index 08d8e5fb..663171cf 100644
--- a/src/pages/playground/components/ground-images.tsx
+++ b/src/pages/playground/images/create.tsx
@@ -18,15 +18,15 @@ import React, {
   useState
 } from 'react';
 import { CREAT_IMAGE_API } from '../apis';
+import DynamicParams from '../components/dynamic-params';
+import MessageInput from '../components/message-input';
+import RightContainer from '../components/right-container';
+import ViewCommonCode from '../components/view-common-code';
 import { useInitImageMeta } from '../hooks/use-init-meta';
 import useTextImage from '../hooks/use-text-image';
 import '../style/ground-llm.less';
 import '../style/system-message-wrap.less';
 import { generateImageCode, generateOpenaiImageCode } from '../view-code/image';
-import DynamicParams from './dynamic-params';
-import MessageInput from './message-input';
-import RightContainer from './right-container';
-import ViewCommonCode from './view-common-code';
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
@@ -41,7 +41,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const [show, setShow] = useState(false);
   const [collapse, setCollapse] = useState(false);
   const scroller = useRef<any>(null);
-  const paramsRef = useRef<any>(null);
   const inputRef = useRef<any>(null);
 
   const {
@@ -69,7 +68,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     submitMessage
   } = useTextImage({
     scroller,
-    paramsRef,
     chunkFields: ['stream_options', 'chunk_results'],
     API: CREAT_IMAGE_API
   });
diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/images/edit.tsx
similarity index 98%
rename from src/pages/playground/components/image-edit.tsx
rename to src/pages/playground/images/edit.tsx
index 346fe580..d55001ee 100644
--- a/src/pages/playground/components/image-edit.tsx
+++ b/src/pages/playground/images/edit.tsx
@@ -21,16 +21,16 @@ import React, {
   useState
 } from 'react';
 import { EDIT_IMAGE_API } from '../apis';
+import DynamicParams from '../components/dynamic-params';
+import MessageInput from '../components/message-input';
+import RightContainer from '../components/right-container';
+import ViewCommonCode from '../components/view-common-code';
 import { EDIT_IMAGE_ACCEPT, scaleImageSize } from '../config';
 import { useInitImageMeta } from '../hooks/use-init-meta';
 import useTextImage from '../hooks/use-text-image';
 import '../style/ground-llm.less';
 import '../style/system-message-wrap.less';
 import { generateImageCode, generateOpenaiImageCode } from '../view-code/image';
-import DynamicParams from './dynamic-params';
-import MessageInput from './message-input';
-import RightContainer from './right-container';
-import ViewCommonCode from './view-common-code';
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
@@ -45,7 +45,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const [show, setShow] = useState(false);
   const [collapse, setCollapse] = useState(false);
   const scroller = useRef<any>(null);
-  const paramsRef = useRef<any>(null);
   const inputRef = useRef<any>(null);
   const [image, setImage] = useState<string>('');
   const [mask, setMask] = useState<string | null>(null);
@@ -95,7 +94,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     submitMessage
   } = useTextImage({
     scroller,
-    paramsRef,
     chunkFields: ['stream_options_chunk_result'],
     API: EDIT_IMAGE_API
   });
diff --git a/src/pages/playground/images.tsx b/src/pages/playground/images/index.tsx
similarity index 91%
rename from src/pages/playground/images.tsx
rename to src/pages/playground/images/index.tsx
index 4afbe01f..0a93844b 100644
--- a/src/pages/playground/images.tsx
+++ b/src/pages/playground/images/index.tsx
@@ -11,12 +11,12 @@ import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { PageContainerInner } from '../_components/page-box';
-import { queryModelsList } from './apis';
-import GroundImages from './components/ground-images';
-import ImageEdit from './components/image-edit';
-import ViewCodeButtons from './components/view-code-buttons';
-import './style/play-ground.less';
+import { PageContainerInner } from '../../_components/page-box';
+import { queryModelsList } from '../apis';
+import ViewCodeButtons from '../components/view-code-buttons';
+import '../style/play-ground.less';
+import ImageCreate from './create';
+import ImageEdit from './edit';
 
 const TabsValueMap = {
   Tab1: 'generate',
@@ -68,10 +68,7 @@ const TextToImages: React.FC = () => {
         key: TabsValueMap.Tab1,
         label: 'Generate',
         children: (
-          <GroundImages
-            ref={groundTabRef1}
-            modelList={modelList}
-          ></GroundImages>
+          <ImageCreate ref={groundTabRef1} modelList={modelList}></ImageCreate>
         )
       },
       {
diff --git a/src/pages/playground/reranker/hooks/use-reranker-response.ts b/src/pages/playground/rerank/hooks/use-reranker-response.ts
similarity index 100%
rename from src/pages/playground/reranker/hooks/use-reranker-response.ts
rename to src/pages/playground/rerank/hooks/use-reranker-response.ts
diff --git a/src/pages/playground/rerank.tsx b/src/pages/playground/rerank/index.tsx
similarity index 90%
rename from src/pages/playground/rerank.tsx
rename to src/pages/playground/rerank/index.tsx
index 67700f18..8c9ec726 100644
--- a/src/pages/playground/rerank.tsx
+++ b/src/pages/playground/rerank/index.tsx
@@ -8,12 +8,12 @@ import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { PageContainerInner } from '../_components/page-box';
-import { queryModelsList } from './apis';
-import GroundReranker from './components/ground-reranker';
-import ViewCodeButtons from './components/view-code-buttons';
-import useCollapseLayout from './hooks/use-collapse-layout';
-import './style/play-ground.less';
+import { PageContainerInner } from '../../_components/page-box';
+import { queryModelsList } from '../apis';
+import ViewCodeButtons from '../components/view-code-buttons';
+import useCollapseLayout from '../hooks/use-collapse-layout';
+import '../style/play-ground.less';
+import GroundReranker from './page';
 
 const PlaygroundRerank: React.FC = () => {
   const intl = useIntl();
diff --git a/src/pages/playground/components/ground-reranker.tsx b/src/pages/playground/rerank/page.tsx
similarity index 98%
rename from src/pages/playground/components/ground-reranker.tsx
rename to src/pages/playground/rerank/page.tsx
index a05812e3..b8891df3 100644
--- a/src/pages/playground/components/ground-reranker.tsx
+++ b/src/pages/playground/rerank/page.tsx
@@ -32,21 +32,21 @@ import React, {
 } from 'react';
 import styled from 'styled-components';
 import { RERANKER_API, rerankerQuery } from '../apis';
+import DynamicParams from '../components/dynamic-params';
+import InputList from '../components/input-list';
+import RightContainer from '../components/right-container';
+import TokenUsage from '../components/token-usage';
+import ViewCommonCode from '../components/view-common-code';
 import { extractErrorMessage } from '../config';
 import { rerankerSamples } from '../config/samples';
 import { ParamsSchema } from '../config/types';
 import { LLM_METAKEYS } from '../hooks/config';
 import { useInitLLmMeta } from '../hooks/use-init-meta';
-import useRerankerResponse from '../reranker/hooks/use-reranker-response';
 import '../style/ground-llm.less';
 import '../style/rerank.less';
 import '../style/system-message-wrap.less';
 import { generateRerankCode } from '../view-code/rerank';
-import DynamicParams from './dynamic-params';
-import InputList from './input-list';
-import RightContainer from './right-container';
-import TokenUsage from './token-usage';
-import ViewCommonCode from './view-common-code';
+import useRerankerResponse from './hooks/use-reranker-response';
 
 const { Text } = Typography;
 
@@ -152,7 +152,6 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     paramsConfig,
     initialValues,
     parameters,
-    paramsRef,
     modelMeta,
     formFields
   } = useInitLLmMeta(
diff --git a/src/pages/playground/reranker/params-config.ts b/src/pages/playground/rerank/params-config.ts
similarity index 100%
rename from src/pages/playground/reranker/params-config.ts
rename to src/pages/playground/rerank/params-config.ts
diff --git a/src/pages/playground/audio/form.tsx b/src/pages/playground/speech/form.tsx
similarity index 100%
rename from src/pages/playground/audio/form.tsx
rename to src/pages/playground/speech/form.tsx
diff --git a/src/pages/playground/speech.tsx b/src/pages/playground/speech/index.tsx
similarity index 95%
rename from src/pages/playground/speech.tsx
rename to src/pages/playground/speech/index.tsx
index 268d7fc1..f7bfe6f1 100644
--- a/src/pages/playground/speech.tsx
+++ b/src/pages/playground/speech/index.tsx
@@ -12,12 +12,12 @@ import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { PageContainerInner } from '../_components/page-box';
-import { queryModelsList } from './apis';
-import GroundSTT from './components/ground-stt';
-import GroundTTS from './components/ground-tts';
-import ViewCodeButtons from './components/view-code-buttons';
-import './style/play-ground.less';
+import { PageContainerInner } from '../../_components/page-box';
+import { queryModelsList } from '../apis';
+import ViewCodeButtons from '../components/view-code-buttons';
+import '../style/play-ground.less';
+import GroundSTT from './stt';
+import GroundTTS from './tts';
 
 const TabsValueMap = {
   Tab1: 'tts',
diff --git a/src/pages/playground/audio/params-config.ts b/src/pages/playground/speech/params-config.ts
similarity index 100%
rename from src/pages/playground/audio/params-config.ts
rename to src/pages/playground/speech/params-config.ts
diff --git a/src/pages/playground/components/ground-stt.tsx b/src/pages/playground/speech/stt.tsx
similarity index 97%
rename from src/pages/playground/components/ground-stt.tsx
rename to src/pages/playground/speech/stt.tsx
index e1cf433c..845a9e1d 100644
--- a/src/pages/playground/components/ground-stt.tsx
+++ b/src/pages/playground/speech/stt.tsx
@@ -24,6 +24,10 @@ import React, {
   useState
 } from 'react';
 import { AUDIO_SPEECH_TO_TEXT_API, speechToText } from '../apis';
+import AudioInput from '../components/audio-input';
+import DynamicParams from '../components/dynamic-params';
+import RightContainer from '../components/right-container';
+import ViewCommonCode from '../components/view-common-code';
 import {
   SpeechToTextFormat,
   defaultLanguages,
@@ -36,10 +40,6 @@ import '../style/ground-llm.less';
 import '../style/speech-to-text.less';
 import '../style/system-message-wrap.less';
 import { speechToTextCode } from '../view-code/audio';
-import AudioInput from './audio-input';
-import DynamicParams from './dynamic-params';
-import RightContainer from './right-container';
-import ViewCommonCode from './view-common-code';
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
@@ -68,7 +68,6 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
   const [tokenResult, setTokenResult] = useState<any>(null);
   const [collapse, setCollapse] = useState(false);
   const scroller = useRef<any>(null);
-  const paramsRef = useRef<any>(null);
   const [audioPermissionOn, setAudioPermissionOn] = useState(true);
   const [audioData, setAudioData] = useState<any>(null);
   const [audioChunks, setAudioChunks] = useState<any>({
@@ -81,7 +80,6 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
     useCancelToken();
 
   const { initialize, updateScrollerPosition } = useOverlayScroller();
-  const { initialize: innitializeParams } = useOverlayScroller();
   const [modelMeta, setModelMeta] = useState<any>(null);
   const [fieldsConfig, setFieldsConfig] =
     useState<ParamsSchema[]>(paramsConfig);
@@ -328,12 +326,6 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
   }, [initialize]);
 
-  useEffect(() => {
-    if (paramsRef.current) {
-      innitializeParams(paramsRef.current);
-    }
-  }, [innitializeParams]);
-
   useEffect(() => {
     if (loading) {
       updateScrollerPosition();
diff --git a/src/pages/playground/components/ground-tts.tsx b/src/pages/playground/speech/tts.tsx
similarity index 95%
rename from src/pages/playground/components/ground-tts.tsx
rename to src/pages/playground/speech/tts.tsx
index 9c8ec15b..1cd9f61f 100644
--- a/src/pages/playground/components/ground-tts.tsx
+++ b/src/pages/playground/speech/tts.tsx
@@ -22,20 +22,20 @@ import React, {
   useState
 } from 'react';
 import { AUDIO_TEXT_TO_SPEECH_API, CHAT_API, textToSpeech } from '../apis';
-import { RefAudioFormItem } from '../audio/form';
-import {
-  TTSParamsConfig as paramsConfig,
-  TTSAdvancedParamsConfig
-} from '../audio/params-config';
+import DynamicParams from '../components/dynamic-params';
+import MessageInput from '../components/message-input';
+import RightContainer from '../components/right-container';
+import ViewCommonCode from '../components/view-common-code';
 import { extractErrorMessage } from '../config';
 import { MessageItem, ParamsSchema } from '../config/types';
 import '../style/ground-llm.less';
 import '../style/system-message-wrap.less';
 import { TextToSpeechCode } from '../view-code/audio';
-import DynamicParams from './dynamic-params';
-import MessageInput from './message-input';
-import RightContainer from './right-container';
-import ViewCommonCode from './view-common-code';
+import { RefAudioFormItem } from './form';
+import {
+  TTSParamsConfig as paramsConfig,
+  TTSAdvancedParamsConfig
+} from './params-config';
 
 const MetaFields = [
   'task_type',
@@ -83,7 +83,6 @@ const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
   const [collapse, setCollapse] = useState(false);
   const controllerRef = useRef<any>(null);
   const scroller = useRef<any>(null);
-  const paramsRef = useRef<any>(null);
   const checkvalueRef = useRef<any>(true);
   const [currentPrompt, setCurrentPrompt] = useState<string>('');
   const [voiceDataList, setVoiceList] = useState<Global.BaseOption<string>[]>(
@@ -93,7 +92,6 @@ const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
   const formRef = useRef<any>(null);
 
   const { initialize } = useOverlayScroller();
-  const { initialize: innitializeParams } = useOverlayScroller();
   const [activeKey, setActiveKey] = useState<string | string[]>(
     'advanced_config'
   );
@@ -301,12 +299,6 @@ const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
     [handleSelectModel]
   );
 
-  useEffect(() => {
-    if (paramsRef.current) {
-      innitializeParams(paramsRef.current);
-    }
-  }, [innitializeParams]);
-
   const handleOnCheckChange = (e: any) => {
     checkvalueRef.current = e.target.checked;
   };
@@ -409,12 +401,6 @@ const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
   }, [initialize]);
 
-  useEffect(() => {
-    if (paramsRef.current) {
-      innitializeParams(paramsRef.current);
-    }
-  }, [innitializeParams]);
-
   return (
     <div className="ground-left-wrapper">
       <div className="ground-left">
diff --git a/src/pages/playground/video.tsx b/src/pages/playground/video/index.tsx
similarity index 89%
rename from src/pages/playground/video.tsx
rename to src/pages/playground/video/index.tsx
index f45ac8d3..b5074acb 100644
--- a/src/pages/playground/video.tsx
+++ b/src/pages/playground/video/index.tsx
@@ -8,12 +8,12 @@ import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { PageContainerInner } from '../_components/page-box';
-import { queryModelsList } from './apis';
-import GroundVideo from './components/ground-video';
-import ViewCodeButtons from './components/view-code-buttons';
-import useCollapseLayout from './hooks/use-collapse-layout';
-import './style/play-ground.less';
+import { PageContainerInner } from '../../_components/page-box';
+import { queryModelsList } from '../apis';
+import ViewCodeButtons from '../components/view-code-buttons';
+import useCollapseLayout from '../hooks/use-collapse-layout';
+import '../style/play-ground.less';
+import GroundVideo from './page';
 
 const PlaygroundRerank: React.FC = () => {
   const intl = useIntl();
diff --git a/src/pages/playground/components/ground-video.tsx b/src/pages/playground/video/page.tsx
similarity index 96%
rename from src/pages/playground/components/ground-video.tsx
rename to src/pages/playground/video/page.tsx
index 8965e33e..a62b11eb 100644
--- a/src/pages/playground/components/ground-video.tsx
+++ b/src/pages/playground/video/page.tsx
@@ -15,15 +15,15 @@ import React, {
   useState
 } from 'react';
 import { CREATE_VIDEO_API } from '../apis';
+import DynamicParams from '../components/dynamic-params';
+import MessageInput from '../components/message-input';
+import RightContainer from '../components/right-container';
+import ViewCommonCode from '../components/view-common-code';
 import { useInitVideoMeta } from '../hooks/use-init-video-meta';
 import useTextVideo from '../hooks/use-text-video';
 import '../style/ground-llm.less';
 import '../style/system-message-wrap.less';
 import { generateCode } from '../view-code/video';
-import DynamicParams from './dynamic-params';
-import MessageInput from './message-input';
-import RightContainer from './right-container';
-import ViewCommonCode from './view-common-code';
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
@@ -66,7 +66,6 @@ const GroundVideo: React.FC<MessageProps> = forwardRef((props, ref) => {
     submitMessage
   } = useTextVideo({
     scroller,
-    paramsRef,
     API: CREATE_VIDEO_API
   });