From 9f40bf6f5df198aa7acfc644353730c2387bfa23 Mon Sep 17 00:00:00 2001 From: jialin Date: Tue, 4 Mar 2025 17:51:19 +0800 Subject: [PATCH] chore: generate invertion mask in image editor --- src/locales/en-US/playground.ts | 6 +- src/locales/zh-CN/playground.ts | 6 +- src/pages/llmodels/hooks/index.ts | 50 ++++++++---- .../playground/components/image-edit.tsx | 79 +++++++++++-------- .../playground/components/message-input.tsx | 1 + src/pages/playground/hooks/use-init-meta.ts | 52 +++++++----- 6 files changed, 121 insertions(+), 73 deletions(-) diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts index 50f812ee..70ad729b 100644 --- a/src/locales/en-US/playground.ts +++ b/src/locales/en-US/playground.ts @@ -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' }; diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts index 25bfe26f..618290c3 100644 --- a/src/locales/zh-CN/playground.ts +++ b/src/locales/zh-CN/playground.ts @@ -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': '遮罩' }; diff --git a/src/pages/llmodels/hooks/index.ts b/src/pages/llmodels/hooks/index.ts index e05adbba..eb670c87 100644 --- a/src/pages/llmodels/hooks/index.ts +++ b/src/pages/llmodels/hooks/index.ts @@ -6,26 +6,42 @@ import { GPUListItem, ListItem } from '../config/types'; export const useGenerateFormEditInitialValues = () => { const gpuDeviceList = useRef([]); + 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(); + 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; }; diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx index 60099d7a..2eceaf9b 100644 --- a/src/pages/playground/components/image-edit.tsx +++ b/src/pages/playground/components/image-edit.tsx @@ -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 = forwardRef((props, ref) => { handleToggleParamsStyle, setParams, updateCacheFormData, + setInitialValues, + updateParamsConfig, + setParamsConfig, form, watchFields, paramsConfig, @@ -219,45 +223,51 @@ const GroundImages: React.FC = 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 = forwardRef((props, ref) => { ); }, [ + intl, image, loading, maskUpload, @@ -388,11 +399,13 @@ const GroundImages: React.FC = forwardRef((props, ref) => { editable={false} autoBgColor={false} onClick={() => handleOnImgClick(uploadList[0], true)} - label={Origin} + label={ + {intl.formatMessage({ id: 'playground.image.origin' })} + } > ); - }, [uploadList, handleOnImgClick]); + }, [uploadList, intl, handleOnImgClick]); const renderMaskImage = useMemo(() => { if (!maskUpload.length) { @@ -409,11 +422,13 @@ const GroundImages: React.FC = forwardRef((props, ref) => { autoSize={false} editable={false} autoBgColor={false} - label={Mask} + label={ + {intl.formatMessage({ id: 'playground.image.mask' })} + } > ); - }, [maskUpload]); + }, [maskUpload, intl]); return (
diff --git a/src/pages/playground/components/message-input.tsx b/src/pages/playground/components/message-input.tsx index 6cd78841..1a02488c 100644 --- a/src/pages/playground/components/message-input.tsx +++ b/src/pages/playground/components/message-input.tsx @@ -367,6 +367,7 @@ const MessageInput: React.FC = forwardRef( title={intl.formatMessage({ id: 'common.button.clear' })} >