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

2024-11-22 18:25:07 +08:00
parent c8c22b3f22
commit a6f0f554f0
14 changed files with 124 additions and 102 deletions
@@ -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>
@@ -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>
    </>
  );
 };
@@ -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 handleFullscreenToggle = useCallback(() => {
-    isFullScreenRef.current = !isFullScreenRef.current;
-    setModalSize((size: any) => {
-      return {
-        width: size.width === 600 ? '100%' : 600,
-        height: size.height === 420 ? viewHeight : 420
-      };
-    });
-  }, []);
+  const intl = useIntl();
+  const { setChunkRequest } = useSetChunkRequest();
+  const { open, url, onCancel, tail } = props || {};
+  const [modalSize] = useState<any>({
+    width: '100%',
+    height: viewportHeight - 86
+  });
+  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;
-      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
        }}