From 9447088f89beb7121bda27f88cedbc4a8b2a2760 Mon Sep 17 00:00:00 2001 From: jialin Date: Sat, 28 Feb 2026 20:21:53 +0800 Subject: [PATCH] refactor: adjust playground pages dir --- config/routes.ts | 10 +- src/pages/playground/{ => chat}/index.tsx | 14 +- .../ground-llm.tsx => chat/page.tsx} | 17 +- src/pages/playground/chat/params-config.ts | 171 ++++++++++++++++++ .../components/multiple-chat/model-item.tsx | 2 +- src/pages/playground/config/params-config.ts | 170 ----------------- .../{embedding.tsx => embedding/index.tsx} | 12 +- .../page.tsx} | 13 +- src/pages/playground/hooks/use-init-meta.ts | 11 -- src/pages/playground/hooks/use-text-image.ts | 8 +- src/pages/playground/hooks/use-text-video.ts | 8 +- .../ground-images.tsx => images/create.tsx} | 10 +- .../image-edit.tsx => images/edit.tsx} | 10 +- .../{images.tsx => images/index.tsx} | 17 +- .../hooks/use-reranker-response.ts | 0 .../{rerank.tsx => rerank/index.tsx} | 12 +- .../ground-reranker.tsx => rerank/page.tsx} | 13 +- .../{reranker => rerank}/params-config.ts | 0 .../playground/{audio => speech}/form.tsx | 0 .../{speech.tsx => speech/index.tsx} | 12 +- .../{audio => speech}/params-config.ts | 0 .../ground-stt.tsx => speech/stt.tsx} | 16 +- .../ground-tts.tsx => speech/tts.tsx} | 32 +--- .../playground/{video.tsx => video/index.tsx} | 12 +- .../ground-video.tsx => video/page.tsx} | 9 +- 25 files changed, 262 insertions(+), 317 deletions(-) rename src/pages/playground/{ => chat}/index.tsx (92%) rename src/pages/playground/{components/ground-llm.tsx => chat/page.tsx} (91%) create mode 100644 src/pages/playground/chat/params-config.ts rename src/pages/playground/{embedding.tsx => embedding/index.tsx} (89%) rename src/pages/playground/{components/ground-embedding.tsx => embedding/page.tsx} (98%) rename src/pages/playground/{components/ground-images.tsx => images/create.tsx} (97%) rename src/pages/playground/{components/image-edit.tsx => images/edit.tsx} (98%) rename src/pages/playground/{images.tsx => images/index.tsx} (91%) rename src/pages/playground/{reranker => rerank}/hooks/use-reranker-response.ts (100%) rename src/pages/playground/{rerank.tsx => rerank/index.tsx} (90%) rename src/pages/playground/{components/ground-reranker.tsx => rerank/page.tsx} (98%) rename src/pages/playground/{reranker => rerank}/params-config.ts (100%) rename src/pages/playground/{audio => speech}/form.tsx (100%) rename src/pages/playground/{speech.tsx => speech/index.tsx} (95%) rename src/pages/playground/{audio => speech}/params-config.ts (100%) rename src/pages/playground/{components/ground-stt.tsx => speech/stt.tsx} (97%) rename src/pages/playground/{components/ground-tts.tsx => speech/tts.tsx} (95%) rename src/pages/playground/{video.tsx => video/index.tsx} (89%) rename src/pages/playground/{components/ground-video.tsx => video/page.tsx} (96%) 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: , children: ( - + ) }, { 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[]; @@ -57,7 +57,6 @@ const GroundLeft: React.FC = 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[]; @@ -109,7 +109,6 @@ const GroundEmbedding: React.FC = 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(defaultParamsConfig); - const paramsRef = useRef(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(null); const [imageList, setImageList] = useState< @@ -35,7 +35,6 @@ export default function useTextImage(props: any) { const messageId = useRef(0); const requestToken = useRef(null); const { initialize } = useOverlayScroller(); - const { initialize: innitializeParams } = useOverlayScroller(); const streamReaderRef = useRef(null); const requestIdRef = useRef(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(null); const [videoList, setVideoList] = useState< @@ -25,7 +25,6 @@ export default function useTextVideo(props: any) { const messageId = useRef(0); const requestToken = useRef(null); const { initialize } = useOverlayScroller(); - const { initialize: innitializeParams } = useOverlayScroller(); const requestIdRef = useRef(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[]; @@ -41,7 +41,6 @@ const GroundImages: React.FC = forwardRef((props, ref) => { const [show, setShow] = useState(false); const [collapse, setCollapse] = useState(false); const scroller = useRef(null); - const paramsRef = useRef(null); const inputRef = useRef(null); const { @@ -69,7 +68,6 @@ const GroundImages: React.FC = 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[]; @@ -45,7 +45,6 @@ const GroundImages: React.FC = forwardRef((props, ref) => { const [show, setShow] = useState(false); const [collapse, setCollapse] = useState(false); const scroller = useRef(null); - const paramsRef = useRef(null); const inputRef = useRef(null); const [image, setImage] = useState(''); const [mask, setMask] = useState(null); @@ -95,7 +94,6 @@ const GroundImages: React.FC = 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: ( - + ) }, { 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 = 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[]; @@ -68,7 +68,6 @@ const GroundSTT: React.FC = forwardRef((props, ref) => { const [tokenResult, setTokenResult] = useState(null); const [collapse, setCollapse] = useState(false); const scroller = useRef(null); - const paramsRef = useRef(null); const [audioPermissionOn, setAudioPermissionOn] = useState(true); const [audioData, setAudioData] = useState(null); const [audioChunks, setAudioChunks] = useState({ @@ -81,7 +80,6 @@ const GroundSTT: React.FC = forwardRef((props, ref) => { useCancelToken(); const { initialize, updateScrollerPosition } = useOverlayScroller(); - const { initialize: innitializeParams } = useOverlayScroller(); const [modelMeta, setModelMeta] = useState(null); const [fieldsConfig, setFieldsConfig] = useState(paramsConfig); @@ -328,12 +326,6 @@ const GroundSTT: React.FC = 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 = forwardRef((props, ref) => { const [collapse, setCollapse] = useState(false); const controllerRef = useRef(null); const scroller = useRef(null); - const paramsRef = useRef(null); const checkvalueRef = useRef(true); const [currentPrompt, setCurrentPrompt] = useState(''); const [voiceDataList, setVoiceList] = useState[]>( @@ -93,7 +92,6 @@ const GroundTTS: React.FC = forwardRef((props, ref) => { const formRef = useRef(null); const { initialize } = useOverlayScroller(); - const { initialize: innitializeParams } = useOverlayScroller(); const [activeKey, setActiveKey] = useState( 'advanced_config' ); @@ -301,12 +299,6 @@ const GroundTTS: React.FC = 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 = forwardRef((props, ref) => { } }, [initialize]); - useEffect(() => { - if (paramsRef.current) { - innitializeParams(paramsRef.current); - } - }, [innitializeParams]); - return (
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[]; @@ -66,7 +66,6 @@ const GroundVideo: React.FC = forwardRef((props, ref) => { submitMessage } = useTextVideo({ scroller, - paramsRef, API: CREATE_VIDEO_API });