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

fix: edit image: image field is null

Browse Source
This commit is contained in:
jialin
2025-03-06 16:34:55 +08:00
parent 25d70b7b49
commit b0ac85d81d
8 changed files with 996 additions and 916 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/image-editor/index.tsx
+74 -36
View File
@@ -1,7 +1,6 @@
import { KeyMap } from '@/config/hotkeys';
import {
ClearOutlined,
CloseOutlined,
DownloadOutlined,
ExpandOutlined,
FormatPainterOutlined,
@@ -12,8 +11,10 @@ import { Button, Checkbox, Slider, Tooltip } from 'antd';
import dayjs from 'dayjs';
import _ from 'lodash';
import React, {
forwardRef,
useCallback,
useEffect,
useImperativeHandle,
useMemo,
useRef,
useState
@@ -25,6 +26,7 @@ type Point = { x: number; y: number; lineWidth: number };
type Stroke = Point[];
type CanvasImageEditorProps = {
ref?: any;
imageSrc: string;
disabled?: boolean;
imguid: string | number;
@@ -43,7 +45,9 @@ type CanvasImageEditorProps = {
const COLOR = 'rgba(0, 0, 255, 0.3)';
const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
(
{
imageSrc,
disabled: isDisabled,
imageStatus,
@@ -53,7 +57,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
imguid,
uploadButton,
maskUpload
}) => {
},
ref
) => {
const MIN_SCALE = 0.5;
const MAX_SCALE = 8;
const ZOOM_SPEED = 0.1;
@@ -103,7 +109,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
return lineWidth / autoScale.current;
}, []);
const setCanvasTransformOrigin = (e: React.MouseEvent<HTMLCanvasElement>) => {
const setCanvasTransformOrigin = (
e: React.MouseEvent<HTMLCanvasElement>
) => {
if (autoScale.current <= MIN_SCALE) {
return;
}
@@ -177,7 +185,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
}, [canvasRef.current, overlayCanvasRef.current, offscreenCanvasRef.current]);
}, []);
const setStrokes = (strokes: Stroke[]) => {
strokesRef.current = strokes;
@@ -456,7 +464,12 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
const offscreenCanvas = offscreenCanvasRef.current!;
const offscreenCtx = offscreenCanvas.getContext('2d')!;
offscreenCtx.resetTransform();
offscreenCtx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
offscreenCtx.clearRect(
0,
0,
offscreenCanvas.width,
offscreenCanvas.height
);
const { current: scale } = autoScale;
const { x: translateX, y: translateY } = translatePos.current;
offscreenCtx!.setTransform(scale, 0, 0, scale, translateX, translateY);
@@ -465,8 +478,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
const onReset = useCallback(() => {
clearOverlayCanvas();
setStrokes([]);
currentStroke.current = [];
saveImage();
currentStroke.current = [];
console.log('Resetting strokes', currentStroke.current);
}, []);
@@ -585,15 +598,15 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
// fit the image to the container
autoScale.current = autoScale.current || 1;
updateCanvasSize();
updateCanvasSize();
clearCanvas();
ctx!.drawImage(img, 0, 0, canvas!.width, canvas!.height);
resolve();
};
});
}, [imageSrc, containerRef.current, canvasRef.current, updateCanvasSize]);
}, [imageSrc]);
const resetCanvas = useCallback(() => {
const canvas = canvasRef.current!;
@@ -654,34 +667,46 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
};
const initializeImage = useCallback(async () => {
if (imguid === preImguid.current) {
return;
}
await drawImage();
onScaleImageSize?.({
width: canvasRef.current!.width,
height: canvasRef.current!.height
});
if (strokeCache.current[imguid]) {
strokeCache.current[preImguid.current] = strokesRef.current;
strokesRef.current = strokeCache.current[imguid];
} else if (preImguid.current !== imguid) {
strokeCache.current[preImguid.current] = strokesRef.current;
console.log('Image status:', imageStatus, invertMask);
if (imageStatus.isResetNeeded) {
onReset();
resetCanvas();
}
preImguid.current = imguid;
if (strokesRef.current.length && imageStatus.isOriginal) {
} else if (
strokesRef.current.length &&
imageStatus.isOriginal &&
!invertMask
) {
redrawStrokes(strokesRef.current);
saveImage();
} else if (
strokesRef.current.length &&
imageStatus.isOriginal &&
invertMask
) {
invertPainting(true);
saveImage();
}
updateCursorSize();
}, [drawImage, onReset, redrawStrokes, imguid]);
const updateZoom = (scaleChange: number, mouseX: number, mouseY: number) => {
updateCursorSize();
}, [
drawImage,
imageStatus.isOriginal,
imageStatus.isResetNeeded,
invertMask
]);
const updateZoom = (
scaleChange: number,
mouseX: number,
mouseY: number
) => {
const newScale = _.round(autoScale.current + scaleChange, 2);
if (newScale < MIN_SCALE || newScale > MAX_SCALE) return;
@@ -789,11 +814,15 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
}, []);
const handleDeleteMask = () => {
clearUploadMask?.();
setInvertMask(false);
redrawStrokes(strokesRef.current);
saveImage();
};
useImperativeHandle(ref, () => ({
clearMask: handleDeleteMask
}));
useEffect(() => {
if (maskUpload?.length) {
// clear the overlay canvas
@@ -801,6 +830,12 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
}
}, [maskUpload]);
useEffect(() => {
if (disabled && cursorRef.current) {
cursorRef.current!.style.display = 'none';
}
}, [disabled]);
return (
<div className="editor-wrapper">
<div className="flex-between">
@@ -884,23 +919,22 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
<span className="flex-center upload-mask">
<span className="font-size-12">
{intl.formatMessage({ id: 'playground.image.mask.uploaded' })}
...
</span>
<Button
onClick={handleDeleteMask}
size="small"
type="text"
icon={<CloseOutlined className="close-btn"></CloseOutlined>}
></Button>
</span>
) : (
<>
{imageStatus.isOriginal && (
<>
<Tooltip
title={intl.formatMessage({
id: 'playground.image.negativeMask.tips'
})}
>
<Checkbox
onChange={handleOnChangeMask}
className="flex-center"
value={invertMask}
checked={invertMask}
disabled={isDisabled || !!maskUpload?.length}
>
<span className="font-size-12">
{intl.formatMessage({
@@ -908,6 +942,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
})}
</span>
</Checkbox>
</Tooltip>
<Tooltip
title={intl.formatMessage({
id: 'playground.image.saveMask'
@@ -924,6 +959,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
)}
</>
)}
{!imageStatus.isOriginal && (
<Tooltip
title={intl.formatMessage({ id: 'playground.image.download' })}
>
@@ -931,6 +967,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
<DownloadOutlined className="font-size-14" />
</Button>
</Tooltip>
)}
</div>
</div>
<div
@@ -970,7 +1007,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
<div
ref={cursorRef}
style={{
display: disabled ? 'none' : 'block',
display: 'none',
position: 'fixed',
width: lineWidth * activeScale,
height: lineWidth * activeScale,
@@ -984,6 +1021,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
</div>
</div>
);
};
}
);
export default React.memo(CanvasImageEditor);
src/locales/en-US/playground.ts
+5 -2
View File
@@ -141,9 +141,12 @@ export default {
'playground.image.fitview': 'Fit View',
'playground.chat.aithought': 'CoT',
'playground.image.mask.uploaded': 'Mask Uploaded',
'playground.image.mask.upload': 'Upload Mask: takes priority in submission.',
'playground.image.mask.upload':
'Upload Mask: No additional drawing allowed after upload.',
'playground.params.frequency_penalty.tips': `Number between -2.0 and 2.0. Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model's likelihood to repeat the same line verbatim.`,
'playground.params.presence_penalty.tips': `Number between -2.0 and 2.0. Positive values penalize new tokens based on whether they appear in the text so far, increasing the model's likelihood to talk about new topics.`,
'playground.image.origin': 'Original',
'playground.image.mask': 'Mask'
'playground.image.mask': 'Mask',
'playground.image.negativeMask.tips':
'After selection, no further masking can be drawn; therefore, you should draw the mask first and then check the option.'
};
src/locales/ru-RU/playground.ts
+5 -2
View File
@@ -138,9 +138,12 @@ export default {
'playground.image.fitview': 'Подогнать размер',
'playground.chat.aithought': 'Рассуждение (CoT)',
'playground.image.mask.uploaded': 'Маска загружена',
'playground.image.mask.upload':'Загрузить маску: имеет приоритет при отправке',
'playground.image.mask.upload':
'TODO: Translate key "playground.image.mask.upload"',
'playground.params.frequency_penalty.tips': `Число от -2.0 до 2.0. Положительные значения снижают вероятность повторения токенов, уже часто встречающихся в тексте, уменьшая склонность модели дословно повторять одни и те же фразы.`,
'playground.params.presence_penalty.tips': `Число от -2.0 до 2.0. Положительные значения снижают вероятность повторения любых токенов, присутствующих в тексте, повышая склонность модели к обсуждению новых тем.`,
'playground.image.origin': 'Оригинал',
'playground.image.mask': 'Маска'
'playground.image.mask': 'Маска',
'playground.image.negativeMask.tips':
'TODO: Translate key "playground.image.negativeMask.tips"'
};
src/locales/zh-CN/playground.ts
+4 -2
View File
@@ -136,9 +136,11 @@ export default {
'playground.image.fitview': '适应视图',
'playground.chat.aithought': '思考过程',
'playground.image.mask.uploaded': '遮罩已上传',
'playground.image.mask.upload': '上传遮罩：在提交时优先使用',
'playground.image.mask.upload': '上传遮罩：上传后将不可再绘制',
'playground.params.frequency_penalty.tips': `数值介于 -2.0 和 2.0 之间。正值会根据新词在文本中已出现的频率对其进行惩罚，从而降低模型逐字重复相同内容的可能性。`,
'playground.params.presence_penalty.tips': `数值介于 -2.0 和 2.0 之间。正值会根据新词是否已在文本中出现过对其进行惩罚，从而增加模型谈论新话题的可能性。`,
'playground.image.origin': '原图',
'playground.image.mask': '遮罩'
'playground.image.mask': '遮罩',
'playground.image.negativeMask.tips':
'选择后，将不可再绘制遮罩；因此，你应该先绘制遮罩然后再勾选'
};
src/pages/playground/components/image-edit.tsx
+9 -6
View File
@@ -64,6 +64,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
});
const doneImage = useRef<boolean>(false);
const [activeImgUid, setActiveImgUid] = useState<number>(0);
const imageEditorRef = useRef<any>(null);
const {
handleOnValuesChange,
@@ -110,9 +111,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
});
const imageFile = useMemo(() => {
if (!image) return null;
return base64ToFile(image, 'image');
}, [image]);
return base64ToFile(uploadList[0]?.dataUrl, 'image');
}, [uploadList]);
const maskFile = useMemo(() => {
if (!mask) return null;
@@ -123,7 +123,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
if (parameters.size === 'custom') {
return {
..._.omit(parameters, ['width', 'height', 'preview', 'random_seed']),
image: imageFile,
image: base64ToFile(image, 'image'),
mask: maskFile,
size:
parameters.width && parameters.height
@@ -279,6 +279,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const handleClearUploadMask = useCallback(() => {
setMaskUpload([]);
setMask(null);
imageEditorRef.current?.clearMask();
}, []);
const handleOnSave = useCallback(
@@ -299,6 +300,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
if (image) {
return (
<CanvasImageEditor
ref={imageEditorRef}
imguid={activeImgUid}
imageStatus={imageStatus}
imageSrc={image}
@@ -361,7 +363,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
]);
const handleOnImgClick = useCallback((item: any, isOrigin: boolean) => {
if (item.progress < 100) {
if (item.progress < 100 && !isOrigin) {
return;
}
setActiveImgUid(item.uid);
@@ -421,8 +423,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
preview={false}
loading={false}
autoSize={false}
editable={false}
editable={true}
autoBgColor={false}
onDelete={() => handleClearUploadMask()}
label={
<span>{intl.formatMessage({ id: 'playground.image.mask' })}</span>
}
src/pages/playground/hooks/use-text-image.ts
+1
View File
@@ -187,6 +187,7 @@ export default function useTextImage(props: any) {
const handleStopConversation = () => {
requestToken.current?.abort?.();
setImageList([]);
setLoading(false);
};
src/pages/resources/components/container-install.tsx
+6 -1
View File
@@ -118,7 +118,12 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
}}
></div>
)}
<HighlightCode theme="dark" code={code} lang="bash"></HighlightCode>
<HighlightCode
theme="dark"
code={code}
lang="bash"
height={130}
></HighlightCode>
<h3 className="m-b-0 m-t-10">
3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}
</h3>
src/pages/resources/config/index.ts
+26 -1
View File
@@ -44,6 +44,7 @@ export const addWorkerGuide: Record<string, any> = {
return `docker run -d --name gpustack-worker --restart=unless-stopped --gpus all -p 10150:10150 -p 40000-41024:40000-41024 -p 50000-51024:50000-51024 --ipc=host -v gpustack-worker-data:/var/lib/gpustack gpustack/gpustack:${params.tag} --server-url ${params.server} --token ${params.token} --worker-ip ${params.workerip}`;
}
},
npu: {
getToken:
'Get-Content -Path (Join-Path -Path $env:APPDATA -ChildPath "gpustack\\token") -Raw',
@@ -53,7 +54,31 @@ export const addWorkerGuide: Record<string, any> = {
token: string;
workerip: string;
}) {
return `docker run -d --name gpustack-worker --restart=unless-stopped -e ASCEND_VISIBLE_DEVICES=0 -p 10150:10150 -p 40000-41024:40000-41024 -p 50000-51024:50000-51024 --ipc=host -v gpustack-worker-data:/var/lib/gpustack gpustack/gpustack:${params.tag} --server-url ${params.server} --token ${params.token} --worker-ip ${params.workerip}`;
return `docker run -d --name gpustack-worker \\
--restart=unless-stopped \\
--device /dev/davinci0 \\
--device /dev/davinci1 \\
--device /dev/davinci2 \\
--device /dev/davinci3 \\
--device /dev/davinci4 \\
--device /dev/davinci5 \\
--device /dev/davinci6 \\
--device /dev/davinci7 \\
--device /dev/davinci_manager \\
--device /dev/devmm_svm \\
--device /dev/hisi_hdc \\
-v /usr/local/dcmi:/usr/local/dcmi \\
-v /usr/local/bin/npu-smi:/usr/local/bin/npu-smi \\
-v /usr/local/Ascend/driver/lib64/:/usr/local/Ascend/driver/lib64/ \\
-v /usr/local/Ascend/driver/version.info:/usr/local/Ascend/driver/version.info \\
-v /etc/ascend_install.info:/etc/ascend_install.info \\
-p 10150:10150 \\
-p 40000-41024:40000-41024 \\
-p 50000-51024:50000-51024 \\
--ipc=host \\
-v gpustack-worker-data:/var/lib/gpustack \\
gpustack/gpustack:${params.tag} \\
--server-url ${params.server} --token ${params.token} --worker-ip ${params.workerip}`;
}
},
musa: {