chore: set image raw size to form

src/hooks/use-broadcast.ts

@@ -0,0 +1,18 @@
+// broadcast channel hook
+
+import { useEffect, useRef } from 'react';
+
+export const useBroadcast = () => {
+  const broadcastChannel = useRef<BroadcastChannel | null>(null);
+
+  useEffect(() => {
+    broadcastChannel.current = new BroadcastChannel('broadcast_channel');
+
+    return () => {
+      broadcastChannel.current?.close();
+      console.log('broadcast channel closed');
+    };
+  }, []);
+
+  return { broadcastChannel };
+};

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 () => {

src/pages/playground/components/image-edit.tsx

@@ -629,7 +629,8 @@ const GroundImages: React.FC<MessageProps> = 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<MessageProps> = 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(

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<UploadImgProps> = ({
   const intl = useIntl();
   const uploadRef = useRef<any>(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<string> => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
@@ -41,9 +65,19 @@ const UploadImg: React.FC<UploadImgProps> = ({
   }, []);
 
   const debouncedUpdate = useCallback(
-    debounce((base64List: { dataUrl: string; uid: number | string }[]) => {
+    debounce(
-      handleUpdateImgList(base64List);
+      (
-    }, 300),
+        base64List: {
+          dataUrl: string;
+          uid: number | string;
+          rawWidth: number;
+          rawHeight: number;
+        }[]
+      ) => {
+        handleUpdateImgList(base64List);
+      },
+      300
+    ),
     [handleUpdateImgList, intl]
   );
 
@@ -52,23 +86,32 @@ const UploadImg: React.FC<UploadImgProps> = ({
       const { fileList } = info;
 
       const newFileList = await Promise.all(
-        fileList.map(async (item: UploadFile) => {
+        fileList.map(
-          if (item.originFileObj && !item.url) {
+          async (
-            const base64 = await getBase64(item.originFileObj as RcFile);
+            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
             };
           });
 

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: [
       {