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
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: {}