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

1 year ago · a6f0f554f0
parent c8c22b3f22
commit a6f0f554f0
14 changed files with 122 additions and 100 deletions
--- 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
  },
--- 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<LogsPaginationProps> = (props) => {
-  const { page, total, pageSize, onWheel, onNext, onPrev } = props;
+  const { page, total, pageSize, onNext, onPrev } = props;
  const intl = useIntl();

  const handleOnPrev = () => {
--- 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<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) {
--- a/src/components/markdown-viewer/index.tsx
+++ b/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>
-      )
    </>
  );
 };
--- a/src/layouts/error-boundary.tsx
+++ 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 <h1>Something went wrong.</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
--- 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<{
                  }}
                >
                  <MarkdownViewer
-                    generateImgLink={
-                      modelSource === modelSourceMap.modelscope_value
-                        ? generateModeScopeImgLink
-                        : undefined
-                    }
+                    generateImgLink={generateModeScopeImgLink}
                    content={readmeText}
                    theme="light"
                  ></MarkdownViewer>
@ -310,11 +312,7 @@ const ModelCard: React.FC<{
                </TitleWrapper>
                <div className="card-wrapper">
                  <MarkdownViewer
-                    generateImgLink={
-                      modelSource === modelSourceMap.modelscope_value
-                        ? generateModeScopeImgLink
-                        : undefined
-                    }
+                    generateImgLink={generateModeScopeImgLink}
                    content={readmeText}
                    theme="light"
                  ></MarkdownViewer>
--- 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<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>
    </>
  );
 };
--- 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<ViewModalProps> = (props) => {
+  const viewportHeight = window.innerHeight;
+  const intl = useIntl();
+  const { setChunkRequest } = useSetChunkRequest();
  const { open, url, onCancel, tail } = props || {};
-  const [modalSize, setModalSize] = useState<any>({
-    width: 600,
-    height: 420
+  const [modalSize] = useState<any>({
+    width: '100%',
+    height: viewportHeight - 86
  });
-  const isFullScreenRef = React.useRef(false);
+  const [enableScorllLoad, setEnableScorllLoad] = useState(true);
  const logsViewerRef = React.useRef<any>(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<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;
-      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 (
    <Modal
@ -79,6 +85,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
        diffHeight={93}
        url={url}
        tail={tail}
+        enableScorllLoad={enableScorllLoad}
        params={{
          follow: true
        }}
--- 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);
  };

--- a/src/pages/playground/components/ground-images.tsx
+++ b/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 || [];
-        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<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>
--- 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<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 () => {
--- a/src/pages/playground/components/params-settings.tsx
+++ b/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]);
--- 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;
    }
--- 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);