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

fix: do not edit a image in loading

Browse Source
This commit is contained in:
jialin
2025-01-13 19:25:30 +08:00
parent 9974fa831c
commit bf461f59de
3 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/components/ground-images.tsx
+8 -3
View File
@@ -135,10 +135,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}; };
}); });
const paramsConfig = useMemo(() => { const getNewImageSizeOptions = useCallback((metaData: any) => {
const { max_height, max_width } = modelMeta; const { max_height, max_width } = metaData || {};
if (!max_height || !max_width) { if (!max_height || !max_width) {
return ImageParamsConfig; return imageSizeOptions;
} }
const newImageSizeOptions = imageSizeOptions.filter((item) => { const newImageSizeOptions = imageSizeOptions.filter((item) => {
return item.width <= max_width && item.height <= max_height; return item.width <= max_width && item.height <= max_height;
@@ -155,6 +155,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
value: `${max_width}x${max_height}` value: `${max_width}x${max_height}`
}); });
} }
return newImageSizeOptions;
}, []);
const paramsConfig = useMemo(() => {
const newImageSizeOptions = getNewImageSizeOptions(modelMeta);
let result: ParamsSchema[] = ImageParamsConfig.map((item: ParamsSchema) => { let result: ParamsSchema[] = ImageParamsConfig.map((item: ParamsSchema) => {
if (item.name === 'size') { if (item.name === 'size') {
return { return {
src/pages/playground/components/image-edit.tsx
+13 -4
View File
@@ -155,10 +155,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}; };
}; };
const paramsConfig = useMemo(() => { const getNewImageSizeOptions = useCallback((metaData: any) => {
const { max_height, max_width } = modelMeta; const { max_height, max_width } = metaData || {};
if (!max_height || !max_width) { if (!max_height || !max_width) {
return ImageParamsConfig; return imageSizeOptions;
} }
const newImageSizeOptions = imageSizeOptions.filter((item) => { const newImageSizeOptions = imageSizeOptions.filter((item) => {
return item.width <= max_width && item.height <= max_height; return item.width <= max_width && item.height <= max_height;
@@ -175,6 +175,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
value: `${max_width}x${max_height}` value: `${max_width}x${max_height}`
}); });
} }
return newImageSizeOptions;
}, []);
const paramsConfig = useMemo(() => {
const newImageSizeOptions = getNewImageSizeOptions(modelMeta);
let result = ImageParamsConfig.map((item) => { let result = ImageParamsConfig.map((item) => {
if (item.name === 'size') { if (item.name === 'size') {
return { return {
@@ -188,7 +193,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
result = result.filter((item) => item.name !== 'size'); result = result.filter((item) => item.name !== 'size');
} }
return result; return result;
}, [modelMeta]); }, [modelMeta, getNewImageSizeOptions]);
const setImageSize = useCallback(() => { const setImageSize = useCallback(() => {
let size: Record<string, string | number> = { let size: Record<string, string | number> = {
@@ -680,6 +685,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}, [image, loading, imageStatus, handleOnSave, handleUpdateImageList]); }, [image, loading, imageStatus, handleOnSave, handleUpdateImageList]);
const handleOnImgClick = useCallback((item: any, isOrigin: boolean) => { const handleOnImgClick = useCallback((item: any, isOrigin: boolean) => {
console.log('item:', item);
if (item.progress < 100) {
return;
}
setImage(item.dataUrl); setImage(item.dataUrl);
setImageStatus({ setImageStatus({
isOriginal: isOrigin, isOriginal: isOrigin,
src/pages/playground/config/params-config.ts
+1 -1
View File
@@ -19,7 +19,7 @@ export const imageSizeOptions: {
{ label: '768x1024(3:4)', value: '768x1024', width: 768, height: 1024 }, { label: '768x1024(3:4)', value: '768x1024', width: 768, height: 1024 },
{ label: '1024x768(4:3)', value: '1024x768', width: 1024, height: 768 }, { label: '1024x768(4:3)', value: '1024x768', width: 1024, height: 768 },
{ label: '1024x576(16:9)', value: '1024x576', width: 1024, height: 576 }, { label: '1024x576(16:9)', value: '1024x576', width: 1024, height: 576 },
{ label: '576x1024(9:16)', value: '576xx1024', width: 576, height: 1024 }, { label: '576x1024(9:16)', value: '576x1024', width: 576, height: 1024 },
{ label: '1024x1024(1:1)', value: '1024x1024', width: 1024, height: 1024 } { label: '1024x1024(1:1)', value: '1024x1024', width: 1024, height: 1024 }
]; ];