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

chore: generate invertion mask in image editor

Browse Source
This commit is contained in:
jialin
2025-03-04 17:52:14 +08:00
parent 8a98aef28c
commit 9f40bf6f5d
6 changed files with 121 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/locales/en-US/playground.ts
+4 -2
View File
@@ -141,7 +141,9 @@ export default {
'playground.image.fitview': 'Fit View',
'playground.chat.aithought': 'CoT',
'playground.image.mask.uploaded': 'Mask Uploaded',
'playground.image.mask.upload': 'Upload Mask',
'playground.image.mask.upload': 'Upload Mask: takes priority in submission.',
'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.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'
};
src/locales/zh-CN/playground.ts
+4 -2
View File
@@ -136,7 +136,9 @@ 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.params.presence_penalty.tips': `数值介于 -2.0 和 2.0 之间。正值会根据新词是否已在文本中出现过对其进行惩罚，从而增加模型谈论新话题的可能性。`,
'playground.image.origin': '原图',
'playground.image.mask': '遮罩'
};
src/pages/llmodels/hooks/index.ts
+33 -17
View File
@@ -6,26 +6,42 @@ import { GPUListItem, ListItem } from '../config/types';
export const useGenerateFormEditInitialValues = () => {
const gpuDeviceList = useRef<any[]>([]);
const generateCascaderOptions = (list: GPUListItem[]) => {
const workerFields = ['worker_name', 'worker_id', 'worker_ip'];
const workerFields = new Set(['worker_name', 'worker_id', 'worker_ip']);
const workers = _.groupBy(list, 'worker_name');
const workersMap = new Map<string, GPUListItem[]>();
for (const item of list) {
if (!workersMap.has(item.worker_name)) {
workersMap.set(item.worker_name, []);
}
workersMap.get(item.worker_name)!.push(item);
}
const workerList = _.map(workers, (value: GPUListItem[]) => {
return {
label: `${value[0].worker_name}`,
value: value[0].worker_name,
parent: true,
..._.pick(value[0], workerFields),
children: _.map(value, (item: GPUListItem) => {
return {
label: `${item.name}`,
value: item.id,
..._.omit(item, workerFields)
};
})
};
});
const workerList = Array.from(workersMap.entries()).map(
([workerName, items]) => {
const firstItem = items[0];
return {
label: workerName,
value: workerName,
parent: true,
children: items
.map((item) => ({
label: item.name,
value: item.id,
index: item.index,
...Object.fromEntries(
Object.entries(item).filter(([key]) => !workerFields.has(key))
)
}))
.sort((a, b) => a.index - b.index),
...Object.fromEntries(
Object.entries(firstItem).filter(([key]) => workerFields.has(key))
)
};
}
);
return workerList;
};
src/pages/playground/components/image-edit.tsx
+47 -32
View File
@@ -22,6 +22,7 @@ import React, {
useState
} from 'react';
import { EDIT_IMAGE_API } from '../apis';
import { scaleImageSize } from '../config';
import { useInitImageMeta } from '../hooks/use-init-meta';
import useTextImage from '../hooks/use-text-image';
import '../style/ground-left.less';
@@ -69,6 +70,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
handleToggleParamsStyle,
setParams,
updateCacheFormData,
setInitialValues,
updateParamsConfig,
setParamsConfig,
form,
watchFields,
paramsConfig,
@@ -219,45 +223,51 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
};
const handleOnScaleImageSize = useCallback(
(data: { width: number; height: number }) => {
const { width, height } = data;
form.current?.form?.setFieldsValue({
(data: { rawWidth: number; rawHeight: number }) => {
const { width, height } = scaleImageSize({
width: data.rawWidth,
height: data.rawHeight
});
const newParamsConfig = updateParamsConfig({
size: 'custom',
isOpenaiCompatible
});
setParamsConfig(newParamsConfig);
const newParameters = {
...parameters,
size: 'custom',
width: width || 512,
height: height || 512
});
setParams((pre: object) => {
return {
...pre,
size: 'custom',
width: width || 512,
height: height || 512
};
});
};
setParams(newParameters);
updateCacheFormData({
size: 'custom',
width: width || 512,
height: height || 512
});
setInitialValues(newParameters);
},
[]
[parameters, isOpenaiCompatible]
);
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: true,
isResetNeeded: true,
width: _.get(currentImg, 'width', 512),
height: _.get(currentImg, 'height', 512)
});
setImageList([]);
}, []);
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: true,
isResetNeeded: true,
width: _.get(currentImg, 'width', 512),
height: _.get(currentImg, 'height', 512)
});
setImageList([]);
},
[handleOnScaleImageSize]
);
const handleUpdateMaskList = useCallback((base64List: any) => {
setMaskUpload(base64List);
@@ -340,6 +350,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
</>
);
}, [
intl,
image,
loading,
maskUpload,
@@ -388,11 +399,13 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
editable={false}
autoBgColor={false}
onClick={() => handleOnImgClick(uploadList[0], true)}
label={<span>Origin</span>}
label={
<span>{intl.formatMessage({ id: 'playground.image.origin' })}</span>
}
></SingleImage>
</>
);
}, [uploadList, handleOnImgClick]);
}, [uploadList, intl, handleOnImgClick]);
const renderMaskImage = useMemo(() => {
if (!maskUpload.length) {
@@ -409,11 +422,13 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
autoSize={false}
editable={false}
autoBgColor={false}
label={<span>Mask</span>}
label={
<span>{intl.formatMessage({ id: 'playground.image.mask' })}</span>
}
></SingleImage>
</>
);
}, [maskUpload]);
}, [maskUpload, intl]);
return (
<div className="ground-left-wrapper">
src/pages/playground/components/message-input.tsx
+1
View File
@@ -367,6 +367,7 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
title={intl.formatMessage({ id: 'common.button.clear' })}
>
<Button
disabled={loading}
type="text"
icon={<ClearOutlined />}
size="middle"
src/pages/playground/hooks/use-init-meta.ts
+32 -20
View File
@@ -297,6 +297,28 @@ export const useInitImageMeta = (props: MessageProps) => {
};
};
const updateParamsConfig = (values: {
size: string;
isOpenaiCompatible: boolean;
}) => {
// update config
if (values.size === 'custom') {
return [
...basicParamsConfig,
...ImageCustomSizeConfig,
...(values.isOpenaiCompatible
? ImageconstExtraConfig
: ImageAdvancedParamsConfig)
];
}
return [
...basicParamsConfig,
...(values.isOpenaiCompatible
? ImageconstExtraConfig
: ImageAdvancedParamsConfig)
];
};
const updateCacheFormData = (values: Record<string, any>) => {
_.merge(cacheFormData.current, values);
};
@@ -322,28 +344,15 @@ export const useInitImageMeta = (props: MessageProps) => {
}
// update config
if (values.size === 'custom') {
const config = [
...basicParamsConfig,
...ImageCustomSizeConfig,
...(isOpenaiCompatible
? ImageAdvancedParamsConfig
: ImageconstExtraConfig)
];
setParamsConfig(config);
} else {
const config = [
...basicParamsConfig,
...(isOpenaiCompatible
? ImageAdvancedParamsConfig
: ImageconstExtraConfig)
];
setParamsConfig(config);
}
const newParamsConfig = updateParamsConfig({
size: values.size,
isOpenaiCompatible: !isOpenaiCompatible
});
form.current?.form?.setFieldsValue({
...values,
model: parameters.model
});
setParamsConfig(newParamsConfig);
setParams({
...values,
model: parameters.model
@@ -357,7 +366,7 @@ export const useInitImageMeta = (props: MessageProps) => {
const handleOnModelChange = useCallback(
(val: string) => {
if (!val) return;
if (!val || val === parameters.model) return;
const model = modelList.find((item) => item.value === val);
const { form: initialData, sizeOptions } = extractIMGMeta(model?.meta);
const newParamsConfig = generateImageParamsConfig(model, sizeOptions);
@@ -380,7 +389,7 @@ export const useInitImageMeta = (props: MessageProps) => {
});
updateCacheFormData(initialData);
},
[modelList, isOpenaiCompatible]
[modelList, isOpenaiCompatible, parameters.model]
);
const handleOnValuesChange = useCallback(
@@ -446,6 +455,9 @@ export const useInitImageMeta = (props: MessageProps) => {
handleOnValuesChange,
handleToggleParamsStyle,
setParams,
setInitialValues,
updateParamsConfig,
setParamsConfig,
form,
watchFields,
paramsConfig,