fix: image editor fit view incorrect, do not query gguf files when gguf unchecked

src/components/card-wrapper/simple-card.tsx

@@ -9,7 +9,6 @@ const SimpleCardItemWrapper = styled.div`
   width: 100%;
   height: 100%;
   gap: 16px;
-  margin-bottom: 16px;
 `;
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -32,8 +31,24 @@ const useStyles = createStyles(({ css, token }) => ({
       font-weight: var(--font-weight-medium);
     }
     .content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       font-size: ${token.fontSize}px;
       color: ${token.colorTextSecondary};
+      gap: 8px;
+      .icon {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        gap: 10px;
+        &.roundRect {
+          border-radius: 2px;
+        }
+        &.circle {
+          border-radius: 50%;
+        }
+      }
     }
   `
 }));
@@ -42,21 +57,36 @@ export const SimpleCardItem: React.FC<{
   content?: React.ReactNode;
   style?: React.CSSProperties;
   bordered?: boolean;
+  color?: string;
+  iconType?: string;
 }> = (props) => {
   const { styles, cx } = useStyles();
 
-  const { title, content, style, bordered } = props;
+  const { title, content, style, bordered, iconType, color } = props;
 
   return (
     <div className={cx({ bordered: bordered }, styles.wrapper)} style={style}>
       <div className="title">{title}</div>
-      <div className="content">{content}</div>
+      <div className="content">
+        <span
+          className={cx([iconType], 'icon')}
+          style={{
+            backgroundColor: color || 'transparent'
+          }}
+        ></span>
+        <span>{content}</span>
+      </div>
     </div>
   );
 };
 
 export const SimpleCard: React.FC<{
-  dataList: { label: string; value: React.ReactNode }[];
+  dataList: {
+    label: string;
+    value: React.ReactNode;
+    color: string;
+    iconType: string;
+  }[];
   height?: string | number;
   bordered?: boolean;
 }> = (props) => {
@@ -70,6 +100,8 @@ export const SimpleCard: React.FC<{
           title={item.label}
           content={item.value}
           bordered={bordered}
+          color={item.color}
+          iconType={item.iconType}
         ></SimpleCardItem>
       ))}
     </SimpleCardItemWrapper>

src/components/echarts/config.ts

@@ -41,18 +41,23 @@ export default function useChartConfig() {
     borderColor: 'transparent',
     formatter(params: any, callback?: (val: any) => any) {
       let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;
+
       params.forEach((item: any) => {
         let value = isFunction(callback)
           ? callback?.(item.data.value)
           : item.data.value;
+
+        const borderRadius = item.seriesType === 'bar' ? '2px' : '8px';
+
         result += `<span class="tooltip-item">
-     <span class="tooltip-item-name">
+          <span class="tooltip-item-name">
-       <span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:${item.color};"></span>
+            <span style="display:inline-block;margin-right:5px;border-radius:${borderRadius};width:8px;height:8px;background-color:${item.color};"></span>
-       <span class="tooltip-title">${item.seriesName}</span>:
+            <span class="tooltip-title">${item.seriesName}</span>:
-     </span>
+          </span>
-      <span class="tooltip-value">${value}</span>
+            <span class="tooltip-value">${value}</span>
       </span>`;
       });
+
       return `<div class="tooltip-wrapper">${result}</div>`;
     }
   };

src/components/echarts/mix-line-bar.tsx

@@ -43,7 +43,11 @@ const MixLineBarChart: React.FC<
     title: {
       text: ''
     },
-    grid,
+    grid: {
+      ...grid,
+      top: 20,
+      bottom: 20
+    },
     tooltip: {
       ...tooltip,
       formatter(params: any) {
@@ -62,7 +66,10 @@ const MixLineBarChart: React.FC<
     yAxis,
     legend: {
       ...legend,
-      data: legendData
+      data: legendData,
+      itemGap: 20,
+      bottom: 5,
+      show: false
     },
 
     series: []

src/components/image-editor/index.tsx

@@ -433,7 +433,6 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
       fitView();
       setActiveScale(autoScale.current);
       updateCursorSize();
-      redrawStrokes(strokesRef.current);
     };
 
     const handleBrushSizeChange = (value: number) => {
@@ -458,7 +457,14 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
           undo();
         }
       };
+      window.addEventListener('keydown', handleUndoShortcut);
 
+      return () => {
+        window.removeEventListener('keydown', handleUndoShortcut);
+      };
+    }, []);
+
+    useEffect(() => {
       const handleMouseDown = (e: MouseEvent) => {
         mouseDownState.current = true;
       };
@@ -467,7 +473,6 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
         mouseDownState.current = false;
       };
 
-      window.addEventListener('keydown', handleUndoShortcut);
       // mouse down
       window.addEventListener('mousedown', handleMouseDown);
 
@@ -475,7 +480,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
       window.addEventListener('mouseup', handleMouseUp);
       return () => {
         clearTimeout(timer.current);
-        window.removeEventListener('keydown', handleUndoShortcut);
+
         window.removeEventListener('mousedown', handleMouseDown);
         window.removeEventListener('mouseup', handleMouseUp);
       };

src/hooks/use-request-token.ts

@@ -11,19 +11,17 @@ export function useCancelToken() {
   const { source } = axiso.CancelToken;
   const requestToken = useRef<any>(null);
 
-  const updateCancelToken = () => {
-    if (requestToken.current) {
-      requestToken.current.cancel();
-    }
-    requestToken.current = source();
-  };
-
   const cancelRequest = () => {
     if (requestToken.current) {
       requestToken.current.cancel();
     }
   };
 
+  const updateCancelToken = () => {
+    cancelRequest();
+    requestToken.current = source();
+  };
+
   const getCanceltToken = () => {
     return requestToken.current.token;
   };
@@ -38,3 +36,33 @@ export function useCancelToken() {
 
   return { updateCancelToken, cancelRequest, getCanceltToken, source };
 }
+
+export function useAbortController() {
+  const controller = useRef<AbortController | null>(null);
+
+  const abortController = () => {
+    if (controller.current) {
+      controller.current.abort();
+    }
+  };
+
+  const getController = () => {
+    if (!controller.current) {
+      controller.current = new AbortController();
+    }
+    return controller.current;
+  };
+
+  const updateController = () => {
+    abortController();
+    controller.current = new AbortController();
+  };
+
+  useEffect(() => {
+    return () => {
+      abortController();
+    };
+  }, []);
+
+  return { getController, updateController, abortController, controller };
+}

src/pages/dashboard/components/usage-inner/index.tsx

@@ -1,4 +1,3 @@
-import { SimpleCard } from '@/components/card-wrapper/simple-card';
 import PageTools from '@/components/page-tools';
 import { ExportOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
@@ -95,11 +94,11 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
               {intl.formatMessage({ id: 'common.button.export' })}
             </Button>
           </FilterWrapper>
-          <SimpleCard
+          {/* <SimpleCard
             dataList={dataList}
             height={80}
             bordered={true}
-          ></SimpleCard>
+          ></SimpleCard> */}
           <RequestTokenInner
             requestData={requestTokenData.requestData}
             xAxisData={requestTokenData.xAxisData}

src/pages/dashboard/components/usage-inner/request-token-inner.tsx

@@ -1,8 +1,9 @@
 import CardWrapper from '@/components/card-wrapper';
+import { SimpleCard } from '@/components/card-wrapper/simple-card';
 import MixLineBar from '@/components/echarts/mix-line-bar';
-import { useIntl } from '@umijs/max';
 import dayjs from 'dayjs';
 import React from 'react';
+import { baseColorMap } from '../../config';
 
 interface RequestTokenInnerProps {
   requestData: {
@@ -22,9 +23,24 @@ const labelFormatter = (v: any) => {
 };
 
 const dataList = [
-  { label: '100M', value: 'Completion Tokens' },
+  {
-  { label: '50M', value: 'Prompt Tokens' },
+    label: '100M',
-  { label: '120K', value: 'API Requests' }
+    value: 'Completion Tokens',
+    iconType: 'roundRect',
+    color: baseColorMap.base
+  },
+  {
+    label: '50M',
+    value: 'Prompt Tokens',
+    iconType: 'roundRect',
+    color: baseColorMap.baseR3
+  },
+  {
+    label: '120K',
+    value: 'API Requests',
+    iconType: 'circle',
+    color: baseColorMap.baseR1
+  }
 ];
 
 const legendData = [
@@ -35,31 +51,10 @@ const legendData = [
 
 const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
   const { requestData, tokenData, xAxisData } = props;
-  const intl = useIntl();
 
   return (
     <CardWrapper style={{ width: '100%' }}>
-      {/* <Row style={{ width: '100%' }}>
+      <SimpleCard dataList={dataList} height={80}></SimpleCard>
-        <Col span={12}>
-          <LineChart
-            title={intl.formatMessage({ id: 'dashboard.apirequest' })}
-            seriesData={requestData}
-            xAxisData={xAxisData}
-            height={360}
-            labelFormatter={labelFormatter}
-          ></LineChart>
-        </Col>
-        <Col span={12}>
-          <BarChart
-            title={intl.formatMessage({ id: 'dashboard.tokens' })}
-            seriesData={tokenData}
-            xAxisData={xAxisData}
-            height={360}
-            labelFormatter={labelFormatter}
-          ></BarChart>
-        </Col>
-      </Row> */}
-      {/* <SimpleCard dataList={dataList} height={80}></SimpleCard> */}
       <MixLineBar
         chartData={{
           line: requestData,

src/pages/dashboard/components/usage-inner/top-user.tsx

@@ -13,7 +13,7 @@ const TopUser: React.FC<TopUserProps> = (props) => {
 
   return (
     <CardWrapper>
-      <HBar seriesData={userData} xAxisData={topUserList} height={512}></HBar>
+      <HBar seriesData={userData} xAxisData={topUserList} height={496}></HBar>
     </CardWrapper>
   );
 };

src/pages/dashboard/components/usage-inner/use-usage-data.ts

@@ -1,14 +1,6 @@
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
-
+import { baseColorMap } from '../../config';
-const baseColorMap = {
-  baseL2: 'rgba(13,171,219,0.8)',
-  baseL1: 'rgba(0,34,255,0.8)',
-  base: 'rgba(0,85,255,0.8)',
-  baseR1: 'rgba(0,255,233,0.8)',
-  baseR2: 'rgba(48,0,255,0.8)',
-  baseR3: 'rgba(85,167,255,0.8)'
-};
 
 interface RequestTokenData {
   requestData: {

src/pages/dashboard/config/index.ts

@@ -70,3 +70,12 @@ export const exportTableColumns = [
     }
   }
 ];
+
+export const baseColorMap = {
+  baseL2: 'rgba(13,171,219,0.8)',
+  baseL1: 'rgba(0,34,255,0.8)',
+  base: 'rgba(0,85,255,0.8)',
+  baseR1: 'rgba(0,255,233,0.8)',
+  baseR2: 'rgba(48,0,255,0.8)',
+  baseR3: 'rgba(85,167,255,0.8)'
+};

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

@@ -128,6 +128,8 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       'backend_version',
       'backend_parameters'
     ]);
+
+    // if the backend_parameters is empty, use the defaultSpec.backend_parameters
     return {
       ...currentData,
       backend_parameters:

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

@@ -3,7 +3,7 @@ import { PageActionType } from '@/config/types';
 import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Drawer } from 'antd';
-import _, { debounce } from 'lodash';
+import _ from 'lodash';
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import {
@@ -75,6 +75,14 @@ type AddModalProps = {
   onCancel: () => void;
 };
 
+type EvaluateProccessType = 'model' | 'file' | 'form';
+
+const EvaluateProccess: Record<string, EvaluateProccessType> = {
+  model: 'model',
+  file: 'file',
+  form: 'form'
+};
+
 const AddModal: FC<AddModalProps> = (props) => {
   const {
     title,
@@ -118,7 +126,7 @@ const AddModal: FC<AddModalProps> = (props) => {
     model: false,
     file: false
   });
-  const evaluateStateRef = useRef<{ state: 'model' | 'file' | 'form' }>({
+  const evaluateStateRef = useRef<{ state: EvaluateProccessType }>({
     state: 'form'
   });
 
@@ -126,7 +134,7 @@ const AddModal: FC<AddModalProps> = (props) => {
    *
    * @param state target to distinguish the evaluate state
    */
-  const setEvaluteState = (state: 'model' | 'file' | 'form') => {
+  const setEvaluteState = (state: EvaluateProccessType) => {
     evaluateStateRef.current.state = state;
   };
 
@@ -146,7 +154,7 @@ const AddModal: FC<AddModalProps> = (props) => {
     allValues: any;
     source: SourceType;
   }) => {
-    setEvaluteState('form');
+    setEvaluteState(EvaluateProccess.form);
     handleOnValuesChangeBefore(data);
   };
 
@@ -186,7 +194,7 @@ const AddModal: FC<AddModalProps> = (props) => {
     });
 
     if (item.fakeName) {
-      setEvaluteState('file');
+      setEvaluteState(EvaluateProccess.file);
       const evaluateRes = await handleEvaluateOnChange?.({
         changedValues: {},
         allValues: form.current?.form?.getFieldsValue?.(),
@@ -199,7 +207,6 @@ const AddModal: FC<AddModalProps> = (props) => {
       /**
        * do not reset backend_parameters when select a model file
        */
-
       const formBackendParameters =
         form.current?.getFieldValue?.('backend_parameters') || [];
 
@@ -219,7 +226,7 @@ const AddModal: FC<AddModalProps> = (props) => {
   const handleOnSelectModel = (item: any, evaluate?: boolean) => {
     // when select a model not from the evaluate result,
     if (!evaluate) {
-      setEvaluteState('model');
+      setEvaluteState(EvaluateProccess.model);
       setSelectedModel(item);
       form.current?.form?.resetFields(resetFieldsByModel);
       const modelInfo = onSelectModel(item, props.source);
@@ -260,14 +267,16 @@ const AddModal: FC<AddModalProps> = (props) => {
     form.current?.submit?.();
   };
 
-  const debounceFetchModelFiles = debounce(() => {
+  const handleSetIsGGUF = async (flag: boolean) => {
-    modelFileRef.current?.fetchModelFiles?.();
+    console.log('handleSetIsGGUF', flag);
-  }, 100);
-
-  const handleSetIsGGUF = (flag: boolean) => {
     setIsGGUF(flag);
+    await new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(true);
+      }, 0);
+    });
     if (flag) {
-      debounceFetchModelFiles();
+      modelFileRef.current?.fetchModelFiles?.();
     }
   };
 

src/pages/llmodels/components/hf-model-file.tsx

@@ -313,7 +313,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
         return sortType === 'size' ? item.size : item.path;
       });
 
-      handleSelectModelFile(sortList[0]);
+      handleSelectModelFile(sortList[0] || {});
       setDataSource({ fileList: sortList, loading: false });
     } catch (error) {
       setDataSource({ fileList: [], loading: false });
@@ -329,12 +329,6 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
     setDataSource({ ...dataSource, fileList: list });
   };
 
-  const handleOnEnter = (e: any, item: any) => {
-    e.stopPropagation();
-    if (e.key === 'Enter') {
-      handleSelectModelFile(item);
-    }
-  };
   useImperativeHandle(ref, () => ({
     fetchModelFiles: handleFetchModelFiles
   }));
@@ -398,7 +392,6 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
                     isEvaluating={isEvaluating}
                     active={item.path === current}
                     handleSelectModelFile={handleSelectModelFile}
-                    handleOnEnter={handleOnEnter}
                   ></ModelFileItem>
                 );
               })}

src/pages/llmodels/components/model-file-item.tsx

@@ -17,7 +17,6 @@ interface ModelFileItemProps {
   isEvaluating: boolean;
   active: boolean;
   handleSelectModelFile: (item: any) => void;
-  handleOnEnter: (e: any, item: any) => void;
 }
 
 const FilePartsTag = (props: { parts: any[] }) => {
@@ -50,13 +49,7 @@ const FilePartsTag = (props: { parts: any[] }) => {
 };
 
 const ModelFileItem: React.FC<ModelFileItemProps> = (props) => {
-  const {
+  const { data: item, isEvaluating, active, handleSelectModelFile } = props;
-    data: item,
-    isEvaluating,
-    active,
-    handleSelectModelFile,
-    handleOnEnter
-  } = props;
 
   const getModelQuantizationType = (item: any) => {
     let path = item.path;
@@ -88,7 +81,6 @@ const ModelFileItem: React.FC<ModelFileItemProps> = (props) => {
       })}
       tabIndex={0}
       onClick={() => handleSelectModelFile(item)}
-      onKeyDown={(e) => handleOnEnter(e, item)}
     >
       <div className="title">{item.path}</div>
       <div className="tags flex-between">

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

@@ -115,7 +115,6 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
       setTokenResult(null);
       setMessageList([]);
 
-      cancelRequest();
       updateCancelToken();
 
       setRouteCache(routeCachekey['/playground/speech'], true);