diff --git a/src/hooks/use-broadcast.ts b/src/hooks/use-broadcast.ts new file mode 100644 index 00000000..892682c1 --- /dev/null +++ b/src/hooks/use-broadcast.ts @@ -0,0 +1,18 @@ +// broadcast channel hook + +import { useEffect, useRef } from 'react'; + +export const useBroadcast = () => { + const broadcastChannel = useRef(null); + + useEffect(() => { + broadcastChannel.current = new BroadcastChannel('broadcast_channel'); + + return () => { + broadcastChannel.current?.close(); + console.log('broadcast channel closed'); + }; + }, []); + + return { broadcastChannel }; +}; diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx index f96fcca0..4a6b4743 100644 --- a/src/pages/llmodels/index.tsx +++ b/src/pages/llmodels/index.tsx @@ -148,10 +148,6 @@ const Models: React.FC = () => { const updateInstanceHandler = (list: any) => { setModelInstances(list); - window.postMessage( - { type: INSTANCE_SYNC, data: list }, - window.location.origin - ); }; const createModelsChunkRequest = useCallback(async () => { diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx index 5e676955..4d9e7d28 100644 --- a/src/pages/playground/components/image-edit.tsx +++ b/src/pages/playground/components/image-edit.tsx @@ -629,7 +629,8 @@ const GroundImages: React.FC = forwardRef((props, ref) => { const handleUpdateImageList = useCallback((base64List: any) => { console.log('updateimagelist=========', base64List); - const img = _.get(base64List, '[0].dataUrl', ''); + const currentImg = _.get(base64List, '[0]', {}); + const img = _.get(currentImg, 'dataUrl', ''); setUploadList(base64List); setImage(img); setActiveImgUid(_.get(base64List, '[0].uid', '')); @@ -638,6 +639,24 @@ const GroundImages: React.FC = forwardRef((props, ref) => { isResetNeeded: true }); setImageList([]); + form.current?.form?.setFieldsValue({ + size: 'custom', + width: currentImg.rawWidth || 512, + height: currentImg.rawHeight || 512 + }); + setParams((pre: object) => { + return { + ...pre, + size: 'custom', + width: currentImg.rawWidth || 512, + height: currentImg.rawHeight || 512 + }; + }); + updateCacheFormData({ + size: 'custom', + width: currentImg.rawWidth || 512, + height: currentImg.rawHeight || 512 + }); }, []); const handleOnSave = useCallback( diff --git a/src/pages/playground/components/upload-img.tsx b/src/pages/playground/components/upload-img.tsx index b35efa35..72a5cc0c 100644 --- a/src/pages/playground/components/upload-img.tsx +++ b/src/pages/playground/components/upload-img.tsx @@ -3,7 +3,7 @@ import { useIntl } from '@umijs/max'; import { Button, Tooltip, Upload } from 'antd'; import type { UploadFile } from 'antd/es/upload'; import { RcFile } from 'antd/es/upload'; -import { debounce } from 'lodash'; +import { debounce, round } from 'lodash'; import React, { useCallback, useRef } from 'react'; interface UploadImgProps { @@ -15,7 +15,12 @@ interface UploadImgProps { children?: React.ReactNode; accept?: string; handleUpdateImgList: ( - imgList: { dataUrl: string; uid: number | string }[] + imgList: { + dataUrl: string; + uid: number | string; + rawWidth: number; + rawHeight: number; + }[] ) => void; } @@ -31,6 +36,25 @@ const UploadImg: React.FC = ({ const intl = useIntl(); const uploadRef = useRef(null); + const getImgSize = useCallback( + (url: string): Promise<{ rawWidth: number; rawHeight: number }> => { + return new Promise((resolve) => { + const img = new Image(); + img.onload = () => { + resolve({ + rawWidth: round(img.width, 0), + rawHeight: round(img.height, 0) + }); + }; + img.onerror = () => { + resolve({ rawWidth: 0, rawHeight: 0 }); + }; + img.src = url; + }); + }, + [] + ); + const getBase64 = useCallback((file: RcFile): Promise => { return new Promise((resolve, reject) => { const reader = new FileReader(); @@ -41,9 +65,19 @@ const UploadImg: React.FC = ({ }, []); const debouncedUpdate = useCallback( - debounce((base64List: { dataUrl: string; uid: number | string }[]) => { - handleUpdateImgList(base64List); - }, 300), + debounce( + ( + base64List: { + dataUrl: string; + uid: number | string; + rawWidth: number; + rawHeight: number; + }[] + ) => { + handleUpdateImgList(base64List); + }, + 300 + ), [handleUpdateImgList, intl] ); @@ -52,23 +86,32 @@ const UploadImg: React.FC = ({ const { fileList } = info; const newFileList = await Promise.all( - fileList.map(async (item: UploadFile) => { - if (item.originFileObj && !item.url) { - const base64 = await getBase64(item.originFileObj as RcFile); + fileList.map( + async ( + item: UploadFile & { rawWidth: number; rawHeight: number } + ) => { + if (item.originFileObj && !item.url) { + const base64 = await getBase64(item.originFileObj as RcFile); + const { rawWidth, rawHeight } = await getImgSize(base64); - item.url = base64; + item.url = base64; + item.rawWidth = rawWidth; + item.rawHeight = rawHeight; + } + return item; } - return item; - }) + ) ); if (newFileList.length > 0) { const base64List = newFileList .filter((sitem) => sitem.url) - .map((item: UploadFile) => { + .map((item: UploadFile & { rawHeight: number; rawWidth: number }) => { return { dataUrl: item.url as string, - uid: item.uid + uid: item.uid, + rawWidth: item.rawWidth, + rawHeight: item.rawHeight }; }); diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts index 638780bf..7ba4b42d 100644 --- a/src/pages/playground/config/params-config.ts +++ b/src/pages/playground/config/params-config.ts @@ -367,14 +367,15 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [ ] }, { - type: 'Input', + type: 'TextArea', name: 'negative_prompt', // e.g. ng_deepnegative_v1_75t,(badhandv4:1.2),EasyNegative,(worst quality:2), label: { text: 'playground.image.params.negativePrompt', isLocalized: true }, attrs: { - trim: false + trim: false, + autoSize: { minRows: 2, maxRows: 2 } }, rules: [ { @@ -450,7 +451,7 @@ export const ImageCustomSizeConfig: ParamsSchema[] = [ min: 256, max: 3200, step: 64, - inputnumber: false + inputnumber: true }, rules: [ { @@ -470,7 +471,7 @@ export const ImageCustomSizeConfig: ParamsSchema[] = [ min: 256, max: 3200, step: 64, - inputnumber: false + inputnumber: true }, rules: [ {