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

fix: clear instances when page hidden

Browse Source
This commit is contained in:
jialin
2025-01-19 20:51:06 +08:00
parent 4643dbce17
commit c49bfb97dd
12 changed files with 83 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/icon-font/index.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
// import './iconfont/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_4613488_pz4284jx1rq.js'
scriptUrl: '//at.alicdn.com/t/c/font_4613488_6x6w1c4c2c.js'
});
export default IconFont;
src/components/image-editor/index.tsx
+56 -8
View File
@@ -62,6 +62,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
const strokeCache = useRef<any>({});
const preImguid = useRef<string | number>('');
const [activeScale, setActiveScale] = useState<number>(1);
const negativeMaskRef = useRef<boolean>(false);
const getTransformedPoint = useCallback(
(offsetX: number, offsetY: number) => {
@@ -159,6 +160,41 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
strokesRef.current = strokes;
};
const inpaintArea = useCallback(
(data: Uint8ClampedArray<ArrayBufferLike>) => {
for (let i = 0; i < data.length; i += 4) {
const alpha = data[i + 3];
if (alpha > 0) {
data[i] = 255; // Red
data[i + 1] = 255; // Green
data[i + 2] = 255; // Blue
data[i + 3] = 255; // Alpha
}
}
},
[]
);
const inpaintBackground = useCallback(
(data: Uint8ClampedArray<ArrayBufferLike>) => {
for (let i = 0; i < data.length; i += 4) {
const alpha = data[i + 3];
if (alpha > 0) {
data[i] = 0; // Red
data[i + 1] = 0; // Green
data[i + 2] = 0; // Blue
data[i + 3] = 255; // Alpha
} else {
data[i] = 255;
data[i + 1] = 255;
data[i + 2] = 255;
data[i + 3] = 255;
}
}
},
[]
);
const generateMask = useCallback(() => {
if (strokesRef.current.length === 0) {
return null;
@@ -178,15 +214,12 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const alpha = data[i + 3];
if (alpha > 0) {
data[i] = 255; // Red
data[i + 1] = 255; // Green
data[i + 2] = 255; // Blue
data[i + 3] = 255; // Alpha
}
if (negativeMaskRef.current) {
inpaintBackground(data);
} else {
inpaintArea(data);
}
maskCtx.putImageData(imageData, 0, 0);
maskCtx.globalCompositeOperation = 'destination-over';
@@ -620,6 +653,12 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
cursorRef.current!.style.width = `${value}px`;
cursorRef.current!.style.height = `${value}px`;
};
const handleOnChangeMask = (e: any) => {
negativeMaskRef.current = e.target.checked;
saveImage();
};
useEffect(() => {
initializeImage();
}, [initializeImage]);
@@ -719,6 +758,15 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
</Tooltip>
</div>
<div className="tools">
{/* <Checkbox
onChange={handleOnChangeMask}
className="flex-center"
value={negativeMaskRef.current}
>
<span className="font-size-12">
{intl.formatMessage({ id: 'playground.image.negativeMask' })}
</span>
</Checkbox> */}
<Tooltip
title={intl.formatMessage({ id: 'playground.image.saveMask' })}
>
src/components/seal-table/components/table-row.tsx
+1 -4
View File
@@ -197,6 +197,7 @@ const TableRow: React.FC<
const handleVisibilityChange = async () => {
if (document.visibilityState === 'hidden') {
cacheDataListRef.current = [];
setChildrenData([]);
}
};
@@ -218,10 +219,6 @@ const TableRow: React.FC<
};
}, [firstLoad, expanded, tableContext.allChildren]);
useEffect(() => {
console.log('allSubChildren===', tableContext.allSubChildren);
}, [tableContext.allSubChildren]);
const renderRowPrefix = () => {
if (expandable && rowSelection) {
return (
src/locales/en-US/playground.ts
+1
View File
@@ -133,6 +133,7 @@ export default {
'The higher the value, the greater the modification to the original image.',
'playground.image.edit.tips': 'Click or drag image to this area to upload',
'playground.image.saveMask': 'Save Mask',
'playground.image.negativeMask': 'Negative Mask',
'playground.image.brushSize': 'Brush Size',
'playground.image.download': 'Download Image',
'playground.image.generate': 'Generate',
src/locales/zh-CN/playground.ts
+1
View File
@@ -128,6 +128,7 @@ export default {
'playground.image.strength.tip': '值越高，它对原图的修改越大',
'playground.image.edit.tips': '点击或拖动图片到此区域上传',
'playground.image.saveMask': '保存遮罩',
'playground.image.negativeMask': '反向遮罩',
'playground.image.brushSize': '画笔大小',
'playground.image.download': '下载图片',
'playground.image.generate': '生成图片',
src/pages/llmodels/components/table-list.tsx
+3 -27
View File
@@ -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
+1
View File
@@ -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
+3 -32
View File
@@ -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
+2 -3
View File
@@ -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
+2 -5
View File
@@ -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
+10
View File
@@ -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
+2 -2
View File
@@ -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: [
{