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

chore: improve image edit

Browse Source
This commit is contained in:
jialin
2025-02-17 13:49:55 +08:00
parent 384a75622f
commit d2a3388058
13 changed files with 214 additions and 86 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_djdkmiu9k3b.js'
scriptUrl: '//at.alicdn.com/t/c/font_4613488_pr3u3llgke.js'
});
export default IconFont;
src/components/image-editor/index.less
+12
View File
@@ -20,4 +20,16 @@
.overlay-canvas:hover {
cursor: 'none !important';
}
.upload-mask {
&:hover {
.close-btn {
display: block;
}
}
}
.close-btn {
display: none;
}
}
src/components/image-editor/index.tsx
+102 -38
View File
@@ -1,8 +1,9 @@
import {
ClearOutlined,
CloseOutlined,
DownloadOutlined,
ExpandOutlined,
FormatPainterOutlined,
SyncOutlined,
UndoOutlined
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
@@ -20,6 +21,8 @@ type CanvasImageEditorProps = {
imageSrc: string;
disabled?: boolean;
imguid: string | number;
maskUpload?: any[];
clearUploadMask?: () => void;
onSave: (imageData: { mask: string | null; img: string }) => void;
onScaleImageSize?: (data: { width: number; height: number }) => void;
uploadButton: React.ReactNode;
@@ -37,10 +40,12 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
imageSrc,
disabled,
imageStatus,
clearUploadMask,
onSave,
onScaleImageSize,
imguid,
uploadButton
uploadButton,
maskUpload
}) => {
const MIN_SCALE = 0.5;
const MAX_SCALE = 8;
@@ -52,20 +57,18 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
const [lineWidth, setLineWidth] = useState<number>(60);
const isDrawing = useRef<boolean>(false);
const currentStroke = useRef<Point[]>([]);
const resizeObserver = useRef<ResizeObserver | null>(null);
const strokesRef = useRef<Stroke[]>([]);
const offscreenCanvasRef = useRef<HTMLCanvasElement | null>(null);
const autoScale = useRef<number>(1);
const baseScale = useRef<number>(1);
const cursorRef = useRef<HTMLDivElement>(null);
const [imgLoaded, setImgLoaded] = useState(false);
const translatePos = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
const contentPos = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
const animationFrameIdRef = useRef<number | null>(null);
const strokeCache = useRef<any>({});
const preImguid = useRef<string | number>('');
const [activeScale, setActiveScale] = useState<number>(1);
const negativeMaskRef = useRef<boolean>(false);
const mouseDownState = useRef<boolean>(false);
const getTransformedPoint = useCallback(
(offsetX: number, offsetY: number) => {
@@ -110,10 +113,14 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
};
const handleMouseEnter = (e: React.MouseEvent<HTMLCanvasElement>) => {
console.log('mouse enter:', mouseDownState.current);
if (disabled) {
overlayCanvasRef.current!.style.cursor = 'default';
return;
}
// if (mouseDownState.current) {
// isDrawing.current = true;
// }
overlayCanvasRef.current!.style.cursor = 'none';
cursorRef.current!.style.display = 'block';
cursorRef.current!.style.top = `${e.clientY - (lineWidth / 2) * autoScale.current}px`;
@@ -134,6 +141,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
if (disabled) {
return;
}
isDrawing.current = false;
overlayCanvasRef.current!.style.cursor = 'default';
cursorRef.current!.style.display = 'none';
};
@@ -335,12 +343,18 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
if (disabled) {
return;
}
if (!isDrawing.current) return;
console.log(
'Drawing:',
isDrawing.current,
currentStroke.current,
strokesRef.current
);
if (!isDrawing.current || !mouseDownState.current) return;
const { offsetX, offsetY } = e.nativeEvent;
const currentX = offsetX;
const currentY = offsetY;
console.log('currentStroke:', currentStroke.current);
currentStroke.current.push({
x: currentX,
y: currentY,
@@ -369,6 +383,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
if (disabled) {
return;
}
isDrawing.current = true;
currentStroke.current = [];
@@ -393,7 +408,6 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
};
const endDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
console.log('End Drawing:', e);
if (disabled) {
return;
}
@@ -401,6 +415,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
return;
}
console.log('End Drawing:', e);
isDrawing.current = false;
strokesRef.current.push(_.cloneDeep(currentStroke.current));
@@ -440,9 +456,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
const onReset = useCallback(() => {
clearOverlayCanvas();
console.log('Resetting strokes');
setStrokes([]);
currentStroke.current = [];
console.log('Resetting strokes', currentStroke.current);
}, []);
const redrawStrokes = useCallback(
@@ -599,13 +615,11 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
return;
}
setImgLoaded(false);
await drawImage();
onScaleImageSize?.({
width: canvasRef.current!.width,
height: canvasRef.current!.height
});
setImgLoaded(true);
if (strokeCache.current[imguid]) {
strokeCache.current[preImguid.current] = strokesRef.current;
@@ -616,12 +630,16 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
resetCanvas();
}
preImguid.current = imguid;
if (strokesRef.current.length) {
console.log(
'Image initialized:',
strokesRef.current.length,
imageStatus.isOriginal
);
if (strokesRef.current.length && imageStatus.isOriginal) {
redrawStrokes(strokesRef.current);
saveImage();
}
updateCursorSize();
saveImage();
}, [drawImage, onReset, redrawStrokes, imguid]);
const updateZoom = (scaleChange: number, mouseX: number, mouseY: number) => {
@@ -707,12 +725,24 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
}
};
const handleMouseDown = (e: MouseEvent) => {
mouseDownState.current = true;
};
const handleMouseUp = (e: MouseEvent) => {
mouseDownState.current = false;
};
window.addEventListener('keydown', handleUndoShortcut);
// mouse down
window.addEventListener('mousedown', handleMouseDown);
// mouse up
window.addEventListener('mouseup', handleMouseUp);
return () => {
window.removeEventListener('keydown', handleUndoShortcut);
if (animationFrameIdRef.current !== null) {
cancelAnimationFrame(animationFrameIdRef.current);
}
window.removeEventListener('mousedown', handleMouseDown);
window.removeEventListener('mouseup', handleMouseUp);
};
}, []);
@@ -769,17 +799,17 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
<UndoOutlined className="font-size-14" />
</Button>
</Tooltip>
{uploadButton}
<Tooltip title={intl.formatMessage({ id: 'common.button.reset' })}>
<Tooltip title={intl.formatMessage({ id: 'common.button.clear' })}>
<Button
onClick={onReset}
size="middle"
type="text"
disabled={disabled}
>
<SyncOutlined className="font-size-14" />
<ClearOutlined className="font-size-14" />
</Button>
</Tooltip>
{uploadButton}
<Tooltip
title={intl.formatMessage({ id: 'playground.image.fitview' })}
>
@@ -794,22 +824,50 @@ 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' })}
{maskUpload?.length ? (
<span className="flex-center upload-mask">
<span className="font-size-12">
{intl.formatMessage({ id: 'playground.image.mask.uploaded' })}
...
</span>
<Button
onClick={clearUploadMask}
size="small"
type="text"
icon={<CloseOutlined className="close-btn"></CloseOutlined>}
></Button>
</span>
</Checkbox>
<Tooltip
title={intl.formatMessage({ id: 'playground.image.saveMask' })}
>
<Button onClick={downloadMask} size="middle" type="text">
<IconFont className="font-size-14" type="icon-save2"></IconFont>
</Button>
</Tooltip>
) : (
<>
{imageStatus.isOriginal && (
<>
<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'
})}
>
<Button onClick={downloadMask} size="middle" type="text">
<IconFont
className="font-size-14"
type="icon-save2"
></IconFont>
</Button>
</Tooltip>
</>
)}
</>
)}
<Tooltip
title={intl.formatMessage({ id: 'playground.image.download' })}
>
@@ -834,8 +892,14 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
ref={overlayCanvasRef}
className="overlay-canvas"
style={{ position: 'absolute', zIndex: 10, cursor: 'none' }}
onMouseDown={startDrawing}
onMouseUp={endDrawing}
onMouseDown={(event) => {
mouseDownState.current = true;
startDrawing(event);
}}
onMouseUp={(event) => {
mouseDownState.current = false;
endDrawing(event);
}}
onMouseEnter={handleMouseEnter}
onWheel={handleOnWheel}
onMouseMove={(e) => {
@@ -843,8 +907,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
draw(e);
}}
onMouseLeave={(e) => {
handleMouseLeave();
endDrawing(e);
handleMouseLeave();
}}
/>
<div
src/components/logs-viewer/virtual-log-list.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const chunkRequedtRef = useRef<any>(null);
const [logs, setLogs] = useState<any[]>([]);
const logParseWorker = useRef<any>(null);
const tail = useRef<any>(pageSize - 1);
const tail = useRef<any>(defaultTail);
const [loading, setLoading] = useState(false);
const [isAtTop, setIsAtTop] = useState(false);
const [scrollPos, setScrollPos] = useState<any[]>([]);
src/hooks/use-body-scroll.ts
+1 -1
View File
@@ -43,7 +43,7 @@ export default function useBodyScroll() {
y: 'scroll'
}
});
}, 1000);
}, 500);
}, []);
React.useEffect(() => {
src/hooks/use-chunk-fetch.ts
-4
View File
@@ -7,7 +7,6 @@ interface RequestConfig {
handler: (data: any) => any;
beforeReconnect?: () => void;
params?: object;
byLine?: boolean;
watch?: boolean;
contentType?: 'json' | 'text';
}
@@ -16,8 +15,6 @@ const useSetChunkFetch = () => {
const axiosToken = useRef<any>(null);
const requestConfig = useRef<any>({});
const chunkDataRef = useRef<any>([]);
const bufferCacheRef = useRef<any>('');
const readTextEventStreamData = async (
reader: ReadableStreamDefaultReader<Uint8Array>,
decoder: TextDecoder,
@@ -74,7 +71,6 @@ const useSetChunkFetch = () => {
url,
handler,
watch,
byLine = false,
params = {}
}: RequestConfig) => {
axiosToken.current?.abort?.();
src/locales/en-US/playground.ts
+3 -1
View File
@@ -139,5 +139,7 @@ export default {
'playground.image.generate': 'Generate',
'playground.image.edit': 'Edit',
'playground.image.fitview': 'Fit View',
'playground.chat.aithought': 'CoT'
'playground.chat.aithought': 'CoT',
'playground.image.mask.uploaded': 'Mask Uploaded',
'playground.image.mask.upload': 'Upload Mask'
};
src/locales/zh-CN/playground.ts
+3 -1
View File
@@ -134,5 +134,7 @@ export default {
'playground.image.generate': '生成图片',
'playground.image.edit': '编辑图片',
'playground.image.fitview': '适应视图',
'playground.chat.aithought': '思考过程'
'playground.chat.aithought': '思考过程',
'playground.image.mask.uploaded': '遮罩已上传',
'playground.image.mask.upload': '上传遮罩'
};
src/pages/llmodels/components/table-list.tsx
+16 -16
View File
@@ -479,7 +479,7 @@ const Models: React.FC<ModelsProps> = ({
modelId: row.model_id,
tail: InstanceRealtimeLogStatus.includes(row.state)
? undefined
: PageSize
: PageSize - 1
});
setOpenLogModal(true);
onViewLogs();
@@ -840,21 +840,6 @@ const Models: React.FC<ModelsProps> = ({
{intl?.formatMessage?.({ id: 'models.button.deploy' })}
</Button>
</Dropdown>
<Access accessible={access.canDelete}>
<Button
icon={<DeleteOutlined />}
danger
onClick={handleDeleteBatch}
disabled={!rowSelection.selectedRowKeys.length}
>
<span>
{intl?.formatMessage?.({ id: 'common.button.delete' })}
{rowSelection.selectedRowKeys.length > 0 && (
<span>({rowSelection.selectedRowKeys?.length})</span>
)}
</span>
</Button>
</Access>
<Button
icon={<IconFont type="icon-outline-play"></IconFont>}
onClick={handleStartBatch}
@@ -879,6 +864,21 @@ const Models: React.FC<ModelsProps> = ({
)}
</span>
</Button>
<Access accessible={access.canDelete}>
<Button
icon={<DeleteOutlined />}
danger
onClick={handleDeleteBatch}
disabled={!rowSelection.selectedRowKeys.length}
>
<span>
{intl?.formatMessage?.({ id: 'common.button.delete' })}
{rowSelection.selectedRowKeys.length > 0 && (
<span>({rowSelection.selectedRowKeys?.length})</span>
)}
</span>
</Button>
</Access>
</Space>
}
></PageTools>
src/pages/llmodels/config/index.ts
+2 -1
View File
@@ -198,7 +198,8 @@ export const InstanceStatusMap = {
export const InstanceRealtimeLogStatus = [
InstanceStatusMap.Downloading,
InstanceStatusMap.Initializing
InstanceStatusMap.Initializing,
InstanceStatusMap.Starting
];
export const InstanceStatusMapValue = {
src/pages/playground/components/image-edit.tsx
+53 -18
View File
@@ -125,6 +125,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const [image, setImage] = useState<string>('');
const [mask, setMask] = useState<string | null>(null);
const [uploadList, setUploadList] = useState<any[]>([]);
const [maskUpload, setMaskUpload] = useState<any[]>([]);
const [modelMeta, setModelMeta] = useState<any>({});
const [imageStatus, setImageStatus] = useState<{
isOriginal: boolean;
@@ -299,15 +300,14 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setMessageId();
setTokenResult(null);
setCurrentPrompt(current?.content || '');
setUploadList((pre) => {
return pre.map((item) => {
return {
...item,
uid: activeImgUid,
dataUrl: image
};
});
});
// setUploadList((pre) => {
// return pre.map((item) => {
// return {
// ...item,
// uid: activeImgUid
// };
// });
// });
setRouteCache(routeCachekey['/playground/text-to-image'], true);
const imgSize = _.split(finalParameters.size, 'x').map((item: string) =>
@@ -659,11 +659,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const handleUpdateImageList = useCallback((base64List: any) => {
const currentImg = _.get(base64List, '[0]', {});
const img = _.get(currentImg, 'dataUrl', '');
handleOnScaleImageSize(currentImg);
setUploadList(base64List);
setImage(img);
setActiveImgUid(_.get(base64List, '[0].uid', ''));
setImageStatus({
isOriginal: false,
isOriginal: true,
isResetNeeded: true,
width: _.get(currentImg, 'width', 512),
height: _.get(currentImg, 'height', 512)
@@ -671,6 +672,17 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setImageList([]);
}, []);
const handleUpdateMaskList = useCallback((base64List: any) => {
setMaskUpload(base64List);
const mask = _.get(base64List, '[0].dataUrl', '');
setMask(mask);
}, []);
const handleClearUploadMask = useCallback(() => {
setMaskUpload([]);
setMask(null);
}, []);
const handleOnSave = useCallback(
(data: { img: string; mask: string | null }) => {
setImageStatus((pre) => {
@@ -680,7 +692,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
};
});
setMask(data.mask || null);
setImage(data.img);
setImage(data.img || maskUpload[0]?.dataUrl || null);
},
[]
);
@@ -692,17 +704,29 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
imguid={activeImgUid}
imageStatus={imageStatus}
imageSrc={image}
disabled={loading}
disabled={loading || !imageStatus.isOriginal}
onSave={handleOnSave}
clearUploadMask={handleClearUploadMask}
maskUpload={maskUpload}
uploadButton={
<Tooltip title="Upload Image">
<>
<UploadImg
disabled={loading}
handleUpdateImgList={handleUpdateImageList}
size="middle"
accept="image/png"
accept="image/*"
></UploadImg>
</Tooltip>
<UploadImg
title={intl.formatMessage({
id: 'playground.image.mask.upload'
})}
icon={<IconFont type="icon-mosaic-2"></IconFont>}
disabled={loading}
handleUpdateImgList={handleUpdateMaskList}
size="middle"
accept="image/*"
></UploadImg>
</>
}
></CanvasImageEditor>
);
@@ -728,7 +752,14 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
</UploadImg>
</>
);
}, [image, loading, imageStatus, handleOnSave, handleUpdateImageList]);
}, [
image,
loading,
maskUpload,
imageStatus,
handleOnSave,
handleUpdateImageList
]);
const handleOnImgClick = useCallback((item: any, isOrigin: boolean) => {
if (item.progress < 100) {
@@ -909,7 +940,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
overflow: 'hidden'
}}
>
<div style={{ flex: 1, overflow: 'auto' }} ref={paramsRef}>
<div
style={{ flex: 1, overflow: 'auto' }}
ref={paramsRef}
data-overlayscrollbars-initialize
>
<div className="box">
<DynamicParams
ref={form}
@@ -961,7 +996,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
placeholer={intl.formatMessage({
id: 'playground.input.prompt.holder'
})}
actions={['clear']}
actions={[]}
title={
<span className="font-600">
{intl.formatMessage({ id: 'playground.image.prompt' })}
src/pages/playground/components/upload-img.tsx
+12 -4
View File
@@ -14,6 +14,8 @@ interface UploadImgProps {
disabled?: boolean;
children?: React.ReactNode;
accept?: string;
icon?: React.ReactNode;
title?: React.ReactNode;
handleUpdateImgList: (
imgList: {
dataUrl: string;
@@ -30,6 +32,8 @@ const UploadImg: React.FC<UploadImgProps> = ({
drag = false,
disabled = false,
children,
icon,
title,
accept = 'image/*',
size = 'small'
}) => {
@@ -135,13 +139,15 @@ const UploadImg: React.FC<UploadImgProps> = ({
>
{children ?? (
<Tooltip
title={intl.formatMessage({ id: 'playground.img.upload' })}
title={
title ?? intl.formatMessage({ id: 'playground.img.upload' })
}
>
<Button
disabled={disabled}
size={size}
type="text"
icon={<PictureOutlined />}
icon={icon ?? <PictureOutlined />}
></Button>
</Tooltip>
)}
@@ -158,13 +164,15 @@ const UploadImg: React.FC<UploadImgProps> = ({
>
{children ?? (
<Tooltip
title={intl.formatMessage({ id: 'playground.img.upload' })}
title={
title ?? intl.formatMessage({ id: 'playground.img.upload' })
}
>
<Button
disabled={disabled}
size={size}
type="text"
icon={<PictureOutlined />}
icon={icon ?? <PictureOutlined />}
></Button>
</Tooltip>
)}
src/pages/playground/config/index.ts
+8
View File
@@ -166,3 +166,11 @@ export const extractErrorMessage = (result: any) => {
''
);
};
export const scaleImageSize = (size: { width: number; height: number }) => {
const { width, height } = size;
const scale = 64;
const newWidth = Math.floor(width / scale) * scale;
const newHeight = Math.floor(height / scale) * scale;
return { width: newWidth, height: newHeight };
};