fix: clear instances when page hidden

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

@@ -66,7 +66,6 @@ interface ModelsProps {
   handleCategoryChange: (val: any) => void;
   onViewLogs: () => void;
   onCancelViewLogs: () => void;
-  allInstances: ModelInstanceListItem[];
   queryParams: {
     page: number;
     perPage: number;
@@ -120,7 +119,6 @@ const Models: React.FC<ModelsProps> = ({
   onViewLogs,
   onCancelViewLogs,
   handleCategoryChange,
-  allInstances,
   deleteIds,
   dataSource,
   gpuDeviceList,
@@ -144,7 +142,6 @@ const Models: React.FC<ModelsProps> = ({
     defaultSortOrder: 'descend'
   });
 
-  const updateRef = useRef(false);
   const [openLogModal, setOpenLogModal] = useState(false);
   const [openAddModal, setOpenAddModal] = useState(false);
   const [openDeployModal, setOpenDeployModal] = useState<any>({
@@ -673,24 +670,17 @@ const Models: React.FC<ModelsProps> = ({
 
   const renderChildren = useCallback(
     (list: any, parent?: any) => {
-      let childList = list;
-      if (allInstances.length && !updateRef.current) {
-        childList = list.filter((item: any) => {
-          return allInstances.some((instance) => instance.id === item.id);
-        });
-        updateRef.current = true;
-      }
       return (
         <InstanceItem
-          list={childList}
+          list={list}
           modelData={parent}
-          gpuDeviceList={gpuDeviceList}
+          gpuDeviceList={[]}
           workerList={workerList}
           handleChildSelect={handleChildSelect}
         ></InstanceItem>
       );
     },
-    [workerList, allInstances]
+    [workerList]
   );
 
   const generateSource = useCallback((record: ListItem) => {
@@ -746,20 +736,6 @@ const Models: React.FC<ModelsProps> = ({
     }
   };
 
-  useEffect(() => {
-    const handleVisibilityChange = async () => {
-      if (document.visibilityState === 'hidden') {
-        updateRef.current = false;
-      }
-    };
-
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-    };
-  }, []);
-
   return (
     <>
       <PageContainer

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

@@ -61,6 +61,7 @@ const sourceOptions = [
   {
     label: 'models.form.localPath',
     value: modelSourceMap.local_path_value,
+    locale: true,
     key: 'local_path'
   }
 ];

src/pages/llmodels/index.tsx

@@ -1,7 +1,5 @@
 import TableContext from '@/components/seal-table/table-context';
-import useSetChunkRequest, {
-  createAxiosToken as generateAxiosToken
-} from '@/hooks/use-chunk-request';
+import useSetChunkRequest from '@/hooks/use-chunk-request';
 import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
 import { queryWorkersList } from '@/pages/resources/apis';
 import {
@@ -11,17 +9,10 @@ import {
 import _ from 'lodash';
 import qs from 'query-string';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import {
-  MODELS_API,
-  MODEL_INSTANCE_API,
-  queryModelsInstances,
-  queryModelsList
-} from './apis';
+import { MODELS_API, MODEL_INSTANCE_API, queryModelsList } from './apis';
 import TableList from './components/table-list';
 import { ListItem } from './config/types';
 
-const INSTANCE_SYNC = 'instance_sync';
-
 const Models: React.FC = () => {
   const { setChunkRequest, createAxiosToken } = useSetChunkRequest();
   const { setChunkRequest: setModelInstanceChunkRequest } =
@@ -39,7 +30,6 @@ const Models: React.FC = () => {
     total: 0
   });
 
-  const [allInstances, setAllInstances] = useState<any[]>([]);
   const [gpuDeviceList, setGpuDeviceList] = useState<GPUDeviceItem[]>([]);
   const [workerList, setWorkerList] = useState<WokerListItem[]>([]);
   const chunkRequedtRef = useRef<any>();
@@ -69,24 +59,6 @@ const Models: React.FC = () => {
     }
   });
 
-  const fetchModelsInstances = async () => {
-    try {
-      instancesToken.current?.cancel?.();
-      instancesToken.current = generateAxiosToken();
-      const params = {
-        page: 1,
-        perPage: 100
-      };
-      const data: any = await queryModelsInstances(params, {
-        token: instancesToken.current?.token
-      });
-      setAllInstances(data.items || []);
-    } catch (error) {
-      // ignore
-      setAllInstances([]);
-    }
-  };
-
   const getWorkerList = async () => {
     try {
       const data = await queryWorkersList({ page: 1, perPage: 100 });
@@ -249,7 +221,7 @@ const Models: React.FC = () => {
     const handleVisibilityChange = async () => {
       if (document.visibilityState === 'visible') {
         isPageHidden.current = false;
-        await fetchModelsInstances();
+        // await fetchModelsInstances();
         await Promise.all([
           createModelsChunkRequest(),
           createModelsInstanceChunkRequest()
@@ -284,7 +256,6 @@ const Models: React.FC = () => {
         handlePageChange={handlePageChange}
         handleDeleteSuccess={fetchData}
         onViewLogs={handleOnViewLogs}
-        allInstances={allInstances}
         onCancelViewLogs={handleOnCancelViewLogs}
         queryParams={queryParams}
         loading={dataSource.loading}

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

@@ -28,7 +28,7 @@ import React, {
   useState
 } from 'react';
 import { CREAT_IMAGE_API } from '../apis';
-import { promptList } from '../config';
+import { extractErrorMessage, promptList } from '../config';
 import {
   ImageAdvancedParamsConfig,
   ImageCustomSizeConfig,
@@ -336,8 +336,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       if (result.error) {
         setTokenResult({
           error: true,
-          errorMessage:
-            result?.data?.error?.message || result?.data?.error || ''
+          errorMessage: extractErrorMessage(result)
         });
         setImageList([]);
         return;

src/pages/playground/components/image-edit.tsx

@@ -30,6 +30,7 @@ import React, {
   useState
 } from 'react';
 import { EDIT_IMAGE_API } from '../apis';
+import { extractErrorMessage } from '../config';
 import {
   ImageAdvancedParamsConfig,
   ImageCustomSizeConfig,
@@ -369,11 +370,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       if (result.error) {
         setTokenResult({
           error: true,
-          errorMessage:
-            result?.data?.data?.detail ||
-            result?.data?.error?.message ||
-            result?.data?.error ||
-            ''
+          errorMessage: extractErrorMessage(result)
         });
         setImageList([]);
         return;

src/pages/playground/config/index.ts

@@ -156,3 +156,13 @@ export const promptList = [
   'A full shot of two people jogging at sunset,  featuring a vibrant, warm color palette shifting from twilight blues to peachy-orange tones, with visible sun rays and lens flares, conveying a sense of leisure and athleticism.',
   'A close-up portrait of a golden retriever wearing black-framed glasses,  exhibiting a rich golden-brown coat with a fluffy texture,  and a neutral, light gray background.'
 ];
+
+export const extractErrorMessage = (result: any) => {
+  return (
+    result?.data?.data?.detail ||
+    result?.data?.data?.message ||
+    result?.data?.error?.message ||
+    result?.data?.error ||
+    ''
+  );
+};

src/pages/playground/config/params-config.ts

@@ -451,7 +451,7 @@ export const ImageCustomSizeConfig: ParamsSchema[] = [
       min: 256,
       max: 3200,
       step: 64,
-      inputnumber: true
+      inputnumber: false
     },
     rules: [
       {
@@ -471,7 +471,7 @@ export const ImageCustomSizeConfig: ParamsSchema[] = [
       min: 256,
       max: 3200,
       step: 64,
-      inputnumber: true
+      inputnumber: false
     },
     rules: [
       {