root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: watch request counts

Browse Source
This commit is contained in:
jialin
2024-12-27 14:56:06 +08:00
parent fb0a2798e7
commit 9f40e2c71e
14 changed files with 218 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/config.ts
+1
View File
@@ -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
+17
View File
@@ -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
+45
View File
@@ -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
+3
View File
@@ -0,0 +1,3 @@
export default {
playgroundTextToImage: '/playground/text-to-image'
};
src/hooks/use-chunk-request.ts
+29 -11
View File
@@ -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
+16 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+37 -25
View File
@@ -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(
src/pages/llmodels/index.tsx
+51 -34
View File
@@ -1,9 +1,7 @@
import TableContext from '@/components/seal-table/table-context';
import useSetChunkRequest, {
createAxiosToken
} from '@/hooks/use-chunk-request';
import useSetChunkRequest from '@/hooks/use-chunk-request';
import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
import { queryGpuDevicesList, queryWorkersList } from '@/pages/resources/apis';
import { queryWorkersList } from '@/pages/resources/apis';
import {
GPUDeviceItem,
ListItem as WokerListItem
@@ -17,7 +15,7 @@ import { ListItem } from './config/types';
const Models: React.FC = () => {
console.log('model list====1');
const { setChunkRequest } = useSetChunkRequest();
const { setChunkRequest, createAxiosToken } = useSetChunkRequest();
const { setChunkRequest: setModelInstanceChunkRequest } =
useSetChunkRequest();
const [modelInstances, setModelInstances] = useState<any[]>([]);
@@ -45,24 +43,16 @@ const Models: React.FC = () => {
const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({
dataList: dataSource.dataList,
setDataList(list) {
setDataSource({
total: dataSource.total,
loading: false,
dataList: list
setDataSource((pre) => {
return {
total: pre.total,
loading: false,
dataList: list
};
});
}
});
const getDeviceList = async () => {
try {
const data = await queryGpuDevicesList({ page: 1, perPage: 100 });
const gpuDeviceMap = _.groupBy(data.items, 'worker_name');
setGpuDeviceList(data.items || []);
} catch (error) {
// ingore
}
};
const getWorkerList = async () => {
try {
const data = await queryWorkersList({ page: 1, perPage: 100 });
@@ -98,7 +88,7 @@ const Models: React.FC = () => {
loading: false,
total: dataSource.total
});
console.log('error', error);
console.log('error+++', error);
} finally {
setFirstLoad(false);
}
@@ -122,7 +112,6 @@ const Models: React.FC = () => {
};
const updateInstanceHandler = (list: any) => {
console.log('updateInstanceHandler=====', list);
setModelInstances(list);
};
@@ -170,19 +159,16 @@ const Models: React.FC = () => {
[queryParams]
);
useEffect(() => {
if (!firstLoad) {
setTimeout(() => {
createModelsChunkRequest();
createModelsInstanceChunkRequest();
}, 100);
}
return () => {
chunkRequedtRef.current?.current?.cancel?.();
cacheDataListRef.current = [];
chunkInstanceRequedtRef.current?.current?.cancel?.();
};
}, [firstLoad]);
const handleOnViewLogs = useCallback(() => {
chunkRequedtRef.current?.current?.cancel?.();
cacheDataListRef.current = [];
chunkInstanceRequedtRef.current?.current?.cancel?.();
}, []);
const handleOnCancelViewLogs = useCallback(() => {
createModelsChunkRequest();
createModelsInstanceChunkRequest();
}, []);
useEffect(() => {
fetchData();
@@ -193,8 +179,37 @@ const Models: React.FC = () => {
useEffect(() => {
getWorkerList();
return () => {
chunkRequedtRef.current?.current?.cancel?.();
cacheDataListRef.current = [];
chunkInstanceRequedtRef.current?.current?.cancel?.();
};
}, []);
useEffect(() => {
if (!firstLoad) {
setTimeout(() => {
createModelsChunkRequest();
createModelsInstanceChunkRequest();
}, 100);
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
createModelsChunkRequest();
createModelsInstanceChunkRequest();
} else {
chunkRequedtRef.current?.current?.cancel?.();
cacheDataListRef.current = [];
chunkInstanceRequedtRef.current?.current?.cancel?.();
}
});
}
return () => {
document.removeEventListener('visibilitychange', () => {});
};
}, [firstLoad]);
return (
<TableContext.Provider
value={{
@@ -207,6 +222,8 @@ const Models: React.FC = () => {
handleSearch={handleSearch}
handlePageChange={handlePageChange}
handleDeleteSuccess={fetchData}
onViewLogs={handleOnViewLogs}
onCancelViewLogs={handleOnCancelViewLogs}
queryParams={queryParams}
loading={dataSource.loading}
total={dataSource.total}
src/pages/playground/components/audio-input.tsx
+3 -3
View File
@@ -114,9 +114,9 @@ const AudioInput: React.FC<AudioInputProps> = (props) => {
audioStream.current?.getTracks().forEach((track: any) => {
track.stop();
});
scriptProcessor.current.disconnect();
mediaStreamSource.current.disconnect();
audioContext.current.close();
scriptProcessor.current?.disconnect();
mediaStreamSource.current?.disconnect();
audioContext.current?.close();
};
const handleStopRecording = () => {
src/pages/playground/components/ground-images.tsx
+5 -1
View File
@@ -1,7 +1,9 @@
import { setRouteCache } from '@/atoms/route-cache';
import AlertInfo from '@/components/alert-info';
import IconFont from '@/components/icon-font';
import FieldComponent from '@/components/seal-form/field-component';
import SealSelect from '@/components/seal-form/seal-select';
import routeCachekey from '@/config/route-cachekey';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import ThumbImg from '@/pages/playground/components/thumb-img';
import { generateRandomNumber } from '@/utils';
@@ -208,6 +210,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setMessageId();
setTokenResult(null);
setCurrentPrompt(current?.content || '');
setRouteCache(routeCachekey.playgroundTextToImage, true);
const imgSize = _.split(finalParameters.size, 'x');
// preview
@@ -237,7 +240,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
height: imgSize[1],
width: imgSize[0],
loading: true,
progressType: stream_options.chunk_results ? 'dashboard' : 'line',
progressType: 'dashboard',
preview: false,
uid: setMessageId()
};
@@ -316,6 +319,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setImageList([]);
} finally {
setLoading(false);
setRouteCache(routeCachekey.playgroundTextToImage, false);
}
};
const handleClear = () => {
src/pages/playground/components/image-edit.tsx
+6 -2
View File
@@ -1,9 +1,11 @@
import { setRouteCache } from '@/atoms/route-cache';
import AlertInfo from '@/components/alert-info';
import SingleImage from '@/components/auto-image/single-image';
import IconFont from '@/components/icon-font';
import CanvasImageEditor from '@/components/image-editor';
import FieldComponent from '@/components/seal-form/field-component';
import SealSelect from '@/components/seal-form/seal-select';
import routeCachekey from '@/config/route-cachekey';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import UploadImg from '@/pages/playground/components/upload-img';
import { base64ToFile, generateRandomNumber } from '@/utils';
@@ -218,6 +220,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setMessageId();
setTokenResult(null);
setCurrentPrompt(current?.content || '');
setRouteCache(routeCachekey.playgroundTextToImage, true);
const imgSize = _.split(finalParameters.size, 'x');
@@ -248,7 +251,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
height: imgSize[1],
width: imgSize[0],
loading: true,
progressType: stream_options.chunk_results ? 'dashboard' : 'line',
progressType: 'dashboard',
preview: false,
uid: setMessageId()
};
@@ -275,7 +278,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const result: any = await fetchChunkedData({
data: params,
url: `http://192.168.50.4:40325/v1/images/edits?t=${Date.now()}`,
url: `${EDIT_IMAGE_API}?t=${Date.now()}`,
signal: requestToken.current.signal
});
if (result.error) {
@@ -327,6 +330,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setImageList([]);
} finally {
setLoading(false);
setRouteCache(routeCachekey.playgroundTextToImage, false);
}
};
const handleClear = () => {
src/pages/playground/images.tsx
+3 -3
View File
@@ -5,7 +5,7 @@ import useWindowResize from '@/hooks/use-window-resize';
import { DiffOutlined, HighlightOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
import { Button, Space, Tabs, TabsProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useCallback, useEffect, useRef, useState } from 'react';
@@ -155,14 +155,14 @@ const TextToImages: React.FC = () => {
<span className="font-600">
{intl.formatMessage({ id: 'menu.playground.text2images' })}
</span>
{
{/* {
<Segmented
options={optionsList}
size="middle"
className="m-l-40"
onChange={(key) => setActiveKey(key)}
></Segmented>
}
} */}
</div>
),
breadcrumb: {}