From a6f0f554f07e76b029ff63c22ba67e10e68dc9a7 Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 22 Nov 2024 18:23:52 +0800 Subject: [PATCH] fix: model be cleared when apply config to all in compare --- src/components/echarts/scatter.tsx | 4 +- .../logs-viewer/logs-pagination.tsx | 2 +- .../logs-viewer/virtual-log-list.tsx | 5 +- src/components/markdown-viewer/index.tsx | 2 - src/layouts/error-boundary.tsx | 39 ++++++++++++++ src/pages/llmodels/components/model-card.tsx | 22 ++++---- src/pages/llmodels/components/table-list.tsx | 42 +++------------ .../llmodels/components/view-logs-modal.tsx | 53 +++++++++++-------- src/pages/llmodels/index.tsx | 1 + .../playground/components/ground-images.tsx | 15 +++--- .../components/multiple-chat/model-item.tsx | 8 +-- .../playground/components/params-settings.tsx | 16 +++--- src/pages/playground/style/ground-left.less | 2 +- src/utils/fetch-chunk-data.ts | 11 ++-- 14 files changed, 122 insertions(+), 100 deletions(-) create mode 100644 src/layouts/error-boundary.tsx diff --git a/src/components/echarts/scatter.tsx b/src/components/echarts/scatter.tsx index a59309fb..78b88047 100644 --- a/src/components/echarts/scatter.tsx +++ b/src/components/echarts/scatter.tsx @@ -11,8 +11,8 @@ const options: any = { ...grid, right: -1, top: -1, - bottom: -1, - left: -1, + bottom: 2, + left: 2, containLabel: true, borderRadius: 4 }, diff --git a/src/components/logs-viewer/logs-pagination.tsx b/src/components/logs-viewer/logs-pagination.tsx index 4f70ae9c..77940825 100644 --- a/src/components/logs-viewer/logs-pagination.tsx +++ b/src/components/logs-viewer/logs-pagination.tsx @@ -13,7 +13,7 @@ interface LogsPaginationProps { } const LogsPagination: React.FC = (props) => { - const { page, total, pageSize, onWheel, onNext, onPrev } = props; + const { page, total, pageSize, onNext, onPrev } = props; const intl = useIntl(); const handleOnPrev = () => { diff --git a/src/components/logs-viewer/virtual-log-list.tsx b/src/components/logs-viewer/virtual-log-list.tsx index 892fd9bc..32499110 100644 --- a/src/components/logs-viewer/virtual-log-list.tsx +++ b/src/components/logs-viewer/virtual-log-list.tsx @@ -24,10 +24,11 @@ interface LogsViewerProps { params?: object; ref?: any; tail?: number; + enableScorllLoad?: boolean; diffHeight?: number; } const LogsViewer: React.FC = forwardRef((props, ref) => { - const { diffHeight, url, tail: defaultTail } = props; + const { diffHeight, url, tail: defaultTail, enableScorllLoad = true } = props; const { pageSize, page, setPage, setTotalPage, totalPage } = useLogsPagination(); const { setChunkFetch } = useSetChunkFetch(); @@ -169,7 +170,7 @@ const LogsViewer: React.FC = forwardRef((props, ref) => { const handleOnScroll = useCallback( async (isTop: boolean) => { setIsAtTop(isTop); - if (loading || isLoadend || logs.length < pageSize) { + if (loading || isLoadend || logs.length < pageSize || !enableScorllLoad) { return; } if (isTop && !isLoadend) { diff --git a/src/components/markdown-viewer/index.tsx b/src/components/markdown-viewer/index.tsx index 45c9ad99..130efd2a 100644 --- a/src/components/markdown-viewer/index.tsx +++ b/src/components/markdown-viewer/index.tsx @@ -199,14 +199,12 @@ const MarkdownViewer: React.FC = ({ return ( <> - (
{renderTokens(tokens)}
- ) ); }; diff --git a/src/layouts/error-boundary.tsx b/src/layouts/error-boundary.tsx new file mode 100644 index 00000000..afc7d1aa --- /dev/null +++ b/src/layouts/error-boundary.tsx @@ -0,0 +1,39 @@ +import { Component } from 'react'; + +interface ErrorBoundaryState { + hasError: boolean; +} + +class ErrorBoundary extends Component< + { children?: React.ReactNode }, + ErrorBoundaryState +> { + constructor(props: any) { + super(props); + this.state = { + hasError: false + }; + } + + // 捕获错误并更新状态 + static getDerivedStateFromError(error: any) { + console.error('Error caught by Error Boundary:', error); + return { hasError: true }; + } + + // 记录错误信息（可选） + componentDidCatch(error: any, info: any) { + console.error('Error caught by Error Boundary:', error); + console.error(info); + } + + render() { + if (this.state.hasError) { + return

Something went wrong.

; + } + + return this.props.children; + } +} + +export default ErrorBoundary; diff --git a/src/pages/llmodels/components/model-card.tsx b/src/pages/llmodels/components/model-card.tsx index a695f690..5f7bffbe 100644 --- a/src/pages/llmodels/components/model-card.tsx +++ b/src/pages/llmodels/components/model-card.tsx @@ -205,9 +205,15 @@ const ModelCard: React.FC<{ if (!imgSrc) { return ''; } - return `https://modelscope.cn/api/v1/models/${modelData?.name}/repo?Revision=${modelData?.Revision}&View=true&FilePath=${imgSrc}`; + if (modelSource === modelSourceMap.modelscope_value) { + return `https://modelscope.cn/api/v1/models/${modelData?.name}/repo?Revision=${modelData?.Revision}&View=true&FilePath=${imgSrc}`; + } + if (modelSource === modelSourceMap.huggingface_value) { + return `https://huggingface.co/${modelData?.id}/resolve/main/${imgSrc}`; + } + return ''; }, - [modelData] + [modelData, modelSource] ); useEffect(() => { @@ -277,11 +283,7 @@ const ModelCard: React.FC<{ }} > @@ -310,11 +312,7 @@ const ModelCard: React.FC<{
diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index ff7ea077..d6d0e24a 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/src/pages/llmodels/components/table-list.tsx @@ -11,7 +11,6 @@ import HotKeys from '@/config/hotkeys'; import useExpandedRowKeys from '@/hooks/use-expanded-row-keys'; import useTableRowSelection from '@/hooks/use-table-row-selection'; import useTableSort from '@/hooks/use-table-sort'; -import ViewCodeModal from '@/pages/playground/components/view-code-modal'; import { GPUDeviceItem, ListItem as WorkerListItem @@ -88,10 +87,6 @@ const Models: React.FC = ({ const { sortOrder, setSortOrder } = useTableSort({ defaultSortOrder: 'descend' }); - const [embeddingParams, setEmbeddingParams] = useState({ - params: {}, - show: false - }); const [openLogModal, setOpenLogModal] = useState(false); const [openAddModal, setOpenAddModal] = useState(false); @@ -104,6 +99,8 @@ const Models: React.FC = ({ const [currentInstance, setCurrentInstance] = useState<{ url: string; status: string; + id?: number | string; + modelId?: number | string; tail?: number; }>({ url: '', @@ -226,11 +223,6 @@ const Models: React.FC = ({ key: 'chat', icon: }, - // { - // label: 'common.button.viewcode', - // key: 'embedding', - // icon: - // }, { label: 'common.button.delete', key: 'delete', @@ -363,6 +355,8 @@ const Models: React.FC = ({ setCurrentInstance({ url: `${MODEL_INSTANCE_API}/${row.id}/logs`, status: row.state, + id: row.id, + modelId: row.model_id, tail: row.state === InstanceStatusMap.Downloading ? undefined : PageSize }); setOpenLogModal(true); @@ -413,17 +407,8 @@ const Models: React.FC = ({ if (val === 'delete') { handleDelete(row); } - if (val === 'embedding') { - setEmbeddingParams({ - params: { - input: 'Your text string goes here', - model: row.name - }, - show: true - }); - } }, - [handleEdit, handleOpenPlayGround, handleDelete, setEmbeddingParams] + [handleEdit, handleOpenPlayGround, handleDelete] ); const handleChildSelect = useCallback( @@ -469,13 +454,6 @@ const Models: React.FC = ({ return ''; }, []); - const handleCloseViewCode = useCallback(() => { - setEmbeddingParams({ - params: {}, - show: false - }); - }, []); - return ( <> = ({ - ); }; diff --git a/src/pages/llmodels/components/view-logs-modal.tsx b/src/pages/llmodels/components/view-logs-modal.tsx index a51788a8..6cd20bd6 100644 --- a/src/pages/llmodels/components/view-logs-modal.tsx +++ b/src/pages/llmodels/components/view-logs-modal.tsx @@ -1,52 +1,58 @@ import LogsViewer from '@/components/logs-viewer/virtual-log-list'; +import useSetChunkRequest from '@/hooks/use-chunk-request'; import { useIntl } from '@umijs/max'; import { Modal } from 'antd'; import React, { useCallback, useEffect, useState } from 'react'; +import { MODELS_API } from '../apis'; +import { InstanceStatusMap } from '../config'; type ViewModalProps = { open: boolean; url: string; + id?: number | string; + modelId?: number | string; tail?: number; - autoScroll?: boolean; onCancel: () => void; }; const ViewCodeModal: React.FC = (props) => { + const viewportHeight = window.innerHeight; + const intl = useIntl(); + const { setChunkRequest } = useSetChunkRequest(); const { open, url, onCancel, tail } = props || {}; - const [modalSize, setModalSize] = useState({ - width: 600, - height: 420 + const [modalSize] = useState({ + width: '100%', + height: viewportHeight - 86 }); - const isFullScreenRef = React.useRef(false); + const [enableScorllLoad, setEnableScorllLoad] = useState(true); const logsViewerRef = React.useRef(null); - const intl = useIntl(); - const viewportHeight = window.innerHeight; - const viewHeight = viewportHeight - 86; - - const handleFullscreenToggle = useCallback(() => { - isFullScreenRef.current = !isFullScreenRef.current; - setModalSize((size: any) => { - return { - width: size.width === 600 ? '100%' : 600, - height: size.height === 420 ? viewHeight : 420 - }; - }); - }, []); + const requestRef = React.useRef(null); const handleCancel = useCallback(() => { logsViewerRef.current?.abort(); onCancel(); }, [onCancel]); + const updateHandler = (list: any) => { + const data = list?.find((item: any) => item.data.id === props.id); + if (data) { + setEnableScorllLoad(InstanceStatusMap.Downloading !== data?.data?.state); + } + }; + useEffect(() => { + if (!props.id) return; if (open) { - isFullScreenRef.current = false; - setModalSize({ - width: '100%', - height: viewHeight + requestRef.current?.current?.cancel?.(); + requestRef.current = setChunkRequest({ + url: `${MODELS_API}/${props.id}/instances`, + handler: updateHandler }); } - }, [open]); + return () => { + requestRef.current?.current?.cancel?.(); + }; + }, [props.id, open]); return ( = (props) => { diffHeight={93} url={url} tail={tail} + enableScorllLoad={enableScorllLoad} params={{ follow: true }} diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx index 0c46c577..5cdcbdd4 100644 --- a/src/pages/llmodels/index.tsx +++ b/src/pages/llmodels/index.tsx @@ -130,6 +130,7 @@ const Models: React.FC = () => { }; const updateInstanceHandler = (list: any) => { + console.log('updateInstanceHandler=====', list); setModelInstances(list); }; diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx index 8c4dad6d..00582695 100644 --- a/src/pages/playground/components/ground-images.tsx +++ b/src/pages/playground/components/ground-images.tsx @@ -221,7 +221,7 @@ const GroundImages: React.FC = forwardRef((props, ref) => { setLoading(false); }; - const submitMessage = async (current?: { role: string; content: string }) => { + const submitMessage = async (current?: { content: string }) => { try { await form.current?.form?.validateFields(); if (!parameters.model) return; @@ -255,10 +255,13 @@ const GroundImages: React.FC = forwardRef((props, ref) => { const result: any = await fetchChunkedData({ data: params, + // url: 'http://192.168.50.27:40639/v1/images/generations', url: CREAT_IMAGE_API, signal: requestToken.current.signal, headers: { - accept: 'text/event-stream' + 'Cache-Control': 'no-cache', + Accept: 'text/event-stream', + Connection: 'keep-alive' } }); @@ -281,8 +284,8 @@ const GroundImages: React.FC = forwardRef((props, ref) => { }); return; } - const data = chunk?.data || []; - data.forEach((item: any) => { + console.log('data:================', chunk); + chunk?.data?.forEach((item: any) => { const imgItem = newImageList[item.index]; newImageList[item.index] = { dataUrl: `data:image/png;base64,${item.b64_json}`, @@ -363,7 +366,7 @@ const GroundImages: React.FC = forwardRef((props, ref) => { > = forwardRef((props, ref) => { >
diff --git a/src/pages/playground/components/multiple-chat/model-item.tsx b/src/pages/playground/components/multiple-chat/model-item.tsx index 7786fa51..b2fba263 100644 --- a/src/pages/playground/components/multiple-chat/model-item.tsx +++ b/src/pages/playground/components/multiple-chat/model-item.tsx @@ -44,7 +44,6 @@ interface ModelItemProps { const ModelItem: React.FC = forwardRef( ({ model, modelList, instanceId }, ref) => { const { - spans, globalParams, setGlobalParams, setLoadingStatus, @@ -56,7 +55,9 @@ const ModelItem: React.FC = forwardRef( const intl = useIntl(); const isApplyToAllModels = useRef(false); const [systemMessage, setSystemMessage] = useState(''); - const [params, setParams] = useState>({}); + const [params, setParams] = useState>({ + model: model + }); const [loading, setLoading] = useState(false); const messageId = useRef(0); const [messageList, setMessageList] = useState([]); @@ -314,10 +315,9 @@ const ModelItem: React.FC = forwardRef( useEffect(() => { setParams({ ...params, - model: model, ...globalParams }); - }, [globalParams, model]); + }, [globalParams]); useEffect(() => { return () => { diff --git a/src/pages/playground/components/params-settings.tsx b/src/pages/playground/components/params-settings.tsx index 1cb88058..88544e1d 100644 --- a/src/pages/playground/components/params-settings.tsx +++ b/src/pages/playground/components/params-settings.tsx @@ -52,21 +52,21 @@ const ParamsSettings: React.FC = ({ useEffect(() => { if (showModelSelector) { form.setFieldsValue({ - model: selectedModel || _.get(modelList, '[0].value'), - ...initialValues + ...initialValues, + model: selectedModel || _.get(modelList, '[0].value') }); setParams({ - model: selectedModel || _.get(modelList, '[0].value'), - ...initialValues + ...initialValues, + model: selectedModel || _.get(modelList, '[0].value') }); } else { form.setFieldsValue({ - model: selectedModel || '', - ...initialValues + ...initialValues, + model: selectedModel || '' }); setParams({ - model: selectedModel || '', - ...initialValues + ...initialValues, + model: selectedModel || '' }); } }, [modelList, showModelSelector, selectedModel]); diff --git a/src/pages/playground/style/ground-left.less b/src/pages/playground/style/ground-left.less index 5add89f7..6371b863 100644 --- a/src/pages/playground/style/ground-left.less +++ b/src/pages/playground/style/ground-left.less @@ -86,7 +86,7 @@ height: fit-content; top: -10px; font-size: var(--font-size-middle); - left: 50%; + left: calc(50% + 18px); transform: translateX(-50%); background-color: transparent; } diff --git a/src/utils/fetch-chunk-data.ts b/src/utils/fetch-chunk-data.ts index dbfbc5cc..b70b6a24 100644 --- a/src/utils/fetch-chunk-data.ts +++ b/src/utils/fetch-chunk-data.ts @@ -1,7 +1,8 @@ import qs from 'query-string'; +const extractStreamRegx = /data:\s*({.*?})(?=\n|$)/g; + const extractJSON = (dataStr: string) => { - const regex = /data:\s*({.*?})(?=\n|$)/g; let match; const results: any[] = []; @@ -9,9 +10,10 @@ const extractJSON = (dataStr: string) => { return results; } - while ((match = regex.exec(dataStr)) !== null) { + while ((match = extractStreamRegx.exec(dataStr)) !== null) { try { - results.push(JSON.parse(match[1])); + const jsonData = JSON.parse(match[1]); + results.push(jsonData); } catch (error) { console.error('JSON parse error:', error, 'for match:', match[1]); @@ -21,6 +23,7 @@ const extractJSON = (dataStr: string) => { return results; }; + /** * * @param params data: for post request, params: for get request @@ -74,8 +77,8 @@ export const readStreamData = async ( } let chunk = decoder.decode(value, { stream: true }); - console.log('chunk==========', chunk); extractJSON(chunk).forEach((data) => { + console.log('data====', data); callback?.(data); }); // callback(chunk);