fix: clear backend parameters when change model file

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

@@ -0,0 +1,65 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+import styled from 'styled-components';
+
+const SimpleCardItemWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  gap: 10px;
+`;
+
+const useStyles = createStyles(({ css, token }) => ({
+  wrapper: css`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: ${token.colorBgContainer};
+    border-radius: ${token.borderRadius}px;
+    padding: ${token.padding}px;
+    justify-content: center;
+    align-items: center;
+    gap: ${token.padding}px;
+    .title {
+      font-size: ${token.fontSize}px;
+      font-weight: var(--font-weight-500);
+    }
+  `
+}));
+export const SimpleCardItem: React.FC<{
+  title?: string;
+  content?: React.ReactNode;
+  style?: React.CSSProperties;
+}> = (props) => {
+  const { styles } = useStyles();
+
+  const { title, content, style } = props;
+
+  return (
+    <div className={styles.wrapper} style={style}>
+      <div className="title">{title}</div>
+      <div className="content">{content}</div>
+    </div>
+  );
+};
+
+export const SimpleCard: React.FC<{
+  dataList: { label: string; value: React.ReactNode }[];
+}> = (props) => {
+  const { dataList } = props;
+
+  return (
+    <SimpleCardItemWrapper>
+      {dataList.map((item, index) => (
+        <SimpleCardItem
+          key={index}
+          title={item.label}
+          content={item.value}
+        ></SimpleCardItem>
+      ))}
+    </SimpleCardItemWrapper>
+  );
+};

src/components/echarts/config.ts

@@ -98,8 +98,6 @@ export default function useChartConfig() {
   };
 
   const yAxis = {
-    // max: 100,
-    // min: 0,
     nameTextStyle: {
       padding: [0, 0, 0, -20]
     },

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

@@ -30,6 +30,7 @@ const MixLineBarChart: React.FC<
     grid,
     legend,
     lineItemConfig,
+    barItemConfig,
     title: titleConfig,
     tooltip,
     xAxis,
@@ -73,7 +74,7 @@ const MixLineBarChart: React.FC<
   };
 
   const dataOptions = useMemo((): any => {
-    const data = _.map(seriesData, (item: any) => {
+    const linedata = _.map(lineSeriesData, (item: any) => {
       return {
         ...item,
         ...lineItemConfig,
@@ -82,12 +83,26 @@ const MixLineBarChart: React.FC<
           ...lineItemConfig.itemStyle,
           color: item.color
         },
+        yAxisIndex: 1,
         lineStyle: {
           ...lineItemConfig.lineStyle,
           color: item.color
         }
       };
     });
+
+    const barData = _.map(barSeriesData, (item: any) => {
+      return {
+        ...item,
+        ...barItemConfig,
+        stack: 'total',
+        yAxisIndex: 0,
+        itemStyle: {
+          color: item.color
+        }
+      };
+    });
+
     return {
       ...options,
       animation: false,
@@ -95,25 +110,35 @@ const MixLineBarChart: React.FC<
         ...titleConfig,
         text: title
       },
-      yAxis: {
+      yAxis: [
-        ...options.yAxis,
+        {
-        name: yAxisName,
+          ...options.yAxis,
-        nameTextStyle: {
+          min: 0,
-          fontSize: 12,
+
-          align: 'right'
+          splitNumber: 7
+        },
+        {
+          ...options.yAxis,
+          min: 0,
+          max: 70,
+          splitNumber: 7,
+          nameTextStyle: {
+            fontSize: 12,
+            align: 'right'
+          }
         }
-      },
+      ],
       xAxis: {
         ...options.xAxis,
         data: xAxisData
       },
-      series: data
+      series: [...linedata, ...barData]
     };
   }, [seriesData, xAxisData, yAxisName, title, smooth, legendData, options]);
 
   return (
     <>
-      {!seriesData.length ? (
+      {!lineSeriesData.length && !barSeriesData.length ? (
         <EmptyData height={height} title={title}></EmptyData>
       ) : (
         <Chart

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

@@ -23,12 +23,16 @@ const labelFormatter = (v: any) => {
   return dayjs(v).format('MM-DD');
 };
 
+const dataList = [
+  { label: '100M', value: 'Completion Tokens' },
+  { label: '50M', value: 'Prompt Tokens' },
+  { label: '120K', value: 'API Requests' }
+];
+
 const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
   const { requestData, tokenData, xAxisData } = props;
   const intl = useIntl();
 
-  console.log('usage===========', requestData, tokenData, xAxisData);
-
   return (
     <CardWrapper style={{ width: '100%' }}>
       <Row style={{ width: '100%' }}>
@@ -51,17 +55,6 @@ const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
           ></BarChart>
         </Col>
       </Row>
-      {/* <MixLineBar
-        title={intl.formatMessage({ id: 'dashboard.apirequest' })}
-        chartData={{
-          line: requestData,
-          bar: tokenData
-        }}
-        seriesData={[]}
-        xAxisData={xAxisData}
-        height={360}
-        labelFormatter={labelFormatter}
-      ></MixLineBar> */}
     </CardWrapper>
   );
 };

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

@@ -125,9 +125,16 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     form.current?.submit?.();
   };
 
+  // use for size change and quantization change
   const pickSomeFieldsValue = () => {
     const formData = form.current?.getFieldsValue();
-    return _.pick(formData, ['worker_selector', 'gpu_selector', 'env']);
+    return _.pick(formData, [
+      'worker_selector',
+      'gpu_selector',
+      'env',
+      'backend_version',
+      'backend_parameters'
+    ]);
   };
 
   const generateSubmitData = (formData: FormData) => {
@@ -321,21 +328,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     });
   };
 
-  const handleAdvanceOnValuesChange = (data: {
-    changedValues: any;
-    allValues: any;
-    source: string;
-  }) => {
-    handleOnValuesChange?.({
-      changedValues: data.changedValues,
-      allValues: {
-        ..._.omit(selectSpecRef.current, ['name']),
-        ...data.allValues
-      },
-      source: data.source
-    });
-  };
-
   const handleBackendChange = (backend: string) => {
     if (backend === backendOptionsMap.llamaBox) {
       setIsGGUF(true);

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

@@ -28,7 +28,7 @@ import SearchModel from './search-model';
 import Separator from './separator';
 import TitleWrapper from './title-wrapper';
 
-const resetFields = [
+const resetFieldsByModel = [
   'cpu_offloading',
   'distributed_inference_across_workers',
   'backend_version',
@@ -36,6 +36,11 @@ const resetFields = [
   'env'
 ];
 
+const resetFieldsByFile = [
+  'cpu_offloading',
+  'distributed_inference_across_workers'
+];
+
 const ModalFooterStyle = {
   padding: '16px 24px',
   display: 'flex',
@@ -136,7 +141,7 @@ const AddModal: FC<AddModalProps> = (props) => {
   };
 
   const handleSelectModelFile = (item: any, evaluate?: boolean) => {
-    form.current?.form?.resetFields(resetFields);
+    form.current?.form?.resetFields(resetFieldsByFile);
     const modelInfo = onSelectModel(selectedModel, props.source);
     form.current?.setFieldsValue?.({
       file_name: item.fakeName,
@@ -156,9 +161,9 @@ const AddModal: FC<AddModalProps> = (props) => {
 
   const handleOnSelectModel = (item: any, evaluate?: boolean) => {
     setSelectedModel(item);
+    form.current?.form?.resetFields(resetFieldsByModel);
     if (!item.isGGUF) {
       setIsGGUF(false);
-      form.current?.form?.resetFields(resetFields);
       const modelInfo = onSelectModel(item, props.source);
       if (!isHolderRef.current.model) {
         handleShowCompatibleAlert(item.evaluateResult);