From c49bfb97ddf57b2d2e3141037bda9964f4705c7e Mon Sep 17 00:00:00 2001 From: jialin Date: Sun, 19 Jan 2025 20:48:53 +0800 Subject: [PATCH] fix: clear instances when page hidden --- src/components/icon-font/index.tsx | 2 +- src/components/image-editor/index.tsx | 64 ++++++++++++++++--- .../seal-table/components/table-row.tsx | 5 +- src/locales/en-US/playground.ts | 1 + src/locales/zh-CN/playground.ts | 1 + src/pages/llmodels/components/table-list.tsx | 30 +-------- .../llmodels/components/update-modal.tsx | 1 + src/pages/llmodels/index.tsx | 35 +--------- .../playground/components/ground-images.tsx | 5 +- .../playground/components/image-edit.tsx | 7 +- src/pages/playground/config/index.ts | 10 +++ src/pages/playground/config/params-config.ts | 4 +- 12 files changed, 83 insertions(+), 82 deletions(-) diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx index f4bf7f1f..a1fd9df8 100644 --- a/src/components/icon-font/index.tsx +++ b/src/components/icon-font/index.tsx @@ -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; diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx index 39601261..929101b1 100644 --- a/src/components/image-editor/index.tsx +++ b/src/components/image-editor/index.tsx @@ -62,6 +62,7 @@ const CanvasImageEditor: React.FC = ({ const strokeCache = useRef({}); const preImguid = useRef(''); const [activeScale, setActiveScale] = useState(1); + const negativeMaskRef = useRef(false); const getTransformedPoint = useCallback( (offsetX: number, offsetY: number) => { @@ -159,6 +160,41 @@ const CanvasImageEditor: React.FC = ({ strokesRef.current = strokes; }; + const inpaintArea = useCallback( + (data: Uint8ClampedArray) => { + 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) => { + 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 = ({ ); 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 = ({ 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 = ({
+ {/* + + {intl.formatMessage({ id: 'playground.image.negativeMask' })} + + */} diff --git a/src/components/seal-table/components/table-row.tsx b/src/components/seal-table/components/table-row.tsx index 234ad6a3..67629d7a 100644 --- a/src/components/seal-table/components/table-row.tsx +++ b/src/components/seal-table/components/table-row.tsx @@ -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 ( diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts index 5eed1527..30198b66 100644 --- a/src/locales/en-US/playground.ts +++ b/src/locales/en-US/playground.ts @@ -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', diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts index 1e824a73..e3e6e624 100644 --- a/src/locales/zh-CN/playground.ts +++ b/src/locales/zh-CN/playground.ts @@ -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': '生成图片', diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index 447c2657..655b1066 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/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 = ({ onViewLogs, onCancelViewLogs, handleCategoryChange, - allInstances, deleteIds, dataSource, gpuDeviceList, @@ -144,7 +142,6 @@ const Models: React.FC = ({ defaultSortOrder: 'descend' }); - const updateRef = useRef(false); const [openLogModal, setOpenLogModal] = useState(false); const [openAddModal, setOpenAddModal] = useState(false); const [openDeployModal, setOpenDeployModal] = useState({ @@ -673,24 +670,17 @@ const Models: React.FC = ({ 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 ( ); }, - [workerList, allInstances] + [workerList] ); const generateSource = useCallback((record: ListItem) => { @@ -746,20 +736,6 @@ const Models: React.FC = ({ } }; - useEffect(() => { - const handleVisibilityChange = async () => { - if (document.visibilityState === 'hidden') { - updateRef.current = false; - } - }; - - document.addEventListener('visibilitychange', handleVisibilityChange); - - return () => { - document.removeEventListener('visibilitychange', handleVisibilityChange); - }; - }, []); - return ( <> { const { setChunkRequest, createAxiosToken } = useSetChunkRequest(); const { setChunkRequest: setModelInstanceChunkRequest } = @@ -39,7 +30,6 @@ const Models: React.FC = () => { total: 0 }); - const [allInstances, setAllInstances] = useState([]); const [gpuDeviceList, setGpuDeviceList] = useState([]); const [workerList, setWorkerList] = useState([]); const chunkRequedtRef = useRef(); @@ -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} diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx index 8648a35c..108c0238 100644 --- a/src/pages/playground/components/ground-images.tsx +++ b/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 = forwardRef((props, ref) => { if (result.error) { setTokenResult({ error: true, - errorMessage: - result?.data?.error?.message || result?.data?.error || '' + errorMessage: extractErrorMessage(result) }); setImageList([]); return; diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx index 26d05dc9..de7e71dd 100644 --- a/src/pages/playground/components/image-edit.tsx +++ b/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 = 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; diff --git a/src/pages/playground/config/index.ts b/src/pages/playground/config/index.ts index 4863e07d..8e435f68 100644 --- a/src/pages/playground/config/index.ts +++ b/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 || + '' + ); +}; diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts index 7ba4b42d..69731402 100644 --- a/src/pages/playground/config/params-config.ts +++ b/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: [ {