fix: model be cleared when apply config to all in compare

src/components/echarts/scatter.tsx

@@ -11,8 +11,8 @@ const options: any = {
     ...grid,
     right: -1,
     top: -1,
-    bottom: -1,
+    bottom: 2,
-    left: -1,
+    left: 2,
     containLabel: true,
     borderRadius: 4
   },

src/components/logs-viewer/logs-pagination.tsx

@@ -13,7 +13,7 @@ interface LogsPaginationProps {
 }
 
 const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
-  const { page, total, pageSize, onWheel, onNext, onPrev } = props;
+  const { page, total, pageSize, onNext, onPrev } = props;
   const intl = useIntl();
 
   const handleOnPrev = () => {

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<LogsViewerProps> = 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<LogsViewerProps> = 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) {

src/components/markdown-viewer/index.tsx

@@ -199,14 +199,12 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
 
   return (
     <>
-      (
       <div
         style={{ height }}
         className="markdown-viewer custom-scrollbar-horizontal"
       >
         {renderTokens(tokens)}
       </div>
-      )
     </>
   );
 };

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 <h1>Something went wrong.</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

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<{
                   }}
                 >
                   <MarkdownViewer
-                    generateImgLink={
+                    generateImgLink={generateModeScopeImgLink}
-                      modelSource === modelSourceMap.modelscope_value
-                        ? generateModeScopeImgLink
-                        : undefined
-                    }
                     content={readmeText}
                     theme="light"
                   ></MarkdownViewer>
@@ -310,11 +312,7 @@ const ModelCard: React.FC<{
                 </TitleWrapper>
                 <div className="card-wrapper">
                   <MarkdownViewer
-                    generateImgLink={
+                    generateImgLink={generateModeScopeImgLink}
-                      modelSource === modelSourceMap.modelscope_value
-                        ? generateModeScopeImgLink
-                        : undefined
-                    }
                     content={readmeText}
                     theme="light"
                   ></MarkdownViewer>

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<ModelsProps> = ({
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
-  const [embeddingParams, setEmbeddingParams] = useState<any>({
-    params: {},
-    show: false
-  });
 
   const [openLogModal, setOpenLogModal] = useState(false);
   const [openAddModal, setOpenAddModal] = useState(false);
@@ -104,6 +99,8 @@ const Models: React.FC<ModelsProps> = ({
   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<ModelsProps> = ({
       key: 'chat',
       icon: <WechatWorkOutlined />
     },
-    // {
-    //   label: 'common.button.viewcode',
-    //   key: 'embedding',
-    //   icon: <IconFont type="icon-code" />
-    // },
     {
       label: 'common.button.delete',
       key: 'delete',
@@ -363,6 +355,8 @@ const Models: React.FC<ModelsProps> = ({
       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<ModelsProps> = ({
       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<ModelsProps> = ({
     return '';
   }, []);
 
-  const handleCloseViewCode = useCallback(() => {
-    setEmbeddingParams({
-      params: {},
-      show: false
-    });
-  }, []);
-
   return (
     <>
       <PageContainer
@@ -682,18 +660,12 @@ const Models: React.FC<ModelsProps> = ({
       <ViewLogsModal
         url={currentInstance.url}
         tail={currentInstance.tail}
+        id={currentInstance.id}
+        modelId={currentInstance.modelId}
         open={openLogModal}
         onCancel={handleLogModalCancel}
       ></ViewLogsModal>
       <DeleteModal ref={modalRef}></DeleteModal>
-      <ViewCodeModal
-        apiType="embedding"
-        open={embeddingParams.show}
-        messageList={[]}
-        parameters={embeddingParams.params}
-        onCancel={handleCloseViewCode}
-        title={intl.formatMessage({ id: 'playground.viewcode' })}
-      ></ViewCodeModal>
     </>
   );
 };

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<ViewModalProps> = (props) => {
-  const { open, url, onCancel, tail } = props || {};
-  const [modalSize, setModalSize] = useState<any>({
-    width: 600,
-    height: 420
-  });
-  const isFullScreenRef = React.useRef(false);
-  const logsViewerRef = React.useRef<any>(null);
-  const intl = useIntl();
   const viewportHeight = window.innerHeight;
-  const viewHeight = viewportHeight - 86;
+  const intl = useIntl();
-
+  const { setChunkRequest } = useSetChunkRequest();
-  const handleFullscreenToggle = useCallback(() => {
+  const { open, url, onCancel, tail } = props || {};
-    isFullScreenRef.current = !isFullScreenRef.current;
+  const [modalSize] = useState<any>({
-    setModalSize((size: any) => {
+    width: '100%',
-      return {
+    height: viewportHeight - 86
-        width: size.width === 600 ? '100%' : 600,
+  });
-        height: size.height === 420 ? viewHeight : 420
+  const [enableScorllLoad, setEnableScorllLoad] = useState(true);
-      };
+  const logsViewerRef = React.useRef<any>(null);
-    });
+  const requestRef = React.useRef<any>(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;
+      requestRef.current?.current?.cancel?.();
-      setModalSize({
+      requestRef.current = setChunkRequest({
-        width: '100%',
+        url: `${MODELS_API}/${props.id}/instances`,
-        height: viewHeight
+        handler: updateHandler
       });
     }
-  }, [open]);
+    return () => {
+      requestRef.current?.current?.cancel?.();
+    };
+  }, [props.id, open]);
 
   return (
     <Modal
@@ -79,6 +85,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         diffHeight={93}
         url={url}
         tail={tail}
+        enableScorllLoad={enableScorllLoad}
         params={{
           follow: true
         }}

src/pages/llmodels/index.tsx

@@ -130,6 +130,7 @@ const Models: React.FC = () => {
   };
 
   const updateInstanceHandler = (list: any) => {
+    console.log('updateInstanceHandler=====', list);
     setModelInstances(list);
   };
 

src/pages/playground/components/ground-images.tsx

@@ -221,7 +221,7 @@ const GroundImages: React.FC<MessageProps> = 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<MessageProps> = 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<MessageProps> = forwardRef((props, ref) => {
           });
           return;
         }
-        const data = chunk?.data || [];
+        console.log('data:================', chunk);
-        data.forEach((item: any) => {
+        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<MessageProps> = forwardRef((props, ref) => {
           >
             <SealInput.Number
               style={{ width: '100%' }}
-              label={intl.formatMessage({ id: 'playground.params.width' })}
+              label={`${intl.formatMessage({ id: 'playground.params.width' })}(px)`}
             ></SealInput.Number>
           </Form.Item>
           <Form.Item
@@ -385,7 +388,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
           >
             <SealInput.Number
               style={{ width: '100%' }}
-              label="Height"
+              label={`${intl.formatMessage({ id: 'playground.params.height' })}(px)`}
             ></SealInput.Number>
           </Form.Item>
         </div>

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -44,7 +44,6 @@ interface ModelItemProps {
 const ModelItem: React.FC<ModelItemProps> = forwardRef(
   ({ model, modelList, instanceId }, ref) => {
     const {
-      spans,
       globalParams,
       setGlobalParams,
       setLoadingStatus,
@@ -56,7 +55,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     const intl = useIntl();
     const isApplyToAllModels = useRef(false);
     const [systemMessage, setSystemMessage] = useState<string>('');
-    const [params, setParams] = useState<Record<string, any>>({});
+    const [params, setParams] = useState<Record<string, any>>({
+      model: model
+    });
     const [loading, setLoading] = useState(false);
     const messageId = useRef<number>(0);
     const [messageList, setMessageList] = useState<MessageItem[]>([]);
@@ -314,10 +315,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     useEffect(() => {
       setParams({
         ...params,
-        model: model,
         ...globalParams
       });
-    }, [globalParams, model]);
+    }, [globalParams]);
 
     useEffect(() => {
       return () => {

src/pages/playground/components/params-settings.tsx

@@ -52,21 +52,21 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
   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]);

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;
     }

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);