fix: usage chart y axis ticks, add esc hint for drawer

src/pages/llmodels/components/deploy-builtin-modal.tsx

@@ -1,9 +1,10 @@
 import ModalFooter from '@/components/modal-footer';
+import GSDrawer from '@/components/scroller-modal/gs-drawer';
 import { PageActionType } from '@/config/types';
 import { createAxiosToken } from '@/hooks/use-chunk-request';
 import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Drawer } from 'antd';
+import { Button } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -500,7 +501,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   }, []);
 
   return (
-    <Drawer
+    <GSDrawer
       title={
         <div className="flex-between flex-center">
           <span
@@ -613,7 +614,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
           </ColumnWrapper>
         </FormWrapper>
       </FormContext.Provider>
-    </Drawer>
+    </GSDrawer>
   );
 };
 

src/pages/llmodels/components/deploy-modal.tsx

@@ -1,8 +1,9 @@
 import ModalFooter from '@/components/modal-footer';
+import GSDrawer from '@/components/scroller-modal/gs-drawer';
 import { PageActionType } from '@/config/types';
 import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Drawer } from 'antd';
+import { Button } from 'antd';
 import _ from 'lodash';
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -14,6 +15,8 @@ import {
 import { FormContext } from '../config/form-context';
 import { FormData, SourceType } from '../config/types';
 import {
+  MessageStatus,
+  WarningStausOptions,
   checkOnlyAscendNPU,
   useCheckCompatibility,
   useSelectModel
@@ -106,6 +109,7 @@ const AddModal: FC<AddModalProps> = (props) => {
     setWarningStatus,
     handleBackendChangeBefore,
     cancelEvaluate,
+    unlockWarningStatus,
     handleOnValuesChange: handleOnValuesChangeBefore,
     handleEvaluateOnChange,
     warningStatus,
@@ -141,7 +145,8 @@ const AddModal: FC<AddModalProps> = (props) => {
 
   /**
    *
-   * @param state target to distinguish the evaluate state
+   * @param state target to distinguish the evaluate state, current evaluate state
+   *              can be 'model', 'file' or 'form'.
    */
   const setEvaluteState = (state: EvaluateProccessType) => {
     evaluateStateRef.current.state = state;
@@ -203,6 +208,7 @@ const AddModal: FC<AddModalProps> = (props) => {
     });
 
     if (item.fakeName) {
+      unlockWarningStatus();
       const currentModelId = requestModelIdRef.current;
       setEvaluteState(EvaluateProccess.file);
       const evaluateRes = await handleEvaluateOnChange?.({
@@ -245,7 +251,10 @@ const AddModal: FC<AddModalProps> = (props) => {
      * evaluate: true means select a model file from the evaluate result
      */
     updateRequestModelId();
+
+    // If the evaluate is false, it means that the user selects a new model or the first time to open the modal.
     if (!evaluate) {
+      unlockWarningStatus();
       setEvaluteState(EvaluateProccess.model);
       setSelectedModel(item);
       form.current?.form?.resetFields(resetFieldsByModel);
@@ -260,8 +269,8 @@ const AddModal: FC<AddModalProps> = (props) => {
       setIsGGUF(false);
       const modelInfo = onSelectModel(item, props.source);
       if (
-        !isHolderRef.current.model &&
-        evaluateStateRef.current.state === EvaluateProccess.model
+        evaluateStateRef.current.state === EvaluateProccess.model &&
+        item.evaluateResult
       ) {
         handleShowCompatibleAlert(item.evaluateResult);
         form.current?.setFieldsValue?.({
@@ -365,17 +374,20 @@ const AddModal: FC<AddModalProps> = (props) => {
     return warningStatus.show && warningStatus.type !== 'success';
   }, [warningStatus.show, warningStatus.type]);
 
-  const displayEvaluateStatus = (data: {
-    show?: boolean;
-    flag: Record<string, boolean>;
-  }) => {
-    setIsHolderRef(data.flag);
-    setWarningStatus({
-      show: isHolderRef.current.model || isHolderRef.current.file,
-      title: '',
-      type: 'transition',
-      message: intl.formatMessage({ id: 'models.form.evaluating' })
-    });
+  // This is only a placeholder for querying the model or file during the transition period.
+  const displayEvaluateStatus = (
+    params: MessageStatus,
+    options?: WarningStausOptions
+  ) => {
+    setWarningStatus(
+      {
+        show: params.show,
+        title: '',
+        type: 'transition',
+        message: intl.formatMessage({ id: 'models.form.evaluating' })
+      },
+      options
+    );
   };
 
   useEffect(() => {
@@ -395,7 +407,7 @@ const AddModal: FC<AddModalProps> = (props) => {
   }, [open, props.gpuOptions.length]);
 
   return (
-    <Drawer
+    <GSDrawer
       title={
         <div className="flex-between flex-center">
           <span>{title}</span>
@@ -435,6 +447,7 @@ const AddModal: FC<AddModalProps> = (props) => {
                     modelSource={props.source}
                     onSelectModel={handleOnSelectModel}
                     displayEvaluateStatus={displayEvaluateStatus}
+                    unlockWarningStatus={unlockWarningStatus}
                     gpuOptions={props.gpuOptions}
                   ></SearchModel>
                 </ColumnWrapper>
@@ -535,7 +548,7 @@ const AddModal: FC<AddModalProps> = (props) => {
           </FormWrapper>
         </FormContext.Provider>
       </div>
-    </Drawer>
+    </GSDrawer>
   );
 };
 

src/pages/llmodels/components/model-card.tsx

@@ -20,9 +20,9 @@ import React, {
   useState
 } from 'react';
 import 'simplebar-react/dist/simplebar.min.css';
+import styled from 'styled-components';
 import {
   downloadModelFile,
-  downloadModelScopeModelfile,
   queryHuggingfaceModelDetail,
   queryModelScopeModelDetail
 } from '../apis';
@@ -30,6 +30,41 @@ import { modelSourceMap } from '../config';
 import '../style/model-card.less';
 import TitleWrapper from './title-wrapper';
 
+const MkdTitle = styled.span`
+  cursor: pointer;
+  background-color: var(--ant-color-fill-tertiary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  height: 36px;
+`;
+
+const MarkDownTitle: React.FC<{
+  collapsed: boolean;
+  loading: boolean;
+  onCollapse: () => void;
+}> = ({ collapsed, loading, onCollapse }) => {
+  const intl = useIntl();
+  return (
+    <MkdTitle onClick={onCollapse}>
+      <span>
+        <FileTextOutlined className="m-r-2 text-tertiary" />{' '}
+        {intl.formatMessage({ id: 'models.readme' })}
+      </span>
+      <span>
+        {collapsed ? (
+          <DownOutlined />
+        ) : loading ? (
+          <Spin spinning={true} size="small"></Spin>
+        ) : (
+          <RightOutlined />
+        )}
+      </span>
+    </MkdTitle>
+  );
+};
+
 const ModelCard: React.FC<{
   onCollapse: (flag: boolean) => void;
   setIsGGUF: (flag: boolean) => void;
@@ -69,6 +104,7 @@ const ModelCard: React.FC<{
       return modelData?.ModelType?.[0];
     }
   }, [modelData, modelSource]);
+
   const loadFile = useCallback(async (repo: string, sha: string) => {
     try {
       axiosTokenRef.current?.abort?.();
@@ -95,27 +131,6 @@ const ModelCard: React.FC<{
     }
   };
 
-  const loadConfig = useCallback(async (repo: string, sha: string) => {
-    try {
-      loadConfigTokenRef.current?.abort?.();
-      loadConfigTokenRef.current = new AbortController();
-      const res = await downloadModelFile(
-        {
-          repo,
-          revision: sha,
-          path: 'config.json'
-        },
-        {
-          signal: loadConfigTokenRef.current.signal
-        }
-      );
-      return res || null;
-    } catch (error) {
-      console.log('error======', error);
-      return null;
-    }
-  }, []);
-
   const removeMetadata = useCallback((str: string) => {
     let indexes = [];
     let index = str.indexOf('---');
@@ -165,23 +180,6 @@ const ModelCard: React.FC<{
     }
   };
 
-  const loadModelscopeModelConfig = useCallback(async (name: string) => {
-    try {
-      loadConfigJsonTokenRef.current?.abort?.();
-      loadConfigJsonTokenRef.current = new AbortController();
-      return await downloadModelScopeModelfile(
-        {
-          name: name
-        },
-        {
-          signal: loadConfigJsonTokenRef.current.token
-        }
-      );
-    } catch (error) {
-      return null;
-    }
-  }, []);
-
   const getModelScopeModelDetail = async () => {
     try {
       const data = await queryModelScopeModelDetail(
@@ -352,27 +350,25 @@ const ModelCard: React.FC<{
                   overflow: 'hidden'
                 }}
               >
-                <span className="mkd-title" onClick={handleCollapse}>
-                  <span>
-                    <FileTextOutlined className="m-r-2 text-tertiary" />{' '}
-                    README.md
-                  </span>
-                  <span>
-                    {collapsed ? <DownOutlined /> : <RightOutlined />}
-                  </span>
-                </span>
-                <SimpleOverlay
-                  style={{
-                    paddingTop: collapsed ? 12 : 0,
-                    maxHeight: collapsed ? 300 : 0
-                  }}
-                >
-                  <MarkdownViewer
-                    generateImgLink={generateModeScopeImgLink}
-                    content={readmeText}
-                    theme="light"
-                  ></MarkdownViewer>
-                </SimpleOverlay>
+                <MarkDownTitle
+                  onCollapse={handleCollapse}
+                  collapsed={collapsed}
+                  loading={loading}
+                ></MarkDownTitle>
+                <Spin spinning={loading && collapsed}>
+                  <SimpleOverlay
+                    style={{
+                      paddingTop: collapsed ? 12 : 0,
+                      maxHeight: collapsed ? 300 : 0
+                    }}
+                  >
+                    <MarkdownViewer
+                      generateImgLink={generateModeScopeImgLink}
+                      content={readmeText}
+                      theme="light"
+                    ></MarkdownViewer>
+                  </SimpleOverlay>
+                </Spin>
               </div>
             )}
           </div>

src/pages/llmodels/components/search-model.tsx

@@ -18,7 +18,11 @@ import {
   modelSourceMap
 } from '../config';
 import { handleRecognizeAudioModel } from '../config/audio-catalog';
-import { checkCurrentbackend } from '../hooks';
+import {
+  MessageStatus,
+  WarningStausOptions,
+  checkCurrentbackend
+} from '../hooks';
 import SearchStyle from '../style/search-result.less';
 import SearchInput from './search-input';
 import SearchResult from './search-result';
@@ -37,10 +41,11 @@ interface SearchInputProps {
   setLoadingModel?: (flag: boolean) => void;
   onSourceChange?: (source: string) => void;
   onSelectModel: (model: any, evaluate?: boolean) => void;
-  displayEvaluateStatus?: (data: {
-    show?: boolean;
-    flag: Record<string, boolean>;
-  }) => void;
+  unlockWarningStatus?: () => void;
+  displayEvaluateStatus?: (
+    data: MessageStatus,
+    options?: WarningStausOptions
+  ) => void;
 }
 
 const SearchModel: React.FC<SearchInputProps> = (props) => {
@@ -52,7 +57,8 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
     gpuOptions,
     setLoadingModel,
     onSelectModel,
-    displayEvaluateStatus
+    displayEvaluateStatus,
+    unlockWarningStatus
   } = props;
   const [dataSource, setDataSource] = useState<{
     repoOptions: any[];
@@ -296,19 +302,6 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
         (item) => item.id === currentRef.current
       );
 
-      /**
-       * if item is GGUF, the evaluating would be do after selecting the model file, Or the evaluate status of model would be overrided the
-       * file evaluate status.
-       */
-      if (currentItem && !currentItem.isGGUF) {
-        displayEvaluateStatus?.({
-          show: false,
-          flag: {
-            model: false
-          }
-        });
-      }
-
       if (currentItem) {
         handleOnSelectModel(currentItem, true);
       }
@@ -372,12 +365,18 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
         networkError: false,
         sortType: sort
       });
-      displayEvaluateStatus?.({
-        show: true,
-        flag: {
-          model: list.length > 0
+
+      // It's a new request, so we need to reset the state
+      unlockWarningStatus?.();
+      displayEvaluateStatus?.(
+        {
+          show: list.length > 0,
+          message: ''
+        },
+        {
+          override: true
         }
-      });
+      );
       handleOnSelectModel(list[0]);
       setLoadingModel?.(false);
 
@@ -393,9 +392,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
       setLoadingModel?.(false);
       displayEvaluateStatus?.({
         show: false,
-        flag: {
-          model: false
-        }
+        message: ''
       });
       handleOnSelectModel({});
       cacheRepoOptions.current = [];
@@ -460,12 +457,17 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
           repoOptions: currentList
         };
       });
-      displayEvaluateStatus?.({
-        show: true,
-        flag: {
-          model: true
+      unlockWarningStatus?.();
+      // reset evaluate status
+      displayEvaluateStatus?.(
+        {
+          show: true,
+          message: ''
+        },
+        {
+          override: true
         }
-      });
+      );
       console.log('isEvaluating:', isEvaluating);
       handleOnSelectModel(currentList[0]);
       handleEvaluate(currentList);

src/pages/llmodels/components/search-result.tsx

@@ -128,4 +128,4 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
   );
 };
 
-export default React.memo(SearchResult);
+export default SearchResult;