From d75ac45c331ad6e478c3db7225275a2737b17779 Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 28 Feb 2025 20:00:52 +0800 Subject: [PATCH] fix: expand rows in models after operating --- .../seal-table/components/table-row.tsx | 15 +- src/layouts/index.tsx | 163 ++++++++++++------ src/pages/llmodels/components/table-list.tsx | 3 +- .../components/ground-embedding.tsx | 3 +- .../playground/components/ground-images.tsx | 9 +- .../playground/components/ground-left.tsx | 3 +- .../playground/components/ground-reranker.tsx | 3 +- .../playground/components/ground-stt.tsx | 6 +- .../playground/components/ground-tts.tsx | 5 +- .../playground/components/image-edit.tsx | 5 +- .../playground/components/params-settings.tsx | 12 +- src/pages/playground/hooks/config.ts | 3 +- src/pages/playground/hooks/use-init-meta.ts | 15 +- src/pages/playground/images.tsx | 122 +++++++------ src/pages/playground/index.tsx | 140 +++++++-------- src/pages/playground/speech.tsx | 128 +++++++------- 16 files changed, 342 insertions(+), 293 deletions(-) diff --git a/src/components/seal-table/components/table-row.tsx b/src/components/seal-table/components/table-row.tsx index 4862ca2d..53b4776e 100644 --- a/src/components/seal-table/components/table-row.tsx +++ b/src/components/seal-table/components/table-row.tsx @@ -44,8 +44,6 @@ const TableRow: React.FC< allSubChildren?: any[]; }>(TableContext); const { setChunkRequest } = useSetChunkRequest(); - const [expanded, setExpanded] = useState(false); - // const [checked, setChecked] = useState(false); const [childrenData, setChildrenData] = useState([]); const [loading, setLoading] = useState(false); const [firstLoad, setFirstLoad] = useState(true); @@ -73,6 +71,10 @@ const TableRow: React.FC< }; }, []); + const expanded = useMemo(() => { + return expandedRowKeys?.includes(record[rowKey]); + }, [expandedRowKeys]); + const checked = useMemo(() => { return rowSelection?.selectedRowKeys?.includes(record[rowKey]); }, [rowSelection?.selectedRowKeys, record, rowKey]); @@ -160,7 +162,6 @@ const TableRow: React.FC< }; const handleRowExpand = async () => { - setExpanded(!expanded); onExpand?.(!expanded, record, record[rowKey]); if (pollTimer.current) { @@ -200,14 +201,6 @@ const TableRow: React.FC< } }; - useEffect(() => { - if (expandedRowKeys?.includes(record[rowKey])) { - setExpanded(true); - } else { - setExpanded(false); - } - }, [expandedRowKeys]); - useEffect(() => { const handleVisibilityChange = async () => { if (document.visibilityState === 'hidden') { diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 7bb11c9e..9261b78a 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -206,7 +206,11 @@ export default (props: any) => { updateCheck.latest_version?.indexOf('0.0.0') === -1 && updateCheck.latest_version?.indexOf('rc') === -1 ); - }, [updateCheck, version, initialState]); + }, [ + updateCheck.latest_version, + version.version, + initialState?.currentUser?.is_admin + ]); useEffect(() => { const body = document.querySelector('body'); @@ -279,9 +283,107 @@ export default (props: any) => { return dom; }, - [intl, version, updateCheck] + [intl, showUpgrade] ); + const itemRender = useCallback((route, _, routes) => { + const { breadcrumbName, title, path } = route; + const label = title || breadcrumbName; + const last = routes[routes.length - 1]; + if (last) { + if (last.path === path || last.linkPath === path) { + return {label}; + } + } + return {label}; + }, []); + + const menuItemRender = useCallback( + (menuItemProps, defaultDom) => { + if (menuItemProps.isUrl || menuItemProps.children) { + return defaultDom; + } + if (menuItemProps.path && location.pathname !== menuItemProps.path) { + return ( + + {defaultDom} + + ); + } + return <>{defaultDom}; + }, + [location.pathname] + ); + + const onPageChange = useCallback( + (route) => { + const { location } = history; + const { pathname } = location; + + initRouteCacheValue(pathname); + dropRouteCache(pathname); + + // if user is not change password, redirect to change password page + if ( + location.pathname !== loginPath && + userInfo?.require_password_change + ) { + history.push(loginPath); + return; + } + + // if user is not logged in, redirect to login page + if (!initialState?.currentUser && location.pathname !== loginPath) { + history.push(loginPath); + } else if (location.pathname === '/') { + const pathname = initialState?.currentUser?.is_admin + ? '/dashboard' + : '/playground'; + history.push(pathname); + } + }, + [userInfo?.require_password_change, initialState?.currentUser] + ); + + useEffect(() => { + // 先清除旧的性能标记 + performance.clearMarks(); + performance.clearMeasures(); + + // 记录开始时间 + performance.mark('route-start'); + + requestAnimationFrame(() => { + // 记录结束时间 + performance.mark('route-end'); + + // 确保 `route-start` 存在后再测量 + if (performance.getEntriesByName('route-start').length > 0) { + performance.measure('route-change', 'route-start', 'route-end'); + + const measure = performance.getEntriesByName('route-change')[0]; + console.log( + `[Performance] Route change to ${location.pathname} took ${measure.duration.toFixed(2)}ms` + ); + + // 清理标记 + performance.clearMarks(); + performance.clearMeasures(); + } else { + console.warn('Missing performance mark: route-start'); + } + }); + }, [location.pathname]); + + const onRenderCallback = (id, phase, actualDuration) => { + console.log( + `[Profiler] Route: ${id} - Phase: ${phase} - Render time: ${actualDuration.toFixed(2)}ms` + ); + }; + return (
@@ -311,65 +413,14 @@ export default (props: any) => { }} menuHeaderRender={renderMenuHeader} collapsed={collapsed} - onPageChange={(route) => { - const { location } = history; - const { pathname } = location; - - initRouteCacheValue(pathname); - dropRouteCache(pathname); - - // if user is not change password, redirect to change password page - if ( - location.pathname !== loginPath && - userInfo?.require_password_change - ) { - history.push(loginPath); - - return; - } - - // if user is not logged in, redirect to login page - if (!initialState?.currentUser && location.pathname !== loginPath) { - history.push(loginPath); - } else if (location.pathname === '/') { - const pathname = initialState?.currentUser?.is_admin - ? '/dashboard' - : '/playground'; - history.push(pathname); - } - }} + onPageChange={onPageChange} formatMessage={formatMessage} menu={{ locale: true }} logo={collapsed ? SLogoIcon : LogoIcon} - menuItemRender={(menuItemProps, defaultDom) => { - if (menuItemProps.isUrl || menuItemProps.children) { - return defaultDom; - } - if (menuItemProps.path && location.pathname !== menuItemProps.path) { - return ( - - {defaultDom} - - ); - } - return <>{defaultDom}; - }} - itemRender={(route, _, routes) => { - const { breadcrumbName, title, path } = route; - const label = title || breadcrumbName; - const last = routes[routes.length - 1]; - if (last) { - if (last.path === path || last.linkPath === path) { - return {label}; - } - } - return {label}; - }} + menuItemRender={menuItemRender} + itemRender={itemRender} disableContentMargin fixSiderbar fixedHeader diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index 58d0bec6..dcf9f13e 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/src/pages/llmodels/components/table-list.tsx @@ -600,7 +600,6 @@ const Models: React.FC = ({ 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 = ({ ) } ]; - }, [sortOrder, intl]); + }, [sortOrder, intl, handleSelect]); const handleOnClick = async () => { if (isLoading) { diff --git a/src/pages/playground/components/ground-embedding.tsx b/src/pages/playground/components/ground-embedding.tsx index 629010e8..a9a1d1fe 100644 --- a/src/pages/playground/components/ground-embedding.tsx +++ b/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 = forwardRef((props, ref) => { ); }); -export default memo(GroundEmbedding); +export default GroundEmbedding; diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx index c9a653f3..cd65a041 100644 --- a/src/pages/playground/components/ground-images.tsx +++ b/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 = 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 = forwardRef((props, ref) => { } }; - const handleCloseViewCode = () => { + const handleCloseViewCode = useCallback(() => { setShow(false); - }; + }, []); return (
@@ -343,4 +342,4 @@ const GroundImages: React.FC = forwardRef((props, ref) => { ); }); -export default memo(GroundImages); +export default GroundImages; diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx index d1e51c75..194b5ac5 100644 --- a/src/pages/playground/components/ground-left.tsx +++ b/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 = forwardRef((props, ref) => { ); }); -export default memo(GroundLeft); +export default GroundLeft; diff --git a/src/pages/playground/components/ground-reranker.tsx b/src/pages/playground/components/ground-reranker.tsx index 90d5f1f9..a4c816ee 100644 --- a/src/pages/playground/components/ground-reranker.tsx +++ b/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 = forwardRef((props, ref) => { ); }); -export default memo(GroundReranker); +export default GroundReranker; diff --git a/src/pages/playground/components/ground-stt.tsx b/src/pages/playground/components/ground-stt.tsx index 44db012c..9581ad7e 100644 --- a/src/pages/playground/components/ground-stt.tsx +++ b/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[]; - loaded?: boolean; ref?: any; } -const GroundLeft: React.FC = forwardRef((props, ref) => { +const GroundSTT: React.FC = forwardRef((props, ref) => { const intl = useIntl(); const { modelList } = props; const messageId = useRef(0); @@ -474,4 +472,4 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { ); }); -export default memo(GroundLeft); +export default GroundSTT; diff --git a/src/pages/playground/components/ground-tts.tsx b/src/pages/playground/components/ground-tts.tsx index 83cb6e4e..5fd7bef1 100644 --- a/src/pages/playground/components/ground-tts.tsx +++ b/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 = forwardRef((props, ref) => { +const GroundTTS: React.FC = forwardRef((props, ref) => { const { modelList } = props; const messageId = useRef(0); const [messageList, setMessageList] = useState< @@ -423,4 +422,4 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { ); }); -export default memo(GroundLeft); +export default GroundTTS; diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx index 2e11854b..481932eb 100644 --- a/src/pages/playground/components/image-edit.tsx +++ b/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 = 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 = forwardRef((props, ref) => { ); }); -export default memo(GroundImages); +export default GroundImages; diff --git a/src/pages/playground/components/params-settings.tsx b/src/pages/playground/components/params-settings.tsx index efcec259..5763fa79 100644 --- a/src/pages/playground/components/params-settings.tsx +++ b/src/pages/playground/components/params-settings.tsx @@ -118,19 +118,19 @@ const ParamsSettings: React.FC = ({ 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(() => { diff --git a/src/pages/playground/hooks/config.ts b/src/pages/playground/hooks/config.ts index 750b3090..7c36edf9 100644 --- a/src/pages/playground/hooks/config.ts +++ b/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 = { diff --git a/src/pages/playground/hooks/use-init-meta.ts b/src/pages/playground/hooks/use-init-meta.ts index b1ff77cb..5a694b4a 100644 --- a/src/pages/playground/hooks/use-init-meta.ts +++ b/src/pages/playground/hooks/use-init-meta.ts @@ -51,14 +51,14 @@ export const useInitLLmMeta = ( } = options; const formRef = useRef(null); const [searchParams] = useSearchParams(); - const selectModel = searchParams.get('model') || ''; + const defaultModel = searchParams.get('model') || modelList?.[0]?.value || ''; const [modelMeta, setModelMeta] = useState({}); const [initialValues, setInitialValues] = useState({ ...defaultValues, - model: selectModel + model: defaultModel }); const [parameters, setParams] = useState({ - model: selectModel + model: defaultModel }); const [paramsConfig, setParamsConfig] = useState(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', diff --git a/src/pages/playground/images.tsx b/src/pages/playground/images.tsx index 544211be..d8750196 100644 --- a/src/pages/playground/images.tsx +++ b/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(null); const groundTabRef2 = useRef(null); const [modelList, setModelList] = useState[]>([]); - const [loaded, setLoaded] = useState(false); - const optionsList = [ - { - label: intl.formatMessage({ id: 'playground.image.generate' }), - value: TabsValueMap.Tab1, - icon: - }, - { - label: intl.formatMessage({ id: 'playground.image.edit' }), - value: TabsValueMap.Tab2, - icon: - } - ]; + const optionsList = useMemo(() => { + return [ + { + label: intl.formatMessage({ id: 'playground.image.generate' }), + value: TabsValueMap.Tab1, + icon: + }, + { + label: intl.formatMessage({ id: 'playground.image.edit' }), + value: TabsValueMap.Tab2, + icon: + } + ]; + }, [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: ( - - ) - }, - { - key: TabsValueMap.Tab2, - label: 'Edit', - children: - } - ]; + const items: TabsProps['items'] = useMemo(() => { + return [ + { + key: TabsValueMap.Tab1, + label: 'Generate', + children: ( + + ) + }, + { + key: TabsValueMap.Tab2, + label: 'Edit', + children: + } + ]; + }, [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 ( ); - }; + }, [intl, handleViewCode, handleToggleCollapse]); + + const header = useMemo(() => { + return { + title: ( +
+ + {intl.formatMessage({ id: 'menu.playground.text2images' })} + + { + setActiveKey(key)} + > + } +
+ ), + style: { + paddingInline: 'var(--layout-content-header-inlinepadding)' + }, + breadcrumb: {} + }; + }, [optionsList]); useHotkeys( HotKeys.RIGHT.join(','), @@ -152,28 +180,8 @@ const TextToImages: React.FC = () => { return ( - - {intl.formatMessage({ id: 'menu.playground.text2images' })} - - { - setActiveKey(key)} - > - } -
- ), - style: { - paddingInline: 'var(--layout-content-header-inlinepadding)' - }, - breadcrumb: {} - }} - extra={renderExtra()} + header={header} + extra={renderExtra} className={classNames('playground-container chat')} >
diff --git a/src/pages/playground/index.tsx b/src/pages/playground/index.tsx index 40100ebf..3eacbe91 100644 --- a/src/pages/playground/index.tsx +++ b/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(null); const [modelList, setModelList] = useState[]>([]); const [loaded, setLoaded] = useState(false); - const optionsList = [ - { - label: intl.formatMessage({ id: 'menu.playground.chat' }), - value: 'chat', - icon: - }, - { - label: intl.formatMessage({ id: 'menu.compare' }), - value: 'compare', - icon: - } - ]; + + const optionsList = useMemo(() => { + return [ + { + label: intl.formatMessage({ id: 'menu.playground.chat' }), + value: 'chat', + icon: + }, + { + label: intl.formatMessage({ id: 'menu.compare' }), + value: 'compare', + icon: + } + ]; + }, [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: ( - - ) - }, - { - key: 'compare', - label: 'Compare', - children: - } - ]; + const items: TabsProps['items'] = useMemo(() => { + return [ + { + key: 'chat', + label: 'Chat', + children: ( + + ) + }, + { + key: 'compare', + label: 'Compare', + children: + } + ]; + }, [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[]; - 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 = () => { > ); - }; + }, [activeKey, intl, handleViewCode, handleToggleCollapse]); + + const header = useMemo(() => { + return { + title: ( +
+ + {intl.formatMessage({ id: 'menu.playground.chat' })} + + { + setActiveKey(key)} + > + } +
+ ), + 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 ( - - {intl.formatMessage({ id: 'menu.playground.chat' })} - - { - setActiveKey(key)} - > - } -
- ), - style: { - paddingInline: 'var(--layout-content-header-inlinepadding)' - }, - breadcrumb: {} - }} - extra={renderExtra()} + header={header} + extra={renderExtra} className={classNames('playground-container', { compare: activeKey === 'compare', chat: activeKey !== 'compare' diff --git a/src/pages/playground/speech.tsx b/src/pages/playground/speech.tsx index cc076a2b..b6f086ae 100644 --- a/src/pages/playground/speech.tsx +++ b/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[] >([]); - const [loaded, setLoaded] = useState(false); - const optionsList = [ - { - label: intl.formatMessage({ id: 'playground.audio.texttospeech' }), - value: TabsValueMap.Tab1, - icon: - }, - { - label: intl.formatMessage({ id: 'playground.audio.speechtotext' }), - value: TabsValueMap.Tab2, - icon: - } - ]; + + const optionsList = useMemo(() => { + return [ + { + label: intl.formatMessage({ id: 'playground.audio.texttospeech' }), + value: TabsValueMap.Tab1, + icon: + }, + { + label: intl.formatMessage({ id: 'playground.audio.speechtotext' }), + value: TabsValueMap.Tab2, + icon: + } + ]; + }, [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: ( - - ) - }, - { - key: 'stt', - label: 'Realtime', - children: ( - - ) - } - ]; + const items: TabsProps['items'] = useMemo(() => { + return [ + { + key: 'tts', + label: 'TTS', + children: ( + + ) + }, + { + key: 'stt', + label: 'Realtime', + children: + } + ]; + }, [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 ( ); - }; + }, [handleToggleCollapse, handleViewCode, intl]); + + const header = useMemo(() => { + return { + title: ( +
+ + {intl.formatMessage({ id: 'menu.playground.speech' })} + + { + setActiveKey(key)} + > + } +
+ ), + style: { + paddingInline: 'var(--layout-content-header-inlinepadding)' + }, + breadcrumb: {} + }; + }, [activeKey, optionsList]); useHotkeys( HotKeys.RIGHT.join(','), @@ -196,29 +219,8 @@ const Playground: React.FC = () => { return ( - - {intl.formatMessage({ id: 'menu.playground.speech' })} - - { - setActiveKey(key)} - > - } -
- ), - style: { - paddingInline: 'var(--layout-content-header-inlinepadding)' - }, - breadcrumb: {} - }} - extra={renderExtra()} + header={header} + extra={renderExtra} className={classNames('playground-container', { compare: activeKey === 'compare', chat: activeKey !== 'compare'