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

fix: image progress display

Browse Source
This commit is contained in:
jialin
2025-01-15 09:51:29 +08:00
parent 35991ff5d6
commit 9553aa944a
5 changed files with 58 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/image-editor/index.less
+4
View File
@@ -16,4 +16,8 @@
align-items: center;
overflow: hidden;
}
.overlay-canvas:hover {
cursor: 'none !important';
}
}
src/components/image-editor/index.tsx
+30 -10
View File
@@ -18,6 +18,7 @@ type Stroke = Point[];
type CanvasImageEditorProps = {
imageSrc: string;
disabled?: boolean;
imguid: string | number;
onSave: (imageData: { mask: string; img: string }) => void;
uploadButton: React.ReactNode;
imageStatus: {
@@ -33,6 +34,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
disabled,
imageStatus,
onSave,
imguid,
uploadButton
}) => {
const MIN_SCALE = 0.5;
@@ -55,8 +57,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
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 originRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
const preAutoScale = useRef<number>(1);
const strokeCache = useRef<any>({});
const preImguid = useRef<string | number>('');
const getTransformedPoint = (offsetX: number, offsetY: number) => {
const { current: scale } = autoScale;
@@ -67,13 +69,13 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
const transformedY = (offsetY + lineWidth / 2 - translateY) / scale;
return {
x: Math.round(transformedX),
y: Math.round(transformedY)
x: _.round(transformedX),
y: _.round(transformedY)
};
};
const getTransformLineWidth = (lineWidth: number) => {
return lineWidth / autoScale.current;
return lineWidth;
};
const setCanvasTransformOrigin = (e: React.MouseEvent<HTMLCanvasElement>) => {
@@ -214,6 +216,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
stroke.forEach((point, i) => {
const { x, y } = getTransformedPoint(point.x, point.y);
console.log('Drawing point:');
ctx.lineWidth = getTransformLineWidth(point.lineWidth);
if (i === 0) {
ctx.moveTo(x, y);
@@ -487,6 +490,15 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
await drawImage();
setImgLoaded(true);
console.log('Image Loaded:', imageStatus, strokesRef.current);
// if (strokeCache.current[imguid]) {
// strokesRef.current = strokeCache.current[imguid];
// } else if (preImguid.current !== imguid) {
// strokeCache.current[preImguid.current] = strokesRef.current;
// onReset();
// resetCanvas();
// preImguid.current = imguid;
// }
if (imageStatus.isOriginal) {
redrawStrokes(strokesRef.current, 'initialize');
} else if (imageStatus.isResetNeeded) {
@@ -540,6 +552,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
const handleOnWheel = (event: any) => {
handleZoom(event);
updateCursorSize();
// redrawStrokes(strokesRef.current);
};
const handleFitView = () => {
@@ -552,6 +565,11 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
redrawStrokes(strokesRef.current);
};
const handleBrushSizeChange = (value: number) => {
setLineWidth(value);
cursorRef.current!.style.width = `${value * autoScale.current}px`;
cursorRef.current!.style.height = `${value * autoScale.current}px`;
};
useEffect(() => {
initializeImage();
}, [initializeImage]);
@@ -607,7 +625,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
defaultValue={lineWidth}
min={10}
max={60}
onChange={(value) => setLineWidth(value)}
onChange={handleBrushSizeChange}
/>
</div>
}
@@ -680,7 +698,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
<canvas ref={canvasRef} style={{ position: 'absolute', zIndex: 1 }} />
<canvas
ref={overlayCanvasRef}
style={{ position: 'absolute', zIndex: 2 }}
className="overlay-canvas"
style={{ position: 'absolute', zIndex: 10, cursor: 'none' }}
onMouseDown={startDrawing}
onMouseUp={endDrawing}
onMouseEnter={handleMouseEnter}
@@ -699,12 +718,13 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
style={{
display: 'none',
position: 'fixed',
width: lineWidth,
height: lineWidth,
width: lineWidth * autoScale.current,
height: lineWidth * autoScale.current,
backgroundColor: COLOR,
borderRadius: '50%',
pointerEvents: 'none',
zIndex: 100
cursor: 'none',
zIndex: 5
}}
/>
</div>
src/pages/playground/components/image-edit.tsx
+20 -10
View File
@@ -130,8 +130,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
isOriginal: false,
isResetNeeded: false
});
const doneImage = useRef<boolean>(false);
const cacheFormData = useRef<any>({});
const size = Form.useWatch('size', form.current?.form);
const [imguid, setImgUid] = useState<number>(0);
const { initialize, updateScrollerPosition } = useOverlayScroller();
const { initialize: innitializeParams } = useOverlayScroller();
@@ -216,6 +218,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const imageFile = useMemo(() => {
if (!image) return null;
console.log('image>>>>>>>>>>>>>>', image);
return base64ToFile(image, 'image');
}, [image]);
@@ -306,14 +309,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
};
if (parameters.preview === 'preview') {
stream_options = {
...stream_options,
stream_options_preview: true
};
}
if (parameters.preview === 'preview_faster') {
stream_options = {
...stream_options,
stream_options_preview_faster: true
};
}
@@ -385,12 +386,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
} else if (item.b64_json) {
imgItem.dataUrl = `data:image/png;base64,${item.b64_json}`;
}
console.log(
'stream_options_chunk_result:',
params.stream_options_chunk_result
);
const progress = _.round(item.progress, 0);
console.log('progress:', item, progress);
newImageList[item.index] = {
dataUrl: imgItem.dataUrl,
height: imgSize[1],
@@ -400,8 +397,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
uid: imgItem.uid,
span: imgItem.span,
loading: params.stream_options_chunk_result
? false
: progress < 100,
? progress < 100
: false,
preview: false,
progress: progress
};
@@ -628,6 +625,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const img = _.get(base64List, '[0].dataUrl', '');
setUploadList(base64List);
setImage(img);
setImgUid(_.get(base64List, '[0].uid', ''));
setImageStatus({
isOriginal: false,
isResetNeeded: true
@@ -648,6 +646,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
if (image) {
return (
<CanvasImageEditor
imguid={imguid}
imageStatus={imageStatus}
imageSrc={image}
disabled={loading}
@@ -689,10 +688,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}, [image, loading, imageStatus, handleOnSave, handleUpdateImageList]);
const handleOnImgClick = useCallback((item: any, isOrigin: boolean) => {
console.log('item:', item);
console.log('item:99', item);
if (item.progress < 100) {
return;
}
setImgUid(item.uid);
setImage(item.dataUrl);
setImageStatus({
isOriginal: isOrigin,
@@ -700,6 +700,16 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
});
}, []);
useEffect(() => {
if (imageList.length > 0) {
const doneImg = imageList.find((item) => item.progress === 100);
if (doneImg && !doneImage.current) {
doneImage.current = true;
handleOnImgClick(doneImg, false);
}
}
}, [imageList, handleOnImgClick]);
const renderOriginImage = useMemo(() => {
if (!uploadList.length) {
return null;
src/pages/playground/images.tsx
+2 -2
View File
@@ -32,12 +32,12 @@ const TextToImages: React.FC = () => {
const optionsList = [
{
label: 'Generate',
label: intl.formatMessage({ id: 'playground.image.generate' }),
value: TabsValueMap.Tab1,
icon: <DiffOutlined />
},
{
label: 'Edit',
label: intl.formatMessage({ id: 'playground.image.edit' }),
value: TabsValueMap.Tab2,
icon: <HighlightOutlined />
}
src/utils/index.ts
+2 -1
View File
@@ -149,7 +149,8 @@ export const generateRandomNumber = () => {
};
function base64ToBlob(base64: string, contentType = '', sliceSize = 512) {
const byteCharacters = atob(base64.split(',')[1]); // 去掉 Base64 前缀部分
const base64Content = base64.replace(/^data:image\/(png|jpg);base64,/, '');
const byteCharacters = atob(base64Content);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {