chore: watch request counts

config/config.ts

@@ -90,6 +90,7 @@ export default defineConfig({
   model: {},
   initialState: {},
   request: {},
+  keepalive: ['/playground/text-to-image'],
   locale: {
     antd: true,
     baseNavigator: true,

src/atoms/route-cache.ts

@@ -0,0 +1,17 @@
+import { atom, getDefaultStore } from 'jotai';
+
+export const routeCacheAtom = atom<any>(new Map());
+
+export const setRouteCache = (key: string, value: any) => {
+  const store = getDefaultStore();
+  const cache = store.get(routeCacheAtom);
+  cache.set(key, value);
+  store.set(routeCacheAtom, cache);
+};
+
+export const deleteRouteCache = (key: string) => {
+  const store = getDefaultStore();
+  const cache = store.get(routeCacheAtom);
+  cache.delete(key);
+  store.set(routeCacheAtom, cache);
+};

src/atoms/watch-request.ts

@@ -0,0 +1,45 @@
+interface WatchRequest {
+  id: number;
+  token: any;
+  cancel: () => void;
+}
+
+declare global {
+  interface Window {
+    __GPUSTACK_WATCH_REQUEST_CLEAR__: {
+      watchIDValue: number;
+      requestList: WatchRequest[];
+    };
+  }
+}
+
+window.__GPUSTACK_WATCH_REQUEST_CLEAR__ = {
+  watchIDValue: 0,
+  requestList: []
+};
+
+export const updateWatchIDValue = () => {
+  window.__GPUSTACK_WATCH_REQUEST_CLEAR__.watchIDValue =
+    window.__GPUSTACK_WATCH_REQUEST_CLEAR__.watchIDValue + 1;
+  return window.__GPUSTACK_WATCH_REQUEST_CLEAR__.watchIDValue;
+};
+
+export const updateWatchRequest = (watchToken: WatchRequest) => {
+  window.__GPUSTACK_WATCH_REQUEST_CLEAR__.requestList.push(watchToken);
+};
+
+export const cancelWatchRequest = (n: number) => {
+  // cancel the before n requests
+  const requestList = window.__GPUSTACK_WATCH_REQUEST_CLEAR__.requestList;
+
+  for (let i = 0; i < n; i++) {
+    requestList[i]?.cancel?.();
+  }
+  window.__GPUSTACK_WATCH_REQUEST_CLEAR__.requestList = requestList.slice(n);
+};
+
+export const clearWatchRequestId = (id: number) => {
+  const requestList = window.__GPUSTACK_WATCH_REQUEST_CLEAR__.requestList;
+  const newRequestList = requestList.filter((item) => item.id !== id);
+  window.__GPUSTACK_WATCH_REQUEST_CLEAR__.requestList = newRequestList;
+};

src/config/route-cachekey.ts

@@ -0,0 +1,3 @@
+export default {
+  playgroundTextToImage: '/playground/text-to-image'
+};

src/hooks/use-chunk-request.ts

@@ -1,3 +1,9 @@
+import {
+  cancelWatchRequest,
+  clearWatchRequestId,
+  updateWatchIDValue,
+  updateWatchRequest
+} from '@/atoms/watch-request';
 import { WatchEventType } from '@/config';
 import { request } from '@umijs/max';
 import axios from 'axios';
@@ -106,6 +112,7 @@ export const sliceData = (data: string, loaded: number, loadedSize: any) => {
 };
 
 const useSetChunkRequest = () => {
+  const watchRequestList = window.__GPUSTACK_WATCH_REQUEST_CLEAR__.requestList;
   const [requestReadyState, setRequestReadyState] = useState(3);
   const axiosToken = useRef<any>(null);
   const requestConfig = useRef<any>({});
@@ -124,17 +131,21 @@ const useSetChunkRequest = () => {
     setRequestReadyState(3);
   };
 
-  const resetResultSchema = (result: any[]) => {
-    //  ============ handle list data ============
-    // return _.map(result, (data: any) => {
-    //   if (data.type === WatchEventType.DELETE) {
-    //     data.ids = _.map(data.items, (item: any) => item.id);
-    //   }
-    //   data.collection = data.items || [];
-    //   return data;
-    // });
-    // ============ handle list data ============
+  const createAxiosToken = () => {
+    const { CancelToken } = axios;
+    const source = CancelToken.source();
+    const watchID = updateWatchIDValue();
+    return {
+      id: watchID,
+      token: source.token,
+      cancel() {
+        source.cancel();
+        clearWatchRequestId(watchID);
+      }
+    };
+  };
 
+  const resetResultSchema = (result: any[]) => {
     return _.map(result, (data: any) => {
       if (data.type === WatchEventType.DELETE) {
         data.ids = data.data?.id ? [data.data.id] : [];
@@ -154,6 +165,12 @@ const useSetChunkRequest = () => {
     reset();
     axiosToken.current?.cancel?.();
     axiosToken.current = createAxiosToken();
+
+    updateWatchRequest(axiosToken.current);
+    if (watchRequestList.length >= 4) {
+      cancelWatchRequest(watchRequestList.length - 4 || 1);
+    }
+
     try {
       const { request: requestData } = await request(url, {
         params: {
@@ -243,7 +260,8 @@ const useSetChunkRequest = () => {
   }, [requestReadyState]);
 
   return {
-    setChunkRequest
+    setChunkRequest,
+    createAxiosToken
   };
 };
 

src/layouts/index.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 
+import { routeCacheAtom } from '@/atoms/route-cache';
 import { GPUStackVersionAtom, UpdateCheckAtom, userAtom } from '@/atoms/user';
 import ShortCuts, {
   modalConfig as ShortCutsConfig
@@ -14,6 +15,7 @@ import { ProLayout } from '@ant-design/pro-components';
 import {
   Link,
   Outlet,
+  dropByCacheKey,
   history,
   matchRoutes,
   useAppData,
@@ -94,6 +96,7 @@ export default (props: any) => {
   const { initialize: initialize } = useOverlayScroller();
   const { initialize: initializeMenu } = useOverlayScroller();
   const [userInfo] = useAtom(userAtom);
+  const [routeCache] = useAtom(routeCacheAtom);
   const [version] = useAtom(GPUStackVersionAtom);
   const [updateCheck] = useAtom(UpdateCheckAtom);
   const location = useLocation();
@@ -103,6 +106,8 @@ export default (props: any) => {
   const [collapsed, setCollapsed] = useState(false);
   const [collapseValue, setCollapseValue] = useState(false);
 
+  console.log('routeCache========', routeCache);
+
   const initialInfo = (useModel && useModel('@@initialState')) || {
     initialState: undefined,
     loading: false,
@@ -135,6 +140,15 @@ export default (props: any) => {
     });
   };
 
+  const dropRouteCache = (pathname) => {
+    console.log('routeCache.keys()========', routeCache.keys());
+    for (let key of routeCache.keys()) {
+      if (key !== pathname && !routeCache.get(key)) {
+        dropByCacheKey(key);
+        routeCache.delete(key);
+      }
+    }
+  };
   const runtimeConfig = {
     ...initialInfo,
     logout: async (userInfo) => {
@@ -156,7 +170,7 @@ export default (props: any) => {
   };
 
   const newRoutes = filterRoutes(
-    clientRoutes.filter((route) => route.id === '@@/global-layout'),
+    clientRoutes.filter((route) => route.id === 'max-tabs'),
     (route) => {
       return (
         (!!route.isLayout && route.id !== '@@/global-layout') ||
@@ -307,6 +321,7 @@ export default (props: any) => {
               : '/playground';
             history.push(pathname);
           }
+          dropRouteCache(pathname);
         }}
         formatMessage={formatMessage}
         menu={{

src/locales/en-US/models.ts

@@ -85,6 +85,6 @@ export default {
     'vLLM: For non-GGUF format models, supports x86 Linux only.',
   'models.form.backend.voxbox': 'vox-box: For non-GGUF format audio models.',
   'models.form.search.gguftips':
-    'If using Mac or Windows as a worker, check GGUF (uncheck for audio models).',
+    'If using macOS or Windows as a worker, check GGUF (uncheck for audio models).',
   'models.form.button.addlabel': 'Add Label'
 };

src/locales/zh-CN/models.ts

@@ -81,6 +81,6 @@ export default {
   'models.form.backend.vllm': 'vLLM: 用于非 GGUF 格式模型，仅支持 x86 Linux',
   'models.form.backend.voxbox': 'vox-box: 用于非 GGUF 格式的音频模型',
   'models.form.search.gguftips':
-    '当 Mac 或 Windows 作 worker 时勾选 GGUF（搜索音频模型时取消勾选）',
+    '当 macOS 或 Windows 作 worker 时勾选 GGUF（搜索音频模型时取消勾选）',
   'models.form.button.addlabel': '添加标签'
 };

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

@@ -58,6 +58,8 @@ interface ModelsProps {
   handleShowSizeChange?: (page: number, size: number) => void;
   handlePageChange: (page: number, pageSize: number | undefined) => void;
   handleDeleteSuccess: () => void;
+  onViewLogs: () => void;
+  onCancelViewLogs: () => void;
   queryParams: {
     page: number;
     perPage: number;
@@ -106,6 +108,8 @@ const Models: React.FC<ModelsProps> = ({
   handleSearch,
   handlePageChange,
   handleDeleteSuccess,
+  onViewLogs,
+  onCancelViewLogs,
   dataSource,
   gpuDeviceList,
   workerList,
@@ -400,6 +404,7 @@ const Models: React.FC<ModelsProps> = ({
 
   const handleLogModalCancel = useCallback(() => {
     setOpenLogModal(false);
+    onCancelViewLogs();
   }, []);
 
   const handleDelete = async (row: any) => {
@@ -454,31 +459,38 @@ const Models: React.FC<ModelsProps> = ({
     navigate(`/playground/chat?model=${row.name}`);
   };
 
-  const handleViewLogs = async (row: any) => {
-    try {
-      setCurrentInstance({
-        url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
-        status: row.state,
-        id: row.id,
-        modelId: row.model_id,
-        tail: InstanceRealLogStatus.includes(row.state) ? undefined : PageSize
-      });
-      setOpenLogModal(true);
-    } catch (error) {
-      console.log('error:', error);
-    }
-  };
-  const handleDeleteInstace = (row: any, list: ModelInstanceListItem[]) => {
-    modalRef.current.show({
-      content: 'models.instances',
-      okText: 'common.button.delrecreate',
-      operation: 'common.delete.single.confirm',
-      name: row.name,
-      async onOk() {
-        await deleteModelInstance(row.id);
+  const handleViewLogs = useCallback(
+    async (row: any) => {
+      try {
+        setCurrentInstance({
+          url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
+          status: row.state,
+          id: row.id,
+          modelId: row.model_id,
+          tail: InstanceRealLogStatus.includes(row.state) ? undefined : PageSize
+        });
+        setOpenLogModal(true);
+        onViewLogs();
+      } catch (error) {
+        console.log('error:', error);
       }
-    });
-  };
+    },
+    [onViewLogs]
+  );
+  const handleDeleteInstace = useCallback(
+    (row: any, list: ModelInstanceListItem[]) => {
+      modalRef.current.show({
+        content: 'models.instances',
+        okText: 'common.button.delrecreate',
+        operation: 'common.delete.single.confirm',
+        name: row.name,
+        async onOk() {
+          await deleteModelInstance(row.id);
+        }
+      });
+    },
+    [deleteModelInstance]
+  );
 
   const getModelInstances = async (row: any) => {
     const params = {
@@ -539,7 +551,7 @@ const Models: React.FC<ModelsProps> = ({
         handleViewLogs(row);
       }
     },
-    []
+    [handleViewLogs, handleDeleteInstace]
   );
 
   const renderModelTags = useCallback(