fix: image edit ux

src/pages/llmodels/catalog.tsx

@@ -30,6 +30,7 @@ const Catalog: React.FC = () => {
   const navigate = useNavigate();
   const [span, setSpan] = React.useState(8);
   const [activeId, setActiveId] = React.useState(-1);
+  const [isFirst, setIsFirst] = React.useState(true);
   const [dataSource, setDataSource] = useState<{
     dataList: CatalogItemType[];
     loading: boolean;
@@ -102,6 +103,8 @@ const Catalog: React.FC = () => {
         total: dataSource.total
       });
       console.log('error', error);
+    } finally {
+      setIsFirst(false);
     }
   }, [queryParams]);
 
@@ -297,7 +300,7 @@ const Catalog: React.FC = () => {
                 style={{ width: '100%' }}
                 wrapperClassName="skelton-wrapper"
               >
-                <CatalogSkelton span={span}></CatalogSkelton>
+                {isFirst && <CatalogSkelton span={span}></CatalogSkelton>}
               </Spin>
             </div>
           )}

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

@@ -7,7 +7,12 @@ import { Button, Drawer } from 'antd';
 import _ from 'lodash';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { queryCatalogItemSpec } from '../apis';
-import { backendOptionsMap, modelSourceMap, sourceOptions } from '../config';
+import {
+  backendOptionsMap,
+  modelCategoriesMap,
+  modelSourceMap,
+  sourceOptions
+} from '../config';
 import { CatalogSpec, FormData, ListItem } from '../config/types';
 import ColumnWrapper from './column-wrapper';
 import DataForm from './data-form';
@@ -40,6 +45,7 @@ const backendOptions = [
 ];
 
 const defaultQuant = ['Q4_K_M'];
+const EmbeddingRerankFirstQuant = ['FP16'];
 const AddModal: React.FC<AddModalProps> = (props) => {
   const {
     title,
@@ -51,7 +57,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     current,
     width = 600
   } = props || {};
-  const SEARCH_SOURCE = [];
 
   const form = useRef<any>({});
   const intl = useIntl();
@@ -69,6 +74,16 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     form.current?.submit?.();
   };
 
+  const getDefaultQuant = (data: { category: string; quantOption: string }) => {
+    if (
+      data.category === modelCategoriesMap.embedding ||
+      data.category === modelCategoriesMap.reranker
+    ) {
+      return EmbeddingRerankFirstQuant.includes(data.quantOption);
+    }
+    return defaultQuant.includes(data.quantOption);
+  };
+
   const getModelFile = (spec: CatalogSpec) => {
     let modelInfo = {};
     if (spec.source === modelSourceMap.huggingface_value) {
@@ -234,7 +249,10 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       size: _.get(sizeList, '0.value', 0),
       quantization:
         _.find(quantizaList, (item: { label: string; value: string }) =>
-          defaultQuant.includes(item.value)
+          getDefaultQuant({
+            category: _.get(current, 'categories.0', ''),
+            quantOption: item.value
+          })
         )?.value || _.get(quantizaList, '0.value', '')
     });
 
@@ -264,7 +282,10 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       const source = _.get(sources, '0.value', '');
       const defaultSpec =
         _.find(groupList[source], (item: CatalogSpec) => {
-          return defaultQuant.includes(item.quantization);
+          return getDefaultQuant({
+            category: _.get(current, 'categories.0', ''),
+            quantOption: item.quantization
+          });
         }) || _.get(groupList, `${source}.0`, {});
 
       setSourceList(sources);
@@ -320,7 +341,10 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       size: val,
       quantization:
         _.find(list, (item: { label: string; value: string }) =>
-          defaultQuant.includes(item.value)
+          getDefaultQuant({
+            category: _.get(current, 'categories.0', ''),
+            quantOption: item.value
+          })
         )?.value || _.get(list, '0.value', '')
     });
 

src/pages/llmodels/components/table-list.tsx

@@ -56,7 +56,7 @@ import UpdateModel from './update-modal';
 import ViewLogsModal from './view-logs-modal';
 
 interface ModelsProps {
-  handleSearch: (e: any) => void;
+  handleSearch: () => void;
   handleNameChange: (e: any) => void;
   handleShowSizeChange?: (page: number, size: number) => void;
   handlePageChange: (page: number, pageSize: number | undefined) => void;
@@ -337,7 +337,6 @@ const Models: React.FC<ModelsProps> = ({
   const handleModalOk = useCallback(
     async (data: FormData) => {
       try {
-        console.log('data:', data, openDeployModal);
         const result = getSourceRepoConfigValue(currentData?.source, data);
         await updateModel({
           data: {
@@ -348,6 +347,7 @@ const Models: React.FC<ModelsProps> = ({
         });
         setOpenAddModal(false);
         message.success(intl.formatMessage({ id: 'common.message.success' }));
+        handleSearch();
       } catch (error) {}
     },
     [currentData]
@@ -385,6 +385,7 @@ const Models: React.FC<ModelsProps> = ({
           updateExpandedRowKeys([modelData.id, ...expandedRowKeys]);
         }, 300);
         message.success(intl.formatMessage({ id: 'common.message.success' }));
+        handleSearch?.();
       } catch (error) {}
     },
     [openDeployModal]
@@ -405,6 +406,7 @@ const Models: React.FC<ModelsProps> = ({
         removeExpandedRowKey([row.id]);
         rowSelection.removeSelectedKey(row.id);
         handleDeleteSuccess();
+        handleSearch();
       }
     });
   };
@@ -419,6 +421,7 @@ const Models: React.FC<ModelsProps> = ({
         rowSelection.clearSelections();
         removeExpandedRowKey(rowSelection.selectedRowKeys);
         handleDeleteSuccess();
+        handleSearch();
       }
     });
   };

src/pages/llmodels/index.tsx

@@ -45,6 +45,7 @@ const Models: React.FC = () => {
 
   const { updateChunkedList, cacheDataListRef, deletedIdsRef } =
     useUpdateChunkedList({
+      events: ['UPDATE'],
       dataList: dataSource.dataList,
       setDataList(list, opts?: any) {
         setDataSource((pre) => {
@@ -118,8 +119,6 @@ const Models: React.FC = () => {
     _.each(list, (data: any) => {
       updateChunkedList(data);
     });
-
-    console.log('deletedIdsRef=======', deletedIdsRef.current);
   };
 
   const updateInstanceHandler = (list: any) => {
@@ -129,14 +128,19 @@ const Models: React.FC = () => {
   const createModelsChunkRequest = useCallback(async () => {
     chunkRequedtRef.current?.current?.cancel?.();
     try {
+      const query = {
+        search: queryParams.search,
+        categories: queryParams.categories
+      };
       chunkRequedtRef.current = setChunkRequest({
-        url: `${MODELS_API}?${qs.stringify(_.pickBy(queryParams, (val: any) => !!val))}`,
+        url: `${MODELS_API}?${qs.stringify(_.pickBy(query, (val: any) => !!val))}`,
         handler: updateHandler
       });
     } catch (error) {
       // ignore
     }
-  }, [queryParams]);
+  }, [queryParams.categories, queryParams.search]);
+
   const createModelsInstanceChunkRequest = useCallback(async () => {
     chunkInstanceRequedtRef.current?.current?.cancel?.();
     try {
@@ -150,11 +154,6 @@ const Models: React.FC = () => {
     }
   }, []);
 
-  const getList = async () => {
-    await fetchData();
-    await createModelsChunkRequest();
-  };
-
   const handleOnViewLogs = useCallback(() => {
     isPageHidden.current = true;
     chunkRequedtRef.current?.current?.cancel?.();
@@ -173,12 +172,9 @@ const Models: React.FC = () => {
     }, 100);
   }, [fetchData, createModelsChunkRequest, createModelsInstanceChunkRequest]);
 
-  const handleSearch = useCallback(
-    async (e: any) => {
-      await fetchData();
-    },
-    [fetchData]
-  );
+  const handleSearch = useCallback(async () => {
+    await fetchData();
+  }, [fetchData]);
 
   const debounceUpdateFilter = _.debounce((e: any) => {
     setQueryParams({
@@ -202,12 +198,16 @@ const Models: React.FC = () => {
   );
 
   useEffect(() => {
-    getList();
+    fetchData();
     return () => {
       axiosToken?.cancel?.();
     };
   }, [queryParams]);
 
+  useEffect(() => {
+    createModelsChunkRequest();
+  }, [createModelsChunkRequest]);
+
   useEffect(() => {
     getWorkerList();
     createModelsInstanceChunkRequest();